企业够

src/api/home/index-enterprise.ts

@@ -134,3 +134,13 @@ export const adModuleConfigList = (query: any) => {
     params: query
   });
 };
+
+//查询客户最新公告
+
+export const getNewNotice = (query: any) => {
+  return request({
+    url: '/customer/pcCustomerMessage/getNewNotice',
+    method: 'get',
+    params: query
+  });
+};

src/permission.ts

@@ -66,6 +66,7 @@ function getDomainHomePath(site: string, station: ReturnType<typeof stationStore
   // 新增：当 userSonType 为 '3' 时，优先跳转到 /indexEnterprise（如果允许）
   const userStore = useUserStore();
   if (userStore.userInfo?.user?.userSonType == '3' && allowedPaths.includes('/indexEnterprise')) {
+    console.log('????????????????????????????????????')
     return '/indexEnterprise';
   }
 

src/router/index.ts

@@ -84,25 +84,25 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/indexMro',
         component: () => import('@/views/home/index-mro.vue'),
         name: 'IndexMro',
-        meta: { title: '工业品商城', search: 'hide' }
+        meta: { title: '工业品商城', search: 'hide', header: 'hide' }
       },
       {
         path: '/indexMroDiy',
         component: () => import('@/views/home/index-mroDiy.vue'),
         name: 'IndexMroDiy',
-        meta: { title: '工业品商城Diy', diy: true, search: 'hide' }
+        meta: { title: '工业品商城Diy', diy: true, search: 'hide', header: 'hide' }
       },
       {
         path: '/indexFuli',
         component: () => import('@/views/home/index-fuli.vue'),
         name: 'IndexFuli',
-        meta: { title: '福礼商城', search: 'hide' }
+        meta: { title: '福礼商城', search: 'hide', header: 'hide' }
       },
       {
         path: '/indexFuliDiy',
         component: () => import('@/views/home/index-fuliDiy.vue'),
         name: 'IndexFuliDiy',
-        meta: { title: '福礼商城Diy', diy: true, search: 'hide' }
+        meta: { title: '福礼商城Diy', diy: true, search: 'hide', header: 'hide' }
       },
       {
         path: '/indexData',

src/views/home/index-enterprise.vue

@@ -1,17 +1,10 @@
 <template>
   <div class="jd-app">
+    <!-- 1. 顶部 Header (Logo, 搜索) -->
     <JDHeader />
+
     <!-- 2. 核心 Banner 区域 -->
     <section class="banner-area w">
-      <!-- 极简而纯粹的悬挂式广告大图，挂于 1600px 外部左侧 -->
-      <!-- 悬停时通过 CSS 自动扩宽并享有绝对最高层级 9999 -->
-      <div class="expand-ad-layer" @click="onPath(adLeft.link)">
-        <img :src="adLeft.imageUrl" alt="促销大图" class="expand-img-full" />
-
-        <!-- 作为大图一部分直接漂浮在上面的文案，不破坏图片的整体性 -->
-        <div class="ad-left-text"></div>
-      </div>
-
       <!-- 右侧主内容区域，霸占 1600px 全宽 -->
       <div class="banner-layout flex">
         <!-- 左侧大列 (导航 + 分类与广告) -->
@@ -47,7 +40,7 @@
               <!-- 导航滚动视口 -->
               <ul class="nav-list flex" ref="navListRef" @scroll="checkScroll">
                 <li v-for="(item, index) in navItems" :key="index" :class="{ active: index === 0 }" @click="onPath(item.link)">
-                  <el-image class="n-ic-img" :src="item.icon" />
+                  <img :src="item.icon" class="n-ic-img" />
                   {{ item.title }}
                 </li>
               </ul>
@@ -71,6 +64,7 @@
               </div>
             </div>
           </div>
+
           <!-- 下方：分类与广告栏并排 -->
           <div class="banner-bottom flex flex-1">
             <!-- 左侧分类菜单 (大屏常驻，小屏悬停显示) -->
@@ -90,9 +84,10 @@
             </div>
           </div>
         </div>
+
         <!-- 右侧大列：用户面板 (撑满高度) -->
         <div class="user-col">
-          <JDUserPanel class="user-col" />
+          <JDUserPanel />
         </div>
       </div>
     </section>
@@ -100,34 +95,35 @@
     <!-- 3. 下方模块 -->
     <JDScene />
     <JDProducts />
-
-    <!-- 4. 页脚 -->
-    <!-- <JDFooter /> -->
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
 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';
+// import JDFooter from '../../components/jd/JDFooter.vue';
 import { jdheaderCategoryList, getCurrentAdLeft } from '@/api/home/index-enterprise';
 import { onPath } from '@/utils/siteConfig';
 
-const navItems = ref<any>([]);
-const adLeft = ref<any>({});
-
-const isLargeScreen = ref(window.innerWidth >= 1600);
+const isLargeScreen = ref(window.innerWidth >= 1315);
 const adHovered = ref(false);
 const check = () => {
-  isLargeScreen.value = window.innerWidth >= 1600;
+  isLargeScreen.value = window.innerWidth >= 1315;
   setTimeout(checkScroll, 0);
 };
 
+const navItems = ref([]);
+
+const navListRef = ref(null);
+const showPrev = ref(false);
+const showNext = ref(true);
+const showSceneCat = ref(false);
+
 jdheaderCategoryList({ status: 1 }).then((res) => {
   if (res.code == 200) {
     document.documentElement.style.setProperty('--hover-jd', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
@@ -135,17 +131,6 @@ jdheaderCategoryList({ status: 1 }).then((res) => {
   }
 });
 
-getCurrentAdLeft({}).then((res) => {
-  if (res.code == 200) {
-    adLeft.value = res.data;
-  }
-});
-
-const navListRef = ref(null);
-const showPrev = ref(false);
-const showNext = ref(true);
-const showSceneCat = ref(false);
-
 const checkScroll = () => {
   if (!navListRef.value) return;
   const { scrollLeft, scrollWidth, clientWidth } = navListRef.value;
@@ -173,7 +158,6 @@ onUnmounted(() => window.removeEventListener('resize', check));
   background: #f8f8f8;
   min-height: 100vh;
 }
-
 .banner-area {
   margin-top: 10px;
   position: relative;
@@ -182,106 +166,13 @@ onUnmounted(() => window.removeEventListener('resize', check));
   z-index: 5;
   display: flex;
   height: 460px;
+  box-sizing: border-box;
 }
-
-/* 极简式大图广告容器，初始 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;
-}
-
-/* 一整张原生的大图片，定死 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;
+  align-items: flex-start;
 }
 
 /* 主体列 */
@@ -290,18 +181,20 @@ onUnmounted(() => window.removeEventListener('resize', check));
   flex-direction: column;
   overflow: visible;
   min-width: 0;
+  flex: 1;
 }
 
 /* 导航条样式 */
 .nav-bar {
   height: 60px;
   line-height: 60px;
-  padding: 0 20px;
+  padding: 0;
   background: #fff;
   border-radius: 12px 12px 0 0;
   position: relative;
   box-sizing: border-box;
-  width: 100%;
+  width: calc(100% - 16px);
+  margin-left: 16px;
 }
 .nav-scroll-wrapper {
   display: flex;
@@ -333,6 +226,9 @@ onUnmounted(() => window.removeEventListener('resize', check));
   color: #333;
   height: 100%;
 }
+.nav-list li.active {
+  color: var(--hover-jd);
+}
 .nav-list li:hover {
   color: var(--hover-jd);
 }
@@ -421,13 +317,14 @@ onUnmounted(() => window.removeEventListener('resize', check));
   display: flex;
   flex: 1;
   overflow: visible;
-  padding: 0 10px 10px;
-  gap: 12px;
+  padding: 0 0 16px 16px;
+  gap: 16px;
   background: transparent;
   position: relative;
 }
 .side-category {
-  width: 280px;
+  width: 248px;
+  height: 384px;
   background: transparent;
   overflow: visible;
   position: relative;
@@ -436,8 +333,8 @@ onUnmounted(() => window.removeEventListener('resize', check));
 .side-category.is-dropdown {
   position: absolute;
   top: 0;
-  bottom: 10px; /* 补偿 banner-bottom 的 10px 底部 padding */
-  left: 10px; /* 补偿 banner-bottom 的 10px 左侧 padding */
+  bottom: 16px; /* 补偿 banner-bottom 的 16px 底部 padding */
+  left: 16px; /* 补偿 banner-bottom 的 16px 左侧 padding */
   z-index: 9999;
   box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.15);
 }
@@ -451,13 +348,13 @@ onUnmounted(() => window.removeEventListener('resize', check));
 
 /* 用户列 */
 .user-col {
-  width: 230px;
+  width: 248px;
+  height: 428px;
   background: #fff;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  margin: 10px 10px 10px 0;
-  height: calc(100% - 20px);
+  margin: 16px 16px 16px 16px;
   border-radius: 12px;
   overflow: hidden;
 }

src/views/home/jdcomponents/JDBannerCards.vue

@@ -5,7 +5,7 @@
       <!-- 智能选品 Banner (多图轮播) -->
       <div class="slider-box" @mouseenter="stopAuto" @mouseleave="startAuto">
         <div class="slider-list flex" :style="{ transform: `translateX(-${currentIdx * 100}%)` }">
-          <div class="slider-item" v-for="(slide, i) in carouseData" :key="i" @click="onPath(slide.link)">
+          <div class="slider-item" v-for="(slide, i) in carouseData" :key="i">
             <img :src="slide.imageUrl" class="banner-img" />
           </div>
         </div>
@@ -36,73 +36,76 @@
 
     <!-- 下半部分 -->
     <div class="bottom-row flex">
-      <!-- 企采榜单 -->
-      <div class="card-base b-item">
-        <div class="c-header flex-between">
-          <span class="title" :style="{ color: dataInfo2.mainTitleColor }">{{ dataInfo2.mainTitle }}</span>
-          <span class="tag-orange" :style="{ color: dataInfo2.subTitleColor }">{{ dataInfo2.mainTitle }}</span>
-        </div>
-        <div class="rank-list flex">
-          <div class="r-i" v-for="(item, index) in dataInfo2.adModuleItemList" :key="index" @click="onPath(item.tagLink)">
-            <div class="r-title yellow-t">{{ item.tagText }}<i class="arr"> &gt;</i></div>
-            <el-image class="r-img" :src="item.imageUrl" />
-            <span class="sold">已售{{ item.salesCount }}件</span>
+      <!-- 红色方框1的里面2个模块，对齐上方轮播图 -->
+      <div class="bottom-group-1 flex">
+        <!-- 企采榜单 -->
+        <div class="card-base b-item">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo2.mainTitleColor }">{{ dataInfo2.mainTitle }}</span>
+            <span class="tag-orange" :style="{ color: dataInfo2.subTitleColor }">{{ dataInfo2.mainTitle }}</span>
+          </div>
+          <div class="rank-list flex">
+            <div class="r-i" v-for="(item, index) in dataInfo2.adModuleItemList" :key="index" @click="onPath(item.tagLink)">
+              <el-image class="prod-img" :src="item.imageUrl" />
+              <span class="rank-pill">{{ item.tagText }}</span>
+              <span class="sold-red">{{ item.salesCount }}</span>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 品牌好店 -->
-      <div class="card-base b-item">
-        <div class="c-header flex-between">
-          <span class="title" :style="{ color: dataInfo3.mainTitleColor }">{{ dataInfo3.mainTitle }}</span>
-          <span class="tag-orange" :style="{ color: dataInfo3.subTitleColor }">{{ dataInfo3.mainTitle }}</span>
-        </div>
-        <div class="brand-box flex">
-          <div class="brand-i" v-for="(item, index) in dataInfo3.adModuleItemList" :key="index" @click="onPath(item.tagLink)">
-            <el-image class="logo" :src="item.imageUrl" />
-            <p class="name">{{ item.productName }}</p>
-            <span class="btn btn-red">{{ item.tagText }}</span>
+        <!-- 品牌好店 -->
+        <div class="card-base b-item">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo3.mainTitleColor }">{{ dataInfo3.mainTitle }}</span>
+            <span class="tag-orange" :style="{ color: dataInfo3.subTitleColor }">{{ dataInfo3.mainTitle }}</span>
+          </div>
+          <div class="brand-box flex">
+            <div class="brand-i" v-for="(item, index) in dataInfo3.adModuleItemList" :key="index" @click="onPath(item.tagLink)">
+              <el-image class="logo-img" :src="item.imageUrl" />
+              <span class="brand-pill">{{ item.tagText }}</span>
+              <span class="brand-desc">{{ item.salesCount }}</span>
+            </div>
           </div>
         </div>
       </div>
 
-      <!-- 企业精选 -->
-      <div class="card-base b-item">
-        <div class="c-header flex-between">
-          <span class="title" :style="{ color: dataInfo4.mainTitleColor }">{{ dataInfo4.mainTitle }}</span>
-          <span class="tag-gray" :style="{ color: dataInfo4.subTitleColor }">{{ dataInfo4.mainTitle }}</span>
-        </div>
-        <div class="p-list flex">
-          <div
-            class="p-mini"
-            v-for="(item, index) in dataInfo4.adModuleItemList"
-            :key="index"
-            @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
-          >
-            <el-image class="p-img" :src="item.imageUrl" />
-            <p class="price">
-              <span>¥</span>{{ item.price }}
-              <!-- <span class="badge-blue">企业价</span> -->
-            </p>
+      <!-- 红色方框2的里面2个模块，对齐上方企业购x百亿补贴 -->
+      <div class="bottom-group-2 flex">
+        <!-- 企业精选 -->
+        <div class="card-base b-item">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo4.mainTitleColor }">{{ dataInfo4.mainTitle }}</span>
+            <span class="tag-gray" :style="{ color: dataInfo4.subTitleColor }">{{ dataInfo4.mainTitle }}</span>
+          </div>
+          <div class="p-list flex">
+            <div
+              class="p-mini"
+              v-for="(item, index) in dataInfo4.adModuleItemList"
+              :key="index"
+              @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
+            >
+              <el-image class="p-img" :src="item.imageUrl" />
+              <p class="price"><span>¥</span>{{ item.price }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 京东新品 -->
-      <div class="card-base b-item">
-        <div class="c-header flex-between">
-          <span class="title" :style="{ color: dataInfo5.mainTitleColor }">{{ dataInfo5.mainTitle }}</span>
-          <span class="tag-orange" :style="{ color: dataInfo5.subTitleColor }">{{ dataInfo5.mainTitle }}</span>
-        </div>
-        <div class="p-list flex">
-          <div
-            class="p-mini"
-            v-for="(item, index) in dataInfo5.adModuleItemList"
-            :key="index"
-            @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
-          >
-            <el-image class="p-img" :src="item.imageUrl" />
-            <p class="price"><span>¥</span>{{ item.price }}</p>
+        <!-- 京东新品 -->
+        <div class="card-base b-item">
+          <div class="c-header flex-between">
+            <span class="title" :style="{ color: dataInfo5.mainTitleColor }">{{ dataInfo5.mainTitle }}</span>
+            <span class="tag-orange" :style="{ color: dataInfo5.subTitleColor }">{{ dataInfo5.mainTitle }}</span>
+          </div>
+          <div class="p-list flex">
+            <div
+              class="p-mini"
+              v-for="(item, index) in dataInfo5.adModuleItemList"
+              :key="index"
+              @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
+            >
+              <el-image class="p-img" :src="item.imageUrl" />
+              <p class="price"><span>¥</span>{{ item.price }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -112,7 +115,6 @@
 <script setup lang="ts">
 import { carouselList, adModuleConfigList } from '@/api/home/index-enterprise';
 import { onPath } from '@/utils/siteConfig';
-const currentIdx = ref<any>(0);
 const carouseData = ref<any>([]);
 const dataInfo1 = ref<any>({});
 const dataInfo2 = ref<any>({});
@@ -145,6 +147,8 @@ adModuleConfigList({}).then((res) => {
   }
 });
 
+const currentIdx = ref<any>(0);
+
 let timer = null;
 const startAuto = () => {
   timer = setInterval(() => {
@@ -163,23 +167,37 @@ onUnmounted(() => stopAuto());
 .central-ads {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
   height: 100%;
+  width: 1040px;
 }
 
 .top-row {
-  height: 190px;
-  gap: 12px;
+  height: 184px;
+  gap: 16px;
 }
 
 .bottom-row {
-  flex: 1;
-  gap: 12px;
+  height: 184px;
+  gap: 16px;
+}
+
+.bottom-group-1 {
+  display: flex;
+  width: 512px;
+  gap: 16px;
+}
+
+.bottom-group-2 {
+  display: flex;
+  width: 512px;
+  gap: 16px;
 }
 
 .slider-box {
-  flex: 5.5;
-  background: #187af2;
+  width: 512px;
+  height: 184px;
+  background: transparent;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
@@ -196,6 +214,7 @@ onUnmounted(() => stopAuto());
   min-width: 100%;
   height: 100%;
   position: relative;
+  background: transparent;
 }
 
 .banner-img {
@@ -219,14 +238,12 @@ onUnmounted(() => stopAuto());
   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;
@@ -243,7 +260,6 @@ onUnmounted(() => stopAuto());
   align-items: baseline;
   text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }
-
 .ai-logo span:first-child {
   font-size: 110px;
   color: #fff;
@@ -251,7 +267,6 @@ onUnmounted(() => stopAuto());
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-
 .ai-logo span:last-child {
   font-size: 80px;
   color: #66b2ff;
@@ -265,7 +280,6 @@ onUnmounted(() => stopAuto());
   display: flex;
   gap: 6px;
 }
-
 .dots span {
   display: block;
   width: 6px;
@@ -273,7 +287,6 @@ onUnmounted(() => stopAuto());
   background: rgba(255, 255, 255, 0.4);
   border-radius: 50%;
 }
-
 .dots span.active {
   width: 14px;
   background: #fff;
@@ -281,14 +294,16 @@ onUnmounted(() => stopAuto());
 }
 
 .subsidy-box {
-  flex: 4.5;
+  width: 512px;
+  height: 184px;
 }
 
 .card-base {
-  background: #f8f9fa;
-  /* 与侧边分类背景色相同 */
+  background: #f7f8fc; /* 使用浅蓝灰色，与左侧分类背景颜色 #F7F8FC 完全一致 */
   border-radius: 8px;
-  padding: 16px;
+  padding: 12px 16px;
+  height: 184px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   transition:
@@ -297,7 +312,6 @@ onUnmounted(() => stopAuto());
   cursor: pointer;
   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);
@@ -316,6 +330,7 @@ onUnmounted(() => stopAuto());
   font-weight: 800;
   font-size: 16px;
   color: #000;
+  white-space: nowrap;
 }
 
 .tag {
@@ -323,14 +338,12 @@ onUnmounted(() => stopAuto());
   color: #d46b08;
   font-weight: bold;
 }
-
 .tag-orange {
-  font-size: 11px;
+  font-size: 12px;
   color: #d46b08;
 }
-
 .tag-gray {
-  font-size: 11px;
+  font-size: 12px;
   color: #8c8c8c;
 }
 
@@ -345,12 +358,14 @@ onUnmounted(() => stopAuto());
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  align-items: center;
 }
 
 .p-img {
-  width: 90%;
-  aspect-ratio: 1;
-  margin: 0 auto 6px;
+  width: 86px;
+  height: 86px;
+  object-fit: contain;
+  margin: 0 auto 4px;
 }
 
 .price {
@@ -358,7 +373,6 @@ onUnmounted(() => stopAuto());
   font-size: 16px;
   font-weight: bold;
 }
-
 .price span {
   font-size: 12px;
   font-weight: normal;
@@ -379,72 +393,20 @@ onUnmounted(() => stopAuto());
   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;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.red-t {
-  background: #ffebee;
-  color: #c62828;
-}
-
-.r-title .arr {
-  font-style: normal;
-  font-size: 9px;
-  opacity: 0.8;
-}
-
-.r-img {
-  width: 80%;
-  aspect-ratio: 1;
-  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%;
+  align-items: center;
+  min-width: 0;
 }
 
 .brand-box {
   gap: 12px;
   flex: 1;
 }
-
 .brand-i {
   flex: 1;
   text-align: center;
@@ -452,27 +414,107 @@ onUnmounted(() => stopAuto());
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  min-width: 0;
 }
 
-.logo {
-  width: 80%;
-  aspect-ratio: 120 / 50;
-  margin-top: 5px;
+/* 图4定制：企采榜单与品牌好店 */
+.prod-img,
+.logo-img {
+  width: 86px !important;
+  height: 86px !important;
+  object-fit: contain;
+  margin-top: 4px;
 }
-
-.name {
-  font-size: 11px;
+.rank-pill {
+  background: #fff3e0;
+  color: #e65100;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 1px 6px;
+  border-radius: 10px;
+  margin-top: 2px;
+  white-space: nowrap;
+  transform: scale(0.95);
+}
+.sold-red {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e1251b;
+  margin-top: 2px;
+  margin-bottom: 0;
+  line-height: 1.2;
+  text-align: center;
+  width: 100%;
+}
+.brand-pill {
+  background: #ebf5ff;
   color: #1890ff;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 1px 6px;
+  border-radius: 10px;
+  margin-top: 2px;
   white-space: nowrap;
-  transform: scale(0.9);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90px;
+  text-align: center;
+  transform: scale(0.95);
 }
-
-.btn-red {
-  font-size: 11px;
+.brand-desc {
+  font-size: 14px;
+  font-weight: bold;
   color: #e1251b;
-  border: 1px solid #e1251b;
-  padding: 2px 8px;
-  border-radius: 12px;
-  margin-bottom: 5px;
+  margin-top: 2px;
+  margin-bottom: 0;
+  line-height: 1.2;
+}
+
+/* 企采榜单和品牌好店的子广告隐藏第 2 个，且隐藏对应的副标题：
+   1. 1315px ~ 1550px 之间（大屏有左侧分类菜单，左半部分空间受限）
+   2. 小于 1180px 之后（隐藏了分类菜单，但浏览器总宽进一步严重缩小导致空间受限） */
+@media screen and (min-width: 1315px) and (max-width: 1550px), screen and (max-width: 1180px) {
+  .rank-list .r-i:nth-child(2) {
+    display: none;
+  }
+  .brand-box .brand-i:nth-child(2) {
+    display: none;
+  }
+  .bottom-group-1 .c-header .tag-orange {
+    display: none !important;
+  }
+}
+
+/* 浏览器宽度小于 1600px 时，左半侧进入流式弹性响应式（逐步缩窄），而右半侧（百亿补贴等）宽度始终锁定 512px 不变 */
+@media screen and (max-width: 1599px) {
+  .central-ads {
+    width: 100%;
+  }
+  .top-row,
+  .bottom-row {
+    width: 100%;
+    display: flex;
+  }
+  .slider-box {
+    width: auto;
+    flex: 1;
+    min-width: 0;
+  }
+  .subsidy-box {
+    width: 512px;
+    flex-shrink: 0;
+  }
+  .bottom-group-1 {
+    width: auto;
+    flex: 1;
+    min-width: 0;
+  }
+  .bottom-group-1 .b-item {
+    min-width: 0;
+  }
+  .bottom-group-2 {
+    width: 512px;
+    flex-shrink: 0;
+  }
 }
 </style>

src/views/home/jdcomponents/JDCategory.vue

@@ -1,50 +1,57 @@
 <template>
   <div class="cate-menu" @mouseleave="activeIndex = -1">
-    <div class="cate-list"></div>
-    <ul class="cate-list-box">
-      <template v-for="(c, i) in dataList" :key="i">
-        <li
-          v-if="activeIndex == -1 ? (Number(i) < 9 ? true : false) : true"
-          class="cate-item"
-          :class="{ active: activeIndex === i }"
-          @mouseenter="onMouseenter(i)"
-        >
+    <div class="focus-category-inner">
+      <ul class="cate-list">
+        <li v-for="(c, i) in dataList" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="onMouseenter(i)">
           <img :src="c.icon" class="cate-icon" />
-          <a @click="onPath('/search?type=1&topCategoryId=' + c.syncCategoryId)" href="#">{{ c.name }}</a>
+          <span class="subtitle-links" v-if="c.categoryList && c.categoryList.length > 0">
+            <template v-for="(subName, subIdx) in c.categoryList" :key="subIdx">
+              <template v-if="Number(subIdx) < 3">
+                <span v-if="Number(subIdx) > 0" class="split-slash">/</span>
+                <a @click="onPath('/search?type=2&mediumCategoryId=' + subName.id)" href="#" class="sub-link">{{ subName.label }}</a>
+              </template>
+            </template>
+          </span>
+          <span class="subtitle-links" v-else>
+            <a href="#" class="sub-link">{{ c.name }}</a>
+          </span>
         </li>
-      </template>
-    </ul>
+      </ul>
+    </div>
 
-    <!-- 巨大悬浮菜单面板 (根据图5精细刻画) -->
+    <!-- 巨大悬浮菜单面板 (左右分栏，支持宽度 986px，具备漂亮的自定义滚动条) -->
     <div class="category-pop" v-show="activeIndex !== -1">
-      <div class="pop-header flex-between">
-        <div class="pop-tags flex">
-          <span v-for="(item, index) in dataInfo.tags" :key="index" class="p-tag" @click="onPath(item.link)">{{ item.name }}</span>
+      <!-- 左侧：主要分类数据区 -->
+      <div class="pop-main-content">
+        <!-- 当 tags 为空时，整行 pop-header 不渲染，分类列表自动上移占位 -->
+        <div class="pop-header flex-between" v-if="dataInfo.tags && dataInfo.tags.length > 0">
+          <div class="pop-tags flex">
+            <span @click="onPath(tag.link)" class="p-tag" v-for="(tag, tIdx) in dataInfo.tags" :key="tIdx">
+              {{ tag.name }}
+            </span>
+          </div>
         </div>
-        <div class="pop-logo">
-          <span class="red-t">{{ dataInfo.panelMainTitle }}</span
-          ><span class="black-t">{{ dataInfo.panelSubTitle }}</span
-          ><br />
-          <span class="small-t" v-for="(item, index) in dataInfo.notes" :key="index" @click="onPath(item.link)"
-            >{{ index != 0 ? ' | ' : '' }}{{ item.name }}</span
-          >
+
+        <div class="pop-body">
+          <dl class="sub-dl flex" v-for="(sub, subIdx) in dataInfo.categoryList" :key="subIdx">
+            <dt>
+              <!-- 二级分类标题加入 hover 效果及点击跳转 -->
+              <a @click="onPath('/search?type=2&mediumCategoryId=' + sub.id)" href="#" class="sub-title-link">{{ sub.label }}</a>
+            </dt>
+            <dd>
+              <a @click="onPath('/search?type=3&bottomCategoryId=' + item.id)" href="#" v-for="(item, itemIdx) in sub.children" :key="itemIdx">{{
+                item.label
+              }}</a>
+            </dd>
+          </dl>
         </div>
       </div>
 
-      <div class="pop-body">
-        <dl class="sub-dl flex" v-for="(item, index) in dataInfo.categoryList" :key="index">
-          <dt class="item-label" @click="onPath('/search?type=2&mediumCategoryId=' + item.id)">{{ item.label }}</dt>
-          <dd>
-            <div
-              @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)"
-              class="item1-label"
-              v-for="(item1, index1) in item.children"
-              :key="index1"
-            >
-              {{ item1.label }}
-            </div>
-          </dd>
-        </dl>
+      <!-- 右侧：竖向图片广告栏 (116*54px，可根据有无广告自适应显隐) -->
+      <div class="pop-ads-col" v-if="dataInfo.notes && dataInfo.notes.length > 0">
+        <a :href="ad.url" class="ad-link" v-for="(ad, adIdx) in dataInfo.notes" :key="adIdx">
+          <img :src="ad.name" class="ad-img" />
+        </a>
       </div>
     </div>
   </div>
@@ -54,10 +61,10 @@
 import { jdcategoryMainList } from '@/api/home/index-enterprise';
 import { getProductCategoryTree } from '@/api/home/index';
 import { onPath } from '@/utils/siteConfig';
-const activeIndex = ref(-1);
+
+const activeIndex = ref<any>(-1);
 const dataList = ref<any>([]);
 const dataInfo = ref<any>({});
-const category = ref<any>([]);
 
 onMounted(() => {
   getHead();
@@ -92,89 +99,137 @@ const onMouseenter = (index: any) => {
 .cate-menu {
   position: relative;
   width: 100%;
-  height: 100%;
   z-index: 100;
 }
-
-.cate-list {
-  padding: 10px 0;
-  background: #f8f9fa;
-  height: 100%;
+.focus-category-inner {
+  background: #f7f8fc;
+  padding: 6px 12px; /* 菜单距离背景顶部间距为 6px */
+  border-radius: 8px;
   box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  width: 248px;
+  min-height: 384px; /* 默认显示状态高度锁定 384px */
+  height: auto;
 }
-.cate-list-box {
-  width: 100%;
-  position: absolute;
-  padding: 10px 0;
-  background: #f8f9fa;
+.cate-list {
+  padding: 0;
+  background: transparent;
   box-sizing: border-box;
-  top: 0;
-  left: 0;
+  margin: 0;
 }
 
 .cate-item {
-  height: 40px;
-  padding: 0 16px;
+  width: 224px;
+  height: 36px;
+  padding: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   position: relative;
   box-sizing: border-box;
-  border: 1px solid transparent; /* 为红框预留 */
+  transition: all 0.15s ease;
+  color: #1b1b1b;
+}
+
+/* 默认只显示前 10 个分类 */
+.cate-item:nth-child(n + 11) {
+  display: none !important;
+}
+
+/* 鼠标悬停在整个分类面板上时，展示所有分类 */
+.cate-menu:hover .cate-item:nth-child(n + 11) {
+  display: flex !important;
 }
 
 .cate-item.active,
 .cate-item:hover {
-  background: #fff;
-  border-color: var(--hover-jd2); /* 四周边框变红 */
-  border-right-color: #fff; /* 右边框变白打通 */
-  z-index: 201; /* 盖在弹窗上方 */
-  width: calc(100% + 1px); /* 向右延伸 1px */
+  /* 悬停时不显示该行的背景，背景保持透明 */
+  background: transparent;
 }
 
-.cate-item.active a,
-.cate-item:hover a {
-  color: var(--hover-jd2);
-  font-weight: bold;
+.cate-item.active .cate-icon,
+.cate-item:hover .cate-icon {
+  opacity: 1;
 }
 
 .cate-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
   opacity: 0.7;
 }
 
-.cate-item.active .cate-icon {
-  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
+.subtitle-links {
+  font-size: 14px; /* 文字调整为 14px */
+  font-family: 'PingFang SC', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
+  white-space: nowrap;
+  letter-spacing: -0.3px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.cate-item a {
-  font-size: 14px;
+.sub-link {
   color: #333;
   text-decoration: none;
+  transition: color 0.15s;
 }
 
-/* 右侧巨大弹出层 */
+.sub-link:hover {
+  color: var(--hover-jd2); /* 悬停统一变红 */
+}
+
+.split-slash {
+  margin: 0 4px;
+  color: #999;
+  opacity: 0.5;
+}
+
+/* 右侧巨大弹出层：拉伸高度 top: 0, bottom: 0 保证与左侧等高，宽度调整为 986px */
 .category-pop {
   position: absolute;
-  left: 280px;
+  left: 248px;
   top: 0;
-  width: 950px;
-  height: 440px;
+  bottom: 0; /* 高度拉伸与左侧等高 */
+  width: 986px; /* 宽度设为 986px */
   background: #fff;
-  border: 1px solid var(--hover-jd2);
+  border: 1px solid var(--hover-jd2); /* 悬停外框统一变红 */
   border-radius: 12px;
   box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.12);
-  padding: 24px 30px;
+  padding: 16px 30px;
   z-index: 200;
   box-sizing: border-box;
+  display: flex;
+  gap: 20px; /* 左右分栏间距 */
+  animation: fadeInPop 0.18s ease-out;
+}
+
+@keyframes fadeInPop {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-/* 顶部标签和 Logo */
+/* 左侧主体内容区 */
+.pop-main-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* 顶部标签 */
 .pop-header {
-  margin-bottom: 25px;
+  margin-bottom: 16px;
   align-items: flex-end;
+  flex-shrink: 0;
 }
 .pop-tags {
   gap: 12px;
@@ -186,66 +241,113 @@ const onMouseenter = (index: any) => {
   padding: 6px 16px;
   border-radius: 4px;
   cursor: pointer;
+  transition: all 0.2s;
 }
 .p-tag:hover {
   background: var(--hover-jd2);
   color: #fff;
 }
 
-.pop-logo {
-  text-align: right;
-  line-height: 1.2;
+/* 主体列表区域：宽度拉伸，且将滚动条靠右，放在左侧分类和右侧广告栏的交界线处 */
+.pop-body {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 0px; /* 去除原本的右内边距，使滚动条贴紧右侧原分割线（广告栏左侧）的位置 */
 }
-.red-t {
-  color: var(--hover-jd2);
-  font-size: 18px;
-  font-weight: 900;
+
+/* 漂亮的自定义滚动条：颜色固定为带有透明度的红色 */
+.pop-body::-webkit-scrollbar {
+  width: 6px; /* 窄细精巧设计 */
 }
-.black-t {
-  color: #000;
-  font-size: 18px;
-  font-weight: 900;
+.pop-body::-webkit-scrollbar-track {
+  background: transparent; /* 轨道背景完全透明，极简大气 */
 }
-.small-t {
-  font-size: 9px;
-  color: var(--hover-jd2);
-  letter-spacing: 1px;
-  cursor: pointer;
+.pop-body::-webkit-scrollbar-thumb {
+  background-color: rgba(225, 37, 27, 0.3); /* 滑块颜色统一为带有透明度的红色 */
+  border-radius: 3px;
+  transition: background-color 0.2s ease;
+}
+.pop-body::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(225, 37, 27, 0.65); /* 鼠标移上时滑块变深 */
 }
 
-/* 主体列表区域 */
 .sub-dl {
   margin-bottom: 12px;
   align-items: flex-start;
   line-height: 1.8;
 }
-.item-label {
+.sub-dl dt {
   width: 75px;
   font-weight: bold;
   font-size: 12px;
   color: #000;
   margin-right: 15px;
-  text-align: right;
+  text-align: left; /* 改为左对齐，使得文字最左侧能够与上方的标签最左侧完全垂直对齐 */
   white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* 二级分类标题 hover 及点击跳转超链接样式 */
+.sub-title-link {
+  color: #000;
+  font-weight: bold;
+  font-size: 12px;
+  text-decoration: none;
+  transition: color 0.15s ease;
   cursor: pointer;
 }
-.item-label:hover {
-  color: var(--hover-jd2);
+.sub-title-link:hover {
+  color: var(--hover-jd2); /* 二级标题悬浮变红 */
 }
+
 .sub-dl dd {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
   gap: 0 16px;
 }
-.item1-label {
+.sub-dl dd a {
   font-size: 12px;
   color: #8c8c8c;
   text-decoration: none;
   white-space: nowrap;
-  cursor: pointer;
+  transition: color 0.15s;
+}
+.sub-dl dd a:hover {
+  color: var(--hover-jd2); /* 悬浮统一变红 */
+}
+
+/* 右侧竖向广告列 (116*54px，可根据 ads 数据显隐，去除了左侧的灰色竖直分割线) */
+.pop-ads-col {
+  width: 116px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: flex-start;
+  padding-top: 10px;
+  border-left: none; /* 去掉了蓝色方框4里面的竖直灰色分割线条 */
+  padding-left: 0px;
+}
+.ad-link {
+  display: block;
+  width: 116px;
+  height: 54px;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  transition:
+    transform 0.2s,
+    opacity 0.2s;
+}
+.ad-link:hover {
+  transform: translateY(-2px);
+  opacity: 0.95;
 }
-.item1-label:hover {
-  color: var(--hover-jd2);
+.ad-img {
+  width: 116px;
+  height: 54px;
+  object-fit: cover;
+  display: block;
 }
 </style>

src/views/home/jdcomponents/JDScene.vue

@@ -13,7 +13,13 @@
       <!-- 右侧卡片区 -->
       <div class="scene-right flex-1">
         <div class="s-grid-h flex">
-          <div class="s-item-card" :style="{ background: s.bgColor, opacity: s.opacity }" v-for="(s, i) in dataInfo.cardList" :key="i">
+          <div
+            class="s-item-card"
+            :style="{ background: s.bgColor, opacity: s.opacity }"
+            v-for="(s, i) in dataInfo.cardList"
+            :key="i"
+            @click="onPath(s.jumpLink)"
+          >
             <div class="item-top flex-between">
               <div class="item-info flex">
                 <p class="item-t" :style="{ color: s.titleColor }">{{ s.title }}</p>
@@ -44,12 +50,7 @@ currentScenarioGlobalSetting({}).then((res) => {
     dataInfo.value = res.data;
   }
 });
-const scenes = [
-  { title: '耗材采购', desc: '纸墨随买随用', img: '@/assets/jd/scene_stationery.png' },
-  { title: '防暑降温', desc: '守护员工健康', img: '@/assets/jd/scene_cooling.png' },
-  { title: '员工团建', desc: '同心聚力', img: '@/assets/jd/scene_teambuilding.png' },
-  { title: '营销物资', desc: '全场景解决方案', img: '@/assets/jd/scene_marketing.png' }
-];
+const scenes = [];
 </script>
 
 <style scoped>
@@ -61,13 +62,19 @@ const scenes = [
   border-radius: 12px;
   padding: 14px 20px;
   align-items: center;
-  min-height: 140px;
+  height: 188px;
+  box-sizing: border-box;
 }
 
 .scene-left {
-  width: 380px;
+  width: auto;
   color: #fff;
   padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex-shrink: 0;
 }
 .s-h-group {
   align-items: baseline;
@@ -96,7 +103,6 @@ const scenes = [
   font-size: 13px;
   font-weight: bold;
   text-decoration: none;
-  cursor: pointer;
 }
 .arr-ic {
   display: inline-block;
@@ -123,14 +129,18 @@ const scenes = [
   overflow: hidden;
 }
 .s-grid-h {
+  display: flex;
+  justify-content: flex-end;
   gap: 10px;
+  width: 100%;
 }
 
 .s-item-card {
-  flex: 1;
+  width: 260px; /* 子卡片的宽度始终不变 */
+  flex-shrink: 0;
   background: #e8fbf1; /* Pale green background matching Figure 2 */
   border-radius: 10px;
-  height: 130px;
+  height: 160px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -194,25 +204,28 @@ const scenes = [
   border-radius: 6px;
 }
 
-@media screen and (max-width: 1599px) {
-  .scene-left {
-    width: 340px;
-  }
-  .s-main-t {
-    font-size: 20px;
-  }
+/* 1. 当浏览器宽度变小时，优先场景方案里面的4个子卡片整体向左移动，一直移动到“一站全买齐”文字右侧 */
+/* 2. 当减小到宽度为 1450px 左右时，隐藏“一站全买齐”，子卡片继续向左移，直到贴齐“场景解决方案”文字右侧 */
+@media screen and (min-width: 1315px) and (max-width: 1450px) {
   .s-sub-t {
-    font-size: 20px;
-    font-weight: 800;
+    display: none;
   }
+}
+
+/* 3. 当宽度小于 1315px，隐藏第四个卡片，重新显示“一站全买齐”，卡片整体靠右对齐并随之左移贴靠 */
+@media screen and (min-width: 1170px) and (max-width: 1314px) {
   .s-item-card:nth-child(4) {
     display: none;
-  } /* 当宽度小于 1600px 时隐藏第4个卡片 */
+  }
 }
 
-@media screen and (max-width: 1209px) {
-  .s-item-card:nth-child(3) {
+/* 4. 当宽度进一步减小到 1170px 以下时，隐藏“一站全买齐”，剩余的3个卡片继续往左侧贴靠，直到最小 1072px 宽度锁死 */
+@media screen and (max-width: 1169px) {
+  .s-item-card:nth-child(4) {
     display: none;
-  } /* 宽度更小时隐藏第3个卡片 */
+  }
+  .s-sub-t {
+    display: none;
+  }
 }
 </style>

src/views/home/jdcomponents/JDUserPanel.vue

@@ -1,82 +1,103 @@
 <template>
   <div class="user-panel">
-    <!-- 顶部极淡粉色渐变背景 -->
-    <div class="top-bg"></div>
-
-    <!-- 用户信息区 -->
-    <div class="u-auth flex">
-      <div class="avatar">
-        <img :src="logo2" />
-      </div>
-      <div class="u-info">
-        <p class="name">{{ userInfo.nickName }}</p>
-        <p class="links">{{ userInfo.customerName }}</p>
-        <!-- <p @click="onPath('/breg')" class="links">切换企业账号<span class="divider">|</span>注册</p> -->
+    <!-- 上半部分：背景颜色为 #FFF6F0，宽度为 248px，四个角全部倒 12px 圆角 -->
+    <div class="upper-part">
+      <!-- 头部用户信息区 -->
+      <div class="u-auth">
+        <!-- 上行：头像与姓名账号水平垂直居中对齐 -->
+        <div class="u-top-row flex">
+          <div class="avatar-box">
+            <div class="avatar">
+              <img :src="logo2" class="yellow-border" />
+            </div>
+          </div>
+          <div class="u-info">
+            <div class="u-name-row flex">
+              <span class="name">{{ userInfo.user?.nickName }}</span>
+              <span class="member-tag">企业会员</span>
+            </div>
+            <p class="account-num">{{ userInfo.user?.phonenumber }}</p>
+          </div>
+        </div>
+        <!-- 下行：公司单独一行，文字用 12px 且加粗，左侧与上面的头像最左侧对齐 -->
+        <p class="company-name">公司：{{ userInfo.companyName }}</p>
       </div>
-    </div>
 
-    <!-- 会员卡片 -->
-    <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 class="credit-num">{{ salesInfo.creditAmount || '0.00' }}元</p>
+      <!-- 会员额度卡片：炫酷皇家金蓝渐变背景，金色数值，文字用 12px -->
+      <div class="member-card">
+        <div class="c-line flex-between">
+          <span class="c-lbl">可用余额</span>
+          <span class="c-val gold-text">¥{{ (parseInt(customerSalesInfoVo?.remainingQuota) || 0).toFixed(2) }}</span>
+        </div>
+        <div class="c-line flex-between" style="margin-top: 5px">
+          <span class="c-lbl">授信额度</span>
+          <span class="c-val gold-text">¥{{ (parseInt(customerSalesInfoVo?.creditAmount) || 0).toFixed(2) }}</span>
         </div>
       </div>
-    </div>
 
-    <!-- 订单状态统计 -->
-    <div class="order-stats">
-      <div class="stat-item">
-        <div class="num">{{ countData.pendingapprovalCount || 0 }}</div>
-        <div class="label">待审批</div>
-      </div>
-      <div class="stat-item">
-        <div class="num">{{ countData.pendingPaymentCount || 0 }}</div>
-        <div class="label">待付款</div>
-      </div>
-      <div class="stat-item">
-        <div class="num">{{ countData.pendingShipmentCount || 0 }}</div>
-        <div class="label">待发货</div>
-      </div>
-      <div class="stat-item">
-        <div class="num">{{ countData.pendingReceiptCount || 0 }}</div>
-        <div class="label">待收货</div>
+      <!-- 订单状态统计：增加醒目的暖沙金边框，文字与数字用 12px，带悬停效果 -->
+      <div class="order-stats">
+        <div class="stat-item">
+          <div class="num">{{ countData.pendingapprovalCount || 0 }}</div>
+          <div class="label">待审核</div>
+        </div>
+        <div class="stat-item">
+          <div class="num">{{ countData.pendingPaymentCount || 0 }}</div>
+          <div class="label">待付款</div>
+        </div>
+        <div class="stat-item">
+          <div class="num">{{ countData.pendingShipmentCount || 0 }}</div>
+          <div class="label">待发货</div>
+        </div>
+        <div class="stat-item">
+          <div class="num">{{ countData.pendingReceiptCount || 0 }}</div>
+          <div class="label">待收货</div>
+        </div>
       </div>
     </div>
 
-    <!-- 企业工作台 -->
-    <div class="tools-sec relative">
-      <div class="t-h flex-between" @click="onPath(dataInfo.jumpLink)">
-        <span>{{ dataInfo.moduleName }}</span>
-        <i class="icon-more">&gt;</i>
-      </div>
-
-      <!-- 滑动翻页组件 -->
-      <div class="t-slider-wrap">
-        <div class="t-track" :style="{ transform: `translateX(-${currentPage * 100}%)` }">
-          <div class="t-page" v-for="(item1, index1) in dataList" :key="index1">
-            <div class="t-grid">
-              <div class="t-i" v-for="(item2, index2) in item1" :key="index2" @click="onPath(item2.jumpLink)">
-                <div v-if="item2.tagText" class="badge">{{ item2.tagText }}</div>
-                <el-image class="t-icon" :src="item2.iconUrl" />
-                <span>{{ item2.name }}</span>
-              </div>
-            </div>
+    <!-- 下半部分：背景颜色为 #F7F8FC，宽度为 248px，四个角全部倒 12px 圆角 -->
+    <div class="lower-part">
+      <!-- 企业工作台：标题为 16px，单行菜单，文字用 12px，带悬停效果 -->
+      <div class="tools-sec">
+        <div class="t-h flex-between">
+          <span>企业工作台</span>
+          <span @click="onPath(dataInfo.jumpLink)" class="icon-more-btn">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </span>
+        </div>
+        <div class="t-grid-single-row">
+          <div class="t-i" v-for="(item, index) in dataList" :key="index" @click="onPath(item.jumpLink)">
+            <img :src="item.iconUrl" class="t-icon" />
+            <span>{{ item.name }}</span>
           </div>
         </div>
+      </div>
 
-        <!-- 滑动按钮 -->
-        <div class="flip-btn prev-btn" v-show="currentPage > 0" @click="currentPage--">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="15 18 9 12 15 6"></polyline>
-          </svg>
+      <!-- 企业公告：标题为 16px，卡片高度增加，图片增大，描述用 12px，带悬停效果 -->
+      <div class="classroom-sec">
+        <div class="c-h flex-between">
+          <span class="class-title">企业公告</span>
         </div>
-        <div class="flip-btn next-btn" v-show="currentPage < 1 && dataList.length > 1" @click="currentPage++">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="9 18 15 12 9 6"></polyline>
-          </svg>
+        <div class="class-card flex-between">
+          <div class="class-left-info">
+            <span class="week-tag">2026年 第21周</span>
+            <p class="class-desc">防汛防汛特辑 | 工厂园区篇</p>
+          </div>
+          <div class="class-img-box">
+            <!-- <img src="/images/logo.png" class="class-img" /> -->
+          </div>
         </div>
       </div>
     </div>
@@ -84,7 +105,7 @@
 </template>
 
 <script setup lang="ts">
-import { currentQuickEntryModule } from '@/api/home/index-enterprise';
+import { currentQuickEntryModule, getNewNotice } from '@/api/home/index-enterprise';
 import { getEnterpriseInfo } from '@/api/pc/enterprise';
 import { getInfo } from '@/api/login';
 import { onPath } from '@/utils/siteConfig';
@@ -96,9 +117,17 @@ const userInfo = ref<any>({});
 const countData = ref<any>({});
 const salesInfo = ref<any>({});
 
+const customerSalesInfoVo = ref<any>({});
 getEnterpriseInfo().then((res) => {
   if (res.code == 200) {
-    salesInfo.value = res.data.customerSalesInfoVo || {};
+    if (res.data && res.data.customerSalesInfoVo) {
+      customerSalesInfoVo.value = res.data.customerSalesInfoVo;
+    }
+  }
+});
+
+getNewNotice({}).then((res) => {
+  if (res.code == 200) {
   }
 });
 
@@ -106,7 +135,8 @@ currentQuickEntryModule({}).then((res) => {
   if (res.code == 200) {
     dataInfo.value = res.data;
     if (res.data && res.data.items.length > 0) {
-      dataList.value = chunkArray(res.data.items, 8);
+      dataList.value = res.data.items;
+      // dataList.value = chunkArray(res.data.items, 8);
     }
   }
 });
@@ -121,8 +151,7 @@ const chunkArray = (arr, size) => {
 
 getInfo().then((res) => {
   if (res.code == 200) {
-    userInfo.value = res.data.user;
-    userInfo.value.customerName = res.data.customerName;
+    userInfo.value = res.data;
   }
 });
 
@@ -136,242 +165,386 @@ const currentPage = ref(0);
 </script>
 
 <style scoped>
+/* 整个右侧面板：透明背景，去掉内边距以使上半部与下半部占满 248px */
 .user-panel {
-  background: #fff;
+  background: transparent;
+  width: 100%;
   height: 100%;
-  border-radius: 12px;
-  position: relative;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  padding: 0;
+  gap: 10px;
 }
 
-/* 顶部极淡粉色渐变背景 */
-.top-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 120px;
-  background: linear-gradient(to bottom, #fff5ee, #ffffff);
-  z-index: 0;
+.flex {
+  display: flex;
 }
 
-/* 内容提升层级 */
-.u-auth,
-.member-card,
-.card-benefits,
-.small-ad,
-.tools-sec {
-  position: relative;
-  z-index: 1;
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* ==================== 上半部分 ==================== */
+.upper-part {
+  background-color: #fff6f0; /* 上半部分背景色为 #FFF6F0 */
+  border-radius: 12px; /* 四个角全部倒 12px 圆角 */
+  padding: 12px 16px 10px 16px; /* 适当紧凑的内边距释放高度 */
+  display: flex;
+  flex-direction: column;
+  gap: 6px; /* 适当紧凑的间距以释放高度 */
+  width: 100%;
+  box-sizing: border-box;
 }
 
+/* 头部用户信息区：背景为透明 */
 .u-auth {
-  padding: 16px 16px 0;
-  align-items: center;
-  margin-bottom: 12px;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+/* 上行：头像与姓名账号水平垂直居中对齐 */
+.u-top-row {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  gap: 10px;
+  width: 100%;
+}
+
+.avatar-box {
+  flex-shrink: 0;
 }
 
-.avatar img {
-  width: 48px;
-  height: 48px;
+.avatar img.yellow-border {
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
-  border: 2px solid #fff;
-  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.3);
-  margin-right: 12px;
+  border: 2px solid #ffc107; /* 亮黄色细边框 */
+  box-sizing: border-box;
+  display: block;
+}
+
+/* 账号文字容器：背景透明 */
+.u-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  background: transparent;
+  padding: 0;
+}
+
+.u-name-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .name {
   font-weight: bold;
-  font-size: 14px;
-  color: #000;
+  font-size: 16px; /* 账号名称字体为 16px */
+  color: #111;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.links {
-  font-size: 11px;
-  color: #666;
-  margin-top: 4px;
-  cursor: pointer;
+.member-tag {
+  background: linear-gradient(135deg, #ffb300 0%, #ff8f00 100%);
+  color: #fff;
+  font-size: 9px;
+  font-weight: bold;
+  padding: 1px 4px;
+  border-radius: 3px;
+  white-space: nowrap;
+  transform: scale(0.95);
 }
 
-.divider {
-  margin: 0 6px;
-  color: #e0e0e0;
+.account-num {
+  font-size: 14px; /* 手机号字体为 14px */
+  color: #555;
+  margin: 0;
 }
 
+/* 下行：公司单独一行，文字用 12px 且加粗，超出长度截断显示 "..."，左侧与上面的头像最左侧对齐 */
+.company-name {
+  font-size: 12px; /* 12px */
+  font-weight: bold; /* 加粗 */
+  color: #666;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; /* 超出显示 "..." */
+  display: block;
+  text-align: left;
+}
+
+/* 会员额度卡片：炫酷皇家金蓝渐变背景，文字用 12px */
 .member-card {
-  margin: 0 16px;
-  background: linear-gradient(to right, #fdf0de, #fce3c5);
+  background: linear-gradient(135deg, #0a1c3a 0%, #15356e 100%); /* 炫酷皇家金蓝渐变 */
+  border: 1px solid rgba(255, 215, 0, 0.25); /* 淡淡的金沙框 */
   border-radius: 8px;
-  position: relative;
-  padding: 22px 12px 12px; /* 增加顶部边距，避开标签 */
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
-.c-tag {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: #11366f;
-  color: #f8d9a8;
-  font-size: 10px;
-  padding: 2px 8px;
-  border-radius: 8px 0 8px 0;
-  font-weight: bold;
+.c-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.c-h {
-  font-weight: 800;
-  font-size: 13px;
-  color: #11366f; /* 使用标签背景色 */
-  letter-spacing: 0.3px;
+.c-lbl {
+  font-size: 12px; /* 12px */
+  color: rgba(255, 255, 255, 0.8); /* 半透明优雅白标签 */
 }
 
-.c-left p.credit-num {
-  font-size: 20px;
-  font-weight: 900;
-  color: #e1251b; /* 使用红色 */
-  margin-top: 4px;
-  letter-spacing: 0.5px;
+/* 金色数值 */
+.gold-text {
+  font-size: 12px;
+  font-weight: bold;
+  color: #ffd700 !important; /* 尊贵亮金色 */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
+/* 订单统计：增加醒目的暖沙金边框，文字与数字均为 12px，加入悬停特效 */
 .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;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #d9a05b; /* 醒目的暖沙金边框 */
   display: flex;
   justify-content: space-around;
-  padding: 14px 0;
-  box-shadow: 0 4px 15px rgba(225, 37, 27, 0.04);
+  padding: 8px 0;
 }
 
 .stat-item {
   text-align: center;
   flex: 1;
   position: relative;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.stat-item:hover {
+  transform: translateY(-2px); /* 向上轻微悬浮效果 */
+}
+
+.stat-item:hover .label {
+  color: #e1251b; /* 标签文字变红 */
+}
+
+.stat-item:hover .num {
+  transform: scale(1.05); /* 数字微缩放 */
 }
 
 .stat-item:not(:last-child)::after {
   content: '';
   position: absolute;
   right: 0;
-  top: 20%;
-  height: 60%;
+  top: 25%;
+  height: 50%;
   width: 1px;
-  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05), transparent);
+  background: rgba(217, 160, 91, 0.4); /* 醒目的沙金色分割线 */
 }
 
 .stat-item .num {
-  font-size: 16px;
-  font-weight: 800;
+  font-size: 12px; /* 12px */
+  font-weight: bold;
   color: #e1251b;
-  font-family: Arial, sans-serif;
+  transition: transform 0.2s;
+  display: block;
 }
 
 .stat-item .label {
-  font-size: 11px;
-  color: #666;
-  margin-top: 5px;
+  font-size: 12px; /* 12px */
+  color: #555;
+  margin-top: 2px;
+  transition: color 0.2s;
 }
 
-.tools-sec {
-  padding: 0 16px;
+/* ==================== 下半部分 ==================== */
+.lower-part {
+  background-color: #f7f8fc; /* 下半部分背景色为 #F7F8FC */
+  border-radius: 12px; /* 四个角全部倒 12px 圆角 */
+  padding: 12px 16px 16px 16px; /* 底部内间距调整为 16px，与左右对称 */
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* 适当紧凑的间距以释放高度 */
   flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 企业工作台 */
+.tools-sec {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .t-h {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2px;
+}
+
+.t-h span {
   font-weight: bold;
-  font-size: 14px;
-  color: #000;
-  margin-bottom: 15px;
+  font-size: 16px; /* 企业工作台标题为 16px */
+  color: #111;
 }
 
-.icon-more {
-  font-size: 12px;
+/* 更多图标：增加悬停效果 */
+.icon-more-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   color: #999;
-  font-style: normal;
+  transition: all 0.2s ease-in-out;
   cursor: pointer;
 }
 
-.t-slider-wrap {
-  position: relative;
-  /* overflow: hidden; */
-  width: 100%;
-}
-
-.t-track {
-  display: flex;
-  transition: transform 0.3s ease-in-out;
+.icon-more-btn:hover {
+  color: #e1251b;
+  transform: translateX(3px);
 }
 
-.t-page {
+.t-grid-single-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   width: 100%;
-  flex-shrink: 0;
 }
 
-.flip-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  background: #fff;
-  border-radius: 50%;
+.t-i {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
   cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-  z-index: 10;
-  transition: background 0.2s;
+  transition: all 0.2s ease-in-out;
 }
-.flip-btn:hover {
-  background: #f4f4f4;
+
+.t-i:hover {
+  transform: translateY(-2px); /* 悬停微动 */
 }
-.prev-btn {
-  left: 4px;
+
+.t-i:hover span {
+  color: #e1251b; /* 文字变红 */
 }
-.next-btn {
-  right: 4px;
+
+.t-i span {
+  font-size: 12px; /* 工具文字修改为 12px */
+  color: #444;
+  margin-top: 4px;
+  transition: color 0.2s;
 }
 
-.t-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: 16px 0;
+.t-icon {
+  width: 22px;
+  height: 22px;
+  opacity: 0.9;
 }
 
-.t-i {
-  text-align: center;
-  font-size: 11px;
-  color: #333;
-  position: relative;
+/* 企业公告 */
+.classroom-sec {
   display: flex;
   flex-direction: column;
+  gap: 6px;
+  margin-top: 5px;
+}
+
+.classroom-sec .c-h {
+  display: flex;
+  justify-content: space-between;
   align-items: center;
+}
+
+.class-title {
+  font-weight: bold;
+  font-size: 16px; /* 企业公告标题为 16px */
+  color: #111;
+}
+
+/* 企业公告卡片：适当调高高度，引入悬停效果 */
+.class-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 10px 12px; /* 适当增加内边距撑高卡片 */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+  transition: all 0.25s ease-in-out;
   cursor: pointer;
+  min-height: 62px; /* 显式设置最低高度以撑高卡片 */
+  box-sizing: border-box;
 }
 
-.t-icon {
-  width: 24px;
-  height: 24px;
-  margin-bottom: 6px;
-  opacity: 0.8;
+.class-card:hover {
+  transform: translateY(-2px); /* 悬浮特效 */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 投影加深 */
+}
+.class-card:hover .class-desc {
+  color: #e1251b; /* 悬停时公告标题文字变红 */
 }
 
-.badge {
-  position: absolute;
-  top: -8px;
-  right: -2px;
-  background: #ff5a5f;
-  color: #fff;
+.class-left-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  text-align: left;
+}
+
+.week-tag {
+  background: #ffeceb;
+  color: #e1251b;
   font-size: 9px;
+  font-weight: bold;
   padding: 1px 4px;
-  border-radius: 8px 8px 8px 0;
-  z-index: 10;
-  border: 1px solid #fff;
-  transform: scale(0.9);
+  border-radius: 4px;
+  width: fit-content;
+  white-space: nowrap;
+}
+
+/* 公告标题：文字大小用 12px，超出部分以 "..." 隐藏 */
+.class-desc {
+  font-size: 12px; /* 文字调整为 12px */
+  color: #333;
+  font-weight: bold;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; /* 超过显示 "..." */
+  transition: color 0.2s ease;
+}
+
+/* 图片适当放大 */
+.class-img-box {
+  width: 42px; /* 从 32px 调大至 42px */
+  height: 42px; /* 从 32px 调大至 42px */
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: #f7f7f7;
+  border: 1px solid #eee;
+}
+
+.class-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 </style>