首页

src/api/home/index.ts

@@ -0,0 +1,164 @@
+import request from '@/utils/request';
+
+// 头部分类
+export function getProductCategoryTree(query: any) {
+  return request({
+    url: '/product/indexProduct/getProductCategoryTree',
+    method: 'get',
+    params: query
+  });
+}
+
+// 头部轮播
+export function getHomeAdList(query: any) {
+  return request({
+    url: '/system/indexSystem/getHomeAdList',
+    method: 'get',
+    params: query
+  });
+}
+
+//头部优易资讯
+export function getYouYiZiXunPage(query: any) {
+  return request({
+    url: '/system/indexSystem/getYouYiZiXunPage',
+    method: 'get',
+    params: query
+  });
+}
+
+//头部会员权益
+export function getEnterpriseMemberEquityList(query: any) {
+  return request({
+    url: '/system/indexSystem/getEnterpriseMemberEquityList',
+    method: 'get',
+    params: query
+  });
+}
+
+//热门方案标题
+export function getHotSchemeTitle(query: any) {
+  return request({
+    url: '/system/indexSystem/getHotSchemeTitle',
+    method: 'get',
+    params: query
+  });
+}
+
+//热门方案列表
+export function getHotSchemeList(query: any) {
+  return request({
+    url: '/system/indexSystem/getHotSchemeList',
+    method: 'get',
+    params: query
+  });
+}
+
+//场景采购标题
+export function getScenePurchaseTitle(query: any) {
+  return request({
+    url: '/system/indexSystem/getScenePurchaseTitle',
+    method: 'get',
+    params: query
+  });
+}
+
+//场景采购列表
+export function getScenePurchaseList(query: any) {
+  return request({
+    url: '/system/indexSystem/getScenePurchaseList',
+    method: 'get',
+    params: query
+  });
+}
+
+//大牌推荐标题（平台闪购标题）
+export function getPlatformFlashSaleTitle(query: any) {
+  return request({
+    url: '/system/indexSystem/getPlatformFlashSaleTitle',
+    method: 'get',
+    params: query
+  });
+}
+
+//大牌推荐列表（平台闪购列表）
+export function getPlatformFlashSaleList(query: any) {
+  return request({
+    url: '/system/indexSystem/getPlatformFlashSaleList',
+    method: 'get',
+    params: query
+  });
+}
+
+//行家精选标题
+export function getExpertSelectionTitle(query: any) {
+  return request({
+    url: '/system/indexSystem/getExpertSelectionTitle',
+    method: 'get',
+    params: query
+  });
+}
+
+//行家精选列表
+export function getExpertSelectionList(query: any) {
+  return request({
+    url: '/system/indexSystem/getExpertSelectionList',
+    method: 'get',
+    params: query
+  });
+}
+
+//采购指南标题
+export function getPurchaseGuideTitle(query: any) {
+  return request({
+    url: '/system/indexSystem/getPurchaseGuideTitle',
+    method: 'get',
+    params: query
+  });
+}
+
+//外面循环
+export function getClassificationFloorList(query: any) {
+  return request({
+    url: '/system/indexSystem/getClassificationFloorList',
+    method: 'get',
+    params: query
+  });
+}
+
+//分类楼层详情（平台装修-分类楼层-详情）
+
+export const getClassificationFloorDetail = (id: any) => {
+  return request({
+    url: '/system/indexSystem/getClassificationFloorDetail/' + id,
+    method: 'get'
+  });
+};
+
+//分类楼层标签（平台装修-分类楼层-标签）
+
+export const getClassificationFloorLabel = (id: any) => {
+  return request({
+    url: '/system/indexSystem/getClassificationFloorLabel/' + id,
+    method: 'get'
+  });
+};
+
+//分类楼层详情（平台装修-分类楼层-详情）
+export const getClassificationFloorDetail2 = (id: any) => {
+  return request({
+    url: '/product/indexProduct/getClassificationFloorDetail/' + id,
+    method: 'get'
+  });
+};
+
+
+//项目案例标题（平台装修-项目案例）
+
+export function getProjectCaseTitle(query: any) {
+  return request({
+    url: '/system/indexSystem/getProjectCaseTitle',
+    method: 'get',
+    params: query
+  });
+}

src/router/index.ts

@@ -66,7 +66,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/index',
         component: () => import('@/views/index.vue'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: 'dashboard', affix: true, nav: true }
       },
       {
         path: 'solve/index',

src/views/index.vue

@@ -1,7 +1,1310 @@
 <template>
-  <div class=""></div>
+  <div class="home-pages">
+    <!--  头部 -->
+    <div class="home-head" @mouseleave="leaveClassify">
+      <div class="classify">
+        <div
+          class="classify-list"
+          v-for="(item, index) in classifyList"
+          :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
+          :key="index"
+          @mouseenter="enterClassify(item)"
+        >
+          <div class="label ellipsis">{{ item.label }}</div>
+          <div class="info info1 ellipsis" v-if="item.extra && item.extra.oneLable1">{{ item.extra.oneLable1 }}</div>
+          <div class="info ellipsis" v-if="item.extra && item.extra.oneLable2">{{ item.extra.oneLable2 }}</div>
+          <div class="classify-border" v-if="item.id == classifyId && classifyShow"></div>
+        </div>
+      </div>
+      <div class="classify-bos" v-if="classifyShow">
+        <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item">
+          <div class="two-level ellipsis">{{ item.label || '' }}</div>
+          <el-icon class="classify-icon" :size="14" color="#364153">
+            <ArrowRight />
+          </el-icon>
+          <div class="classify-label">
+            <div v-for="(item1, index1) in item.children" :key="index1">{{ item1.label || '' }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="head-bos">
+        <div class="carousel">
+          <el-carousel trigger="click" height="407px">
+            <el-carousel-item v-for="item in carouselList" :key="item">
+              <img :src="item.imageUrl" alt="" />
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="head-box"></div>
+      </div>
+      <div class="head-right">
+        <div class="login-bos">
+          <div class="login-box">
+            <img src="@/assets/images/profile.jpg" alt="" />
+            <div>
+              <div class="login1">您好,欢迎来到优易达</div>
+              <div class="login2">请先登录</div>
+            </div>
+          </div>
+          <div>
+            <el-button type="primary" round size="small" style="width: 64px">登录</el-button>
+            <el-button type="primary" plain round size="small" style="width: 64px">注册</el-button>
+          </div>
+        </div>
+        <div class="real-time">
+          <div class="real-title flex-row-between">
+            <div class="real1">优易资讯</div>
+            <div class="real2 flex-row-start">
+              <div>更多</div>
+              <el-icon :size="13" color="#83899F">
+                <ArrowRight />
+              </el-icon>
+            </div>
+          </div>
+          <div class="real-list ellipsis" v-for="(item, index) in realList" :key="index">{{ item.announcementTitle }}</div>
+        </div>
+        <div class="interests">
+          <div class="interests-title">企业会员权益</div>
+          <div class="interests-bos">
+            <div v-for="(item, index) in interestsList" :key="index" class="interests-item flex-column-center">
+              <img :src="item.imageUrl" alt="" />
+              <div>{{ item.title }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 热门方案 -->
+    <div class="home-title flex-row-between">
+      <div>
+        <span class="title1">{{ hotTitle.title }}</span>
+        <span class="title2">{{ hotTitle.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start">
+        <div style="margin-right: 5px">{{ hotTitle.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+    <div class="hot-bos">
+      <template v-for="(item, index) in hotList" :key="index">
+        <div class="hot-list flex-column-center" v-if="Number(index) < 4">
+          <div class="hot1">{{ item.advertTitle }}</div>
+          <div class="hot2">{{ item.advertBrief }}</div>
+          <img :src="item.img" alt="" />
+        </div>
+      </template>
+    </div>
+    <!-- 场景采购 -->
+    <div class="home-title flex-row-between">
+      <div>
+        <span class="title1">{{ sceneTitle.title }}</span>
+        <span class="title2">{{ sceneTitle.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start">
+        <div style="margin-right: 5px">{{ sceneTitle.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+    <div class="scene-bos">
+      <template v-for="(item, index) in sceneList" :key="index">
+        <div class="scene-list" v-if="Number(index) < 5">
+          <div class="scene-box">
+            <div class="scene1">{{ item.advertTitle }}</div>
+            <div class="scene2">{{ item.advertBrief }}</div>
+          </div>
+          <img :src="item.img" alt="" />
+        </div>
+      </template>
+    </div>
+    <!-- 大牌推荐 -->
+    <div class="home-title flex-row-between">
+      <div>
+        <span class="title1">{{ bigbrandTitle.title }}</span>
+        <span class="title2">{{ bigbrandTitle.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start">
+        <div style="margin-right: 5px">{{ bigbrandTitle.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+    <div class="big-brand">
+      <img class="bigBrand-one" :src="bigbrandOne.img" alt="" />
+      <div class="bigBrand-bos">
+        <template v-for="(item, index) in bigbrandList" :key="index">
+          <div class="bigBrand-list" v-if="Number(index) < 10">
+            <img :src="item.img" alt="" />
+            <div class="bigBrand1">{{ item.advertTitle || '' }}</div>
+            <div class="bigBrand2">
+              {{ item.advertBrief || '' }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 行家精选 -->
+    <div class="home-title flex-row-between">
+      <div>
+        <span class="title1">{{ expertTitle.title }}</span>
+        <span class="title2">{{ expertTitle.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start">
+        <div style="margin-right: 5px">{{ expertTitle.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+    <div class="expert-bos">
+      <template v-for="(item, index) in expertList" :key="index">
+        <div class="expert-list" v-if="Number(index) < 5">
+          <img :src="item.productImage" alt="" />
+          <div class="itemName ellipsis">{{ item.itemName || '格力KFR-72LW/定频冷暖空调柜机3P' }}</div>
+          <div class="price">
+            <span class="memberPrice">¥12{{ item.memberPrice }}</span>
+            <span class="marketPrice">¥30{{ item.marketPrice }}</span>
+          </div>
+        </div>
+      </template>
+    </div>
+    <!-- 采购指南 -->
+    <div class="home-title flex-row-between">
+      <div>
+        <span class="title1">{{ procureTitle.title }}</span>
+        <span class="title2">{{ procureTitle.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start">
+        <div style="margin-right: 5px">{{ procureTitle.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+    <div class="procure-bos">
+      <template v-for="(item, index) in expertList" :key="index">
+        <div class="procure-list" v-if="Number(index) < 3">
+          <img :src="item.productImage" alt="" />
+          <div class="procure1">{{ item.itemName || '办公室' }}</div>
+          <div class="procure2">{{ item.itemName || '干款好礼·百大品牌·个性定制' }}</div>
+        </div>
+      </template>
+    </div>
+    <!-- 循环-商品 -->
+    <div v-for="(item1, index1) in homeList" :key="index1">
+      <!-- 头部 -->
+      <div class="home-title flex-row-between">
+        <div>
+          <span class="title1">{{ item1.floorName }}</span>
+          <span class="title2">{{ item1.floorDescribe }}</span>
+        </div>
+        <div class="title-more flex-row-start">
+          <div style="margin-right: 5px">{{ item1.floorLabel }}</div>
+          <el-icon :size="13" color="#83899F">
+            <ArrowRight />
+          </el-icon>
+        </div>
+      </div>
+      <!-- 商品 -->
+      <div class="goods-bos" v-if="item1.imgOne">
+        <img class="goods-img" :src="item1.imgOne" alt="" />
+        <div class="home1-bos" v-if="item1.home1List && item1.home1List.length > 0">
+          <div class="floorName">{{ item1.floorName }}</div>
+          <div v-for="(item2, index2) in item1.home1List" :key="index2" class="home1-list">
+            <img :src="item2.img" alt="" />
+            <div style="flex: 1; width: 0">
+              <div class="advertiseName">{{ item2.advertiseName }}</div>
+              <div class="advertiseDescribe ellipsis">{{ item2.advertiseDescribe }}新政策执行中心城中心城中心啊实打实大苏打实打实水水的</div>
+            </div>
+          </div>
+        </div>
+        <div class="home2-bos" v-if="item1.home2List && item1.home2List.length > 0">
+          <div>
+            <div class="floorName">发现</div>
+            <div class="home2-box">
+              <div v-for="(item2, index2) in item1.home2List" :key="index2" class="home2-list">
+                <div style="flex: 1; width: 0">
+                  <div class="advertiseName ellipsis">{{ item2.advertiseName }}</div>
+                  <div class="advertiseDescribe ellipsis">{{ item2.advertiseDescribe }}</div>
+                  <el-button class="bnt" type="primary" size="small">立即进入</el-button>
+                </div>
+                <img :src="item2.img" alt="" />
+              </div>
+            </div>
+          </div>
+          <div class="home2-two" v-if="item1.infoTwo">
+            <div class="advertiseName">{{ item1.infoTwo.advertiseName }}</div>
+            <div class="advertiseDescribe">{{ item1.infoTwo.advertiseDescribe }}</div>
+            <img :src="item1.infoTwo.img" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="shop-bos">
+        <div class="shop-nav">
+          <div class="nav-title">采购导航</div>
+          <div class="nav-bos">
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center" :class="index2 == 0 ? 'hig' : ''">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+            <div v-for="(item2, index2) in item1.navList" :key="index2" class="nav-list flex-row-center">
+              {{ item2.labelName }}
+            </div>
+          </div>
+        </div>
+        <template v-for="(item2, index2) in item1.shopList" :key="index2">
+          <div class="shop-list" v-if="Number(index2) < 4">
+            <img :src="item2.productImage" alt="" />
+            <div class="itemName">{{ item2.itemName }}</div>
+            <div class="price">
+              <span class="memberPrice">¥{{ item2.memberPrice }}</span>
+              <span class="marketPrice">¥{{ item2.marketPrice }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 项目案例 -->
+    <div class="home-title flex-row-between">
+      <div>
+        <span class="title1">{{ projectTitle.title }}</span>
+        <span class="title2">{{ projectTitle.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start">
+        <div style="margin-right: 5px">{{ projectTitle.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+    <div class="project-bos">
+      <template v-for="(item, index) in projectList" :key="index">
+        <div class="project-list" v-if="Number(index) < 3">
+          <img :src="item.productImage" alt="" />
+          <div class="project-box">
+            <div class="project1">{{ item.itemName || '优易365-中南设计集团电子商城项目指定电商' }}</div>
+            <div class="project2">
+              {{
+                item.itemName ||
+                '中南工程咨询设计集团有限公司（以下简称“中南设计集团”），是湖北省政府出资组建的综合型工程咨询新型专利、软件著作权320余项。'
+              }}
+            </div>
+            <div class="project-more flex-row-between">
+              <div></div>
+              <div class="flex-row-start">
+                <div style="margin-right: 5px;">了解详情</div>
+                <el-icon :size="14" color="#E7000B"><ArrowRight /></el-icon>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import {
+  getProductCategoryTree,
+  getHomeAdList,
+  getYouYiZiXunPage,
+  getEnterpriseMemberEquityList,
+  getHotSchemeTitle,
+  getHotSchemeList,
+  getScenePurchaseTitle,
+  getScenePurchaseList,
+  getPlatformFlashSaleTitle,
+  getPlatformFlashSaleList,
+  getExpertSelectionTitle,
+  getPurchaseGuideTitle,
+  getExpertSelectionList,
+  getClassificationFloorList,
+  getClassificationFloorDetail,
+  getClassificationFloorLabel,
+  getClassificationFloorDetail2,
+  getProjectCaseTitle
+} from '@/api/home/index';
 
-<style lang="scss" scoped></style>
+const classifyList = ref<any>([]);
+const classifyShow = ref<any>(false);
+const classifyId = ref<any>('');
+const classifyInfo = ref<any>([]);
+const carouselList = ref<any>([]);
+const realList = ref<any>([]);
+const interestsList = ref<any>([]);
+const hotTitle = ref<any>('');
+const hotList = ref<any>([]);
+const sceneTitle = ref<any>('');
+const sceneList = ref<any>([]);
+const expertTitle = ref<any>('');
+const expertList = ref<any>([{}, {}, {}, {}, {}]);
+const procureTitle = ref<any>('');
+const procureList = ref<any>([{}, {}, {}, {}, {}]);
+const projectTitle = ref<any>('');
+const projectList = ref<any>([{}, {}, {}, {}, {}]);
+
+const bigbrandTitle = ref<any>('');
+const bigbrandList = ref<any>([]);
+const bigbrandOne = ref<any>({});
+
+const homeList = ref<any>([]);
+
+const enterClassify = (res: any) => {
+  classifyShow.value = true;
+  classifyId.value = res.id;
+  classifyInfo.value = res.children;
+};
+
+const leaveClassify = () => {
+  classifyShow.value = false;
+};
+
+//头部分类
+getProductCategoryTree({}).then((res) => {
+  if (res.code == 200) {
+    classifyList.value = res.data;
+  }
+});
+
+//头部轮播
+getHomeAdList({}).then((res) => {
+  if (res.code == 200) {
+    carouselList.value = res.data;
+  }
+});
+
+//头部优易资讯
+getYouYiZiXunPage({}).then((res) => {
+  if (res.code == 200) {
+    realList.value = res.data;
+  }
+});
+
+//头部会员权益
+getEnterpriseMemberEquityList({}).then((res) => {
+  if (res.code == 200) {
+    interestsList.value = res.data;
+  }
+});
+
+//热门方案标题
+getHotSchemeTitle({}).then((res) => {
+  if (res.code == 200) {
+    hotTitle.value = res.data;
+  }
+});
+
+//热门方案列表
+getHotSchemeList({}).then((res) => {
+  if (res.code == 200) {
+    hotList.value = res.data;
+  }
+});
+
+//场景采购标题
+getScenePurchaseTitle({}).then((res) => {
+  if (res.code == 200) {
+    sceneTitle.value = res.data;
+  }
+});
+
+//场景采购列表
+getScenePurchaseList({}).then((res) => {
+  if (res.code == 200) {
+    sceneList.value = res.data;
+  }
+});
+
+//大牌推荐标题（平台闪购标题）
+getPlatformFlashSaleTitle({}).then((res) => {
+  if (res.code == 200) {
+    bigbrandTitle.value = res.data;
+  }
+});
+
+//大牌推荐列表（平台闪购列表）
+getPlatformFlashSaleList({}).then((res) => {
+  if (res.code == 200) {
+    if (res.data.length > 0) {
+      bigbrandOne.value = res.data[0];
+      bigbrandList.value = res.data.slice(1);
+    }
+  }
+});
+
+//行家精选标题
+getExpertSelectionTitle({}).then((res) => {
+  if (res.code == 200) {
+    expertTitle.value = res.data;
+  }
+});
+
+//行家精选列表
+// getExpertSelectionList({}).then((res) => {
+//   if (res.code == 200) {
+//     expertList.value = res.data;
+//   }
+// });
+
+//采购指南标题
+getPurchaseGuideTitle({}).then((res) => {
+  if (res.code == 200) {
+    procureTitle.value = res.data;
+  }
+});
+
+//项目案例标题（平台装修-项目案例）
+getProjectCaseTitle({}).then((res) => {
+  if (res.code == 200) {
+    projectTitle.value = res.data;
+  }
+});
+
+//外面循环
+getClassificationFloorList({}).then(async (res) => {
+  if (res.code == 200) {
+    for (const item of res.data) {
+      try {
+        const datas1 = await getClassificationFloorDetail(item.floorNo);
+        if (datas1.code == 200) {
+          if (datas1.data.length > 0) {
+            item.imgOne = datas1.data[0];
+            if (datas1.data.length > 1) {
+              item.home1List = datas1.data.slice(1, 4);
+            }
+            if (datas1.data.length > 4) {
+              item.home2List = datas1.data.slice(4, 6);
+            }
+            if (datas1.data.length > 6) {
+              item.infoTwo = datas1.data[6];
+            }
+          }
+        }
+
+        const datas2 = await getClassificationFloorLabel(item.floorNo);
+        if (datas2.code == 200) {
+          item.navList = datas2.data;
+        }
+
+        const datas3 = await getClassificationFloorDetail2(item.floorNo);
+        if (datas2.code == 200) {
+          item.shopList = datas3.data;
+        }
+      } catch (error) {}
+    }
+
+    homeList.value = res.data;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.home-pages {
+  width: 1200px;
+  margin: 0 auto;
+
+  // 头部
+  .home-head {
+    width: 1200px;
+    position: relative;
+    display: flex;
+    gap: 0px 10px;
+
+    .classify {
+      width: 234px;
+      min-height: 539px;
+      background: #ffffff;
+
+      .classify-list {
+        width: 100%;
+        height: 40px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        padding-left: 15px;
+        position: relative;
+
+        &.classify-hig {
+          border: 1px solid var(--el-color-primary);
+          border-right: 0px solid var(--el-color-primary);
+        }
+
+        .label {
+          max-width: 100px;
+          font-weight: 600;
+          font-size: 16px;
+          color: #101828;
+          white-space: nowrap;
+          margin-right: 10px;
+
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+
+        .info {
+          max-width: 50px;
+          font-size: 12px;
+          color: #364153;
+          white-space: nowrap;
+
+          &.info1 {
+            margin-right: 6px;
+          }
+
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+
+        .classify-border {
+          position: absolute;
+          right: -1px;
+          top: 0px;
+          width: 1px;
+          height: 38px;
+          background-color: #ffffff;
+          z-index: 2;
+        }
+      }
+    }
+
+    .classify-bos {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 966px;
+      height: 100%;
+      border: 1px solid var(--el-color-primary);
+      background-color: #ffffff;
+      overflow-y: auto;
+      padding-left: 30px;
+      z-index: 10;
+
+      .classify-item {
+        display: flex;
+        padding-top: 10px;
+        border-bottom: 1px solid #e5e7eb;
+
+        .two-level {
+          width: 90px;
+          font-size: 14px;
+          color: var(--el-color-primary);
+          cursor: pointer;
+        }
+
+        .classify-icon {
+          margin: 4px 15px 0 15px;
+        }
+
+        .classify-label {
+          display: flex;
+          flex-wrap: wrap;
+          flex: 1;
+          font-size: 14px;
+          color: #364153;
+
+          div {
+            margin-right: 20px;
+            margin-bottom: 10px;
+            cursor: pointer;
+
+            &:hover {
+              color: var(--el-color-primary);
+            }
+          }
+        }
+      }
+    }
+
+    // 头部中间
+    .head-bos {
+      width: 756px;
+
+      .carousel {
+        width: 756px;
+        height: 407px;
+        background: #ffffff;
+
+        img {
+          width: 756px;
+          height: 407px;
+        }
+      }
+
+      .head-box {
+        width: 756px;
+        height: 122px;
+        background: #ffffff;
+        margin-top: 10px;
+      }
+    }
+
+    .head-right {
+      flex: 1;
+      width: 0;
+      height: 539px;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+
+      .login-bos {
+        width: calc(100% - 20px);
+        height: 110px;
+        border-bottom: 1px solid #e5e7eb;
+        margin: 0 10px;
+
+        .login-box {
+          display: flex;
+          align-items: center;
+          padding-top: 16px;
+          margin-bottom: 10px;
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+          }
+
+          .login1 {
+            font-size: 13px;
+            color: #444444;
+          }
+
+          .login2 {
+            margin-top: 2px;
+            font-size: 12px;
+            color: #6a7282;
+          }
+        }
+      }
+
+      .real-time {
+        width: calc(100% - 20px);
+        height: 227px;
+        border-bottom: 1px solid #e5e7eb;
+        margin: 0 10px;
+        padding-top: 15px;
+
+        .real-title {
+          position: relative;
+          margin-bottom: 12px;
+
+          &::after {
+            content: '';
+            top: 4px;
+            left: 0;
+            position: absolute;
+            width: 4px;
+            height: 16px;
+            background: var(--el-color-primary);
+          }
+
+          .real1 {
+            font-weight: 600;
+            font-size: 16px;
+            color: #1d2129;
+            padding-left: 15px;
+          }
+
+          .real2 {
+            font-size: 13px;
+            color: #83899f;
+            cursor: pointer;
+          }
+        }
+
+        .real-list {
+          width: 100%;
+          font-size: 14px;
+          color: #1d2129;
+          margin-bottom: 12px;
+          cursor: pointer;
+
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+      }
+
+      .interests {
+        flex: 1;
+        width: calc(100% - 20px);
+        margin: 0 10px;
+        padding-top: 15px;
+
+        .interests-title {
+          position: relative;
+          font-weight: 600;
+          font-size: 16px;
+          color: #1d2129;
+          padding-left: 15px;
+
+          &::after {
+            content: '';
+            top: 4px;
+            left: 0;
+            position: absolute;
+            width: 4px;
+            height: 16px;
+            background: var(--el-color-primary);
+          }
+        }
+
+        .interests-bos {
+          display: flex;
+          flex-wrap: wrap;
+
+          .interests-item {
+            width: 33.333%;
+            font-size: 12px;
+            color: #101828;
+            margin-top: 15px;
+            cursor: pointer;
+
+            &:hover {
+              color: var(--el-color-primary);
+            }
+
+            img {
+              width: 34px;
+              height: 34px;
+              margin-bottom: 7px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //标题
+  .home-title {
+    width: 1200px;
+    height: 56px;
+    background: #ffffff;
+    margin-top: 30px;
+    padding: 0 20px;
+
+    .title1 {
+      font-weight: 600;
+      font-size: 20px;
+      color: #101828;
+    }
+
+    .title2 {
+      font-size: 14px;
+      color: #364153;
+      margin-left: 10px;
+    }
+
+    .title-more {
+      font-size: 14px;
+      color: #364153;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  //热门方案
+  .hot-bos {
+    height: 176px;
+    width: 1200px;
+    display: flex;
+    gap: 0 18px;
+    margin-top: 12px;
+
+    .hot-list {
+      flex: 1;
+      height: 176px;
+      background: #ffffff;
+      border-radius: 10px 10px 10px 10px;
+
+      .hot1 {
+        font-weight: 600;
+        font-size: 16px;
+        color: #101828;
+      }
+
+      .hot2 {
+        font-size: 14px;
+        color: #364153;
+        margin: 2px 0 14px 0;
+      }
+
+      img {
+        width: 80px;
+        height: 80px;
+      }
+    }
+  }
+
+  // 场景采购
+  .scene-bos {
+    height: 304px;
+    width: 1200px;
+    display: flex;
+    gap: 0 18px;
+    margin-top: 12px;
+
+    .scene-list {
+      flex: 1;
+      height: 304px;
+      background: #ffffff;
+      position: relative;
+
+      .scene-box {
+        padding-top: 35px;
+        position: absolute;
+        z-index: 2;
+        width: 100%;
+
+        .scene1 {
+          font-weight: 600;
+          font-size: 30px;
+          color: #ffffff;
+          text-align: center;
+          width: 100%;
+        }
+
+        .scene2 {
+          font-size: 17px;
+          color: #ffffff;
+          text-align: center;
+          width: 100%;
+          margin-top: 4px;
+        }
+      }
+
+      img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: #f4f4f4;
+      }
+    }
+  }
+
+  // 大牌推荐
+  .big-brand {
+    height: 334px;
+    width: 1200px;
+    margin-top: 12px;
+    display: flex;
+
+    .bigBrand-one {
+      width: 233px;
+      height: 334px;
+      margin-right: 10px;
+    }
+
+    .bigBrand-bos {
+      flex: 1;
+      width: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+
+      .bigBrand-list {
+        width: 183.4px;
+        height: 162px;
+        background: #ffffff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 32px 20px 0 20px;
+
+        img {
+          width: 152px;
+          height: 29px;
+        }
+
+        .bigBrand1 {
+          font-weight: 600;
+          font-size: 14px;
+          color: #101828;
+          margin: 10px 0 4px 0;
+        }
+
+        .bigBrand2 {
+          font-weight: 400;
+          font-size: 12px;
+          color: #364153;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2; /* 添加标准属性 */
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  // 行家精选
+  .expert-bos {
+    width: 1200px;
+    display: flex;
+    margin-top: 12px;
+    .expert-list {
+      width: 230px;
+      height: 306px;
+      background: #ffffff;
+      margin-left: 12.5px;
+      padding: 20px;
+      cursor: pointer;
+      &:first-child {
+        margin-left: 0;
+      }
+      img {
+        width: 100%;
+        height: 190px;
+      }
+      .itemName {
+        font-weight: 400;
+        font-size: 14px;
+        color: #101828;
+        margin: 27px 0 2px 0;
+      }
+      .price {
+        .memberPrice {
+          color: var(--el-color-primary);
+          font-size: 16px;
+          color: #e7000b;
+        }
+        .marketPrice {
+          font-size: 12px;
+          color: #99a1af;
+          line-height: 20px;
+          text-decoration-line: line-through;
+          text-transform: none;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  // 采购指南
+  .procure-bos {
+    display: flex;
+    width: 1200px;
+    margin-top: 12px;
+    gap: 0 15px;
+    .procure-list {
+      width: 390px;
+      height: 268px;
+      background: #ffffff;
+      cursor: pointer;
+      img {
+        width: 390px;
+        height: 200px;
+      }
+      .procure1 {
+        padding: 12px 0 4px 20px;
+        font-weight: 600;
+        font-size: 14px;
+        color: #101828;
+      }
+      .procure2 {
+        padding-left: 20px;
+        font-size: 12px;
+        color: #364153;
+      }
+    }
+  }
+
+  //循环-商品
+  .goods-bos {
+    height: 340px;
+    width: 1200px;
+    margin-top: 14px;
+    display: flex;
+
+    .goods-img {
+      width: 230px;
+      height: 340px;
+      cursor: pointer;
+    }
+
+    .home1-bos {
+      width: 476px;
+      height: 340px;
+      background: #ffffff;
+      margin-left: 10px;
+      padding: 18px 20px 0 20px;
+      display: flex;
+      flex-direction: column;
+
+      .floorName {
+        font-weight: 600;
+        font-size: 16px;
+        color: #101828;
+      }
+
+      .home1-list {
+        flex: 1;
+        display: flex;
+        border-bottom: 1px solid #e5e7eb;
+        align-items: center;
+        cursor: pointer;
+
+        .advertiseName {
+          font-weight: 600;
+          font-size: 14px;
+          color: #101828;
+        }
+
+        .advertiseDescribe {
+          font-weight: 400;
+          font-size: 12px;
+          color: #364153;
+          margin-top: 4px;
+        }
+
+        img {
+          width: 72px;
+          height: 72px;
+          margin-right: 10px;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+
+    .home2-bos {
+      width: 474px;
+      margin-left: 10px;
+      height: 340px;
+      background: #ffffff;
+      padding: 18px 20px 0 20px;
+      display: flex;
+      justify-content: space-between;
+
+      .floorName {
+        font-weight: 600;
+        font-size: 16px;
+        color: #101828;
+      }
+
+      .home2-box {
+        width: 249px;
+
+        .home2-list {
+          width: 249px;
+          height: 130px;
+          border: 1px solid #e5e7eb;
+          margin-top: 13px;
+          display: flex;
+          align-items: center;
+          padding: 0 10px;
+          cursor: pointer;
+          .advertiseName {
+            font-weight: 600;
+            font-size: 14px;
+            color: #101828;
+          }
+          .advertiseDescribe {
+            font-size: 12px;
+            color: #364153;
+            margin: 4px 0 10px 0;
+          }
+          .bnt {
+            width: 68px;
+            height: 24px;
+          }
+          img {
+            width: 72px;
+            height: 72px;
+            margin-left: 10px;
+          }
+        }
+      }
+      .home2-two {
+        width: 177px;
+        height: 273px;
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid #e5e7eb;
+        margin-top: 34px;
+        padding: 26px 10px;
+        cursor: pointer;
+
+        .advertiseName {
+          font-weight: 600;
+          font-size: 14px;
+          color: #101828;
+        }
+        .advertiseDescribe {
+          font-size: 12px;
+          color: #364153;
+          margin: 4px 0 30px 0;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2; /* 添加标准属性 */
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        img {
+          width: 123px;
+          height: 122px;
+          margin: 0 17px;
+        }
+      }
+    }
+  }
+  .shop-bos {
+    display: flex;
+    margin-top: 14px;
+    .shop-nav {
+      width: 230px;
+      height: 306px;
+      background: #ffffff;
+      padding: 16px;
+      .nav-title {
+        font-weight: 600;
+        font-size: 16px;
+        color: #101828;
+        margin-bottom: 10px;
+      }
+      .nav-bos {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .nav-list {
+          width: 94px;
+          height: 32px;
+          background: #f4f4f4;
+          border-radius: 4px 4px 4px 4px;
+          font-size: 14px;
+          color: #101828;
+          margin-bottom: 10px;
+          cursor: pointer;
+          &:hover {
+            color: var(--el-color-primary);
+          }
+          &.hig {
+            background: var(--el-color-primary);
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .shop-list {
+      width: 230px;
+      height: 306px;
+      background: #ffffff;
+      margin-left: 12.5px;
+      padding: 20px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 190px;
+      }
+      .itemName {
+        font-weight: 400;
+        font-size: 14px;
+        color: #101828;
+        margin: 27px 0 2px 0;
+      }
+      .price {
+        .memberPrice {
+          color: var(--el-color-primary);
+          font-size: 16px;
+          color: #e7000b;
+        }
+        .marketPrice {
+          font-size: 12px;
+          color: #99a1af;
+          line-height: 20px;
+          text-decoration-line: line-through;
+          text-transform: none;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  //项目案例
+  .project-bos {
+    display: flex;
+    width: 1200px;
+    margin-top: 12px;
+    gap: 0 15px;
+    .project-list {
+      width: 390px;
+      height: 350px;
+      cursor: pointer;
+      border-radius: 10px;
+      overflow: hidden;
+      .project-box {
+        width: 390px;
+        height: 156px;
+        background: #ffffff;
+        border-radius: 10px;
+        margin-top: -20px;
+        z-index: 2;
+        position: absolute;
+        padding: 20px;
+      }
+      img {
+        width: 390px;
+        height: 180px;
+      }
+      .project1 {
+        font-weight: 600;
+        font-size: 16px;
+        color: #101828;
+        margin-bottom: 14px;
+      }
+      .project2 {
+        font-size: 14px;
+        color: #364153;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2; /* 添加标准属性 */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .project-more {
+        text-align: right;
+        font-size: 14px;
+        color: var(--el-color-primary);
+        margin-top: 18px;
+      }
+    }
+  }
+}
+</style>