样式

src/api/home/index-data.ts

@@ -3,7 +3,7 @@ import request from '@/utils/request';
 //当前客户下的站点地址
 export function getSiteAddress(query: any) {
   return request({
-    url: '/product/siteProduct/getSiteAddress',
+    url: '/product/indexSiteProduct/getSiteAddress',
     method: 'get',
     params: query
   });
@@ -12,7 +12,7 @@ export function getSiteAddress(query: any) {
 //外面循环
 export function getSiteFloorList(query: any) {
   return request({
-    url: '/product/siteProduct/getSiteFloorList',
+    url: '/product/indexSiteProduct/getSiteFloorList',
     method: 'get',
     params: query
   });
@@ -21,7 +21,7 @@ export function getSiteFloorList(query: any) {
 // 外面循环-商品
 export function getSiteFloorProductList(query: any) {
   return request({
-    url: '/product/siteProduct/getSiteFloorProductList',
+    url: '/product/indexSiteProduct/getSiteFloorProductList',
     method: 'get',
     params: query
   });
@@ -30,7 +30,7 @@ export function getSiteFloorProductList(query: any) {
 // 外面循环-品牌
 export function getSiteFloorBrandList(query: any) {
   return request({
-    url: '/product/siteProduct/getSiteFloorBrandList',
+    url: '/product/indexSiteProduct/getSiteFloorBrandList',
     method: 'get',
     params: query
   });
@@ -39,7 +39,7 @@ export function getSiteFloorBrandList(query: any) {
 // 商品
 export function getSiteProductList(query: any) {
   return request({
-    url: '/product/siteProduct/getSiteProductList',
+    url: '/product/indexSiteProduct/getSiteProductList',
     method: 'get',
     params: query
   });

src/api/home/index-enterprise.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request';
+
+//头部会员权益
+export function getEnterpriseRightsMemberEquityList(query: any) {
+  return request({
+    url: '/system/indexSystem/getEnterpriseRightsMemberEquityList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 头部轮播
+export function getEnterpriseHomeAdList(query: any) {
+  return request({
+    url: '/system/indexSystem/getEnterpriseHomeAdList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 商品
+export function getCustomerProductPage(query: any) {
+  return request({
+    url: '/product/indexSiteProduct/getSiteProductPage',
+    method: 'get',
+    params: query
+  });
+}

src/layout/components/breadcrumb.vue

@@ -38,7 +38,9 @@ const goPath = (res: any) => {
   height: 44px;
   background: #ffffff;
   .breadcrumb-bos {
-    width: 1200px;
+    max-width: 1500px;
+    min-width: 1200px;
+    width: 100%;
     font-size: 14px;
     color: #101828;
     .nav-list {

src/layout/components/foot.vue

@@ -64,25 +64,33 @@
 <style lang="scss" scoped>
 .foot {
   width: 100%;
+
   .foot-head {
     width: 100%;
     background: #e7e7e7;
     padding-bottom: 32px;
+
     .head-bos {
-      width: 1200px;
+      max-width: 1500px;
+      min-width: 1200px;
+      width: 100%;
       margin: 0 auto;
       display: flex;
+
       .head-left {
         padding-right: 116px;
+
         .head-img {
           margin-top: 32px;
           width: 160px;
           height: 78px;
           margin-bottom: 50px;
         }
+
         .head-code {
           font-size: 12px;
           color: #364153;
+
           img {
             width: 86px;
             height: 86px;
@@ -90,9 +98,11 @@
           }
         }
       }
+
       .head-right {
         flex: 1;
         padding-top: 44px;
+
         .info-bos {
           .info-title {
             font-weight: 600;
@@ -100,6 +110,7 @@
             color: #101828;
             margin-bottom: 20px;
           }
+
           .info-text {
             font-size: 14px;
             color: #101828;
@@ -111,6 +122,7 @@
             }
           }
         }
+
         .contact {
           width: 100%;
           border-top: 1px solid #dddddd;
@@ -119,27 +131,33 @@
           margin-top: 20px;
           font-size: 14px;
           color: #101828;
+
           span:nth-of-type(2) {
             padding-left: 10px;
           }
+
           span:nth-of-type(3) {
             padding-left: 10px;
             font-size: 12px;
             color: #6a7282;
           }
         }
+
         .logistics {
           padding-top: 20px;
           display: flex;
+
           .logistics-box {
             font-size: 16px;
             color: #101828;
             margin-right: 70px;
+
             img {
               width: 33px;
               height: 33px;
               margin-right: 11px;
             }
+
             // .logistics-icon {
             //   width: 33px;
             //   height: 33px;
@@ -156,6 +174,7 @@
       }
     }
   }
+
   .foot-foot {
     width: 100%;
     height: 52px;

src/layout/components/header.vue

@@ -44,16 +44,12 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
 import { useUserStore } from '@/store/modules/user';
-import { computed } from 'vue';
 import { onPath } from '@/utils/siteConfig';
 import Cookies from 'js-cookie';
 import { getInfo } from '@/api/login';
 const userInfoOpen = ref<any>(false);
 const userInfo = ref<any>({});
-const router = useRouter();
-const userStore = useUserStore();
 
 onMounted(() => {
   // getCurrentLocation();
@@ -119,17 +115,6 @@ const getCurrentLocation = () => {
   });
 };
 
-// 判断是否已登录
-const isLoggedIn = computed(() => !!userStore.token);
-
-const goToLogin = () => {
-  router.push('/login');
-};
-
-const goToMyOrder = () => {
-  onPath('/order/orderManage');
-};
-
 const onlogout = () => {
   useUserStore()
     .logout()
@@ -146,7 +131,9 @@ const onlogout = () => {
   background-color: #efefef;
 
   .header-bos {
-    width: 1200px;
+    max-width: 1500px;
+    min-width: 1200px;
+    width: 100%;
     height: 100%;
     display: flex;
     justify-content: space-between;

src/layout/components/nav copy.vue

@@ -1,269 +0,0 @@
-<template>
-  <!-- 导航组件 -->
-  <div class="nav flex-row-center">
-    <div class="nav-bos">
-      <div class="nav-all flex-row-center" @mouseenter="openClassify">
-        <img src="@/assets/images/layout/layout2.png" alt="" />
-        <div>全部商品分类</div>
-      </div>
-      <div @click="onPath(item.url)" v-for="(item, index) in navList" :key="index" class="nav-list" :class="item.url == route.path ? 'hig' : ''">
-        {{ item.title }}
-      </div>
-      <div class="nav-classify" v-if="classifyOpen" @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" @click="onPath('/search?type=1&topCategoryId=' + item.id)">{{ 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" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
-            <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" @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)">
-                {{ item1.label || '' }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onPath } from '@/utils/siteConfig';
-import { categoryStore } from '@/store/modules/category';
-const categoryStoreStore = categoryStore();
-const route = useRoute();
-const classifyList = ref<any>([]);
-const classifyOpen = ref<any>(false);
-const classifyShow = ref<any>(false);
-const classifyId = ref<any>('');
-const classifyInfo = ref<any>([]);
-const navList = ref<any>([
-  { title: '首页', url: '/index' },
-  { title: '工业品商城', url: '/indexMro' },
-  { title: '福礼商城', url: '/indexFuli' },
-  { title: '商用工程' },
-  { title: '场景采购', url: '/plan/procure' },
-  { title: '解决方案', url: '/plan' },
-  { title: '特价专区', url: '/search/special' }
-]);
-
-onMounted(async () => {
-  try {
-    // 根据当前路由路径获取分类数据
-    let path = route.path;
-    if (path != '/indexMro' && path != '/indexFuli') {
-      path = '/index';
-    }
-    classifyList.value = await categoryStoreStore.fetchCategories(path);
-  } catch (error) {
-    console.error('获取分类失败:', error);
-  }
-});
-
-//移入分类
-const openClassify = () => {
-  const path = route.path;
-  if (path != '/indexMro' && path != '/indexFuli' && path != '/index') {
-    classifyOpen.value = true;
-  }
-};
-const enterClassify = (res: any) => {
-  classifyShow.value = true;
-  classifyId.value = res.id;
-  classifyInfo.value = res.children;
-};
-
-//移出分类
-const leaveClassify = () => {
-  classifyOpen.value = false;
-  classifyShow.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.nav {
-  width: 100%;
-  height: 48px;
-  background: #f9fafb;
-  border-top: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-
-  .nav-bos {
-    width: 1200px;
-    display: flex;
-    position: relative;
-
-    .nav-all {
-      width: 234px;
-      height: 48px;
-      background: #e7000b;
-      padding: 0 10px;
-      font-size: 16px;
-      color: #ffffff;
-      cursor: pointer;
-
-      img {
-        height: 16px;
-        width: 16px;
-        margin-right: 6px;
-      }
-    }
-
-    .nav-list {
-      line-height: 48px;
-      font-size: 16px;
-      color: #364153;
-      margin: 0 16px;
-      text-align: center;
-      cursor: pointer;
-
-      &.hig {
-        color: #e7000b;
-        position: relative;
-        &::before {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0px;
-          display: inline-block;
-          width: 100%;
-          height: 3px;
-          background: #e7000b;
-          margin-right: 8px;
-        }
-      }
-
-      &:hover {
-        color: #e7000b;
-      }
-    }
-
-    // 分类
-    .nav-classify {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      z-index: 20;
-      .classify {
-        width: 234px;
-        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: 14px;
-            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;
-        left: 100%;
-        width: 966px;
-        height: 100%;
-        border: 1px solid var(--el-color-primary);
-        background-color: #ffffff;
-        overflow-y: auto;
-        padding-left: 30px;
-
-        .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);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/layout/components/nav.vue

@@ -1,15 +1,23 @@
 <template>
   <!-- 导航组件 -->
   <div class="nav-pages">
-    <div class="nav-bos">
+    <div class="nav-bos" :style="{ 'max-width': route.path == '/item' ? '1600px' : '1500px' }" @mouseleave="leaveClassify">
       <div class="nav-all flex-row-start" @mouseenter="openClassify">
         <img src="@/assets/images/layout/layout2.png" alt="" />
         <div>全部商品分类</div>
       </div>
-      <div @click="onPath(item.url)" v-for="(item, index) in navList" :key="index" class="nav-list" :class="item.url == route.fullPath ? 'hig' : ''">
+      <div
+        @mouseenter="leaveClassify"
+        @click="onPath(item.url)"
+        v-for="(item, index) in navList"
+        :key="index"
+        class="nav-list"
+        :class="item.url == route.fullPath ? 'hig' : ''"
+      >
         {{ item.title }}
       </div>
-      <div class="nav-classify" v-if="classifyOpen" @mouseleave="leaveClassify">
+      <!-- 分类展开的 -->
+      <div class="nav-classify" v-if="classifyOpen">
         <div class="classify">
           <div
             class="classify-list"
@@ -25,7 +33,7 @@
           </div>
         </div>
         <div class="classify-bos" v-if="classifyShow">
-          <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
+          <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&mediumCategoryId=' + item.id)">
             <div class="two-level ellipsis">{{ item.label || '' }}</div>
             <el-icon class="classify-icon" :size="14" color="#364153">
               <ArrowRight />
@@ -45,9 +53,10 @@
 <script setup lang="ts">
 import { onPath } from '@/utils/siteConfig';
 import { categoryStore } from '@/store/modules/category';
+import { getProductCategoryTree } from '@/api/home/index';
+import { getHomeNav } from '@/api/home/index';
 const categoryStoreStore = categoryStore();
 const route = useRoute();
-console.log(route, '8888');
 const classifyList = ref<any>([]);
 const classifyOpen = ref<any>(false);
 const classifyShow = ref<any>(false);
@@ -64,16 +73,17 @@ const navList = ref<any>([
 ]);
 
 onMounted(async () => {
-  try {
-    // 根据当前路由路径获取分类数据
-    let path = route.path;
-    if (path != '/indexMro' && path != '/indexFuli' && path != '/indexData') {
-      path = '/index';
+  // 获取分类
+  getProductCategoryTree({ platform: 0 }).then((res) => {
+    if (res.code == 200) {
+      classifyList.value = res.data;
     }
-    classifyList.value = await categoryStoreStore.fetchCategories(path);
-  } catch (error) {
-    console.error('获取分类失败:', error);
-  }
+  });
+  // 获取导航栏
+  // getHomeNav(1).then((res) => {
+  //   if (res.code == 200) {
+  //   }
+  // });
 });
 
 //移入分类
@@ -104,7 +114,9 @@ const leaveClassify = () => {
 
   .nav-bos {
     margin: 0 auto;
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     display: flex;
     position: relative;
     padding-top: 15px;
@@ -158,13 +170,15 @@ const leaveClassify = () => {
     // 分类
     .nav-classify {
       position: absolute;
-      height: 540px;
       top: 100%;
       left: 0;
       z-index: 20;
+      width: 100%;
       .classify {
         width: 234px;
         background: #ffffff;
+        padding: 10px 0px;
+        border-radius: 5px 0px 0px 5px;
 
         .classify-list {
           width: 100%;
@@ -223,8 +237,9 @@ const leaveClassify = () => {
       .classify-bos {
         position: absolute;
         top: 0;
-        left: 100%;
-        width: 966px;
+        right: 0;
+        left: 234px;
+        // width: 966px;
         height: 100%;
         border: 1px solid var(--el-color-primary);
         background-color: #ffffff;

src/layout/components/search.vue

@@ -2,8 +2,13 @@
   <!-- 搜索组件 -->
   <div class="search-bos" :style="{ 'background': meta.workbench ? '#F4F4F4' : '#ffffff' }">
     <div class="search-content">
-      <img class="logo" :class="route.path == '/indexData' ? 'logo1' : ''" src="@/assets/images/head.png" alt="" @click="onPath('/')" />
-      <img v-if="route.path == '/indexData'" class="logo2" src="@/assets/images/head2.png" alt="" @click="onPath('/')" />
+      <img @click="onPath('/')" class="logo logo2" v-if="route.path == '/indexMro'" src="@/assets/images/mro.png" alt="" />
+      <img @click="onPath('/')" class="logo logo2" v-else-if="route.path == '/indexFuli'" src="@/assets/images/fuli.png" alt="" />
+      <template v-else-if="route.path == '/indexData'">
+        <img class="logo logo3" src="@/assets/images/head.png" alt="" @click="onPath('/')" />
+        <img class="logo logo4" src="@/assets/images/head2.png" alt="" @click="onPath('/')" />
+      </template>
+      <img @click="onPath('/')" class="logo logo1" v-else src="@/assets/images/head.png" alt="" />
       <div class="search-box">
         <div class="search-div flex-row-start">
           <div class="search-input flex-row-center">
@@ -56,7 +61,7 @@ watch(route, () => {
   meta.value = route.meta;
 });
 
-getSearchTitle({}).then((res) => {
+getSearchTitle(1).then((res) => {
   if (res.code == 200) {
     toplabel.value = res.data;
   }
@@ -70,33 +75,41 @@ getSearchTitle({}).then((res) => {
   background-color: #ffffff;
 
   .search-content {
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
-    width: 1200px;
     display: flex;
     padding: 0 30px;
   }
 
   .logo {
-    width: 170px;
-    height: 88px;
-    border-radius: 4px;
-    margin-top: 10px;
-    margin-right: 30px;
     cursor: pointer;
-  }
-
-  .logo1 {
-    width: 185px;
-    height: 90px;
-    margin-right: 20px;
-    margin-top: 5px;
-  }
-
-  .logo2 {
-    width: 185px;
-    height: 90px;
-    margin-top: 20px;
-    margin-right: 30px;
+    border-radius: 4px;
+    &.logo1 {
+      width: 170px;
+      height: 88px;
+      margin-top: 10px;
+      margin-right: 30px;
+    }
+    &.logo2 {
+      width: 436px;
+      height: 80px;
+      margin-top: 10px;
+      margin-right: 20px;
+    }
+    &.logo3 {
+      width: 170px;
+      height: 88px;
+      margin-top: 10px;
+      margin-right: 30px;
+    }
+    &.logo4 {
+      width: 185px;
+      height: 90px;
+      margin-top: 20px;
+      margin-right: 30px;
+    }
   }
 
   .search-box {

src/layout/components/workbench.vue

@@ -5,9 +5,9 @@
         <img src="@/assets/images/layout/workbench.png" alt="" />
         <div>收起菜单</div>
       </div>
-      <div v-for="(item1, index1) in menuList" :key="index1" class="menu-list1">
+      <div v-for="(item1, index1) in menuList" :key="index1" class="menu-list1" @click="toggleMenu(item1.path)">
         <div class="menu-head1 flex-row-between">
-          <div class="menu-title1 flex-row-start" @click="toggleMenu(item1.path)">
+          <div class="menu-title1 flex-row-start">
             <img :src="item1.icon" alt="" />
             <div>{{ item1.title }}</div>
           </div>
@@ -212,8 +212,8 @@ watch(
 
 <style lang="scss" scoped>
 .workbench-bos {
-  position: absolute;
-  top: 0;
+  // position: absolute;
+  // top: 0;
 
   //展开的
   .workbench-box1 {

src/layout/index.vue

@@ -67,7 +67,7 @@ watch(route, () => {
 .app-wrapper {
   min-height: 100vh;
   width: 100%;
-  min-width: 1350px;
+  min-width: 1200px;
   background: #f4f4f4;
   display: flex;
   flex-direction: column;
@@ -78,8 +78,11 @@ watch(route, () => {
     position: relative;
 
     &.pages-bos1 {
-      width: 1200px;
+      max-width: 1500px;
+      min-width: 1200px;
+      width: 100%;
       margin: 20px auto;
+      gap: 0 15px;
     }
 
     &.pages-bos2 {

src/router/index.ts

@@ -66,7 +66,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/index',
         component: () => import('@/views/home/index.vue'),
         name: 'Index',
-        meta: { title: '优易365', affix: true, nav: true }
+        meta: { title: '优易365', search: 'hide' }
       },
       {
         path: '/indexDiy',
@@ -84,7 +84,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/indexMro',
         component: () => import('@/views/home/index-mro.vue'),
         name: 'IndexMro',
-        meta: { title: '工业品商城', affix: true, nav: true }
+        meta: { title: '工业品商城', search: 'hide' }
       },
       {
         path: '/indexMroDiy',
@@ -96,7 +96,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/indexFuli',
         component: () => import('@/views/home/index-fuli.vue'),
         name: 'IndexFuli',
-        meta: { title: '福礼商城', icon: 'dashboard', affix: true, nav: true }
+        meta: { title: '福礼商城', search: 'hide' }
       },
       {
         path: '/indexFuliDiy',
@@ -116,6 +116,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: 'IndexDataDiy',
         meta: { title: '大客户站点Diy', diy: true, search: 'hide' }
       },
+      {
+        path: '/indexEnterprise',
+        component: () => import('@/views/home/index-enterprise.vue'),
+        name: 'indexEnterprise',
+        meta: { title: '企业首页', affix: true, nav: true }
+      },
       {
         path: '/theme',
         component: () => import('@/views/home/theme.vue'),
@@ -162,7 +168,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/item',
         component: () => import('@/views/item/index.vue'),
         name: 'Item',
-        meta: { title: '商品详情', nav: true, breadcrumb: true, breadcrumbColor: '#F4F4F4' }
+        meta: { title: '商品详情', nav: true, breadcrumbColor: '#F4F4F4' }
       },
       {
         path: '/cart',

src/types/components.d.ts

@@ -51,6 +51,7 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
@@ -62,6 +63,8 @@ declare module 'vue' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']

src/utils/siteConfig.ts

@@ -131,40 +131,141 @@ export function getSiteByPath(path: string): any | null {
 
 // 跨站跳转逻辑
 import router from '@/router';
+
+// ... 前面的 DOMAIN_MAP, SITE_ROUTES, getCurrentSite, getSiteByPath 等代码保持不变 ...
+
+/**
+ * 智能跳转函数
+ * @param path 跳转路径、相对路径或完整URL (可能包含 openType 参数)
+ */
 export function onPath(path: string) {
-  console.log('[跨站跳转]', path);
-  if (import.meta.env.VITE_DOMAIN_NAME == 'true') {
-    const targetSite = getSiteByPath(path);
+  if (!path) return;
+
+  console.log('[跨站跳转] 原始输入:', path);
+
+  // --- 辅助函数：解析并移除 openType ---
+  const parseAndCleanUrl = (url: string) => {
+    let cleanPath = url;
+    let extractedOpenType: number | undefined = undefined;
+
+    try {
+      // 构造 URL 对象以便解析参数
+      // 如果是相对路径，补充临时协议和域名以便解析
+      const baseUrl = url.startsWith('http') ? url : `http://temp${url}`;
+      const urlObj = new URL(baseUrl);
+
+      // 1. 提取 openType
+      const otParam = urlObj.searchParams.get('openType');
+      if (otParam !== null) {
+        extractedOpenType = Number(otParam);
+        // 2. 移除 openType 参数
+        urlObj.searchParams.delete('openType');
+      }
 
-    if (!targetSite) {
-      console.error(`[跨站跳转失败] 路径 "${path}" 未关联任何站点`);
-      return;
+      // 3. 生成清洗后的路径
+      if (url.startsWith('http')) {
+        // 绝对路径：返回完整 URL
+        cleanPath = urlObj.toString();
+      } else {
+        // 相对路径：返回 path + search + hash
+        cleanPath = urlObj.pathname + urlObj.search + urlObj.hash;
+      }
+    } catch (e) {
+      // 降级处理：如果 URL 解析失败，使用正则移除 openType
+      console.warn('[跨站跳转] URL 解析失败，使用正则降级处理', e);
+      // 提取 openType (简单匹配 ?openType=x 或 &openType=x)
+      const match = url.match(/[?&]openType=(\d+)/);
+      if (match) {
+        extractedOpenType = Number(match[1]);
+      }
+      // 移除 openType 参数
+      cleanPath = url
+        .replace(/[?&]openType=\d+/, (match, offset, string) => {
+          // 如果是第一个参数 (?openType=...)，替换为 ?
+          // 如果是后续参数 (&openType=...)，替换为空
+          // 这里简化处理：直接去掉，最后统一清理多余的 ? 或 &
+          return '';
+        })
+        .replace(/([?&])$/, '') // 去除末尾残留的 ? 或 &
+        .replace(/\?&/, '?');   // 修复 ?& 变成 ?
     }
 
-    const currentSite = getCurrentSite();
+    return {
+      cleanPath,
+      openType: extractedOpenType
+    };
+  };
 
-    // 【新增】判断是否是同域名
-    const isSameSite = currentSite === targetSite;
+  // 1. 解析路径，获取清洗后的路径和 openType
+  const { cleanPath, openType } = parseAndCleanUrl(path);
 
-    let url = '';
-    // 使用环境变量配置的域名映射
-    const baseDomain = DOMAIN_MAP[targetSite];
+  console.log('[跨站跳转] 清洗后路径:', cleanPath, '提取的 openType:', openType);
 
-    if (import.meta.env.PROD) {
-      url = `https://${baseDomain}${path}`;
+  // 2. 判断是否为全路径 (http:// 或 https://)
+  if (/^https?:\/\//i.test(cleanPath)) {
+    if (openType === 0) {
+      // openType 为 0，当前窗口打开
+      window.location.href = cleanPath;
     } else {
-      const devPort = window.location.port || import.meta.env.VITE_APP_PORT;
-      url = `https://${baseDomain}:${devPort}${path}`;
+      // openType 为 1 或 undefined，新窗口打开
+      window.open(cleanPath, '_blank');
     }
-    // 【修改】根据是否同域名决定跳转方式
-    if (isSameSite) {
-      // 同域名且传入了 router，使用 Vue Router 内部跳转
-      router.push(path);
+    return;
+  }
+
+  // 3. 获取目标站点 (使用清洗后的路径)
+  const targetSite = getSiteByPath(cleanPath);
+
+  if (!targetSite) {
+    console.error(`[跨站跳转失败] 路径 "${cleanPath}" 未关联任何站点`);
+    return;
+  }
+
+  // 4. 获取当前站点
+  const currentSite = getCurrentSite();
+
+  // 5. 构建目标 URL (用于跨域跳转)
+  const baseDomain = DOMAIN_MAP[targetSite];
+  let finalUrl = '';
+
+  if (import.meta.env.PROD) {
+    // 正式环境：不加端口
+    finalUrl = `https://${baseDomain}${cleanPath}`;
+  } else {
+    // 开发环境：加上端口
+    const devPort = window.location.port || import.meta.env.VITE_APP_PORT;
+    finalUrl = `https://${baseDomain}:${devPort}${cleanPath}`;
+  }
+
+  // 6. 判断是否同域名
+  const isSameSite = currentSite === targetSite;
+
+  // 7. 执行跳转逻辑
+
+  // 【优先级最高】如果 path 中包含了 openType，严格按照 openType 执行
+  if (openType !== undefined) {
+    if (openType === 1) {
+      // 新窗口打开
+      window.open(finalUrl, '_blank');
     } else {
-      // 跨域名 或 未传入 router，使用 window.open 打开新窗口
-      window.open(url, '_blank');
+      // 当前窗口打开 (openType === 0)
+      if (isSameSite) {
+        // 同域且强制当前窗口：使用 router.push
+        router.push(cleanPath);
+      } else {
+        // 跨域且强制当前窗口：使用 location.href
+        window.location.href = finalUrl;
+      }
     }
+    return;
+  }
+
+  // 【默认行为】未指定 openType，根据是否同域名自动判断
+  if (isSameSite) {
+    // 同域名：使用 Vue Router 内部跳转
+    router.push(cleanPath);
   } else {
-    router.push(path);
+    // 跨域名：使用新窗口打开
+    window.open(finalUrl, '_blank');
   }
 }

src/views/breg/index.vue

@@ -357,7 +357,9 @@ const onAgree = () => {
 
   .register-bos {
     flex: 1;
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
     padding-top: 20px;
 
@@ -518,7 +520,9 @@ const onAgree = () => {
     margin-top: 47px;
 
     .foot-bos {
-      width: 1200px;
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
       margin: 0 auto;
       padding-top: 16px;
       padding-left: 20px;

src/views/cart/index.vue

@@ -321,7 +321,9 @@ const handleChange = (row: any) => {
   width: 100%;
   background: #ffffff;
   .cart-bos {
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
   }
   .cart-head {
@@ -396,7 +398,9 @@ const handleChange = (row: any) => {
     box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.05);
     margin-top: 48px;
     .bnt-bos {
-      width: 1200px;
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
       margin: 0 auto;
       height: 82px;
       .bnt-box {

src/views/enterprise/agreementSupply/index.vue

@@ -27,10 +27,10 @@
           <el-select v-model="queryParams.topCategoryId" placeholder="请选择" clearable @change="handleFirstCategoryChange" style="flex:1">
             <el-option v-for="item in categoryList1" :key="item.id" :label="item.categoryName" :value="item.id" />
           </el-select>
-          <el-select v-model="queryParams.middleCategoryId" placeholder="请选择" clearable :disabled="!queryParams.topCategoryId" @change="handleSecondCategoryChange" style="flex:1">
+          <el-select v-model="queryParams.mediumCategoryId" placeholder="请选择" clearable :disabled="!queryParams.topCategoryId" @change="handleSecondCategoryChange" style="flex:1">
             <el-option v-for="item in categoryList2" :key="item.id" :label="item.categoryName" :value="item.id" />
           </el-select>
-          <el-select v-model="queryParams.bottomCategoryId" placeholder="请选择" clearable :disabled="!queryParams.middleCategoryId" style="flex:1">
+          <el-select v-model="queryParams.bottomCategoryId" placeholder="请选择" clearable :disabled="!queryParams.mediumCategoryId" style="flex:1">
             <el-option v-for="item in categoryList3" :key="item.id" :label="item.categoryName" :value="item.id" />
           </el-select>
         </div>
@@ -123,7 +123,7 @@ const queryParams = reactive({
   minPrice: '',
   maxPrice: '',
   topCategoryId: '' as number | string,
-  middleCategoryId: '' as number | string,
+  mediumCategoryId: '' as number | string,
   bottomCategoryId: '' as number | string,
   sortField: '',
   sortOrder: ''
@@ -167,7 +167,7 @@ const loadCategoryList = async () => {
 
 // 一级类别变化：加载二级，清空二三级选中
 const handleFirstCategoryChange = async (val: number | string) => {
-  queryParams.middleCategoryId = '';
+  queryParams.mediumCategoryId = '';
   queryParams.bottomCategoryId = '';
   categoryList2.value = [];
   categoryList3.value = [];
@@ -223,7 +223,7 @@ const handleReset = () => {
   queryParams.minPrice = '';
   queryParams.maxPrice = '';
   queryParams.topCategoryId = '';
-  queryParams.middleCategoryId = '';
+  queryParams.mediumCategoryId = '';
   queryParams.bottomCategoryId = '';
   queryParams.sortField = '';
   queryParams.sortOrder = '';

src/views/greg/index.vue

@@ -626,7 +626,9 @@ onUnmounted(() => {
 
   .register-bos {
     flex: 1;
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
     padding-top: 20px;
 
@@ -785,7 +787,9 @@ onUnmounted(() => {
     margin-top: 47px;
 
     .foot-bos {
-      width: 1200px;
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
       margin: 0 auto;
       padding-top: 16px;
       padding-left: 20px;

src/views/home/index-data.vue

@@ -18,7 +18,7 @@
         </div>
       </div>
       <div class="classify-bos" v-if="classifyShow">
-        <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
+        <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&mediumCategoryId=' + item.id)">
           <div class="two-level ellipsis">{{ item.label || '' }}</div>
           <el-icon class="classify-icon" :size="14" color="#364153">
             <ArrowRight />

src/views/home/index-enterprise.vue

@@ -0,0 +1,1124 @@
+<template>
+  <div class="home-pages">
+    <!--  头部 -->
+    <div class="home-head" @mouseleave="leaveClassify">
+      <div class="classify" :class="classifyShow ? 'classify-show' : ''">
+        <div
+          class="classify-list"
+          v-for="(item, index) in classifyList"
+          :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
+          :key="index"
+          @mouseenter="enterClassify(item)"
+          v-show="classifyShow ? true : Number(index) < 13"
+        >
+          <div class="label ellipsis" @click="onPath('/search?type=1&topCategoryId=' + item.id)">{{ 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" @click="onPath('/search?type=2&mediumCategoryId=' + item.id)">
+          <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" @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)">
+              {{ item1.label || '' }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="head-bos">
+        <div class="carousel">
+          <el-carousel trigger="click" height="530px">
+            <el-carousel-item v-for="item in carouselList" :key="item">
+              <img :src="item.imageUrl" alt="" />
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+      <!-- 右边 -->
+      <div class="head-right">
+        <div v-if="userInfo.userId" class="order-bos flex-column-between">
+          <div class="flex-row-start">
+            <img src="@/assets/images/logo2.png" alt="" />
+            <div class="ellipsis">{{ userInfo.nickName }}</div>
+          </div>
+          <div class="flex-row-start">
+            <div class="flex-1 flex-column-center">
+              <div>待付款</div>
+              <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
+            </div>
+            <div class="flex-1 flex-column-center">
+              <div>待发货</div>
+              <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
+            </div>
+            <div class="flex-1 flex-column-center">
+              <div>待收货</div>
+              <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="login-bos" v-else>
+          <div class="login-box">
+            <img src="@/assets/images/logo2.png" alt="" />
+            <div>
+              <div class="login1">您好,欢迎来到优易达</div>
+              <div class="login2">请先登录</div>
+            </div>
+          </div>
+          <div class="loginBtn-bos flex-row-center">
+            <div @click="onPath('/login')" class="login-bnt1 flex-row-center">登录</div>
+            <div @click="onPath('/breg')" class="login-bnt2 flex-row-center">注册</div>
+          </div>
+        </div>
+        <!-- <div class="login-bos">
+          <div class="login-box">
+            <img :src="userInfo.avatar ? userInfo.avatar : profile" alt="" />
+            <div>
+              <div class="login1">您好,欢迎来到优易达</div>
+              <div class="login2">{{ userInfo.nickName ? userInfo.nickName : '请先登录' }}</div>
+            </div>
+          </div>
+          <div class="login-btn">
+            <el-button v-if="!userInfo.nickName" type="primary" round size="small" style="width: 64px" @click="onPath('/login')">登录</el-button>
+            <el-button v-if="!userInfo.nickName" type="primary" plain round size="small" style="width: 64px">注册</el-button>
+            <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onlogout()">退出</el-button>
+          </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 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-box">
+            <template v-for="(item, index) in realList" :key="index">
+              <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="nav-bos">
+      <div v-for="(item, index) in navList" :key="index" class="nav-list" @click="onPath(item.url)">
+        <div class="nav-image"></div>
+        <div class="flex-row-between">
+          <div>
+            <div class="name1">{{ item.name1 }}</div>
+            <div class="name2">{{ item.name2 }}</div>
+          </div>
+          <div class="nav-more flex-row-center">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 循环-商品 -->
+    <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
+      <div class="goods-title flex-row-center">
+        <img src="@/assets/images/home/indexMro2.png" alt="" />
+        <span class="text-primary">{{ item.name }}</span>
+        <span>精选</span>
+        <img src="@/assets/images/home/indexMro3.png" alt="" />
+      </div>
+      <div class="goods-box">
+        <img class="goods-one" :src="item.imageUrl" alt="" />
+        <div class="goods-shop">
+          <template v-for="(item1, index1) in item.goodsList" :key="index1">
+            <div
+              v-if="Number(index1) < 8"
+              class="shop-list flex-column-between"
+              @click="onPath('/item?id=' + item1.id + '&productNo=' + item1.productNo)"
+            >
+              <img class="shop-img" :src="item1.productImage ? item1.productImage.split(',')[0] : ''" alt="" />
+              <div class="shop-name ellipsis2">{{ item1.itemName || '' }}</div>
+              <div class="shop-price">
+                <span class="price1">¥{{ item1.memberPrice || '' }}</span>
+                <span class="price2">¥{{ item1.marketPrice || '' }}</span>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="goods-brand flex-column-between" v-if="item.brandList && item.brandList.length > 0">
+          <div class="brand-bos">
+            <template v-for="(item1, index1) in item.brandList" :key="index1">
+              <img clear-both v-if="Number(index1) < 6" class="brand-img" :src="item1.brandLogo" alt="" />
+            </template>
+          </div>
+          <div class="brand-more flex-row-center">
+            <div>更多品牌</div>
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 为你推荐 -->
+    <div class="goods-title flex-row-center">
+      <img src="@/assets/images/home/indexMro2.png" alt="" />
+      <span class="text-primary">猜你喜欢</span>
+      <img src="@/assets/images/home/indexMro3.png" alt="" />
+    </div>
+    <!-- 轮播展位商品 -->
+    <div class="sell-bos recommend">
+      <div v-for="(item, index) in recommendList" :key="index" class="sell-list">
+        <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
+        <div class="sell-name ellipsis2">{{ item.itemName || '' }}</div>
+        <div class="sell-price">
+          <span class="price1">¥{{ item.memberPrice || '' }}</span>
+          <span class="price2">¥{{ item.marketPrice || '' }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import profile from '@/assets/images/profile.jpg';
+import { onPath } from '@/utils/siteConfig';
+import { getToken } from '@/utils/auth';
+import { getInfo } from '@/api/login';
+import {
+  getProductCategoryTree,
+  getHomeAdList,
+  getYouYiZiXunPage,
+  getEnterpriseMemberEquityList,
+  getHomeThreeAdList,
+  getHotSchemeTitle,
+  getHotSchemeList,
+  getScenePurchaseTitle,
+  getScenePurchaseList,
+  getPlatformFlashSaleTitle,
+  getPlatformFlashSaleList,
+  getPlatformFlashSaleBrand,
+  getExpertSelectionTitle,
+  getPurchaseGuideTitle,
+  getExpertSelectionList,
+  getClassificationFloorList,
+  getClassificationFloorDetail,
+  getClassificationFloorLabel,
+  getClassificationFloorDetail2,
+  getProjectCaseTitle,
+  getProjectCaseList,
+  countOrder
+} from '@/api/home/index';
+
+import { getSiteFloorList, getSiteAddress, getSiteFloorProductList, getSiteFloorBrandList, getSiteProductList } from '@/api/home/index-data';
+import { getEnterpriseRightsMemberEquityList, getEnterpriseHomeAdList, getCustomerProductPage } from '@/api/home/index-enterprise';
+import Cookies from 'js-cookie';
+const userInfo = ref<any>({});
+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 AdList = ref<any>([]);
+const hotTitle = ref<any>('');
+const sceneTitle = 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 bigbrandOne = ref<any>({});
+const countData = ref<any>({});
+const goodsList = ref<any>([]);
+const recommendList = ref<any>([]);
+
+const homeList = ref<any>([]);
+const router = useRouter();
+
+const navList = ref<any>([
+  { name1: '采购日历', name2: '提前制定和管理月度采购计划', url: '/enterprise/purchaseHistory' },
+  { name1: '自助开票', name2: '灵活自助开票 换开管票服务', url: '/enterprise/invoiceManage' },
+  { name1: '下载中心', name2: '批量订单打印', url: '/order/orderManage' },
+  { name1: '批量下单', name2: '智能识别多商品多地址一键下单', url: '/cart' }
+]);
+
+//当前客户下的站点地址
+getSiteAddress({}).then((res) => {
+  if (res.code == 200) {
+  }
+});
+
+onMounted(() => {
+  const token = Cookies.get('Authorization');
+  if (token) {
+    getInfo().then((res) => {
+      if (res.code == 200) {
+        userInfo.value = res.data.user;
+
+        countOrder({}).then((res1) => {
+          if (res1.code == 200) {
+            countData.value = res1.data || {};
+          }
+        });
+      }
+    });
+  }
+});
+
+//移入分类
+const enterClassify = (res: any) => {
+  classifyShow.value = true;
+  classifyId.value = res.id;
+  classifyInfo.value = res.children;
+};
+
+//移出分类
+const leaveClassify = () => {
+  classifyShow.value = false;
+};
+
+//头部分类
+import { categoryStore } from '@/store/modules/category';
+const categoryStoreStore = categoryStore();
+onMounted(async () => {
+  try {
+    // 根据当前路由路径获取分类数据
+    classifyList.value = await categoryStoreStore.fetchCategories('/index');
+  } catch (error) {
+    console.error('获取分类失败:', error);
+  }
+});
+
+//头部轮播
+getEnterpriseHomeAdList({}).then((res) => {
+  if (res.code == 200) {
+    carouselList.value = res.data;
+  }
+});
+
+//头部优易资讯
+getYouYiZiXunPage({}).then((res) => {
+  if (res.code == 200) {
+    realList.value = res.data;
+  }
+});
+
+//头部会员权益
+getEnterpriseRightsMemberEquityList({}).then((res) => {
+  if (res.code == 200) {
+    interestsList.value = res.data;
+  }
+});
+
+//首页三联广告(平台装修-楼层广告-首页三联广告)
+getHomeThreeAdList({}).then((res) => {
+  if (res.code == 200) {
+    AdList.value = res.data;
+  }
+});
+
+//循环
+getSiteFloorList({}).then(async (res) => {
+  if (res.code == 200) {
+    for (const item of res.data) {
+      try {
+        const datas2 = await getSiteFloorProductList({ floorId: item.id });
+        if (datas2.code == 200) {
+          item.goodsList = datas2.data;
+        }
+        const datas3 = await getSiteFloorBrandList({ floorId: item.id });
+        if (datas2.code == 200) {
+          item.brandList = datas3.data;
+        }
+      } catch (error) {}
+    }
+
+    goodsList.value = res.data;
+  }
+});
+
+//猜你喜欢
+getCustomerProductPage({}).then((res) => {
+  if (res.code == 200) {
+    console.log(res.data, 555555555555);
+    recommendList.value = res.rows;
+  }
+});
+
+const onInfo = (res: any) => {
+  router.push('/shop/info?id=' + res.id);
+};
+import { useUserStore } from '@/store/modules/user';
+import { url } from 'inspector';
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.home-pages {
+  width: 1200px;
+  margin: 0 auto;
+
+  // 头部
+  .home-head {
+    width: 1200px;
+    position: relative;
+    display: flex;
+    gap: 0px 10px;
+    margin-top: 10px;
+    background-color: #ffffff;
+
+    .classify {
+      width: 234px;
+      height: 540px;
+      background: #ffffff;
+
+      &.classify-show {
+        position: absolute;
+        z-index: 10;
+        height: auto;
+        min-height: 540px;
+      }
+
+      .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: 14px;
+          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 {
+      flex: 1;
+
+      .carousel {
+        width: 100%;
+        height: 100%;
+        background: #ffffff;
+        padding: 5px 0;
+
+        img {
+          width: 100%;
+          height: 530px;
+          border-radius: 10px;
+        }
+      }
+    }
+
+    //右边
+    .head-right {
+      width: 230px;
+      height: 540px;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 10px;
+
+      .login-bos {
+        width: calc(100% - 20px);
+        height: 110px;
+        border-bottom: 1px solid #e5e7eb;
+        margin: 0 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 16px 0;
+
+        .login-box {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+            border-radius: 40px;
+          }
+
+          .login1 {
+            font-size: 13px;
+            color: #444444;
+          }
+
+          .login2 {
+            margin-top: 2px;
+            font-size: 12px;
+            color: #6a7282;
+          }
+        }
+
+        .loginBtn-bos {
+          width: 100%;
+
+          .login-bnt1 {
+            width: 64px;
+            height: 24px;
+            background-color: #e7000b;
+            color: #ffffff;
+            border-radius: 24px;
+            font-size: 12px;
+            cursor: pointer;
+          }
+
+          .login-bnt2 {
+            width: 64px;
+            height: 24px;
+            border: 1px solid #e7000b;
+            color: #e7000b;
+            border-radius: 24px;
+            font-size: 12px;
+            margin-left: 10px;
+            cursor: pointer;
+          }
+        }
+      }
+
+      // .login-bos {
+      //   width: calc(100% - 20px);
+      //   height: 110px;
+      //   border-bottom: 1px solid #e5e7eb;
+      //   margin: 0 10px;
+      //   display: flex;
+      //   flex-direction: column;
+      //   justify-content: space-between;
+      //   padding: 16px 0;
+
+      //   .login-box {
+      //     display: flex;
+      //     align-items: center;
+
+      //     img {
+      //       width: 40px;
+      //       height: 40px;
+      //       margin-right: 8px;
+      //       border-radius: 40px;
+      //     }
+
+      //     .login-btn {
+      //       width: 100%;
+      //     }
+
+      //     .login1 {
+      //       font-size: 13px;
+      //       color: #444444;
+      //     }
+
+      //     .login2 {
+      //       margin-top: 2px;
+      //       font-size: 12px;
+      //       color: #6a7282;
+      //     }
+      //   }
+      // }
+
+      .order-bos {
+        width: calc(100% - 20px);
+        height: 110px;
+        font-size: 14px;
+        padding: 16px 0;
+        border-bottom: 1px solid #e5e7eb;
+        margin: 0 10px;
+        img {
+          width: 28px;
+          height: 28px;
+        }
+        .order-num {
+          color: #e7000b;
+          font-size: 14px;
+          margin-top: 2px;
+        }
+      }
+
+      .real-time {
+        width: calc(100% - 20px);
+        height: 227px;
+        border-bottom: 1px solid #e5e7eb;
+        margin: 0 10px;
+        background: linear-gradient(0deg, #ffece8 0%, #ffffff 100%);
+        border-radius: 6px 6px 6px 6px;
+        border-top: 1px solid #ff0036;
+        padding: 10px;
+
+        .real-title {
+          position: relative;
+          margin-bottom: 5px;
+
+          .real1 {
+            font-weight: 600;
+            font-size: 14px;
+            color: #f53f3f;
+          }
+
+          .real2 {
+            font-size: 13px;
+            color: #83899f;
+            cursor: pointer;
+          }
+        }
+        .real-box {
+          width: 100%;
+          background-color: #ffffff;
+          padding: 0 10px;
+          border-radius: 3px;
+        }
+
+        .real-list {
+          width: calc(100% - 20px);
+          font-size: 12px;
+          color: #1d2129;
+          cursor: pointer;
+          height: 34px;
+          line-height: 34px;
+          border-bottom: 1px solid #f2f3f5;
+          &:last-child {
+            border-bottom: none;
+          }
+
+          &: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: 14px;
+          color: #1d2129;
+          padding-left: 15px;
+
+          &::after {
+            content: '';
+            top: 3px;
+            left: 0;
+            position: absolute;
+            width: 4px;
+            height: 14px;
+            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: 15px;
+    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);
+      }
+    }
+  }
+
+  //标题
+  .goods-title {
+    width: 1200px;
+    height: 56px;
+    border-radius: 10px;
+    background: #ffffff;
+    font-weight: 600;
+    font-size: 20px;
+    margin-top: 20px;
+    img {
+      width: 30px;
+      height: 21px;
+      margin: 0 10px;
+    }
+  }
+  //循环-商品
+  .goods-bos {
+    .goods-box {
+      display: flex;
+      gap: 0 10px;
+      margin-top: 15px;
+      .goods-one {
+        width: 236px;
+        height: 560px;
+        border-radius: 10px;
+        background: #ffffff;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+        &:hover {
+          transform: translateY(-2px);
+        }
+      }
+      .goods-shop {
+        width: 802px;
+        height: 560px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        .shop-list {
+          width: 193px;
+          height: 275px;
+          background: #ffffff;
+          border-radius: 10px;
+          padding: 20px;
+          cursor: pointer;
+          transition: transform 0.2s ease;
+          &:hover {
+            transform: translateY(-2px);
+          }
+
+          .shop-img {
+            width: 153px;
+            height: 150px;
+            border-radius: 6px;
+          }
+
+          .shop-name {
+            width: 153px;
+            height: 38px;
+            font-size: 14px;
+            color: #101828;
+          }
+
+          .shop-price {
+            .price1 {
+              color: var(--el-color-primary);
+              font-size: 16px;
+              color: #e7000b;
+            }
+            .price2 {
+              font-size: 12px;
+              color: #99a1af;
+              line-height: 20px;
+              text-decoration-line: line-through;
+              text-transform: none;
+              margin-left: 6px;
+            }
+          }
+        }
+      }
+      .goods-brand {
+        width: 142px;
+        height: 560px;
+        border-radius: 10px;
+        background: #ffffff;
+        padding: 20px 10px;
+        .brand-bos {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px 0;
+          img {
+            width: 100%;
+            height: 74px;
+            border-radius: 4px;
+            border: 1px solid #e5e7eb;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            &:hover {
+              transform: translateY(-2px);
+            }
+          }
+        }
+        .brand-more {
+          color: var(--el-color-primary);
+          font-size: 14px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  //猜你喜欢
+  .sell-bos {
+    width: 1200px;
+    display: flex;
+    gap: 15px 20px;
+    margin-top: 15px;
+    padding-bottom: 30px;
+    flex-wrap: wrap;
+
+    .sell-list {
+      width: 224px;
+      height: 306px;
+      background: #ffffff;
+      border-radius: 10px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+      &:hover {
+        transform: translateY(-2px);
+      }
+
+      .sell-img {
+        width: 184px;
+        height: 182px;
+      }
+
+      .sell-name {
+        width: 184px;
+        height: 38px;
+        font-size: 14px;
+        color: #101828;
+      }
+
+      .sell-price {
+        .price1 {
+          color: var(--el-color-primary);
+          font-size: 16px;
+          color: #e7000b;
+        }
+        .price2 {
+          font-size: 12px;
+          color: #99a1af;
+          line-height: 20px;
+          text-decoration-line: line-through;
+          text-transform: none;
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .nav-bos {
+    width: 1200px;
+    display: flex;
+    gap: 0 10px;
+    .nav-list {
+      margin-top: 20px;
+      width: 292.5px;
+      height: 150px;
+      background: #ffffff;
+      border-radius: 10px 10px 10px 10px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      cursor: pointer;
+      .nav-image {
+        width: 50px;
+        height: 50px;
+        background: #ffeeea;
+        border-radius: 6px 6px 6px 6px;
+      }
+      .name1 {
+        font-size: 15px;
+        margin-bottom: 5px;
+        color: #101828;
+      }
+      .name2 {
+        font-size: 13px;
+        color: #6a7282;
+      }
+      .nav-more {
+        width: 20px;
+        height: 20px;
+        border-radius: 20px;
+        border: 1px solid #3d3e3f;
+      }
+    }
+  }
+}
+</style>

src/views/home/index-fuli.vue

@@ -1,285 +1,134 @@
 <template>
   <div class="home-pages">
-    <div class="head-pages">
-      <!--  头部 -->
-      <div class="home-head" @mouseleave="leaveClassify">
-        <div class="classify" :class="classifyShow ? 'classify-show' : ''">
-          <div
-            class="classify-list"
-            v-for="(item, index) in classifyList"
-            :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
-            :key="index"
-            @mouseenter="enterClassify(item)"
-            v-show="classifyShow ? true : Number(index) < 13"
-          >
-            <div class="label ellipsis" @click="onPath('/search?id=' + item.id)">{{ 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 v-if="item.id == classifyId && classifyShow" class="classify-border"></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="carousel-bos">
-          <el-carousel trigger="click" height="540px">
-            <el-carousel-item v-for="item in carouselList" :key="item">
-              <img :src="item.imageUrl" alt="" />
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <!-- 右边 -->
-        <div class="head-right">
-          <div v-if="userInfo.userId" class="order-bos flex-column-between">
-            <div class="flex-row-start">
-              <img src="@/assets/images/logo2.png" alt="" />
-              <div class="ellipsis">{{ userInfo.nickName }}</div>
-            </div>
-            <div class="flex-row-start">
-              <div class="flex-1 flex-column-center">
-                <div>待付款</div>
-                <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
-              </div>
-              <div class="flex-1 flex-column-center">
-                <div>待发货</div>
-                <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
-              </div>
-              <div class="flex-1 flex-column-center">
-                <div>待收货</div>
-                <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="login-bos" v-else>
-            <div class="login-box">
-              <img src="@/assets/images/logo2.png" alt="" />
-              <div>
-                <div class="login1">您好,欢迎来到优易达</div>
-                <div class="login2">请先登录</div>
-              </div>
-            </div>
-            <div class="loginBtn-bos flex-row-center">
-              <div @click="onPath('/login')" class="login-bnt1 flex-row-center">登录</div>
-              <div @click="onPath('/breg')" class="login-bnt2 flex-row-center">注册</div>
-            </div>
-          </div>
-          <!-- <div class="login-bos">
-          <div class="login-box">
-            <img :src="userInfo.avatar ? userInfo.avatar : profile" alt="" />
-            <div>
-              <div class="login1">您好,欢迎来到优易达</div>
-              <div class="login2">{{ userInfo.nickName ? userInfo.nickName : '请先登录' }}</div>
-            </div>
-          </div>
-          <div class="login-btn">
-            <el-button v-if="!userInfo.nickName" type="primary" round size="small" style="width: 64px" @click="onPath('/login')">登录</el-button>
-            <el-button v-if="!userInfo.nickName" type="primary" plain round size="small" style="width: 64px">注册</el-button>
-            <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onlogout()">退出</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>
-            <template v-for="(item, index) in realList" :key="index">
-              <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
-            </template>
-          </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>
-    <div class="pages-bos">
-      <!-- 场景采购 -->
-      <div class="home-title flex-row-center">
-        <img src="@/assets/images/home/indexFuli1.png" alt="" />
-        场景采购
-        <img src="@/assets/images/home/indexFuli2.png" alt="" />
-      </div>
-      <div class="scenario-bos">
-        <template v-for="(item, index) in scenario" :key="index">
-          <div v-if="Number(index) < 4" class="scenario-list">
-            <img class="shop-img" :src="item.imageUrl" alt="" />
-          </div>
-        </template>
-      </div>
-      <!-- 热门定制 -->
-      <div class="home-title flex-row-center">
-        <img src="@/assets/images/home/indexFuli1.png" alt="" />
-        热门定制
-        <img src="@/assets/images/home/indexFuli2.png" alt="" />
-      </div>
-      <div class="sell-bos">
-        <template v-for="(item, index) in popular" :key="index">
-          <div v-if="Number(index) < 5" class="sell-list">
-            <img class="sell-img" :src="item.productImage" alt="" />
-            <div class="sell-name ellipsis2">{{ item.itemName || '' }}</div>
-            <div class="sell-price">
-              <span class="price1">¥{{ item.memberPrice || '' }}</span>
-              <span class="price2">¥{{ item.marketPrice || '' }}</span>
-            </div>
-          </div>
-        </template>
-      </div>
-      <!-- 循环数据 -->
-      <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
-        <img class="goods-main" :src="item.mainImg" alt="" />
-        <div class="goods-box">
-          <div v-for="(item1, index1) in item.goodsList" :key="index1" class="goods-list">
-            <img class="goods-img" :src="item1.productImage ? item1.productImage.split(',')[0] : ''" alt="" />
-            <div class="goods-name ellipsis2">{{ item1.itemName || '' }}</div>
-            <div class="goods-price">
-              <span class="price1">¥{{ item1.memberPrice || '' }}</span>
-              <span class="price2">¥{{ item1.marketPrice || '' }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 为您推荐 -->
-      <div class="home-title flex-row-center">
-        <img src="@/assets/images/home/indexFuli1.png" alt="" />
-        为您推荐
-        <img src="@/assets/images/home/indexFuli2.png" alt="" />
-      </div>
-      <div class="sell-bos recommend">
-        <div v-for="(item, index) in recommend" :key="index" class="sell-list">
-          <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
-          <div class="sell-name ellipsis2">{{ item.name || '格力KFR-72LW/定频冷暖空调柜机3P格力KFR行车自行车自行车行政村在' }}</div>
-          <div class="sell-price">
-            <span class="price1">¥{{ item.memberPrice || '23.22' }}</span>
-            <span class="price2">¥{{ item.marketPrice || '52.12' }}</span>
-          </div>
-        </div>
-      </div>
+    <!--  头部 -->
+    <comHead v-if="headData.show" :row="headData" :datas="realList"></comHead>
+
+    <!-- 场景采购 -->
+    <indexFuilTitle :datas="{ title: '场景采购' }"></indexFuilTitle>
+    <imageCube v-if="scenario.length > 0" :datas="scenario" :row="imageCubeData"></imageCube>
+
+    <!-- 热门定制 -->
+    <indexFuilTitle :datas="{ title: '热门定制' }"></indexFuilTitle>
+    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="popular"></comGoods>
+
+    <!-- 循环数据 -->
+    <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
+      <div class="h-[15px]"></div>
+      <floor v-if="item.floorData && item.floorData.show" :row="item.floorData"></floor>
     </div>
+
+    <!-- 为您推荐 -->
+    <indexFuilTitle :datas="{ title: '为您推荐' }"></indexFuilTitle>
+    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="recommend"></comGoods>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onPath } from '@/utils/siteConfig';
-import { getToken } from '@/utils/auth';
-import { getInfo } from '@/api/login';
-import profile from '@/assets/images/profile.jpg';
+import indexFuilTitle from '@/views/home/pccomponents/pages/indexFuilTitle.vue';
+import comHead from '@/views/home/pccomponents/pages/head.vue';
+import imageCube from '@/views/home/pccomponents/pages/imageCube.vue';
+import comGoods from '@/views/home/pccomponents/pages/goods.vue';
+import floor from '@/views/home/pccomponents/pages/floor.vue';
+import fuli from '@/assets/images/fuli.png';
 import {
-  getGiftCategoryList,
   getHomeAdList,
   getIconAdList,
-  getNoticeList,
   getRecommendAdList,
   getHotCustomGiftFloorList,
   getAdvertisementGiftFloorList,
   getGiftFloorLinkProductList,
   getRecommendGiftFloorList
 } from '@/api/home/index-fuli';
-import Cookies from 'js-cookie';
-
-import { getProductCategoryTree, getYouYiZiXunPage, countOrder } from '@/api/home/index';
+import { getSearchTitle, getYouYiZiXunPage } from '@/api/home/index';
 
-const countData = ref<any>({});
-const userInfo = ref<any>({});
-const classifyList = ref<any>([]);
-const classifyShow = ref<any>(false);
-const classifyId = ref<any>('');
-const classifyInfo = ref<any>([]);
-const carouselList = ref<any>([]);
+const headData = ref<any>({});
+const imageCubeData = ref<any>({});
 const realList = ref<any>([]);
-const interestsList = ref<any>([]);
 const scenario = ref<any>([]);
 const popular = ref<any>([]);
 const goodsList = ref<any>([]);
 const recommend = ref<any>([]);
 
 onMounted(() => {
-  const token = Cookies.get('Authorization');
-  if (token) {
-    getInfo().then((res) => {
-      if (res.code == 200) {
-        userInfo.value = res.data.user;
-
-        countOrder({}).then((res1) => {
-          if (res1.code == 200) {
-            countData.value = res1.data || {};
-          }
-        });
-      }
-    });
-  }
-});
-
-//头部分类
-getProductCategoryTree({}).then((res) => {
-  if (res.code == 200) {
-    classifyList.value = res.data;
-  }
+  document.documentElement.style.setProperty('--hover-color', '#E7000B');
+  getHead();
 });
 
-//移入分类
-const enterClassify = (res: any) => {
-  classifyShow.value = true;
-  classifyId.value = res.id;
-  classifyInfo.value = res.children;
-};
+//头部
+const getHead = async () => {
+  headData.value.topStyle = 2;
+  headData.value.logo = fuli;
+  headData.value.toplabel = [];
+  headData.value.classifyShow = true;
+  headData.value.carouselStyle = true;
+  headData.value.headType = 2;
+  headData.value.leftStyle = 1;
+  headData.value.carouselList = [];
+  headData.value.advertNum = 0;
+  headData.value.advertList = [];
+  headData.value.realDataType = 1;
+  headData.value.realNumber = 6;
+  headData.value.navlList = [];
+  try {
+    const datas1 = await getSearchTitle(3);
+    if (datas1.code == 200) {
+      datas1.data.forEach((item: any) => {
+        headData.value.toplabel.push({
+          title: item.navigationName
+        });
+      });
+    }
 
-//移出分类
-const leaveClassify = () => {
-  classifyShow.value = false;
-};
+    // const datas2 = await getHomeNav(3);
+    headData.value.topNav = [
+      { title: '首页', url: '/index' },
+      { title: '工业品商城', url: '/indexMro' },
+      { title: '福礼商城', url: '/indexFuli' },
+      { title: '商用工程', url: '/theme?id=2' },
+      { title: '场景采购', url: '/plan/procure' },
+      { title: '解决方案', url: '/plan' },
+      { title: '特价专区', url: '/search/special' }
+    ];
+
+    const datas3 = await getHomeAdList({});
+    if (datas3.code == 200) {
+      datas3.data.forEach((item: any) => {
+        headData.value.carouselList.push({
+          imageUrl: item.imageUrl
+        });
+      });
+    }
 
-// //头部分类
-// getGiftCategoryList({}).then((res) => {
-//   if (res.code == 200) {
-//     classifyList.value = res.data;
-//   }
-// });
+    const datas5 = await getYouYiZiXunPage({});
+    if (datas5.code == 200) realList.value = datas5.data;
 
-//轮播广告
-getHomeAdList({}).then((res) => {
-  if (res.code == 200) {
-    carouselList.value = res.data;
-  }
-});
-
-// 会员权益
-getIconAdList({}).then((res) => {
-  if (res.code == 200) {
-    interestsList.value = res.data;
-  }
-});
+    const datas6 = await getIconAdList({});
+    if (datas6.code == 200) {
+      datas6.data.forEach((item: any) => {
+        headData.value.navlList.push({
+          imageUrl: item.imageUrl,
+          title: item.title,
+          url: item.link ? item.link : ''
+        });
+      });
+    }
 
-// 咨询
-getYouYiZiXunPage({}).then((res) => {
-  if (res.code == 200) {
-    realList.value = res.data;
-  }
-});
+    headData.value.show = true;
+  } catch (error) {}
+};
 
-// 荐广告（福利装修-推荐广告）场景采购
+// 场景采购
 getRecommendAdList({}).then((res) => {
   if (res.code == 200) {
+    imageCubeData.value.imageHeight = 182;
+    imageCubeData.value.number = 4;
+    imageCubeData.value.gap = 10;
+    imageCubeData.value.imageTopRounded = 5;
+    imageCubeData.value.imageBottomRoundedRounded = 5;
+    res.data.forEach((item: any) => {
+      item.imageUrl = item.imageUrl;
+      item.url = item.link ? item.link : '';
+    });
     scenario.value = res.data;
   }
 });
@@ -295,34 +144,40 @@ getHotCustomGiftFloorList({}).then((res) => {
   }
 });
 
-//循环
+//外面的循环
 getAdvertisementGiftFloorList({}).then(async (res) => {
   if (res.code == 200) {
     for (const item of res.data) {
+      item.floorData = {};
+      item.floorData.imageUrl = item.mainImg;
+      item.floorData.url = '';
+      item.floorData.imgType = 1;
+      item.floorData.brandList = [];
+      item.floorData.styleType = 1;
+      item.floorData.imageRadius = 5;
+      item.floorData.goodsIds = [];
+      item.floorData.goodsShow = [1, 2, 3];
+      item.floorData.btnStyle = 1;
+      item.floorData.btnColor = '#ffffff';
+      item.floorData.btnbackgroundColor = '#E7000B';
+      item.floorData.moreUrl = '';
+      item.floorData.moreColor = '#E7000B';
+      item.floorData.moreShow = true;
       try {
         const datas2 = await getGiftFloorLinkProductList({ floorId: item.id });
         if (datas2.code == 200) {
           item.goodsList = datas2.data;
+          item.floorData.goodsList = datas2.data;
+          item.floorData.goodsDefault = true;
         }
+        item.floorData.show = true;
       } catch (error) {}
     }
-
     goodsList.value = res.data;
   }
 });
-// getAdvertisementGiftFloorList({}).then((res) => {
-//   if (res.code == 200) {
-//     goodsList.value = res.data;
-//     res.data.forEach((item: any) => {
-//       getGiftFloorLinkProductList({ floorId: item.id }).then((res) => {
-//         if (res.code == 200) {
-//         }
-//       });
-//     });
-//   }
-// });
 
-//为你推荐
+// 为您推荐
 getRecommendGiftFloorList({}).then((res) => {
   if (res.code == 200) {
     getGiftFloorLinkProductList({ floorId: res.data[0].id }).then((res1) => {
@@ -337,528 +192,18 @@ getRecommendGiftFloorList({}).then((res) => {
 <style lang="scss" scoped>
 .home-pages {
   width: 100%;
-  margin-top: 10px;
-  .head-pages {
-    width: 100%;
-    background: #ead3ab;
-
-    // 头部
-    .home-head {
-      width: 1200px;
-      margin: 0 auto;
-      position: relative;
-      display: flex;
-      gap: 0px 10px;
-
-      .classify {
-        width: 234px;
-        height: 540px;
-        background: #ffffff;
-        &.classify-show {
-          position: absolute;
-          z-index: 10;
-          height: auto;
-          min-height: 540px;
-        }
-
-        .classify-list {
-          width: 100%;
-          height: 40px;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          padding-left: 15px;
-          position: relative;
-          z-index: 12;
-
-          &.classify-hig {
-            border: 1px solid var(--el-color-primary);
-            border-right: 0px solid #ffffff;
-          }
-
-          .label {
-            max-width: 100px;
-            font-weight: 600;
-            font-size: 14px;
-            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: 6;
-          }
-        }
-      }
-
-      .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: 5;
-
-        .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);
-              }
-            }
-          }
-        }
-      }
-
-      // 头部中间
-      .carousel-bos {
-        flex: 1;
-        height: 540px;
-        img {
-          width: 100%;
-          height: 540px;
-        }
-      }
+  padding-bottom: 30px;
 
-      //右边
-      .head-right {
-        width: 230px;
-        height: 540px;
-        background: #ffffff;
-        display: flex;
-        flex-direction: column;
+  :deep(.hover-color) {
+    cursor: pointer;
 
-        .login-bos {
-          width: calc(100% - 20px);
-          height: 110px;
-          border-bottom: 1px solid #e5e7eb;
-          margin: 0 10px;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          padding: 16px 0;
+    &:hover {
+      color: var(--hover-color) !important;
 
-          .login-box {
-            display: flex;
-            align-items: center;
-
-            img {
-              width: 40px;
-              height: 40px;
-              margin-right: 8px;
-              border-radius: 40px;
-            }
-
-            .login1 {
-              font-size: 13px;
-              color: #444444;
-            }
-
-            .login2 {
-              margin-top: 2px;
-              font-size: 12px;
-              color: #6a7282;
-            }
-          }
-
-          .loginBtn-bos {
-            width: 100%;
-
-            .login-bnt1 {
-              width: 64px;
-              height: 24px;
-              background-color: #e7000b;
-              color: #ffffff;
-              border-radius: 24px;
-              font-size: 12px;
-              cursor: pointer;
-            }
-
-            .login-bnt2 {
-              width: 64px;
-              height: 24px;
-              border: 1px solid #e7000b;
-              color: #e7000b;
-              border-radius: 24px;
-              font-size: 12px;
-              margin-left: 10px;
-              cursor: pointer;
-            }
-          }
-        }
-
-        // .login-bos {
-        //   width: calc(100% - 20px);
-        //   height: 110px;
-        //   border-bottom: 1px solid #e5e7eb;
-        //   margin: 0 10px;
-        //   display: flex;
-        //   flex-direction: column;
-        //   justify-content: space-between;
-        //   padding: 16px 0;
-
-        //   .login-box {
-        //     display: flex;
-        //     align-items: center;
-
-        //     img {
-        //       width: 40px;
-        //       height: 40px;
-        //       margin-right: 8px;
-        //       border-radius: 40px;
-        //     }
-
-        //     .login-btn {
-        //       width: 100%;
-        //     }
-
-        //     .login1 {
-        //       font-size: 13px;
-        //       color: #444444;
-        //     }
-
-        //     .login2 {
-        //       margin-top: 2px;
-        //       font-size: 12px;
-        //       color: #6a7282;
-        //     }
-        //   }
-        // }
-
-        .order-bos {
-          width: calc(100% - 20px);
-          height: 110px;
-          font-size: 14px;
-          padding: 16px 0;
-          border-bottom: 1px solid #e5e7eb;
-          margin: 0 10px;
-          img {
-            width: 28px;
-            height: 28px;
-          }
-          .order-num {
-            color: #e7000b;
-            font-size: 14px;
-            margin-top: 2px;
-          }
-        }
-
-        .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: 3px;
-              left: 0;
-              position: absolute;
-              width: 4px;
-              height: 14px;
-              background: var(--el-color-primary);
-            }
-
-            .real1 {
-              font-weight: 600;
-              font-size: 14px;
-              color: #1d2129;
-              padding-left: 15px;
-            }
-
-            .real2 {
-              font-size: 13px;
-              color: #83899f;
-              cursor: pointer;
-            }
-          }
-
-          .real-list {
-            width: 100%;
-            font-size: 12px;
-            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: 14px;
-            color: #1d2129;
-            padding-left: 15px;
-
-            &::after {
-              content: '';
-              top: 3px;
-              left: 0;
-              position: absolute;
-              width: 4px;
-              height: 14px;
-              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;
-              }
-            }
-          }
-        }
+      .zi-hover {
+        color: var(--hover-color) !important;
       }
     }
   }
-
-  .pages-bos {
-    width: 1200px;
-    margin: 0 auto;
-
-    //标题
-    .home-title {
-      width: 1200px;
-      height: 56px;
-      background: #ffffff;
-      border-radius: 10px;
-      margin-top: 30px;
-      font-weight: 600;
-      font-size: 20px;
-      color: #ff4f20;
-      img {
-        width: 43px;
-        height: 28px;
-        margin: 0 10px;
-      }
-    }
-
-    // 场景采购
-    .scenario-bos {
-      width: 1200px;
-      display: flex;
-      gap: 0 10px;
-      margin-top: 12px;
-
-      .scenario-list {
-        width: 292.5px;
-        height: 182px;
-        border-radius: 10px;
-        overflow: hidden;
-        cursor: pointer;
-        transition: transform 0.2s ease;
-        img {
-          width: 292.5px;
-          height: 182px;
-        }
-        &:hover {
-          transform: translateY(-2px);
-        }
-      }
-    }
-
-    //热门定制
-    .sell-bos {
-      width: 1200px;
-      display: flex;
-      gap: 0 20px;
-      margin-top: 12px;
-
-      .sell-list {
-        width: 224px;
-        height: 306px;
-        background: #ffffff;
-        border-radius: 10px;
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        cursor: pointer;
-        transition: transform 0.2s ease;
-        &:hover {
-          transform: translateY(-2px);
-        }
-
-        .sell-img {
-          width: 184px;
-          height: 182px;
-        }
-
-        .sell-name {
-          width: 184px;
-          height: 38px;
-          font-size: 14px;
-          color: #101828;
-        }
-
-        .sell-price {
-          .price1 {
-            color: var(--el-color-primary);
-            font-size: 16px;
-            color: #e7000b;
-          }
-          .price2 {
-            font-size: 12px;
-            color: #99a1af;
-            line-height: 20px;
-            text-decoration-line: line-through;
-            text-transform: none;
-            margin-left: 6px;
-          }
-        }
-      }
-    }
-
-    //循环数据
-    .goods-bos {
-      width: 1200px;
-      margin-top: 30px;
-      display: flex;
-      .goods-main {
-        width: 232px;
-        height: 560px;
-        border-radius: 10px;
-        margin-right: 10px;
-      }
-      .goods-box {
-        flex: 1;
-        height: 560px;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        .goods-list {
-          width: 232px;
-          height: 275px;
-          background: #ffffff;
-          border-radius: 10px;
-          padding: 20px;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          cursor: pointer;
-          transition: transform 0.2s ease;
-          &:hover {
-            transform: translateY(-2px);
-          }
-          .goods-img {
-            height: 150px;
-            width: 192px;
-          }
-          .goods-name {
-            width: 192px;
-            height: 38px;
-            font-size: 14px;
-            color: #101828;
-          }
-
-          .goods-price {
-            .price1 {
-              color: var(--el-color-primary);
-              font-size: 16px;
-              color: #e7000b;
-            }
-            .price2 {
-              font-size: 12px;
-              color: #99a1af;
-              line-height: 20px;
-              text-decoration-line: line-through;
-              text-transform: none;
-              margin-left: 6px;
-            }
-          }
-        }
-      }
-    }
-
-    .recommend {
-      margin-bottom: 30px;
-      gap: 10px 20px;
-      flex-wrap: wrap;
-    }
-  }
 }
 </style>

src/views/home/index-mro.vue

@@ -1,198 +1,26 @@
 <template>
   <div class="home-pages">
-    <div class="head-pages">
-      <div class="bg-img">
-        <img :src="carouselList.length && carouselList[carouselIndex].imageUrl" alt="" />
-      </div>
-      <!--  头部 -->
-      <div class="home-head" @mouseleave="leaveClassify">
-        <!-- 分类 -->
-        <div class="classify" :class="classifyShow ? 'classify-show' : ''">
-          <div
-            class="classify-list"
-            v-for="(item, index) in classifyList"
-            :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
-            :key="index"
-            @mouseenter="enterClassify(item)"
-            v-show="classifyShow ? true : Number(index) < 8"
-          >
-            <div class="label ellipsis" @click="onPath('/search?id=' + item.id)">{{ item.label }}</div>
-            <div class="two-level">
-              <template v-for="(item1, index1) in item.children" :key="index1">
-                <div class="two-hig" v-if="Number(index1) < 2">{{ item1.label }}</div>
-                <div style="margin: 0 4px" v-if="index1 == 0 && item.children.length > 1">/</div>
-              </template>
-            </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="carousel-bos">
-          <el-carousel trigger="click" height="540px" @change="onCarousel">
-            <el-carousel-item v-for="item in carouselList" :key="item">
-              <img :src="item.imageUrl" alt="" />
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <!-- 右边 -->
-        <div class="head-right">
-          <div v-if="userInfo.userId" class="order-bos flex-column-between">
-            <div class="flex-row-start">
-              <img src="@/assets/images/logo2.png" alt="" />
-              <div class="ellipsis">{{ userInfo.nickName }}</div>
-            </div>
-            <div class="flex-row-start">
-              <div class="flex-1 flex-column-center">
-                <div>待付款</div>
-                <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
-              </div>
-              <div class="flex-1 flex-column-center">
-                <div>待发货</div>
-                <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
-              </div>
-              <div class="flex-1 flex-column-center">
-                <div>待收货</div>
-                <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="login-bos" v-else>
-            <div class="login-box">
-              <img src="@/assets/images/logo2.png" alt="" />
-              <div>
-                <div class="login1">您好,欢迎来到优易达</div>
-                <div class="login2">请先登录</div>
-              </div>
-            </div>
-            <div class="loginBtn-bos flex-row-center">
-              <div @click="onPath('/login')" class="login-bnt1 flex-row-center">登录</div>
-              <div @click="onPath('/breg')" class="login-bnt2 flex-row-center">注册</div>
-            </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>
-            <template v-for="(item, index) in realList" :key="index">
-              <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
-            </template>
-          </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>
-    <div class="pages-bos">
-      <!-- 轮播展位商品 -->
-      <div class="sell-bos">
-        <template v-for="(item, index) in sellList" :key="index">
-          <div v-if="Number(index) < 5" class="sell-list">
-            <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
-            <div class="sell-name ellipsis2">{{ item.itemName || '' }}</div>
-            <div class="sell-price">
-              <span class="price1">¥{{ item.memberPrice || '' }}</span>
-              <span class="price2">¥{{ item.marketPrice || '' }}</span>
-            </div>
-          </div>
-        </template>
-      </div>
-      <!-- 商业标签(工业装修-商业标签) -->
-      <div class="trade-bos">
-        <template v-for="(item, index) in tradeList" :key="index">
-          <div v-if="Number(index) < 4" class="trade-list flex-row-between">
-            <div class="trade-box flex-column-between">
-              <div class="trade-title">{{ item.title || '' }}</div>
-              <div class="trade-info ellipsis2">
-                {{ item.remark || '' }}
-              </div>
-              <img class="trade-look" src="@/assets/images/home/indexMro1.png" alt="" />
-            </div>
-            <img class="trade-img" :src="item.imageUrl" alt="" />
-          </div>
-        </template>
-      </div>
-      <!-- 循环-商品 -->
-      <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
-        <div class="goods-title flex-row-center">
-          <img src="@/assets/images/home/indexMro2.png" alt="" />
-          <span class="text-primary">{{ item.name }}</span>
-          <span>精选</span>
-          <img src="@/assets/images/home/indexMro3.png" alt="" />
-        </div>
-        <div class="goods-box">
-          <img class="goods-one" :src="item.imageUrl" alt="" />
-          <div class="goods-shop">
-            <template v-for="(item1, index1) in item.goodsList" :key="index1">
-              <div v-if="Number(index1) < 8" class="shop-list flex-column-between">
-                <img class="shop-img" :src="item1.productImage ? item1.productImage.split(',')[0] : ''" alt="" />
-                <div class="shop-name ellipsis2">{{ item1.itemName || '' }}</div>
-                <div class="shop-price">
-                  <span class="price1">¥{{ item1.memberPrice || '' }}</span>
-                  <span class="price2">¥{{ item1.marketPrice || '' }}</span>
-                </div>
-              </div>
-            </template>
-          </div>
-          <div class="goods-brand flex-column-between" v-if="item.brandList && item.brandList.length > 0">
-            <div class="brand-bos">
-              <template v-for="(item1, index1) in item.brandList" :key="index1">
-                <img clear-both v-if="Number(index1) < 6" class="brand-img" :src="item1.brandLogo" alt="" />
-              </template>
-            </div>
-            <div class="brand-more flex-row-center">
-              <div>更多品牌</div>
-              <el-icon><ArrowRight /></el-icon>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 为你推荐 -->
-      <div class="goods-title flex-row-center">
-        <img src="@/assets/images/home/indexMro2.png" alt="" />
-        <span class="text-primary">为你推荐</span>
-        <img src="@/assets/images/home/indexMro3.png" alt="" />
-      </div>
-      <div class="nav-bos flex-row-center">
-        <template v-for="(item, index) in recommendNav" :key="index">
-          <div @click="onNav(item)" class="nav-list" :class="categoryId == item.id ? 'hig' : ''" v-if="Number(index) < 9">{{ item.title }}</div>
-        </template>
-      </div>
-      <!-- 轮播展位商品 -->
-      <div class="sell-bos recommend">
-        <div v-for="(item, index) in recommendList" :key="index" class="sell-list">
-          <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
-          <div class="sell-name ellipsis2">{{ item.itemName || '' }}</div>
-          <div class="sell-price">
-            <span class="price1">¥{{ item.memberPrice || '' }}</span>
-            <span class="price2">¥{{ item.marketPrice || '' }}</span>
-          </div>
-        </div>
-      </div>
+    <!--  头部 -->
+    <comHead v-if="headData.show" :row="headData" :datas="realList"></comHead>
+    <!-- 活动魔方 商业标签(工业装修-商业标签) -->
+    <div class="h-[5px]"></div>
+    <activity v-if="activityData.show" :row="activityData"></activity>
+    <!-- 轮播展位商品 -->
+    <div class="h-[15px]"></div>
+    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="sellList"></comGoods>
+    <!-- 循环-商品 -->
+    <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
+      <indexMorTitle :datas="item.titleData"></indexMorTitle>
+      <floor v-if="item.floorData && item.floorData.show" :row="item.floorData"></floor>
     </div>
+    <!-- 为你推荐 -->
+    <indexMorTitle :datas="{ title1: '为你推荐' }"></indexMorTitle>
+    <comGoodsList v-if="comGoodsListData.show" :row="comGoodsListData"></comGoodsList>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
-  getProductCategoryTree,
   getHomeAdList,
   getHomeIconAd,
   getCarouselDisplayProductList,
@@ -200,92 +28,96 @@ import {
   getIndustrialFloor,
   getIndustrialFloorProductList,
   getIndustrialFloorBrand,
-  getRecommendedCategory,
-  getRecommendedCategoryProductList
+  getRecommendedCategory
 } from '@/api/home/index-mro';
-import Cookies from 'js-cookie';
-import { getYouYiZiXunPage, countOrder } from '@/api/home/index';
-import { onPath } from '@/utils/siteConfig';
-import { getToken } from '@/utils/auth';
-import { getInfo } from '@/api/login';
-import profile from '@/assets/images/profile.jpg';
-
-const userInfo = ref<any>({});
-const classifyId = ref<any>('');
-const classifyShow = ref<any>(false);
-const classifyInfo = ref<any>([]);
-const classifyList = ref<any>([]);
-const carouselList = ref<any>([]);
-const carouselIndex = ref<any>(0);
+import { getSearchTitle, getYouYiZiXunPage, getHomeNav } from '@/api/home/index';
+import mro from '@/assets/images/mro.png';
+import indexMorTitle from '@/views/home/pccomponents/pages/indexMorTitle.vue';
+import comHead from '@/views/home/pccomponents/pages/head.vue';
+import comGoods from '@/views/home/pccomponents/pages/goods.vue';
+import activity from '@/views/home/pccomponents/pages/activity.vue';
+import floor from '@/views/home/pccomponents/pages/floor.vue';
+import comGoodsList from '@/views/home/pccomponents/pages/goodsList.vue';
+
+const headData = ref<any>({});
+const activityData = ref<any>({});
+const comGoodsListData = ref<any>({});
 const realList = ref<any>([]);
-const interestsList = ref<any>([]);
 const sellList = ref<any>([]);
 const tradeList = ref<any>([]);
 const goodsList = ref<any>([]);
-const recommendNav = ref<any>([]);
-const recommendList = ref<any>([]);
-const categoryId = ref<any>('');
-const countData = ref<any>({});
 
 onMounted(() => {
-  const token = Cookies.get('Authorization');
-  if (token) {
-    getInfo().then((res) => {
-      if (res.code == 200) {
-        userInfo.value = res.data.user;
-
-        countOrder({}).then((res1) => {
-          if (res1.code == 200) {
-            countData.value = res1.data || {};
-          }
-        });
-      }
-    });
-  }
+  document.documentElement.style.setProperty('--hover-color', '#E7000B');
+  getHead();
 });
 
-//移出分类
-const leaveClassify = () => {
-  classifyShow.value = false;
-};
-
-//移入分类
-const enterClassify = (res: any) => {
-  classifyShow.value = true;
-  classifyId.value = res.id;
-  classifyInfo.value = res.children;
-};
+//头部
+const getHead = async () => {
+  headData.value.topStyle = 2;
+  headData.value.logo = mro;
+  headData.value.toplabel = [];
+  headData.value.classifyShow = true;
+  headData.value.carouselStyle = true;
+  headData.value.headType = 1;
+  headData.value.leftStyle = 2;
+  headData.value.leftBackground = '#323232';
+  headData.value.leftColor1 = '#ffffff';
+  headData.value.leftColor2 = '#a2a2a2';
+  headData.value.carouselList = [];
+  headData.value.advertNum = 0;
+  headData.value.advertList = [];
+  headData.value.realDataType = 1;
+  headData.value.realNumber = 6;
+  headData.value.navlList = [];
+  try {
+    const datas1 = await getSearchTitle(2);
+    if (datas1.code == 200) {
+      datas1.data.forEach((item: any) => {
+        headData.value.toplabel.push({
+          title: item.navigationName
+        });
+      });
+    }
 
-//头部分类
-getProductCategoryTree({
-  platform: 1
-}).then((res) => {
-  if (res.code == 200) {
-    classifyList.value = res.data;
-  }
-});
+    // const datas2 = await getHomeNav(2);
+    // console.log(datas2, 789);
+    headData.value.topNav = [
+      { title: '首页', url: '/index' },
+      { title: '工业品商城', url: '/indexMro' },
+      { title: '福礼商城', url: '/indexFuli' },
+      { title: '商用工程', url: '/theme?id=2' },
+      { title: '场景采购', url: '/plan/procure' },
+      { title: '解决方案', url: '/plan' },
+      { title: '特价专区', url: '/search/special' }
+    ];
+
+    const datas3 = await getHomeAdList({});
+    if (datas3.code == 200) {
+      datas3.data.forEach((item: any) => {
+        headData.value.carouselList.push({
+          imageUrl: item.imageUrl
+        });
+      });
+    }
 
-//头部轮播
-getHomeAdList({}).then((res) => {
-  if (res.code == 200) {
-    carouselList.value = res.data;
-    carouselIndex.value = 0;
-  }
-});
+    const datas5 = await getYouYiZiXunPage({});
+    if (datas5.code == 200) realList.value = datas5.data;
 
-//头部优易资讯
-getYouYiZiXunPage({}).then((res) => {
-  if (res.code == 200) {
-    realList.value = res.data;
-  }
-});
+    const datas6 = await getHomeIconAd({});
+    if (datas6.code == 200) {
+      datas6.data.forEach((item: any) => {
+        headData.value.navlList.push({
+          imageUrl: item.imageUrl,
+          title: item.title,
+          url: item.link ? item.link : ''
+        });
+      });
+    }
 
-//头部会员权益
-getHomeIconAd({}).then((res) => {
-  if (res.code == 200) {
-    interestsList.value = res.data;
-  }
-});
+    headData.value.show = true;
+  } catch (error) {}
+};
 
 //轮播展位商品(工业装修-轮播展位商品)
 getCarouselDisplayProductList({}).then((res) => {
@@ -294,686 +126,140 @@ getCarouselDisplayProductList({}).then((res) => {
   }
 });
 
-//商业标签(工业装修-商业标签)
+//活动魔方 商业标签(工业装修-商业标签)
 getBusinessLabelList({}).then((res) => {
+  activityData.value.navlList = [];
+  activityData.value.navType = 1;
+  activityData.value.navWeight = 'bold';
+  activityData.value.headShow = 'hide';
   if (res.code == 200) {
+    res.data.forEach((item: any) => {
+      activityData.value.navlList.push({
+        imageUrl: item.imageUrl,
+        title: item.title,
+        subtitle: item.remark,
+        btnText: '去看看',
+        url: item.link ? item.link : '',
+        btncolor1: '#FA742C',
+        btncolor2: '#F91C02'
+      });
+    });
+    activityData.value.show = true;
     tradeList.value = res.data;
   }
 });
 
-//循环
+//外面循环
 getIndustrialFloor({}).then(async (res) => {
   if (res.code == 200) {
     for (const item of res.data) {
+      item.floorData = {};
+      item.floorData.imageUrl = item.imageUrl;
+      item.floorData.url = '';
+      item.floorData.imgType = 1;
+      item.floorData.brandList = [];
+      item.floorData.styleType = 1;
+      item.floorData.imageRadius = 5;
+      item.floorData.goodsIds = [];
+      item.floorData.goodsShow = [1, 2, 3];
+      item.floorData.btnStyle = 1;
+      item.floorData.btnColor = '#ffffff';
+      item.floorData.btnbackgroundColor = '#E7000B';
+      item.floorData.moreUrl = '';
+      item.floorData.moreColor = '#E7000B';
+      item.floorData.moreShow = true;
+
+      item.titleData = {
+        title1: item.name,
+        title2: '精选'
+      };
       try {
         const datas2 = await getIndustrialFloorProductList({ floorId: item.id });
         if (datas2.code == 200) {
-          item.goodsList = datas2.data;
+          item.floorData.goodsList = datas2.data;
+          item.floorData.goodsDefault = true;
         }
 
         const datas3 = await getIndustrialFloorBrand({ floorId: item.id });
         if (datas2.code == 200) {
+          if (datas3.data.length > 0) {
+            item.floorData.styleType = 2;
+            item.floorData.moreTitle = '更多品牌';
+            datas3.data.forEach((item1: any) => {
+              item.floorData.brandList.push({
+                imageUrl: item1.brandLogo,
+                url: item1.link ? item1.link : '',
+                imgType: 1
+              });
+            });
+          }
           item.brandList = datas3.data;
         }
+        item.floorData.show = true;
       } catch (error) {}
     }
-
     goodsList.value = res.data;
   }
 });
 
 //为你推荐-分类
 getRecommendedCategory({}).then((res) => {
+  comGoodsListData.value.btnShow = true;
+  comGoodsListData.value.btnStyle = 1;
+  comGoodsListData.value.btnText = '购买';
+  comGoodsListData.value.goodsShow = [1, 2, 3];
+  comGoodsListData.value.goodsNumber = 5;
+  comGoodsListData.value.goodsSort = 1;
+
+  comGoodsListData.value.goodsbackgroundColor = '#ffffff';
+  comGoodsListData.value.goodsTitleType = 1;
+  comGoodsListData.value.goodsTitleColor = '#101828';
+  comGoodsListData.value.imageRadius = 5;
+  comGoodsListData.value.goodstopRounded = 5;
+  comGoodsListData.value.goodsbottomRounded = 5;
+  comGoodsListData.value.priceColor = '#E7000B';
+  comGoodsListData.value.btnColor = '#ffffff';
+  comGoodsListData.value.btnbackgroundColor = '#E7000B';
+
+  comGoodsListData.value.tabColor1 = '#333333';
+  comGoodsListData.value.tabColor2 = '#ffffff';
+  comGoodsListData.value.tabbackgroundColor1 = '#ffffff';
+  comGoodsListData.value.tabbackgroundColor2 = '#E7000B';
+  comGoodsListData.value.tabRadius = 5;
+  comGoodsListData.value.tabIndex = 0;
+  comGoodsListData.value.urlType = 'indexMro';
+  comGoodsListData.value.tabList = [
+    {
+      title: '全部',
+      goodsType: 1
+    }
+  ];
   if (res.code == 200) {
-    recommendNav.value = res.data;
-    recommendNav.value.unshift({
-      id: '',
-      title: '全部'
+    res.data.forEach((item: any) => {
+      comGoodsListData.value.tabList.push({
+        goodsType: item.id,
+        title: item.title
+      });
     });
+    comGoodsListData.value.show = true;
   }
 });
-
-//为你推荐-商品
-getRecommendedCategoryProductList({}).then((res) => {
-  if (res.code == 200) {
-    recommendList.value = res.data;
-  }
-});
-
-const onNav = (item: any) => {
-  categoryId.value = item.id;
-  getRecommendedCategoryProductList({ categoryId: categoryId.value }).then((res) => {
-    if (res.code == 200) {
-      recommendList.value = res.data;
-    }
-  });
-};
-
-const onCarousel = (res: any) => {
-  carouselIndex.value = res;
-};
 </script>
 
 <style lang="scss" scoped>
 .home-pages {
   width: 100%;
-  .head-pages {
-    width: 100%;
-    // background: #000000;
-    margin-top: 10px;
-
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    position: relative;
-    backdrop-filter: blur(95px);
-    filter: blur(30rpx);
-
-    .bg-img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      z-index: -1;
-      filter: blur(30rpx);
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        height: 100%;
-        transform: scale(1.2);
-        filter: blur(30px);
-      }
-    }
-
-    // 头部
-    .home-head {
-      width: 1200px;
-      margin: 0 auto;
-      position: relative;
-      display: flex;
-      gap: 0px 10px;
-
-      .classify {
-        width: 234px;
-        height: 540px;
-        background: #323232;
-        padding: 10px 0px;
-        &.classify-show {
-          position: absolute;
-          z-index: 10;
-          height: auto;
-          min-height: 540px;
-        }
-
-        .classify-list {
-          width: 100%;
-          height: 60px;
-          cursor: pointer;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          padding-left: 25px;
-
-          &.classify-hig {
-            border: 1px solid var(--el-color-primary);
-            border-right: 0px solid var(--el-color-primary);
-          }
-
-          .label {
-            width: 100%;
-            font-size: 14px;
-            color: #ffffff;
-            white-space: nowrap;
-            margin-right: 10px;
-
-            &:hover {
-              color: var(--el-color-primary);
-            }
-          }
-
-          .two-level {
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            color: #a2a2a2;
-            margin-top: 6px;
-
-            .two-hig {
-              &:hover {
-                color: var(--el-color-primary);
-              }
-            }
-          }
-        }
-      }
-
-      .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;
-          }
+  padding-bottom: 30px;
 
-          .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;
+  :deep(.hover-color) {
+    cursor: pointer;
 
-              &:hover {
-                color: var(--el-color-primary);
-              }
-            }
-          }
-        }
-      }
+    &:hover {
+      color: var(--hover-color) !important;
 
-      // 头部中间
-      .carousel-bos {
-        flex: 1;
-        height: 540px;
-        img {
-          width: 100%;
-          height: 540px;
-        }
+      .zi-hover {
+        color: var(--hover-color) !important;
       }
-
-      //右边
-      .head-right {
-        width: 230px;
-        height: 540px;
-        background: #ffffff;
-        display: flex;
-        flex-direction: column;
-
-        .login-bos {
-          width: calc(100% - 20px);
-          height: 110px;
-          border-bottom: 1px solid #e5e7eb;
-          margin: 0 10px;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          padding: 16px 0;
-
-          .login-box {
-            display: flex;
-            align-items: center;
-
-            img {
-              width: 40px;
-              height: 40px;
-              margin-right: 8px;
-              border-radius: 40px;
-            }
-
-            .login1 {
-              font-size: 13px;
-              color: #444444;
-            }
-
-            .login2 {
-              margin-top: 2px;
-              font-size: 12px;
-              color: #6a7282;
-            }
-          }
-
-          .loginBtn-bos {
-            width: 100%;
-
-            .login-bnt1 {
-              width: 64px;
-              height: 24px;
-              background-color: #e7000b;
-              color: #ffffff;
-              border-radius: 24px;
-              font-size: 12px;
-              cursor: pointer;
-            }
-
-            .login-bnt2 {
-              width: 64px;
-              height: 24px;
-              border: 1px solid #e7000b;
-              color: #e7000b;
-              border-radius: 24px;
-              font-size: 12px;
-              margin-left: 10px;
-              cursor: pointer;
-            }
-          }
-        }
-
-        // .login-bos {
-        //   width: calc(100% - 20px);
-        //   height: 110px;
-        //   border-bottom: 1px solid #e5e7eb;
-        //   margin: 0 10px;
-        //   display: flex;
-        //   flex-direction: column;
-        //   justify-content: space-between;
-        //   padding: 16px 0;
-
-        //   .login-box {
-        //     display: flex;
-        //     align-items: center;
-
-        //     img {
-        //       width: 40px;
-        //       height: 40px;
-        //       margin-right: 8px;
-        //       border-radius: 40px;
-        //     }
-
-        //     .login-btn {
-        //       width: 100%;
-        //     }
-
-        //     .login1 {
-        //       font-size: 13px;
-        //       color: #444444;
-        //     }
-
-        //     .login2 {
-        //       margin-top: 2px;
-        //       font-size: 12px;
-        //       color: #6a7282;
-        //     }
-        //   }
-        // }
-
-        .order-bos {
-          width: calc(100% - 20px);
-          height: 110px;
-          font-size: 14px;
-          padding: 16px 0;
-          border-bottom: 1px solid #e5e7eb;
-          margin: 0 10px;
-          img {
-            width: 28px;
-            height: 28px;
-          }
-          .order-num {
-            color: #e7000b;
-            font-size: 14px;
-            margin-top: 2px;
-          }
-        }
-
-        .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: 3px;
-              left: 0;
-              position: absolute;
-              width: 4px;
-              height: 14px;
-              background: var(--el-color-primary);
-            }
-
-            .real1 {
-              font-weight: 600;
-              font-size: 14px;
-              color: #1d2129;
-              padding-left: 15px;
-            }
-
-            .real2 {
-              font-size: 13px;
-              color: #83899f;
-              cursor: pointer;
-            }
-          }
-
-          .real-list {
-            width: 100%;
-            font-size: 12px;
-            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: 14px;
-            color: #1d2129;
-            padding-left: 15px;
-
-            &::after {
-              content: '';
-              top: 3px;
-              left: 0;
-              position: absolute;
-              width: 4px;
-              height: 14px;
-              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;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .pages-bos {
-    width: 1200px;
-    margin: 0 auto;
-
-    //轮播展位商品
-    .sell-bos {
-      width: 1200px;
-      display: flex;
-      gap: 0 20px;
-      margin-top: 30px;
-
-      .sell-list {
-        width: 224px;
-        height: 306px;
-        background: #ffffff;
-        border-radius: 10px;
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        cursor: pointer;
-        transition: transform 0.2s ease;
-        &:hover {
-          transform: translateY(-2px);
-        }
-
-        .sell-img {
-          width: 184px;
-          height: 182px;
-        }
-
-        .sell-name {
-          width: 184px;
-          height: 38px;
-          font-size: 14px;
-          color: #101828;
-        }
-
-        .sell-price {
-          .price1 {
-            color: var(--el-color-primary);
-            font-size: 16px;
-            color: #e7000b;
-          }
-          .price2 {
-            font-size: 12px;
-            color: #99a1af;
-            line-height: 20px;
-            text-decoration-line: line-through;
-            text-transform: none;
-            margin-left: 6px;
-          }
-        }
-      }
-    }
-
-    //商业标签(工业装修-商业标签)
-    .trade-bos {
-      width: 1200px;
-      display: flex;
-      gap: 0 10px;
-      margin-top: 30px;
-      .trade-list {
-        width: 292.5px;
-        height: 146px;
-        background: #ffffff;
-        border-radius: 4px;
-        padding: 22px;
-        cursor: pointer;
-        transition: transform 0.2s ease;
-        &:hover {
-          transform: translateY(-2px);
-        }
-        .trade-box {
-          width: 144px;
-          height: 100%;
-          .trade-title {
-            font-weight: 600;
-            font-size: 16px;
-            color: #000000;
-          }
-          .trade-info {
-            font-size: 12px;
-            color: #364153;
-            height: 32px;
-          }
-          .trade-look {
-            width: 89px;
-            height: 28px;
-          }
-        }
-        .trade-img {
-          width: 79px;
-          height: 79px;
-        }
-      }
-    }
-    //标题
-    .goods-title {
-      width: 1200px;
-      height: 56px;
-      border-radius: 10px;
-      background: #ffffff;
-      font-weight: 600;
-      font-size: 20px;
-      margin-top: 20px;
-      img {
-        width: 30px;
-        height: 21px;
-        margin: 0 10px;
-      }
-    }
-    //循环-商品
-    .goods-bos {
-      .goods-box {
-        display: flex;
-        gap: 0 10px;
-        margin-top: 15px;
-        .goods-one {
-          width: 236px;
-          height: 560px;
-          border-radius: 10px;
-          background: #ffffff;
-          cursor: pointer;
-          transition: transform 0.2s ease;
-          &:hover {
-            transform: translateY(-2px);
-          }
-        }
-        .goods-shop {
-          width: 802px;
-          height: 560px;
-          display: flex;
-          flex-wrap: wrap;
-          gap: 10px;
-          .shop-list {
-            width: 193px;
-            height: 275px;
-            background: #ffffff;
-            border-radius: 10px;
-            padding: 20px;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-            &:hover {
-              transform: translateY(-2px);
-            }
-
-            .shop-img {
-              width: 153px;
-              height: 150px;
-              border-radius: 6px;
-            }
-
-            .shop-name {
-              width: 153px;
-              height: 38px;
-              font-size: 14px;
-              color: #101828;
-            }
-
-            .shop-price {
-              .price1 {
-                color: var(--el-color-primary);
-                font-size: 16px;
-                color: #e7000b;
-              }
-              .price2 {
-                font-size: 12px;
-                color: #99a1af;
-                line-height: 20px;
-                text-decoration-line: line-through;
-                text-transform: none;
-                margin-left: 6px;
-              }
-            }
-          }
-        }
-        .goods-brand {
-          width: 142px;
-          height: 560px;
-          border-radius: 10px;
-          background: #ffffff;
-          padding: 20px 10px;
-          .brand-bos {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 10px 0;
-            img {
-              width: 100%;
-              height: 74px;
-              border-radius: 4px;
-              border: 1px solid #e5e7eb;
-              cursor: pointer;
-              transition: transform 0.2s ease;
-              &:hover {
-                transform: translateY(-2px);
-              }
-            }
-          }
-          .brand-more {
-            color: var(--el-color-primary);
-            font-size: 14px;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-
-    //为你推荐
-    .nav-bos {
-      width: 1200px;
-      height: 48px;
-      background: #ffffff;
-      border-radius: 10px;
-      margin-top: 14px;
-      padding: 0 1.5px;
-      .nav-list {
-        width: 133px;
-        position: relative;
-        font-size: 14px;
-        color: #000000;
-        text-align: center;
-        cursor: pointer;
-        &.hig {
-          color: var(--el-color-primary);
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: 2.5px;
-          width: 1px;
-          height: 14px;
-          background-color: #e5e7eb;
-        }
-        &:last-child::after {
-          display: none;
-        }
-      }
-    }
-    .recommend {
-      margin-top: 14px;
-      gap: 14px 20px;
-      flex-wrap: wrap;
-      margin-bottom: 60px;
     }
   }
 }

src/views/home/index.vue

@@ -1,359 +1,51 @@
 <template>
   <div class="home-pages">
     <!--  头部 -->
-    <div class="home-head" @mouseleave="leaveClassify">
-      <div class="classify" :class="classifyShow ? 'classify-show' : ''">
-        <div
-          class="classify-list"
-          v-for="(item, index) in classifyList"
-          :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
-          :key="index"
-          @mouseenter="enterClassify(item)"
-          v-show="classifyShow ? true : Number(index) < 13"
-        >
-          <div class="label ellipsis" @click="onPath('/search?type=1&topCategoryId=' + item.id)">{{ 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" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
-          <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" @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)">
-              {{ 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 v-for="(item, index) in AdList" :key="index" class="head-item" @click="onPath('/plan?id=' + item.id)">
-            <img :src="item.imageUrl" alt="" />
-          </div>
-        </div>
-      </div>
-      <!-- 右边 -->
-      <div class="head-right">
-        <div v-if="userInfo.userId" class="order-bos flex-column-between">
-          <div class="flex-row-start">
-            <img src="@/assets/images/logo2.png" alt="" />
-            <div class="ellipsis">{{ userInfo.nickName }}</div>
-          </div>
-          <div class="flex-row-start">
-            <div class="flex-1 flex-column-center">
-              <div>待付款</div>
-              <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
-            </div>
-            <div class="flex-1 flex-column-center">
-              <div>待发货</div>
-              <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
-            </div>
-            <div class="flex-1 flex-column-center">
-              <div>待收货</div>
-              <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="login-bos" v-else>
-          <div class="login-box">
-            <img src="@/assets/images/logo2.png" alt="" />
-            <div>
-              <div class="login1">您好,欢迎来到优易达</div>
-              <div class="login2">请先登录</div>
-            </div>
-          </div>
-          <div class="loginBtn-bos flex-row-center">
-            <div @click="onPath('/login')" class="login-bnt1 flex-row-center">登录</div>
-            <div @click="onPath('/breg')" class="login-bnt2 flex-row-center">注册</div>
-          </div>
-        </div>
-        <!-- <div class="login-bos">
-          <div class="login-box">
-            <img :src="userInfo.avatar ? userInfo.avatar : profile" alt="" />
-            <div>
-              <div class="login1">您好,欢迎来到优易达</div>
-              <div class="login2">{{ userInfo.nickName ? userInfo.nickName : '请先登录' }}</div>
-            </div>
-          </div>
-          <div class="login-btn">
-            <el-button v-if="!userInfo.nickName" type="primary" round size="small" style="width: 64px" @click="onPath('/login')">登录</el-button>
-            <el-button v-if="!userInfo.nickName" type="primary" plain round size="small" style="width: 64px">注册</el-button>
-            <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onlogout()">退出</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>
-          <template v-for="(item, index) in realList" :key="index">
-            <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
-          </template>
-        </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>
+    <comHead v-if="headData.show" :row="headData" :datas="realList"></comHead>
+
     <!-- 热门方案 -->
-    <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" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/plan')">
-        <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" @click="onPath('/plan_info?id=' + item.id)">
-          <div class="hot1">{{ item.advertTitle }}</div>
-          <div class="hot2">{{ item.advertBrief }}</div>
-          <img :src="item.coverImage" alt="" />
-        </div>
-      </template>
-    </div>
+    <indexTitle :datas="hotTitle"></indexTitle>
+    <navigation v-if="hotList.length > 0" :datas="hotList"></navigation>
+
     <!-- 场景采购 -->
-    <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" @click="onPath(sceneTitle.linkUrl ? sceneTitle.linkUrl : '/plan/procure')">
-        <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" @click="onPath('/plan_info?id=' + item.id)">
-          <div class="scene-box">
-            <!-- <div class="scene1">{{ item.advertTitle }}</div>
-            <div class="scene2">{{ item.advertBrief }}</div> -->
-          </div>
-          <img :src="item.coverImage" alt="" />
-        </div>
-      </template>
-    </div>
+    <indexTitle :datas="sceneTitle"></indexTitle>
+    <imageCube v-if="sceneList.length > 0" :datas="sceneList"></imageCube>
+
     <!-- 大牌推荐 -->
-    <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" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/search/brand')">
-        <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.coverImage" 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.brandLogo" alt="" />
-            <div class="bigBrand1">{{ item.brandName || '' }}</div>
-            <div class="bigBrand2">
-              {{ item.advertBrief || '' }}
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
+    <indexTitle :datas="bigbrandTitle"></indexTitle>
+    <brand v-if="bigbrandOne.coverImage && bigbrandList.length > 0" :row="{ imageUrl: bigbrandOne.coverImage, brandList: bigbrandList }"></brand>
+
     <!-- 行家精选 -->
-    <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" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/search/special')">
-        <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" @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)">
-          <img :src="item.productImage" alt="" />
-          <div class="itemName ellipsis">{{ item.itemName || '' }}</div>
-          <div class="price">
-            <span class="memberPrice">¥{{ item.memberPrice }}</span>
-            <span class="marketPrice">¥{{ item.marketPrice }}</span>
-          </div>
-        </div>
-      </template>
-    </div>
+    <indexTitle :datas="expertTitle"></indexTitle>
+    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="expertList"></comGoods>
+
     <!-- 采购指南 -->
-    <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" @click="onPath(hotTitle.linkUrl ? hotTitle.linkUrl : '/plan/guide')">
-        <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 procureList" :key="index">
-        <div class="procure-list" v-if="Number(index) < 3">
-          <img :src="item.coverImage" alt="" />
-          <div class="procure1">{{ item.title || '' }}</div>
-          <div class="procure2">{{ item.subtitle || '' }}</div>
-        </div>
-      </template>
-    </div>
-    <!-- 循环-商品 -->
+    <indexTitle :datas="procureTitle"></indexTitle>
+    <advert v-if="procureList.length > 0" :row="{ navlList: procureList, styleType: 1 }"></advert>
+
+    <!-- 循环-商品楼层 -->
     <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.advertiseImage" 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.advertiseImage" 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.advertiseImage" 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.advertiseImage" 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>
-        </div>
-        <template v-for="(item2, index2) in item1.shopList" :key="index2">
-          <div class="shop-list" v-if="Number(index2) < 4" @click="onInfo(item2)">
-            <img :src="item2.productImage" alt="" />
-            <div class="itemName ellipsis2">{{ item2.itemName }}</div>
-            <div class="price">
-              <span class="memberPrice">¥{{ item2.memberPrice }}</span>
-              <span class="marketPrice">¥{{ item2.marketPrice }}</span>
-            </div>
-          </div>
-        </template>
-      </div>
+      <discover :row="item1" :datas="item1.shopList"></discover>
     </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" @click="onPath(projectTitle.linkUrl ? projectTitle.linkUrl : '/plan/project')">
-        <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.uploadProgram" alt="" />
-          <div class="project-box">
-            <div class="project1">{{ item.caseTitle || '' }}</div>
-            <div class="project2">
-              {{ item.projectBrief || '' }}
-            </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>
+    <indexTitle :datas="projectTitle"></indexTitle>
+    <comArticle v-if="projectList.length > 0" :datas="projectList" :row="{ dataType: 1, dataNumber: 4 }"></comArticle>
   </div>
 </template>
 
 <script setup lang="ts">
-import profile from '@/assets/images/profile.jpg';
-import { onPath } from '@/utils/siteConfig';
-import { getToken } from '@/utils/auth';
-import { getInfo } from '@/api/login';
-import { getIndexDiyPcPage, getIsUseDiy } from '@/api/home/diy';
+import indexTitle from '@/views/home/pccomponents/pages/indexTitle.vue';
+import comHead from '@/views/home/pccomponents/pages/head.vue';
+import navigation from '@/views/home/pccomponents/pages/navigation.vue';
+import imageCube from '@/views/home/pccomponents/pages/imageCube.vue';
+import brand from '@/views/home/pccomponents/pages/brand.vue';
+import comGoods from '@/views/home/pccomponents/pages/goods.vue';
+import advert from '@/views/home/pccomponents/pages/advert.vue';
+import discover from '@/views/home/pccomponents/pages/discover.vue';
+import comArticle from '@/views/home/pccomponents/pages/article.vue';
 import {
-  getProductCategoryTree,
+  getSearchTitle,
   getHomeAdList,
   getYouYiZiXunPage,
   getEnterpriseMemberEquityList,
@@ -374,20 +66,11 @@ import {
   getClassificationFloorLabel,
   getClassificationFloorDetail2,
   getProjectCaseTitle,
-  getProjectCaseList,
-  countOrder
+  getProjectCaseList
 } from '@/api/home/index';
-import Cookies from 'js-cookie';
 
-const userInfo = ref<any>({});
-const classifyList = ref<any>([]);
-const classifyShow = ref<any>(false);
-const classifyId = ref<any>('');
-const classifyInfo = ref<any>([]);
-const carouselList = ref<any>([]);
+const headData = ref<any>({});
 const realList = ref<any>([]);
-const interestsList = ref<any>([]);
-const AdList = ref<any>([]);
 const hotTitle = ref<any>('');
 const hotList = ref<any>([]);
 const sceneTitle = ref<any>('');
@@ -398,91 +81,91 @@ 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 countData = ref<any>({});
 const homeList = ref<any>([]);
-const router = useRouter();
-
-getIndexDiyPcPage({ type: 1 }).then((res) => {
-  if (res.code == 200) {
-  }
-});
 
 onMounted(() => {
-  const token = Cookies.get('Authorization');
-  if (token) {
-    getInfo().then((res) => {
-      if (res.code == 200) {
-        userInfo.value = res.data.user;
-
-        countOrder({}).then((res1) => {
-          if (res1.code == 200) {
-            countData.value = res1.data || {};
-          }
-        });
-      }
-    });
-  }
+  document.documentElement.style.setProperty('--hover-color', '#E7000B');
+  getHead();
 });
-
-//移入分类
-const enterClassify = (res: any) => {
-  classifyShow.value = true;
-  classifyId.value = res.id;
-  classifyInfo.value = res.children;
-};
-
-//移出分类
-const leaveClassify = () => {
-  classifyShow.value = false;
-};
-
-//头部分类
-import { categoryStore } from '@/store/modules/category';
-const categoryStoreStore = categoryStore();
-onMounted(async () => {
+//头部
+const getHead = async () => {
+  headData.value.topStyle = 1;
+  headData.value.toplabel = [];
+  headData.value.classifyShow = true;
+  headData.value.headType = 0;
+  headData.value.leftStyle = 1;
+  headData.value.carouselList = [];
+  headData.value.advertNum = 1;
+  headData.value.advertList = [];
+  headData.value.realDataType = 1;
+  headData.value.realNumber = 6;
+  headData.value.navlList = [];
   try {
-    // 根据当前路由路径获取分类数据
-    classifyList.value = await categoryStoreStore.fetchCategories('/index');
-  } catch (error) {
-    console.error('获取分类失败:', error);
-  }
-});
+    const datas1 = await getSearchTitle(1);
+    if (datas1.code == 200) {
+      datas1.data.forEach((item: any) => {
+        headData.value.toplabel.push({
+          title: item.navigationName
+        });
+      });
+    }
 
-//头部轮播
-getHomeAdList({}).then((res) => {
-  if (res.code == 200) {
-    carouselList.value = res.data;
-  }
-});
+    // const datas2 = await getHomeNav(1);
+    headData.value.topNav = [
+      { title: '首页', url: '/index' },
+      { title: '工业品商城', url: '/indexMro' },
+      { title: '福礼商城', url: '/indexFuli' },
+      { title: '商用工程', url: '/theme?id=2' },
+      { title: '场景采购', url: '/plan/procure' },
+      { title: '解决方案', url: '/plan' },
+      { title: '特价专区', url: '/search/special' }
+    ];
+
+    const datas3 = await getHomeAdList({});
+    if (datas3.code == 200) {
+      datas3.data.forEach((item: any) => {
+        headData.value.carouselList.push({
+          imageUrl: item.imageUrl
+        });
+      });
+    }
 
-//头部优易资讯
-getYouYiZiXunPage({}).then((res) => {
-  if (res.code == 200) {
-    realList.value = res.data;
-  }
-});
+    const datas4 = await getHomeThreeAdList({});
+    if (datas4.code == 200) {
+      datas4.data.forEach((item: any) => {
+        headData.value.advertList.push({
+          imageUrl: item.imageUrl,
+          url: item.link ? item.link : '',
+          show: true
+        });
+      });
+    }
 
-//头部会员权益
-getEnterpriseMemberEquityList({}).then((res) => {
-  if (res.code == 200) {
-    interestsList.value = res.data;
-  }
-});
+    const datas5 = await getYouYiZiXunPage({});
+    if (datas5.code == 200) realList.value = datas5.data;
 
-//首页三联广告(平台装修-楼层广告-首页三联广告)
-getHomeThreeAdList({}).then((res) => {
-  if (res.code == 200) {
-    AdList.value = res.data;
-  }
-});
+    const datas6 = await getEnterpriseMemberEquityList({});
+    if (datas6.code == 200) {
+      datas6.data.forEach((item: any) => {
+        headData.value.navlList.push({
+          imageUrl: item.imageUrl,
+          title: item.title,
+          url: item.link ? item.link : ''
+        });
+      });
+    }
+
+    headData.value.show = true;
+  } catch (error) {}
+};
 
 //热门方案标题
 getHotSchemeTitle({}).then((res) => {
   if (res.code == 200) {
+    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan';
     hotTitle.value = res.data;
   }
 });
@@ -490,13 +173,21 @@ getHotSchemeTitle({}).then((res) => {
 //热门方案列表
 getHotSchemeList({}).then((res) => {
   if (res.code == 200) {
-    hotList.value = res.data;
+    hotList.value = [];
+    res.data.forEach((item: any, index: any) => {
+      item.title = item.advertTitle;
+      item.subtitle = item.advertBrief;
+      item.imageUrl = item.coverImage;
+      item.url = '';
+      if (index < 4) hotList.value.push(item);
+    });
   }
 });
 
 //场景采购标题
 getScenePurchaseTitle({}).then((res) => {
   if (res.code == 200) {
+    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan/procure';
     sceneTitle.value = res.data;
   }
 });
@@ -504,6 +195,10 @@ getScenePurchaseTitle({}).then((res) => {
 //场景采购列表
 getScenePurchaseList({}).then((res) => {
   if (res.code == 200) {
+    res.data.forEach((item: any) => {
+      item.imageUrl = item.coverImage;
+      item.url = item.advertUrl ? item.advertUrl : '';
+    });
     sceneList.value = res.data;
   }
 });
@@ -511,32 +206,32 @@ getScenePurchaseList({}).then((res) => {
 //大牌推荐标题（平台闪购标题）
 getPlatformFlashSaleTitle({}).then((res) => {
   if (res.code == 200) {
+    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/search/brand';
     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);
-    }
-  }
+  if (res.code == 200 && res.data.length > 0) bigbrandOne.value = res.data[0];
 });
 
 //大牌推荐列表（平台闪购列表）-右
 getPlatformFlashSaleBrand({}).then((res) => {
-  if (res.code == 200) {
-    if (res.data.length > 0) {
-      bigbrandList.value = res.data;
-    }
+  if (res.code == 200 && res.data.length > 0) {
+    res.data.forEach((item: any, index: any) => {
+      item.title = item.brandName;
+      item.imageUrl = item.brandLogo;
+      item.url = '';
+      if (index < 10) bigbrandList.value.push(item);
+    });
   }
 });
 
 //行家精选标题
 getExpertSelectionTitle({}).then((res) => {
   if (res.code == 200) {
+    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/search/special';
     expertTitle.value = res.data;
   }
 });
@@ -551,6 +246,7 @@ getExpertSelectionList({}).then((res) => {
 //采购指南标题
 getPurchaseGuideTitle({}).then((res) => {
   if (res.code == 200) {
+    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan/guide';
     procureTitle.value = res.data;
   }
 });
@@ -558,1029 +254,106 @@ getPurchaseGuideTitle({}).then((res) => {
 //采购指南列表
 getProcurementTopicsList({}).then((res) => {
   if (res.code == 200) {
+    res.data.forEach((item: any) => {
+      item.title = item.title;
+      item.subtitle = item.subtitle;
+      item.imageUrl = item.coverImage;
+      item.url = '';
+    });
     procureList.value = res.data;
     console.log(res.data);
   }
 });
 
-//项目案例标题（平台装修-项目案例）
-getProjectCaseTitle({}).then((res) => {
-  if (res.code == 200) {
-    projectTitle.value = res.data;
-  }
-});
-
-//项目案例列表（平台装修-项目案例）
-getProjectCaseList({}).then((res) => {
-  if (res.code == 200) {
-    projectList.value = res.data;
-  }
-});
-
 //外面循环
 getClassificationFloorList({}).then(async (res) => {
   if (res.code == 200) {
     for (const item of res.data) {
+      item.title = item.floorName;
+      item.subtitle = item.floorDescribe;
+      item.titleUrl = '';
+      item.planList = [];
+      item.detectList = [];
+      item.tabList = [];
+      item.margin = {
+        top: 15
+      };
+
+      if (item.floorLabel) {
+        item.labelList = [];
+        item.floorLabel.split(',').forEach((item1: any, index1: any) => {
+          item.labelList.push({
+            title: item1,
+            url: ''
+          });
+        });
+      }
       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];
-            }
+        if (datas1.code == 200 && datas1.data.length > 0) {
+          item.imageUrl = datas1.data[0].advertiseImage;
+          datas1.data.forEach((item1: any) => {
+            item1.title = item1.advertiseName;
+            item1.subtitle = item1.advertiseDescribe;
+            item1.imageUrl = item1.advertiseImage;
+            item1.url = '';
+          });
+
+          if (datas1.data.length > 1) {
+            item.planList = datas1.data.slice(1, 4);
           }
-        }
 
+          if (datas1.data.length > 4) {
+            item.detectList = datas1.data.slice(4, 7);
+          }
+        }
         const datas2 = await getClassificationFloorLabel(item.floorNo);
         if (datas2.code == 200) {
-          item.navList = datas2.data;
-        }
-
+          datas2.data.forEach((item1: any) => {
+            item.tabList.push({
+              title: item1.labelName,
+              url: ''
+            });
+          });
+        }
+        item.navList = datas2.data;
         const datas3 = await getClassificationFloorDetail2(item.floorNo);
-        if (datas2.code == 200) {
-          item.shopList = datas3.data;
-        }
+        if (datas3.code == 200) item.shopList = datas3.data;
       } catch (error) {}
     }
-
     homeList.value = res.data;
+  }
+});
 
-    console.log(homeList.value);
+//项目案例标题（平台装修-项目案例）
+getProjectCaseTitle({}).then((res) => {
+  if (res.code == 200) {
+    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan/project';
+    projectTitle.value = res.data;
   }
 });
 
-const onInfo = (res: any) => {
-  router.push('/shop/info?id=' + res.id);
-};
-import { useUserStore } from '@/store/modules/user';
-const onlogout = () => {
-  useUserStore()
-    .logout()
-    .then(() => {
-      onPath('/login');
-    });
-};
+//项目案例列表（平台装修-项目案例）
+getProjectCaseList({}).then((res) => {
+  if (res.code == 200) {
+    projectList.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;
-    margin-top: 10px;
-
-    .classify {
-      width: 234px;
-      height: 540px;
-      background: #ffffff;
-
-      &.classify-show {
-        position: absolute;
-        z-index: 10;
-        height: auto;
-        min-height: 540px;
-      }
-
-      .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: 14px;
-          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 {
-      flex: 1;
-
-      .carousel {
-        width: 100%;
-        height: 407px;
-        background: #ffffff;
-
-        img {
-          width: 100%;
-          height: 407px;
-        }
-      }
-
-      .head-box {
-        width: 100%;
-        height: 122px;
-        margin-top: 10px;
-        display: flex;
-        gap: 0 10px;
-
-        .head-item {
-          flex: 1;
-          background-color: #ffffff;
-          height: 122px;
-          display: flex;
-          // padding-left: 20px;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 5px;
-          overflow: hidden;
-
-          img {
-            width: 100%;
-            height: 100%;
-            // width: 84px;
-            // height: 84px;
-            // margin-right: 10px;
-            // border-radius: 10px;
-          }
-
-          .head-title {
-            .head1 {
-              font-weight: 550;
-              font-size: 22px;
-              color: #101828;
-            }
-
-            .head2 {
-              width: 76px;
-              height: 21px;
-              border-radius: 34px;
-              border: 1px solid #000000;
-              font-size: 12px;
-              color: #000000;
-              margin-top: 6px;
-            }
-          }
-        }
-      }
-    }
-
-    //右边
-    .head-right {
-      width: 230px;
-      height: 540px;
-      background: #ffffff;
-      display: flex;
-      flex-direction: column;
-
-      .login-bos {
-        width: calc(100% - 20px);
-        height: 110px;
-        border-bottom: 1px solid #e5e7eb;
-        margin: 0 10px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        padding: 16px 0;
-
-        .login-box {
-          display: flex;
-          align-items: center;
-
-          img {
-            width: 40px;
-            height: 40px;
-            margin-right: 8px;
-            border-radius: 40px;
-          }
-
-          .login1 {
-            font-size: 13px;
-            color: #444444;
-          }
-
-          .login2 {
-            margin-top: 2px;
-            font-size: 12px;
-            color: #6a7282;
-          }
-        }
-
-        .loginBtn-bos {
-          width: 100%;
-
-          .login-bnt1 {
-            width: 64px;
-            height: 24px;
-            background-color: #e7000b;
-            color: #ffffff;
-            border-radius: 24px;
-            font-size: 12px;
-            cursor: pointer;
-          }
-
-          .login-bnt2 {
-            width: 64px;
-            height: 24px;
-            border: 1px solid #e7000b;
-            color: #e7000b;
-            border-radius: 24px;
-            font-size: 12px;
-            margin-left: 10px;
-            cursor: pointer;
-          }
-        }
-      }
-
-      // .login-bos {
-      //   width: calc(100% - 20px);
-      //   height: 110px;
-      //   border-bottom: 1px solid #e5e7eb;
-      //   margin: 0 10px;
-      //   display: flex;
-      //   flex-direction: column;
-      //   justify-content: space-between;
-      //   padding: 16px 0;
-
-      //   .login-box {
-      //     display: flex;
-      //     align-items: center;
-
-      //     img {
-      //       width: 40px;
-      //       height: 40px;
-      //       margin-right: 8px;
-      //       border-radius: 40px;
-      //     }
-
-      //     .login-btn {
-      //       width: 100%;
-      //     }
-
-      //     .login1 {
-      //       font-size: 13px;
-      //       color: #444444;
-      //     }
+  width: 100%;
+  padding-bottom: 30px;
 
-      //     .login2 {
-      //       margin-top: 2px;
-      //       font-size: 12px;
-      //       color: #6a7282;
-      //     }
-      //   }
-      // }
+  :deep(.hover-color) {
+    cursor: pointer;
 
-      .order-bos {
-        width: calc(100% - 20px);
-        height: 110px;
-        font-size: 14px;
-        padding: 16px 0;
-        border-bottom: 1px solid #e5e7eb;
-        margin: 0 10px;
-        img {
-          width: 28px;
-          height: 28px;
-        }
-        .order-num {
-          color: #e7000b;
-          font-size: 14px;
-          margin-top: 2px;
-        }
-      }
-
-      .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: 3px;
-            left: 0;
-            position: absolute;
-            width: 4px;
-            height: 14px;
-            background: var(--el-color-primary);
-          }
-
-          .real1 {
-            font-weight: 600;
-            font-size: 14px;
-            color: #1d2129;
-            padding-left: 15px;
-          }
-
-          .real2 {
-            font-size: 13px;
-            color: #83899f;
-            cursor: pointer;
-          }
-        }
-
-        .real-list {
-          width: 100%;
-          font-size: 12px;
-          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: 14px;
-          color: #1d2129;
-          padding-left: 15px;
-
-          &::after {
-            content: '';
-            top: 3px;
-            left: 0;
-            position: absolute;
-            width: 4px;
-            height: 14px;
-            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: 15px;
-    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;
-      cursor: pointer;
-
-      .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;
-      cursor: pointer;
-
-      .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: 120px;
-          height: 50px;
-        }
-
-        .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;
-      }
+    &:hover {
+      color: var(--hover-color) !important;
 
-      .project-more {
-        text-align: right;
-        font-size: 14px;
-        color: var(--el-color-primary);
-        margin-top: 18px;
+      .zi-hover {
+        color: var(--hover-color) !important;
       }
     }
   }

src/views/home/pccomponents/pages/activity.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pcPages" :style="warpCss">
     <div :style="boxCss">
-      <div class="head-bos flex-row-start" :style="radiusCss">
+      <div class="head-bos flex-row-start" :style="radiusCss" v-if="componentData.headShow == 'hide' ? false : true">
         <el-image
           v-if="componentData.styleType == 4"
           class="head-img"
@@ -190,7 +190,9 @@ const btnCss = (row: any) => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .head-bos {
     width: 100%;

src/views/home/pccomponents/pages/advert.vue

@@ -134,7 +134,9 @@ const subtitleCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .data-bos {
     display: flex;
@@ -144,10 +146,18 @@ const subtitleCss = computed(() => {
     .data-list {
       min-height: 270px;
       width: 0;
+      flex: 1;
+      background-color: #ffffff;
+      border-radius: 5px;
+      overflow: hidden;
+      cursor: pointer;
 
       .title {
         text-align: center;
         padding: 0 15px;
+        font-weight: 600;
+        font-size: 14px;
+        color: #101828;
       }
 
       .subtitle {

src/views/home/pccomponents/pages/article.vue

@@ -21,15 +21,19 @@
 import { onPath } from '@/utils/siteConfig';
 import { getServiceCaseList } from '@/api/home/diy';
 import figure from '@/assets/images/figure.png';
-interface Props {
+const props = defineProps<{
   row?: any;
-}
-const props = defineProps<Props>();
+  datas?: any;
+}>();
 const componentData = props.row || {};
 const dataList = ref<any>([]);
 
 onMounted(() => {
-  getDataList();
+  if (props.datas) {
+    dataList.value = props.datas;
+  } else {
+    getDataList();
+  }
 });
 const getDataList = () => {
   // 默认
@@ -141,7 +145,9 @@ const dataCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
 
   .article-bos {
@@ -155,6 +161,8 @@ const dataCss = computed(() => {
       width: 0;
       overflow: hidden;
       cursor: pointer;
+      background-color: #ffffff;
+      border-radius: 5px;
 
       .caseTitle {
         font-size: 14px;

src/views/home/pccomponents/pages/blank.vue

@@ -68,7 +68,9 @@ const boxCss = computed(() => {
 </script>
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .pcPages-html {
     :deep(img) {

src/views/home/pccomponents/pages/border.vue

@@ -78,7 +78,9 @@ const borderCss = computed(() => {
 </script>
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .pcPages-html {
     :deep(img) {

src/views/home/pccomponents/pages/brand.vue

@@ -118,7 +118,9 @@ const subtitleCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   // 大牌推荐
   .big-brand {
@@ -148,8 +150,11 @@ const subtitleCss = computed(() => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding: 20px 20px 0 20px;
+        padding: 20px;
         width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
         .img {
           width: 120px;

src/views/home/pccomponents/pages/carousel.vue

@@ -74,7 +74,9 @@ watch(
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
 
   .carousel-bos {

src/views/home/pccomponents/pages/discover.vue

@@ -4,8 +4,8 @@
       <!-- 头部 -->
       <div class="home-title flex-row-between" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
         <div @click="onPath(componentData.titleUrl)">
-          <span :style="titleCss" class="title1 mr-[10px] hover-color">{{ componentData.title }}</span>
-          <span :style="subtitleCss">{{ componentData.subtitle }}</span>
+          <span :style="titleCss" class="mr-[10px] color-[#101828] font-size-[20px] fw-600 hover-color">{{ componentData.title }}</span>
+          <span :style="subtitleCss" class="color-[#364153] font-size-[14px]">{{ componentData.subtitle }}</span>
         </div>
         <div class="title-more flex-row-start">
           <div @click="onPath(item.url)" class="ml-[10px] hover-color" v-for="(item, index) in componentData.labelList" :key="index">
@@ -21,7 +21,11 @@
           :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
           :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
         />
-        <div class="plan-bos" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
+        <div
+          class="plan-bos"
+          :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
+          v-if="componentData.planList.length"
+        >
           <div class="plan-head">方案推荐</div>
           <div v-for="(item, index) in componentData.planList" :key="index" class="plan-list hover-color" @click="onPath(item.url)">
             <el-image
@@ -36,7 +40,11 @@
             </div>
           </div>
         </div>
-        <div class="detect-bos" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
+        <div
+          class="detect-bos"
+          :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
+          v-if="componentData.detectList.length"
+        >
           <div class="detect-head">发现</div>
           <div class="detect-box">
             <div class="detect-two">
@@ -119,7 +127,10 @@
             />
             <div>
               <div class="goods-name zi-hover">{{ item.itemName || '商品名称' }}</div>
-              <div class="goods-price" :style="{ color: componentData.boxColor }">¥{{ item.memberPrice || '0.00' }}</div>
+              <div>
+                <span class="goods-price" :style="{ color: componentData.boxColor }">¥{{ item.memberPrice || '0.00' }}</span>
+                <span class="goods-marketPrice">¥{{ item.marketPrice }}</span>
+              </div>
             </div>
           </div>
         </template>
@@ -132,15 +143,19 @@
 import { onPath } from '@/utils/siteConfig';
 import figure from '@/assets/images/figure.png';
 import { getDiyProductPage } from '@/api/home/diy';
-interface Props {
+const props = defineProps<{
   row?: any;
-}
-const props = defineProps<Props>();
+  datas?: any;
+}>();
 const componentData = props.row || {};
 const dataList = ref<any>([{}, {}, {}, {}]);
 
 onMounted(() => {
-  getDataList();
+  if (props.datas) {
+    dataList.value = props.datas;
+  } else {
+    getDataList();
+  }
 });
 
 const getDataList = () => {
@@ -228,7 +243,9 @@ const subtitleCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .discover-bos {
     width: 100%;
@@ -236,6 +253,8 @@ const subtitleCss = computed(() => {
       width: 100%;
       background-color: #ffffff;
       padding: 15px 20px;
+      border-radius: 5px;
+      cursor: pointer;
       .title-more {
         font-size: 14px;
         color: #333333;
@@ -253,6 +272,7 @@ const subtitleCss = computed(() => {
     .discover-image {
       width: 230px;
       height: 340px;
+      border-radius: 5px;
       cursor: pointer;
     }
 
@@ -265,6 +285,7 @@ const subtitleCss = computed(() => {
       display: flex;
       flex-direction: column;
       min-width: 0;
+      border-radius: 5px;
 
       .plan-head {
         font-weight: 600;
@@ -321,10 +342,11 @@ const subtitleCss = computed(() => {
     }
 
     .detect-bos {
-      width: 470px;
+      flex: 1;
       height: 340px;
       background: #ffffff;
       padding: 0px 15px 15px 15px;
+      border-radius: 5px;
       .detect-head {
         font-weight: 600;
         font-size: 16px;
@@ -364,6 +386,7 @@ const subtitleCss = computed(() => {
             padding: 25px 10px;
             display: flex;
             gap: 10px;
+            cursor: pointer;
             &:first-child {
               margin-top: 0;
             }
@@ -387,6 +410,7 @@ const subtitleCss = computed(() => {
           }
         }
         .detect-one {
+          cursor: pointer;
           width: 180px;
           height: 275px;
           border: 1px solid #e5e7eb;
@@ -411,6 +435,7 @@ const subtitleCss = computed(() => {
       height: 310px;
       background: #ffffff;
       padding: 0 15px 15px 15px;
+      border-radius: 5px;
       .tab-head {
         font-weight: 600;
         font-size: 16px;
@@ -429,6 +454,11 @@ const subtitleCss = computed(() => {
           font-size: 14px;
           color: #101828;
           border-radius: 4px 4px 4px 4px;
+          cursor: pointer;
+          &:hover {
+            background: var(--el-color-primary);
+            color: #ffffff !important;
+          }
         }
       }
     }
@@ -438,9 +468,12 @@ const subtitleCss = computed(() => {
       background: #ffffff;
       height: 310px;
       padding: 15px 20px;
+      border-radius: 5px;
+      cursor: pointer;
       .goods-img {
         width: 100%;
         height: 190px;
+        border-radius: 5px;
       }
       .goods-name {
         width: 100%;
@@ -458,6 +491,15 @@ const subtitleCss = computed(() => {
       .goods-price {
         font-size: 16px;
         margin-top: 5px;
+        color: #e7000b;
+        font-weight: 600;
+      }
+      .goods-marketPrice {
+        font-size: 12px;
+        color: #99a1af;
+        line-height: 20px;
+        text-decoration-line: line-through;
+        margin-left: 6px;
       }
     }
   }

src/views/home/pccomponents/pages/editordiy.vue

@@ -69,7 +69,9 @@ const boxCss = computed(() => {
 </script>
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .pcPages-html {
     :deep(img) {

src/views/home/pccomponents/pages/floor.vue

@@ -9,7 +9,12 @@
         :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
       />
       <div class="floor-box">
-        <div v-for="(item, index) in dataList" :key="index" class="goods-list flex-column-between hover-color" @click="onPath('/item?id' + item.id)">
+        <div
+          v-for="(item, index) in componentData.goodsDefault ? componentData.goodsList : dataList"
+          :key="index"
+          class="goods-list flex-column-between hover-color"
+          @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
+        >
           <img
             class="goods-img"
             :src="item.productImage ? item.productImage : figure"
@@ -161,7 +166,9 @@ const btnCss2 = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .floor-bos {
     height: 560px;
@@ -186,10 +193,11 @@ const btnCss2 = computed(() => {
         flex: 0 0 calc((100% - 30px) / 4);
         background-color: #ffffff;
         overflow: hidden;
-        border-radius: 10px;
+        border-radius: 5px;
         .goods-img {
-          width: 100%;
+          width: 140px;
           height: 140px;
+          margin: 0 auto;
         }
         .itemName {
           width: 100%;
@@ -234,7 +242,7 @@ const btnCss2 = computed(() => {
     .goods-brand {
       width: 140px;
       height: 560px;
-      border-radius: 10px;
+      border-radius: 5px;
       background: #ffffff;
       padding: 15px 10px;
       .brand-bos {

src/views/home/pccomponents/pages/goods.vue

@@ -81,17 +81,20 @@
 import { onPath } from '@/utils/siteConfig';
 import figure from '@/assets/images/figure.png';
 import { getDiyProductPage } from '@/api/home/diy';
+import { el } from 'element-plus/es/locale/index.mjs';
 
-interface Props {
+const props = defineProps<{
   row?: any;
-}
-
-const props = defineProps<Props>();
+  datas?: any;
+}>();
 const componentData = props.row || {};
 const original = ref<any>([{}, {}, {}, {}, {}]);
 
 onMounted(() => {
-  getDataList();
+  if (props.datas) {
+  } else {
+    getDataList();
+  }
 });
 
 const getDataList = () => {
@@ -141,7 +144,11 @@ const getDataList = () => {
 
 const dataList = computed(() => {
   if (componentData.styleType == 1) {
-    return original.value;
+    if (props.datas) {
+      return props.datas;
+    } else {
+      return original.value;
+    }
   } else {
     const pageSize = 5;
     const groupedUsers = [];
@@ -250,7 +257,9 @@ const btnCss2 = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .goods-bos {
     display: flex;
@@ -262,9 +271,13 @@ const btnCss2 = computed(() => {
       flex: 0 0 calc((100% - 40px) / 5);
       overflow: hidden;
       cursor: pointer;
+      background-color: #ffffff;
+      border-radius: 5px;
       .goods-img {
-        width: 100%;
+        width: 180px;
         height: 180px;
+        border-radius: 5px;
+        margin: 0 auto;
       }
       .itemName {
         font-size: 14px;

src/views/home/pccomponents/pages/goodsList.vue

@@ -41,6 +41,9 @@
             </template>
           </div>
         </div>
+        <div class="goods-noData" v-if="dataList.length == 0">
+          <el-empty description="暂无数据" />
+        </div>
       </div>
     </div>
   </div>
@@ -50,6 +53,7 @@
 import { onPath } from '@/utils/siteConfig';
 import figure from '@/assets/images/figure.png';
 import { getDiyProductPage } from '@/api/home/diy';
+import { getRecommendedCategoryProductList } from '@/api/home/index-mro';
 interface Props {
   row?: any;
 }
@@ -67,30 +71,38 @@ onMounted(() => {
 });
 
 const getDataList = () => {
-  dataList.value = [{}, {}, {}, {}, {}];
-  if (componentData.tabList && componentData.tabList.length > 0) {
-    const datas = componentData.tabList[componentData.tabIndex];
-    //手动选择
-    if (datas.goodsType == 1) {
-      if (datas.goodsIds.length > 0) {
-        getDiyProductPage({ pageNum: 1, pageSize: 20, ids: datas.goodsIds.join(',') }).then((res) => {
-          if (res.code == 200) {
-            dataList.value = res.rows;
-          }
-        });
+  if (componentData.urlType == 'indexMro') {
+    getRecommendedCategoryProductList({ categoryId: componentData.tabIndex == 0 ? '' : componentData.tabIndex }).then((res) => {
+      if (res.code == 200) {
+        dataList.value = res.data;
       }
-    } else if (datas.goodsType == 2) {
-      //分类查询
-      if (datas.categoryIds && datas.categoryIds.length > 0) {
-        getDiyProductPage({
-          pageNum: 1,
-          pageSize: componentData.goodsNumber == 0 ? 9999 : componentData.goodsNumber,
-          categoryIds: datas.categoryIds.join(',')
-        }).then((res) => {
-          if (res.code == 200) {
-            dataList.value = res.rows;
-          }
-        });
+    });
+  } else {
+    dataList.value = [{}, {}, {}, {}, {}];
+    if (componentData.tabList && componentData.tabList.length > 0) {
+      const datas = componentData.tabList[componentData.tabIndex];
+      //手动选择
+      if (datas.goodsType == 1) {
+        if (datas.goodsIds.length > 0) {
+          getDiyProductPage({ pageNum: 1, pageSize: 20, ids: datas.goodsIds.join(',') }).then((res) => {
+            if (res.code == 200) {
+              dataList.value = res.rows;
+            }
+          });
+        }
+      } else if (datas.goodsType == 2) {
+        //分类查询
+        if (datas.categoryIds && datas.categoryIds.length > 0) {
+          getDiyProductPage({
+            pageNum: 1,
+            pageSize: componentData.goodsNumber == 0 ? 9999 : componentData.goodsNumber,
+            categoryIds: datas.categoryIds.join(',')
+          }).then((res) => {
+            if (res.code == 200) {
+              dataList.value = res.rows;
+            }
+          });
+        }
       }
     }
   }
@@ -209,7 +221,9 @@ const tabHigCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .tab-bos {
     width: 100%;
@@ -246,8 +260,9 @@ const tabHigCss = computed(() => {
       flex: 0 0 calc((100% - 40px) / 5);
       overflow: hidden;
       .goods-img {
-        width: 100%;
+        width: 180px;
         height: 180px;
+        margin: 0 auto;
       }
       .itemName {
         font-size: 14px;
@@ -281,6 +296,11 @@ const tabHigCss = computed(() => {
         border-radius: 50%;
       }
     }
+    .goods-noData {
+      background-color: #ffffff;
+      width: 100%;
+      padding: 15px;
+    }
   }
 }
 </style>

src/views/home/pccomponents/pages/head.vue

@@ -7,7 +7,7 @@
           class="logo"
           :src="componentData.logo ? componentData.logo : logo1"
           alt=""
-          :style="{ 'width': componentData.topStyle == 1 ? '170px' : '370px' }"
+          :style="{ 'width': componentData.topStyle == 1 ? '170px' : '430px' }"
           @click="onPath('/')"
         />
         <div class="search-box">
@@ -30,7 +30,9 @@
             </div>
           </div>
           <div class="search-text">
-            <div v-for="(item, index) in componentData.toplabel" :key="index">{{ item.title }}</div>
+            <div @click="onPath('/search?type=1&input=' + item.title)" v-for="(item, index) in componentData.toplabel" :key="index">
+              {{ item.title }}
+            </div>
           </div>
         </div>
         <img class="code" :src="componentData.code ? componentData.code : code" alt="" />
@@ -48,68 +50,81 @@
         </div>
       </div>
     </div>
-
     <!--  头部 -->
-    <div class="head-pages" @mouseleave="leaveClassify">
+    <div class="head-pages">
       <div class="bg-img" v-if="componentData.carouselStyle">
         <img :src="componentData.carouselList && componentData.carouselList[0].imageUrl" alt="" />
       </div>
       <div class="home-head">
-        <div
-          class="classify"
-          :class="classifyShow ? 'classify-show' : ''"
-          v-if="componentData.leftStyle == 1"
-          :style="{
-            backgroundColor: componentData.leftBackground
-          }"
-        >
+        <div @mouseleave="leaveClassify">
           <div
-            @mouseenter="enterClassify(item)"
-            class="classify-list"
-            v-show="classifyShow ? true : Number(index) < 13"
-            v-for="(item, index) in classifyList"
-            :key="index"
-            :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
+            class="classify"
+            :class="classifyShow ? 'classify-show' : ''"
+            :style="{
+              backgroundColor: componentData.leftBackground
+            }"
           >
             <div
-              @click="onPath('/search?type=1&topCategoryId=' + item.id)"
-              :style="{ 'color': componentData.leftColor1 }"
-              class="label ellipsis hover-color"
+              @mouseenter="enterClassify(item)"
+              v-show="classifyShow ? true : Number(index) < 13"
+              v-for="(item, index) in classifyList"
+              :key="index"
+              :class="[
+                item.id == classifyId && classifyShow ? 'classify-hig' : '',
+                componentData.leftStyle == 1 ? 'classify-list1' : 'classify-list2'
+              ]"
             >
-              {{ item.label }}
-            </div>
-            <div v-if="item.extra && item.extra.oneLable1" :style="{ 'color': componentData.leftColor2 }" class="info info1 ellipsis hover-color">
-              {{ item.extra.oneLable1 }}
-            </div>
-            <div v-if="item.extra && item.extra.oneLable2" :style="{ 'color': componentData.leftColor2 }" class="info ellipsis hover-color">
-              {{ item.extra.oneLable2 }}
+              <template v-if="componentData.leftStyle == 1">
+                <div
+                  @click="onPath('/search?type=1&topCategoryId=' + item.id)"
+                  :style="{ 'color': componentData.leftColor1 }"
+                  class="label ellipsis hover-color"
+                >
+                  {{ item.label }}
+                </div>
+                <div v-if="item.extra && item.extra.oneLable1" :style="{ 'color': componentData.leftColor2 }" class="info info1 ellipsis hover-color">
+                  {{ item.extra.oneLable1 }}
+                </div>
+                <div v-if="item.extra && item.extra.oneLable2" :style="{ 'color': componentData.leftColor2 }" class="info ellipsis hover-color">
+                  {{ item.extra.oneLable2 }}
+                </div>
+              </template>
+              <template v-if="componentData.leftStyle == 2">
+                <div :style="{ 'color': componentData.leftColor1 ? componentData.leftColor1 : '' }" class="label ellipsis">{{ item.label }}</div>
+                <div class="two-level">
+                  <template v-for="(item1, index1) in item.children" :key="index1">
+                    <div :style="{ 'color': componentData.leftColor2 }" class="two-hig" v-if="Number(index1) < 2">{{ item1.label }}</div>
+                    <div style="margin: 0 4px" v-if="index1 == 0 && item.children.length > 1">/</div>
+                  </template>
+                </div>
+              </template>
+              <div
+                v-if="item.id == classifyId && classifyShow"
+                class="classify-border"
+                :class="componentData.leftStyle == 1 ? 'classify-border1' : 'classify-border2'"
+              ></div>
             </div>
           </div>
-        </div>
-        <div class="classify-bos" v-if="classifyShow">
-          <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item" @click="onPath('/search?type=2&middleCategoryId=' + item.id)">
-            <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 @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)" v-for="(item1, index1) in item.children" :key="index1">
-                {{ item1.label || '' }}
+          <div class="classify-bos" v-if="classifyShow">
+            <div
+              v-for="(item, index) in classifyInfo"
+              :key="index"
+              class="classify-item"
+              @click="onPath('/search?type=2&mediumCategoryId=' + item.id)"
+            >
+              <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 @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)" v-for="(item1, index1) in item.children" :key="index1">
+                  {{ item1.label || '' }}
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="classify2" v-if="componentData.leftStyle == 2">
-          <div class="classify-list" v-for="(item, index) in classifyList" :key="index">
-            <div class="label ellipsis">{{ item.label }}</div>
-            <div class="two-level">
-              <template v-for="(item1, index1) in item.children" :key="index1">
-                <div class="two-hig" v-if="Number(index1) < 2">{{ item1.label }}</div>
-                <div style="margin: 0 4px" v-if="index1 == 0 && item.children.length > 1">/</div>
-              </template>
-            </div>
-          </div>
-        </div>
+        <!-- 中间 -->
         <div class="head-bos">
           <div
             class="carousel"
@@ -242,10 +257,10 @@ import { onPath } from '@/utils/siteConfig';
 import Cookies from 'js-cookie';
 import { getInfo } from '@/api/login';
 import { cartStore } from '@/store/modules/cart';
-interface Props {
+const props = defineProps<{
   row?: any;
-}
-const props = defineProps<Props>();
+  datas?: any;
+}>();
 const componentData = props.row || {};
 const userInfo = ref<any>({});
 const countData = ref<any>({});
@@ -261,7 +276,11 @@ const input = ref<any>('');
 
 document.documentElement.style.setProperty('--carousel-color', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
 onMounted(() => {
-  getDataList();
+  if (props.datas) {
+    realList.value = props.datas;
+  } else {
+    getDataList();
+  }
   const token = Cookies.get('Authorization');
   if (token) {
     getInfo().then((res) => {
@@ -279,7 +298,7 @@ onMounted(() => {
 });
 
 //头部分类
-getProductCategoryTree({ platform: 0 }).then((res) => {
+getProductCategoryTree({ platform: componentData.headType ? componentData.headType : 0 }).then((res) => {
   if (res.code == 200) {
     classifyList.value = res.data;
   }
@@ -360,7 +379,9 @@ const onPath2 = (row: any) => {
 
     .search-content {
       margin: 0 auto;
-      width: 1200px;
+      width: 100%;
+      max-width: 1500px;
+      min-width: 1200px;
       display: flex;
       padding: 0 30px;
     }
@@ -432,12 +453,15 @@ const onPath2 = (row: any) => {
 
       .search-text {
         font-size: 12px;
-        color: #e7000b;
         display: flex;
         margin-top: 4px;
 
         div {
           margin-left: 10px;
+          cursor: pointer;
+          &:first-child {
+            color: #e7000b;
+          }
         }
       }
     }
@@ -458,7 +482,9 @@ const onPath2 = (row: any) => {
 
     .nav-bos {
       margin: 0 auto;
-      width: 1200px;
+      width: 100%;
+      max-width: 1500px;
+      min-width: 1200px;
       display: flex;
       position: relative;
       padding-top: 15px;
@@ -540,7 +566,9 @@ const onPath2 = (row: any) => {
     }
 
     .home-head {
-      width: 1200px;
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
       position: relative;
       display: flex;
       gap: 0px 10px;
@@ -550,16 +578,19 @@ const onPath2 = (row: any) => {
         width: 234px;
         height: 540px;
         background: #ffffff;
-        border-radius: 5px;
+        border-radius: 5px 0px 0px 5px;
+        padding: 10px 0px;
+        overflow: hidden;
 
         &.classify-show {
-          position: absolute;
+          position: relative;
           z-index: 999;
           height: auto;
           min-height: 540px;
+          overflow: visible;
         }
 
-        .classify-list {
+        .classify-list1 {
           width: 100%;
           height: 40px;
           cursor: pointer;
@@ -600,15 +631,62 @@ const onPath2 = (row: any) => {
               color: #e7000b;
             }
           }
+        }
+        .classify-list2 {
+          width: 100%;
+          height: 58px;
+          cursor: pointer;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding-left: 25px;
 
-          .classify-border {
-            position: absolute;
-            right: -1px;
-            top: 0px;
-            width: 1px;
+          &.classify-hig {
+            border: 1px solid var(--el-color-primary);
+            border-right: 0px solid var(--el-color-primary);
+          }
+
+          .label {
+            width: 100%;
+            font-size: 14px;
+            color: #101828;
+            white-space: nowrap;
+            margin-right: 10px;
+            font-weight: 600;
+
+            &:hover {
+              color: var(--el-color-primary);
+            }
+          }
+
+          .two-level {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #364153;
+            margin-top: 6px;
+
+            .two-hig {
+              &:hover {
+                color: var(--el-color-primary);
+              }
+            }
+          }
+        }
+        .classify-border {
+          position: absolute;
+          right: -1px;
+          top: 0px;
+          width: 1px;
+          z-index: 199;
+          &.classify-border1 {
             height: 38px;
             background-color: #ffffff;
-            z-index: 2;
+          }
+          &.classify-border2 {
+            height: 58px;
+            background-color: #323232;
           }
         }
       }
@@ -616,13 +694,13 @@ const onPath2 = (row: any) => {
         position: absolute;
         top: 0;
         right: 0;
-        width: 966px;
+        left: 234px;
         height: 100%;
         border: 1px solid var(--el-color-primary);
         background-color: #ffffff;
         overflow-y: auto;
         padding-left: 30px;
-        z-index: 999;
+        z-index: 99;
 
         .classify-item {
           display: flex;
@@ -660,56 +738,6 @@ const onPath2 = (row: any) => {
         }
       }
 
-      .classify2 {
-        width: 234px;
-        height: 540px;
-        background: #ffffff;
-        padding: 10px 0px;
-
-        .classify-list {
-          width: 100%;
-          height: 60px;
-          cursor: pointer;
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          padding-left: 25px;
-
-          &.classify-hig {
-            border: 1px solid var(--el-color-primary);
-            border-right: 0px solid var(--el-color-primary);
-          }
-
-          .label {
-            width: 100%;
-            font-size: 14px;
-            color: #101828;
-            white-space: nowrap;
-            margin-right: 10px;
-            font-weight: 600;
-
-            &:hover {
-              color: var(--el-color-primary);
-            }
-          }
-
-          .two-level {
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            color: #364153;
-            margin-top: 6px;
-
-            .two-hig {
-              &:hover {
-                color: var(--el-color-primary);
-              }
-            }
-          }
-        }
-      }
-
       // 头部中间
       .head-bos {
         flex: 1;
@@ -719,6 +747,7 @@ const onPath2 = (row: any) => {
           width: 100%;
           background: #ffffff;
           cursor: pointer;
+          border-radius: 5px;
 
           :deep(.el-carousel__button) {
             background-color: var(--carousel-color);
@@ -755,7 +784,7 @@ const onPath2 = (row: any) => {
         }
 
         .head-box {
-          width: 740px;
+          width: 100%;
           height: 130px;
           margin-top: 10px;
           display: flex;
@@ -787,6 +816,7 @@ const onPath2 = (row: any) => {
         display: flex;
         flex-direction: column;
         font-size: 14px;
+        border-radius: 5px;
         .order-bos {
           width: calc(100% - 20px);
           height: 110px;
@@ -905,6 +935,10 @@ const onPath2 = (row: any) => {
             color: #1d2129;
             margin-bottom: 12px;
             cursor: pointer;
+
+            &:hover {
+              color: var(--el-color-primary);
+            }
           }
         }
 
@@ -942,6 +976,9 @@ const onPath2 = (row: any) => {
               color: #101828;
               margin-top: 15px;
               cursor: pointer;
+              &:hover {
+                color: var(--el-color-primary);
+              }
 
               .img {
                 width: 34px;

src/views/home/pccomponents/pages/hot.vue

@@ -72,7 +72,9 @@ const warpCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   position: relative;
 

src/views/home/pccomponents/pages/imageCube.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="pcPages" :style="warpCss">
     <div class="imageCube-bos" :style="{ gap: componentData.gap + 'px' }">
-      <template v-for="(item, index) in componentData.imagelList" :key="index">
-        <div v-if="index < componentData.number" class="imageCube-list" :style="boxCss" @click="onPath(item.url)">
+      <template v-for="(item, index) in componentData.imagelList ? componentData.imagelList : datas" :key="index">
+        <div v-if="index < componentData.number ? componentData.number : 5" class="imageCube-list" :style="boxCss" @click="onPath(item.url)">
           <el-image
             class="img"
             :src="item.imageUrl ? item.imageUrl : figure"
@@ -18,10 +18,10 @@
 <script lang="ts" setup>
 import { onPath } from '@/utils/siteConfig';
 import figure from '@/assets/images/figure.png';
-interface Props {
+const props = defineProps<{
   row?: any;
-}
-const props = defineProps<Props>();
+  datas?: any;
+}>();
 const componentData = props.row || {};
 
 const warpCss = computed(() => {
@@ -71,8 +71,9 @@ const boxCss = computed(() => {
   else if (componentData.componentStartBgColor) style += 'background-color:' + componentData.componentStartBgColor + ';';
   else if (componentData.componentEndBgColor) style += 'background-color:' + componentData.componentEndBgColor + ';';
   // 宽度
-  if (componentData.number)
+  if (componentData.number) {
     style += 'flex:' + `0 0 calc((100% - ${(componentData.number - 1) * componentData.gap}px) / ${componentData.number})` + ';';
+  }
   //圆角
   if (componentData.imageTopRounded) style += 'border-top-left-radius:' + componentData.imageTopRounded + 'px;';
   if (componentData.imageTopRounded) style += 'border-top-right-radius:' + componentData.imageTopRounded + 'px;';
@@ -86,12 +87,18 @@ const boxCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .imageCube-bos {
+    width: 100%;
     display: flex;
+    gap: 10px;
     .imageCube-list {
       overflow: hidden;
+      height: 318px;
+      flex: 0 0 calc((100% - 40px) / 5);
       .img {
         width: 100%;
         height: 100%;

src/views/home/pccomponents/pages/indexFuilTitle.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div class="home-title flex-row-center">
+      <img src="@/assets/images/home/indexFuli1.png" alt="" />
+      {{ datas.title }}
+      <img src="@/assets/images/home/indexFuli2.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  datas?: any;
+}>();
+</script>
+
+<style lang="scss" scoped>
+//标题通用样式
+.home-title {
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
+  height: 56px;
+  background: #ffffff;
+  border-radius: 5px;
+  font-weight: 600;
+  font-size: 20px;
+  color: #ff4f20;
+  margin: 15px auto 10px auto;
+  img {
+    width: 43px;
+    height: 28px;
+    margin: 0 10px;
+  }
+}
+</style>

src/views/home/pccomponents/pages/indexMorTitle.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="goods-title flex-row-center">
+      <img src="@/assets/images/home/indexMro2.png" alt="" />
+      <span class="text-primary">{{ datas.title1 }}</span>
+      <span>{{ datas.title2 }} </span>
+      <img src="@/assets/images/home/indexMro3.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  datas?: any;
+}>();
+</script>
+
+<style lang="scss" scoped>
+//标题通用样式
+.goods-title {
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
+  height: 56px;
+  border-radius: 5px;
+  background: #ffffff;
+  font-weight: 600;
+  font-size: 20px;
+  margin: 15px auto 10px auto;
+  display: flex; // 确保内容居中
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 30px;
+    height: 21px;
+    margin: 0 10px;
+  }
+}
+</style>

src/views/home/pccomponents/pages/indexTitle.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="home-title flex-row-between mb-10px responsive-title">
+      <div>
+        <span class="title1">{{ datas.title }}</span>
+        <span class="title2">{{ datas.subtitle }}</span>
+      </div>
+      <div class="title-more flex-row-start" @click="onPath(datas.linkUrl)">
+        <div style="margin-right: 5px">{{ datas.linkWord }}</div>
+        <el-icon :size="13" color="#83899F">
+          <ArrowRight />
+        </el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onPath } from '@/utils/siteConfig';
+const props = defineProps<{
+  datas?: any;
+}>();
+</script>
+
+<style lang="scss" scoped>
+//标题通用样式
+.home-title {
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
+  height: 56px;
+  background: #ffffff;
+  padding: 0 20px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 15px auto 10px auto;
+
+  .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);
+    }
+  }
+}
+</style>

src/views/home/pccomponents/pages/navigation.vue

@@ -26,14 +26,14 @@
     </div>
     <div v-else :style="warpCss" class="data-bos">
       <div
-        v-for="(item, index) in componentData.navlList"
+        v-for="(item, index) in componentData.navlList ? componentData.navlList : datas"
         :key="index"
         class="data-list flex-column-center hover-color"
         :style="boxCss"
         @click="onPath(item.url)"
       >
-        <div :style="titleCss" class="zi-hover">{{ item.title || '' }}</div>
-        <div :style="subtitleCss" class="mt-[2px] mb-[12px]">{{ item.subtitle || '' }}</div>
+        <div :style="titleCss" class="zi-hover color-[#101828] font-size-[16px] fw-600">{{ item.title || '' }}</div>
+        <div :style="subtitleCss" class="mt-[2px] mb-[12px] color-[#364153] font-size-[14px]">{{ item.subtitle || '' }}</div>
         <el-image
           class="img"
           :src="item.imageUrl ? item.imageUrl : figure"
@@ -48,10 +48,10 @@
 <script lang="ts" setup>
 import { onPath } from '@/utils/siteConfig';
 import figure from '@/assets/images/figure.png';
-interface Props {
+const props = defineProps<{
   row?: any;
-}
-const props = defineProps<Props>();
+  datas?: any;
+}>();
 const componentData = props.row || {};
 
 const dataList = computed(() => {
@@ -134,7 +134,9 @@ const subtitleCss = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   .data-bos {
     display: flex;
@@ -144,10 +146,14 @@ const subtitleCss = computed(() => {
     .data-list {
       min-height: 170px;
       cursor: pointer;
+      flex: 0 0 calc((100% - 30px) / 4);
+      background-color: #ffffff;
+      border-radius: 5px;
+      padding: 15px 10px;
 
       .img {
-        height: 80px;
-        width: 80px;
+        height: 120px;
+        width: 120px;
       }
     }
   }
@@ -163,8 +169,8 @@ const subtitleCss = computed(() => {
         height: 170px;
 
         .img {
-          height: 80px;
-          width: 80px;
+          height: 120px;
+          width: 120px;
         }
       }
     }

src/views/home/pccomponents/pages/textTitle.vue

@@ -229,7 +229,9 @@ const maskLayer = computed(() => {
 
 <style lang="scss" scoped>
 .pcPages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
 
   .style2 {

src/views/item/index.vue

@@ -1,112 +1,125 @@
 <template>
   <div class="shop-pages">
+    <!-- 面包屑 -->
+    <div class="breadcrumb-bos">
+      <div class="home" @click="onPath('/index')">首页</div>
+      <el-icon style="margin: 2px 4px 0 4px" size="14"><ArrowRight /></el-icon>
+      <div class="home" @click="onPath('/search?type=1&topCategoryId=' + dataInfo.topCategoryId)">{{ dataInfo.topCategoryName }}</div>
+      <el-icon style="margin: 2px 4px 0 4px" size="14"><ArrowRight /></el-icon>
+      <div class="home" @click="onPath('/search?type=2&mediumCategoryId=' + dataInfo.mediumCategoryId)">{{ dataInfo.mediumCategoryName }}</div>
+      <el-icon style="margin: 2px 4px 0 4px" size="14"><ArrowRight /></el-icon>
+      <div class="home" @click="onPath('/search?type=3&bottomCategoryId=' + dataInfo.bottomCategoryId)">{{ dataInfo.bottomCategoryName }}</div>
+    </div>
     <div class="shop-bos">
-      <div class="shop-head flex-row-start">
-        <div class="head-left">
-          <div class="left-carousel" v-if="carousel && carousel.length > 0">
-            <div v-for="(item, index) in carousel" :key="index" class="carousel-item" :class="carouselIndex == index ? 'hig' : ''">
-              <img :src="item" alt="" @click="onCarousel(1, index)" @mouseenter="onCarousel(1, index)" />
+      <div class="shop-left">
+        <!-- 图片展示 -->
+        <div class="images-bos">
+          <!-- 轮播 -->
+          <div class="carousel-bos">
+            <div class="left-carousel" v-if="carousel && carousel.length > 0">
+              <div v-for="(item, index) in carousel" :key="index" class="carousel-item" :class="carouselIndex == index ? 'hig' : ''">
+                <img :src="item" @click="onCarousel(1, index)" @mouseenter="onCarousel(1, index)" />
+              </div>
+            </div>
+            <div class="left-next flex-row-center" @click="onCarousel(2)">
+              <el-icon color="#6A7282" size="15">
+                <ArrowDown />
+              </el-icon>
             </div>
           </div>
-          <div v-else class="left-carousel"></div>
-          <div class="left-next flex-row-center" @click="onCarousel(2)">
-            <el-icon color="#6A7282" size="15">
-              <ArrowDown />
-            </el-icon>
+          <!-- 中间大图 -->
+          <div class="images-box" @mouseenter="showZoom = true" @mouseleave="showZoom = false" @mousemove="handleMouseMove">
+            <img v-if="carousel && carousel.length > 0" :src="carousel[carouselIndex]" alt="" class="images-img" ref="mainImageRef" />
+            <!-- 新增：放大镜遮罩层 -->
+            <div
+              v-show="showZoom"
+              class="zoom-mask"
+              :style="{
+                left: maskPos.x + 'px',
+                top: maskPos.y + 'px'
+              }"
+            ></div>
           </div>
         </div>
-        <img v-if="carousel && carousel.length > 0" :src="carousel[carouselIndex]" alt="" class="carousel-img" />
-        <div v-else class="carousel-img"></div>
-      </div>
-      <div class="nav-bos flex-row-start">
-        <div @click="onNav(index)" v-for="(item, index) in navList" :key="index" :class="navIndex == index ? 'hig' : ''">{{ item.title }}</div>
-      </div>
-      <div class="pcDetail" v-if="navIndex == 0" v-html="dataInfo.pcDetail"></div>
-      <div class="service" v-if="navIndex == 1">
-        <div class="service1">原厂正品保证承诺：</div>
-        <div>(1)所有商品均为符合国家有关商品质量的技术标准、服务标准、环保标准的原厂正品。</div>
-        <div>(2)所有商品保证是全新的货物，且来源于中华人民共和国或与中华人民共和国有正常贸易往来的国家或地区。</div>
-        <div>(3)所有商品均为自营，不涉及任何第三方店铺，充分保证产品来源，保证质量。</div>
-        <div>(4)所有商品均为原厂正品，如有假货，假一罚十。</div>
-        <div>(5)所有产品均严格按照国家三包标准执行。</div>
-        <div>(6)保证所售商品开具机打发票或电子发票。</div>
-        <div class="service1">厂家服务：</div>
-        <div>
-          本商品质保周期均为厂商对外公布的质保期或优易365对客户承诺的质保期为准。在此时间范围内可提交维修申请，具体请以厂家服务为准。
-          如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
-        </div>
-        <div>全国统一售后及服务电话：400-111-0027</div>
-        <div>(注:如优易365在商品介绍中有售后保障的说明,则此商品按照说明执行售后保障服务。)</div>
-        <div class="service1">服务承诺：</div>
-        <div>平台销售并发货的商品，均由平台提供发票和相应的售后服务。请您放心购买！</div>
-        <div>优易365确保客户收到的货物与商城图片、产地、附件说明完全一致。均为原厂正货！并且保证与当时市场上同样主流新品一致。</div>
-        <div class="service1">无忧退货：</div>
-        <div>客户购买商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）</div>
-        <div>• 购买运费如何收取？</div>
-        <div class="service2">
-          单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
+        <!-- tab切换 -->
+        <div class="nav-bos flex-row-start">
+          <div @click="onNav(index)" v-for="(item, index) in navList" :key="index" :class="navIndex == index ? 'hig' : ''">{{ item.title }}</div>
         </div>
-        <div>• 使用什么快递发货?</div>
-        <div class="service2">默认使用顺丰快递发货(个别商品使用其他快递）</div>
-        <div class="service2">配送范围覆盖全国大部分地区(港澳台地区除外）。</div>
-        <div>• 如何申请退货?</div>
-        <div class="service2">1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</div>
-        <div class="service2">2.内裤和食品等特殊商品无质量问题不支持退货；</div>
-        <div>3.退货流程：</div>
-        <div class="service2">确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；</div>
-        <div>
-          4.因优品汇产生的退货，如质量问题，退货邮费由优品汇承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
-        </div>
-      </div>
-      <!-- <img class="shop-img" src="@/assets/images/login-background.jpg" alt="" /> -->
-      <div class="shop-more flex-row-between">
-        <div class="flex-row-start">
-          <div class="more1">更多推荐</div>
-          <div class="more2">甄选大牌,优质好品</div>
-        </div>
-        <!-- <div class="flex-row-start">
-        <div class="more3">查看更多</div>
-        <el-icon color="#364153" size="14">
-          <ArrowRight />
-        </el-icon>
-      </div> -->
-      </div>
-      <div class="data-bos">
-        <div
-          v-for="(item, index) in recommendList"
-          :key="index"
-          class="data-list"
-          @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
-        >
-          <img class="data-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
-          <div class="data-title">{{ item.itemName || '' }}</div>
-          <div class="money">
-            <span class="money1">¥{{ item.memberPrice || '' }}</span>
-            <span class="money2">¥{{ item.marketPrice || '' }}</span>
+        <!-- 内容 -->
+        <div class="content-bos">
+          <!-- 商品详情 -->
+          <div class="pc-detail" v-if="navIndex == 0" v-html="dataInfo.pcDetail"></div>
+          <!-- 售后服务说明 -->
+          <div class="service" v-if="navIndex == 1">
+            <div class="service1">原厂正品保证承诺：</div>
+            <div>(1)所有商品均为符合国家有关商品质量的技术标准、服务标准、环保标准的原厂正品。</div>
+            <div>(2)所有商品保证是全新的货物，且来源于中华人民共和国或与中华人民共和国有正常贸易往来的国家或地区。</div>
+            <div>(3)所有商品均为自营，不涉及任何第三方店铺，充分保证产品来源，保证质量。</div>
+            <div>(4)所有商品均为原厂正品，如有假货，假一罚十。</div>
+            <div>(5)所有产品均严格按照国家三包标准执行。</div>
+            <div>(6)保证所售商品开具机打发票或电子发票。</div>
+            <div class="service1">厂家服务：</div>
+            <div>
+              本商品质保周期均为厂商对外公布的质保期或优易365对客户承诺的质保期为准。在此时间范围内可提交维修申请，具体请以厂家服务为准。
+              如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
+            </div>
+            <div>全国统一售后及服务电话：400-111-0027</div>
+            <div>(注:如优易365在商品介绍中有售后保障的说明,则此商品按照说明执行售后保障服务。)</div>
+            <div class="service1">服务承诺：</div>
+            <div>平台销售并发货的商品，均由平台提供发票和相应的售后服务。请您放心购买！</div>
+            <div>优易365确保客户收到的货物与商城图片、产地、附件说明完全一致。均为原厂正货！并且保证与当时市场上同样主流新品一致。</div>
+            <div class="service1">无忧退货：</div>
+            <div>
+              客户购买商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）
+            </div>
+            <div>• 购买运费如何收取？</div>
+            <div class="service2">
+              单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
+            </div>
+            <div>• 使用什么快递发货?</div>
+            <div class="service2">默认使用顺丰快递发货(个别商品使用其他快递）</div>
+            <div class="service2">配送范围覆盖全国大部分地区(港澳台地区除外）。</div>
+            <div>• 如何申请退货?</div>
+            <div class="service2">1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</div>
+            <div class="service2">2.内裤和食品等特殊商品无质量问题不支持退货；</div>
+            <div>3.退货流程：</div>
+            <div class="service2">确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；</div>
+            <div>
+              4.因优品汇产生的退货，如质量问题，退货邮费由优品汇承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
+            </div>
           </div>
+          <el-empty v-if="navIndex == 2" description="暂无品牌信息" />
+          <el-empty v-if="navIndex == 3" description="暂无热门评价" />
         </div>
       </div>
-    </div>
-    <el-affix :offset="0">
-      <div class="head-right flex-column-between">
-        <div>
+      <!-- 图片放大展示区域 -->
+      <div
+        class="image-zoom"
+        v-show="showZoom"
+        :style="{
+          backgroundImage: `url(${carousel[carouselIndex]})`,
+          backgroundPosition: `${bgPos.x} ${bgPos.y}`
+        }"
+      ></div>
+      <!-- 右边 -->
+      <div class="shop-right">
+        <div class="shop-info">
           <div class="right-title">{{ dataInfo.itemName || '' }}</div>
           <div class="right-price flex-row-between">
             <div class="flex-row-start">
               <div class="price1">
                 <span>¥</span>
-                <span style="font-size: 24px">{{ dataInfo.standardPrice || 0 }}</span>
+                <span style="font-size: 24px">{{ dataInfo.memberPrice || 0 }}</span>
               </div>
               <div class="price2">平台价</div>
               <div class="price3">
                 <span>¥</span>
-                <span style="font-size: 16px">{{ dataInfo.midRangePrice || 0 }}</span>
+                <span style="font-size: 16px">{{ dataInfo.marketPrice || 0 }}</span>
               </div>
             </div>
             <div class="right-collect flex-row-start" @click="editCollection">
               <el-icon v-if="collection" :size="16" color="#e7000b"><StarFilled /></el-icon>
               <el-icon v-else class="icon-star" :size="16"><Star /></el-icon>
-              <!-- <img src="@/assets/images/dark.svg" alt="" /> -->
               <span>{{ collection ? '已收藏' : '收藏' }}</span>
             </div>
           </div>
@@ -114,9 +127,6 @@
             <img class="address-img" src="@/assets/images/item1.png" alt="" />
             <div style="margin-right: 10px">配送至</div>
             <el-cascader v-model="regionCodes" :options="regionData as any" :placeholder="'请选择省/市/区'" style="width: 260px" />
-            <!-- <el-icon color="#000000" size="15">
-              <ArrowDown />
-            </el-icon> -->
           </div>
           <div class="specs-bos">
             <div class="specs-list">
@@ -173,8 +183,31 @@
           <span v-if="dataInfo.allStock <= 0" class="btn-text">(库存不足)</span>
         </div>
       </div>
-    </el-affix>
-
+    </div>
+    <!-- 更多推荐 -->
+    <div class="goods-bos">
+      <div class="shop-more flex-row-between">
+        <div class="flex-row-start">
+          <div class="more1">更多推荐</div>
+          <div class="more2">甄选大牌,优质好品</div>
+        </div>
+      </div>
+      <div class="data-bos">
+        <div
+          v-for="(item, index) in recommendList"
+          :key="index"
+          class="data-list"
+          @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
+        >
+          <img class="data-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
+          <div class="data-title">{{ item.itemName || '' }}</div>
+          <div class="money">
+            <span class="money1">¥{{ item.memberPrice || '' }}</span>
+            <span class="money2">¥{{ item.marketPrice || '' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 取消收藏 -->
     <el-dialog
       v-model="dialogVisible"
@@ -241,13 +274,21 @@ watch(route, () => {
 
 onMounted(() => {
   initData();
+  nextTick(() => {
+    setTimeout(() => {
+      // 兼容不同浏览器的滚动元素
+      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+    }, 0);
+  });
 });
 
 // 核心修复：统一初始化函数
 const initData = () => {
   id.value = route.query.id ? route.query.id : null;
   productNo.value = route.query.productNo ? route.query.productNo : null;
-  if (productNo.value) {
+  if (productNo.value && productNo.value != 'undefined') {
     getInfoProductNo();
   } else {
     getInfoId();
@@ -368,121 +409,433 @@ getRecommendedCategoryProductList({}).then((res) => {
     recommendList.value = res.data;
   }
 });
+
+// 新增：放大功能相关
+const showZoom = ref(false);
+const mainImageRef = ref<HTMLImageElement | null>(null);
+const bgPos = ref({ x: '0%', y: '0%' });
+// 新增：遮罩层位置
+const maskPos = ref({ x: 0, y: 0 });
+
+const handleMouseMove = (e: MouseEvent) => {
+  if (!mainImageRef.value) return;
+
+  const image = mainImageRef.value;
+  const rect = image.getBoundingClientRect();
+
+  // 获取容器尺寸 (images-box)
+  const width = rect.width;
+  const height = rect.height;
+
+  // 计算鼠标在图片内的相对坐标
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  // 遮罩层尺寸 (假设放大倍数为2，遮罩层大小为容器的一半，即正方形)
+  // 如果希望遮罩层固定大小，可以写死，例如 200px
+  const maskSize = width / 2;
+
+  // 计算遮罩层左上角的位置 (让鼠标位于遮罩层中心)
+  let maskX = x - maskSize / 2;
+  let maskY = y - maskSize / 2;
+
+  // 边界限制：确保遮罩层不超出图片范围
+  maskX = Math.max(0, Math.min(maskX, width - maskSize));
+  maskY = Math.max(0, Math.min(maskY, height - maskSize + 60));
+
+  // 更新遮罩层位置
+  maskPos.value = {
+    x: maskX,
+    y: maskY
+  };
+
+  // 计算背景图偏移百分比 (用于右侧放大区域)
+  // 背景图移动的比例 = 遮罩层移动的比例
+  // 注意：这里分母是 (总宽度 - 遮罩宽度)，因为背景图移动范围也是这么多
+  const percentX = (maskX / (width - maskSize)) * 100;
+  const percentY = (maskY / (height - maskSize)) * 100;
+
+  bgPos.value = {
+    x: `${percentX}%`,
+    y: `${percentY}%`
+  };
+};
 </script>
 <style lang="scss" scoped>
 .shop-pages {
-  display: flex;
-  gap: 0 15px;
-  width: 1200px;
   margin: 0 auto;
-  .shop-bos {
-    flex: 1;
-    width: 0;
-
-    .shop-head {
-      .head-left {
-        width: 106px;
 
-        .left-carousel {
-          height: 540px;
-          overflow-y: auto;
+  //面包屑
+  .breadcrumb-bos {
+    width: 1200px;
+    height: 44px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    @media (min-width: 1600px) {
+      width: 1600px;
+    }
+    .home {
+      cursor: pointer;
+      font-size: 14px;
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
 
-          .carousel-item {
-            width: 100px;
-            height: 100px;
-            border-radius: 6px;
-            overflow: hidden;
-            margin-top: 10px;
-            cursor: pointer;
+  .shop-bos {
+    display: flex;
+    gap: 0 15px;
+    position: relative;
+    padding-bottom: 15px;
+    //左边
+    .shop-left {
+      // 图片展示
+      .images-bos {
+        display: flex;
+        gap: 15px;
+        // 轮播
+        .carousel-bos {
+          width: 80px;
 
-            &:nth-of-type(1) {
-              margin-top: 0px;
+          @media (min-width: 1600px) {
+            width: 112px;
+          }
+          // 左边的轮播
+          .left-carousel {
+            height: 494px;
+            overflow-y: auto;
+            @media (min-width: 1600px) {
+              height: 674px;
             }
 
-            &.hig {
-              border: 1.5px solid #e7000b;
+            .carousel-item {
+              width: 80px;
+              height: 80px;
+              @media (min-width: 1600px) {
+                width: 112px;
+                height: 112px;
+              }
+              border-radius: 4px;
+              overflow: hidden;
+              margin-top: 10px;
+              cursor: pointer;
+
+              &:nth-of-type(1) {
+                margin-top: 0px;
+              }
+
+              &.hig {
+                border: 1px solid #e7000b;
+              }
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
             }
-
-            img {
-              width: 100px;
-              height: 100px;
+          }
+          .left-next {
+            width: 80px;
+            @media (min-width: 1600px) {
+              width: 112px;
             }
+            height: 36px;
+            background: #ffffff;
+            border-radius: 6px 6px 6px 6px;
+            margin-top: 10px;
+            cursor: pointer;
           }
         }
+        // 中间大图
+        .images-box {
+          width: 645px;
+          height: 540px;
+          border-radius: 5px;
+          overflow: hidden;
+          position: relative; /* 关键：作为遮罩层的定位父级 */
+          cursor: crosshair; /* 关键：鼠标变成十字准星 */
+
+          @media (min-width: 1600px) {
+            width: 860px;
+            height: 720px;
+          }
 
-        .left-next {
-          width: 100px;
-          height: 36px;
-          background: #ffffff;
-          border-radius: 6px 6px 6px 6px;
-          margin-top: 10px;
-          cursor: pointer;
+          .images-img {
+            width: 100%;
+            height: 100%;
+            display: block;
+          }
+
+          // 新增：遮罩层样式
+          .zoom-mask {
+            position: absolute;
+            width: 50%; /* 对应2倍放大，宽高各占50%形成正方形 */
+            height: 50%; /* 如果图片不是正方形，这里可能需要调整以保持正方形，但通常跟随容器比例即可 */
+            background-color: rgba(255, 255, 255, 0.3); /* 半透明白色 */
+            border: 1px solid #ccc; /* 边框 */
+            pointer-events: none; /* 关键：让鼠标事件穿透遮罩层，避免闪烁 */
+            z-index: 5;
+          }
         }
       }
-      .carousel-img {
-        flex: 1;
-        width: 0;
-        height: 586px;
-        border-radius: 10px;
-        margin-left: 4px;
-      }
-    }
+      //tab切换
+      .nav-bos {
+        width: 740px;
+        height: 48px;
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-bottom: 0px solid #e5e7eb;
+        margin-top: 15px;
+        gap: 0 32px;
+        padding-left: 32px;
+        font-size: 16px;
+        color: #364153;
+        border-radius: 5px 5px 0 0;
+        position: sticky;
+        top: 0;
+        @media (min-width: 1600px) {
+          width: 987px;
+        }
 
-    .nav-bos {
-      width: 100%;
-      height: 48px;
-      background: #f9fafb;
-      border: 1px solid #e5e7eb;
-      margin-top: 20px;
-      gap: 0 32px;
-      padding-left: 32px;
-      font-size: 16px;
-      color: #364153;
+        div {
+          cursor: pointer;
+        }
 
-      div {
-        cursor: pointer;
+        .hig {
+          color: #101828;
+          font-weight: 600;
+        }
       }
+      //内容
+      .content-bos {
+        width: 740px;
+        background-color: #ffffff;
+        padding: 20px 15px;
+        border: 1px solid #e5e7eb;
+        border-top: 0px solid #e5e7eb;
+        border-radius: 0 0 5px 5px;
+        min-height: calc(100vh - 853px);
+        @media (min-width: 1600px) {
+          width: 987px;
+          min-height: calc(100vh - 1033px);
+        }
 
-      .hig {
-        color: #101828;
-        font-weight: 600;
+        //商品详情
+        .pc-detail {
+          width: 100%;
+          :deep(img) {
+            width: 100%;
+            display: block;
+            margin: 0;
+            padding: 0;
+          }
+          :deep(p) {
+            margin: 0;
+            padding: 0;
+          }
+          :deep(*) {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+          }
+        }
+        // 售后服务说明
+        .service {
+          width: 100%;
+          background: #ffffff;
+          div {
+            margin-bottom: 20px;
+            font-size: 14px;
+          }
+          .service1 {
+            font-weight: 600;
+          }
+          .service2 {
+            color: #999999;
+          }
+        }
       }
     }
+    //图片放大展示区域
+    .image-zoom {
+      width: 445px;
+      height: 540px;
+      background-color: #ffffff;
+      position: absolute;
+      z-index: 10;
+      right: 0;
+      border: 1px solid #e5e7eb;
 
-    .pcDetail {
-      width: 100%;
-      margin-top: 20px;
-      :deep(img) {
-        width: 100% !important;
+      // 新增/修改以下属性以实现放大
+      background-repeat: no-repeat;
+      background-size: 200%; // 放大2倍，可根据需求调整为 250% 等
+      background-position: 0 0; // 默认位置
+
+      @media (min-width: 1600px) {
+        width: 598px;
+        height: 720px;
       }
     }
 
-    .service {
-      width: 100%;
-      margin-top: 20px;
-      background: #ffffff;
-      padding: 20px;
-      border-radius: 10px;
-      div {
-        margin-bottom: 20px;
-        font-size: 14px;
+    .shop-right {
+      width: 445px;
+      background-color: #ffffff;
+      border-radius: 5px;
+      height: calc(100vh - 250px);
+      min-height: 580px;
+      position: sticky;
+      top: 0px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      @media (min-width: 1600px) {
+        width: 598px;
       }
-      .service1 {
-        font-weight: 600;
+
+      .shop-info {
+        padding: 20px 20px 30px 20px;
+        .right-title {
+          min-height: 56px;
+          font-weight: 600;
+          font-size: 20px;
+          color: #101828;
+        }
+
+        .right-num {
+          font-size: 14px;
+          color: #6a7282;
+        }
+
+        .right-price {
+          margin-top: 10px;
+
+          .price1 {
+            font-size: 12px;
+            color: #e7000b;
+          }
+
+          .price2 {
+            width: 52px;
+            height: 21px;
+            background: #e7000b;
+            border-radius: 2px;
+            font-size: 12px;
+            color: #ffffff;
+            line-height: 21px;
+            text-align: center;
+            margin: 0 16px 0 8px;
+          }
+
+          .price3 {
+            font-size: 12px;
+            color: #6a7282;
+            text-decoration: line-through;
+          }
+
+          .right-collect {
+            font-size: 14px;
+            color: #6a7282;
+            cursor: pointer;
+            .icon-star {
+              margin-right: 4px;
+            }
+
+            img {
+              width: 12px;
+              height: 12px;
+              margin-right: 6px;
+            }
+          }
+        }
+
+        .address {
+          height: 44px;
+          width: 100%;
+          border-top: 1px solid #e5e7eb;
+          border-bottom: 1px solid #e5e7eb;
+          margin-top: 20px;
+          font-size: 14px;
+          color: #000000;
+
+          .address-img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+            margin-top: 2px;
+          }
+
+          .address-text {
+            margin-left: 10px;
+            width: 138px;
+          }
+        }
+
+        .specs-bos {
+          .specs-list {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #364153;
+            display: flex;
+            align-items: center;
+            .specs-item {
+              color: #6a7282;
+              margin-left: 10px;
+            }
+          }
+        }
+
+        .number-bos {
+          margin-top: 20px;
+          font-size: 14px;
+          color: #364153;
+
+          .number-box {
+            font-size: 14px;
+            color: #6a7282;
+            margin-top: 8px;
+          }
+        }
       }
-      .service2 {
-        color: #999999;
+      .bnt-bos {
+        width: 100%;
+        overflow: hidden;
+        padding: 0 20px 20px 20px;
+        .btn-text {
+          font-size: 12px;
+          color: #666666;
+          margin-left: 10px;
+        }
+
+        .btn {
+          flex: 1;
+          height: 44px;
+          line-height: 44px;
+          width: 100%;
+
+          &:nth-of-type(1) {
+            // background: #fcecf1;
+            // color: #e7000b;
+          }
+
+          &:nth-of-type(2) {
+            background: #e7000b;
+            color: #ffffff;
+          }
+        }
       }
     }
-    .shop-img {
-      width: 100%;
-      height: 752px;
-      margin-top: 20px;
+  }
+  // 更多推荐
+  .goods-bos {
+    width: 1200px;
+    @media (min-width: 1600px) {
+      width: 1600px;
     }
-
     .shop-more {
       width: 100%;
-      margin-top: 34px;
+      margin-top: 15px;
 
       .more1 {
         font-weight: 600;
@@ -513,6 +866,9 @@ getRecommendedCategoryProductList({}).then((res) => {
 
       .data-list {
         width: 224px;
+        @media (min-width: 1600px) {
+          width: 250px;
+        }
         background: #ffffff;
         border-radius: 10px;
         padding: 20px 20px 22px 20px;
@@ -561,142 +917,7 @@ getRecommendedCategoryProductList({}).then((res) => {
       }
     }
   }
-  .head-right {
-    width: 450px;
-    height: 586px;
-    background: #ffffff;
-    border-radius: 10px 10px 10px 10px;
-    padding: 20px 20px 30px 20px;
-
-    .right-title {
-      min-height: 56px;
-      font-weight: 600;
-      font-size: 20px;
-      color: #101828;
-    }
-
-    .right-num {
-      font-size: 14px;
-      color: #6a7282;
-    }
-
-    .right-price {
-      margin-top: 10px;
-
-      .price1 {
-        font-size: 12px;
-        color: #e7000b;
-      }
-
-      .price2 {
-        width: 52px;
-        height: 21px;
-        background: #e7000b;
-        border-radius: 2px;
-        font-size: 12px;
-        color: #ffffff;
-        line-height: 21px;
-        text-align: center;
-        margin: 0 16px 0 8px;
-      }
-
-      .price3 {
-        font-size: 12px;
-        color: #6a7282;
-        text-decoration: line-through;
-      }
-
-      .right-collect {
-        font-size: 14px;
-        color: #6a7282;
-        cursor: pointer;
-        .icon-star {
-          margin-right: 4px;
-        }
-
-        img {
-          width: 12px;
-          height: 12px;
-          margin-right: 6px;
-        }
-      }
-    }
-
-    .address {
-      height: 44px;
-      width: 100%;
-      border-top: 1px solid #e5e7eb;
-      border-bottom: 1px solid #e5e7eb;
-      margin-top: 20px;
-      font-size: 14px;
-      color: #000000;
-
-      .address-img {
-        width: 16px;
-        height: 16px;
-        margin-right: 10px;
-        margin-top: 2px;
-      }
-
-      .address-text {
-        margin-left: 10px;
-        width: 138px;
-      }
-    }
-
-    .specs-bos {
-      .specs-list {
-        margin-top: 15px;
-        font-size: 14px;
-        color: #364153;
-        display: flex;
-        align-items: center;
-        .specs-item {
-          color: #6a7282;
-          margin-left: 10px;
-        }
-      }
-    }
-
-    .number-bos {
-      margin-top: 20px;
-      font-size: 14px;
-      color: #364153;
-
-      .number-box {
-        font-size: 14px;
-        color: #6a7282;
-        margin-top: 8px;
-      }
-    }
-
-    .bnt-bos {
-      width: 100%;
-      height: 44px;
-      overflow: hidden;
-      .btn-text {
-        font-size: 12px;
-        color: #666666;
-        margin-left: 10px;
-      }
-
-      .btn {
-        flex: 1;
-        height: 44px;
-        line-height: 44px;
-        max-width: 428px;
-
-        &:nth-of-type(1) {
-          // background: #fcecf1;
-          // color: #e7000b;
-        }
-
-        &:nth-of-type(2) {
-          background: #e7000b;
-          color: #ffffff;
-        }
-      }
-    }
-  }
 }
 </style>
+
+<!-- 到这里就可以了 -->

src/views/payc/index.vue

@@ -100,7 +100,9 @@ const handleCancelOrder = () => {
   width: 100%;
   background-color: #ffffff;
   .pay-bos {
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
     .create-title {
       font-size: 16px;
@@ -108,7 +110,7 @@ const handleCancelOrder = () => {
       padding-top: 20px;
     }
     .pay-bos {
-      width: 1200px;
+      width: 100%;
       height: 230px;
       border: 1px solid #e5e7eb;
       margin-top: 30px;
@@ -194,7 +196,9 @@ const handleCancelOrder = () => {
     box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.05);
     margin-top: 47px;
     .foot-bos {
-      width: 1200px;
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
       margin: 0 auto;
       padding-top: 16px;
       .bnt1 {

src/views/plan/guide.vue

@@ -226,7 +226,9 @@ const handleCurrentChange = (val: number) => {
     background: #ffffff;
 
     .head-bos {
-      width: 1200px;
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
       margin: 0 auto;
       padding-bottom: 20px;
     }
@@ -234,7 +236,9 @@ const handleCurrentChange = (val: number) => {
 
   .nav-bos {
     border-bottom: 1px solid #e5e7eb;
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     padding-bottom: 20px;
 
     .nav-list {
@@ -285,7 +289,9 @@ const handleCurrentChange = (val: number) => {
   // 采购指南
   .procure-bos {
     display: flex;
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin-top: 12px;
     gap: 15px;
     flex-wrap: wrap;

src/views/plan/index.vue

@@ -74,6 +74,7 @@ import {
   getCustomerTag
 } from '@/api/plan/index';
 import Pagination from '@/components/Pagination/index.vue';
+
 const httpObj = ref<any>({
   tweetsCategory: '',
   adaptNo: '',
@@ -191,6 +192,7 @@ onMounted(() => {
 
   getList();
 });
+
 const getList = () => {
   getProcurementProgramList(httpObj.value).then((res) => {
     if (res.code == 200) {
@@ -214,6 +216,15 @@ const onFilter = (item1: any, item2: any) => {
 </script>
 
 <style lang="scss" scoped>
+// 定义响应式容器 Mixin
+@mixin responsive-container {
+  width: 100%;
+  min-width: 1200px;
+  max-width: 1500px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
 .solve {
   width: 100%;
 
@@ -222,27 +233,30 @@ const onFilter = (item1: any, item2: any) => {
     background: #ffffff;
 
     .head-bos {
-      width: 1200px;
-      margin: 0 auto;
+      @include responsive-container;
       padding-bottom: 20px;
     }
   }
 
   .nav-bos {
     border-bottom: 1px solid #e5e7eb;
-    width: 1200px;
+    width: 100%; // 继承父容器宽度
     padding-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap; // 防止导航项过多时溢出
 
     .nav-list {
       height: 32px;
       padding: 0 12px;
       background: #f7f8fa;
-      border-radius: 2px 2px 2px 2px;
+      border-radius: 2px;
       font-size: 14px;
       color: #4e5969;
       margin-right: 8px;
+      margin-bottom: 8px; // 换行时的间距
       line-height: 32px;
       cursor: pointer;
+      white-space: nowrap;
 
       &.hig {
         background: #ffe8e8;
@@ -256,13 +270,19 @@ const onFilter = (item1: any, item2: any) => {
   }
 
   .filter-bos {
+    width: 100%;
+
     .filter-list {
       margin-top: 20px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap; // 允许筛选条件换行
 
       .filter-title {
         font-size: 14px;
         color: #101828;
         margin-right: 40px;
+        flex-shrink: 0; // 标题不压缩
       }
 
       .filter-item {
@@ -270,66 +290,95 @@ const onFilter = (item1: any, item2: any) => {
         color: #364153;
         margin-right: 30px;
         cursor: pointer;
+        white-space: nowrap;
 
         &.hig {
           color: #e7000b;
         }
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
   }
 
-  // 数据
+  // 数据列表
   .data-bos {
-    width: 1200px;
-    margin: 0 auto;
+    @include responsive-container;
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     padding: 22px 0 40px 0;
+    justify-content: space-between; // 均匀分布
 
     .data-list {
-      width: 386px;
+      // 计算宽度：每行3个。 (100% - 2个间隙 * 20px) / 3
+      width: calc((100% - 40px) / 3);
       height: 302px;
       background: #ffffff;
       border-radius: 10px;
       overflow: hidden;
       cursor: pointer;
+      transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease;
+      display: flex;
+      flex-direction: column;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
 
       .data-img {
+        width: 100%;
         height: 200px;
-        width: 386px;
+        object-fit: cover; // 保持图片比例填充
       }
 
       .data-box {
-        height: 102px;
-        width: 386px;
+        flex: 1; // 占据剩余高度
+        width: 100%;
         padding: 12px 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
 
         .title {
           font-weight: 600;
           font-size: 14px;
           color: #101828;
+          line-height: 1.4;
         }
 
         .info {
           font-size: 12px;
           color: #364153;
           margin-top: 4px;
+          line-height: 1.4;
+          // 限制显示两行，超出省略
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
         }
 
         .text {
           font-size: 14px;
           color: #e7000b;
+          margin-top: auto; // 推到底部
         }
       }
     }
   }
 
-  //分页
+  // 分页
   .pagination-bos {
-    width: 1200px;
-    margin: 0 auto;
+    @include responsive-container;
     padding-bottom: 60px;
+
     :deep(.el-select__wrapper) {
       background: #f4f4f4;
       box-shadow: 0 0 0 1px #e5e6eb inset;

src/views/plan/procure.vue

@@ -43,43 +43,34 @@
           </div>
         </div>
       </div>
-      <el-affix :offset="0">
-        <div class="related-bos">
-          <div class="related-box">
-            <div class="flex-row-between related-title">
-              <div>历史浏览商品</div>
-            </div>
-            <div class="procure-bos">
-              <div
-                v-for="(item, index) in goodsList"
-                :key="index"
-                class="procure-list"
-                @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
-              >
-                <img :src="item.productImage" alt="" />
-                <div>
-                  <div class="procure1">{{ item.itemName }}</div>
-                  <div class="procure2">¥{{ item.memberPrice }}</div>
-                </div>
+      <div class="related-bos">
+        <div class="related-box">
+          <div class="flex-row-between related-title">
+            <div>历史浏览商品</div>
+          </div>
+          <div class="procure-bos" v-if="goodsList.length > 0">
+            <div
+              v-for="(item, index) in goodsList"
+              :key="index"
+              class="procure-list"
+              @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
+            >
+              <img :src="item.productImage" alt="" />
+              <div>
+                <div class="procure1">{{ item.itemName }}</div>
+                <div class="procure2">¥{{ item.memberPrice }}</div>
               </div>
             </div>
           </div>
+          <el-empty v-else description="暂无浏览记录" />
         </div>
-      </el-affix>
+      </div>
     </div>
 
     <!-- 游标分页控制 -->
     <div class="pagination-bos flex-row-between">
       <div></div>
-      <pagination
-        v-show="dataList.length > 0"
-        v-model:page="httpObj.pageNum"
-        v-model:limit="httpObj.pageSize"
-        v-model:way="way"
-        :cursor-mode="true"
-        :has-more="hasMore"
-        @pagination="getList"
-      />
+      <TablePagination v-model:page="httpObj.pageNum" v-model:page-size="httpObj.pageSize" :total="total" @change="getList" />
     </div>
   </div>
 </template>
@@ -110,6 +101,7 @@ const hasMore = ref(true); // 是否还有更多数据
 const way = ref<any>(1);
 const navList = ref<any>([]);
 const goodsList = ref<any>([]);
+const total = ref(0);
 
 const filterListy = ref<any>([
   {
@@ -216,7 +208,6 @@ onMounted(() => {
   browsingHistoryList({}).then((res) => {
     if (res.code == 200) {
       goodsList.value = getLatest5Items(res.data);
-      console.log(goodsList.value);
     }
   });
 
@@ -226,6 +217,7 @@ const getList = () => {
   getProductProgramPage(httpObj.value).then((res) => {
     if (res.code == 200) {
       dataList.value = res.rows;
+      total.value = res.total;
       // 判断是否还有更多数据
       hasMore.value = res.total > httpObj.value.pageSize * httpObj.value.pageNum;
     }
@@ -288,7 +280,9 @@ function getLatest5Items(data: any): any[] {
     background: #ffffff;
 
     .head-bos {
-      width: 1200px;
+      width: 100%;
+      max-width: 1500px;
+      min-width: 1200px;
       margin: 0 auto;
       padding-bottom: 20px;
     }
@@ -345,15 +339,17 @@ function getLatest5Items(data: any): any[] {
   }
   .data-all {
     display: flex;
-    width: 1200px;
+    width: 100%;
+    max-width: 1500px;
+    min-width: 1200px;
     margin: 22px auto 0 auto;
     gap: 0 15px;
     .related-bos {
-      flex: 1;
+      width: 400px;
       .related-box {
         width: 100%;
         background-color: #ffffff;
-        border-radius: 10px;
+        border-radius: 5px;
         padding: 20px;
         .related-title {
           font-size: 16px;
@@ -401,53 +397,52 @@ function getLatest5Items(data: any): any[] {
         }
       }
     }
-  }
+    // 数据
+    .data-bos {
+      flex: 1;
+      padding: 0px 0 40px 0;
 
-  // 数据
-  .data-bos {
-    width: 778px;
-    padding: 0px 0 40px 0;
-
-    .data-list {
-      width: 778px;
-      height: 200px;
-      background: #ffffff;
-      border-radius: 10px;
-      overflow: hidden;
-      cursor: pointer;
-      margin-bottom: 20px;
-      padding: 15px;
-      display: flex;
-      gap: 0 15px;
-
-      .data-img {
-        height: 170px;
-        width: 220px;
-        border-radius: 10px;
-      }
+      .data-list {
+        width: 100%;
+        height: 200px;
+        background: #ffffff;
+        border-radius: 5px;
+        overflow: hidden;
+        cursor: pointer;
+        padding: 15px;
+        display: flex;
+        gap: 0 15px;
+        margin-bottom: 15px;
+
+        .data-img {
+          height: 170px;
+          width: 220px;
+          border-radius: 5px;
+        }
 
-      .data-box {
-        height: 170px;
-        flex: 1;
-        padding: 10px 20px;
-        width: 0;
+        .data-box {
+          height: 170px;
+          flex: 1;
+          padding: 10px 20px;
+          width: 0;
 
-        .title {
-          font-weight: 600;
-          font-size: 18px;
-          color: #333333;
-        }
+          .title {
+            font-weight: 600;
+            font-size: 18px;
+            color: #333333;
+          }
 
-        .info {
-          font-size: 14px;
-          color: #666666;
-          margin-top: 10px;
-        }
+          .info {
+            font-size: 14px;
+            color: #666666;
+            margin-top: 10px;
+          }
 
-        .time {
-          font-size: 12px;
-          color: #666666;
-          margin-top: 10px;
+          .time {
+            font-size: 12px;
+            color: #666666;
+            margin-top: 10px;
+          }
         }
       }
     }
@@ -458,41 +453,6 @@ function getLatest5Items(data: any): any[] {
     width: 1200px;
     margin: 0 auto;
     padding-bottom: 60px;
-    :deep(.el-select__wrapper) {
-      background: #f4f4f4;
-      box-shadow: 0 0 0 1px #e5e6eb inset;
-      border-radius: 2px;
-    }
-    :deep(.el-select__placeholder) {
-      color: #1d2129;
-    }
-    :deep(.el-input__wrapper) {
-      background: #f4f4f4;
-      box-shadow: 0 0 0 1px #e5e6eb inset;
-      border-radius: 2px;
-    }
-    :deep(.el-input__inner) {
-      color: #1d2129;
-    }
-
-    :deep(.btn-prev) {
-      background: #f4f4f4;
-      border: 1px solid #e5e6eb;
-      margin-right: 8px;
-    }
-    :deep(.btn-next) {
-      background: #f4f4f4;
-      border: 1px solid #e5e6eb;
-      margin-left: 8px;
-    }
-    :deep(.el-pager) {
-      gap: 0 8px;
-      li {
-        background: #f4f4f4;
-        border: 1px solid #e5e6eb;
-        color: #1d2129;
-      }
-    }
   }
 }
 </style>

src/views/plan/project.vue

@@ -154,10 +154,12 @@ const handleCurrentChange = (val: number) => {
   width: 100%;
   background-color: #ffffff;
   .project-pages {
-    width: 1200px;
+    width: 100%;
+    max-width: 1500px;
+    min-width: 1200px;
     margin: 0 auto;
     .solve-img {
-      width: 1200px;
+      width: 100%;
       height: 380px;
       border-radius: 10px;
     }
@@ -186,30 +188,31 @@ const handleCurrentChange = (val: number) => {
     //项目案例
     .project-bos {
       display: flex;
-      width: 1200px;
+      width: 100%;
       margin-top: 25px;
       gap: 15px;
       flex-wrap: wrap;
       .project-list {
-        width: 390px;
+        flex: 0 0 calc((100% - 45px) / 3);
+        width: 0;
         height: 350px;
         cursor: pointer;
         border-radius: 10px;
         overflow: hidden;
 
         .project-box {
-          width: 390px;
+          width: 100%;
           height: 156px;
           background: #ffffff;
           border-radius: 10px;
           margin-top: -20px;
           z-index: 2;
-          position: absolute;
+          // position: absolute;
           padding: 20px;
           border: 1px solid #e5e7eb;
         }
         img {
-          width: 390px;
+          width: 100%;
           height: 180px;
         }
         .project1 {

src/views/plan_info/guide.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="real-pages">
-    <div>
+    <div class="flex-1">
       <div class="real-info">
         <div class="title">{{ dataInfo.title }}</div>
         <div class="time">{{ dataInfo.releaseTime }}</div>
@@ -113,13 +113,15 @@ function getRandomElements(arr: any, count: any) {
 
 <style lang="scss" scoped>
 .real-pages {
-  width: 1200px;
+  width: 100%;
+  min-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
   display: flex;
   gap: 0 20px;
   padding-bottom: 50px;
   .real-info {
-    width: 715px;
+    width: 100%;
     background: #ffffff;
     border-radius: 10px;
     padding: 20px;
@@ -133,7 +135,7 @@ function getRandomElements(arr: any, count: any) {
       margin: 10px 0 18px 0;
     }
     .real-html {
-      width: 679px;
+      width: 100%;
       :deep(img) {
         max-width: 100%;
         height: auto;

src/views/plan_info/index.vue

@@ -133,18 +133,20 @@ const onCart = (row: any) => {
   width: 100%;
 
   .solve-bos {
-    width: 1200px;
+    width: 100%;
+    min-width: 1200px;
+    max-width: 1500px;
     margin: 0 auto;
     padding-bottom: 30px;
     .solve-img {
-      width: 1200px;
+      width: 100%;
       height: 380px;
       border-radius: 10px;
       margin-top: 20px;
     }
 
     .solve-title {
-      width: 1200px;
+      width: 100%;
       padding: 10px 20px;
       background-color: #ffffff;
       border-radius: 10px;
@@ -258,7 +260,7 @@ const onCart = (row: any) => {
       }
     }
     .nav-bos {
-      width: 1200px;
+      width: 100%;
       padding: 20px 0;
 
       .nav-list {

src/views/plan_info/procure.vue

@@ -6,10 +6,10 @@
         <!-- 标题 -->
         <div class="solve-title flex-row-between">
           <div class="title1">{{ item.info.brandName }}</div>
-          <div class="title2 flex-row-start">
+          <!-- <div class="title2 flex-row-start">
             更多
             <el-icon><arrow-right /></el-icon>
-          </div>
+          </div> -->
         </div>
         <!-- 数据 -->
         <div class="data-bos">
@@ -107,22 +107,24 @@ const onCart = (row: any) => {
   width: 100%;
 
   .solve-bos {
-    width: 1200px;
+    width: 100%;
+    max-width: 1500px;
+    min-width: 1200px;
     margin: 0 auto;
     padding-bottom: 30px;
     .solve-img {
-      width: 1200px;
+      width: 100%;
       height: 380px;
-      border-radius: 10px;
+      border-radius: 5px;
       margin-top: 20px;
     }
 
     .solve-title {
-      width: 1200px;
+      width: 100%;
       padding: 15px 20px;
       background-color: #ffffff;
-      border-radius: 10px;
-      margin-top: 20px;
+      border-radius: 5px;
+      margin-top: 10px;
       .title1 {
         font-size: 16px;
         font-weight: bold;
@@ -138,7 +140,7 @@ const onCart = (row: any) => {
       background-color: #ffffff;
       padding: 20px 20px;
       margin-top: 10px;
-      border-radius: 10px;
+      border-radius: 5px;
       .data-box {
         display: flex;
         flex-wrap: wrap;
@@ -151,7 +153,7 @@ const onCart = (row: any) => {
           padding: 20px 20px 22px 20px;
           cursor: pointer;
           .data-img {
-            width: 184px;
+            width: 100%;
             height: 184px;
             border-radius: 10px;
           }

src/views/plan_info/project.vue

@@ -60,13 +60,15 @@ const getList = () => {
 
 <style lang="scss" scoped>
 .real-pages {
-  width: 1200px;
+  width: 100%;
+  max-width: 1500px;
+  min-width: 1200px;
   margin: 0 auto;
   display: flex;
   gap: 0 20px;
   padding-bottom: 50px;
   .real-info {
-    width: 715px;
+    flex: 1;
     background: #ffffff;
     border-radius: 10px;
     padding: 20px;
@@ -105,7 +107,7 @@ const getList = () => {
   }
 
   .related-bos {
-    flex: 1;
+    width: 400px;
     .related-title {
       font-size: 16px;
       color: #323232;

src/views/search/brand.vue

@@ -200,12 +200,14 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .search-pages {
-  width: 1200px;
-  margin: 0 auto;
+  max-width: 1500px;
+  min-width: 1200px;
+  width: 100%;
+  margin: 15px auto 0 auto;
 
   // 筛选
   .search-head {
-    width: 1200px;
+    width: 100%;
     background: #ffffff;
     border-radius: 10px;
     padding: 0 15px 15px 15px;
@@ -247,14 +249,14 @@ onMounted(() => {
   // 商品
   // 行家精选
   .expert-bos {
-    width: 1200px;
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     margin-top: 12px;
     gap: 15px;
 
     .expert-list {
-      width: 228px;
+      flex: 0 0 calc((100% - 75px) / 6);
       height: 140px;
       background: #ffffff;
       border-radius: 10px;

src/views/search/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search-pages">
-    <div v-if="httpObj.searchKeyword && type == 1" class="breadcrumb flex-row-center">
+    <div v-if="httpObj.searchKeyword" class="breadcrumb flex-row-center">
       <div class="breadcrumb-bos flex-row-start">
         <div class="home" @click="onPath('/index')">首页</div>
         <div class="nav-list">
@@ -22,13 +22,13 @@
         <div class="head-title">分类:</div>
         <div class="head-box">
           <div
-            @click="onHead(item, type == 1 ? 'topCategoryId' : type == 2 ? 'middleCategoryId' : 'bottomCategoryId')"
+            @click="onHead(item, type == 1 ? 'topCategoryId' : type == 2 ? 'mediumCategoryId' : 'bottomCategoryId')"
             class="classify-list"
             v-for="(item, index) in classifyList"
             :key="index"
             :class="{
               hig:
-                type == 1 ? item.id == httpObj.topCategoryId : type == 2 ? item.id == httpObj.middleCategoryId : item.id == httpObj.bottomCategoryId
+                type == 1 ? item.id == httpObj.topCategoryId : type == 2 ? item.id == httpObj.mediumCategoryId : item.id == httpObj.bottomCategoryId
             }"
           >
             {{ item.label }}
@@ -167,7 +167,7 @@ const way = ref<any>(1);
 const httpObj = ref<any>({
   itemName: '',
   topCategoryId: '',
-  middleCategoryId: '',
+  mediumCategoryId: '',
   bottomCategoryId: '',
   brandId: '',
   priceRange: '',
@@ -219,14 +219,14 @@ const getList = () => {
 const getClassify = () => {
   getProductCategoryTree({}).then((res) => {
     if (res.code == 200) {
-      if (type.value == 2 && httpObj.value.middleCategoryId) {
+      if (type.value == 2 && httpObj.value.mediumCategoryId) {
         res.data.forEach((item1: any) => {
           item1.children.unshift({
             label: '全部',
             id: ''
           });
           item1.children.forEach((item2: any) => {
-            if (item2.id == httpObj.value.middleCategoryId) {
+            if (item2.id == httpObj.value.mediumCategoryId) {
               httpObj.value.topCategoryId = item1.id;
               classifyList.value = item1.children;
             }
@@ -246,7 +246,7 @@ const getClassify = () => {
               item2.children.forEach((item3: any) => {
                 if (item3.id == httpObj.value.bottomCategoryId) {
                   httpObj.value.topCategoryId = item1.id;
-                  httpObj.value.middleCategoryId = item2.id;
+                  httpObj.value.mediumCategoryId = item2.id;
                   classifyList.value = item2.children;
                 }
               });
@@ -355,8 +355,8 @@ const initData = () => {
     }
     getList();
   }
-  if (type.value == 2 && route.query.middleCategoryId) {
-    httpObj.value.middleCategoryId = route.query.middleCategoryId;
+  if (type.value == 2 && route.query.mediumCategoryId) {
+    httpObj.value.mediumCategoryId = route.query.mediumCategoryId;
   }
   if (type.value == 3 && route.query.bottomCategoryId) {
     httpObj.value.bottomCategoryId = route.query.bottomCategoryId;
@@ -375,11 +375,13 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .search-pages {
-  width: 1200px;
+  max-width: 1500px;
+  min-width: 1200px;
+  width: 100%;
   margin: 0px auto 0 auto;
   // 筛选
   .search-head {
-    width: 1200px;
+    width: 100%;
     background: #ffffff;
     border-radius: 10px;
     padding: 0 15px 15px 15px;
@@ -437,17 +439,20 @@ onMounted(() => {
   // 商品
   // 行家精选
   .expert-bos {
-    width: 1200px;
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     margin-top: 12px;
-    gap: 20px 12.5px;
+    gap: 20px 12px;
     .expert-list {
-      width: 230px;
+      flex: 0 0 calc((100% - 48px) / 5);
+      width: 0;
+      // width: 230px;
       height: 306px;
       background: #ffffff;
       padding: 20px;
       cursor: pointer;
+      border-radius: 5px;
       img {
         width: 100%;
         height: 190px;
@@ -489,7 +494,7 @@ onMounted(() => {
     height: 44px;
     padding-left: 20px;
     .breadcrumb-bos {
-      width: 1200px;
+      width: 100%;
       font-size: 14px;
       color: #101828;
       .nav-list {

src/views/search/special.vue

@@ -217,11 +217,13 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .search-pages {
-  width: 1200px;
-  margin: 0 auto;
+  max-width: 1500px;
+  min-width: 1200px;
+  width: 100%;
+  margin: 15px auto 0 auto;
   // 筛选
   .search-head {
-    width: 1200px;
+    width: 100%;
     background: #ffffff;
     border-radius: 10px;
     padding: 0 15px 15px 15px;
@@ -277,7 +279,7 @@ onMounted(() => {
   // 商品
   // 行家精选
   .expert-bos {
-    width: 1200px;
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     margin-top: 12px;

src/views/shop/pay.vue

@@ -49,7 +49,9 @@ const payList = ref<any>([{ title: '信用支付' }, { title: '支付宝支付'
   width: 100%;
   background-color: #ffffff;
   .pay-bos {
-    width: 1200px;
+    max-width: 1500px;
+    min-width: 1200px;
+    width: 100%;
     margin: 0 auto;
     .create-title {
       font-size: 16px;
@@ -57,7 +59,7 @@ const payList = ref<any>([{ title: '信用支付' }, { title: '支付宝支付'
       padding-top: 20px;
     }
     .pay-bos {
-      width: 1200px;
+      width: 100%;
       height: 230px;
       border: 1px solid #e5e7eb;
       margin-top: 30px;
@@ -143,7 +145,9 @@ const payList = ref<any>([{ title: '信用支付' }, { title: '支付宝支付'
     box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.05);
     margin-top: 47px;
     .foot-bos {
-      width: 1200px;
+      max-width: 1500px;
+      min-width: 1200px;
+      width: 100%;
       margin: 0 auto;
       padding-top: 16px;
       .bnt1 {

src/views/solve/real.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="real-pages">
-    <div>
+    <div class="flex-1">
       <div class="real-info">
         <div class="title">{{ dataInfo.announcementTitle }}</div>
         <div class="time">{{ dataInfo.createTime }}</div>
@@ -103,13 +103,15 @@ function getRandomElements(arr: any, count: any) {
 
 <style lang="scss" scoped>
 .real-pages {
-  width: 1200px;
+  width: 100%;
+  min-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
   display: flex;
   gap: 0 20px;
   padding-bottom: 50px;
   .real-info {
-    width: 715px;
+    width: 100%;
     background: #ffffff;
     border-radius: 10px;
     padding: 20px;