新首页样式

src/assets/jd/icons/icon_1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" fill="#007AFF" /></svg>

src/assets/jd/icons/icon_10.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z" fill="#34C759" /></svg>

src/assets/jd/icons/icon_11.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z" fill="#007AFF" /></svg>

src/assets/jd/icons/icon_12.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" fill="#FF9900" /></svg>

src/assets/jd/icons/icon_13.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" fill="#E1251B" /></svg>

src/assets/jd/icons/icon_14.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" fill="#5E5CE6" /></svg>

src/assets/jd/icons/icon_15.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8 8h-2v3h2v-3zm-7.24-1.26L2.97 19.03l1.41 1.41 1.79-1.79-1.41-1.41zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" fill="#FF3B30" /></svg>

src/assets/jd/icons/icon_2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z" fill="#FF9900" /></svg>

src/assets/jd/icons/icon_3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" fill="#E1251B" /></svg>

src/assets/jd/icons/icon_4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" fill="#5E5CE6" /></svg>

src/assets/jd/icons/icon_5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z" fill="#FF3B30" /></svg>

src/assets/jd/icons/icon_6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="#34C759" /></svg>

src/assets/jd/icons/icon_7.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="#FFCC00" /></svg>

src/assets/jd/icons/icon_8.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-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.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z" fill="#E1251B" /></svg>

src/assets/jd/icons/icon_9.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z" fill="#FF3B30" /></svg>

src/assets/styles/index.scss

@@ -113,29 +113,29 @@ div:focus {
   }
 }
 
-aside {
-  background: #eef1f6;
-  padding: 8px 24px;
-  margin-bottom: 20px;
-  border-radius: 2px;
-  display: block;
-  line-height: 32px;
-  font-size: 16px;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  color: #2c3e50;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  a {
-    color: #337ab7;
-    cursor: pointer;
-
-    &:hover {
-      color: rgb(32, 160, 255);
-    }
-  }
-}
+// aside {
+//   background: #eef1f6;
+//   padding: 8px 24px;
+//   margin-bottom: 20px;
+//   border-radius: 2px;
+//   display: block;
+//   line-height: 32px;
+//   font-size: 16px;
+//   font-family:
+//     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+//   color: #2c3e50;
+//   -webkit-font-smoothing: antialiased;
+//   -moz-osx-font-smoothing: grayscale;
+
+//   a {
+//     color: #337ab7;
+//     cursor: pointer;
+
+//     &:hover {
+//       color: rgb(32, 160, 255);
+//     }
+//   }
+// }
 
 //main-container全局样式
 .app-container {

src/layout/index.vue

@@ -8,7 +8,7 @@
       <Workbench ref="WorkbenchRef" v-if="meta.workbench" />
       <router-view> </router-view>
     </div>
-    <Foot />
+    <Foot v-if="meta.foot != 'hide'" />
   </div>
 </template>
 

src/router/index.ts

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

src/views/home/index-enterprise.vue

@@ -1,184 +1,480 @@
 <template>
-  <div class="home-pages">
-    <!--  头部 -->
-    <comHead v-if="headData.show" :row="headData" :datas="realList"></comHead>
-    <!-- 导航 -->
-    <div class="nav-bos">
-      <div v-for="(item, index) in navList" :key="index" class="nav-list" @click="onPath(item.url)">
-        <img class="nav-image" :src="item.img" alt="" />
-        <div class="flex-row-between">
-          <div>
-            <div class="name1">{{ item.name1 }}</div>
-            <div class="name2">{{ item.name2 }}</div>
+  <div class="jd-app">
+    <JDHeader />
+    <!-- 2. 核心 Banner 区域 -->
+    <section class="banner-area w">
+      <!-- 极简而纯粹的悬挂式广告大图，挂于 1600px 外部左侧 -->
+      <!-- 悬停时通过 CSS 自动扩宽并享有绝对最高层级 9999 -->
+      <div class="expand-ad-layer">
+        <img src="@/assets/jd/banner_green_ad.png" alt="促销大图" class="expand-img-full" />
+
+        <!-- 作为大图一部分直接漂浮在上面的文案，不破坏图片的整体性 -->
+        <div class="ad-left-text">
+          <div class="deco-inner-white">
+            <span class="d-txt">企业专享低至</span>
+            <span class="d-num">5</span>
+            <span class="d-txt">折</span>
+          </div>
+          <div class="play-btn">
+            <div class="triangle"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧主内容区域，霸占 1600px 全宽 -->
+      <div class="banner-layout flex">
+        <!-- 左侧大列 (导航 + 分类与广告) -->
+        <div class="main-column flex-1 flex-column">
+          <!-- 顶部的导航条 -->
+          <div class="nav-bar flex-between relative">
+            <!-- 小屏时固定的场景化类目 -->
+            <div class="scene-cat-toggle" v-if="!isLargeScreen" @mouseenter="showSceneCat = true" @mouseleave="showSceneCat = false">
+              <span>场景化类目 <i class="arr-down"></i></span>
+            </div>
+            <div class="divider" v-if="!isLargeScreen">|</div>
+
+            <!-- 导航滚动包装器 (按钮贴靠视口两端) -->
+            <div class="nav-scroll-wrapper flex-1 relative">
+              <!-- 左滑按钮 -->
+              <div class="scroll-btn-wrap prev" v-show="showPrev">
+                <div class="more-btn prev-btn" @click="slide(-300)">
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polyline points="15 18 9 12 15 6"></polyline>
+                  </svg>
+                </div>
+              </div>
+
+              <!-- 导航滚动视口 -->
+              <ul class="nav-list flex" ref="navListRef" @scroll="checkScroll">
+                <li v-for="(item, index) in navItems" :key="index" :class="{ active: index === 0 }">
+                  <img :src="`../../assets/jd/icons/icon_${item.icon}.svg`" class="n-ic-img" />
+                  {{ item.name }}
+                </li>
+              </ul>
+
+              <!-- 右滑按钮 -->
+              <div class="scroll-btn-wrap next" v-show="showNext">
+                <div class="more-btn next-btn" @click="slide(300)">
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                  </svg>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="nav-more flex-row-center">
-            <el-icon><ArrowRight /></el-icon>
+          <!-- 下方：分类与广告栏并排 -->
+          <div class="banner-bottom flex flex-1">
+            <!-- 左侧分类菜单 (大屏常驻，小屏悬停显示) -->
+            <aside
+              class="side-category"
+              v-show="isLargeScreen || showSceneCat"
+              :class="{ 'is-dropdown': !isLargeScreen }"
+              @mouseenter="showSceneCat = true"
+              @mouseleave="showSceneCat = false"
+            >
+              <JDCategory />
+            </aside>
+
+            <!-- 右侧广告组合 -->
+            <div class="ad-group flex-1">
+              <JDBannerCards />
+            </div>
           </div>
         </div>
+        <!-- 右侧大列：用户面板 (撑满高度) -->
+        <div class="user-col">
+          <JDUserPanel class="user-col" />
+        </div>
       </div>
-    </div>
-    <!-- 猜你喜欢 -->
-    <indexMorTitle :datas="{ title1: '猜你喜欢' }"></indexMorTitle>
-    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="recommendList"></comGoods>
+    </section>
+
+    <!-- 3. 下方模块 -->
+    <JDScene />
+    <JDProducts />
+
+    <!-- 4. 页脚 -->
+    <JDFooter />
   </div>
 </template>
 
 <script setup lang="ts">
-import indexMorTitle from '@/views/home/pccomponents/pages/indexMorTitle.vue';
-import comHead from '@/views/home/pccomponents/pages/headData.vue';
-import comGoods from '@/views/home/pccomponents/pages/goods.vue';
-import { onPath } from '@/utils/siteConfig';
-import { getSearchTitle, getHomeNav } from '@/api/home/index';
-import {
-  getEnterpriseRightsMemberEquityList,
-  getEnterpriseHomeAdList,
-  getCustomerProductPage,
-  customerMessageList
-} from '@/api/home/index-enterprise';
-import enterprise1 from '@/assets/images/home/enterprise1.png';
-import enterprise2 from '@/assets/images/home/enterprise2.png';
-import enterprise3 from '@/assets/images/home/enterprise3.png';
-import enterprise4 from '@/assets/images/home/enterprise4.png';
-
-const headData = ref<any>({});
-const realList = ref<any>([]);
-const recommendList = ref<any>([]);
-//导航
-const navList = ref<any>([
-  { name1: '采购日历', name2: '提前制定和管理月度采购计划', url: '/enterprise/purchaseHistory', img: enterprise1 },
-  { name1: '自助开票', name2: '灵活自助开票 换开管票服务', url: '/enterprise/invoiceManage', img: enterprise2 },
-  { name1: '下载中心', name2: '批量订单打印', url: '/order/orderManage', img: enterprise3 },
-  { name1: '批量下单', name2: '智能识别多商品多地址一键下单', url: '/cart', img: enterprise4 }
+import JDHeader from '@/views/home/jdcomponents/JDHeader.vue';
+import JDCategory from '@/views/home/jdcomponents/JDCategory.vue';
+import JDBannerCards from '@/views/home/jdcomponents/JDBannerCards.vue';
+import JDUserPanel from '@/views/home/jdcomponents/JDUserPanel.vue';
+import JDScene from '@/views/home/jdcomponents/JDScene.vue';
+import JDProducts from '@/views/home/jdcomponents/JDProducts.vue';
+import JDFooter from '@/views/home/jdcomponents/JDFooter.vue';
+import '@/views/home/jdcomponents/jd-repro.css';
+
+const isLargeScreen = ref(window.innerWidth >= 1600);
+const adHovered = ref(false);
+const check = () => {
+  isLargeScreen.value = window.innerWidth >= 1600;
+  setTimeout(checkScroll, 0);
+};
+
+const navItems = ref([
+  { name: '公共采购', icon: '1' },
+  { name: '跟买指南', icon: '2' },
+  { name: '五金城', icon: '3' },
+  { name: '电脑数码', icon: '4' },
+  { name: '企业超市', icon: '5' },
+  { name: '企业服务', icon: '6' },
+  { name: '家电家居', icon: '7' },
+  { name: '京东京造', icon: '8' },
+  { name: '企业养车', icon: '9' },
+  { name: '员工福利', icon: '10' },
+  { name: '商用家电', icon: '11' },
+  { name: '办公设备', icon: '12' },
+  { name: '耗材采购', icon: '13' },
+  { name: '员工团建', icon: '14' },
+  { name: '防暑降温', icon: '15' }
 ]);
 
-onMounted(() => {
-  document.documentElement.style.setProperty('--hover-color', '#E7000B');
-  getHead();
-});
+const navListRef = ref(null);
+const showPrev = ref(false);
+const showNext = ref(true);
+const showSceneCat = ref(false);
 
-//头部
-const getHead = async () => {
-  headData.value.topStyle = 1;
-  headData.value.toplabel = [];
-  headData.value.classifyShow = true;
-  headData.value.headType = 3;
-  headData.value.leftStyle = 1;
-  headData.value.carouselList = [];
-  headData.value.advertList = [];
-  headData.value.realDataType = 1;
-  headData.value.realNumber = 6;
-  headData.value.navlList = [];
-  try {
-    const datas1 = await getSearchTitle(5);
-    if (datas1.code == 200) {
-      datas1.data.forEach((item: any) => {
-        headData.value.toplabel.push({
-          title: item.navigationName
-        });
-      });
-    }
-
-    const datas2 = await getHomeNav(5);
-    headData.value.topNav = [];
-    datas2.data.forEach((item: any) => {
-      headData.value.topNav.push({
-        title: item.navigationName,
-        url: item.url ? item.url : ''
-      });
-    });
-
-    const datas3 = await getEnterpriseHomeAdList({});
-    if (datas3.code == 200) {
-      datas3.data.forEach((item: any) => {
-        headData.value.carouselList.push({
-          imageUrl: item.imageUrl
-        });
-      });
-    }
-
-    const datas5 = await customerMessageList({ status: '0', pageSize: 20 });
-    if (datas5.code == 200) realList.value = datas5.rows;
-
-    const datas6 = await getEnterpriseRightsMemberEquityList({});
-    if (datas6.code == 200) {
-      datas6.data.forEach((item: any) => {
-        headData.value.navlList.push({
-          imageUrl: item.imageUrl,
-          title: item.title,
-          url: item.link ? item.link : ''
-        });
-      });
-    }
-
-    headData.value.show = true;
-  } catch (error) {}
+const checkScroll = () => {
+  if (!navListRef.value) return;
+  const { scrollLeft, scrollWidth, clientWidth } = navListRef.value;
+  showPrev.value = scrollLeft > 0;
+  // 给定一个容差值 2px，防止小数四舍五入导致判断失败
+  showNext.value = Math.ceil(scrollLeft + clientWidth) < scrollWidth - 2;
 };
 
-//猜你喜欢
-getCustomerProductPage({}).then((res) => {
-  if (res.code == 200) {
-    recommendList.value = res.rows;
+const slide = (amount) => {
+  if (navListRef.value) {
+    navListRef.value.scrollBy({ left: amount, behavior: 'smooth' });
   }
+};
+
+onMounted(() => {
+  window.addEventListener('resize', check);
+  setTimeout(checkScroll, 100); // 初始化时检查滚动状态
 });
+onUnmounted(() => window.removeEventListener('resize', check));
 </script>
 
 <style lang="scss" scoped>
-.home-pages {
+.jd-app {
   width: 100%;
-  padding-bottom: 30px;
+  background: #f8f8f8;
+  min-height: 100vh;
+}
 
-  :deep(.hover-color) {
-    cursor: pointer;
+.banner-area {
+  margin-top: 10px;
+  position: relative;
+  background: #fff;
+  border-radius: 12px;
+  z-index: 5;
+  display: flex;
+  height: 460px;
+}
 
-    &:hover {
-      color: var(--hover-color) !important;
+/* 极简式大图广告容器，初始 84px 宽，高度撑满 */
+.expand-ad-layer {
+  position: absolute;
+  left: -84px;
+  top: 0;
+  width: 84px;
+  height: 100%;
+  z-index: 100; /* 未展开时层级一般 */
+  overflow: hidden;
+  border-radius: 12px 0 0 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;
+}
 
-      .zi-hover {
-        color: var(--hover-color) !important;
-      }
-    }
-  }
-  // 导航
-  .nav-bos {
-    margin: 0 auto;
-    width: 100%;
-    max-width: 1500px;
-    min-width: 1200px;
-    display: flex;
-    gap: 0 10px;
-    .nav-list {
-      margin-top: 15px;
-      flex: 0 0 calc((100% - 30px) / 4);
-      height: 150px;
-      background: #ffffff;
-      border-radius: 5px;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      cursor: pointer;
-      .nav-image {
-        width: 50px;
-        height: 50px;
-        background: #ffeeea;
-        border-radius: 6px 6px 6px 6px;
-      }
-      .name1 {
-        font-size: 15px;
-        margin-bottom: 5px;
-        color: #101828;
-      }
-      .name2 {
-        font-size: 13px;
-        color: #6a7282;
-      }
-      .nav-more {
-        width: 20px;
-        height: 20px;
-        border-radius: 20px;
-        border: 1px solid #3d3e3f;
-      }
-    }
+/* 一整张原生的大图片，定死 790px 宽 */
+.expand-img-full {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 790px;
+  height: 460px;
+  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;
+}
+.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;
+}
+
+/* 主体列 */
+.main-column {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  min-width: 0;
+}
+
+/* 导航条样式 */
+.nav-bar {
+  height: 60px;
+  line-height: 60px;
+  padding: 0 20px;
+  background: #fff;
+  border-radius: 12px 12px 0 0;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+.nav-scroll-wrapper {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  align-items: center;
+}
+.nav-list {
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: nowrap;
+  flex: 1;
+  height: 100%;
+  scrollbar-width: none;
+  -ms-overflow-style: none; /* 隐藏原生滚动条 */
+}
+.nav-list::-webkit-scrollbar {
+  display: none;
+} /* Chrome 隐藏原生滚动条 */
+
+.nav-list li {
+  padding: 0 14px;
+  font-weight: bold;
+  cursor: pointer;
+  font-size: 18px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  color: #333;
+  height: 100%;
+}
+.nav-list li.active {
+  color: #e1251b;
+}
+.n-ic-img {
+  width: 22px;
+  height: 22px;
+  margin-right: 6px;
+}
+
+/* 场景化类目下拉 (仅小屏) */
+.scene-cat-toggle {
+  position: relative;
+  font-weight: bold;
+  font-size: 18px;
+  cursor: pointer;
+  color: #333;
+}
+.scene-cat-toggle span {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding: 0 8px 0 10px;
+}
+.arr-down {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid #666;
+  border-bottom: 2px solid #666;
+  transform: rotate(45deg);
+  margin-left: 6px;
+  margin-bottom: 3px;
+  transition: transform 0.2s;
+}
+.scene-cat-toggle:hover .arr-down {
+  transform: rotate(225deg);
+}
+.divider {
+  color: #ccc;
+  padding: 0 4px;
+  font-weight: normal;
+  font-size: 16px;
+}
+
+/* 导航左右滚动控制 */
+.scroll-btn-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+.scroll-btn-wrap.prev {
+  left: 0;
+  padding-right: 24px;
+  background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0));
+}
+.scroll-btn-wrap.next {
+  right: 0;
+  padding-left: 24px;
+  background: linear-gradient(270deg, #fff 50%, rgba(255, 255, 255, 0));
+}
+
+.more-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #666;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+.more-btn:hover {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+/* 下方分类与广告 */
+.banner-bottom {
+  display: flex;
+  flex: 1;
+  overflow: visible;
+  padding: 0 10px 10px;
+  gap: 12px;
+  background: transparent;
+  position: relative;
+}
+.side-category {
+  width: 280px;
+  background: transparent;
+  overflow: visible;
+  position: relative;
+  z-index: 1000;
+}
+.side-category.is-dropdown {
+  position: absolute;
+  top: 0;
+  bottom: 10px; /* 补偿 banner-bottom 的 10px 底部 padding */
+  left: 10px; /* 补偿 banner-bottom 的 10px 左侧 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-col {
+  width: 230px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: 10px 10px 10px 0;
+  height: calc(100% - 20px);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 1599px) {
+  .banner-layout {
+    height: auto;
+    min-height: 394px;
   }
 }
 </style>

src/views/home/jdcomponents/JDBannerCards.vue

@@ -14,16 +14,9 @@
             </div>
           </div>
         </div>
-        <div class="ai-logo">
-           <span>A</span><span>i</span>
-        </div>
+        <div class="ai-logo"><span>A</span><span>i</span></div>
         <div class="dots">
-          <span
-            v-for="(_, i) in bannerSlides"
-            :key="i"
-            :class="{ active: currentIdx === i }"
-            @click="currentIdx = i"
-          ></span>
+          <span v-for="(_, i) in bannerSlides" :key="i" :class="{ active: currentIdx === i }" @click="currentIdx = i"></span>
         </div>
       </div>
 
@@ -35,20 +28,20 @@
         </div>
         <div class="p-list flex">
           <div class="p-mini">
-             <img src="@/assets/jd/prod_it.png" />
-             <p class="price"><span>¥</span>69.9</p>
+            <img src="@/assets/jd/prod_it.png" />
+            <p class="price"><span>¥</span>69.9</p>
           </div>
           <div class="p-mini">
-             <img src="@/assets/jd/prod_office.png" />
-             <p class="price"><span>¥</span>84.8</p>
+            <img src="@/assets/jd/prod_office.png" />
+            <p class="price"><span>¥</span>84.8</p>
           </div>
           <div class="p-mini">
-             <img src="@/assets/jd/prod_lifestyle.png" />
-             <p class="price"><span>¥</span>139.9</p>
+            <img src="@/assets/jd/prod_lifestyle.png" />
+            <p class="price"><span>¥</span>139.9</p>
           </div>
           <div class="p-mini">
-             <img src="@/assets/jd/prod_it.png" />
-             <p class="price"><span>¥</span>1749</p>
+            <img src="@/assets/jd/prod_it.png" />
+            <p class="price"><span>¥</span>1749</p>
           </div>
         </div>
       </div>
@@ -56,85 +49,85 @@
 
     <!-- 下半部分 -->
     <div class="bottom-row flex">
-       <!-- 企采榜单 -->
-       <div class="card-base b-item">
-         <div class="c-header flex-between">
-           <span class="title">企采榜单</span>
-           <span class="tag-orange">同行都在买</span>
-         </div>
-         <div class="rank-list flex">
-            <div class="r-i">
-               <div class="r-title yellow-t">办公电脑榜<i class="arr"> &gt;</i></div>
-               <img src="@/assets/jd/prod_it.png" />
-               <span class="sold">已售1543件</span>
-            </div>
-            <div class="r-i">
-               <div class="r-title red-t">文具榜<i class="arr"> &gt;</i></div>
-               <img src="@/assets/jd/prod_office.png" />
-               <span class="sold">已售2.3万件</span>
-            </div>
-         </div>
-       </div>
-
-       <!-- 品牌好店 -->
-       <div class="card-base b-item">
-         <div class="c-header flex-between">
-           <span class="title">品牌好店</span>
-           <span class="tag-orange">返2000元E卡</span>
-         </div>
-         <div class="brand-box flex">
-            <div class="brand-i">
-              <img src="@/assets/jd/brand_logo_1.png" class="logo" />
-              <p class="name">鲁花京东自营旗舰店</p>
-              <span class="btn btn-red">品质保障</span>
-            </div>
-            <div class="brand-i">
-              <img src="@/assets/jd/brand_logo_2.png" class="logo" />
-              <p class="name">金龙鱼京东自营旗舰</p>
-              <span class="btn btn-red">热销品牌</span>
-            </div>
-         </div>
-       </div>
-
-       <!-- 企业精选 -->
-       <div class="card-base b-item">
-         <div class="c-header flex-between">
-           <span class="title">企业精选</span>
-           <span class="tag-gray">品牌专供 库存足</span>
-         </div>
-         <div class="p-list flex">
-            <div class="p-mini">
-               <img src="@/assets/jd/prod_it.png" />
-               <p class="price"><span>¥</span>10740 <span class="badge-blue">企业价</span></p>
-            </div>
-            <div class="p-mini">
-               <img src="@/assets/jd/prod_lifestyle.png" />
-               <p class="price"><span>¥</span>877</p>
-            </div>
-         </div>
-       </div>
-
-       <!-- 京东新品 -->
-       <div class="card-base b-item">
-         <div class="c-header flex-between">
-           <span class="title">企业购×京东新品</span>
-           <span class="tag-orange">美的新鲜</span>
-         </div>
-         <div class="p-list flex">
-            <div class="p-mini">
-               <img src="@/assets/jd/prod_lifestyle.png" />
-               <p class="price"><span>¥</span>7188</p>
-            </div>
-            <div class="p-mini">
-               <img src="@/assets/jd/prod_office.png" />
-               <p class="price"><span>¥</span>34.9</p>
-            </div>
-         </div>
-       </div>
+      <!-- 企采榜单 -->
+      <div class="card-base b-item">
+        <div class="c-header flex-between">
+          <span class="title">企采榜单</span>
+          <span class="tag-orange">同行都在买</span>
+        </div>
+        <div class="rank-list flex">
+          <div class="r-i">
+            <div class="r-title yellow-t">办公电脑榜<i class="arr"> &gt;</i></div>
+            <img src="@/assets/jd/prod_it.png" />
+            <span class="sold">已售1543件</span>
+          </div>
+          <div class="r-i">
+            <div class="r-title red-t">文具榜<i class="arr"> &gt;</i></div>
+            <img src="@/assets/jd/prod_office.png" />
+            <span class="sold">已售2.3万件</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 品牌好店 -->
+      <div class="card-base b-item">
+        <div class="c-header flex-between">
+          <span class="title">品牌好店</span>
+          <span class="tag-orange">返2000元E卡</span>
+        </div>
+        <div class="brand-box flex">
+          <div class="brand-i">
+            <img src="@/assets/jd/brand_logo_1.png" class="logo" />
+            <p class="name">鲁花京东自营旗舰店</p>
+            <span class="btn btn-red">品质保障</span>
+          </div>
+          <div class="brand-i">
+            <img src="@/assets/jd/brand_logo_2.png" class="logo" />
+            <p class="name">金龙鱼京东自营旗舰</p>
+            <span class="btn btn-red">热销品牌</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 企业精选 -->
+      <div class="card-base b-item">
+        <div class="c-header flex-between">
+          <span class="title">企业精选</span>
+          <span class="tag-gray">品牌专供 库存足</span>
+        </div>
+        <div class="p-list flex">
+          <div class="p-mini">
+            <img src="@/assets/jd/prod_it.png" />
+            <p class="price"><span>¥</span>10740 <span class="badge-blue">企业价</span></p>
+          </div>
+          <div class="p-mini">
+            <img src="@/assets/jd/prod_lifestyle.png" />
+            <p class="price"><span>¥</span>877</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 京东新品 -->
+      <div class="card-base b-item">
+        <div class="c-header flex-between">
+          <span class="title">企业购×京东新品</span>
+          <span class="tag-orange">美的新鲜</span>
+        </div>
+        <div class="p-list flex">
+          <div class="p-mini">
+            <img src="@/assets/jd/prod_lifestyle.png" />
+            <p class="price"><span>¥</span>7188</p>
+          </div>
+          <div class="p-mini">
+            <img src="@/assets/jd/prod_office.png" />
+            <p class="price"><span>¥</span>34.9</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
 
 const currentIdx = ref(0);
@@ -179,7 +172,7 @@ onUnmounted(() => stopAuto());
 
 .slider-box {
   flex: 5.5;
-  background: #187AF2;
+  background: #187af2;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
@@ -196,7 +189,7 @@ onUnmounted(() => stopAuto());
   min-width: 100%;
   height: 100%;
   position: relative;
-  background: #187AF2;
+  background: #187af2;
 }
 
 .banner-img {
@@ -214,9 +207,23 @@ onUnmounted(() => stopAuto());
   z-index: 5;
 }
 
-.slider-content h1 { font-size: 26px; font-weight: normal; margin-bottom: 2px; letter-spacing: 1px; }
-.slider-content h2 { font-size: 26px; font-weight: 800; margin-bottom: 16px; letter-spacing: 1px; }
-.slider-content p { font-size: 13px; font-weight: 500; opacity: 0.9; }
+.slider-content h1 {
+  font-size: 26px;
+  font-weight: normal;
+  margin-bottom: 2px;
+  letter-spacing: 1px;
+}
+.slider-content h2 {
+  font-size: 26px;
+  font-weight: 800;
+  margin-bottom: 16px;
+  letter-spacing: 1px;
+}
+.slider-content p {
+  font-size: 13px;
+  font-weight: 500;
+  opacity: 0.9;
+}
 
 .ai-logo {
   position: absolute;
@@ -226,10 +233,20 @@ onUnmounted(() => stopAuto());
   font-weight: 900;
   display: flex;
   align-items: baseline;
-  text-shadow: 0 10px 20px rgba(0,0,0,0.2);
+  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+.ai-logo span:first-child {
+  font-size: 110px;
+  color: #fff;
+  background: linear-gradient(180deg, #e2f1ff, #ffffff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.ai-logo span:last-child {
+  font-size: 80px;
+  color: #66b2ff;
+  margin-left: 5px;
 }
-.ai-logo span:first-child { font-size: 110px; color: #fff; background: linear-gradient(180deg, #E2F1FF, #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-.ai-logo span:last-child { font-size: 80px; color: #66B2FF; margin-left: 5px; }
 
 .dots {
   position: absolute;
@@ -238,26 +255,38 @@ onUnmounted(() => stopAuto());
   display: flex;
   gap: 6px;
 }
-.dots span { display: block; width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; }
-.dots span.active { width: 14px; background: #fff; border-radius: 3px; }
+.dots span {
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 50%;
+}
+.dots span.active {
+  width: 14px;
+  background: #fff;
+  border-radius: 3px;
+}
 
 .subsidy-box {
   flex: 4.5;
 }
 
 .card-base {
-  background: #F8F9FA; /* 与侧边分类背景色相同 */
+  background: #f8f9fa; /* 与侧边分类背景色相同 */
   border-radius: 8px;
   padding: 16px;
   display: flex;
   flex-direction: column;
-  transition: transform 0.2s, box-shadow 0.2s;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
   cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
 }
 .card-base:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }
 
 .b-item {
@@ -275,9 +304,19 @@ onUnmounted(() => stopAuto());
   color: #000;
 }
 
-.tag { font-size: 12px; color: #D46B08; font-weight: bold; }
-.tag-orange { font-size: 11px; color: #D46B08; }
-.tag-gray { font-size: 11px; color: #8C8C8C; }
+.tag {
+  font-size: 12px;
+  color: #d46b08;
+  font-weight: bold;
+}
+.tag-orange {
+  font-size: 11px;
+  color: #d46b08;
+}
+.tag-gray {
+  font-size: 11px;
+  color: #8c8c8c;
+}
 
 .p-list {
   flex: 1;
@@ -298,14 +337,18 @@ onUnmounted(() => stopAuto());
 }
 
 .price {
-  color: #E1251B;
+  color: #e1251b;
   font-size: 16px;
   font-weight: bold;
 }
-.price span { font-size: 12px; font-weight: normal; margin-right: 1px; }
+.price span {
+  font-size: 12px;
+  font-weight: normal;
+  margin-right: 1px;
+}
 
 .badge-blue {
-  background: #1890FF;
+  background: #1890ff;
   color: #fff;
   font-size: 10px;
   padding: 1px 4px;
@@ -314,18 +357,88 @@ onUnmounted(() => stopAuto());
   vertical-align: middle;
 }
 
-.rank-list { gap: 12px; flex: 1; }
-.r-i { flex: 1; background: #fff; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
-.r-title { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; white-space: nowrap; z-index: 2; }
-.yellow-t { background: #FFF3E0; color: #E65100; }
-.red-t { background: #FFEBEE; color: #C62828; }
-.r-title .arr { font-style: normal; font-size: 9px; opacity: 0.8; }
-.r-i img { width: 80%; margin: 15px auto 5px; }
-.sold { font-size: 11px; font-weight: bold; color: #E1251B; background: #FFF0F0; border-radius: 0 0 6px 6px; padding: 4px 0; text-align: center; width: 100%; }
-
-.brand-box { gap: 12px; flex: 1; }
-.brand-i { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
-.logo { width: 50px; height: 50px; margin-top: 5px; }
-.name { font-size: 11px; color: #1890FF; white-space: nowrap; transform: scale(0.9); }
-.btn-red { font-size: 11px; color: #E1251B; border: 1px solid #E1251B; padding: 2px 8px; border-radius: 12px; margin-bottom: 5px; }
+.rank-list {
+  gap: 12px;
+  flex: 1;
+}
+.r-i {
+  flex: 1;
+  background: #fff;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+.r-title {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: bold;
+  white-space: nowrap;
+  z-index: 2;
+}
+.yellow-t {
+  background: #fff3e0;
+  color: #e65100;
+}
+.red-t {
+  background: #ffebee;
+  color: #c62828;
+}
+.r-title .arr {
+  font-style: normal;
+  font-size: 9px;
+  opacity: 0.8;
+}
+.r-i img {
+  width: 80%;
+  margin: 15px auto 5px;
+}
+.sold {
+  font-size: 11px;
+  font-weight: bold;
+  color: #e1251b;
+  background: #fff0f0;
+  border-radius: 0 0 6px 6px;
+  padding: 4px 0;
+  text-align: center;
+  width: 100%;
+}
+
+.brand-box {
+  gap: 12px;
+  flex: 1;
+}
+.brand-i {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.logo {
+  width: 50px;
+  height: 50px;
+  margin-top: 5px;
+}
+.name {
+  font-size: 11px;
+  color: #1890ff;
+  white-space: nowrap;
+  transform: scale(0.9);
+}
+.btn-red {
+  font-size: 11px;
+  color: #e1251b;
+  border: 1px solid #e1251b;
+  padding: 2px 8px;
+  border-radius: 12px;
+  margin-bottom: 5px;
+}
 </style>

src/views/home/jdcomponents/JDCategory.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="cate-menu" @mouseleave="activeIndex = -1">
     <ul class="cate-list">
-      <li 
-        v-for="(c, i) in categories" 
-        :key="i" 
-        class="cate-item"
-        :class="{ active: activeIndex === i }"
-        @mouseenter="activeIndex = i"
-      >
+      <li v-for="(c, i) in categories" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="activeIndex = i">
         <img :src="c.icon" class="cate-icon" />
         <a href="#">{{ c.name }}</a>
       </li>
@@ -15,77 +9,98 @@
 
     <!-- 巨大悬浮菜单面板 (根据图5精细刻画) -->
     <div class="category-pop" v-show="activeIndex !== -1">
-       <div class="pop-header flex-between">
-          <div class="pop-tags flex">
-             <span class="p-tag">设备固资</span>
-             <span class="p-tag">职场环境</span>
-             <span class="p-tag">3C数码电子城</span>
-          </div>
-          <div class="pop-logo">
-             <span class="red-t">京东</span><span class="black-t">3C数码</span><br/>
-             <span class="small-t">电脑 | 数码 | 手机 | 图书 | 文具</span>
-          </div>
-       </div>
-
-       <div class="pop-body">
-          <dl class="sub-dl flex">
-             <dt>办公电脑</dt>
-             <dd>
-                <a href="#">台式机</a><a href="#">平板电脑</a><a href="#">显示器</a><a href="#">服务器</a><a href="#">工作站</a><a href="#">一体机</a><a href="#">组装电脑</a><a href="#">游戏本</a><a href="#">设计师本</a><a href="#">笔记本配件</a><a href="#">平板电脑配件</a><a href="#">阅卷机</a><a href="#">办公本</a>
-             </dd>
-          </dl>
-          <dl class="sub-dl flex">
-             <dt>办公打印</dt>
-             <dd>
-                <a href="#">复合机</a><a href="#">打印机</a><a href="#">多功能一体机</a><a href="#">扫描仪</a><a href="#">条码打印机</a><a href="#">碎纸机</a><a href="#">装订机</a><a href="#">高拍仪</a><a href="#">标签打印机</a><a href="#">传真设备</a>
-             </dd>
-          </dl>
-          <dl class="sub-dl flex">
-             <dt>电脑组件</dt>
-             <dd>
-                <a href="#">显示器</a><a href="#">硬盘</a><a href="#">SSD固态硬盘</a><a href="#">机械硬盘</a><a href="#">显卡</a><a href="#">内存</a><a href="#">主板CPU套装</a><a href="#">组装机</a><a href="#">装机配件</a><a href="#">机箱</a><a href="#">刻录机</a><a href="#">光驱</a><a href="#">散热器</a><a href="#">电源</a>
-             </dd>
-          </dl>
-          <dl class="sub-dl flex">
-             <dt>电脑外设</dt>
-             <dd>
-                <a href="#">机柜</a><a href="#">键盘</a><a href="#">扩展坞</a><a href="#">手柄方向盘</a><a href="#">鼠标</a><a href="#">鼠标垫</a><a href="#">移动固态硬盘</a><a href="#">移动机械硬盘</a><a href="#">硬盘盒</a><a href="#">游戏耳机</a><a href="#">游戏机</a><a href="#">游戏软件</a><a href="#">游戏周边</a>
-             </dd>
-          </dl>
-          <dl class="sub-dl flex">
-             <dt>智能会议</dt>
-             <dd>
-                <a href="#">直播设备</a><a href="#">U盘</a><a href="#">UPS电源</a><br/>
-                <a href="#">办公大屏</a><a href="#">投影机</a><a href="#">会议平板</a><a href="#">会议摄像头</a><a href="#">音响</a><a href="#">会议音响</a><a href="#">麦克风</a><a href="#">路由器</a><a href="#">网络机顶盒</a><a href="#">交换机</a><a href="#">网络存储</a><a href="#">网线</a><a href="#">网卡</a><a href="#">话务耳机</a><br/>
-                <a href="#">安防监控</a><a href="#">电动幕布</a><a href="#">网络仪器仪表</a><a href="#">白板</a><a href="#">功放</a><a href="#">电视配件</a><a href="#">回音壁Soundbar</a><a href="#">会议音视频</a><a href="#">手写板</a><a href="#">投影配件</a><a href="#">录音笔</a><a href="#">翻译机</a><a href="#">翻译设备</a>
-             </dd>
-          </dl>
-          <dl class="sub-dl flex">
-             <dt>IT运维</dt>
-             <dd>
-                <a href="#">交换机</a><a href="#">路由器</a><a href="#">网络机顶盒</a><a href="#">网络存储</a><a href="#">网卡</a><a href="#">网线</a><a href="#">网络配件</a><a href="#">网络仪器仪表</a><a href="#">线缆</a><a href="#">普通网络设备</a>
-             </dd>
-          </dl>
-       </div>
+      <div class="pop-header flex-between">
+        <div class="pop-tags flex">
+          <span class="p-tag">设备固资</span>
+          <span class="p-tag">职场环境</span>
+          <span class="p-tag">3C数码电子城</span>
+        </div>
+        <div class="pop-logo">
+          <span class="red-t">京东</span><span class="black-t">3C数码</span><br />
+          <span class="small-t">电脑 | 数码 | 手机 | 图书 | 文具</span>
+        </div>
+      </div>
+
+      <div class="pop-body">
+        <dl class="sub-dl flex">
+          <dt>办公电脑</dt>
+          <dd>
+            <a href="#">台式机</a><a href="#">平板电脑</a><a href="#">显示器</a><a href="#">服务器</a><a href="#">工作站</a><a href="#">一体机</a
+            ><a href="#">组装电脑</a><a href="#">游戏本</a><a href="#">设计师本</a><a href="#">笔记本配件</a><a href="#">平板电脑配件</a
+            ><a href="#">阅卷机</a><a href="#">办公本</a>
+          </dd>
+        </dl>
+        <dl class="sub-dl flex">
+          <dt>办公打印</dt>
+          <dd>
+            <a href="#">复合机</a><a href="#">打印机</a><a href="#">多功能一体机</a><a href="#">扫描仪</a><a href="#">条码打印机</a
+            ><a href="#">碎纸机</a><a href="#">装订机</a><a href="#">高拍仪</a><a href="#">标签打印机</a><a href="#">传真设备</a>
+          </dd>
+        </dl>
+        <dl class="sub-dl flex">
+          <dt>电脑组件</dt>
+          <dd>
+            <a href="#">显示器</a><a href="#">硬盘</a><a href="#">SSD固态硬盘</a><a href="#">机械硬盘</a><a href="#">显卡</a><a href="#">内存</a
+            ><a href="#">主板CPU套装</a><a href="#">组装机</a><a href="#">装机配件</a><a href="#">机箱</a><a href="#">刻录机</a><a href="#">光驱</a
+            ><a href="#">散热器</a><a href="#">电源</a>
+          </dd>
+        </dl>
+        <dl class="sub-dl flex">
+          <dt>电脑外设</dt>
+          <dd>
+            <a href="#">机柜</a><a href="#">键盘</a><a href="#">扩展坞</a><a href="#">手柄方向盘</a><a href="#">鼠标</a><a href="#">鼠标垫</a
+            ><a href="#">移动固态硬盘</a><a href="#">移动机械硬盘</a><a href="#">硬盘盒</a><a href="#">游戏耳机</a><a href="#">游戏机</a
+            ><a href="#">游戏软件</a><a href="#">游戏周边</a>
+          </dd>
+        </dl>
+        <dl class="sub-dl flex">
+          <dt>智能会议</dt>
+          <dd>
+            <a href="#">直播设备</a><a href="#">U盘</a><a href="#">UPS电源</a><br />
+            <a href="#">办公大屏</a><a href="#">投影机</a><a href="#">会议平板</a><a href="#">会议摄像头</a><a href="#">音响</a
+            ><a href="#">会议音响</a><a href="#">麦克风</a><a href="#">路由器</a><a href="#">网络机顶盒</a><a href="#">交换机</a
+            ><a href="#">网络存储</a><a href="#">网线</a><a href="#">网卡</a><a href="#">话务耳机</a><br />
+            <a href="#">安防监控</a><a href="#">电动幕布</a><a href="#">网络仪器仪表</a><a href="#">白板</a><a href="#">功放</a
+            ><a href="#">电视配件</a><a href="#">回音壁Soundbar</a><a href="#">会议音视频</a><a href="#">手写板</a><a href="#">投影配件</a
+            ><a href="#">录音笔</a><a href="#">翻译机</a><a href="#">翻译设备</a>
+          </dd>
+        </dl>
+        <dl class="sub-dl flex">
+          <dt>IT运维</dt>
+          <dd>
+            <a href="#">交换机</a><a href="#">路由器</a><a href="#">网络机顶盒</a><a href="#">网络存储</a><a href="#">网卡</a><a href="#">网线</a
+            ><a href="#">网络配件</a><a href="#">网络仪器仪表</a><a href="#">线缆</a><a href="#">普通网络设备</a>
+          </dd>
+        </dl>
+      </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue';
 
-const activeIndex = ref(-1)
+const activeIndex = ref(-1);
 
 // 线条风格 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik00IDhoMTJ2OGExIDEgMCAwIDEtMSAxSDVhMSAxIDAgMCAxLTEtMVY4em0xMiAyYTQgNCAwIDAgMSAwIDhoLTJtLTItMTh2NG0tNCAwdjQiLz48L3N2Zz4='
-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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xOSA4bDEgNG0tMTYgMGwxLTRoMTJtLTIgMmgybTEgMTB2LTJIM3YybTEwIDBoNG0tNiAwSDRtMTQgMGgydjRINnYtNCIvPjwvc3ZnPg=='
-const iconTent = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAzTDIgMjFoMjBtLTEwLTE4bDkgMTguNW0tMTggMGg4Ii8+PC9zdmc+'
+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik00IDhoMTJ2OGExIDEgMCAwIDEtMSAxSDVhMSAxIDAgMCAxLTEtMVY4em0xMiAyYTQgNCAwIDAgMSAwIDhoLTJtLTItMTh2NG0tNCAwdjQiLz48L3N2Zz4=';
+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xOSA4bDEgNG0tMTYgMGwxLTRoMTJtLTIgMmgybTEgMTB2LTJIM3YybTEwIDBoNG0tNiAwSDRtMTQgMGgydjRINnYtNCIvPjwvc3ZnPg==';
+const iconTent =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAzTDIgMjFoMjBtLTEwLTE4bDkgMTguNW0tMTggMGg4Ii8+PC9zdmc+';
 
 const categories = [
   { name: '办公电脑 / 办公打印 / 电脑组件', icon: iconPC },
@@ -101,30 +116,42 @@ const categories = [
 </script>
 
 <style scoped>
-.cate-menu { position: relative; width: 100%; height: 100%; z-index: 100; }
-.cate-list { padding: 10px 0; background: #F8F9FA; height: 100%; box-sizing: border-box; }
-
-.cate-item { 
-  height: 40px; 
-  padding: 0 16px; 
-  cursor: pointer; 
-  display: flex; 
-  align-items: center; 
+.cate-menu {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+.cate-list {
+  padding: 10px 0;
+  background: #f8f9fa;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.cate-item {
+  height: 40px;
+  padding: 0 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
   position: relative;
   box-sizing: border-box;
   border: 1px solid transparent; /* 为红框预留 */
 }
 
-.cate-item.active, .cate-item:hover { 
-  background: #fff; 
-  border-color: #E1251B; /* 四周边框变红 */
+.cate-item.active,
+.cate-item:hover {
+  background: #fff;
+  border-color: #e1251b; /* 四周边框变红 */
   border-right-color: #fff; /* 右边框变白打通 */
   z-index: 201; /* 盖在弹窗上方 */
   width: calc(100% + 1px); /* 向右延伸 1px */
 }
 
-.cate-item.active a, .cate-item:hover a { 
-  color: #E1251B; 
+.cate-item.active a,
+.cate-item:hover a {
+  color: #e1251b;
   font-weight: bold;
 }
 
@@ -139,34 +166,68 @@ const categories = [
   filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
 }
 
-.cate-item a { font-size: 14px; color: #333; text-decoration: none; }
+.cate-item a {
+  font-size: 14px;
+  color: #333;
+  text-decoration: none;
+}
 
 /* 右侧巨大弹出层 */
 .category-pop {
   position: absolute;
   left: 280px;
   top: 0;
-  width: 820px;
+  width: 950px;
   height: 440px;
   background: #fff;
-  border: 1px solid #E1251B;
+  border: 1px solid #e1251b;
   border-radius: 12px;
-  box-shadow: 4px 6px 20px rgba(0,0,0,0.12);
+  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.12);
   padding: 24px 30px;
   z-index: 200;
   box-sizing: border-box;
 }
 
 /* 顶部标签和 Logo */
-.pop-header { margin-bottom: 25px; align-items: flex-end; }
-.pop-tags { gap: 12px; }
-.p-tag { background: #F4F4F4; color: #333; font-size: 12px; padding: 6px 16px; border-radius: 4px; cursor: pointer; }
-.p-tag:hover { background: #E1251B; color: #fff; }
+.pop-header {
+  margin-bottom: 25px;
+  align-items: flex-end;
+}
+.pop-tags {
+  gap: 12px;
+}
+.p-tag {
+  background: #f4f4f4;
+  color: #333;
+  font-size: 12px;
+  padding: 6px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.p-tag:hover {
+  background: #e1251b;
+  color: #fff;
+}
 
-.pop-logo { text-align: right; line-height: 1.2; }
-.red-t { color: #E1251B; font-size: 18px; font-weight: 900; }
-.black-t { color: #000; font-size: 18px; font-weight: 900; }
-.small-t { font-size: 9px; color: #E1251B; letter-spacing: 1px; }
+.pop-logo {
+  text-align: right;
+  line-height: 1.2;
+}
+.red-t {
+  color: #e1251b;
+  font-size: 18px;
+  font-weight: 900;
+}
+.black-t {
+  color: #000;
+  font-size: 18px;
+  font-weight: 900;
+}
+.small-t {
+  font-size: 9px;
+  color: #e1251b;
+  letter-spacing: 1px;
+}
 
 /* 主体列表区域 */
 .sub-dl {
@@ -191,11 +252,11 @@ const categories = [
 }
 .sub-dl dd a {
   font-size: 12px;
-  color: #8C8C8C;
+  color: #8c8c8c;
   text-decoration: none;
   white-space: nowrap;
 }
 .sub-dl dd a:hover {
-  color: #E1251B;
+  color: #e1251b;
 }
 </style>

src/views/home/jdcomponents/JDFooter.vue

@@ -6,7 +6,7 @@
         <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>
+              <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>
@@ -15,7 +15,7 @@
         <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>
+              <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>
@@ -24,7 +24,7 @@
         <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>
+              <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>
@@ -33,7 +33,7 @@
         <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>
+              <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>
@@ -90,31 +90,28 @@
 
     <!-- 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 京东JD.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>
+      <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 京东JD.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>
@@ -162,7 +159,7 @@
   z-index: 2;
   font-size: 18px;
   font-weight: 800;
-  color: #E1251B;
+  color: #e1251b;
 }
 .s-desc {
   font-size: 18px;
@@ -201,7 +198,7 @@
   transition: color 0.2s;
 }
 .help-links dd a:hover {
-  color: #E1251B;
+  color: #e1251b;
 }
 
 /* copyright */
@@ -219,7 +216,7 @@
   transition: color 0.2s;
 }
 .copyright .links a:hover {
-  color: #E1251B;
+  color: #e1251b;
 }
 .copyright .sep {
   margin: 0 10px;

src/views/home/jdcomponents/JDHeader.vue

@@ -1,10 +1,21 @@
 <template>
   <div class="jd-header">
     <!-- 顶部窄条 -->
-    <!-- <div class="header-top">
+    <div class="header-top">
       <div class="w flex-between">
         <div class="loc-wrap">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -2px; margin-right: 2px;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            style="vertical-align: -2px; margin-right: 2px"
+          >
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+            <circle cx="12" cy="10" r="3"></circle>
+          </svg>
           湖北
         </div>
         <ul class="top-nav-links flex">
@@ -21,7 +32,7 @@
           <li class="hotline">咨询热线 400-028-0000</li>
         </ul>
       </div>
-    </div> -->
+    </div>
 
     <!-- 中间搜索行 -->
     <div :class="['header-mid-wrap', { 'is-fixed': isFixed }]">
@@ -54,9 +65,7 @@
   </div>
 </template>
 
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
-
+<script setup lang="ts">
 const isFixed = ref(false);
 
 const handleScroll = () => {

src/views/home/jdcomponents/JDProducts.vue

@@ -3,19 +3,22 @@
     <!-- 顶部滑动的商品分类导航 -->
     <div class="cat-nav-wrapper">
       <div class="more-btn prev-btn" v-show="showPrev" @click="slide(-300)">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
           <polyline points="15 18 9 12 15 6"></polyline>
         </svg>
       </div>
 
       <div class="cat-nav-list" ref="navListRef" @scroll="checkScroll">
-        <div
-          class="cat-item"
-          v-for="(cat, i) in categories"
-          :key="i"
-          :class="{ active: currentCat === i }"
-          @click="currentCat = i"
-        >
+        <div class="cat-item" v-for="(cat, i) in categories" :key="i" :class="{ active: currentCat === i }" @click="currentCat = i">
           <img :src="`/icons/icon_${cat.icon}.svg`" class="cat-img" />
           <div class="cat-text">
             <span class="c-t">{{ cat.title }}</span>
@@ -25,7 +28,16 @@
       </div>
 
       <div class="more-btn next-btn" v-show="showNext" @click="slide(300)">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
           <polyline points="9 18 15 12 9 6"></polyline>
         </svg>
       </div>
@@ -49,7 +61,13 @@
             <span class="tag-ep">企业价</span>
           </div>
           <div class="p-actions">
-            <button class="btn-cart-icon"><svg width="16" height="16" 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></button>
+            <button class="btn-cart-icon">
+              <svg width="16" height="16" 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>
+            </button>
             <button class="btn-buy">
               <span class="txt-normal">加入采购清单</span>
               <span class="txt-hover">注册企业用户可享</span>
@@ -61,7 +79,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="Index" lang="ts">
 import { ref, onMounted, computed } from 'vue';
 
 const categories = [
@@ -97,15 +115,16 @@ const baseProducts = [
   { name: '工业级大功率风扇 车间用强力落地扇 降温通风', price: '288', dec: '00', img: '@/assets/jd/prod_light.png' }
 ];
 
-baseProducts.forEach(p => {
+baseProducts.forEach((p) => {
   if (!p.img) p.img = '@/assets/jd/prod_office.png';
 });
 
 // 生成更多数据用于测试吸顶
 const productsList = computed(() => {
   let list = [];
-  for(let i=0; i<3; i++) { // 36 items
-    list = list.concat(baseProducts.map(p => ({...p, id: i + '_' + p.name})));
+  for (let i = 0; i < 3; i++) {
+    // 36 items
+    list = list.concat(baseProducts.map((p) => ({ ...p, id: i + '_' + p.name })));
   }
   return list;
 });
@@ -128,7 +147,8 @@ const slide = (amount) => {
   }
 };
 
-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 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;
@@ -141,7 +161,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.products-section { margin-top: 24px; background: #fff; border-radius: 12px; margin-bottom: 50px; }
+.products-section {
+  margin-top: 24px;
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 50px;
+}
 
 /* 导航栏 (吸顶) */
 .cat-nav-wrapper {
@@ -165,7 +190,9 @@ onMounted(() => {
   flex: 1;
   padding: 16px 0;
 }
-.cat-nav-list::-webkit-scrollbar { display: none; }
+.cat-nav-list::-webkit-scrollbar {
+  display: none;
+}
 
 .cat-item {
   display: flex;
@@ -177,25 +204,69 @@ onMounted(() => {
   margin-right: 8px;
   transition: all 0.2s;
 }
-.cat-item:hover { background: #f9f9f9; }
-.cat-item.active .c-t, .cat-item.active .c-s { color: #E1251B; }
+.cat-item:hover {
+  background: #f9f9f9;
+}
+.cat-item.active .c-t,
+.cat-item.active .c-s {
+  color: #e1251b;
+}
 
-.cat-img { width: 32px; height: 32px; margin-right: 12px; border-radius: 50%; }
+.cat-img {
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+  border-radius: 50%;
+}
 
-.cat-text { display: flex; flex-direction: column; }
-.c-t { font-size: 15px; font-weight: bold; color: #333; margin-bottom: 2px; }
-.c-s { font-size: 12px; color: #999; }
+.cat-text {
+  display: flex;
+  flex-direction: column;
+}
+.c-t {
+  font-size: 15px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 2px;
+}
+.c-s {
+  font-size: 12px;
+  color: #999;
+}
 
 /* 左右箭头 */
 .more-btn {
-  width: 28px; height: 28px; border-radius: 50%;
-  background: #fff; border: 1px solid #eee; display: flex; align-items: center; justify-content: center;
-  cursor: pointer; color: #666; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #fff;
+  border: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #666;
+  font-size: 14px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+.more-btn:hover {
+  background: #f4f4f4;
+}
+.prev-btn {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+.next-btn {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  margin-left: 0;
 }
-.more-btn:hover { background: #f4f4f4; }
-.prev-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 10; }
-.next-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 10; margin-left: 0; }
-
 
 /* 商品网格 */
 .product-grid {
@@ -203,9 +274,21 @@ onMounted(() => {
   gap: 12px;
   padding: 0 20px 20px 20px;
 }
-@media screen and (min-width: 1600px) { .product-grid { grid-template-columns: repeat(6, 1fr); } }
-@media screen and (min-width: 1210px) and (max-width: 1599px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }
-@media screen and (max-width: 1209px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
+@media screen and (min-width: 1600px) {
+  .product-grid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+@media screen and (min-width: 1210px) and (max-width: 1599px) {
+  .product-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+@media screen and (max-width: 1209px) {
+  .product-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
 
 /* 商品卡片 */
 .p-card {
@@ -218,7 +301,10 @@ onMounted(() => {
   flex-direction: column;
   padding: 12px;
 }
-.p-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
+.p-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
 
 .p-img-box {
   width: 100%;
@@ -229,21 +315,34 @@ onMounted(() => {
   margin-bottom: 12px;
   position: relative;
 }
-.p-img-box img { width: 100%; height: 100%; object-fit: cover; }
+.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.04);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.04);
   opacity: 0;
   transition: opacity 0.2s;
   pointer-events: none;
 }
-.p-card:hover .p-img-box::after { opacity: 1; }
+.p-card:hover .p-img-box::after {
+  opacity: 1;
+}
 
-.p-info { flex: 1; display: flex; flex-direction: column; }
+.p-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 .p-name {
   font-size: 13px;
   line-height: 1.4;
@@ -255,42 +354,111 @@ onMounted(() => {
   color: #333;
   margin-bottom: 10px;
 }
-.tag-zy { background: #E1251B; color: #fff; padding: 0 4px; border-radius: 2px; font-size: 11px; margin-right: 4px; vertical-align: baseline; display: inline-block; }
+.tag-zy {
+  background: #e1251b;
+  color: #fff;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-size: 11px;
+  margin-right: 4px;
+  vertical-align: baseline;
+  display: inline-block;
+}
 
-.p-price-row { color: #E1251B; display: flex; align-items: baseline; margin-bottom: 12px; margin-top: auto; }
-.p-currency { font-size: 12px; font-weight: bold; }
-.p-price { font-size: 20px; font-weight: 800; font-family: tahoma,arial,Microsoft YaHei,Hiragino Sans GB,u5b8bu4f53,sans-serif; }
-.p-decimal { font-size: 12px; font-weight: bold; margin-right: 6px; }
-.tag-ep { font-size: 11px; color: #187AF2; border: 1px solid #187AF2; border-radius: 2px; padding: 0 4px; margin-left: 6px;}
+.p-price-row {
+  color: #e1251b;
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 12px;
+  margin-top: auto;
+}
+.p-currency {
+  font-size: 12px;
+  font-weight: bold;
+}
+.p-price {
+  font-size: 20px;
+  font-weight: 800;
+  font-family:
+    tahoma,
+    arial,
+    Microsoft YaHei,
+    Hiragino Sans GB,
+    u5b8bu4f53,
+    sans-serif;
+}
+.p-decimal {
+  font-size: 12px;
+  font-weight: bold;
+  margin-right: 6px;
+}
+.tag-ep {
+  font-size: 11px;
+  color: #187af2;
+  border: 1px solid #187af2;
+  border-radius: 2px;
+  padding: 0 4px;
+  margin-left: 6px;
+}
 
-.p-actions { display: flex; gap: 8px; }
+.p-actions {
+  display: flex;
+  gap: 8px;
+}
 .btn-cart-icon {
-  width: 32px; height: 32px;
-  border: 1px solid #e0e0e0; background: #fff; border-radius: 4px;
-  color: #666; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+  border-radius: 4px;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+.btn-cart-icon:hover {
+  border-color: #e1251b;
+  color: #e1251b;
 }
-.btn-cart-icon:hover { border-color: #E1251B; color: #E1251B; }
 
 .btn-buy {
-  flex: 1; height: 32px;
-  border: 1px solid #e0e0e0; background: #fff; border-radius: 4px;
-  color: #666; font-size: 12px; cursor: pointer; transition: all 0.2s;
-  display: flex; align-items: center; justify-content: center;
+  flex: 1;
+  height: 32px;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+  border-radius: 4px;
+  color: #666;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.txt-hover {
+  display: none;
+  font-weight: bold;
 }
-.txt-hover { display: none; font-weight: bold; }
 
 /* 悬停卡片时，按钮直接变为红色，文字改变 */
 .p-card:hover .btn-buy {
-  background: #E1251B;
-  border-color: #E1251B;
+  background: #e1251b;
+  border-color: #e1251b;
   color: #fff;
 }
-.p-card:hover .txt-normal { display: none; }
-.p-card:hover .txt-hover { display: inline; }
+.p-card:hover .txt-normal {
+  display: none;
+}
+.p-card:hover .txt-hover {
+  display: inline;
+}
 
 /* 鼠标悬停在按钮本身时，保持红色 */
 .p-card .btn-buy:hover {
-  background: #C81623;
-  border-color: #C81623;
+  background: #c81623;
+  border-color: #c81623;
 }
 </style>

src/views/home/jdcomponents/JDScene.vue

@@ -7,9 +7,7 @@
           <h3 class="s-main-t">场景解决方案</h3>
           <span class="s-sub-t">一站全买齐</span>
         </div>
-        <a href="#" class="enter-pill">
-          进入全场景 <i class="arr-ic"></i>
-        </a>
+        <a href="#" class="enter-pill"> 进入全场景 <i class="arr-ic"></i> </a>
       </div>
 
       <!-- 右侧卡片区 -->
@@ -35,7 +33,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="Index" lang="ts">
 const scenes = [
   { title: '耗材采购', desc: '纸墨随买随用', img: '@/assets/jd/scene_stationery.png' },
   { title: '防暑降温', desc: '守护员工健康', img: '@/assets/jd/scene_cooling.png' },
@@ -45,9 +43,11 @@ const scenes = [
 </script>
 
 <style scoped>
-.scene-integrated { margin-top: 15px; }
+.scene-integrated {
+  margin-top: 15px;
+}
 .scene-inner {
-  background: linear-gradient(90deg, #6BE7B5 0%, #39D696 100%);
+  background: linear-gradient(90deg, #6be7b5 0%, #39d696 100%);
   border-radius: 12px;
   padding: 14px 20px;
   align-items: center;
@@ -59,15 +59,28 @@ const scenes = [
   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; }
+.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;
+  color: #e1251b;
   padding: 6px 18px;
   border-radius: 20px;
   font-size: 13px;
@@ -75,22 +88,36 @@ const scenes = [
   text-decoration: none;
 }
 .arr-ic {
-  display: inline-block; width: 12px; height: 12px;
-  background: #E1251B; border-radius: 50%; margin-left: 6px;
+  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;
+  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; }
+.scene-right {
+  overflow: hidden;
+}
+.s-grid-h {
+  gap: 10px;
+}
 
 .s-item-card {
   flex: 1;
-  background: #E8FBF1; /* Pale green background matching Figure 2 */
+  background: #e8fbf1; /* Pale green background matching Figure 2 */
   border-radius: 10px;
   height: 130px;
   display: flex;
@@ -98,17 +125,37 @@ const scenes = [
   overflow: hidden;
   transition: transform 0.3s;
 }
-.s-item-card:hover { transform: translateY(-3px); }
+.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-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;
+  background: #34c759;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -116,22 +163,45 @@ const scenes = [
   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;
+  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; }
+.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个卡片 */
+  .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个卡片 */
+  .s-item-card:nth-child(3) {
+    display: none;
+  } /* 宽度更小时隐藏第3个卡片 */
 }
 </style>

src/views/home/jdcomponents/JDUserPanel.vue

@@ -16,113 +16,146 @@
 
     <!-- 会员卡片 -->
     <div class="member-card">
-       <div class="c-tag">企业会员</div>
-       <div class="c-main flex-between">
-         <div class="c-left">
-            <div class="c-h">新人福利</div>
-            <p>领3000元采购补贴</p>
-         </div>
-         <div class="c-btn">立即开通 <i class="arr">&gt;</i></div>
-       </div>
-    </div>
-
-    <!-- 会员权益文本 -->
-    <div class="card-benefits">
-       <div class="b-row-1 flex-between">
-          <span>大额免息</span>
-          <span>充值返</span>
-          <span>免费领</span>
-          <span>购卡返</span>
-       </div>
-       <div class="b-row-2 flex-between">
-          <span>账期</span>
-          <span>余额</span>
-          <span>优惠券</span>
-          <span>礼品卡</span>
-       </div>
+      <div class="c-tag">企业会员</div>
+      <div class="c-main flex-between">
+        <div class="c-left">
+          <div class="c-h">企业授信额度</div>
+          <p class="credit-num">20000元</p>
+        </div>
+      </div>
     </div>
 
-    <!-- 免息广告条 -->
-    <div class="small-ad flex-center">
-       <div class="fire-icon">
-          <svg viewBox="0 0 1024 1024" width="10" height="10"><path d="M512 0C326.4 200 256 312 256 464c0 141.4 114.6 256 256 256s256-114.6 256-256c0-152-70.4-264-256-464z" fill="#fff"/></svg>
-       </div>
-       <span>申请免息账期 首单立减288</span>
+    <!-- 订单状态统计 -->
+    <div class="order-stats">
+      <div class="stat-item">
+        <div class="num">0</div>
+        <div class="label">待审核</div>
+      </div>
+      <div class="stat-item">
+        <div class="num">0</div>
+        <div class="label">待付款</div>
+      </div>
+      <div class="stat-item">
+        <div class="num">0</div>
+        <div class="label">待发货</div>
+      </div>
+      <div class="stat-item">
+        <div class="num">0</div>
+        <div class="label">待收货</div>
+      </div>
     </div>
 
     <!-- 企业工作台 -->
     <div class="tools-sec relative">
       <div class="t-h flex-between">
-         <span>企业工作台</span>
-         <i class="icon-more">&gt;</i>
+        <span>企业工作台</span>
+        <i class="icon-more">&gt;</i>
       </div>
 
       <!-- 滑动翻页组件 -->
       <div class="t-slider-wrap">
         <div class="t-track" :style="{ transform: `translateX(-${currentPage * 100}%)` }">
-
           <!-- 第 1 页 -->
           <div class="t-page">
             <div class="t-grid">
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE5IDIxSDVDNC40IDIxIDQgMjAuNiA0IDIwVjRDNCAzLjQgNC40IDMgNSAzSDE0TDIwIDlWMjBDMjAgMjAuNiAxOS42IDIxIDE5IDIxWiIvPjxwYXRoIGQ9Ik0xNCAzVjloNiIvPjxwb2x5Z29uIHBvaW50cz0iOSAxMyAxMSAxNSAxNSAxMSA5IDEzIi8+PC9zdmc+" class="t-icon" />
-                 <span>订单中心</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjEwIiB5Mj0iNiIvPjxsaW5lIHgxPSI2IiB5MT0iMTAiIHgyPSIxMCIgeTI9IjEwIi8+PC9zdmc+" class="t-icon" />
-                 <span>发票中心</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMkgxNVY2SDlaTTUgNlYyMkgxOVY2SDVaIi8+PGxpbmUgeDE9IjkiIHkxPSIxMiIgeDI9IjE1IiB5Mj0iMTIiLz48bGluZSB4MT0iOSIgeTE9IjE2IiB4Mj0iMTUiIHkyPSIxNiIvPjwvc3ZnPg==" class="t-icon" />
-                 <span>采购清单</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDJDOC4xIDIgNSA1LjEgNSA5QzUgMTQuMiAxMiAyMiAxMiAyMiAxMkMxMiAyMiAxOSAxNC4yIDE5IDlDMTkgNS4xIDE1LjkgMiAxMiAyWiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iOSIgcj0iMiIvPjwvc3ZnPg==" class="t-icon" />
-                 <span>多地下单</span>
-               </div>
-               <div class="t-i">
-                 <div class="badge">返100</div>
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMThWMTVIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg==" class="t-icon" />
-                 <span>达量返</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIvPjxwYXRoIGQ9Ik03IDlMMTEgMTVNMTUgOVYxNU0xNSA5TDEzIDEySDE3TTEzIDE1SDE3Ii8+PC9zdmc+" class="t-icon" />
-                 <span>智能选品</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgMThWMTRIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg==" class="t-icon" />
-                 <span>电子合同</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEyIiByeD0iMiIvPjxsaW5lIHgxPSI2IiB5MT0iMTIiIHgyPSIxMCIgeTI9IjEyIi8+PC9zdmc+" class="t-icon" />
-                 <span>极速认款</span>
-               </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE5IDIxSDVDNC40IDIxIDQgMjAuNiA0IDIwVjRDNCAzLjQgNC40IDMgNSAzSDE0TDIwIDlWMjBDMjAgMjAuNiAxOS42IDIxIDE5IDIxWiIvPjxwYXRoIGQ9Ik0xNCAzVjloNiIvPjxwb2x5Z29uIHBvaW50cz0iOSAxMyAxMSAxNSAxNSAxMSA5IDEzIi8+PC9zdmc+"
+                  class="t-icon"
+                />
+                <span>订单中心</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjEwIiB5Mj0iNiIvPjxsaW5lIHgxPSI2IiB5MT0iMTAiIHgyPSIxMCIgeTI9IjEwIi8+PC9zdmc+"
+                  class="t-icon"
+                />
+                <span>发票中心</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMkgxNVY2SDlaTTUgNlYyMkgxOVY2SDVaIi8+PGxpbmUgeDE9IjkiIHkxPSIxMiIgeDI9IjE1IiB5Mj0iMTIiLz48bGluZSB4MT0iOSIgeTE9IjE2IiB4Mj0iMTUiIHkyPSIxNiIvPjwvc3ZnPg=="
+                  class="t-icon"
+                />
+                <span>采购清单</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDJDOC4xIDIgNSA1LjEgNSA5QzUgMTQuMiAxMiAyMiAxMiAyMiAxMkMxMiAyMiAxOSAxNC4yIDE5IDlDMTkgNS4xIDE1LjkgMiAxMiAyWiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iOSIgcj0iMiIvPjwvc3ZnPg=="
+                  class="t-icon"
+                />
+                <span>多地下单</span>
+              </div>
+              <div class="t-i">
+                <div class="badge">返100</div>
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMThWMTVIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg=="
+                  class="t-icon"
+                />
+                <span>达量返</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIvPjxwYXRoIGQ9Ik03IDlMMTEgMTVNMTUgOVYxNU0xNSA5TDEzIDEySDE3TTEzIDE1SDE3Ii8+PC9zdmc+"
+                  class="t-icon"
+                />
+                <span>智能选品</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgMThWMTRIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg=="
+                  class="t-icon"
+                />
+                <span>电子合同</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEyIiByeD0iMiIvPjxsaW5lIHgxPSI2IiB5MT0iMTIiIHgyPSIxMCIgeTI9IjEyIi8+PC9zdmc+"
+                  class="t-icon"
+                />
+                <span>极速认款</span>
+              </div>
             </div>
           </div>
 
           <!-- 第 2 页 -->
           <div class="t-page">
             <div class="t-grid">
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjIxIiByPSIxIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMSIgcj0iMSIvPjxwYXRoIGQ9Ik0xIDFoNGwyLjY4IDEzLjM5YTIgMiAwIDAgMCAyIDEuNjFoOS43MmEyIDIgMCAwIDAgMi0xLjYxTDIzIDZINiIvPjwvc3ZnPg==" class="t-icon" />
-                 <span>采购报告</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iMSIgeDI9IjEyIiB5Mj0iMjMiLz48cGF0aCBkPSJNMTcgNVYzbS0xMCAyeTJoMTAiLz48cGF0aCBkPSJNNSAxNXYyaDEwIi8+PHBhdGggZD0iTTEyIDljLTIuMjEgMC00IDEuNzktNCA0cyAxLjc5IDQgNCA0Ii8+PHBhdGggZD0iTTEyIDE3YzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00Ii8+PC9zdmc+" class="t-icon" />
-                 <span>对公转账</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDhWMk0xOCAyMjEtdi02Ii8+PHBhdGggZD0iTTE0IDhWMk0xNCAyMnYtNiIvPjxwYXRoIGQ9Ik0xMCA4VjJNMTAgMjJ2LTYiLz48cGF0aCBkPSJNMjIgMnY4YTUgNSAwIDAgMS01IDVoLTE0YTUgNSAwIDAgMS01LTVWMloiLz48L3N2Zz4=" class="t-icon" />
-                 <span>员工饭卡</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxwb2x5Z29uIHBvaW50cz0iNiAxMCA4IDEyIDEyIDgiLz48L3N2Zz4=" class="t-icon" />
-                 <span>计划购</span>
-               </div>
-               <div class="t-i">
-                 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJIMTlNMTEgMThWMk0xNiAybC01IDUtNSA1Ii8+PC9zdmc+" class="t-icon" />
-                 <span>预算管理</span>
-               </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjIxIiByPSIxIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMSIgcj0iMSIvPjxwYXRoIGQ9Ik0xIDFoNGwyLjY4IDEzLjM5YTIgMiAwIDAgMCAyIDEuNjFoOS43MmEyIDIgMCAwIDAgMi0xLjYxTDIzIDZINiIvPjwvc3ZnPg=="
+                  class="t-icon"
+                />
+                <span>采购报告</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iMSIgeDI9IjEyIiB5Mj0iMjMiLz48cGF0aCBkPSJNMTcgNVYzbS0xMCAyeTJoMTAiLz48cGF0aCBkPSJNNSAxNXYyaDEwIi8+PHBhdGggZD0iTTEyIDljLTIuMjEgMC00IDEuNzktNCA0cyAxLjc5IDQgNCA0Ii8+PHBhdGggZD0iTTEyIDE3YzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00Ii8+PC9zdmc+"
+                  class="t-icon"
+                />
+                <span>对公转账</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDhWMk0xOCAyMjEtdi02Ii8+PHBhdGggZD0iTTE0IDhWMk0xNCAyMnYtNiIvPjxwYXRoIGQ9Ik0xMCA4VjJNMTAgMjJ2LTYiLz48cGF0aCBkPSJNMjIgMnY4YTUgNSAwIDAgMS01IDVoLTE0YTUgNSAwIDAgMS01LTVWMloiLz48L3N2Zz4="
+                  class="t-icon"
+                />
+                <span>员工饭卡</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxwb2x5Z29uIHBvaW50cz0iNiAxMCA4IDEyIDEyIDgiLz48L3N2Zz4="
+                  class="t-icon"
+                />
+                <span>计划购</span>
+              </div>
+              <div class="t-i">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJIMTlNMTEgMThWMk0xNiAybC01IDUtNSA1Ii8+PC9zdmc+"
+                  class="t-icon"
+                />
+                <span>预算管理</span>
+              </div>
             </div>
           </div>
         </div>
@@ -143,7 +176,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 
 const currentPage = ref(0);
@@ -163,13 +196,20 @@ const currentPage = ref(0);
 /* 顶部极淡粉色渐变背景 */
 .top-bg {
   position: absolute;
-  top: 0; left: 0; right: 0; height: 120px;
-  background: linear-gradient(to bottom, #FFF5EE, #ffffff);
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  background: linear-gradient(to bottom, #fff5ee, #ffffff);
   z-index: 0;
 }
 
 /* 内容提升层级 */
-.u-auth, .member-card, .card-benefits, .small-ad, .tools-sec {
+.u-auth,
+.member-card,
+.card-benefits,
+.small-ad,
+.tools-sec {
   position: relative;
   z-index: 1;
 }
@@ -185,7 +225,7 @@ const currentPage = ref(0);
   height: 48px;
   border-radius: 50%;
   border: 2px solid #fff;
-  box-shadow: 0 2px 6px rgba(255,182,193,0.3);
+  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.3);
   margin-right: 12px;
 }
 
@@ -201,21 +241,25 @@ const currentPage = ref(0);
   margin-top: 4px;
 }
 
-.divider { margin: 0 6px; color: #E0E0E0; }
+.divider {
+  margin: 0 6px;
+  color: #e0e0e0;
+}
 
 .member-card {
   margin: 0 16px;
-  background: linear-gradient(to right, #FDF0DE, #FCE3C5);
+  background: linear-gradient(to right, #fdf0de, #fce3c5);
   border-radius: 8px;
   position: relative;
-  padding: 16px 12px 12px;
+  padding: 22px 12px 12px; /* 增加顶部边距，避开标签 */
 }
 
 .c-tag {
   position: absolute;
-  top: 0; left: 0;
-  background: #11366F;
-  color: #F8D9A8;
+  top: 0;
+  left: 0;
+  background: #11366f;
+  color: #f8d9a8;
   font-size: 10px;
   padding: 2px 8px;
   border-radius: 8px 0 8px 0;
@@ -224,64 +268,57 @@ const currentPage = ref(0);
 
 .c-h {
   font-weight: 800;
-  font-size: 15px;
-  color: #5A3515;
+  font-size: 13px;
+  color: #11366f; /* 使用标签背景色 */
+  letter-spacing: 0.3px;
 }
 
-.c-left p {
-  font-size: 11px;
-  color: #7E5124;
-  margin-top: 3px;
+.c-left p.credit-num {
+  font-size: 20px;
+  font-weight: 900;
+  color: #e1251b; /* 使用红色 */
+  margin-top: 4px;
+  letter-spacing: 0.5px;
 }
 
-.c-btn {
-  font-size: 11px;
-  color: #613C1C;
-  border: 1px solid #7E5124;
-  padding: 3px 8px 3px 10px;
-  border-radius: 12px;
-  cursor: pointer;
+.order-stats {
+  margin: 12px 16px 18px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(254, 242, 242, 0.8) 100%);
+  border: 1px solid rgba(225, 37, 27, 0.1);
+  border-radius: 10px;
   display: flex;
-  align-items: center;
+  justify-content: space-around;
+  padding: 14px 0;
+  box-shadow: 0 4px 15px rgba(225, 37, 27, 0.04);
 }
-.c-btn .arr { font-style: normal; margin-left: 2px; font-family: sans-serif; }
 
-.card-benefits {
-  margin: 12px 16px 8px;
+.stat-item {
+  text-align: center;
+  flex: 1;
+  position: relative;
 }
 
-.b-row-1 {
-  font-size: 12px;
-  font-weight: 800;
-  color: #000;
-  padding: 0 4px;
+.stat-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 20%;
+  height: 60%;
+  width: 1px;
+  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05), transparent);
 }
 
-.b-row-2 {
-  font-size: 11px;
-  color: #666;
-  padding: 0 8px;
-  margin-top: 4px;
+.stat-item .num {
+  font-size: 16px;
+  font-weight: 800;
+  color: #e1251b;
+  font-family: Arial, sans-serif;
 }
 
-.small-ad {
-  margin: 0 16px 16px;
-  background: #FFF7F5;
+.stat-item .label {
   font-size: 11px;
-  color: #333;
-  padding: 8px 0;
-  border-radius: 4px;
-}
-
-.fire-icon {
-  width: 14px;
-  height: 14px;
-  background: #E1251B;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
+  color: #666;
+  margin-top: 5px;
 }
 
 .tools-sec {
@@ -296,7 +333,11 @@ const currentPage = ref(0);
   margin-bottom: 15px;
 }
 
-.icon-more { font-size: 12px; color: #999; font-style: normal; }
+.icon-more {
+  font-size: 12px;
+  color: #999;
+  font-style: normal;
+}
 
 .t-slider-wrap {
   position: relative;
@@ -326,13 +367,19 @@ const currentPage = ref(0);
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
   z-index: 10;
   transition: background 0.2s;
 }
-.flip-btn:hover { background: #f4f4f4; }
-.prev-btn { left: 4px; }
-.next-btn { right: 4px; }
+.flip-btn:hover {
+  background: #f4f4f4;
+}
+.prev-btn {
+  left: 4px;
+}
+.next-btn {
+  right: 4px;
+}
 
 .t-grid {
   display: grid;
@@ -363,7 +410,7 @@ const currentPage = ref(0);
   position: absolute;
   top: -8px;
   right: -2px;
-  background: #FF5A5F;
+  background: #ff5a5f;
   color: #fff;
   font-size: 9px;
   padding: 1px 4px;