首页

src/api/home/index-data.ts

@@ -44,3 +44,70 @@ export function getSiteProductList(query: any) {
     params: query
   });
 }
+
+/**
+ * 新的 --------------------------------------------------------------------
+ **/
+
+// 获取当前搜索页面设置
+export function currentSearchConfig(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/currentSearchConfig',
+    method: 'get',
+    params: query
+  });
+}
+
+// 分类设置
+export function categoryMainList(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/categoryMainList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 头部菜单
+export function headerCategoryList(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/headerCategoryList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 轮播图设置
+export function carouselList(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/carouselList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 广告模块
+export function adConfigList(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/adConfigList',
+    method: 'get',
+    params: query
+  });
+}
+
+// 推荐设置
+export function recommendThemeConfig(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/recommendThemeConfig',
+    method: 'get',
+    params: query
+  });
+}
+
+// 场景方案设置
+export function currentScenarioConfig(query: any) {
+  return request({
+    url: '/mall/pcDkhDesign/currentScenarioConfig',
+    method: 'get',
+    params: query
+  });
+}

src/router/index.ts

@@ -114,7 +114,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/indexDataDiy',
         component: () => import('@/views/home/index-dataDiy.vue'),
         name: 'IndexDataDiy',
-        meta: { title: '大客户站点Diy', diy: true, search: 'hide' }
+        meta: { title: '大客户站点Diy', diy: true, search: 'hide', header: 'hide', foot: 'hide' }
       },
       {
         path: '/indexEnterprise',

src/views/home/datacomponents/JDBanner.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="banner-flex w flex">
+    <!-- 侧边条 -->
+    <div class="side-deco" v-if="isLargeScreen">
+      企业专享低至5折 <i></i>
+    </div>
+
+    <!-- 轮播图 -->
+    <div class="slider-box" :style="{ flex: isLargeScreen ? '0 0 540px' : '1' }">
+      <img src="https://img14.360buyimg.com/babel/jfs/t1/181519/33/23577/253912/628f3a38E7b53940c/7c703080e72c8334.jpg" />
+    </div>
+
+    <!-- 复合网格 -->
+    <div class="mini-grid flex-1">
+      <div class="grid-wrap">
+        <div class="g-item subsidy">
+          <div class="g-h">企业购×百亿补贴 <span>先享后付</span></div>
+          <div class="g-p-list flex">
+            <div class="g-p" v-for="i in 4" :key="i">
+              <img src="https://img10.360buyimg.com/n1/s200x200_jfs/t1/192131/28/13600/171542/611a1b5aE3c869e5d/13e007802874102d.jpg" />
+              <p>￥69.9</p>
+            </div>
+          </div>
+        </div>
+        <div class="g-item rank">
+          <div class="g-h">企业榜单 <span>同行买</span></div>
+          <div class="g-rank-list flex">
+             <div class="r-i flex-1" v-for="i in 2" :key="i">
+               <img src="https://img13.360buyimg.com/n1/s200x200_jfs/t1/175027/2/13627/184131/611a1b7eEc1248c8b/09c3d4f4e2f4f4f4.jpg" />
+               <p>电脑榜</p>
+             </div>
+          </div>
+        </div>
+        <div class="g-item store">
+          <div class="g-h">品牌好店 <span>送E卡</span></div>
+          <div class="store-inner flex-column flex-center">
+             <img src="https://img12.360buyimg.com/imagetools/jfs/t1/143521/1/32579/6255/63f8582bEcf959247/e16d443900331003.png" style="width:50px" />
+             <p style="font-size:12px; margin-top:5px">Apple自营店</p>
+          </div>
+        </div>
+        <div class="g-item new">
+          <div class="g-h">京东新品 <span>美的新鲜</span></div>
+          <div class="new-list flex">
+             <div class="n-p flex-1" v-for="i in 2" :key="i">
+               <img src="https://img10.360buyimg.com/n1/s200x200_jfs/t1/170942/37/13844/145826/611a1a7aE5e899b82/6e0f8087c0a6b9a9.jpg" />
+             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 用户面板 -->
+    <div class="user-wrap" v-if="isLargeScreen">
+      <div class="u-top flex-column flex-center">
+         <img src="https://img11.360buyimg.com/imagetools/jfs/t1/143521/1/32579/6255/63f8582bEcf959247/e16d443900331003.png" class="avatar" />
+         <p class="name">Hi, 欢迎访问</p>
+         <div class="u-btns flex">
+            <button class="b-login">登录</button>
+            <button class="b-reg">注册</button>
+         </div>
+      </div>
+      <div class="u-tools">
+         <p class="t-h">企业工作台</p>
+         <div class="t-grid">
+            <div class="t-i" v-for="i in 8" :key="i">
+               <i></i>
+               <span>工具{{i}}</span>
+            </div>
+         </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+const isLargeScreen = ref(window.innerWidth >= 1600);
+const check = () => isLargeScreen.value = window.innerWidth >= 1600;
+onMounted(() => window.addEventListener('resize', check));
+onUnmounted(() => window.removeEventListener('resize', check));
+</script>
+
+<style scoped>
+.banner-flex { height: 460px; margin: 10px auto; gap: 10px; }
+
+.side-deco { width: 56px; background: #34C759; border-radius: 12px; writing-mode: vertical-lr; color: #fff; font-weight: bold; font-size: 18px; text-align: center; display: flex; align-items: center; justify-content: center; letter-spacing: 4px; }
+
+.slider-box { border-radius: 12px; overflow: hidden; background: #eee; }
+.slider-box img { width: 100%; height: 100%; object-fit: cover; }
+
+.mini-grid { }
+.grid-wrap { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
+.g-item { background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
+.g-h { font-weight: bold; font-size: 14px; margin-bottom: 10px; }
+.g-h span { color: #FF9500; font-size: 12px; float: right; font-weight: normal; }
+
+.g-p-list { gap: 5px; flex: 1; }
+.g-p { flex: 1; text-align: center; }
+.g-p img { width: 100%; border-radius: 4px; }
+.g-p p { color: #E1251B; font-size: 12px; font-weight: bold; }
+
+.g-rank-list { gap: 10px; flex: 1; }
+.r-i { background: #F7F8FA; border-radius: 6px; padding: 5px; text-align: center; }
+.r-i img { width: 100%; border-radius: 4px; }
+.r-i p { font-size: 11px; margin-top: 3px; }
+
+.user-wrap { width: 230px; background: #fff; border-radius: 12px; padding: 15px; }
+.avatar { width: 50px; height: 50px; border-radius: 25px; }
+.name { margin-top: 10px; font-weight: bold; }
+.u-btns { margin-top: 15px; gap: 10px; }
+.u-btns button { padding: 4px 15px; border-radius: 12px; border: none; font-size: 12px; cursor: pointer; }
+.b-login { background: #E1251B; color: #fff; }
+.b-reg { background: #333; color: #e5d790; }
+
+.u-tools { margin-top: 20px; }
+.t-h { font-weight: bold; font-size: 13px; margin-bottom: 10px; }
+.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+.t-i { text-align: center; font-size: 11px; color: #666; }
+.t-i i { display: block; width: 24px; height: 24px; background: #f4f4f4; border-radius: 50%; margin: 0 auto 5px; }
+
+@media screen and (max-width: 1599px) {
+  .banner-flex { height: auto; min-height: 400px; }
+  .grid-wrap { grid-template-rows: auto; }
+}
+</style>

src/views/home/datacomponents/JDBannerCards.vue

@@ -0,0 +1,579 @@
+<template>
+  <div class="central-ads">
+    <!-- 左侧 509px 黄金列：包含轮播图 + (采购场景 + 合作品牌) -->
+    <div class="ads-col-left">
+      <!-- 智能选品 Banner (多图轮播) -->
+      <div class="slider-box" @mouseenter="stopAuto" @mouseleave="startAuto">
+        <div class="slider-list flex" :style="{ transform: `translateX(-${currentIdx * 100}%)` }">
+          <div class="slider-item" v-for="(slide, i) in bannerSlides" :key="i" @click="onPath(slide.linkUrl)">
+            <img :src="slide.imageUrl" class="slide-img" />
+          </div>
+        </div>
+        <div class="dots">
+          <span v-for="(_, i) in bannerSlides" :key="i" :class="{ active: currentIdx === i }" @click="currentIdx = i"></span>
+        </div>
+      </div>
+
+      <!-- 下方卡片组：采购场景 + 合作品牌 -->
+      <div class="bottom-group">
+        <!-- 采购场景 (248 * 160) -->
+        <div class="bottom-card card-base">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo2.mainTitleColor }">{{ dataInfo2.mainTitle }}</span>
+            <span @click="onPath(dataInfo2.subTitleLink)" class="tag-gray" :style="{ color: dataInfo2.subTitleColor }">{{ dataInfo2.subTitle }}</span>
+          </div>
+          <div class="card-body-two-cols flex">
+            <div class="col-item" v-for="(item, index) in dataInfo2.list" :key="index" @click="onPath(item.link)">
+              <img :src="item.image" class="mini-prod-img bank-logo" />
+              <span class="col-text text-red">{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 合作品牌 (248 * 160) -->
+        <div class="bottom-card card-base">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo3.mainTitleColor }">{{ dataInfo3.mainTitle }}</span>
+            <span @click="onPath(dataInfo3.subTitleLink)" class="tag-gray" :style="{ color: dataInfo3.subTitleColor }">{{ dataInfo3.subTitle }}</span>
+          </div>
+          <div class="card-body-two-cols flex">
+            <div class="col-item" v-for="(item, index) in dataInfo3.list" :key="index" @click="onPath(item.link)">
+              <img :src="item.image" class="mini-brand-logo" />
+              <span class="col-text text-gray">{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧 512px 黄金列：包含企业精选 + (采购排行榜 + 重磅新品) -->
+    <div class="ads-col-right">
+      <!-- 企业精选 -->
+      <div class="subsidy-box card-base">
+        <div class="c-header flex-between">
+          <span class="title" :style="{ color: dataInfo1.mainTitleColor }">{{ dataInfo1.mainTitle }}</span>
+          <span @click="onPath(dataInfo1.subTitleLink)" class="more-link" :style="{ color: dataInfo1.subTitleColor }"
+            >{{ dataInfo1.subTitle }} &gt;</span
+          >
+        </div>
+        <div class="p-list flex">
+          <div
+            class="p-mini"
+            v-for="(item, index) in dataInfo1.list"
+            :key="index"
+            @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
+          >
+            <img :src="item.image" />
+            <p class="price"><span>¥</span>{{ item.price }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 下方卡片组：采购排行榜 + 重磅新品 -->
+      <div class="bottom-group">
+        <!-- 采购排行榜 (248 * 160) -->
+        <div class="bottom-card card-base">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo4.mainTitleColor }">{{ dataInfo4.mainTitle }}</span>
+            <span @click="onPath(dataInfo4.subTitleLink)" class="tag-gray" :style="{ color: dataInfo4.subTitleColor }">{{ dataInfo4.subTitle }}</span>
+          </div>
+          <div class="card-body-two-cols flex">
+            <div class="col-item" v-for="(item, index) in dataInfo4.list" :key="index" @click="onPath(item.link)">
+              <img :src="item.image" class="mini-prod-img" />
+              <p class="price"><span>¥</span>{{ item.price }}</p>
+              <span class="label-buyer">{{ item.tag }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 重磅新品 (248 * 160) -->
+        <div class="bottom-card card-base">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo5.mainTitleColor }">{{ dataInfo5.mainTitle }}</span>
+            <span @click="onPath(dataInfo5.subTitleLink)" class="tag-gray" :style="{ color: dataInfo5.subTitleColor }">{{ dataInfo5.subTitle }}</span>
+          </div>
+          <div class="card-body-two-cols flex">
+            <div class="col-item" v-for="(item, index) in dataInfo5.list" :key="index" @click="onPath(item.link)">
+              <img :src="item.image" class="mini-prod-img" />
+              <p class="price"><span>¥</span>{{ item.price }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { carouselList, adConfigList } from '@/api/home/index-data';
+import { onPath } from '@/utils/siteConfig';
+const dataInfo1 = ref<any>({});
+const dataInfo2 = ref<any>({});
+const dataInfo3 = ref<any>({});
+const dataInfo4 = ref<any>({});
+const dataInfo5 = ref<any>({});
+const currentIdx = ref<any>(0);
+
+// 轮播图数据：使用自带文字的图片1, 2, 3进行替换
+const bannerSlides = ref<any>([]);
+
+let timer = null;
+const startAuto = () => {
+  timer = setInterval(() => {
+    currentIdx.value = (currentIdx.value + 1) % bannerSlides.value.length;
+  }, 4000);
+};
+const stopAuto = () => {
+  if (timer) clearInterval(timer);
+};
+
+carouselList({}).then((res) => {
+  if (res.code == 200) {
+    bannerSlides.value = res.rows;
+  }
+});
+
+adConfigList({}).then((res) => {
+  if (res.code == 200) {
+    if (res.rows.length > 0) {
+      dataInfo1.value = res.rows[0];
+      dataInfo1.value.list = JSON.parse(res.rows[0].itemsJson);
+    }
+    if (res.rows.length > 1) {
+      dataInfo2.value = res.rows[1];
+      dataInfo2.value.list = JSON.parse(res.rows[1].itemsJson);
+    }
+    if (res.rows.length > 2) {
+      dataInfo3.value = res.rows[2];
+      dataInfo3.value.list = JSON.parse(res.rows[2].itemsJson);
+    }
+    if (res.rows.length > 3) {
+      dataInfo4.value = res.rows[3];
+      dataInfo4.value.list = JSON.parse(res.rows[3].itemsJson);
+    }
+    if (res.rows.length > 4) {
+      dataInfo5.value = res.rows[4];
+      dataInfo5.value.list = JSON.parse(res.rows[4].itemsJson);
+    }
+  }
+});
+
+onMounted(() => startAuto());
+onUnmounted(() => stopAuto());
+</script>
+
+<style scoped>
+.central-ads {
+  display: flex;
+  width: 100% !important;
+  gap: 16px !important; /* 强制锁定左右两列间隙为 16px */
+  box-sizing: border-box;
+}
+
+.ads-col-left {
+  flex: 509;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ads-col-right {
+  flex: 512;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.slider-box {
+  width: 100% !important;
+  height: 160px;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.slider-list {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slider-item {
+  min-width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.slide-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 保证容器变窄时图片始终撑满且不拉伸 */
+  object-position: center; /* 保证图片中间的核心文字始终居中可见 */
+  display: block;
+}
+
+.slider-content {
+  position: absolute;
+  left: 24px;
+  top: 20px;
+  color: #fff;
+  z-index: 5;
+}
+
+/* 轮播图内容居中排版 */
+.slider-content.center-content {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  width: 100%;
+  padding: 0 40px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.slide-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  letter-spacing: 1px;
+}
+
+.center-content .slide-title {
+  font-size: 22px;
+  font-weight: 800;
+  margin-bottom: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.slide-sub-wrap {
+  margin-bottom: 8px;
+}
+
+.slide-subtitle {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 12px;
+  display: inline-block;
+}
+
+.center-content .slide-subtitle {
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(4px);
+  padding: 3px 12px;
+  border-radius: 12px;
+  margin-bottom: 8px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.slide-desc {
+  font-size: 12px;
+  opacity: 0.9;
+  font-weight: 500;
+}
+
+.center-content .slide-desc {
+  font-size: 13px;
+  opacity: 0.95;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.dots {
+  position: absolute;
+  bottom: 12px;
+  left: 24px;
+  display: flex;
+  gap: 6px;
+}
+.dots span {
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 50%;
+  cursor: pointer;
+}
+.dots span.active {
+  width: 14px;
+  background: #fff;
+  border-radius: 3px;
+}
+
+.subsidy-box {
+  width: 100% !important;
+  height: 160px !important;
+  flex-shrink: 0 !important;
+  box-sizing: border-box;
+}
+
+/* 下方卡片组 */
+.bottom-group {
+  display: flex;
+  gap: 16px;
+  height: 160px;
+  width: 100%;
+}
+
+.bottom-card {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+
+/* 卡片基础骨架 */
+.card-base {
+  background: #f7f8fc;
+  border: 1px solid #f7f8fc;
+  border-radius: 8px;
+  padding: 8px 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  height: 100%;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.card-base:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.c-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 22px;
+  margin-bottom: 4px;
+  min-width: 0; /* 允许子元素截断 */
+}
+
+.title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #1a1a1a;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+.more-link {
+  font-size: 14px;
+  color: #b5691a;
+  cursor: pointer;
+  white-space: nowrap !important;
+}
+
+.tag-gray {
+  font-size: 14px;
+  color: #b5691a;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 50% !important; /* 限制最大宽，防止挤折行 */
+}
+
+/* 四列小商品列表 */
+.p-list {
+  display: flex;
+  gap: 12px;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.p-mini {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.p-mini::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 86px;
+  height: 86px;
+  background: rgba(0, 0, 0, 0.03);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.p-mini:hover::after {
+  opacity: 1;
+}
+
+.p-mini img {
+  height: 86px;
+  width: 86px;
+  object-fit: contain;
+  margin-bottom: 4px;
+}
+
+.price {
+  color: #e1251b;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.2;
+}
+.price span {
+  font-size: 12px;
+  margin-right: 1px;
+}
+
+/* 底部卡片两列排列 */
+.card-body-two-cols {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+}
+
+.col-item {
+  width: 108px;
+  height: 120px;
+  margin: 0 4px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  box-sizing: border-box;
+  padding-top: 2px;
+}
+
+.col-item::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 86px;
+  height: 86px;
+  background: rgba(0, 0, 0, 0.03);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.col-item:hover::after {
+  opacity: 1;
+}
+
+.mini-prod-img {
+  height: 86px;
+  width: 86px;
+  object-fit: contain;
+  margin-bottom: 2px;
+}
+
+.mini-brand-logo {
+  height: 86px;
+  width: 86px;
+  object-fit: contain;
+  margin-bottom: 2px;
+}
+
+.bank-logo {
+  height: 86px;
+  width: 86px;
+  object-fit: contain;
+  margin-bottom: 2px;
+}
+
+.col-text {
+  font-size: 14px;
+  font-weight: normal;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 100% !important;
+  margin-top: 4px;
+}
+
+.text-red {
+  color: #fa2c19;
+}
+
+.text-gray {
+  color: #fa2c19;
+}
+
+/* 采购人次标签小贴纸 */
+.label-buyer {
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 86px;
+  height: 19px;
+  line-height: 19px;
+  background: #ffebef;
+  color: #ff0f23;
+  font-size: 12px;
+  text-align: center;
+  border-radius: 0 0 6px 6px;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 100% !important;
+  font-weight: normal;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+/* ==================== 💎 响应式媒体查询适配 ==================== */
+
+/* 1. 优先隐藏副标题，保证主标题在空间变窄时一直全称显示 */
+@media screen and (max-width: 1460px) {
+  .bottom-card .tag-gray {
+    display: none !important;
+  }
+}
+
+/* 2. 在 1540px 以下，隐藏企业精选第4个商品及各卡片模块的第2个子项，彻底防止显示半边商品或品牌 */
+@media screen and (max-width: 1540px) {
+  /* 企业精选隐藏第 4 个商品 */
+  .subsidy-box .p-list .p-mini:nth-child(4) {
+    display: none !important;
+  }
+
+  /* 各卡片模块隐藏第 2 个商品/品牌卡片 */
+  .bottom-card .col-item:nth-child(2) {
+    display: none !important;
+  }
+
+  /* 使得剩下的单个商品/品牌卡片在卡片内部水平居中 */
+  .bottom-card .col-item:nth-child(1) {
+    margin: 0 auto !important;
+  }
+}
+
+/* 3. 在 1280px 以下，企业精选进一步隐藏第 3 个商品 */
+@media screen and (max-width: 1280px) {
+  .subsidy-box .p-list .p-mini:nth-child(3) {
+    display: none !important;
+  }
+}
+</style>

src/views/home/datacomponents/JDCategory.vue

@@ -11,15 +11,13 @@
     <ul class="cate-list">
       <li v-for="(c, i) in displayedCategories" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="activeIndex = i">
         <div class="cate-link-container">
-          <a href="#" class="main-cat-link" :title="c.mainCategory">
-            {{ c.mainCategory.length > 4 ? c.mainCategory.slice(0, 3) + '...' : c.mainCategory }}
-          </a>
+          <span @click="onPath('/search?type=2&topCategoryId=' + c.syncCategoryId)" class="main-cat-link">
+            {{ c.name.length > 4 ? c.name.slice(0, 3) + '...' : c.name }}</span
+          >
           <div class="sub-cats-wrapper">
-            <template v-for="(sub, subIdx) in c.subCategories.slice(0, 3)" :key="subIdx">
-              <span class="sub-divider" v-if="subIdx > 0">/</span>
-              <a href="#" class="sub-cat-link" :title="sub.title">
-                {{ sub.title }}
-              </a>
+            <template v-for="(sub, subIdx) in c.subMenus.slice(0, 3)" :key="subIdx">
+              <span class="sub-divider" v-if="Number(subIdx) > 0">/</span>
+              <span @click="onPath('/search?type=2&mediumCategoryId=' + sub.syncCategoryId)" class="sub-cat-link">{{ sub.name }}</span>
             </template>
           </div>
         </div>
@@ -30,29 +28,29 @@
     <div class="category-pop" v-show="activeIndex !== -1 && displayedCategories[activeIndex]">
       <div class="pop-header flex-between" v-if="displayedCategories[activeIndex]">
         <div class="pop-tags flex">
-          <span v-for="(tag, tIdx) in displayedCategories[activeIndex].tags || []" :key="tIdx" class="p-tag">
-            {{ tag }}
+          <span v-for="(tag, tIdx) in displayedCategories[activeIndex].tags || []" :key="tIdx" class="p-tag" @click="onPath(tag.link)">
+            {{ tag.name }}
           </span>
         </div>
         <div class="pop-logo">
-          <span class="red-t">优易</span
-          ><span class="black-t">{{
-            displayedCategories[activeIndex].logoTitle ? displayedCategories[activeIndex].logoTitle.replace('优易', '') : ''
-          }}</span
+          <span class="red-t">{{ displayedCategories[activeIndex].panelData?.mainTitle }}</span
+          ><span class="black-t">{{ displayedCategories[activeIndex].panelData?.subTitle }}</span
           ><br />
-          <span class="small-t">{{ displayedCategories[activeIndex].logoDesc }}</span>
+          <span class="small-t" v-for="(item, index) in displayedCategories[activeIndex].panelData?.notes" :key="index" @click="onPath(item.link)"
+            >{{ index != 0 ? ' | ' : '' }}{{ item.name }}</span
+          >
         </div>
       </div>
 
       <div class="pop-body">
-        <dl v-for="(sub, sIdx) in displayedCategories[activeIndex]?.subCategories || []" :key="sIdx" class="sub-dl flex">
+        <dl v-for="(sub, sIdx) in displayedCategories[activeIndex]?.subMenus || []" :key="sIdx" class="sub-dl flex">
           <dt>
-            <a href="#" class="sub-dt-link">{{ sub.title }}</a>
+            <span @click="onPath('/search?type=2&mediumCategoryId=' + sub.syncCategoryId)" class="sub-dt-link">{{ sub.name }}</span>
           </dt>
           <dd>
-            <a v-for="(item, iIdx) in sub.items" :key="iIdx" href="#">
-              {{ item }}
-            </a>
+            <span v-for="(item, iIdx) in sub.children" :key="iIdx" @click="onPath('/search?type=2&bottomCategoryId=' + item.syncCategoryId)">
+              {{ item.name }}
+            </span>
           </dd>
         </dl>
       </div>
@@ -62,397 +60,21 @@
 
 <script setup lang="ts">
 import { categoryMainList } from '@/api/home/index-data';
+import { onPath } from '@/utils/siteConfig';
+const categories = ref<any>([]);
 
 categoryMainList({ status: 1 }).then((res) => {
   if (res.code == 200) {
+    document.documentElement.style.setProperty('--hover-data2', res.rows.length > 0 ? res.rows[0].categoryThemeColor || '#E7000B' : '#E7000B');
+    categories.value = res.rows;
   }
 });
 
-const activeIndex = ref(-1);
+const activeIndex = ref<any>(-1);
 const isHovered = ref(false);
 const displayedCategories = computed(() => {
-  return isHovered.value ? categories : categories.slice(0, 11);
+  return isHovered.value ? categories.value : categories.value.slice(0, 11);
 });
-
-// 线条风格 SVG base64 图标 (保留做潜在备用)
-const iconPC =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjIiIHk9IjQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgcng9IjIiLz48cGF0aCBkPSJNOCAyMmgybS0yIDBsNC00bTQgNGgybS0yIDBsLTQtNCIvPjwvc3ZnPg==';
-const iconAC =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjIiIHk9IjYiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIgcng9IjIiLz48cGF0aCBkPSJNMiAxMGgyMG0tMTYgNGg0Ii8+PC9zdmc+';
-const iconPrint =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik02IDlWMmgtNHY3bTggMEg0djExaDE2VjltLTYgMTB2LTVoOHY1Ii8+PC9zdmc+';
-const iconTea =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik00IDhoMTJ2OGExIDEgMCAwIDEtMSAxSDVhMSAxIDAgMCAxLTEtMVY4em0xMiAyYTQgNCAwIDAgMSAwIDguLTJtLTItMTh2NG0tNCAwdjQiLz48L3N2Zz4=';
-const iconPhone =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjUiIHk9IjIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyMCIgcng9IjIiLz48cGF0aCBkPSJNMTIgMThoLjAxIi8+PC9zdmc+';
-const iconMask =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAyMmM0LjQgMCA4LTMuNiA4LThzLTMuNi04LTgtOC04IDMuNi04IDhzMy42IDggOCA4em0wIDB2LThtLTQgNGg4Ii8+PC9zdmc+';
-const iconMed =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiA0djE2bS04LThoMTZtLTQgNGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSA0IDB6Ii8+PC9zdmc+';
-const iconCar =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xOSA4bDEgNG0tMTYgMGwxLTRoMTJtLTIgMmgybTEgMTB2LTHLTMvN20xMCAwaDRtLTYgUXg0bTE0IDBoMnY0SDZ2LTQiLz4=';
-const iconTent =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAzTDIgMjFoMjBtLTEwLTE4bDkgMTguNW0tMTggMGg4Ii8+PC9zdmc+';
-
-const categories = [
-  {
-    mainCategory: '电脑、数码',
-    subCategoriesText: '外设产品 / 办公设备',
-    name: '办公电脑 / 办公打印 / 电脑组件',
-    icon: iconPC,
-    logoTitle: '优易3C数码',
-    logoDesc: '电脑 | 数码 | 手机 | 图书 | 文具',
-    tags: ['设备固资', '职场环境', '3C数码电子城'],
-    subCategories: [
-      {
-        title: '办公电脑',
-        items: [
-          '台式机',
-          '商用台式机',
-          '品牌一体机',
-          '商用一体机',
-          '游戏笔记本',
-          '轻薄笔记本',
-          '设计师本',
-          '移动工作站',
-          '塔式工作站',
-          '平板电脑',
-          'iPad Pro',
-          '安卓平板',
-          '电子书阅读器',
-          '阅卷机',
-          '绘图仪',
-          '手写绘图板',
-          '触控笔',
-          '笔记本电池',
-          '电脑包',
-          '清洁套装',
-          '防尘罩',
-          '键盘保护膜'
-        ]
-      },
-      {
-        title: '办公打印',
-        items: [
-          '多功能复合机',
-          '激光复合机',
-          '激光打印机',
-          '商用喷墨机',
-          '专业针式打印',
-          '条码打印机',
-          '热敏打印机',
-          '3D打印机',
-          '扫描仪',
-          '高速扫描枪',
-          '大型碎纸机',
-          '保密碎纸机',
-          '自动装订机',
-          '胶装机',
-          '冷热塑封机',
-          '切纸刀',
-          '高拍仪',
-          '便携投影',
-          '传真设备'
-        ]
-      },
-      {
-        title: '电脑组件',
-        items: [
-          '显示器',
-          '4K高刷显示器',
-          '曲面屏显示器',
-          'SSD固态硬盘',
-          'NVMe高速SSD',
-          '机械硬盘',
-          '企业级硬盘',
-          '显卡',
-          '游戏显卡',
-          '专业计算显卡',
-          '内存条',
-          'DDR5内存',
-          '主板',
-          '商用CPU',
-          '水冷散热器',
-          '风冷散热器',
-          '电脑机箱',
-          '商用电源',
-          '外置光驱',
-          '蓝光刻录机'
-        ]
-      },
-      {
-        title: '电脑外设',
-        items: ['机柜', '键盘', '扩展坞', '手柄方向盘', '鼠标', '鼠标垫', '移动固态硬盘', '移动机械硬盘', '硬盘盒', '游戏耳机', '游戏机', '游戏周边']
-      },
-      {
-        title: '智能会议',
-        items: [
-          '直播设备',
-          'U盘',
-          'UPS电源',
-          '办公大屏',
-          '投影机',
-          '会议平板',
-          '会议摄像头',
-          '音响',
-          '会议音响',
-          '麦克风',
-          '路由器',
-          '网络机顶盒',
-          '交换机',
-          '网络存储',
-          '网线'
-        ]
-      },
-      { title: 'IT运维', items: ['交换机', '路由器', '网络机顶盒', '网络存储', '网卡', '网线', '网络配件', '网络仪器仪表', '线缆', '普通网络设备'] },
-      { title: '核心文具', items: ['钢笔', '签字笔', '白板笔', '记号笔', '圆珠笔', '铅笔', '本册', '计算器', '剪刀', '美工刀', '订书机', '回形针'] },
-      { title: '会议大屏', items: ['LED显示屏', '液晶拼接屏', '智能白板', '激光投影仪', '电子沙盘', '会议中控', '音频处理器', '数字调音台'] },
-      { title: '网络安防', items: ['红外摄像机', '网络录像机', '智能门禁', '防盗报警', '电子围栏', '巡更系统', '对讲机', '安检门'] },
-      { title: '服务器区', items: ['刀片服务器', '机架服务器', '塔式服务器', '云服务器', '群晖网络存储', '威联通NAS', '数据备份柜'] },
-      { title: '办公家具', items: ['网椅办公椅', '皮质老板椅', '主管桌椅', '会议折叠桌', '钢制卷门柜', '储物架', '接待台沙发'] },
-      { title: '福利茶歇', items: ['手冲挂耳咖啡', '大红袍茶叶', '坚果尊享礼盒', '小黑麦面包', '纯净水', '苏打水', '无糖气泡水', '盒装牛奶'] },
-      { title: '电力电工', items: ['防过载插排', '智能电能表', '双绞网线', '网络测线仪', '压线钳', '焊锡丝', '数显万用表'] },
-      { title: '后勤保障', items: ['手推扫地机', '工业大干湿吸尘器', '高压冲洗枪', '大容量冷藏柜', '商用电微波炉', '智能商用直饮机'] },
-      { title: '快递包材', items: ['三层特硬快递箱', '防震气泡膜', '高粘度封箱带', '热敏快递面单', '强力封签', '仓储缠绕膜'] },
-      { title: '工业测绘', items: ['高精度激光测距仪', '红外热像仪', '数字噪音声级计', '手持风速仪', '甲醛测试仪', '测厚仪'] },
-      { title: '清洁卫浴', items: ['免洗消毒液', '超浓缩洁厕灵', '环保垃圾袋', '乳胶耐酸碱手套', '静电除尘纸', '长柄拖把'] },
-      { title: '奢品数码', items: ['单反相机', '无人机航拍器', '云台稳定器', '全景相机', '运动DV', '碳纤维三脚架', '补光灯'] }
-    ]
-  },
-  // {
-  //   mainCategory: '家用电器',
-  //   subCategoriesText: '个护健康 / 生活电器',
-  //   name: '室温调节 / 冷藏保鲜 / 办公家具',
-  //   icon: iconAC,
-  //   logoTitle: '优易家电家居',
-  //   logoDesc: '空调 | 冰箱 | 洗衣机 | 沙发 | 办公桌',
-  //   tags: ['清凉一夏', '企业家具采购', '保鲜达人'],
-  //   subCategories: [
-  //     { title: '室温调节', items: ['挂壁式空调', '柜式空调', '中央空调', '空气净化器', '电风扇', '冷风扇', '除湿机', '加湿机'] },
-  //     { title: '冷藏保鲜', items: ['单门冰箱', '双门冰箱', '多门冰箱', '立式冷柜', '卧式冷柜', '车载冰箱', '制冰机'] },
-  //     { title: '办公家具', items: ['办公椅', '老板椅', '会议桌', '办公桌', '文件柜', '前台接待台', '屏风工位', '折叠椅', '沙发', '茶几'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '运动户外',
-  //   subCategoriesText: '户外装备 / 健身训练',
-  //   name: '户外装备 / 体育用品 / 工装工服',
-  //   icon: iconTent,
-  //   logoTitle: '优易运动户外',
-  //   logoDesc: '帐篷 | 睡袋 | 羽毛球 | 跑步机 | 定制工装',
-  //   tags: ['户外团建', '企业运动会', '统一形象'],
-  //   subCategories: [
-  //     { title: '户外装备', items: ['露营帐篷', '户外折叠椅', '睡袋', '登山杖', '烧烤炉', '户外电源', '保冷箱'] },
-  //     { title: '体育用品', items: ['羽毛球拍', '乒乓球拍', '篮球', '足球', '跑步机', '动感单车', '哑铃', '运动手环'] },
-  //     { title: '工装定制', items: ['企业T恤定制', '冲锋衣工装', '西服职业装', '劳保防护服', '棒球帽定制'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '厨具',
-  //   subCategoriesText: '烹饪锅具 / 刀剪砧板',
-  //   name: '商用家电 / 空调冰洗 / 采购',
-  //   icon: iconAC,
-  //   logoTitle: '优易商用家电',
-  //   logoDesc: '商用冷柜 | 展示柜 | 商用开水器 | 烘干机',
-  //   tags: ['职场设备', '后勤保障', '商用批采'],
-  //   subCategories: [
-  //     { title: '商用设备', items: ['商用制冰机', '立式展示冷柜', '商用开水器', '大容量净水器', '商用微波炉'] },
-  //     { title: '后勤家电', items: ['大功率吸尘器', '商用洗烘一体机', '商用除湿机', '红酒柜', '消毒柜'] },
-  //     { title: '采购专区', items: ['大屏商用电视', '工程投影机', '新风换气系统', '商用集成灶'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '生活日用',
-  //   subCategoriesText: '日用百货 / 净化除味',
-  //   name: '茶歇福利 / 个护清洁 / 日用福利',
-  //   icon: iconTea,
-  //   logoTitle: '优易企业福利',
-  //   logoDesc: '咖啡 | 茶叶 | 零食 | 卫生纸 | 洗发水',
-  //   tags: ['下午茶', '员工关怀', '节日福利'],
-  //   subCategories: [
-  //     {
-  //       title: '茶歇饮品',
-  //       items: ['挂耳咖啡', '速溶咖啡', '咖啡豆', '红茶', '绿茶', '乌龙茶', '花草茶', '矿泉水', '苏打水', '果汁', '可乐', '牛奶']
-  //     },
-  //     { title: '休闲零食', items: ['坚果礼盒', '饼干', '薯片', '肉干', '巧克力', '糖果', '小面包', '蜜饯'] },
-  //     { title: '个护日用', items: ['抽纸', '卷纸', '湿纸巾', '洗发水', '沐浴露', '牙膏', '牙刷', '洗手液', '毛巾', '洗衣液'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '家居清洁',
-  //   subCategoriesText: '清洁纸品 / 清洁工具',
-  //   name: '打印耗材 / 办公文具 / 清洁用品',
-  //   icon: iconPrint,
-  //   logoTitle: '优易办公文仪',
-  //   logoDesc: '墨盒 | 硒鼓 | 纸张 | 拖把 | 洗手液',
-  //   tags: ['高效办公', '企业大扫除', '文具批采'],
-  //   subCategories: [
-  //     { title: '打印耗材', items: ['硒鼓', '墨盒', '色带', '墨水', '碳粉', '打印纸', '相片纸', '复印纸', '收银纸'] },
-  //     { title: '办公文具', items: ['中性笔', '白板笔', '记号笔', '笔记本', '文件夹', '计算器', '碎纸机', '装订机', '胶带', '别针'] },
-  //     { title: '清洁用品', items: ['垃圾桶', '垃圾袋', '洗手液', '消毒液', '洁厕灵', '洗洁精', '抹布', '拖把', '扫帚', '空气清新剂'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '工业品',
-  //   subCategoriesText: '安防用品 / 工业包装',
-  //   name: '个人防护 / 清洁用品 / 电动工具',
-  //   icon: iconMask,
-  //   logoTitle: '优易工业劳保',
-  //   logoDesc: '口罩 | 手套 | 安全帽 | 电钻 | 扳手',
-  //   tags: ['安全施工', '生产防护', '维修必备'],
-  //   subCategories: [
-  //     { title: '个人防护', items: ['医用口罩', 'N95口罩', '防护手套', '安全帽', '工作服', '劳保鞋', '护目镜', '耳塞', '安全带'] },
-  //     { title: '清洁用品', items: ['工业吸尘器', '洗地机', '高压水枪', '垃圾分类桶', '工业擦拭纸', '洗手膏'] },
-  //     { title: '电动工具', items: ['冲击钻', '手电钻', '角磨机', '热风枪', '电锤', '电动扳手', '电烙铁', '测量仪器'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '服饰内衣',
-  //   subCategoriesText: '服饰配件',
-  //   name: '包装耗材 / 纸箱胶带 / 批采',
-  //   icon: iconTea,
-  //   logoTitle: '优易包装物料',
-  //   logoDesc: '气泡膜 | 快递袋 | 封箱胶带 | 定制纸箱',
-  //   tags: ['仓储物流', '企业发货', '耗材批采'],
-  //   subCategories: [
-  //     { title: '包装物料', items: ['三层纸箱', '五层特硬纸箱', '气泡膜', '珍珠棉', '缠绕膜', '泡沫板', '封箱胶带', '双面胶'] },
-  //     { title: '快递包装', items: ['PE快递袋', '气泡信封袋', '热敏面单纸', '封签', '扎带', '防静电袋'] },
-  //     { title: '批采物料', items: ['大卷胶带', '打包带', '打包机', '拉伸膜缠绕机', '称重电子秤'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '个人护理',
-  //   subCategoriesText: '洗发护发 / 美发造型',
-  //   name: '电子数码 / 茗茶酒水 / 美妆护肤',
-  //   icon: iconPhone,
-  //   logoTitle: '优易数码奢品',
-  //   logoDesc: '手机 | 相机 | 茅台 | 礼盒 | 雅诗兰黛',
-  //   tags: ['商务送礼', '高端数码', '员工体面'],
-  //   subCategories: [
-  //     { title: '智能数码', items: ['智能手机', '智能手表', '无线耳机', '数码相机', '单反镜头', '投影仪', '智能音箱', 'VR眼镜', '充电宝'] },
-  //     { title: '名酒茗茶', items: ['飞天茅台', '五粮液', '国窖1573', '奔富红酒', '西湖龙井', '大红袍', '普洱茶饼', '普洱熟茶', '铁观音'] },
-  //     { title: '高端美妆', items: ['雅诗兰黛', '兰蔻', 'SK-II', '香奈儿', '迪奥', '防晒霜', '补水喷雾', '男士洁面'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '居家布艺',
-  //   subCategoriesText: '抱枕/靠垫 / 桌椅套件',
-  //   name: '汽车用品 / 车辆养护 / 整车采购',
-  //   icon: iconCar,
-  //   logoTitle: '优易汽车商城',
-  //   logoDesc: '行车记录仪 | 机油 | 轮胎 | 新能源车',
-  //   tags: ['企业车队', '车辆保值', '出行保障'],
-  //   subCategories: [
-  //     { title: '汽车电器', items: ['行车记录仪', '车载充气泵', '车载吸尘器', '车载蓝牙', '车载净化器', '倒车雷达'] },
-  //     { title: '车辆养护', items: ['合成机油', '防冻液', '玻璃水', '火花塞', '雨刮片', '车载香水', '洗车液', '打蜡抛光'] },
-  //     { title: '整车采购', items: ['商务MPV', '企业公务车', '新能源物流车', '员工代步车', '充电桩'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '床上用品',
-  //   subCategoriesText: '床单/被套/枕套 / 三件套',
-  //   name: '养生茶饮 / 滋补礼盒 / 营养保健',
-  //   icon: iconMed,
-  //   logoTitle: '优易健康养生',
-  //   logoDesc: '枸杞 | 人参 | 燕窝 | 维生素 | 血压计',
-  //   tags: ['健康员工', '商务滋补', '关爱常在'],
-  //   subCategories: [
-  //     { title: '养生茶饮', items: ['黑枸杞', '胖大海', '菊花茶', '红枣片', '金银花', '养生壶', '保温杯'] },
-  //     { title: '滋补礼盒', items: ['长白山人参', '即食燕窝', '冬虫夏草', '阿胶糕', '西洋参片', '石斛', '鹿茸'] },
-  //     { title: '营养保健', items: ['复合维生素', '钙片', '深海鱼油', '褪黑素', '益生菌', '蛋白粉', '血压计', '血糖仪'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '手机通讯',
-  //   name: '智能手机 / 拍照手机 / 游戏手机',
-  //   icon: iconPhone,
-  //   logoTitle: '优易手机通讯',
-  //   logoDesc: 'Apple | 华为 | 小米 | 手机配件',
-  //   tags: ['智能生活', '商务机型', '贴心配件'],
-  //   subCategories: [
-  //     { title: '手机', items: ['Apple', '华为', '小米', '荣耀', 'OPPO', 'vivo', '一加'] },
-  //     { title: '手机配件', items: ['手机壳', '贴膜', '充电器', '数据线', '移动电源', '车载配件'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '收纳用品',
-  //   name: '收纳箱 / 旅行收纳 / 桌面收纳',
-  //   icon: iconCar,
-  //   logoTitle: '优易居家收纳',
-  //   logoDesc: '收纳箱 | 整理盒 | 旅行包 | 置物架',
-  //   tags: ['整洁居家', '轻松旅行', '有序桌面'],
-  //   subCategories: [
-  //     { title: '收纳箱', items: ['塑料收纳箱', '布艺收纳盒', '整理箱', '内衣收纳', '鞋盒'] },
-  //     { title: '旅行收纳', items: ['旅行洗漱包', '压缩袋', '收纳袋', '行李箱配件'] },
-  //     { title: '桌面收纳', items: ['桌面置物架', '化妆品收纳', '笔筒', '钥匙收纳'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '家居饰品',
-  //   name: '节庆用品 / 婚庆用品 / 装饰摆件',
-  //   icon: iconTent,
-  //   logoTitle: '优易家居饰品',
-  //   logoDesc: '红灯笼 | 气球 | 花瓶 | 摆件',
-  //   tags: ['欢度佳节', '温馨婚庆', '雅致摆件'],
-  //   subCategories: [
-  //     { title: '节庆用品', items: ['红灯笼', '春联', '窗花', '气球', '拉花', '彩灯'] },
-  //     { title: '婚庆用品', items: ['喜贴', '红包', '拉花', '喜字', '婚庆气球'] },
-  //     { title: '装饰摆件', items: ['花瓶', '花艺', '创意摆件', '沙漏', '相框'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '家具',
-  //   name: '柜类 / 沙发类 / 椅类',
-  //   icon: iconPC,
-  //   logoTitle: '优易品质家具',
-  //   logoDesc: '衣柜 | 沙发 | 办公椅 | 电脑桌',
-  //   tags: ['温馨卧室', '舒适客厅', '高效办公'],
-  //   subCategories: [
-  //     { title: '柜类', items: ['衣柜', '书柜', '鞋柜', '电视柜', '斗柜', '床头柜'] },
-  //     { title: '沙发类', items: ['真皮沙发', '布艺沙发', '单人沙发', '折叠沙发床'] },
-  //     { title: '椅类', items: ['办公椅', '电脑椅', '餐椅', '休闲椅', '折叠椅', '凳子'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '文教办公',
-  //   name: '装订文具 / 画具画材 / 本册纸张',
-  //   icon: iconPrint,
-  //   logoTitle: '优易文教办公',
-  //   logoDesc: '订书机 | 颜料 | 笔记本 | 草稿纸',
-  //   tags: ['高效文印', '艺术画材', '精美本册'],
-  //   subCategories: [
-  //     { title: '装订文具', items: ['订书机', '打孔器', '回形针', '长尾夹', '装订胶圈'] },
-  //     { title: '画具画材', items: ['画笔', '颜料', '画架', '画纸', '调色盘', '调色杯'] },
-  //     { title: '本册纸张', items: ['笔记本', '便签纸', '复印纸', '草稿纸', '手账本'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '水饮冲调',
-  //   name: '饮料 / 饮用水 / 冲调谷物',
-  //   icon: iconTea,
-  //   logoTitle: '优易水饮冲调',
-  //   logoDesc: '果汁 | 矿泉水 | 麦片 | 芝麻糊',
-  //   tags: ['清凉饮料', '纯净好水', '营养谷物'],
-  //   subCategories: [
-  //     { title: '饮料', items: ['碳酸饮料', '果汁', '茶饮料', '功能饮料', '苏打水'] },
-  //     { title: '饮用水', items: ['矿泉水', '纯净水', '苏打水', '桶装水'] },
-  //     { title: '冲调谷物', items: ['燕麦片', '芝麻糊', '藕粉', '核桃粉', '麦片'] }
-  //   ]
-  // },
-  // {
-  //   mainCategory: '休闲食品',
-  //   name: '海味零食 / 饼干 / 膨化食品',
-  //   icon: iconTea,
-  //   logoTitle: '优易休闲食品',
-  //   logoDesc: '海苔 | 曲奇饼干 | 薯片 | 爆米花',
-  //   tags: ['深海美味', '香脆饼干', '美味膨化'],
-  //   subCategories: [
-  //     { title: '海味零食', items: ['鱿鱼丝', '海苔', '鱼干', '小鱼仔', '蟹柳'] },
-  //     { title: '饼干', items: ['曲奇', '夹心饼干', '苏打饼干', '威化饼干', '蛋卷'] },
-  //     { title: '膨化食品', items: ['薯片', '虾条', '爆米花', '锅巴', '爆豆'] }
-  //   ]
-  // }
-];
 </script>
 
 <style scoped>
@@ -465,7 +87,9 @@ const categories = [
 }
 
 .cate-menu.is-hovered {
-  height: 610px;
+  min-height: 400px;
+  height: auto;
+  /* height: 610px; */
 }
 
 .cate-list {
@@ -473,16 +97,18 @@ const categories = [
   background: #f7f8fc;
   border: 1px solid #f7f8fc;
   height: 100%;
+  min-height: 400px;
   box-sizing: border-box;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   overflow: hidden;
 }
 
 .cate-item {
-  flex: 1;
+  height: 35px;
+  /* flex: 1; */
   padding: 0 12px;
   cursor: pointer;
   display: flex;
@@ -518,7 +144,7 @@ const categories = [
 }
 
 .main-cat-link:hover {
-  color: #e1251b !important;
+  color: var(--hover-data2) !important;
   text-decoration: underline;
 }
 
@@ -540,7 +166,7 @@ const categories = [
 }
 
 .sub-cat-link:hover {
-  color: #e1251b !important;
+  color: var(--hover-data2) !important;
   text-decoration: underline;
 }
 
@@ -558,7 +184,7 @@ const categories = [
   width: 950px;
   height: 100% !important;
   background: #fff;
-  border: 1px solid #e1251b;
+  border: 1px solid var(--hover-data2);
   border-radius: 12px;
   box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.12);
   padding: 20px 24px !important;
@@ -586,7 +212,7 @@ const categories = [
   cursor: pointer;
 }
 .p-tag:hover {
-  background: #e1251b;
+  background: var(--hover-data2);
   color: #fff;
 }
 
@@ -595,7 +221,7 @@ const categories = [
   line-height: 1.2;
 }
 .red-t {
-  color: #e1251b;
+  color: var(--hover-data2);
   font-size: 18px;
   font-weight: 900;
 }
@@ -606,11 +232,12 @@ const categories = [
 }
 .small-t {
   font-size: 12px !important;
-  color: #e1251b;
+  color: var(--hover-data2);
   letter-spacing: 1px;
   font-weight: 500 !important;
   margin-top: 8px !important;
   display: inline-block !important;
+  cursor: pointer;
 }
 
 /* 主体列表区域 (支持独立优雅的上下滚动) */
@@ -661,7 +288,7 @@ const categories = [
   display: block;
 }
 .sub-dt-link:hover {
-  color: #e1251b !important;
+  color: var(--hover-data2) !important;
 }
 .sub-dl dd {
   flex: 1;
@@ -669,13 +296,14 @@ const categories = [
   flex-wrap: wrap;
   gap: 0 16px;
 }
-.sub-dl dd a {
+.sub-dl dd span {
   font-size: 12px;
   color: #8c8c8c;
   text-decoration: none;
   white-space: nowrap;
+  cursor: pointer;
 }
-.sub-dl dd a:hover {
-  color: #e1251b;
+.sub-dl dd span:hover {
+  color: var(--hover-data2);
 }
 </style>

src/views/home/datacomponents/JDFooter.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="jd-footer">
+    <!-- 1. 多快好省 Slogans -->
+    <div class="slogans-wrap">
+      <div class="w slogans">
+        <div class="slogan-item">
+          <div class="s-icon">
+            <svg viewBox="0 0 40 46" width="36" height="36" class="hex-svg">
+               <polygon points="20,2 38,12 38,34 20,44 2,34 2,12" fill="none" stroke="#E1251B" stroke-width="3"></polygon>
+            </svg>
+            <span class="s-txt">多</span>
+          </div>
+          <span class="s-desc">品类齐全，轻松购物</span>
+        </div>
+        <div class="slogan-item">
+          <div class="s-icon">
+            <svg viewBox="0 0 40 46" width="36" height="36" class="hex-svg">
+               <polygon points="20,2 38,12 38,34 20,44 2,34 2,12" fill="none" stroke="#E1251B" stroke-width="3"></polygon>
+            </svg>
+            <span class="s-txt">快</span>
+          </div>
+          <span class="s-desc">多仓直发，极速配送</span>
+        </div>
+        <div class="slogan-item">
+          <div class="s-icon">
+            <svg viewBox="0 0 40 46" width="36" height="36" class="hex-svg">
+               <polygon points="20,2 38,12 38,34 20,44 2,34 2,12" fill="none" stroke="#E1251B" stroke-width="3"></polygon>
+            </svg>
+            <span class="s-txt">好</span>
+          </div>
+          <span class="s-desc">正品行货，精致服务</span>
+        </div>
+        <div class="slogan-item">
+          <div class="s-icon">
+            <svg viewBox="0 0 40 46" width="36" height="36" class="hex-svg">
+               <polygon points="20,2 38,12 38,34 20,44 2,34 2,12" fill="none" stroke="#E1251B" stroke-width="3"></polygon>
+            </svg>
+            <span class="s-txt">省</span>
+          </div>
+          <span class="s-desc">天天低价，畅选无忧</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 2. 帮助中心目录 -->
+    <div class="help-links-wrap">
+      <div class="w help-links">
+        <dl>
+          <dt>购物指南</dt>
+          <dd><a href="#">购物流程</a></dd>
+          <dd><a href="#">会员介绍</a></dd>
+          <dd><a href="#">生活旅行/团购</a></dd>
+          <dd><a href="#">常见问题</a></dd>
+          <dd><a href="#">大家电</a></dd>
+          <dd><a href="#">联系客服</a></dd>
+        </dl>
+        <dl>
+          <dt>配送方式</dt>
+          <dd><a href="#">上门自提</a></dd>
+          <dd><a href="#">211限时达</a></dd>
+          <dd><a href="#">配送服务查询</a></dd>
+          <dd><a href="#">配送费收取标准</a></dd>
+        </dl>
+        <dl>
+          <dt>支付方式</dt>
+          <dd><a href="#">货到付款</a></dd>
+          <dd><a href="#">在线支付</a></dd>
+          <dd><a href="#">分期付款</a></dd>
+          <dd><a href="#">公司转账</a></dd>
+        </dl>
+        <dl>
+          <dt>售后服务</dt>
+          <dd><a href="#">售后政策</a></dd>
+          <dd><a href="#">价格保护</a></dd>
+          <dd><a href="#">退款说明</a></dd>
+          <dd><a href="#">返修/退换货</a></dd>
+          <dd><a href="#">取消订单</a></dd>
+        </dl>
+        <dl>
+          <dt>特色服务</dt>
+          <dd><a href="#">夺宝岛</a></dd>
+          <dd><a href="#">DIY装机</a></dd>
+          <dd><a href="#">延保服务</a></dd>
+          <dd><a href="#">优易E卡</a></dd>
+          <dd><a href="#">优易通信</a></dd>
+          <dd><a href="#">优易智能</a></dd>
+        </dl>
+      </div>
+    </div>
+
+    <!-- 3. 版权信息与底部认证 -->
+    <div class="w copyright">
+        <p class="links">
+          <a href="#">关于我们</a><span class="sep">|</span>
+          <a href="#">联系我们</a><span class="sep">|</span>
+          <a href="#">联系客服</a><span class="sep">|</span>
+          <a href="#">合作招商</a><span class="sep">|</span>
+          <a href="#">商家帮助</a><span class="sep">|</span>
+          <a href="#">营销中心</a><span class="sep">|</span>
+          <a href="#">手机优易</a><span class="sep">|</span>
+          <a href="#">友情链接</a><span class="sep">|</span>
+          <a href="#">销售联盟</a><span class="sep">|</span>
+          <a href="#">优易社区</a><span class="sep">|</span>
+          <a href="#">风险监测</a><span class="sep">|</span>
+          <a href="#">隐私政策</a><span class="sep">|</span>
+          <a href="#">优易公益</a><span class="sep">|</span>
+          <a href="#">Media & IR</a>
+        </p>
+        <p class="info-text">
+          京公网安备 11000002000088号 <span class="sep">|</span> 京ICP备11041704号 <span class="sep">|</span> ICP <span class="sep">|</span> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 <span class="sep">|</span> 新出发京零 字第大120007号
+        </p>
+        <p class="info-text">
+          互联网出版许可证编号新出网证(京)字150号 <span class="sep">|</span> 出版物经营许可证 <span class="sep">|</span> 网络文化经营许可证京网文[2020]6112-1201号 <span class="sep">|</span> 违法和不良信息举报电话：4006561155
+        </p>
+        <p class="info-text">
+          Copyright © 2004 - 2026 优易UE.COM 版权所有 <span class="sep">|</span> 消费者维权热线：4006067733 <span class="sep">|</span> 经营证照 <span class="sep">|</span> (京)网械平台备字(2018)第00003号 <span class="sep">|</span> 营业执照 <span class="sep">|</span> 增值电信业务经营许可证
+        </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.jd-footer {
+  background: #f4f4f4;
+  padding-top: 30px;
+  padding-bottom: 50px;
+  border-top: 1px solid #e5e5e5;
+  color: #666;
+}
+
+/* slogans */
+.slogans-wrap {
+  border-bottom: 1px solid #dedede;
+}
+.slogans {
+  display: flex;
+  justify-content: center;
+  gap: 120px;
+  padding: 30px 0;
+}
+.slogan-item {
+  display: flex;
+  align-items: center;
+}
+.s-icon {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+.hex-svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.s-txt {
+  position: relative;
+  z-index: 2;
+  font-size: 18px;
+  font-weight: 800;
+  color: #E1251B;
+}
+.s-desc {
+  font-size: 18px;
+  font-weight: 700;
+  color: #333;
+}
+
+/* help links */
+.help-links-wrap {
+  border-bottom: 1px solid #dedede;
+}
+.help-links {
+  display: flex;
+  justify-content: center;
+  gap: 120px;
+  padding: 20px 0 30px 0;
+}
+.help-links dl {
+  width: 140px;
+}
+.help-links dt {
+  font-size: 14px;
+  font-weight: bold;
+  color: #666;
+  margin-bottom: 12px;
+}
+.help-links dd {
+  margin: 0;
+  padding: 0;
+}
+.help-links dd a {
+  color: #666;
+  font-size: 12px;
+  line-height: 24px;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+.help-links dd a:hover {
+  color: #E1251B;
+}
+
+/* copyright */
+.copyright {
+  text-align: center;
+  padding-top: 20px;
+}
+.copyright .links {
+  margin-bottom: 10px;
+}
+.copyright .links a {
+  color: #666;
+  font-size: 12px;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+.copyright .links a:hover {
+  color: #E1251B;
+}
+.copyright .sep {
+  margin: 0 10px;
+  color: #ccc;
+  font-size: 12px;
+}
+.copyright .info-text {
+  font-size: 12px;
+  color: #999;
+  line-height: 24px;
+  margin: 0;
+}
+</style>

src/views/home/datacomponents/JDHeader.vue

@@ -0,0 +1,1056 @@
+<template>
+  <div class="jd-header">
+    <!-- 1. 始终吸顶的 44px 纯白背景顶部窄条 (无边框线，字号调大) -->
+    <div class="header-top">
+      <div class="top-inner flex-between w">
+        <!-- 左侧区域：北京定位、部门/企业选择 (严格对齐图2左侧) -->
+        <div class="top-left flex">
+          <div class="loc-wrap">
+            <svg class="loc-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
+              ></path>
+            </svg>
+            <span>武汉</span>
+          </div>
+
+          <!-- 登录者公司下拉 (图2高奢重构) -->
+          <div class="nav-item has-dropdown company-dropdown">
+            <span class="dept-text">您好！{{ userInfo.companyName || '' }}</span>
+            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <!-- 👑 尊贵企业公司与用户信息面板 (图2大气重构) -->
+            <div class="dropdown-menu company-menu">
+              <div class="user-info-card flex">
+                <!-- 左侧头像与会员徽章 -->
+                <div class="avatar-area flex-column align-center">
+                  <div class="avatar-circle">
+                    <!-- 使用精致的 Joy 狗头像，若图片加载失败则自动fallback -->
+                    <img src="@/assets/images/pcdiy/logo2.png" alt="" class="avatar-img" />
+                  </div>
+                  <span class="member-gold-badge">企业会员</span>
+                </div>
+                <!-- 右侧详细信息 -->
+                <div class="info-area flex-column">
+                  <div class="user-row">
+                    账号名称：<span class="user-red-name">{{ userInfo.user?.nickName || '' }}</span>
+                  </div>
+                  <div class="company-row">归属公司：{{ userInfo.companyName || '' }}</div>
+                  <div class="dept-row">所属部门：{{ userInfo.user?.deptName || '' }}</div>
+                </div>
+              </div>
+              <!-- 底部操作区 -->
+              <div class="card-divider"></div>
+              <div class="action-bar flex-end">
+                <span class="action-txt-btn">切换登录</span>
+                <span class="action-txt-btn" @click="onlogout">退出</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧区域：工作台、采购合作、优易内购（键礼）、客户服务、手机慧采 (严格对齐图2右侧) -->
+        <div class="top-right flex">
+          <!-- 工作台 -->
+          <div @click="onPath('/enterprise/companyInfo')" class="nav-item">工作台</div>
+          <span class="spacer"></span>
+
+          <!-- 采购合作 ∨ (紧凑美观重构) -->
+          <div class="nav-item has-dropdown">
+            <span>采购合作</span>
+            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <!-- 采购合作下拉面板 -->
+            <div class="dropdown-menu partner-menu">
+              <div class="menu-sub-item">企业入驻</div>
+              <div class="menu-sub-item">合作咨询</div>
+              <div class="menu-sub-item">服务指南</div>
+            </div>
+          </div>
+          <span class="spacer"></span>
+
+          <!-- 优易内购（键礼） -->
+          <div class="nav-item">优易内购（键礼）</div>
+          <span class="spacer"></span>
+
+          <!-- 客户服务 ∨ (紧凑美观重构) -->
+          <div class="nav-item has-dropdown">
+            <span>客户服务</span>
+            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <!-- 客户服务下拉面板 -->
+            <div class="dropdown-menu service-menu">
+              <div class="menu-sub-item">帮助中心</div>
+              <div class="menu-sub-item">售后服务</div>
+              <div class="menu-sub-item">在线客服</div>
+            </div>
+          </div>
+          <span class="spacer"></span>
+
+          <!-- 手机慧采 ∨ (最右侧，图3大型高端卡片化布局) -->
+          <div class="nav-item has-dropdown mobile-dropdown last-item">
+            <span>手机慧采</span>
+            <svg class="arrow" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <!-- 手机慧采大型大气美观面板 (微信公众号+微信小程序双子星并列布局) -->
+            <div class="dropdown-menu mobile-menu-panel">
+              <div class="mobile-dual-cards flex">
+                <!-- 左侧：微信公众号 -->
+                <div class="mobile-card-col flex-column align-center">
+                  <div class="card-header-row flex align-center">
+                    <span class="wechat-badge-dot green"></span>
+                    <span class="card-header-title">微信公众号</span>
+                  </div>
+                  <div class="qr-box-container">
+                    <img :src="wechatLink" alt="" class="qr-box-img" />
+                  </div>
+                  <span class="qr-explain-text">扫码关注“微信公众号”<br />获取专享特惠与采购指南</span>
+                </div>
+
+                <!-- 中间竖直华丽分割线 -->
+                <div class="vertical-divider"></div>
+
+                <!-- 右侧：微信小程序 -->
+                <div class="mobile-card-col flex-column align-center">
+                  <div class="card-header-row flex align-center">
+                    <span class="wechat-badge-dot red"></span>
+                    <span class="card-header-title">微信小程序</span>
+                  </div>
+                  <div class="qr-box-container">
+                    <img :src="weiboLink" alt="" class="qr-box-img" />
+                  </div>
+                  <span class="qr-explain-text">微信扫码“小易来了”<br />随时随地掌握采购与物流</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 2. 中间搜索与Logo行 (透明背景，总高度锁死为 104px) -->
+    <div :class="['header-mid-wrap', { 'is-fixed': isFixed }]">
+      <div class="header-mid w flex">
+        <!-- 双 Logo 设计：优易慧采 + 中国银行 (锁定物理尺寸为 127*40 与 144*40) -->
+        <div class="logo-box flex">
+          <!-- 优易慧采大红Logo (矢量渲染，锁定宽度 127px，高度 40px) -->
+          <div class="logo-hucai">{{ dataInfo.mainTitle || '' }}</div>
+
+          <!-- 中国银行真实图片 Logo (物理尺寸三层死锁为 144px * 40px) -->
+          <img
+            :src="dataInfo.logoUrl"
+            alt=""
+            class="logo-boc-img"
+            width="144"
+            height="40"
+            style="
+              width: 144px !important;
+              height: 40px !important;
+              min-width: 144px !important;
+              max-width: 144px !important;
+              min-height: 40px !important;
+              max-height: 40px !important;
+            "
+          />
+        </div>
+
+        <!-- 搜索区域 -->
+        <div class="search-box-wrap flex-1">
+          <div class="search-bar flex">
+            <div class="input-group flex-1 flex relative" style="position: relative">
+              <!-- 真实的搜索输入框 -->
+              <input
+                type="text"
+                v-model="userSearchValue"
+                @focus="isSearchInputFocused = true"
+                @blur="handleSearchInputBlur"
+                ref="searchInput"
+                style="width: 100%; height: 100%; border: none; outline: none; background: transparent"
+              />
+              <!-- 绝对定位的上下滚动占位词覆盖层 (仅当输入框未聚焦且用户没有输入内容时显示) -->
+              <div class="search-scroll-swiper" v-if="!isSearchInputFocused && !userSearchValue" @click="focusSearchInput">
+                <transition name="keyword-slide">
+                  <div :key="currentKeywordIndex" class="keyword-swiper-item">
+                    {{ scrollKeywords[currentKeywordIndex] }}
+                  </div>
+                </transition>
+              </div>
+            </div>
+            <button class="search-btn" @click="onPath('/search?type=1&input=' + userSearchValue)">搜 索</button>
+          </div>
+          <!-- 热搜词一比一完美复刻图2 -->
+          <div class="hot-links">
+            <span @click="onPath('/search?type=1&input=' + item.name)" class="red-link" v-for="(item, index) in dataInfo.hotWords" :key="index">{{
+              item.name
+            }}</span>
+          </div>
+        </div>
+
+        <!-- 动作操作区 (AI采购管家 + 我的采购单) -->
+        <div class="header-actions flex">
+          <!-- AI采购管家 (带亮红 NEW 小胶囊) -->
+          <!-- 隐形占位以保持“我的采购单”绝对位置零漂移 -->
+          <div class="action-btn ai-manager-btn relative invisible-placeholder">
+            <span class="new-badge">NEW</span>
+            <span class="btn-text">Ai 采购管家</span>
+          </div>
+
+          <!-- 我的采购单 (带购物车和红点数字1) -->
+          <div class="action-btn my-cart-btn relative">
+            <svg class="cart-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="9" cy="21" r="1"></circle>
+              <circle cx="20" cy="21" r="1"></circle>
+              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+            </svg>
+            <span class="btn-text">{{ dataInfo.mainTitle }}</span>
+            <span v-if="cartCount > 0" class="cart-count-badge">{{ cartCount }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 占位符，防止中间栏吸顶时页面抖动跳跃 (高度统一为 104px) -->
+    <div class="header-placeholder" v-show="isFixed"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onPath } from '@/utils/siteConfig';
+import { useUserStore } from '@/store/modules/user';
+import { getPlatformConfigList } from '@/api/breg/index';
+import { cartStore } from '@/store/modules/cart';
+import { currentSearchConfig } from '@/api/home/index-data';
+
+interface Props {
+  userInfo?: any;
+}
+const props = defineProps<Props>();
+
+const dataInfo = ref<any>({});
+const wechatLink = ref<any>('');
+const weiboLink = ref<any>('');
+const cartStoreData = cartStore();
+const cartCount = computed(() => cartStoreData.cartCount);
+
+currentSearchConfig({}).then((res) => {
+  if (res.code == 200) {
+    document.documentElement.style.setProperty('--hover-data1', res.data.themeColor || '#E7000B');
+    if (res.data.searchPlaceholder) {
+      scrollKeywords.value = res.data.searchPlaceholder.split(',');
+    }
+    if (res.data.hotWords) {
+      res.data.hotWords = JSON.parse(res.data.hotWords);
+    }
+    dataInfo.value = res.data;
+  }
+});
+
+getPlatformConfigList({ configKey: 'wechatLink' }).then((res) => {
+  if (res.code == 200) {
+    if (res.rows && res.rows.length > 0) {
+      wechatLink.value = res.rows[0].value;
+    }
+  }
+});
+
+getPlatformConfigList({ configKey: 'weiboLink' }).then((res) => {
+  if (res.code == 200) {
+    if (res.rows && res.rows.length > 0) {
+      weiboLink.value = res.rows[0].value;
+    }
+  }
+});
+
+const onlogout = () => {
+  useUserStore()
+    .logout()
+    .then(() => {
+      onPath('/login');
+    });
+};
+
+const isFixed = ref(false);
+
+const handleScroll = () => {
+  // 当滚过 header-top 时，中间栏吸顶
+  isFixed.value = window.scrollY > 44;
+};
+
+// 👑 多商品占位词上下滚动机制
+const scrollKeywords = ref<any>([]);
+const currentKeywordIndex = ref(0);
+const isSearchInputFocused = ref(false);
+const userSearchValue = ref('');
+const searchInput = ref(null);
+
+let keywordInterval = null;
+
+const startKeywordRotation = () => {
+  keywordInterval = setInterval(() => {
+    // 仅当输入框没有被聚焦且用户未输入内容时，才在后台和前台进行上下滚动播放
+    if (!isSearchInputFocused.value && !userSearchValue.value) {
+      currentKeywordIndex.value = (currentKeywordIndex.value + 1) % scrollKeywords.value.length;
+    }
+  }, 2500); // 2.5 秒完美滚动频次
+};
+
+const focusSearchInput = () => {
+  if (searchInput.value) {
+    searchInput.value.focus();
+  }
+};
+
+const handleSearchInputBlur = () => {
+  isSearchInputFocused.value = false;
+};
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+  startKeywordRotation();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+  if (keywordInterval) {
+    clearInterval(keywordInterval);
+  }
+});
+</script>
+
+<style scoped>
+/* 整个Header容器背景清透 */
+.jd-header {
+  background: transparent;
+  padding-top: 44px; /* 最新 44px 顶栏高撑开 */
+}
+
+/* ==================== 👑 版心控制 (遵守全局媒体查询宽度，确保任何设备视口下双向垂直绝对铅垂线切平对齐) ==================== */
+.w {
+  margin: 0 auto;
+  padding: 0 !important;
+  box-sizing: border-box;
+}
+
+/* ==================== 👑 44px 吸顶顶部窄条 ==================== */
+.header-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 44px;
+  background: #ffffff;
+  border-bottom: none;
+  font-size: 13.5px;
+  color: #666;
+  line-height: 44px;
+  z-index: 10000;
+}
+
+.top-inner {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Flex 布局助手 */
+.flex {
+  display: flex;
+  align-items: center;
+}
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 导航小分割线 */
+.spacer {
+  width: 1px;
+  height: 12px;
+  background: #e5e5e5;
+  margin: 0 10px;
+  display: inline-block;
+  align-self: center;
+}
+
+/* 定位样式 */
+.loc-wrap {
+  display: flex;
+  align-items: center;
+  color: #e1251b;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 0 12px 0 0;
+  transition: opacity 0.2s;
+}
+.loc-wrap:hover {
+  opacity: 0.8;
+}
+.loc-icon {
+  color: #e1251b;
+  margin-right: 4px;
+}
+
+/* 导航项通用样式 */
+.nav-item {
+  padding: 0 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  color: #666;
+}
+.nav-item:hover {
+  color: #e1251b;
+  background: #f9f9f9;
+}
+
+/* 最右侧项微调，把 padding-right 设为 0 以保证与“我的采购单”右边缘完美垂直对齐 */
+.nav-item.last-item {
+  padding-right: 0 !important;
+}
+
+.red-link {
+  color: #e1251b !important;
+}
+.font-bold {
+  font-weight: bold;
+}
+
+/* 下拉小箭头 */
+.arrow {
+  width: 20px !important;
+  height: 20px !important;
+  font-size: 20px !important;
+  margin-left: 5px;
+  color: #a0a0a0;
+  transition:
+    transform 0.2s ease,
+    color 0.2s ease;
+  vertical-align: middle !important;
+  display: inline-block !important;
+}
+.has-dropdown:hover .arrow {
+  transform: rotate(180deg);
+  color: #e1251b;
+}
+
+/* ==================== 👑 悬停下拉浮现菜单 (高奢大气商务重构) ==================== */
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(8px); /* 留出 8px 精致桥接悬空格局 */
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.06); /* 超细呼吸细灰边框 */
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.08),
+    0 1px 4px rgba(0, 0, 0, 0.02); /* 高奢多层立体虚化投影 */
+  border-radius: 8px; /* 大气圆润 8px 圆角 */
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 10001;
+  min-width: 140px; /* 大气加宽 */
+  padding: 4px 0 !important; /* 紧凑设计：缩减上下边距，消除松垮感 */
+  box-sizing: border-box;
+}
+
+/* 加上桥接热区以保证悬浮进入顺畅无漂移 */
+.dropdown-menu::before {
+  content: '';
+  position: absolute;
+  top: -12px;
+  left: 0;
+  right: 0;
+  height: 12px;
+  background: transparent;
+}
+
+.has-dropdown:hover .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(2px);
+}
+
+/* 👑 1. 尊贵企业公司与用户信息面板样式 (图2高奢大气重塑) */
+.company-dropdown .dropdown-menu.company-menu {
+  width: 380px !important; /* 拓宽至高大气 380px 宽度，防止公司和部门换行 */
+  padding: 16px !important;
+  left: 0;
+  transform: translateY(8px);
+}
+.company-dropdown:hover .dropdown-menu.company-menu {
+  transform: translateY(2px);
+}
+
+.user-info-card {
+  width: 100% !important;
+  align-items: center !important;
+  gap: 16px !important;
+  box-sizing: border-box !important;
+}
+
+/* 左侧头像与黑金标签 */
+.avatar-area {
+  flex-shrink: 0 !important;
+  align-items: center !important;
+}
+.avatar-circle {
+  width: 56px !important;
+  height: 56px !important;
+  border-radius: 50% !important;
+  background: #fff5f5 !important;
+  border: 2px solid #fff1f0 !important; /* 精致红粉边框突显立体感 */
+  overflow: hidden !important;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.avatar-img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+}
+.member-gold-badge {
+  margin-top: 5px !important;
+  background: #222222 !important; /* 黑金质感 */
+  color: #fad18f !important; /* 尊贵金黄字 */
+  font-size: 10px !important;
+  font-weight: bold !important;
+  padding: 1px 7px !important;
+  border-radius: 10px !important;
+  border: 1px solid #333333 !important;
+  line-height: 1.2 !important;
+  white-space: nowrap !important;
+  transform: scale(0.9) !important;
+}
+
+/* 右侧公司与账号 */
+.info-area {
+  flex: 1 !important;
+  justify-content: center !important;
+  text-align: left !important;
+}
+.user-row {
+  font-size: 13.5px !important;
+  color: #555555 !important;
+  font-weight: 500 !important;
+  line-height: 1.4 !important;
+}
+.user-red-name {
+  color: #e1251b !important; /* 醒目优易红 */
+  font-weight: bold !important;
+}
+.company-row,
+.dept-row {
+  font-size: 12px !important;
+  color: #666666 !important;
+  margin-top: 5px !important;
+  line-height: 1.4 !important;
+  word-break: break-all !important;
+}
+
+/* 底部操作区细分割线 */
+.card-divider {
+  height: 1px !important;
+  background: rgba(0, 0, 0, 0.05) !important;
+  width: 100% !important;
+  margin: 8px 0 6px 0 !important; /* 深度紧缩：缩小间距 */
+}
+.action-bar {
+  width: 100% !important;
+  display: flex !important;
+  justify-content: flex-end !important;
+  gap: 16px !important;
+  height: 20px !important; /* 锁死精致高度 */
+  line-height: 20px !important;
+  margin-bottom: -4px !important; /* 精巧向上拉伸，消除下方残留的过大留白 */
+}
+.action-txt-btn {
+  font-size: 13.5px !important; /* 文字调大：极佳的辨识度 */
+  color: #666666 !important;
+  cursor: pointer !important;
+  transition: color 0.2s ease !important;
+  font-weight: 500 !important;
+}
+.action-txt-btn:hover {
+  color: #e1251b !important; /* Hover 时大红 */
+}
+
+/* 👑 2. 高端紧凑子项：5px 24px padding，消灭太大的间距，充满精细感 */
+.menu-sub-item {
+  position: relative !important;
+  padding: 4px 16px 4px 24px !important; /* 深度紧缩上下字距：精细精神，消灭丑态 */
+  line-height: 1.6 !important; /* 强制优雅紧凑行高，杜绝任何外部撑大 */
+  color: #333333 !important; /* 经典深沉灰黑 */
+  font-size: 13px !important; /* 极其大气清晰 */
+  white-space: nowrap !important;
+  text-align: left !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  cursor: pointer !important;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
+  font-weight: 500 !important;
+  margin: 1px 0 !important; /* 保持项与项之间的极细呼吸 */
+}
+
+/* 左侧若隐若现的大红微圆点 */
+.menu-sub-item::before {
+  content: '' !important;
+  position: absolute !important;
+  left: 12px !important; /* 随着padding缩减微调 */
+  top: 50% !important;
+  transform: translateY(-50%) scale(0.4) !important;
+  width: 4.5px !important;
+  height: 4.5px !important;
+  background: #e1251b !important;
+  border-radius: 50% !important;
+  opacity: 0 !important;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.menu-sub-item:hover,
+.menu-sub-item.active {
+  background: rgba(225, 37, 27, 0.04) !important; /* 高端淡红高亮背景 */
+  color: #e1251b !important; /* 高亮变为优易经典红色 */
+  padding-left: 27px !important; /* 悬浮时微向右推 3px，展现物理解耦的弹性滑动 */
+}
+
+/* 悬浮时让微圆点优雅滑出并变大 */
+.menu-sub-item:hover::before,
+.menu-sub-item.active::before {
+  opacity: 1 !important;
+  transform: translateY(-50%) scale(1) !important;
+  left: 14px !important;
+}
+
+/* 👑 3. 手机慧采公众号与小程序并排卡片 (超宽420px，大气白净设计) */
+.mobile-dropdown .dropdown-menu.mobile-menu-panel {
+  width: 420px !important; /* 物理宽度锁定为霸气的 420px */
+  padding: 20px !important; /* 内边距舒张开朗 */
+  left: auto;
+  right: 0;
+  transform: translateY(8px);
+}
+.mobile-dropdown:hover .dropdown-menu.mobile-menu-panel {
+  transform: translateY(2px);
+}
+
+/* 👑 双子星公众号与小程序并排大气格局 */
+.mobile-dual-cards {
+  width: 100% !important;
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: stretch !important;
+}
+.mobile-card-col {
+  width: 47% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  text-align: center !important;
+  box-sizing: border-box !important;
+}
+.card-header-row {
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  margin-bottom: 2px !important;
+}
+.wechat-badge-dot {
+  width: 6px !important;
+  height: 6px !important;
+  border-radius: 50% !important;
+  display: inline-block !important;
+}
+.wechat-badge-dot.green {
+  background: #07c160 !important;
+  box-shadow: 0 0 6px rgba(7, 193, 96, 0.4) !important;
+}
+.wechat-badge-dot.red {
+  background: #e1251b !important;
+  box-shadow: 0 0 6px rgba(225, 37, 27, 0.4) !important;
+}
+.card-header-title {
+  font-size: 13.5px !important;
+  font-weight: bold !important;
+  color: #333333 !important;
+}
+
+/* 精致白净的二维码框架 */
+.qr-box-container {
+  width: 116px !important; /* 高能放大：由 100px 显著拉大至 116px，视觉气派震撼 */
+  height: 116px !important; /* 高度同步放大 */
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  border-radius: 8px !important;
+  padding: 6px !important;
+  background: #ffffff !important;
+  box-sizing: border-box !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
+  margin: 8px 0 !important; /* 上下间隙微调以保持极佳比例 */
+}
+.qr-box-img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain !important;
+}
+
+/* 扫码说明描述文字 */
+.qr-explain-text {
+  font-size: 11.5px !important;
+  color: #777777 !important;
+  line-height: 1.45 !important;
+  text-align: center !important;
+}
+
+/* 中间高雅的竖直实线分割线 */
+.vertical-divider {
+  width: 1px !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  align-self: stretch !important;
+  margin: 4px 5px !important;
+}
+
+/* ==================== 👑 中间搜索与Logo行 (高保真高度 104px) ==================== */
+.header-mid-wrap {
+  height: 104px; /* 锁死为 104px */
+  background: transparent; /* 搜索栏是没有白色背景的 */
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+/* 当页面向下滚动时吸顶配合 */
+.header-mid-wrap.is-fixed {
+  position: fixed;
+  top: 44px !important; /* 锁紧在 44px 顶栏的正下方 */
+  left: 0;
+  right: 0;
+  height: 64px !important; /* 高度在吸顶时收缩为精致扁平的 64px */
+  z-index: 9999 !important;
+  background: #ffffff !important; /* 完美复刻图1纯白通栏吸顶背景 */
+  border-bottom: 1px solid #ededed !important; /* 精致底边细分割线，完美分割下方内容 */
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.header-mid-wrap.is-fixed .header-mid {
+  height: 64px !important; /* 主容器高度同步收缩 */
+}
+
+/* 吸顶时隐藏热词，释放珍贵的垂直视口空间 */
+.header-mid-wrap.is-fixed .hot-links {
+  display: none !important;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-10%);
+    opacity: 0.8;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 占位符高度升级为 104px */
+.header-placeholder {
+  height: 104px;
+}
+
+.header-mid {
+  height: 104px;
+  padding: 0 !important; /* 取消原本 padding，通过 flex 水平垂直居中 */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+}
+
+/* ==================== 👑 双 Logo 排版样式 ==================== */
+.logo-box {
+  width: 340px; /* 锁死为符合图3的 340px 宽度，确保搜索栏左边缘到优易慧采左侧为 340px */
+  height: 40px; /* 锁死为符合图3的 40px 高度 */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* 改为 flex-start 以便利用 margin 精准定位间距 */
+  margin-right: 0px !important; /* 彻底清除右边距，满足 340px 的物理几何 */
+  flex-shrink: 0;
+  padding-left: 0 !important; /* 确保首个 Logo 左侧边缘与顶栏完美对齐 */
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/* 1. 优易慧采 Logo (锁定 127*40 物理尺寸) */
+.logo-hucai {
+  min-width: 127px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 27px;
+  font-weight: 900;
+  color: var(--hover-data1); /* 优易经典红色 */
+  font-family: 'Microsoft YaHei', sans-serif;
+  letter-spacing: 0.5px;
+  line-height: 40px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* 3. 中国银行真实图片 Logo (物理尺寸锁定为 144px * 40px) */
+.logo-boc-img {
+  width: 144px !important;
+  height: 40px !important;
+  min-width: 144px !important;
+  max-width: 144px !important;
+  min-height: 40px !important;
+  max-height: 40px !important;
+  object-fit: fill !important; /* 采用完全填充（fill）的方式显示，百分之百铺满 144*40 */
+  display: block !important;
+  flex-shrink: 0 !important;
+  margin-left: 30px !important; /* 精准保留与左侧优易慧采的 30px 物理间距！ */
+}
+
+/* 搜索输入框 */
+.search-box-wrap {
+  margin: 0 24px 0 0;
+  flex: 1; /* 弹性容器，自适应宽度 */
+  min-width: 0; /* 允许收缩 */
+  position: relative; /* 赋予热词以 absolute 定位上下文，消除对齐向下拉扯 */
+  height: 42px; /* 高度设为 42px，使整个容器物理文档流与搜索框一致 */
+  display: flex;
+  align-items: center;
+}
+.search-bar {
+  width: 100%; /* 自适应宽度 */
+  height: 42px; /* 锁死为符合图1的 42px 高度 */
+  border: 2px solid var(--hover-data1);
+  border-radius: 8px;
+  background: #fff;
+  padding: 2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+.input-group {
+  padding: 0 12px;
+  align-items: center;
+  height: 100%;
+  position: relative !important;
+}
+.input-group input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  font-size: 13.5px;
+  color: #333;
+}
+.input-group input::placeholder {
+  color: #a5a5a5;
+}
+
+/* 👑 高品质多商品上下滚动占位词样式 */
+.search-scroll-swiper {
+  position: absolute !important;
+  left: 12px !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  right: 40px !important;
+  display: flex !important;
+  align-items: center !important;
+  pointer-events: none !important; /* 穿透鼠标事件，使点击直接穿透给底层的 input 输入框以聚焦 */
+  overflow: hidden !important;
+  background: transparent !important;
+}
+.keyword-swiper-item {
+  font-size: 13.5px !important;
+  color: #a5a5a5 !important; /* 经典高保真灰色占位词颜色 */
+  white-space: nowrap !important;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
+  line-height: 1 !important;
+  display: flex;
+  align-items: center;
+}
+
+/* 👑 向上翻页滑动 Transition 动画 */
+.keyword-slide-enter-active,
+.keyword-slide-leave-active {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: absolute !important;
+}
+.keyword-slide-enter-from {
+  opacity: 0 !important;
+  transform: translateY(20px) !important; /* 从正下方 20px 滑入 */
+}
+.keyword-slide-leave-to {
+  opacity: 0 !important;
+  transform: translateY(-20px) !important; /* 向上滑出 20px 彻底淡出 */
+}
+
+.search-btn {
+  width: 80px;
+  height: 100%;
+  background: var(--hover-data1);
+  color: #fff;
+  border: none;
+  font-size: 15px;
+  font-weight: bold;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  letter-spacing: 1.5px;
+}
+.search-btn:hover {
+  background: var(--hover-data1);
+}
+
+/* 完美高保真热搜词 */
+.hot-links {
+  position: absolute;
+  top: 47px !important; /* 完美在 42px 搜索框的下方 5px 处 (42 + 5 = 47px)，保留 5px 间距，死锁定位！ */
+  left: 0;
+  font-size: 12px !important; /* 字体大小锁定为 12px */
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图2所示 */
+  color: #00000073 !important; /* 字体颜色锁定为图2所示的 #00000073 */
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden !important; /* 强制单行且超出隐藏 */
+  white-space: nowrap !important; /* 强制单行且超出隐藏 */
+}
+.hot-links span {
+  margin-right: 14px;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图2所示 */
+  color: #00000073 !important; /* 字体颜色锁定为图2所示的 #00000073 */
+  white-space: nowrap !important; /* 强制每个热词不换行 */
+  flex-shrink: 0 !important; /* 保证文字不因拉伸而缩水 */
+}
+.hot-links span:hover {
+  color: var(--hover-data1) !important; /* 悬停保持优易经典红色 */
+}
+
+/* ==================== 👑 动作功能区 (AI采购管家 + 我的采购单) ==================== */
+.header-actions {
+  align-items: center;
+  gap: 12px;
+  padding-right: 0 !important; /* 确保右侧“我的采购单”右边缘完美对齐“手机慧采” */
+}
+
+/* 通用按钮样式 */
+.action-btn {
+  height: 40px; /* 锁死为符合图1的 40px 高度 */
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border: 1.5px solid #d9d9d9;
+  border-radius: 8px;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  user-select: none;
+  box-sizing: border-box;
+  position: relative; /* 强行赋予定位上下文，锁定右上角标位置 */
+  white-space: nowrap; /* 强行禁止文字折行换行 */
+  flex-shrink: 0; /* 强行禁止按钮被挤压变窄 */
+}
+
+/* 隐形占位，保持原有的物理排版宽度但完全隐形，防采购单按钮漂移 */
+.invisible-placeholder {
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+
+/* 1. AI采购管家 (圆角淡蓝框线) */
+.ai-manager-btn {
+  border-color: #2f72ff;
+  color: #2f72ff;
+}
+.ai-manager-btn:hover {
+  background: #f0f5ff;
+}
+.ai-manager-btn .btn-text {
+  font-size: 13.5px;
+  font-weight: bold;
+}
+
+/* 亮红色 NEW 胶囊 */
+.new-badge {
+  position: absolute;
+  top: -9px;
+  right: -5px;
+  background: #ff2b2b;
+  color: #ffffff;
+  font-size: 9px;
+  font-weight: 900;
+  padding: 1px 4px;
+  border-radius: 6px;
+  line-height: 1;
+  box-shadow: 0 2px 4px rgba(255, 43, 43, 0.3);
+  transform: scale(0.95);
+  font-family: 'Arial', sans-serif;
+}
+
+/* 2. 我的采购单 (带小推车和气泡数1) */
+.my-cart-btn {
+  border-color: #d9d9d9;
+  color: #333;
+}
+.my-cart-btn:hover {
+  border-color: var(--hover-data1);
+  color: var(--hover-data1);
+}
+.my-cart-btn .cart-icon {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+.my-cart-btn .btn-text {
+  font-size: 13.5px;
+  font-weight: 500;
+}
+
+/* 红色购物车计数气泡 */
+.cart-count-badge {
+  position: absolute;
+  top: -10px; /* 随着气泡变大，微调 top 偏移 */
+  right: -10px; /* 随着气泡变大，微调 right 偏移 */
+  background: var(--hover-data1);
+  color: #ffffff;
+  font-size: 13px; /* 调大数字 */
+  font-weight: normal; /* 彻底去除加粗，不要加粗 */
+  width: 20px; /* 圆圈加大到 20px */
+  height: 20px; /* 圆圈加大到 20px */
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  /* box-shadow: 0 2px 4px rgba(255, 43, 43, 0.3); */
+  font-family: 'Arial', sans-serif;
+  pointer-events: none; /* 保证悬停在红点上依然完美触发按钮 Hover */
+  z-index: 10;
+}
+</style>

src/views/home/datacomponents/JDProducts.vue

@@ -0,0 +1,563 @@
+<template>
+  <div class="products-section w">
+    <!-- 顶部滑动的商品分类导航 -->
+    <div class="cat-nav-wrapper">
+      <!-- 左滑按钮 -->
+      <button v-show="showLeftProdBtn" class="prod-scroll-btn left-btn" @click="scrollProd('left')">
+        <svg viewBox="0 0 24 24" class="scroll-arrow">
+          <path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+      <div class="cat-nav-scroll-wrapper" ref="prodScrollRef" @scroll="checkProdScroll">
+        <div class="cat-nav-list">
+          <div
+            class="cat-item"
+            v-for="(cat, i) in categories"
+            :key="i"
+            :class="{ active: currentCat === i, 'like-cat': i === 0, 'peer-cat': i !== 0 }"
+            @click="onCurrentCat(i)"
+          >
+            <div class="cat-icon-circle">
+              <img :src="cat.iconUrl" class="cat-custom-img" />
+            </div>
+            <span class="cat-name-txt">{{ cat.name }}</span>
+          </div>
+        </div>
+      </div>
+      <!-- 右滑按钮 -->
+      <button v-show="showRightProdBtn" class="prod-scroll-btn right-btn" @click="scrollProd('right')">
+        <svg viewBox="0 0 24 24" class="scroll-arrow">
+          <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- 商品列表 -->
+    <div class="product-grid">
+      <div class="p-card" v-for="(p, i) in baseProducts" :key="i" @click="onPath('/item?id=' + p.id + '&productNo=' + p.productNo)">
+        <div class="p-img-box">
+          <img :src="p.image || p.productImage" @error="handleImgError" />
+        </div>
+        <div class="p-info">
+          <div class="p-name">
+            {{ p.name || p.itemName || '' }}
+          </div>
+          <div class="p-tags">
+            <span class="tag-item tag-ue-kaipiao"> 优易开票 </span>
+          </div>
+          <div class="p-price-row">
+            <span class="p-currency">¥</span>
+            <template v-if="p.price">
+              <span class="p-price">{{ p.price.split('.')[0] }}</span>
+              <span class="p-decimal">.{{ p.price.split('.')[1] }}</span>
+            </template>
+            <template v-if="p.memberPrice">
+              <span class="p-price">{{ p.memberPrice.split('.')[0] }}</span>
+              <span class="p-decimal">.{{ p.memberPrice.split('.')[1] }}</span>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="empty-bos" v-if="baseProducts.length === 0">
+      <el-empty description="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { recommendThemeConfig } from '@/api/home/index-data';
+import { Loading } from '@element-plus/icons-vue';
+import { getPcProductPage } from '@/api/search/index';
+import { onPath } from '@/utils/siteConfig';
+const currentCat = ref<any>(0);
+const categories = ref<any>([]);
+const baseProducts = ref<any>([]);
+const loading = ref(false);
+const noMore = ref(false);
+recommendThemeConfig({}).then((res) => {
+  if (res.code == 200) {
+    document.documentElement.style.setProperty('--hover-data4', res.data.themeColor || '#E7000B');
+    document.documentElement.style.setProperty('--bgOpacity-data4', res.data.bgOpacity || '1');
+    categories.value = res.data.categoryConfigList;
+    categories.value.forEach((item: any) => {
+      item.goodsList = [];
+      if (item.selectedProductIds) {
+        item.goodsList = JSON.parse(item.selectedProductIds);
+      }
+    });
+    if (categories.value[0].categoryPath && categories.value[0].categoryPath != '[]') {
+      categories.value[0].pageNum = 1;
+      categories.value[0].pageSize = 20;
+      categories.value[0].topCategoryId = '';
+      categories.value[0].mediumCategoryId = '';
+      categories.value[0].bottomCategoryId = '';
+      const categoryList = categories.value[0].categoryPath.split(',');
+      if (categoryList.length > 0) {
+        categories.value[0].topCategoryId = categoryList[0];
+      }
+      if (categoryList.length > 1) {
+        categories.value[0].mediumCategoryId = categoryList[1];
+      }
+      if (categoryList.length > 2) {
+        categories.value[0].bottomCategoryId = categoryList[2];
+      }
+      baseProducts.value = [];
+      getList();
+    } else {
+      baseProducts.value = categories.value[0].goodsList;
+      console.log(baseProducts.value, 4564565665);
+    }
+  }
+});
+
+const getList = () => {
+  if (loading.value || noMore.value) return;
+
+  loading.value = true;
+  const datas = {
+    pageNum: categories.value[currentCat.value].pageNum,
+    pageSize: categories.value[currentCat.value].pageSize,
+    topCategoryId: categories.value[currentCat.value].topCategoryId,
+    mediumCategoryId: categories.value[currentCat.value].mediumCategoryId,
+    bottomCategoryId: categories.value[currentCat.value].bottomCategoryId
+  };
+  getPcProductPage(datas)
+    .then((res) => {
+      if (res.code == 200) {
+        const newProducts = res.rows || [];
+
+        // 如果没有返回数据，说明没有更多了
+        if (newProducts.length === 0) {
+          noMore.value = true;
+          return;
+        }
+
+        baseProducts.value = baseProducts.value.concat(newProducts);
+
+        // 判断是否还有更多数据
+        if (res.total <= baseProducts.value.length) {
+          noMore.value = true;
+        } else {
+          // 还有更多数据，页码+1
+          categories.value[currentCat.value].pageNum++;
+        }
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const onCurrentCat = (index: any) => {
+  currentCat.value = index;
+  // 重置加载状态
+  noMore.value = false;
+  if (categories.value[index].categoryPath && categories.value[index].categoryPath != '[]') {
+    categories.value[index].pageNum = 1;
+    categories.value[index].pageSize = 20;
+    categories.value[index].topCategoryId = '';
+    categories.value[index].mediumCategoryId = '';
+    categories.value[index].bottomCategoryId = '';
+    const categoryList = categories.value[index].categoryPath.split(',');
+    if (categoryList.length > 0) {
+      categories.value[index].topCategoryId = categoryList[0];
+    }
+    if (categoryList.length > 1) {
+      categories.value[index].mediumCategoryId = categoryList[1];
+    }
+    if (categoryList.length > 2) {
+      categories.value[index].bottomCategoryId = categoryList[2];
+    }
+    baseProducts.value = [];
+    getList();
+  } else {
+    baseProducts.value = categories.value[index].goodsList;
+  }
+};
+
+const prodScrollRef = ref(null);
+const showLeftProdBtn = ref(false);
+const showRightProdBtn = ref(false);
+
+const checkProdScroll = () => {
+  if (!prodScrollRef.value) return;
+  const { scrollLeft, scrollWidth, clientWidth } = prodScrollRef.value;
+  showLeftProdBtn.value = scrollLeft > 5;
+  showRightProdBtn.value = scrollWidth - clientWidth - scrollLeft > 5;
+};
+
+const scrollProd = (direction) => {
+  if (!prodScrollRef.value) return;
+  const amount = 200;
+  if (direction === 'left') {
+    prodScrollRef.value.scrollLeft -= amount;
+  } else {
+    prodScrollRef.value.scrollLeft += amount;
+  }
+  setTimeout(checkProdScroll, 300);
+};
+
+onMounted(() => {
+  window.addEventListener('resize', checkProdScroll);
+  setTimeout(checkProdScroll, 100);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkProdScroll);
+});
+
+const defaultImg =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><rect width="100%" height="100%" fill="%23f4f4f4"/><text x="50%" y="50%" font-family="sans-serif" font-size="20" fill="%23ccc" dominant-baseline="middle" text-anchor="middle">暂无图片</text></svg>';
+
+const handleImgError = (e) => {
+  e.target.src = defaultImg;
+  e.target.onerror = null;
+};
+
+const getTagClass = (tag) => {
+  if (tag === '优易开票') return 'tag-ue-kaipiao';
+  if (tag === '企业精选') return 'tag-qy-jingxuan';
+  if (tag === '企业年货') return 'tag-qy-nianhuo';
+  return 'tag-default';
+};
+</script>
+
+<style scoped>
+.products-section {
+  margin-top: 16px;
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 50px;
+}
+
+/* 导航栏 (吸顶) - 背景高度设定为 72px */
+.cat-nav-wrapper {
+  background: #fff !important;
+  position: sticky;
+  top: 108px; /* 紧贴在吸顶头部的下边缘(44px顶栏 + 64px中栏 = 108px) */
+  z-index: 900;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* 居左，靠轨道分配 */
+  padding: 0;
+  height: 72px;
+  box-sizing: border-box;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+  overflow: visible;
+}
+
+.cat-nav-scroll-wrapper {
+  flex: 1;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px; /* 恒定紧凑内边距 */
+  box-sizing: border-box;
+}
+
+.cat-nav-scroll-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.cat-nav-scroll-wrapper {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.cat-nav-list {
+  display: flex;
+  align-items: center;
+  gap: 40px; /* 两个分类项之间的黄金间隙 */
+  height: 100%;
+  white-space: nowrap;
+  margin: 0 auto; /* ⭐ 水平居中核心：大屏未溢出时在白底背景里居中对齐；小屏溢出时向左对齐以顺畅滑动 */
+}
+
+.cat-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 100%;
+  padding: 0 8px;
+  box-sizing: border-box;
+  background: transparent !important;
+  flex-shrink: 0; /* 防挤压变形 */
+}
+
+.prod-scroll-btn {
+  flex-shrink: 0; /* 强力防挤压变形 */
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e2e8f0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+.prod-scroll-btn:hover {
+  background: #ffffff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+}
+.prod-scroll-btn.left-btn {
+  margin-left: 8px;
+  margin-right: 4px;
+}
+.prod-scroll-btn.right-btn {
+  margin-right: 8px;
+  margin-left: 4px;
+}
+.scroll-arrow {
+  width: 18px;
+  height: 18px;
+  color: #64748b;
+}
+
+/* 48*48px 的分类图标圆圈 */
+.cat-icon-circle {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #f7f8fc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.cat-custom-img {
+  object-fit: contain;
+  transition: transform 0.2s ease;
+}
+
+/* 猜你喜欢的图片图标大小调整为 18*18 */
+.like-cat .cat-custom-img {
+  width: 18px;
+  height: 18px;
+}
+
+/* 同行都在买的图片图标大小为 36*36 */
+.peer-cat .cat-custom-img {
+  width: 36px;
+  height: 36px;
+}
+
+/* 文字样式：字体大小为 16px */
+.cat-name-txt {
+  font-size: 16px !important;
+  font-weight: bold;
+  color: #333333;
+  transition: color 0.2s ease;
+}
+
+/* 选中状态下：圆圈背景变色、文字变色 */
+.cat-item.active .cat-icon-circle {
+  background-color: var(--hover-data4) !important;
+  opacity: var(--bgOpacity-data4) !important;
+}
+
+.cat-item.active .cat-name-txt {
+  color: var(--hover-data4) !important;
+}
+
+.cat-item:hover .cat-name-txt {
+  color: #e1251b !important;
+}
+
+/* 商品网格 */
+.product-grid {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(6, 1fr); /* 默认 6 列等宽响应式布局 */
+  column-gap: 16px;
+  row-gap: 16px;
+  padding: 16px 16px 20px 16px;
+}
+
+/* 当缩放一定程度（视口宽度 <= 1400px），直接将商品一排变成显示 5 个 */
+@media screen and (max-width: 1400px) {
+  .product-grid {
+    grid-template-columns: repeat(5, 1fr); /* 变为 5 列 */
+    column-gap: 12px;
+    row-gap: 12px;
+    padding: 12px 12px 16px 12px;
+  }
+}
+
+/* 商品卡片：宽度自适应 100%，高度自适应撑开 */
+.p-card {
+  background: #fff;
+  border: 1px solid #f4f4f4;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  width: 100%; /* 自适应宽度 */
+  height: auto; /* 高度自适应 */
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.p-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+/* 商品图片容器：等比例 1:1 缩放 */
+.p-img-box {
+  width: 100%;
+  aspect-ratio: 1 / 1; /* 完美维持正方形等比例缩放 */
+  background: #f8f8f8;
+  overflow: hidden;
+  position: relative;
+}
+.p-img-box img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 保证原比例且填满容器 */
+}
+
+/* 悬停时的透明遮罩 */
+.p-img-box::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.03);
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+}
+.p-card:hover .p-img-box::after {
+  opacity: 1;
+}
+
+/* 商品卡片内容信息区域 */
+.p-info {
+  width: 100%; /* 宽度自适应 */
+  height: 116px;
+  display: flex;
+  flex-direction: column;
+  padding: 10px 12px 12px 12px;
+  box-sizing: border-box;
+}
+
+/* 商品名称：字体大小为 16px */
+.p-name {
+  font-size: 16px !important;
+  line-height: 20px;
+  height: 40px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #333;
+  margin-bottom: 6px;
+  transition: color 0.2s ease;
+}
+
+.p-card:hover .p-name {
+  color: #e1251b;
+}
+
+/* 商品标签容器 */
+.p-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+  height: 16px;
+}
+
+/* 商品标签：字体大小为 12px */
+.tag-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 12px;
+  border-radius: 2px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+/* 优易开票标签样式 */
+.tag-ue-kaipiao {
+  border: 1px solid #e1251b;
+  color: #e1251b;
+  background-color: transparent;
+}
+
+/* 企业精选标签样式 */
+.tag-qy-jingxuan {
+  border: 1px solid #a37953;
+  color: #a37953;
+  background-color: transparent;
+}
+
+/* 企业年货标签样式 */
+.tag-qy-nianhuo {
+  border: 1px solid #f66d23;
+  color: #f66d23;
+  background-color: transparent;
+}
+
+.tag-default {
+  border: 1px solid #999;
+  color: #999;
+  background-color: transparent;
+}
+
+/* 价格区域样式 */
+.p-price-row {
+  color: #e1251b;
+  display: flex;
+  align-items: baseline;
+  margin-top: auto;
+  line-height: 1;
+}
+.p-currency {
+  font-size: 14px;
+  font-weight: bold;
+  margin-right: 1px;
+}
+/* 价格字体大小为：22px */
+.p-price {
+  font-size: 22px;
+  font-weight: 800;
+  font-family:
+    tahoma,
+    arial,
+    Microsoft YaHei,
+    Hiragino Sans GB,
+    sans-serif;
+}
+.p-decimal {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.empty-bos {
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+</style>

src/views/home/datacomponents/JDScene.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="scene-integrated w">
+    <div class="scene-inner flex">
+      <!-- 左侧标题区 -->
+      <div class="scene-left">
+        <div class="s-h-group flex">
+          <h3 class="s-main-t">场景解决方案</h3>
+          <span class="s-sub-t">一站全买齐</span>
+        </div>
+        <a href="#" class="enter-pill">
+          进入全场景 <i class="arr-ic"></i>
+        </a>
+      </div>
+
+      <!-- 右侧卡片区 -->
+      <div class="scene-right flex-1">
+        <div class="s-grid-h flex">
+          <div class="s-item-card" v-for="(s, i) in scenes" :key="i">
+            <div class="item-top flex-between">
+              <div class="item-info flex">
+                <p class="item-t">{{ s.title }}</p>
+                <p class="item-d">{{ s.desc }}</p>
+              </div>
+              <div class="item-arrow">
+                <i class="icon-arr"></i>
+              </div>
+            </div>
+            <div class="item-pic">
+              <img :src="s.img" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const scenes = [
+  { title: '耗材采购', desc: '纸墨随买随用', img: '/images/scene_stationery.png' },
+  { title: '防暑降温', desc: '守护员工健康', img: '/images/scene_cooling.png' },
+  { title: '员工团建', desc: '同心聚力', img: '/images/scene_teambuilding.png' },
+  { title: '营销物资', desc: '全场景解决方案', img: '/images/scene_marketing.png' }
+];
+</script>
+
+<style scoped>
+.scene-integrated { margin-top: 16px; }
+.scene-inner { 
+  background: linear-gradient(90deg, #6BE7B5 0%, #39D696 100%); 
+  border-radius: 12px; 
+  padding: 14px 20px;
+  align-items: center;
+  min-height: 180px;
+}
+
+.scene-left {
+  width: 380px;
+  color: #fff;
+  padding-right: 20px;
+}
+.s-h-group { align-items: baseline; margin-bottom: 15px; }
+.s-main-t { font-size: 24px; font-weight: 800; white-space: nowrap; }
+.s-sub-t { font-size: 24px; font-weight: 800; opacity: 0.95; margin-left: 12px; white-space: nowrap; }
+
+.enter-pill {
+  display: inline-flex;
+  align-items: center;
+  background: #fff;
+  color: #E1251B;
+  padding: 6px 18px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: bold;
+  text-decoration: none;
+}
+.arr-ic {
+  display: inline-block; width: 12px; height: 12px; 
+  background: #E1251B; border-radius: 50%; margin-left: 6px;
+  position: relative;
+}
+.arr-ic::after {
+  content: ''; position: absolute; left: 3px; top: 3px;
+  width: 4px; height: 4px; border-top: 2px solid #fff; border-right: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.scene-right { overflow: hidden; }
+.s-grid-h { gap: 10px; }
+
+.s-item-card {
+  flex: 1;
+  background: #E8FBF1; /* Pale green background matching Figure 2 */
+  border-radius: 10px;
+  height: 160px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: transform 0.3s;
+}
+.s-item-card:hover { transform: translateY(-3px); }
+
+.item-top { padding: 8px 12px; align-items: center; }
+.item-info { align-items: baseline; gap: 8px; }
+.item-t { font-size: 18px; font-weight: 900; color: #026034; white-space: nowrap; }
+.item-d { font-size: 13px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.item-arrow {
+  width: 16px;
+  height: 16px;
+  background: #34C759;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.icon-arr {
+  width: 4px; height: 4px; 
+  border-top: 2px solid #fff; border-right: 2px solid #fff; 
+  transform: rotate(45deg); margin-left: -1px;
+}
+
+.item-pic { flex: 1; overflow: hidden; padding: 0 8px 8px; }
+.item-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
+
+@media screen and (max-width: 1599px) {
+  .scene-left { width: 340px; }
+  .s-main-t { font-size: 20px; }
+  .s-sub-t { font-size: 20px; font-weight: 800; }
+  .s-item-card:nth-child(4) { display: none; } /* 当宽度小于 1600px 时隐藏第4个卡片 */
+}
+
+@media screen and (max-width: 1209px) {
+  .s-item-card:nth-child(3) { display: none; } /* 宽度更小时隐藏第3个卡片 */
+  
+  /* 优化小屏幕下左侧标题文字的排版空间 */
+  .scene-left { 
+    width: 240px !important; 
+    padding-right: 10px !important;
+  }
+  .s-main-t { 
+    font-size: 18px !important; 
+  }
+  .s-sub-t { 
+    font-size: 18px !important; 
+    margin-left: 6px !important; 
+  }
+  .enter-pill { 
+    padding: 5px 12px !important; 
+    font-size: 12px !important; 
+  }
+}
+</style>

src/views/home/datacomponents/JDSceneRed.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="scene-red-integrated w">
+    <div class="scene-inner-red flex" :style="{ backgroundImage: `url(${dataInfo.bgImage})` }">
+      <!-- 左侧标题区：整个区域配置为超链接，点击可跳转 -->
+      <a href="#" class="scene-left-red">
+        <div class="s-h-group-red" @click="onPath(dataInfo.jumpLink)">
+          <span class="s-main-t-red" :style="{ color: dataInfo.mainTitleColor }">{{ dataInfo.mainTitle }}</span>
+          <span class="s-sub-t-red" :style="{ color: dataInfo.subTitleColor }">{{ dataInfo.subTitle }}</span>
+        </div>
+      </a>
+
+      <!-- 右侧卡片区：4个子方案卡片均为超链接，点击可跳转 -->
+      <div class="scene-right-red flex-1">
+        <div class="s-grid-h-red flex">
+          <a @click="onPath(s.link)" href="#" class="s-item-card-red" v-for="(s, i) in dataInfo.subCardsJson" :key="i">
+            <img :src="s.image" class="card-whole-img" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { currentScenarioConfig } from '@/api/home/index-data';
+import { onPath } from '@/utils/siteConfig';
+const dataInfo = ref<any>({
+  subCardsJson: []
+});
+currentScenarioConfig({}).then((res) => {
+  if (res.code == 200) {
+    dataInfo.value = res.rows[0];
+    dataInfo.value.subCardsJson = JSON.parse(dataInfo.value.subCardsJson);
+    console.log(dataInfo.value, 'dataInfo.value.subCardsJson');
+  }
+});
+const redScenes = [{ img: '/images/方案图1.png' }, { img: '/images/方案图2.png' }, { img: '/images/方案图3.png' }, { img: '/images/方案图4.png' }];
+</script>
+
+<style scoped>
+.scene-red-integrated.w {
+  /* 👑 场景方案模块宽度始终与页面上的全局大版心 .w 规则（最大1600px，最小1072px）完全同步 */
+  box-sizing: border-box !important;
+}
+
+.scene-inner-red {
+  background-size: 1600px 100%; /* 👑 背景最大拉伸宽度锁定为1600px，高度撑满 */
+  border-radius: 12px;
+  padding: 14px 20px;
+  align-items: center;
+  height: 188px; /* 👑 核心要诀：物理高度死锁为完美闭合的 188px */
+  box-sizing: border-box;
+  overflow: hidden; /* 👑 超过实时宽度时自动隐藏溢出部分 */
+  position: relative;
+}
+
+.scene-left-red {
+  width: 380px;
+  color: #fff;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start; /* 👑 核心要诀：顶部开始对齐，精准释放间距 */
+  align-self: flex-start; /* 👑 核心要诀：强力打破父弹性容器垂直居中限制，强行向上看齐！ */
+  box-sizing: border-box;
+  text-decoration: none; /* 去除超链接默认下划线 */
+  cursor: pointer;
+  flex-shrink: 0; /* 👑 核心要诀：防止标题区在缩小过程中被强行压缩挤爆 */
+}
+
+.s-h-group-red {
+  margin-top: 16px !important; /* 👑 核心要诀：父级14px padding-top + 16px margin-top = 精准30px顶部黄金间距 */
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 8px; /* 词语间距 */
+}
+
+.s-main-t-red {
+  font-size: 24px;
+  font-weight: 800;
+  color: #ffffff;
+  white-space: nowrap;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+.s-sub-t-red {
+  font-size: 24px;
+  font-weight: 800;
+  color: #ffffff;
+  white-space: nowrap;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+.scene-right-red {
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-end; /* 👑 核心要诀：始终在右侧对齐卡片，跟随剩余宽度移动 */
+  flex-grow: 1; /* 👑 核心要诀：占据左侧标题之外的全部剩余可用空间 */
+}
+
+.s-grid-h-red {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px; /* 间隙锁定为 16px */
+}
+
+.s-item-card-red {
+  width: 283px !important;
+  height: 160px !important;
+  flex: none !important; /* 无论浏览器如何变化，尺寸绝对不变 */
+  border-radius: 10px;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  display: flex; /* a标签表现为flex盒子 */
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.s-item-card-red:hover {
+  transform: translateY(-3px);
+}
+
+.card-whole-img {
+  width: 100%;
+  height: 100%;
+  object-fit: fill; /* 完全填充，完美适配283*160 */
+}
+
+/* 👑 智能自适应隐藏与循环显示逻辑 */
+
+/* 1. 当浏览器视口宽度变小到 1650px 以下时，优先隐藏副标题“一站全买齐”，并收纳左侧标题区为 180px */
+@media screen and (max-width: 1650px) {
+  .s-sub-t-red {
+    display: none !important;
+  }
+  .scene-left-red {
+    width: 180px !important;
+  }
+}
+
+/* 2. 当浏览器窗口宽度低于 1600px 时，隐藏第四个子卡片，由于空出卡片空间，副标题重新显现，左侧标题区恢复 380px */
+@media screen and (max-width: 1600px) {
+  .s-item-card-red:nth-child(4) {
+    display: none !important;
+  }
+  .s-sub-t-red {
+    display: block !important;
+  }
+  .scene-left-red {
+    width: 380px !important;
+  }
+}
+
+/* 3. 当浏览器窗口宽度低于 1350px 时，三个卡片再次吃完左移空间，再次隐藏副标题，收缩标题区为 180px */
+@media screen and (max-width: 1350px) {
+  .s-item-card-red:nth-child(4) {
+    display: none !important;
+  }
+  .s-sub-t-red {
+    display: none !important;
+  }
+  .scene-left-red {
+    width: 180px !important;
+  }
+}
+
+/* 4. 当浏览器窗口宽度低于 1300px 时，隐藏第三个子卡片，由于空间再次充裕，副标题再次显示，左侧标题区恢复为 380px */
+@media screen and (max-width: 1300px) {
+  .s-item-card-red:nth-child(4),
+  .s-item-card-red:nth-child(3) {
+    display: none !important;
+  }
+  .s-sub-t-red {
+    display: block !important;
+  }
+  .scene-left-red {
+    width: 380px !important;
+  }
+}
+</style>

src/views/home/datacomponents/JDUserPanel.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="user-panel-container">
+    <!-- 用户名片信息区 (大气舒展的布局) -->
+    <div class="user-profile-section">
+      <!-- 第一行：头像 + 姓名 (22px 字体) -->
+      <div class="profile-header flex">
+        <div class="avatar-box">
+          <img src="@/assets/images/pcdiy/logo2.png" class="avatar-img" />
+        </div>
+        <div class="profile-name-box">
+          <span class="profile-name">{{ userInfo.user?.nickName || '' }}</span>
+          <span class="vip-badge">企业会员</span>
+        </div>
+      </div>
+
+      <!-- 第二行 & 第三行：账号与公司，行间距拉开，字体大小为 14px -->
+      <div class="profile-details">
+        <div class="detail-row flex">
+          <span class="detail-label">采购账号：</span>
+          <span class="detail-value">{{ userInfo.user?.phonenumber || '' }}</span>
+        </div>
+        <div class="detail-row flex">
+          <span class="detail-label">归属公司：</span>
+          <span class="detail-value company">{{ userInfo.companyName || '' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 👑 帝王级黑金科技“企业金采VIP卡”面板 (保持其他部分样式不变) -->
+    <div class="luxury-credit-card">
+      <div class="card-inner">
+        <!-- 金采流光水印 -->
+        <div class="card-brand flex-between">
+          <span class="brand-name">CORPORATE VIP</span>
+          <span class="card-type">企业金采卡</span>
+        </div>
+
+        <!-- 金额明细 -->
+        <div class="card-balance-box">
+          <div class="balance-line">
+            <span class="lbl-gold">可用余额</span>
+            <span class="val-gold">¥{{ (parseInt(customerSalesInfoVo?.remainingQuota) || 0).toFixed(2) }}</span>
+          </div>
+          <div class="balance-line">
+            <span class="lbl-white">信用额度</span>
+            <span class="val-white">¥{{ (parseInt(customerSalesInfoVo?.creditAmount) || 0).toFixed(2) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部四个精致快捷待办入口 -->
+    <div class="todo-tools-grid">
+      <div class="todo-item">
+        <span class="todo-num">{{ countData.pendingapprovalCount || 0 }}</span>
+        <span class="todo-label">待审批</span>
+      </div>
+      <div class="todo-item">
+        <span class="todo-num">{{ countData.pendingReceiptCount || 0 }}</span>
+        <span class="todo-label">待收货</span>
+      </div>
+      <div class="todo-item">
+        <img src="@/assets/data/001.png" class="todo-icon" />
+        <span class="todo-label">退货/售后</span>
+      </div>
+      <div class="todo-item">
+        <img src="@/assets/data/002.png" class="todo-icon" />
+        <span class="todo-label">待评价</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  userInfo?: any;
+}
+const props = defineProps<Props>();
+// 纯展示的轻量级高奢用户面板组件
+
+import { getEnterpriseInfo } from '@/api/pc/enterprise';
+import { countOrder } from '@/api/home/index';
+
+const customerSalesInfoVo = ref<any>({});
+getEnterpriseInfo().then((res) => {
+  if (res.code == 200) {
+    if (res.data && res.data.customerSalesInfoVo) {
+      customerSalesInfoVo.value = res.data.customerSalesInfoVo;
+    }
+  }
+});
+
+const countData = ref<any>({});
+
+countOrder({}).then((res) => {
+  if (res.code == 200) {
+    countData.value = res.data || {};
+  }
+});
+</script>
+
+<style scoped>
+.user-panel-container {
+  width: 281px;
+  height: 268px;
+  background: #fff7f7;
+  border-radius: 12px;
+  box-sizing: border-box;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
+}
+
+/* 重新设计的大气舒展名片区 */
+.user-profile-section {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px; /* 姓名与下行信息的行间距，足够大气 */
+}
+
+.avatar-box {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #ffffff;
+  border: 2px solid #e1251b; /* 精致亮红边框 */
+  box-shadow: 0 0 10px rgba(225, 37, 27, 0.25); /* 柔和红光外发光 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-name-box {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.profile-name {
+  font-size: 22px; /* 字体大小锁定为 22px */
+  font-weight: 800; /* 大气粗体 */
+  color: #1a1a1a;
+  line-height: 1.1;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  letter-spacing: -0.5px;
+}
+
+.vip-badge {
+  font-size: 10px;
+  color: #ffffff;
+  background: linear-gradient(135deg, #ff5b5b 0%, #e1251b 100%); /* 渐变红勋章，炫酷精致 */
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-left: 8px;
+  font-weight: 700;
+  line-height: 14px;
+  white-space: nowrap;
+  box-shadow: 0 2px 5px rgba(225, 37, 27, 0.15);
+}
+
+.profile-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* 详细信息上下行间距拉开，足够大气舒展 */
+  padding-left: 2px;
+}
+
+.detail-row {
+  display: flex;
+  align-items: center;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 12px; /* 字体大小调整为 12px */
+  line-height: 1.2;
+}
+
+.detail-label {
+  color: #8c8c8c;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.detail-value {
+  color: #1a1a1a;
+  font-weight: 600;
+}
+
+.company {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 170px;
+}
+
+/* 👑 帝王级红金科技“企业金采VIP卡”面板 */
+.luxury-credit-card {
+  height: 108px;
+  width: 100%;
+  background: linear-gradient(135deg, #a8201a 0%, #6e120d 100%); /* 与主题红色系搭配的奢华深尊红渐变 */
+  border: 1px solid #e5c07b; /* 典雅玫瑰金边框，彰显尊贵身份 */
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 10px 14px 14px 14px; /* 底部内边距增加到14px，让底边间距更加大气舒展 */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 8px; /* 适度缩小外边距确保总高完美 */
+  box-shadow: 0 4px 15px rgba(110, 18, 13, 0.25); /* 带有主题色泽的浮空投影 */
+  position: relative;
+  overflow: hidden;
+}
+
+/* 渐变流光掠影效果，更加炫酷 */
+.luxury-credit-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -50%;
+  width: 30%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
+  transform: skewX(-25deg);
+  animation: shine 6s infinite ease-in-out;
+}
+
+@keyframes shine {
+  0% {
+    left: -50%;
+  }
+  30% {
+    left: 150%;
+  }
+  100% {
+    left: 150%;
+  }
+}
+
+.card-brand {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  border-bottom: 1px dashed rgba(229, 192, 123, 0.25); /* 虚线金丝防伪线 */
+  padding-bottom: 4px;
+}
+
+.brand-name {
+  font-size: 12px; /* 统一调整为 12px 字体 */
+  font-weight: 800;
+  color: rgba(229, 192, 123, 0.85); /* 玫瑰金高亮 */
+  letter-spacing: 1px;
+}
+
+.card-type {
+  font-size: 12px; /* 统一调整为 12px 字体 */
+  font-weight: 800;
+  color: #e5c07b; /* 纯金色 */
+  letter-spacing: 0.5px;
+}
+
+.card-balance-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.balance-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+
+.lbl-gold {
+  font-size: 12px; /* 统一调整为 12px 字体 */
+  color: rgba(255, 240, 230, 0.85); /* 舒适柔和的白金色 */
+}
+
+.val-gold {
+  font-size: 16px;
+  font-weight: 900;
+  color: #f8d388; /* 耀眼的金黄色金额 */
+  letter-spacing: -0.2px;
+}
+
+.lbl-white {
+  font-size: 12px; /* 统一调整为 12px 字体 */
+  color: rgba(255, 240, 230, 0.8); /* 舒适柔和的白金色 */
+}
+
+.val-white {
+  font-size: 15px;
+  font-weight: 900;
+  color: #ffffff; /* 纯白信用额度 */
+  letter-spacing: -0.2px;
+}
+
+/* 底部四个代办按钮布局 */
+.todo-tools-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  justify-items: center;
+  align-items: center;
+  margin-top: auto; /* 自动撑满剩余空间靠底分布 */
+  padding-bottom: 2px;
+  width: 100%;
+}
+
+.todo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 100%;
+  transition: transform 0.2s ease;
+}
+
+.todo-item:hover {
+  transform: translateY(-2px);
+}
+
+.todo-num {
+  font-size: 16px;
+  font-weight: 800;
+  color: #1a1a1a;
+  height: 20px;
+  line-height: 20px;
+  transition: color 0.2s ease;
+}
+
+.todo-item:hover .todo-num {
+  color: #e1251b;
+}
+
+.todo-icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.todo-item:hover .todo-icon {
+  transform: scale(1.08);
+}
+
+.todo-label {
+  font-size: 12px;
+  color: #333333;
+  margin-top: 6px;
+  white-space: nowrap;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.todo-item:hover .todo-label {
+  color: #e1251b;
+}
+</style>

src/views/home/datacomponents/jd-repro.css

@@ -0,0 +1,86 @@
+/* 京东企业购 最终修复版全局样式 */
+:root {
+  --jd-red: #E1251B;
+  --jd-bg: #F4F4F4;
+  --jd-white: #FFFFFF;
+  --jd-text-3: #333333;
+  --jd-text-6: #666666;
+  --jd-text-9: #999999;
+  --radius-lg: 12px;
+  --radius-sm: 8px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background-color: var(--jd-bg);
+  color: var(--jd-text-3);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+ul, ol { list-style: none; }
+a { text-decoration: none; color: inherit; }
+
+/* 核心容器 */
+.w {
+  margin: 0 auto;
+  position: relative;
+}
+
+/* 媒体查询适配容器宽度 */
+@media screen and (min-width: 1600px) {
+  .w { width: 1600px; }
+}
+
+@media screen and (min-width: 1210px) and (max-width: 1599px) {
+  .w { width: 1190px; }
+}
+
+@media screen and (max-width: 1209px) {
+  .w { width: 990px; }
+}
+
+@media screen and (min-width: 1210px) and (max-width: 1599px) {
+  .w { width: 1190px; }
+}
+
+@media screen and (max-width: 1209px) {
+  .w { width: 990px; }
+}
+
+/* Flex 布局工具 */
+.flex { display: flex; }
+.flex-1 { flex: 1; }
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; }
+.flex-column { display: flex; flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+
+.clearfix::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+/* 通用卡片样式 */
+.jd-card {
+  background: var(--jd-white);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.tag-red {
+  background: var(--jd-red);
+  color: #fff;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 12px;
+  display: inline-block;
+  line-height: 1.4;
+}

src/views/home/index-data copy.vue

@@ -1,1105 +0,0 @@
-<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="407px">
-            <el-carousel-item v-for="item in carouselList" :key="item">
-              <img :src="item.imageUrl" alt="" />
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <div class="head-box">
-          <div v-for="(item, index) in AdList" :key="index" class="head-item" @click="onPath('/plan?id=' + item.id)">
-            <img :src="item.imageUrl" alt="" />
-          </div>
-        </div>
-      </div>
-      <!-- 右边 -->
-      <div class="head-right">
-        <div v-if="userInfo.userId" class="order-bos flex-column-between">
-          <div class="flex-row-start">
-            <img src="@/assets/images/logo2.png" alt="" />
-            <div class="ellipsis">{{ userInfo.nickName }}</div>
-          </div>
-          <div class="flex-row-start">
-            <div class="flex-1 flex-column-center">
-              <div>待付款</div>
-              <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
-            </div>
-            <div class="flex-1 flex-column-center">
-              <div>待发货</div>
-              <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
-            </div>
-            <div class="flex-1 flex-column-center">
-              <div>待收货</div>
-              <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="login-bos" v-else>
-          <div class="login-box">
-            <img src="@/assets/images/logo2.png" alt="" />
-            <div>
-              <div class="login1">您好,欢迎来到优易达</div>
-              <div class="login2">请先登录</div>
-            </div>
-          </div>
-          <div class="loginBtn-bos flex-row-center">
-            <div @click="onPath('/login')" class="login-bnt1 flex-row-center">登录</div>
-            <div @click="onPath('/breg')" class="login-bnt2 flex-row-center">注册</div>
-          </div>
-        </div>
-        <!-- <div class="login-bos">
-          <div class="login-box">
-            <img :src="userInfo.avatar ? userInfo.avatar : profile" alt="" />
-            <div>
-              <div class="login1">您好,欢迎来到优易达</div>
-              <div class="login2">{{ userInfo.nickName ? userInfo.nickName : '请先登录' }}</div>
-            </div>
-          </div>
-          <div class="login-btn">
-            <el-button v-if="!userInfo.nickName" type="primary" round size="small" style="width: 64px" @click="onPath('/login')">登录</el-button>
-            <el-button v-if="!userInfo.nickName" type="primary" plain round size="small" style="width: 64px">注册</el-button>
-            <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onlogout()">退出</el-button>
-          </div>
-        </div> -->
-        <div class="real-time">
-          <div class="real-title flex-row-between">
-            <div class="real1">优易资讯</div>
-            <div class="real2 flex-row-start">
-              <!-- <div>更多</div>
-              <el-icon :size="13" color="#83899F">
-                <ArrowRight />
-              </el-icon> -->
-            </div>
-          </div>
-          <template v-for="(item, index) in realList" :key="index">
-            <div @click="onPath('/solve/real?id=' + item.id)" class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
-          </template>
-        </div>
-        <div class="interests">
-          <div class="interests-title">企业会员权益</div>
-          <div class="interests-bos">
-            <div v-for="(item, index) in interestsList" :key="index" class="interests-item flex-column-center">
-              <img :src="item.imageUrl" alt="" />
-              <div>{{ item.title }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 循环-商品 -->
-    <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>
-</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();
-
-//当前客户下的站点地址
-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';
-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;
-
-    .classify {
-      width: 234px;
-      height: 540px;
-      background: #ffffff;
-
-      &.classify-show {
-        position: absolute;
-        z-index: 10;
-        height: auto;
-        min-height: 540px;
-      }
-
-      .classify-list {
-        width: 100%;
-        height: 40px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        padding-left: 15px;
-        position: relative;
-
-        &.classify-hig {
-          border: 1px solid var(--el-color-primary);
-          border-right: 0px solid var(--el-color-primary);
-        }
-
-        .label {
-          max-width: 100px;
-          font-weight: 600;
-          font-size: 14px;
-          color: #101828;
-          white-space: nowrap;
-          margin-right: 10px;
-
-          &:hover {
-            color: var(--el-color-primary);
-          }
-        }
-
-        .info {
-          max-width: 50px;
-          font-size: 12px;
-          color: #364153;
-          white-space: nowrap;
-
-          &.info1 {
-            margin-right: 6px;
-          }
-
-          &:hover {
-            color: var(--el-color-primary);
-          }
-        }
-
-        .classify-border {
-          position: absolute;
-          right: -1px;
-          top: 0px;
-          width: 1px;
-          height: 38px;
-          background-color: #ffffff;
-          z-index: 2;
-        }
-      }
-    }
-
-    .classify-bos {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 966px;
-      height: 100%;
-      border: 1px solid var(--el-color-primary);
-      background-color: #ffffff;
-      overflow-y: auto;
-      padding-left: 30px;
-      z-index: 10;
-
-      .classify-item {
-        display: flex;
-        padding-top: 10px;
-        border-bottom: 1px solid #e5e7eb;
-
-        .two-level {
-          width: 90px;
-          font-size: 14px;
-          color: var(--el-color-primary);
-          cursor: pointer;
-        }
-
-        .classify-icon {
-          margin: 4px 15px 0 15px;
-        }
-
-        .classify-label {
-          display: flex;
-          flex-wrap: wrap;
-          flex: 1;
-          font-size: 14px;
-          color: #364153;
-
-          div {
-            margin-right: 20px;
-            margin-bottom: 10px;
-            cursor: pointer;
-
-            &:hover {
-              color: var(--el-color-primary);
-            }
-          }
-        }
-      }
-    }
-
-    // 头部中间
-    .head-bos {
-      flex: 1;
-
-      .carousel {
-        width: 100%;
-        height: 407px;
-        background: #ffffff;
-
-        img {
-          width: 100%;
-          height: 407px;
-        }
-      }
-
-      .head-box {
-        width: 100%;
-        height: 122px;
-        margin-top: 10px;
-        display: flex;
-        gap: 0 10px;
-
-        .head-item {
-          flex: 1;
-          background-color: #ffffff;
-          height: 122px;
-          display: flex;
-          // padding-left: 20px;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 5px;
-          overflow: hidden;
-
-          img {
-            width: 100%;
-            height: 100%;
-            // width: 84px;
-            // height: 84px;
-            // margin-right: 10px;
-            // border-radius: 10px;
-          }
-
-          .head-title {
-            .head1 {
-              font-weight: 550;
-              font-size: 22px;
-              color: #101828;
-            }
-
-            .head2 {
-              width: 76px;
-              height: 21px;
-              border-radius: 34px;
-              border: 1px solid #000000;
-              font-size: 12px;
-              color: #000000;
-              margin-top: 6px;
-            }
-          }
-        }
-      }
-    }
-
-    //右边
-    .head-right {
-      width: 230px;
-      height: 540px;
-      background: #ffffff;
-      display: flex;
-      flex-direction: column;
-
-      .login-bos {
-        width: calc(100% - 20px);
-        height: 110px;
-        border-bottom: 1px solid #e5e7eb;
-        margin: 0 10px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        padding: 16px 0;
-
-        .login-box {
-          display: flex;
-          align-items: center;
-
-          img {
-            width: 40px;
-            height: 40px;
-            margin-right: 8px;
-            border-radius: 40px;
-          }
-
-          .login1 {
-            font-size: 13px;
-            color: #444444;
-          }
-
-          .login2 {
-            margin-top: 2px;
-            font-size: 12px;
-            color: #6a7282;
-          }
-        }
-
-        .loginBtn-bos {
-          width: 100%;
-
-          .login-bnt1 {
-            width: 64px;
-            height: 24px;
-            background-color: #e7000b;
-            color: #ffffff;
-            border-radius: 24px;
-            font-size: 12px;
-            cursor: pointer;
-          }
-
-          .login-bnt2 {
-            width: 64px;
-            height: 24px;
-            border: 1px solid #e7000b;
-            color: #e7000b;
-            border-radius: 24px;
-            font-size: 12px;
-            margin-left: 10px;
-            cursor: pointer;
-          }
-        }
-      }
-
-      // .login-bos {
-      //   width: calc(100% - 20px);
-      //   height: 110px;
-      //   border-bottom: 1px solid #e5e7eb;
-      //   margin: 0 10px;
-      //   display: flex;
-      //   flex-direction: column;
-      //   justify-content: space-between;
-      //   padding: 16px 0;
-
-      //   .login-box {
-      //     display: flex;
-      //     align-items: center;
-
-      //     img {
-      //       width: 40px;
-      //       height: 40px;
-      //       margin-right: 8px;
-      //       border-radius: 40px;
-      //     }
-
-      //     .login-btn {
-      //       width: 100%;
-      //     }
-
-      //     .login1 {
-      //       font-size: 13px;
-      //       color: #444444;
-      //     }
-
-      //     .login2 {
-      //       margin-top: 2px;
-      //       font-size: 12px;
-      //       color: #6a7282;
-      //     }
-      //   }
-      // }
-
-      .order-bos {
-        width: calc(100% - 20px);
-        height: 110px;
-        font-size: 14px;
-        padding: 16px 0;
-        border-bottom: 1px solid #e5e7eb;
-        margin: 0 10px;
-        img {
-          width: 28px;
-          height: 28px;
-        }
-        .order-num {
-          color: #e7000b;
-          font-size: 14px;
-          margin-top: 2px;
-        }
-      }
-
-      .real-time {
-        width: calc(100% - 20px);
-        height: 227px;
-        border-bottom: 1px solid #e5e7eb;
-        margin: 0 10px;
-        padding-top: 15px;
-
-        .real-title {
-          position: relative;
-          margin-bottom: 12px;
-
-          &::after {
-            content: '';
-            top: 3px;
-            left: 0;
-            position: absolute;
-            width: 4px;
-            height: 14px;
-            background: var(--el-color-primary);
-          }
-
-          .real1 {
-            font-weight: 600;
-            font-size: 14px;
-            color: #1d2129;
-            padding-left: 15px;
-          }
-
-          .real2 {
-            font-size: 13px;
-            color: #83899f;
-            cursor: pointer;
-          }
-        }
-
-        .real-list {
-          width: 100%;
-          font-size: 12px;
-          color: #1d2129;
-          margin-bottom: 12px;
-          cursor: pointer;
-
-          &:hover {
-            color: var(--el-color-primary);
-          }
-        }
-      }
-
-      .interests {
-        flex: 1;
-        width: calc(100% - 20px);
-        margin: 0 10px;
-        padding-top: 15px;
-
-        .interests-title {
-          position: relative;
-          font-weight: 600;
-          font-size: 14px;
-          color: #1d2129;
-          padding-left: 15px;
-
-          &::after {
-            content: '';
-            top: 3px;
-            left: 0;
-            position: absolute;
-            width: 4px;
-            height: 14px;
-            background: var(--el-color-primary);
-          }
-        }
-
-        .interests-bos {
-          display: flex;
-          flex-wrap: wrap;
-
-          .interests-item {
-            width: 33.333%;
-            font-size: 12px;
-            color: #101828;
-            margin-top: 15px;
-            cursor: pointer;
-
-            &:hover {
-              color: var(--el-color-primary);
-            }
-
-            img {
-              width: 34px;
-              height: 34px;
-              margin-bottom: 7px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  //标题
-  .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;
-      }
-    }
-  }
-}
-</style>

src/views/home/index-dataDiy.vue

@@ -1,31 +1,1537 @@
 <template>
-  <div class="w100%">
-    <diyIndex v-if="dataInfo && dataInfo.isHome" :dataInfo="dataInfo"></diyIndex>
-    <template v-else>
-      <div class="h-[30px]"></div>
-      <el-empty description="您的专属页面还未设计，请联系管理员~" />
-    </template>
+  <div class="jd-app" :class="{ 'expanded': !isSidebarCollapsed }">
+    <!-- 👑 殿堂级左侧主导航抽屉栏 (折叠/展开动画) -->
+    <div class="left-sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
+      <!-- 控制项：展开/收起 -->
+      <div class="sidebar-item ctrl-item" @click="isSidebarCollapsed = !isSidebarCollapsed">
+        <div class="item-icon-wrapper">
+          <svg class="s-icon ctrl-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" />
+          </svg>
+        </div>
+        <span class="item-text">{{ isSidebarCollapsed ? '展开' : '收起' }}</span>
+      </div>
+
+      <!-- 菜单项列表 -->
+      <div class="sidebar-menu-list">
+        <!-- 首页 (无子菜单) -->
+        <div class="sidebar-item active">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke-linecap="round" stroke-linejoin="round" />
+              <polyline points="9 22 9 12 15 12 15 22" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">首页</span>
+        </div>
+
+        <!-- 工作台 (无子菜单) -->
+        <div class="sidebar-item">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="2" y="3" width="20" height="14" rx="2" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="8" y1="21" x2="16" y2="21" stroke-linecap="round" />
+              <line x1="12" y1="17" x2="12" y2="21" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '工作台' : '采购工作台' }}</span>
+        </div>
+
+        <!-- 采购单管理 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.purchase }" @click="toggleMenu('purchase')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 11l3 3L22 4" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '采购单' : '采购单管理' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 窄栏折叠悬停二级菜单 (通用 absolute 气泡弹出，完美卡合在对应项右侧) -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">
+              我的购物车
+              <span class="cart-badge">1</span>
+            </div>
+            <div class="sub-item">我的采购单</div>
+            <div class="sub-item">清单选品</div>
+            <div class="sub-item">我的收藏</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.purchase }">
+          <div class="sub-item">
+            我的购物车
+            <span class="cart-badge">1</span>
+          </div>
+          <div class="sub-item">我的采购单</div>
+          <div class="sub-item">清单选品</div>
+          <div class="sub-item">我的收藏</div>
+        </div>
+
+        <!-- 非招标采购 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.nonTender }" @click="toggleMenu('nonTender')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="7" width="18" height="13" rx="2" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M20 7h-9M14 3L7 21" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="item-text">非招标采购</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">竞价采购</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.nonTender }">
+          <div class="sub-item">竞价采购</div>
+        </div>
+
+        <!-- 订单管理 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.order }" @click="toggleMenu('order')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round" stroke-linejoin="round" />
+              <polyline points="14 2 14 8 20 8" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="16" y1="13" x2="8" y2="13" stroke-linecap="round" />
+              <line x1="16" y1="17" x2="8" y2="17" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '订单' : '订单管理' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">我的订单</div>
+            <div class="sub-item">订单打印</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.order }">
+          <div class="sub-item">我的订单</div>
+          <div class="sub-item">订单打印</div>
+        </div>
+
+        <!-- 发票管理 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.invoice }" @click="toggleMenu('invoice')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="2" y="4" width="20" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="12" y1="4" x2="12" y2="20" stroke-linecap="round" />
+              <line x1="2" y1="12" x2="22" y2="12" stroke-linecap="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '发票' : '发票管理' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">普票抬头管理</div>
+            <div class="sub-item">开具发票</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.invoice }">
+          <div class="sub-item">普票抬头管理</div>
+          <div class="sub-item">开具发票</div>
+        </div>
+
+        <!-- 售后管理 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.afterSale }" @click="toggleMenu('afterSale')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '售后' : '售后管理' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">退换货</div>
+            <div class="sub-item">售后记录</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.afterSale }">
+          <div class="sub-item">退换货</div>
+          <div class="sub-item">售后记录</div>
+        </div>
+
+        <!-- 财务管理 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.finance }" @click="toggleMenu('finance')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M12 8V16M8 12h8" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '财务' : '财务管理' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">结算中心</div>
+            <div class="sub-item">自助认款</div>
+            <div class="sub-item">合并支付</div>
+            <div class="sub-item">企业结算</div>
+            <div class="sub-item">企业金采</div>
+            <div class="sub-item">金采报销</div>
+            <div class="sub-item">商家结算</div>
+            <div class="sub-item">我的余额</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.finance }">
+          <div class="sub-item">结算中心</div>
+          <div class="sub-item">自助认款</div>
+          <div class="sub-item">合并支付</div>
+          <div class="sub-item">企业结算</div>
+          <div class="sub-item">企业金采</div>
+          <div class="sub-item">金采报销</div>
+          <div class="sub-item">商家结算</div>
+          <div class="sub-item">我的余额</div>
+        </div>
+
+        <!-- 数据中心 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.dataCenter }" @click="toggleMenu('dataCenter')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="20" x2="18" y2="10" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="12" y1="20" x2="12" y2="4" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="6" y1="20" x2="6" y2="14" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '数据' : '数据中心' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">下载中心</div>
+            <div class="sub-item">数据报表</div>
+            <div class="sub-item">明细数据报表</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.dataCenter }">
+          <div class="sub-item">下载中心</div>
+          <div class="sub-item">数据报表</div>
+          <div class="sub-item">明细数据报表</div>
+        </div>
+
+        <!-- 地址管理 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.address }" @click="toggleMenu('address')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="12" cy="10" r="3" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '地址' : '地址管理' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">我的地址</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.address }">
+          <div class="sub-item">我的地址</div>
+        </div>
+
+        <!-- 账号安全 -->
+        <div class="sidebar-item has-sub" :class="{ 'sub-open': openMenus.security }" @click="toggleMenu('security')">
+          <div class="item-icon-wrapper">
+            <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+          <span class="item-text">{{ isSidebarCollapsed ? '安全' : '账号安全' }}</span>
+          <svg class="arrow-icon" v-if="!isSidebarCollapsed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+
+          <!-- 折叠悬停二级菜单 -->
+          <div class="sidebar-hover-pop" v-if="isSidebarCollapsed">
+            <div class="sub-item">账号设置</div>
+            <div class="sub-item">绑定员工</div>
+          </div>
+        </div>
+        <!-- 二级子菜单 -->
+        <div class="sidebar-sub-menu" v-if="!isSidebarCollapsed" :class="{ 'show': openMenus.security }">
+          <div class="sub-item">账号设置</div>
+          <div class="sub-item">绑定员工</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 👑 殿堂级右侧悬浮挂条 -->
+    <div class="right-toolbar">
+      <!-- 采购单 (悬停时呈现为纯大红背景 58x58，图2完美复刻) -->
+      <div class="toolbar-item selection-item">
+        <!-- 购物车微型数字红圈角标 -->
+        <div class="cart-badge">5</div>
+        <div class="toolbar-icon-wrapper">
+          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="9" cy="21" r="1" />
+            <circle cx="20" cy="21" r="1" />
+            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
+          </svg>
+        </div>
+        <span class="toolbar-text">采购单</span>
+      </div>
+
+      <!-- 企业消息 (悬停时呈现为纯大红背景 58x58，图3完美复刻) -->
+      <div class="toolbar-item msg-item">
+        <div class="toolbar-icon-wrapper">
+          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+        <span class="toolbar-text">消息</span>
+      </div>
+
+      <!-- 我的客服 (悬停时呈现为纯大红背景 58x58，并向左滑出精致气泡面板，图4完美复刻) -->
+      <div class="toolbar-item service-item">
+        <div class="toolbar-icon-wrapper">
+          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+        </div>
+        <span class="toolbar-text">客服</span>
+
+        <!-- 👑 精致高保真客服浮空对话框 (图4一比一完美复刻) -->
+        <div class="service-popover">
+          <div class="pop-title">企业采购在线客服</div>
+          <div class="pop-action">
+            <svg class="pop-chat-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z" />
+            </svg>
+            点击咨询
+          </div>
+        </div>
+      </div>
+
+      <!-- 回到顶部 (悬停时呈现为纯大红背景 58x58，图5完美复刻) -->
+      <div class="toolbar-item back-top-item" @click="scrollToTop">
+        <div class="toolbar-icon-wrapper" style="margin-bottom: 0 !important; height: 18px">
+          <svg class="t-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polyline points="18 15 12 9 6 15" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- 1. 顶部 Header (Logo, 搜索) -->
+    <JDHeader :userInfo="userInfo" />
+
+    <!-- 2. 核心 Banner 区域 -->
+    <section class="banner-area w">
+      <!-- 右侧主内容区域，霸占 1600px 全宽 -->
+      <div class="banner-layout flex">
+        <!-- 左侧大列 (导航 + 分类与广告) -->
+        <div class="main-column flex-1 flex-column">
+          <!-- 顶部的导航条 (尺寸为1040*48px，采用图2的简洁横向设计) -->
+          <div class="nav-bar">
+            <!-- 左滑按钮 -->
+            <button v-show="showLeftNavBtn" class="nav-scroll-btn left-btn" @click="scrollNav('left')">
+              <svg viewBox="0 0 24 24" class="scroll-arrow">
+                <path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+            <div class="nav-bar-scroll-wrapper" ref="navScrollRef" @scroll="checkNavScroll">
+              <ul class="nav-list">
+                <template v-for="(item, index) in navItems" :key="index">
+                  <li :class="{ active: index === 0 }" @click="onPath(item.linkUrl)">
+                    {{ item.title }}
+                  </li>
+                  <span class="nav-divider" v-if="Number(index) < navItems.length - 1">|</span>
+                </template>
+              </ul>
+            </div>
+            <!-- 右滑按钮 -->
+            <button v-show="showRightNavBtn" class="nav-scroll-btn right-btn" @click="scrollNav('right')">
+              <svg viewBox="0 0 24 24" class="scroll-arrow">
+                <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 下方：分类与广告栏并排 -->
+          <div class="banner-bottom flex flex-1">
+            <!-- 左侧分类菜单 (常驻显示，尺寸不变) -->
+            <aside class="side-category">
+              <JDCategory />
+            </aside>
+
+            <!-- 右侧广告组合 -->
+            <div class="ad-group flex-1">
+              <JDBannerCards />
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧大列：高奢重构两段式布局 (281 * 400px，分为上下两个部分，中间间隔 16px) -->
+        <div class="user-sidebar">
+          <JDUserPanel :userInfo="userInfo" />
+          <div class="purchase-classroom">
+            <div class="classroom-header">
+              <span class="classroom-title">采购课堂</span>
+              <span class="classroom-more">查看全部</span>
+            </div>
+            <div class="classroom-content">
+              <div class="classroom-time">
+                <span class="c-year">2026年</span>
+                <span class="c-week">第 21 周</span>
+              </div>
+              <div class="classroom-info">
+                <p class="c-desc">防洪防汛特辑 | 工厂园区篇</p>
+              </div>
+              <div class="classroom-cover">
+                <img src="@/assets/data/classroom_cover.png" alt="课程封面" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 3. 下方模块 -->
+    <JDSceneRed />
+    <JDProducts />
   </div>
 </template>
 
 <script setup lang="ts">
-import { getBigCustomerPlatformIndexDiyPcPage } from '@/api/home/diy';
-import diyIndex from '@/views/home/pccomponents/index.vue';
-import { stationStore } from '@/store/modules/station';
-const dataInfo = ref<any>(null);
-const station = stationStore();
-onMounted(() => {
-  loadComponents();
+import JDHeader from '@/views/home/datacomponents/JDHeader.vue';
+import JDCategory from '@/views/home/datacomponents/JDCategory.vue';
+import JDBannerCards from '@/views/home/datacomponents/JDBannerCards.vue';
+import JDUserPanel from '@/views/home/datacomponents/JDUserPanel.vue';
+import JDSceneRed from '@/views/home/datacomponents/JDSceneRed.vue';
+import JDProducts from '@/views/home/datacomponents/JDProducts.vue';
+import '@/views/home/datacomponents/jd-repro.css';
+import { headerCategoryList } from '@/api/home/index-data';
+import { getInfo } from '@/api/login';
+import { computed } from 'vue';
+import { onPath } from '@/utils/siteConfig';
+
+const userInfo = ref<any>({});
+getInfo().then((res) => {
+  if (res.code == 200) {
+    userInfo.value = res.data;
+  }
+});
+
+const navItems = ref<any>([]);
+headerCategoryList({}).then((res) => {
+  if (res.code == 200) {
+    document.documentElement.style.setProperty('--hover-data3', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
+    navItems.value = res.rows;
+  }
+});
+
+const isSidebarCollapsed = ref(true);
+
+// 一二级子菜单的高保真展开折叠状态管理 (默认展开图2、图3中所有可展开的项，且地址、账号默认关闭符合图2初始态)
+const openMenus = ref({
+  purchase: true, // 采购单管理，默认展开
+  nonTender: false, // 非招标采购，默认闭合 (图2为闭合，小箭头向下)
+  order: true, // 订单管理，默认展开
+  invoice: true, // 发票管理，默认展开
+  afterSale: true, // 售后管理，默认展开
+  finance: true, // 财务管理，默认展开
+  dataCenter: true, // 数据中心，默认展开
+  address: false, // 地址管理，图2为闭合，图3为展开
+  security: false // 账号安全，图2为闭合，图3为展开
 });
 
-// 加载组件
-const loadComponents = async () => {
-  getBigCustomerPlatformIndexDiyPcPage({ siteId: station.stationData.id }).then((res) => {
-    if (res.code == 200) {
-      dataInfo.value = res.data;
-    }
-  });
+// 通用子菜单展开/闭合切换处理器，带窄栏时自动展宽逻辑
+const toggleMenu = (key) => {
+  if (isSidebarCollapsed.value) {
+    isSidebarCollapsed.value = false;
+    openMenus.value[key] = true;
+  } else {
+    openMenus.value[key] = !openMenus.value[key];
+  }
+};
+
+// 完美向后兼容原先对采购单管理展开状态的引用
+const isPurchaseMenuOpen = computed(() => openMenus.value.purchase);
+const handlePurchaseClick = () => toggleMenu('purchase');
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+const isLargeScreen = ref(window.innerWidth >= 1600);
+const adHovered = ref(false);
+const check = () => {
+  isLargeScreen.value = window.innerWidth >= 1600;
+};
+
+const navScrollRef = ref(null);
+const showLeftNavBtn = ref(false);
+const showRightNavBtn = ref(false);
+
+const checkNavScroll = () => {
+  if (!navScrollRef.value) return;
+  const { scrollLeft, scrollWidth, clientWidth } = navScrollRef.value;
+  showLeftNavBtn.value = scrollLeft > 5;
+  showRightNavBtn.value = scrollWidth - clientWidth - scrollLeft > 5;
+};
+
+const scrollNav = (direction) => {
+  if (!navScrollRef.value) return;
+  const amount = 200;
+  if (direction === 'left') {
+    navScrollRef.value.scrollLeft -= amount;
+  } else {
+    navScrollRef.value.scrollLeft += amount;
+  }
+  setTimeout(checkNavScroll, 300);
 };
+
+const showSceneCat = ref(false);
+
+onMounted(() => {
+  window.addEventListener('resize', check);
+  window.addEventListener('resize', checkNavScroll);
+  setTimeout(checkNavScroll, 100);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', check);
+  window.removeEventListener('resize', checkNavScroll);
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+/* ==================== 💎 全局版心控制 (最小 1072px 宽度，最大 1600px 宽度) ==================== */
+.w {
+  width: calc(100% - 180px) !important;
+  max-width: 1600px !important;
+  min-width: 1072px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  box-sizing: border-box !important;
+}
+
+.jd-app {
+  width: 100%;
+  background: #f8f8f8;
+  min-height: 100vh;
+  padding-left: 0 !important; /* 彻底不占用右侧适配宽度空间，保持右侧主体版心完全垂直居中 */
+  box-sizing: border-box;
+}
+
+.jd-app.expanded {
+  padding-left: 0 !important;
+}
+
+/* ==================== 👑 左侧主导航抽屉栏样式 ==================== */
+.left-sidebar {
+  position: fixed;
+  left: 0;
+  top: 44px; /* 完美贴紧 44px 顶栏下沿，吸顶固定 */
+  height: calc(100vh - 44px);
+  width: 150px !important; /* 展开宽度锁定为 150px */
+  background: #fafafa;
+  border-right: 1px solid #eaeaea;
+  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding-top: 10px; /* 顶部保留微小精致间距，让展开顶格展示 */
+}
+
+.left-sidebar.collapsed {
+  width: 54px !important; /* 折叠宽度锁定为 54px */
+  overflow: visible !important;
+}
+
+/* 顶部控制栏 */
+.ctrl-item {
+  border-bottom: 1px solid #eaeaea;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+.ctrl-item:hover .ctrl-icon {
+  transform: rotate(90deg);
+}
+.ctrl-icon {
+  transition: transform 0.3s ease;
+}
+
+/* 通用项 (展开状态下一级菜单) */
+.sidebar-item {
+  height: 40px !important; /* 展开状态下主菜单单项高度设为 40px */
+  padding: 0 12px !important; /* 缩减 padding 以适配 150px 的精致宽度 */
+  display: flex;
+  align-items: center;
+  color: #333333 !important; /* 一级菜单默认字体颜色为高级深黑 (图2) */
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  margin: 2px 8px !important; /* 背景高亮内缩，留出精致边距 (一比一图2) */
+  border-radius: 6px !important; /* 精致圆角高亮，拒绝生硬直角 */
+}
+
+.left-sidebar.collapsed .sidebar-item {
+  height: 52px !important; /* 折叠状态下，为 54px 宽度匹配更紧致的 52px 高度 */
+  padding: 0 !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
+  width: 46px !important; /* 窄栏下宽度稍内缩，以匹配 margin */
+  margin: 3px 4px !important; /* 折叠下精致间距 */
+  border-radius: 6px !important;
+}
+
+/* 图标容器 (高度统一的淡橘红色) */
+.item-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px !important; /* 缩短图标与文字间距 */
+  color: #ef5350 !important; /* 默认一级菜单图标采用高度一致、极其精致的定制红粉色 (图2) */
+  transition: color 0.2s ease;
+}
+.left-sidebar.collapsed .item-icon-wrapper {
+  margin-right: 0 !important;
+  margin-bottom: 3px !important;
+  color: #ef5350 !important;
+}
+
+.s-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* 文字 */
+.item-text {
+  font-size: 14px !important; /* 主菜单文字大小锁定为 14px */
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图4 */
+  color: #333333 !important; /* 主菜单默认字体颜色为图2深黑 */
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+.left-sidebar.collapsed .item-text {
+  font-size: 12px !important; /* 折叠菜单文字大小锁定为 12px (图2) */
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图2 */
+  color: #000000d1 !important; /* 折叠菜单默认字体颜色为 #000000D1 (图2) */
+  font-weight: normal !important;
+  max-width: 38px !important; /* 限制最大宽度，正好使“非招标采购”精准折行成“非招标”和“采购” */
+  white-space: normal !important; /* 允许换行 (图2) */
+  text-align: center !important; /* 居中对齐 */
+  line-height: 1.2 !important; /* 精致窄行高 */
+  display: block !important;
+}
+
+/* 展开状态右侧小箭头 */
+.arrow-icon {
+  position: absolute;
+  right: 12px;
+  width: 12px;
+  height: 12px;
+  color: #999;
+  transition: transform 0.3s ease;
+}
+.sub-open .arrow-icon {
+  transform: rotate(180deg);
+  color: #e1251b !important; /* 展开时小箭头高亮亮红 */
+}
+
+/* 列表容器 */
+.sidebar-menu-list {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.sidebar-menu-list::-webkit-scrollbar {
+  display: none;
+}
+
+/* 折叠窄栏状态下，列表容器允许悬浮窗溢出显示，防截断 */
+.left-sidebar.collapsed .sidebar-menu-list {
+  overflow: visible !important;
+}
+
+/* ==================== 👑 窄栏折叠悬停二级菜单 (图2) ==================== */
+.sidebar-hover-pop {
+  position: absolute !important;
+  left: 54px !important; /* 完美卡合在对应项右侧 54px */
+  top: 0 !important; /* 精准与当前被悬停的一级项高度平齐 */
+  width: 140px !important; /* 宽度锁定为 140px */
+  background: #ffffff !important; /* 纯白底色 (图4) */
+  border: 1px solid #eaeaea !important; /* 精致灰色细边框 (图4) */
+  border-radius: 8px !important; /* 优雅圆角 */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; /* 高级微弱阴影 */
+  display: none !important;
+  flex-direction: column !important;
+  padding: 6px 0 !important;
+  z-index: 100000 !important;
+  box-sizing: border-box !important;
+}
+
+/* 窄栏折叠悬停二级弹出面板的左侧透明桥梁热区，消除 4px 悬空空隙，保证鼠标能丝滑移入点击 */
+.sidebar-hover-pop::before {
+  content: '' !important;
+  position: absolute !important;
+  left: -16px !important; /* 向左延伸 16px 热区，完美覆盖 4px 间隙 */
+  top: 0 !important;
+  width: 16px !important;
+  height: 100% !important;
+  background: transparent !important; /* 彻底透明，无形保护 */
+  cursor: pointer !important;
+}
+
+/* 折叠窄栏状态下，强力释放侧边栏、菜单列表与单项的所有溢出裁剪限制，保驾气泡弹窗 */
+.left-sidebar.collapsed,
+.left-sidebar.collapsed .sidebar-menu-list,
+.left-sidebar.collapsed .sidebar-item {
+  overflow: visible !important;
+}
+
+/* 窄栏折叠状态下，hover 项时 100% 毫无悬念地浮现 pop (采用 fixed 定位傲立于最顶层，无视任何父级 transition/裁剪限制) */
+/* 窄栏折叠状态下，hover 项时 100% 毫无悬念地以相对绝对定位浮现 pop */
+.left-sidebar.collapsed .sidebar-item:hover .sidebar-hover-pop {
+  display: flex !important;
+}
+
+/* 窄栏折叠二级菜单子项样式 */
+.left-sidebar.collapsed .sidebar-hover-pop .sub-item {
+  height: 36px !important; /* 与二级菜单一致的高度 */
+  padding: 0 14px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important; /* 撑开以把红徽章放到最右侧 */
+  font-size: 14px !important;
+  color: #666666 !important; /* 二级菜单默认灰色 */
+  transition: all 0.2s ease !important;
+  white-space: nowrap !important;
+  box-sizing: border-box !important;
+  background: transparent !important;
+  margin: 1px 6px !important;
+  border-radius: 4px !important;
+}
+
+.left-sidebar.collapsed .sidebar-hover-pop .sub-item:hover {
+  background: #fff2f2 !important; /* 悬停高亮淡粉背景 */
+  color: #e1251b !important; /* 悬停高亮字色 */
+}
+
+/* 二级菜单红色气泡徽章 */
+.left-sidebar.collapsed .sidebar-hover-pop .cart-badge {
+  background: #e1251b !important;
+  color: #fff !important;
+  font-size: 11px !important;
+  font-weight: bold !important;
+  height: 16px !important;
+  min-width: 16px !important;
+  padding: 0 4px !important;
+  border-radius: 8px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  box-sizing: border-box !important;
+}
+
+/* hover 悬停项样式 (一比一图2/图4浅粉高亮，无红粗线条) */
+.sidebar-item:hover {
+  background: #fff2f2 !important;
+  color: #e1251b !important;
+}
+.sidebar-item:hover .item-icon-wrapper {
+  color: #e1251b !important;
+}
+.sidebar-item:hover .item-text {
+  color: #e1251b !important;
+}
+
+/* 菜单项激活高亮样式（图2选中效果，纯浅粉背景，去掉左侧红粗线） */
+.sidebar-item.active {
+  background: #fff2f2 !important;
+  color: #e1251b !important;
+}
+.sidebar-item.active .item-icon-wrapper {
+  color: #e1251b !important;
+}
+.sidebar-item.active .item-text {
+  color: #e1251b !important;
+  font-weight: bold !important; /* 加粗 */
+}
+.sidebar-item.active::before {
+  display: none !important; /* 彻底去除左侧红线，还原图2最完美的高保真侧边 */
+}
+
+/* 二级子菜单包裹器 */
+.sidebar-sub-menu {
+  max-height: 0;
+  overflow: hidden;
+  background: #fafafa; /* 升级为与展开底色相同的典雅纯净灰白 */
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-sizing: border-box;
+}
+.sidebar-sub-menu.show {
+  max-height: 400px; /* 大幅扩充 max-height 以支持多子项菜单 (如财务管理) 的顺滑完全展开 */
+  border-bottom: 1px solid #eaeaea;
+}
+
+/* 二级子菜单项样式 (一比一完美锁定图2、图5) */
+.sub-item {
+  height: 36px !important; /* 更加精致紧凑的高度 */
+  padding-left: 36px !important; /* 缩减缩进，保证在 150px 极窄侧边栏下绝对防折行 */
+  display: flex;
+  align-items: center;
+  font-size: 14px !important; /* 子菜单文字大小锁定为 14px */
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important; /* 字体锁定为图5 */
+  color: #666666 !important; /* 子菜单默认文字颜色为深灰色 #666666 */
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  box-sizing: border-box;
+  margin: 1px 8px !important; /* 与一级菜单对齐的内缩设计 */
+  border-radius: 4px !important; /* 精致圆角 */
+}
+.sub-item:hover {
+  color: #e1251b !important;
+  background: #fff2f2 !important; /* 悬停应用高品质浅粉背景 */
+}
+
+/* 购物车数字徽章 */
+.cart-badge {
+  background: #e1251b !important;
+  color: #fff !important;
+  font-size: 11px !important;
+  font-weight: bold !important;
+  height: 16px !important;
+  min-width: 16px !important;
+  padding: 0 4px !important;
+  border-radius: 8px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin-left: 8px !important;
+  box-sizing: border-box !important;
+}
+
+/* ==================== 👑 右侧悬浮挂条样式 ==================== */
+.right-toolbar {
+  position: fixed !important;
+  right: 9px !important; /* 精致美化滚动条通常为 8px 宽，设置 9px 可在滑动条左侧精密保留 1px 的极致工艺缝隙 (图1) */
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  width: 58px !important; /* 宽度锁定为 58px */
+  background: #ffffff !important;
+  border: 1px solid #eaeaea !important; /* 精致全封闭灰色细边框 (图1) */
+  border-radius: 8px !important; /* 药丸全包圆角 */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
+  z-index: 99999 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  padding: 0 !important; /* 零内边距以保证 58x58 的项完全贴合 */
+  box-sizing: border-box !important;
+}
+
+.toolbar-item {
+  width: 100% !important; /* 自适应 100% 宽度，完美填充满 58px（含边框）容器的内部，绝不溢出 */
+  height: 58px !important; /* 单个按钮的背景高度锁定为 58px */
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  position: relative !important;
+  transition: all 0.2s ease !important;
+  color: #1a1a1a !important; /* 图2规范高保真 #1A1A1A 深沉黑 */
+  background: #ffffff !important;
+  margin-bottom: 0 !important; /* 无缝紧密拼合 */
+  box-sizing: border-box !important;
+}
+.toolbar-item:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* 👑 清单选品：普通状态下带有透明红色的淡粉渐变，Hover 悬停高亮为大红背景 (图1、2完美复刻) */
+.toolbar-item.selection-item {
+  background: linear-gradient(180deg, rgba(225, 37, 27, 0.06) 0%, rgba(225, 37, 27, 0) 100%) !important; /* 超精美淡红渐变 */
+  border-radius: 7px 7px 0 0 !important; /* 顶部圆角贴合外层盒子 */
+}
+.toolbar-item.selection-item:hover {
+  background: #e1251b !important; /* 悬停大红背景 */
+}
+.toolbar-item.selection-item:hover .toolbar-text {
+  color: #ffffff !important; /* 纯白文字 */
+}
+
+.toolbar-icon-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 24px !important;
+  height: 24px !important;
+  margin-bottom: 2px !important;
+  position: relative !important;
+}
+.t-icon {
+  width: 18px !important;
+  height: 18px !important;
+  transition:
+    transform 0.2s ease,
+    color 0.2s ease !important;
+}
+
+.toolbar-text {
+  font-size: 12px !important; /* 精准死锁图2要求的 12px 大小 */
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
+  font-weight: 500 !important;
+  transition: color 0.2s ease !important;
+  color: #1a1a1a !important; /* 精准死锁图2要求的 #1A1A1A 深黑色 */
+  text-align: center !important;
+  line-height: 1.25 !important;
+}
+
+/* 采购单、消息、客服：Hover 悬停时呈现为 58x58 纯大红背景 */
+.toolbar-item.selection-item:hover,
+.toolbar-item.msg-item:hover,
+.toolbar-item.service-item:hover {
+  background: #e1251b !important;
+  color: #ffffff !important;
+}
+.toolbar-item.selection-item:hover .t-icon,
+.toolbar-item.msg-item:hover .t-icon,
+.toolbar-item.service-item:hover .t-icon {
+  color: #ffffff !important;
+  transform: scale(1.1) !important;
+}
+.toolbar-item.selection-item:hover .toolbar-text,
+.toolbar-item.msg-item:hover .toolbar-text,
+.toolbar-item.service-item:hover .toolbar-text {
+  color: #ffffff !important;
+}
+
+/* 👑 购物车微型数字红圈角标 (图2完美复刻) */
+.cart-badge {
+  position: absolute !important;
+  top: 4px !important;
+  right: 10px !important; /* 精确定位在购物车图标右上角，图2完美高保真 */
+  background: #e1251b !important;
+  color: #ffffff !important;
+  font-size: 10px !important;
+  font-weight: bold !important;
+  min-width: 14px !important;
+  height: 14px !important;
+  border-radius: 7px !important; /* 微型完美正圆胶囊 */
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 4px !important;
+  border: 1px solid #ffffff !important; /* 精致白边增强立体悬浮感 */
+  box-shadow: 0 1px 4px rgba(225, 37, 27, 0.35) !important;
+  z-index: 10 !important;
+  line-height: 1 !important;
+  box-sizing: border-box !important;
+}
+
+/* 👑 精致高保真客服浮空对话框样式 (图2高端重塑，极大提升商务大气度) */
+.service-popover {
+  position: absolute !important;
+  right: 68px !important; /* 距右侧有 10px 气浮空隙 */
+  top: 50% !important;
+  transform: translateY(-50%) translateX(10px) !important;
+  width: 168px !important; /* 宽度拓宽到 168px，极其大气清爽 */
+  background: #ffffff !important;
+  border: 1px solid #eaeaea !important;
+  border-radius: 8px !important; /* 更加圆润大气的 8px 圆角 */
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09) !important; /* 升级为更细腻的高端投影 */
+  padding: 14px 16px !important; /* 内边距加宽，充满开阔空间感 */
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  z-index: 100000 !important;
+  pointer-events: auto !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+/* 悬浮在客服项上时弹出气泡 */
+.toolbar-item.service-item:hover .service-popover {
+  opacity: 1 !important;
+  visibility: visible !important;
+  transform: translateY(-50%) translateX(0) !important;
+}
+
+/* 旋转45度正方形描边小尖角 */
+.service-popover::after {
+  content: '' !important;
+  position: absolute !important;
+  right: -5px !important;
+  top: 50% !important;
+  transform: translateY(-50%) rotate(45deg) !important;
+  width: 8px !important;
+  height: 8px !important;
+  background: #ffffff !important;
+  border-right: 1px solid #eaeaea !important;
+  border-top: 1px solid #eaeaea !important;
+}
+
+.pop-title {
+  font-size: 13px !important; /* 标题字号升级为大气的 13px */
+  color: #333333 !important; /* 深灰色更显高级沉稳，绝不受父级 Hover 继承白色的影响 */
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
+  font-weight: 600 !important; /* 加粗展现气场 */
+  margin-bottom: 8px !important;
+  white-space: nowrap !important;
+  line-height: 1.3 !important;
+}
+.pop-action {
+  width: 100% !important;
+  height: 30px !important;
+  background: rgba(225, 37, 27, 0.05) !important; /* 精致淡红背景 */
+  border: 1px solid rgba(225, 37, 27, 0.15) !important; /* 精美细圆角边框 */
+  border-radius: 15px !important; /* 高端胶囊按钮样式 */
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  color: #e1251b !important; /* 默认优易红，绝不受父级 Hover 影响 */
+  font-size: 12px !important;
+  font-weight: bold !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+  box-sizing: border-box !important;
+  white-space: nowrap !important;
+}
+
+/* 按钮 Hover 时高亮变大红 */
+.pop-action:hover {
+  background: #e1251b !important;
+  color: #ffffff !important;
+  border-color: #e1251b !important;
+}
+.pop-action:hover .pop-chat-icon {
+  fill: #ffffff !important;
+}
+
+.pop-chat-icon {
+  width: 14px !important;
+  height: 14px !important;
+  fill: #e1251b !important;
+  transition: fill 0.2s ease !important;
+}
+
+/* 回到顶部项：Hover 悬停时呈 58x58 纯大红背景，底部圆角贴合外层盒子 (图5完美复刻) */
+.toolbar-item.back-top-item {
+  border-top: 1px solid #f0f0f0 !important;
+  border-radius: 0 0 7px 7px !important; /* 底部圆角贴合外层 */
+}
+.toolbar-item.back-top-item:hover {
+  background: #e1251b !important;
+}
+.toolbar-item.back-top-item:hover .t-icon {
+  color: #ffffff !important;
+  transform: translateY(-2px) !important;
+}
+
+.banner-area {
+  margin-top: 10px;
+  position: relative;
+  background: #fff;
+  border-radius: 12px;
+  z-index: 5;
+  display: flex;
+  height: 460px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 极简式大图广告容器，初始 84px 宽，高度撑满 */
+.expand-ad-layer {
+  position: absolute;
+  left: -84px;
+  top: 10px;
+  width: 84px;
+  height: calc(100% - 20px);
+  z-index: 100; /* 未展开时层级一般 */
+  overflow: hidden;
+  border-radius: 12px;
+  transition:
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    z-index 0s 0.3s;
+  cursor: pointer;
+  background: transparent;
+}
+/* 悬停时跃升为 9999 皇帝级图层，完美盖死右侧任何弹窗！ */
+.expand-ad-layer:hover {
+  width: 790px;
+  z-index: 9999;
+  border-radius: 12px;
+  box-shadow: 6px 10px 30px rgba(0, 0, 0, 0.3);
+  transition:
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    z-index 0s 0s;
+}
+
+/* 一整张原生的大图片，定死 790px 宽 */
+.expand-img-full {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 790px;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+/* 悬浮在图片最左侧的透明文案区，等同于图片本身 */
+.ad-left-text {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 84px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+  pointer-events: none;
+  background: #047038; /* 用深绿色背景完美遮盖原大图左侧边缘自带的蓝色渐变发光 */
+  border-radius: 12px 0 0 12px; /* 保持与容器的左侧圆角一致 */
+}
+.deco-inner-white {
+  background: #fff;
+  width: 60px;
+  border-radius: 30px;
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+.d-txt {
+  writing-mode: vertical-lr;
+  color: #2cb356;
+  font-weight: bold;
+  font-size: 16px;
+  letter-spacing: 2px;
+}
+.d-num {
+  font-size: 26px;
+  color: #2cb356;
+  font-weight: 900;
+  margin: 5px 0;
+}
+.play-btn {
+  width: 30px;
+  height: 30px;
+  background: #e1251b;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.triangle {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid #fff;
+  margin-left: 3px;
+}
+
+.banner-layout {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  gap: 16px !important;
+}
+
+/* 主体列 */
+.main-column {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  min-width: 0;
+}
+
+/* 导航条样式 (图2高保真 1040*48px 浅灰圆角设计) */
+.nav-bar {
+  height: 48px;
+  background: #f7f8fc;
+  border: 1px solid #f7f8fc;
+  border-radius: 8px;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: none !important; /* 确保能跟底下的模块完美对齐且不被1040宽限制限制死 */
+  display: flex;
+  align-items: center;
+  padding: 0; /* 留出空间给轨道自占 */
+  overflow: visible;
+}
+.nav-bar-scroll-wrapper {
+  flex: 1;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px; /* 恒定紧凑内边距，取消按钮盖字与动态状态类的偶合 */
+  box-sizing: border-box;
+}
+.nav-bar-scroll-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.nav-bar-scroll-wrapper {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.nav-scroll-btn {
+  flex-shrink: 0; /* 强力防挤压变形 */
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e2e8f0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+.nav-scroll-btn:hover {
+  background: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.nav-scroll-btn.left-btn {
+  margin-left: 8px;
+  margin-right: 4px;
+}
+.nav-scroll-btn.right-btn {
+  margin-right: 8px;
+  margin-left: 4px;
+}
+.scroll-arrow {
+  width: 16px;
+  height: 16px;
+  color: #64748b;
+}
+.nav-list {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+}
+.nav-list li {
+  flex-shrink: 0;
+  font-size: 16px;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-weight: bold;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  color: #000000;
+  height: 100%;
+  transition: color 0.15s ease;
+}
+.nav-list li.active {
+  color: #000000;
+  font-weight: bold;
+}
+.nav-list li:hover {
+  color: var(--hover-data3);
+}
+.nav-divider {
+  flex-shrink: 0;
+  color: #d3d3d3;
+  margin: 0 20px;
+  font-size: 14px;
+  user-select: none;
+}
+
+/* 下方分类与广告 */
+.banner-bottom {
+  display: flex;
+  flex: 1;
+  overflow: visible;
+  padding: 0 0 10px 0 !important;
+  gap: 12px;
+  background: transparent;
+  position: relative;
+}
+.side-category {
+  width: 215px;
+  height: 400px;
+  background: transparent;
+  overflow: visible;
+  position: relative;
+  z-index: 1000;
+}
+.side-category.is-dropdown {
+  position: absolute;
+  top: 0;
+  bottom: 10px; /* 补偿 banner-bottom 的 10px 底部 padding */
+  left: 0; /* padding已去除，归零以完美左对齐 */
+  z-index: 9999;
+  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.ad-group {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+/* 右侧高奢两段式侧边栏 */
+.user-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 281px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* 采购课堂卡片 */
+.purchase-classroom {
+  width: 281px;
+  height: 116px;
+  background: #f7f8fc;
+  border: 1px solid #f7f8fc;
+  border-radius: 12px;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
+}
+
+.classroom-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.classroom-title {
+  font-size: 14px;
+  font-weight: 800;
+  color: #1a1a1a;
+}
+
+.classroom-more {
+  font-size: 12px;
+  color: #999999;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.classroom-more:hover {
+  color: #e1251b;
+}
+
+.classroom-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 6px 8px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.classroom-content:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.classroom-content:hover .c-desc {
+  color: #e1251b;
+}
+
+.classroom-time {
+  background: #fff5f5;
+  border: 1px solid #ffe3e3;
+  border-radius: 6px;
+  padding: 2px 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 58px;
+  box-sizing: border-box;
+}
+
+.c-year {
+  font-size: 10px;
+  color: #8c8c8c;
+}
+
+.c-week {
+  font-size: 10px;
+  font-weight: 800;
+  color: #ff5a5f;
+  margin-top: 1px;
+}
+
+.classroom-info {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.c-desc {
+  font-size: 12px;
+  font-weight: bold;
+  color: #333333;
+  line-height: 1.4;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color 0.2s ease;
+}
+
+.classroom-cover {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid #f0f0f0;
+}
+
+.classroom-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 👑 1. 外层白色大底框卡片：四周锁死黄金 16px 呼吸留白内边距，总高为 432px，内容区高度为完美闭合的 400px */
+.banner-area {
+  padding: 16px !important;
+  height: 432px !important;
+  box-sizing: border-box !important;
+}
+
+/* 👑 2. 下方内容容器：消除多重边距实现绝对的四角对齐填满，并将左侧分类与右侧广告间隙拉开至 16px */
+.banner-bottom {
+  padding: 0 !important;
+  gap: 16px !important;
+}
+
+/* 👑 3. 顶部分类导航：浅灰色圆角背景盒，并向右平移 231px 完美与左侧分类框错开 */
+.nav-bar {
+  margin-left: 231px !important;
+  width: auto !important; /* 宽度设为自适应，随着主容器收缩 */
+  max-width: none !important; /* 彻底去除宽度上限以确保与下方广告右边缘完美齐平 */
+  height: 48px !important;
+  padding: 0 24px !important;
+  background: #f7f8fc !important;
+  border: 1px solid #f7f8fc !important;
+  border-radius: 8px !important;
+  box-sizing: border-box !important;
+  margin-bottom: 16px !important; /* 与下方内容拉开 16px 间距，使左侧分类栏使用 -64px margin-top 恰好完美顶部平齐 */
+  flex-grow: 1 !important; /* 自动撑满 */
+}
+
+/* 👑 4. 左侧垂直分类区域：高能向上爬升 64px 与顶栏完美并肩对齐，高度补齐到完美的 400px，宽度锁死不缩小 */
+.side-category {
+  margin-top: -64px !important;
+  width: 215px !important;
+  height: 400px !important;
+  position: relative !important;
+  z-index: 1000 !important;
+  flex-shrink: 0 !important; /* 强制不压缩，保持常驻尺寸 */
+}
+
+/* 使得左侧垂直分类的4个角承接 12px 的大厂大圆角，和横向导航与整体卡片无缝贴合 */
+.side-category :deep(.cate-list) {
+  border-radius: 12px !important;
+}
+
+/* 👑 5. 右侧两段式侧边栏：宽度强制281px，对齐中间导航条顶部，上下间距 16px，宽度锁死不缩小 */
+.user-sidebar {
+  width: 281px !important;
+  height: 400px !important;
+  margin-top: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 16px !important;
+  margin-right: 0 !important;
+  flex-shrink: 0 !important; /* 强制不压缩，保持常驻尺寸 */
+}
+
+/* ==================== 💎 全局上下滚动条高奢美化 ==================== */
+::-webkit-scrollbar {
+  width: 8px !important; /* 宽度从原生 17px 缩窄到极其精致的 8px */
+  height: 8px !important; /* 横向滚动条高度 */
+}
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.01) !important; /* 轨道极浅半透明，完全杜绝原生灰色的大块感 */
+  border-radius: 4px !important;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.16) !important; /* 胶囊滑块轻量扁平灰，极具高级拟物呼吸感 */
+  border-radius: 4px !important;
+  transition: background 0.3s ease !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.32) !important; /* Hover 时滑块变深灰色，清晰明朗 */
+}
+
+/* 👑 各个核心板块之间的 16px 恒定垂直呼吸间距保护 */
+.scene-red-integrated {
+  margin-top: 16px !important;
+}
+.products-section {
+  margin-top: 16px !important;
+}
+</style>

src/views/home/jdcomponents/JDBannerCards.vue

@@ -196,14 +196,13 @@ onUnmounted(() => stopAuto());
   min-width: 100%;
   height: 100%;
   position: relative;
-  background: #187af2;
 }
 
 .banner-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  opacity: 0.7;
+  opacity: 1;
 }
 
 .slider-content {