样式

src/api/home/index-enterprise.ts

@@ -26,3 +26,22 @@ export function getCustomerProductPage(query: any) {
     params: query
   });
 }
+
+// 查询客户消息列表
+
+export function customerMessageList(query: any) {
+  return request({
+    url: '/customer/customerMessage/list',
+    method: 'get',
+    params: query
+  });
+}
+
+//获取客户消息详细信息
+
+export const customerMessageDetail = (id: any) => {
+  return request({
+    url: '/customer/customerMessage/' + id,
+    method: 'get'
+  });
+};

src/layout/components/header.vue

@@ -28,6 +28,7 @@
               <ArrowDown />
             </el-icon>
           </div>
+          <div class="userInfo-box" @click="onPath('/indexEnterprise')">切换到企业</div>
           <div class="userInfo-box">姓名:{{ userInfo.user.nickName }}</div>
           <div class="userInfo-box" @click="onlogout">退出登录</div>
         </div>
@@ -166,7 +167,7 @@ const onlogout = () => {
         &.open {
           background-color: #ffffff;
           box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
-          height: 110px;
+          height: 146px;
           overflow: visible;
           .userInfo-customer {
             color: #e7000b;

src/router/index.ts

@@ -120,7 +120,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/indexEnterprise',
         component: () => import('@/views/home/index-enterprise.vue'),
         name: 'indexEnterprise',
-        meta: { title: '企业首页', affix: true, nav: true }
+        meta: { title: '企业首页', search: 'hide' }
       },
       {
         path: '/theme',

src/utils/siteConfig.ts

@@ -31,7 +31,7 @@ const REVERSE_DOMAIN_MAP: Record<string, string> = Object.entries(DOMAIN_MAP).re
 
 // 每个站点允许的路由 (保持不变)
 export const SITE_ROUTES: Record<any, string[]> = {
-  www: ['/', '/index', '/indexDiy', '/indexData', '/indexDataDiy', '/theme'], //优易365主站
+  www: ['/', '/index', '/indexDiy', '/indexData', '/indexDataDiy', '/theme', '/indexEnterprise'], //优易365主站
   b: ['/indexB'], //企业购商城
   mro: ['/indexMro', '/indexMroDiy'], //工业品商城
   fuli: ['/indexFuli', '/indexFuliDiy'], //福礼商城
@@ -187,7 +187,7 @@ export function onPath(path: string) {
           return '';
         })
         .replace(/([?&])$/, '') // 去除末尾残留的 ? 或 &
-        .replace(/\?&/, '?');   // 修复 ?& 变成 ?
+        .replace(/\?&/, '?'); // 修复 ?& 变成 ?
     }
 
     return {

src/views/home/index-data.vue

@@ -1,1123 +1,15 @@
 <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.agreementPrice || '' }}</span>
-          <span class="price2">¥{{ item.marketPrice || '' }}</span>
-        </div>
-      </div>
-    </div>
+    <div class="h-[30px]"></div>
+    <el-empty description="您的专属页面还未设计，请联系管理员~" />
   </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 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);
-  }
-});
-
-//头部轮播
-getHomeAdList({}).then((res) => {
-  if (res.code == 200) {
-    carouselList.value = res.data;
-  }
-});
-
-//头部优易资讯
-getYouYiZiXunPage({}).then((res) => {
-  if (res.code == 200) {
-    realList.value = res.data;
-  }
-});
-
-//头部会员权益
-getEnterpriseMemberEquityList({}).then((res) => {
-  if (res.code == 200) {
-    interestsList.value = res.data;
-  }
-});
-
-//首页三联广告(平台装修-楼层广告-首页三联广告)
-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;
-  }
-});
-
-//猜你喜欢
-getSiteProductList({}).then((res) => {
-  if (res.code == 200) {
-    console.log(res.data, 555555555555);
-    recommendList.value = res.data;
-  }
-});
-
-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>
+<script setup lang="ts"></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-enterprise.vue

@@ -1,123 +1,11 @@
 <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>
+    <comHead v-if="headData.show" :row="headData" :datas="realList"></comHead>
+    <!-- 导航 -->
     <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>
+        <img class="nav-image" :src="item.img" alt="" />
         <div class="flex-row-between">
           <div>
             <div class="name1">{{ item.name1 }}</div>
@@ -129,969 +17,141 @@
         </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>
+    <!-- 猜你喜欢 -->
+    <indexMorTitle :datas="{ title1: '猜你喜欢' }"></indexMorTitle>
+    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="recommendList"></comGoods>
   </div>
 </template>
 
 <script setup lang="ts">
-import profile from '@/assets/images/profile.jpg';
+import indexMorTitle from '@/views/home/pccomponents/pages/indexMorTitle.vue';
+import comHead from '@/views/home/pccomponents/pages/headData.vue';
+import comGoods from '@/views/home/pccomponents/pages/goods.vue';
 import { onPath } from '@/utils/siteConfig';
-import { getToken } from '@/utils/auth';
-import { getInfo } from '@/api/login';
+import { getSearchTitle, getHomeNav } from '@/api/home/index';
 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>([]);
+  getEnterpriseRightsMemberEquityList,
+  getEnterpriseHomeAdList,
+  getCustomerProductPage,
+  customerMessageList
+} from '@/api/home/index-enterprise';
+import enterprise1 from '@/assets/images/home/enterprise1.png';
+import enterprise2 from '@/assets/images/home/enterprise2.png';
+import enterprise3 from '@/assets/images/home/enterprise3.png';
+import enterprise4 from '@/assets/images/home/enterprise4.png';
+
+const headData = 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' }
+  { name1: '采购日历', name2: '提前制定和管理月度采购计划', url: '/enterprise/purchaseHistory', img: enterprise1 },
+  { name1: '自助开票', name2: '灵活自助开票 换开管票服务', url: '/enterprise/invoiceManage', img: enterprise2 },
+  { name1: '下载中心', name2: '批量订单打印', url: '/order/orderManage', img: enterprise3 },
+  { name1: '批量下单', name2: '智能识别多商品多地址一键下单', url: '/cart', img: enterprise4 }
 ]);
 
-//当前客户下的站点地址
-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 || {};
-          }
-        });
-      }
-    });
-  }
+  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 = 4;
+  headData.value.leftStyle = 1;
+  headData.value.carouselList = [];
+  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);
-  }
-});
-
-//头部轮播
-getEnterpriseHomeAdList({}).then((res) => {
-  if (res.code == 200) {
-    carouselList.value = res.data;
-  }
-});
+    const datas1 = await getSearchTitle(5);
+    if (datas1.code == 200) {
+      datas1.data.forEach((item: any) => {
+        headData.value.toplabel.push({
+          title: item.navigationName
+        });
+      });
+    }
 
-//头部优易资讯
-getYouYiZiXunPage({}).then((res) => {
-  if (res.code == 200) {
-    realList.value = res.data;
-  }
-});
+    const datas2 = await getHomeNav(5);
+    headData.value.topNav = [];
+    datas2.data.forEach((item: any) => {
+      headData.value.topNav.push({
+        title: item.navigationName,
+        url: item.url ? item.url : ''
+      });
+    });
 
-//头部会员权益
-getEnterpriseRightsMemberEquityList({}).then((res) => {
-  if (res.code == 200) {
-    interestsList.value = res.data;
-  }
-});
+    const datas3 = await getEnterpriseHomeAdList({});
+    if (datas3.code == 200) {
+      datas3.data.forEach((item: any) => {
+        headData.value.carouselList.push({
+          imageUrl: item.imageUrl
+        });
+      });
+    }
 
-//首页三联广告(平台装修-楼层广告-首页三联广告)
-getHomeThreeAdList({}).then((res) => {
-  if (res.code == 200) {
-    AdList.value = res.data;
-  }
-});
+    const datas5 = await customerMessageList({});
+    if (datas5.code == 200) realList.value = datas5.rows;
 
-//循环
-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) {}
+    const datas6 = await getEnterpriseRightsMemberEquityList({});
+    if (datas6.code == 200) {
+      datas6.data.forEach((item: any) => {
+        headData.value.navlList.push({
+          imageUrl: item.imageUrl,
+          title: item.title,
+          url: item.link ? item.link : ''
+        });
+      });
     }
 
-    goodsList.value = res.data;
-  }
-});
+    headData.value.show = true;
+  } catch (error) {}
+};
 
 //猜你喜欢
 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;
+  width: 100%;
+  padding-bottom: 30px;
 
-          img {
-            width: 40px;
-            height: 40px;
-            margin-right: 8px;
-            border-radius: 40px;
-          }
+  :deep(.hover-color) {
+    cursor: pointer;
 
-          .login1 {
-            font-size: 13px;
-            color: #444444;
-          }
+    &:hover {
+      color: var(--hover-color) !important;
 
-          .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;
-        }
+      .zi-hover {
+        color: var(--hover-color) !important;
       }
     }
   }
-
-  //项目案例
-  .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;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1500px;
+    min-width: 1200px;
     display: flex;
     gap: 0 10px;
     .nav-list {
-      margin-top: 20px;
-      width: 292.5px;
+      margin-top: 15px;
+      flex: 0 0 calc((100% - 30px) / 4);
       height: 150px;
       background: #ffffff;
-      border-radius: 10px 10px 10px 10px;
+      border-radius: 5px;
       padding: 20px;
       display: flex;
       flex-direction: column;

src/views/home/index-fuli.vue

@@ -39,7 +39,7 @@ import {
   getGiftFloorLinkProductList,
   getRecommendGiftFloorList
 } from '@/api/home/index-fuli';
-import { getSearchTitle, getYouYiZiXunPage } from '@/api/home/index';
+import { getSearchTitle, getYouYiZiXunPage, getHomeNav } from '@/api/home/index';
 
 const headData = ref<any>({});
 const imageCubeData = ref<any>({});
@@ -79,16 +79,14 @@ const getHead = async () => {
       });
     }
 
-    // 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 datas2 = await getHomeNav(3);
+    headData.value.topNav = [];
+    datas2.data.forEach((item: any) => {
+      headData.value.topNav.push({
+        title: item.navigationName,
+        url: item.url ? item.url : ''
+      });
+    });
 
     const datas3 = await getHomeAdList({});
     if (datas3.code == 200) {

src/views/home/index-mro.vue

@@ -80,17 +80,14 @@ const getHead = async () => {
       });
     }
 
-    // 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 datas2 = await getHomeNav(2);
+    headData.value.topNav = [];
+    datas2.data.forEach((item: any) => {
+      headData.value.topNav.push({
+        title: item.navigationName,
+        url: item.url ? item.url : ''
+      });
+    });
 
     const datas3 = await getHomeAdList({});
     if (datas3.code == 200) {

src/views/home/index.vue

@@ -66,7 +66,8 @@ import {
   getClassificationFloorLabel,
   getClassificationFloorDetail2,
   getProjectCaseTitle,
-  getProjectCaseList
+  getProjectCaseList,
+  getHomeNav
 } from '@/api/home/index';
 
 const headData = ref<any>({});
@@ -113,16 +114,14 @@ const getHead = async () => {
       });
     }
 
-    // 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 datas2 = await getHomeNav(1);
+    headData.value.topNav = [];
+    datas2.data.forEach((item: any) => {
+      headData.value.topNav.push({
+        title: item.navigationName,
+        url: item.url ? item.url : ''
+      });
+    });
 
     const datas3 = await getHomeAdList({});
     if (datas3.code == 200) {

src/views/home/pccomponents/index.ts

@@ -4,6 +4,9 @@ import { markRaw } from 'vue';
 import head from './pages/head.vue';
 const headRef = shallowRef(head);
 
+import headData from './pages/headData.vue';
+const headDataRef = shallowRef(headData);
+
 import textTitle from './pages/textTitle.vue';
 const textTitleRef = shallowRef(textTitle);
 
@@ -62,6 +65,14 @@ export const componentImportConfigs: any = [
     components: markRaw(headRef.value),
     fid: 1
   },
+  {
+    name: '站点头部',
+    icon: 'iconfont iconfuwenbenpc',
+    id: 18,
+    enabled: true,
+    components: markRaw(headRef.value),
+    fid: 1
+  },
   {
     name: '文本标题',
     icon: 'iconfont iconbiaotipc',

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

@@ -362,10 +362,6 @@ const warpCss = computed(() => {
 
   return style;
 });
-
-const onPath2 = (row: any) => {
-  console.log(row, '?????');
-};
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,902 @@
+<template>
+  <div class="head-all" :style="warpCss">
+    <!-- 搜索组件 -->
+    <div class="search-bos">
+      <div class="search-content">
+        <img class="logo mt-[10px]" @click="onPath('/')" :src="componentData.logo1 ? componentData.logo1 : logo1" alt="" />
+        <img class="logo mt-[20px]" @click="onPath('/')" :src="componentData.logo2 ? componentData.logo2 : logo3" alt="" />
+        <div class="search-box">
+          <div class="search-div flex-row-start">
+            <div class="search-input flex-row-center">
+              <el-input class="el-input" v-model="input" placeholder="搜索商品、品牌、分类..." />
+              <div class="bnt flex-row-center" @click="onPath('/search?type=1&input=' + input)">
+                <el-icon color="#ffffff" size="20">
+                  <Search />
+                </el-icon>
+              </div>
+            </div>
+
+            <div class="cat-bos flex-row-center">
+              <el-badge :value="cartCount" v-if="cartCount > 0">
+                <img src="@/assets/images/pcdiy/layout4.png" alt="" />
+              </el-badge>
+              <span @click="onPath('/cart')" class="ml-[15px]">我的购物车</span>
+            </div>
+          </div>
+          <div class="search-text">
+            <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="" />
+      </div>
+    </div>
+    <!-- 分类 -->
+    <div class="nav-pages">
+      <div class="nav-bos">
+        <div v-for="(item, index) in componentData.topNav" :key="index" class="nav-list" :class="index == 0 ? 'hig' : ''" @click="onPath(item.url)">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+
+    <!--  头部 -->
+    <div class="head-pages">
+      <div class="home-head">
+        <div @mouseleave="leaveClassify">
+          <div
+            class="classify"
+            :class="classifyShow ? 'classify-show' : ''"
+            :style="{
+              backgroundColor: componentData.leftBackground
+            }"
+          >
+            <div
+              @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'
+              ]"
+            >
+              <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 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="head-bos">
+          <div
+            class="carousel"
+            :class="[
+              { 'carousel-type': componentData.carouselType == 2 },
+              'position' + componentData.carouselPosition,
+              'styleType' + componentData.carouselStyleType
+            ]"
+            :style="{
+              borderRadius: componentData.carouselRadius + 'px'
+            }"
+          >
+            <el-carousel height="540px" arrow="always">
+              <template v-if="componentData.carouselList && componentData.carouselList.length > 0">
+                <el-carousel-item v-for="item in componentData.carouselList" :key="item">
+                  <el-image
+                    style="width: 100%; height: 100%"
+                    :src="item.imageUrl ? item.imageUrl : figure"
+                    :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
+                  />
+                </el-carousel-item>
+              </template>
+              <template v-else>
+                <el-carousel-item>
+                  <el-image style="width: 100%; height: 100%" :src="figure" fit="cover" />
+                </el-carousel-item>
+              </template>
+            </el-carousel>
+          </div>
+        </div>
+        <!-- 右边 -->
+        <div
+          class="head-right"
+          :style="{
+            borderRadius: componentData.rightRadius + 'px'
+          }"
+        >
+          <div v-if="userInfo.user" class="login-bos flex-column-between">
+            <div class="login-box">
+              <img :src="logo2" alt="" />
+              <div class="flex-1 w-[0px]">
+                <div class="login1 ellipsis">{{ userInfo.user.nickName }}</div>
+                <div class="login2 ellipsis">{{ userInfo.customerName }}</div>
+              </div>
+            </div>
+            <div class="login-num">
+              <div class="flex-row-between">
+                <div>剩余额度：¥{{ customerSalesInfoVo.remainingQuota ? customerSalesInfoVo.remainingQuota : '0.00' }}</div>
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
+              </div>
+              <div class="flex-row-between mt-[6px]">
+                <div>部门额度：¥{{ customerSalesInfoVo.deptCredit ? customerSalesInfoVo.deptCredit : '0.00' }}</div>
+                <el-icon>
+                  <ArrowRight />
+                </el-icon>
+              </div>
+            </div>
+          </div>
+          <div class="login-bos" v-else>
+            <div class="login-box">
+              <img :src="logo2" alt="" />
+              <div>
+                <div class="login1">您好,欢迎来到优易达</div>
+                <div class="login2">请先登录</div>
+              </div>
+            </div>
+            <div class="loginBtn-bos flex-row-center">
+              <div class="login-bnt1 flex-row-center" @click="onPath('/login')">登录</div>
+              <div class="login-bnt2 flex-row-center" @click="onPath('/breg')">注册</div>
+            </div>
+          </div>
+          <div class="interests">
+            <div class="interests-bos">
+              <div v-for="(item, index) in componentData.navlList" :key="index" class="interests-item flex-column-center">
+                <el-image
+                  class="img"
+                  :src="item.imageUrl ? item.imageUrl : figure"
+                  :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
+                />
+                <div style="height: 18px" class="hover-color">{{ 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?type=2&id=' + item.id)"
+                  class="real-list ellipsis"
+                  v-if="componentData.realDataType == 2 ? true : Number(index) < componentData.realNumber"
+                >
+                  {{ item.title }}
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="Index" lang="ts">
+import figure from '@/assets/images/figure.png';
+import logo1 from '@/assets/images/pcdiy/logo1.png';
+import logo2 from '@/assets/images/pcdiy/logo2.png';
+import logo3 from '@/assets/images/pcdiy/logo3.png';
+import code from '@/assets/images/pcdiy/code.png';
+import { getProductCategoryTree, countOrder } from '@/api/home/index';
+import { getAnnouncementPage } from '@/api/home/diy';
+import { onPath } from '@/utils/siteConfig';
+import Cookies from 'js-cookie';
+import { getInfo } from '@/api/login';
+import { cartStore } from '@/store/modules/cart';
+import { getEnterpriseInfo } from '@/api/pc/enterprise';
+const props = defineProps<{
+  row?: any;
+  datas?: any;
+}>();
+const componentData = props.row || {};
+const userInfo = ref<any>({});
+const customerSalesInfoVo = ref<any>({});
+const countData = ref<any>({});
+//左侧分类
+const classifyList = ref<any>([]);
+const realList = ref<any>([]);
+const classifyShow = ref<any>(false);
+const classifyId = ref<any>('');
+const classifyInfo = ref<any>([]);
+const cartStoreData = cartStore();
+const cartCount = computed(() => cartStoreData.cartCount);
+const input = ref<any>('');
+
+document.documentElement.style.setProperty('--carousel-color', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
+onMounted(() => {
+  if (props.datas) {
+    realList.value = props.datas;
+  } else {
+    getDataList();
+  }
+  const token = Cookies.get('Authorization');
+  if (token) {
+    getInfo().then((res) => {
+      if (res.code == 200) {
+        userInfo.value = res.data;
+
+        countOrder({}).then((res1) => {
+          if (res1.code == 200) {
+            countData.value = res1.data || {};
+          }
+        });
+      }
+    });
+
+    getEnterpriseInfo().then((res) => {
+      if (res.code == 200) {
+        if (res.data && res.data.customerSalesInfoVo) {
+          customerSalesInfoVo.value = res.data.customerSalesInfoVo;
+        }
+        customerSalesInfoVo.value.deptCredit = res.data.deptCredit;
+        console.log(res.data, '??????????');
+      }
+    });
+  }
+});
+
+//头部分类
+getProductCategoryTree({ platform: componentData.headType ? componentData.headType : 0 }).then((res) => {
+  if (res.code == 200) {
+    classifyList.value = res.data;
+  }
+});
+
+const getDataList = () => {
+  realList.value = [];
+  // 默认
+  if (componentData.realDataType == 1) {
+    getAnnouncementPage({ pageSize: 20 }).then((res) => {
+      if (res.code == 200) {
+        realList.value = res.rows;
+      }
+    });
+  } else {
+    //手动选择
+    getAnnouncementPage({ pageSize: 20, ids: componentData.realIds.join(',') }).then((res) => {
+      if (res.code == 200) {
+        const result = res.rows.filter((item: any) => componentData.realIds.includes(item.id));
+        realList.value = result;
+        console.log('result', result);
+      }
+    });
+  }
+};
+
+//移入分类
+const enterClassify = (res: any) => {
+  classifyShow.value = true;
+  classifyId.value = res.id;
+  classifyInfo.value = res.children;
+};
+
+//移出分类
+const leaveClassify = () => {
+  classifyShow.value = false;
+};
+
+const warpCss = computed(() => {
+  let style = '';
+  style += 'position:relative;';
+  //边距
+  if (componentData.padding) {
+    if (componentData.padding.top > 0) {
+      style += 'padding-top:' + componentData.padding.top + 'px' + ';';
+    }
+    if (componentData.padding.bottom > 0) {
+      style += 'padding-bottom:' + componentData.padding.bottom + 'px' + ';';
+    }
+    style += 'padding-right:' + componentData.padding.both + 'px' + ';';
+    style += 'padding-left:' + componentData.padding.both + 'px' + ';';
+  }
+  //间距
+  if (componentData.margin) {
+    if (componentData.margin.top > 0) {
+      style += 'margin-top:' + componentData.margin.top + 'px' + ';';
+    }
+    if (componentData.margin.bottom > 0) {
+      style += 'margin-bottom:' + componentData.margin.bottom + 'px' + ';';
+    }
+  }
+
+  return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.head-all {
+  width: 100%;
+
+  // 搜索栏
+  .search-bos {
+    width: 100%;
+
+    .search-content {
+      margin: 0 auto;
+      width: 100%;
+      max-width: 1500px;
+      min-width: 1200px;
+      display: flex;
+      padding: 0 30px;
+    }
+
+    .logo {
+      width: 170px;
+      height: 88px;
+      border-radius: 4px;
+      margin-right: 30px;
+      cursor: pointer;
+    }
+
+    .search-box {
+      flex: 1;
+      height: 88px;
+      padding-top: 40px;
+
+      .search-div {
+        .search-input {
+          flex: 1;
+          height: 38px;
+          border-radius: 3px;
+          border: 2px solid #fb2c36;
+          padding-right: 4px;
+          font-size: 14px;
+
+          .el-input {
+            height: 30px;
+            width: 100%;
+            font-size: 16px;
+
+            :deep(.el-input__wrapper) {
+              border: none;
+              /* 可选：去除聚焦时的高亮 */
+              box-shadow: none;
+              outline: none;
+            }
+          }
+
+          .bnt {
+            width: 50px;
+            height: 30px;
+            background: #e7000b;
+            border-radius: 3px;
+            font-weight: bold;
+            cursor: pointer;
+          }
+        }
+
+        .cat-bos {
+          width: 143px;
+          height: 38px;
+          background: #ffffff;
+          border-radius: 10px;
+          border: 1px solid #e5e7eb;
+          margin-left: 24px;
+          font-size: 14px;
+          color: #e7000b;
+          cursor: pointer;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-top: 2px;
+          }
+        }
+      }
+
+      .search-text {
+        font-size: 12px;
+        color: #e7000b;
+        display: flex;
+        margin-top: 4px;
+
+        div {
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .code {
+      height: 90px;
+      width: 90px;
+      margin-top: 10px;
+      margin-left: 70px;
+      // border-radius: 4px;
+    }
+  }
+
+  //分类
+  .nav-pages {
+    width: 100%;
+
+    .nav-bos {
+      margin: 0 auto;
+      width: 100%;
+      max-width: 1500px;
+      min-width: 1200px;
+      display: flex;
+      position: relative;
+      background: #f9fafb;
+      border-radius: 5px 5px 0px 0px;
+      border: 1px solid #e5e7eb;
+      height: 48px;
+
+      .nav-list {
+        line-height: 48px;
+        font-size: 15px;
+        color: #364153;
+        margin: 0 16px;
+        text-align: center;
+        cursor: pointer;
+
+        &.hig {
+          color: #e7000b;
+          position: relative;
+        }
+
+        &:hover {
+          color: #e7000b;
+        }
+      }
+    }
+  }
+
+  // 头部
+  .head-pages {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+
+    .home-head {
+      width: 100%;
+      min-width: 1200px;
+      max-width: 1500px;
+      position: relative;
+      display: flex;
+      gap: 0px 10px;
+      margin: 0px auto 0 auto;
+      background-color: #ffffff;
+
+      .classify {
+        width: 234px;
+        height: 540px;
+        background: #ffffff;
+        border-radius: 5px 0px 0px 5px;
+        padding: 10px 0px;
+        overflow: hidden;
+
+        &.classify-show {
+          position: relative;
+          z-index: 999;
+          height: auto;
+          min-height: 540px;
+          overflow: visible;
+        }
+
+        .classify-list1 {
+          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: #e7000b;
+            }
+          }
+
+          .info {
+            max-width: 60px;
+            font-size: 12px;
+            color: #364153;
+            white-space: nowrap;
+
+            &.info1 {
+              margin-right: 6px;
+            }
+
+            &:hover {
+              color: #e7000b;
+            }
+          }
+        }
+        .classify-list2 {
+          width: 100%;
+          height: 58px;
+          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);
+              }
+            }
+          }
+        }
+        .classify-border {
+          position: absolute;
+          right: -1px;
+          top: 0px;
+          width: 1px;
+          z-index: 199;
+          &.classify-border1 {
+            height: 38px;
+            background-color: #ffffff;
+          }
+          &.classify-border2 {
+            height: 58px;
+            background-color: #323232;
+          }
+        }
+      }
+      .classify-bos {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 234px;
+        height: 100%;
+        border: 1px solid var(--el-color-primary);
+        background-color: #ffffff;
+        overflow-y: auto;
+        padding-left: 30px;
+        z-index: 99;
+
+        .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;
+        padding: 10px 0;
+
+        .carousel {
+          overflow: hidden;
+          width: 100%;
+          background: #ffffff;
+          cursor: pointer;
+
+          :deep(.el-carousel__button) {
+            background-color: var(--carousel-color);
+          }
+
+          &.carousel-type {
+            :deep(.el-carousel__arrow) {
+              border-radius: 0;
+            }
+          }
+
+          &.position1 {
+            :deep(.el-carousel__indicators--horizontal) {
+              left: 5%;
+            }
+          }
+          &.position2 {
+            :deep(.el-carousel__indicators--horizontal) {
+              left: 50%;
+            }
+          }
+          &.position3 {
+            :deep(.el-carousel__indicators--horizontal) {
+              left: 95%;
+            }
+          }
+          &.styleType2 {
+            :deep(.el-carousel__button) {
+              height: 10px;
+              width: 10px;
+              border-radius: 10px;
+            }
+          }
+        }
+      }
+
+      //右边
+      .head-right {
+        width: 240px;
+        height: 540px;
+        background: #ffffff;
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        .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;
+          }
+        }
+
+        .login-bos {
+          width: calc(100% - 20px);
+          min-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;
+            width: 100%;
+
+            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;
+            }
+          }
+
+          .login-num {
+            width: 100%;
+            background: linear-gradient(90deg, #f2d4c3 0%, #ffe3d2 100%);
+            border-radius: 4px 4px 4px 4px;
+            font-size: 12px;
+            color: #542a12;
+            padding: 5px 10px;
+            margin-top: 10px;
+          }
+
+          .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;
+            }
+          }
+        }
+
+        .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: 100%;
+            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-bos {
+            display: flex;
+            flex-wrap: wrap;
+
+            .interests-item {
+              width: 33.333%;
+              font-size: 12px;
+              color: #101828;
+              margin-top: 15px;
+              cursor: pointer;
+
+              .img {
+                width: 34px;
+                height: 34px;
+                border-radius: 6px;
+                margin-bottom: 7px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/solve/real.vue

@@ -1,49 +1,36 @@
 <template>
   <div class="real-pages">
-    <div class="flex-1">
-      <div class="real-info">
-        <div class="title">{{ dataInfo.announcementTitle }}</div>
-        <div class="time">{{ dataInfo.createTime }}</div>
-        <div class="real-html" v-html="dataInfo.announcementContent"></div>
-      </div>
+    <div class="real-info">
+      <div class="title">{{ dataInfo.announcementTitle }}</div>
+      <div class="time">{{ dataInfo.createTime }}</div>
+      <div class="real-html" v-html="dataInfo.announcementContent"></div>
     </div>
-    <el-affix :offset="0" target=".real-pages">
-      <div class="related-bos">
-        <div class="related-box">
-          <div class="flex-row-between related-title">
-            <div>产品推荐</div>
-            <div class="flex-row-start related-huan" @click="getList">
-              <el-icon><Sort /></el-icon>
-              <div style="margin-left: 4px">换一换</div>
-            </div>
-          </div>
-          <div class="procure-bos">
-            <div v-for="(item, index) in dataList" :key="index" class="procure-list" @click="onPath('/plan_info?id=' + item.id)">
-              <img :src="item.coverImage" alt="" />
-              <div class="procure1">{{ item.title }}</div>
-              <div class="procure2">{{ item.releaseTime }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-affix>
-    <!--
     <div class="real-shop">
-      <div class="shop-head flex-row-start">
-        <div class="head1">为您推荐</div>
-        <div class="head2">热门流行商品推荐</div>
+      <div class="shop-head flex-row-between">
+        <div class="head1">产品推荐</div>
+        <div class="flex-row-start head2" @click="getList">
+          <el-icon><Sort /></el-icon>
+          <div style="margin-left: 4px">换一换</div>
+        </div>
       </div>
       <div class="data-bos">
-        <div v-for="(item, index) in 9" :key="index" class="data-list">
-          <img class="data-img" src="@/assets/images/login-background.jpg" alt="" />
-          <div class="data-title">格力KFR-72LW/定频冷暖空调柜机3P</div>
-          <div class="money">
-            <span class="money1">¥1,299</span>
-            <span class="money2">¥1,899</span>
+        <div v-for="(item, index) in dataList" :key="index" class="data-list" @click="onPath('/plan_info?id=' + item.id)">
+          <img class="data-img" :src="item.coverImage" alt="" />
+          <div class="data-box flex-column-between">
+            <div>
+              <div class="title ellipsis">{{ item.tweetsTitle }}</div>
+              <div class="info ellipsis">{{ item.programDescribe }}</div>
+            </div>
+            <div class="text flex-row-start">
+              <div>了解详情</div>
+              <el-icon color="#e7000b" size="14" style="margin: 0 0 0 10px">
+                <ArrowRight />
+              </el-icon>
+            </div>
           </div>
         </div>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -51,22 +38,35 @@
 import { onPath } from '@/utils/siteConfig';
 import { getYouYzXunInfo } from '@/api/plan/index';
 import { getProcurementProgramList } from '@/api/plan/index';
+import { customerMessageDetail } from '@/api/home/index-enterprise';
 const id = ref<any>(null);
+const type = ref<any>(1);
 const dataInfo = ref<any>({});
 const route = useRoute();
 const dataList = ref<any>([]);
 onMounted(() => {
   id.value = route.query.id;
+  type.value = route.query.type ? route.query.type : 1;
   getInfo();
   getList();
 });
 
 const getInfo = () => {
-  getYouYzXunInfo(id.value).then((res) => {
-    if (res.code == 200) {
-      dataInfo.value = res.data;
-    }
-  });
+  if (type.value == 2) {
+    customerMessageDetail(id.value).then((res) => {
+      if (res.code == 200) {
+        res.data.announcementTitle = res.data.title;
+        res.data.announcementContent = res.data.content;
+        dataInfo.value = res.data;
+      }
+    });
+  } else {
+    getYouYzXunInfo(id.value).then((res) => {
+      if (res.code == 200) {
+        dataInfo.value = res.data;
+      }
+    });
+  }
 };
 
 // 封装获取列表的逻辑
@@ -111,9 +111,9 @@ function getRandomElements(arr: any, count: any) {
   gap: 0 20px;
   padding-bottom: 50px;
   .real-info {
-    width: 100%;
+    flex: 1;
     background: #ffffff;
-    border-radius: 10px;
+    border-radius: 5px;
     padding: 20px;
     .title {
       font-size: 20px;
@@ -128,135 +128,84 @@ function getRandomElements(arr: any, count: any) {
       width: 679px;
       :deep(img) {
         max-width: 100%;
+        display: block;
         height: auto;
       }
     }
-    .img {
-      width: 679px;
-      height: 351px;
-      border-radius: 10px;
-    }
-    .head {
-      font-weight: 600;
-      font-size: 14px;
-      color: #101828;
-      margin: 10px 0 18px 0;
-    }
-    .info {
-      font-size: 14px;
-      color: #364153;
-      margin-bottom: 15px;
-    }
   }
   .real-shop {
-    flex: 1;
+    width: 400px;
     .head1 {
       font-weight: 600;
-      font-size: 20px;
+      font-size: 18px;
       color: #101828;
     }
     .head2 {
       font-size: 14px;
       color: #364153;
       margin-left: 10px;
+      cursor: pointer;
     }
-    //数据
+    // 数据列表
     .data-bos {
-      display: flex;
-      gap: 17px;
-      flex-wrap: wrap;
-      margin-top: 10px;
-      width: 100%;
       .data-list {
-        width: 224px;
+        // 计算宽度：每行3个。 (100% - 2个间隙 * 20px) / 3
+        width: 100%;
+        height: 302px;
         background: #ffffff;
-        border-radius: 10px;
-        padding: 20px 20px 22px 20px;
+        border-radius: 5px;
+        overflow: hidden;
         cursor: pointer;
-        .data-img {
-          width: 184px;
-          height: 184px;
-          border-radius: 10px;
-        }
-        .data-title {
-          margin-top: 4px;
-          font-size: 14px;
-          color: #101828;
-          height: 40px;
-        }
-        .money {
-          margin-top: 4px;
-          .money1 {
-            font-size: 16px;
-            color: #e7000b;
-          }
-          .money2 {
-            font-size: 12px;
-            color: #99a1af;
-            text-decoration: line-through;
-            padding-left: 6px;
-          }
-        }
-        .data-cat {
-          width: 86px;
-          height: 26px;
-          background: #e7000b;
-          border-radius: 2px;
-          font-size: 14px;
-          color: #ffffff;
-          line-height: 26px;
-          text-align: center;
-          margin-top: 16px;
+        transition:
+          transform 0.2s ease,
+          box-shadow 0.2s ease;
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-      }
-    }
-  }
 
-  .related-bos {
-    flex: 1;
-    .related-box {
-      width: 100%;
-      background-color: #ffffff;
-      border-radius: 10px;
-      padding: 20px;
-      .related-title {
-        font-size: 16px;
-        color: #666666;
-        .related-huan {
-          font-size: 14px;
-          cursor: pointer;
+        .data-img {
+          width: 100%;
+          height: 200px;
+          object-fit: cover; // 保持图片比例填充
         }
-      }
-      // 采购指南
-      .procure-bos {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        margin-top: 12px;
-        gap: 12px 0px;
-        .procure-list {
+
+        .data-box {
+          flex: 1; // 占据剩余高度
           width: 100%;
-          height: 268px;
-          background: #ffffff;
-          cursor: pointer;
-          border-radius: 10px;
-          overflow: hidden;
-          border: 1px solid #d0d5dd;
-          img {
-            width: 100%;
-            height: 200px;
-            border-bottom: 1px solid #d0d5dd;
-          }
-          .procure1 {
-            padding: 12px 0 4px 20px;
+          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;
           }
-          .procure2 {
-            padding-left: 20px;
+
+          .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; // 推到底部
           }
         }
       }