From f9e3edfc8cd79b67498aef492c082827ac09c8b3 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Wed, 26 Nov 2025 15:42:54 +0800
Subject: [PATCH] updata

---
 .../homePage/components/topBox/index.vue      |   22 +-
 .../homePage/ncmatch/favoriteBox/index.vue    |  556 ++++++---
 .../homePage/ncmatch/historyBox/index.vue     |  480 +++++---
 .../src/views/homePage/ncmatch/index.vue      |   65 +-
 .../views/homePage/ncmatch/mainPage/index.vue |  779 +++++--------
 .../ncmatch/mainPage/menuAside/index.vue      | 1012 ++++++++++-------
 .../img/tt-banner.png                         |  Bin
 .../ncmatch/supplyAndDemandSquare/index.vue   |  908 ++++++++-------
 8 files changed, 2139 insertions(+), 1683 deletions(-)
 rename f/web-kboss/src/views/homePage/ncmatch/{ => supplyAndDemandSquare}/img/tt-banner.png (100%)

diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue
index ef9f125..cdf9eb7 100644
--- a/f/web-kboss/src/views/homePage/components/topBox/index.vue
+++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue
@@ -4,7 +4,7 @@
     <div id="topContainer" class="container">
       <!-- 统一显示logo和导航 -->
       <div class="logo">
-        <!-- Logo图片，点击跳转首页 -->
+        <!-- Logo图片，点击跳转首页 - 使用与goHome相同的逻辑 -->
         <img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="goHome" style="cursor:pointer;"
           class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt="">
 
@@ -12,7 +12,7 @@
         <nav class="main-nav">
           <div class="nav-list">
             <!-- 首页 -->
-            <p :class="{ active: $route.path.includes('/index') }">
+            <p :class="{ active: isActiveHome }">
               <!-- 动态判断域名跳转首页 -->
               <a @click="goHome">{{ translations[language].home }}</a>
             </p>
@@ -488,6 +488,14 @@ export default Vue.extend({
     // 判断当前是否为ncmatch.cn域名
     isNcmatchDomain() {
       return window.location.hostname.includes('ncmatch.cn');
+    },
+    // 首页激活状态计算
+    isActiveHome() {
+      if (this.isNcmatchDomain) {
+        return this.$route.path.includes('/ncmatchHome/index');
+      } else {
+        return this.$route.path.includes('/homePage/index');
+      }
     }
   },
   methods: {
@@ -904,7 +912,7 @@ export default Vue.extend({
       }
     },
 
-    // 首页跳转方法
+    // 首页跳转方法 - 根据域名判断跳转到不同的首页
     goHome() {
       if (this.isNcmatchDomain) {
         this.$router.push('/ncmatchHome/index');
@@ -949,6 +957,12 @@ export default Vue.extend({
 
     .logoImg {
       width: 148px;
+      cursor: pointer;
+      transition: opacity 0.3s ease;
+
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 
@@ -972,6 +986,7 @@ export default Vue.extend({
           font-size: 18px !important;
           padding: 5px 0;
           transition: all 0.3s;
+          cursor: pointer;
 
           &:hover {
             color: #1E6FFF;
@@ -1032,6 +1047,7 @@ export default Vue.extend({
       font-size: 14px;
       text-decoration: none;
       transition: all 0.3s;
+      cursor: pointer;
     }
 
     .login-btn {
diff --git a/f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue b/f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue
index 7614630..af3ec94 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue
@@ -1,57 +1,87 @@
 <template>
     <div class="followBox">
-        <div class="followBox-title">
-            <span>我的</span>
-            <span class="hightText">关注</span>
+        <!-- 页面标题区域 -->
+        <div class="follow-header">
+            <div class="followBox-title">
+                <span>我的</span>
+                <span class="hightText">关注</span>
+            </div>
+            <div class="follow-subtitle">管理您关注的企业商品和需求</div>
         </div>
-        <div class="radio-group">
-            <label class="radio-item" style="margin-right: 25px;" :class="{ active: publish_type === '1' }">
-                <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
-                <span class="radio-text">企业商品</span>
-            </label>
-            <label class="radio-item" :class="{ active: publish_type === '2' }">
-                <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
-                <span class="radio-text">企业需求</span>
-            </label>
+
+        <!-- 筛选区域 -->
+        <div class="filter-section">
+            <div class="radio-group">
+                <label class="radio-item" :class="{ active: publish_type === '1' }">
+                    <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
+                    <span class="radio-text">企业商品</span>
+                </label>
+                <label class="radio-item" :class="{ active: publish_type === '2' }">
+                    <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
+                    <span class="radio-text">企业需求</span>
+                </label>
+            </div>
+
+            <!-- 统计信息 -->
+            <div class="stats-info" v-if="productList.length > 0">
+                共 {{ getTotalItems() }} 个关注
+            </div>
+        </div>
+
+        <!-- 关注列表 -->
+        <div v-loading="loadingBox" class="follow-list" v-if="productList.length > 0">
+            <div class="follow-item" v-for="item in productList" :key="item.id">
+                <div class="follow-header-info">
+                    <div class="follow-date">
+                        <span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
+                        <span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
+                    </div>
+                    <div class="follow-count" v-if="item.products && item.products.length > 0">
+                        关注了 {{ item.products.length }} 个项目
+                    </div>
+                </div>
+                <div class="follow-content">
+                    <productCard
+                        contentType="favorite"
+                        :productList="item.products"
+                        :type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
+                        @delete-item="handleDeleteItem">
+                    </productCard>
+                </div>
+            </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div class="empty-state" v-else>
+            <div class="empty-content">
+                <div class="empty-icon">⭐</div>
+                <div class="empty-text">暂无关注记录</div>
+                <div class="empty-desc">您还没有关注任何{{ publish_type === '1' ? '商品' : '需求' }}，快去发现精彩内容吧</div>
+                <div class="empty-action">
+                    <el-button
+                        type="primary"
+                        @click="$router.push('/ncmatchHome')"
+                        class="explore-btn">
+                        去首页探索
+                    </el-button>
+                </div>
+            </div>
         </div>
-   <div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
-    <div class="history-item" v-for="item in productList" :key="item.id">
-      <div class="history-date">
-        <span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
-        <span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
-      </div>
-      <div class="history-content">
-                          <productCard 
-                    contentType="favorite"
-            :productList="item.products" 
-            :type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
-            @delete-item="handleDeleteItem">
-          </productCard>
-      </div>
-    </div>
-  </div>
-  <div class="empty-state" v-else>
-    <div class="empty-icon">📋</div>
-    <div class="empty-text">暂无关注记录</div>
-  </div>
     </div>
 </template>
+
 <script>
 import { reqFavoriteSearch } from '@/api/ncmatch';
 import productCard from '../mainPage/productCard/index.vue';
 import { formatBrowseDate, getRelativeTime } from './tool.js';
+
 export default {
     name: 'followBox',
     data() {
         return {
-            loadingBox:false,
+            loadingBox: false,
             productList: [],
-            value1: null,
             publish_type: '1', // 默认选择企业商品
-
-            myProductList: [
-       
-            ]
         }
     },
     created() {
@@ -71,55 +101,49 @@ export default {
             this.loadingBox = true;
             reqFavoriteSearch({
                 url_list: window.location.href,
-                publish_type: this.publish_type // 传递发布类型参数
+                publish_type: this.publish_type
             }).then(res => {
                 this.loadingBox = false;
                 if (res.status) {
-                    // 处理数据结构，将product_info的子项提升到上一级
                     this.productList = this.flattenProductInfo(res.data.favorites);
-                    
                 } else {
-                    this.$message.error(res.msg);
+                    this.$message.error(res.msg || '获取关注记录失败');
                 }
-            })
+            }).catch(error => {
+                this.loadingBox = false;
+                this.$message.error('网络错误，请稍后重试');
+                console.error('获取关注记录失败:', error);
+            });
         },
         /**
          * 将product_info的所有子项提升到products中每个产品的上一级，去掉product_info字段
-         * @param {Array} historyList - 原始的历史记录列表
-         * @returns {Array} 处理后的历史记录列表
          */
         flattenProductInfo(historyList) {
             if (!Array.isArray(historyList)) {
                 return [];
             }
-            
+
             return historyList.map(historyItem => {
                 if (historyItem.products && Array.isArray(historyItem.products)) {
-                    // 处理每个历史记录中的products数组
                     const flattenedProducts = historyItem.products.map(product => {
                         if (product.product_info) {
-                            // 将product_info的所有属性合并到product的上一级
                             const flattenedProduct = { ...product };
-                            
-                            // 遍历product_info的所有属性
+
                             Object.keys(product.product_info).forEach(key => {
-                                if(key == 'id'){
+                                if (key == 'id') {
                                     flattenedProduct.productid = product.product_info.id;
                                 }
-                                // 如果上一级已经有同名属性，则跳过（避免覆盖）
                                 if (!(key in flattenedProduct)) {
                                     flattenedProduct[key] = product.product_info[key];
                                 }
                             });
-                            
-                            // 删除product_info字段
+
                             delete flattenedProduct.product_info;
-                            
                             return flattenedProduct;
                         }
                         return product;
                     });
-                    
+
                     return {
                         ...historyItem,
                         products: flattenedProducts
@@ -130,64 +154,93 @@ export default {
         },
         /**
          * 处理删除事件，从列表中移除被删除的项目
-         * @param {string} deletedId - 被删除项目的ID
          */
         handleDeleteItem(deletedId) {
-            // 遍历productList，找到包含被删除产品的历史记录
             for (let i = 0; i < this.productList.length; i++) {
                 const historyItem = this.productList[i];
                 if (historyItem.products && Array.isArray(historyItem.products)) {
-                    // 在products数组中查找并删除指定ID的产品
                     const productIndex = historyItem.products.findIndex(product => product.id === deletedId);
                     if (productIndex !== -1) {
-                        // 删除该产品
                         historyItem.products.splice(productIndex, 1);
-                        
-                        // 如果该历史记录下没有产品了，删除整个历史记录
+
                         if (historyItem.products.length === 0) {
                             this.productList.splice(i, 1);
                         }
-                        
-                        // 更新视图
+
                         this.$forceUpdate();
+                        this.$message.success('取消关注成功');
                         break;
                     }
                 }
             }
+        },
+        /**
+         * 获取总关注数
+         */
+        getTotalItems() {
+            return this.productList.reduce((total, item) => {
+                return total + (item.products ? item.products.length : 0);
+            }, 0);
         }
     }
 }
 </script>
-<style>
-.followBox-title {
-    font-size: 32px;
-    font-weight: bold;
-    color: #363a46;
-    margin-bottom: 15px;
 
-    .hightText {
-        background: linear-gradient(90deg, #275aff, #2ebdfa);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        display: inline-block;
-        font-weight: 700;
-    }
+<style scoped>
+.followBox {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    min-height: calc(100vh - 100px);
 }
 
-.radio-group-container {
-    width: 100% !important;
+/* 页面标题区域 */
+.follow-header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding: 0 20px;
+}
+
+.followBox-title {
+    font-size: 36px;
+    font-weight: bold;
+    color: #363a46;
+    margin-bottom: 12px;
+    line-height: 1.2;
+}
+
+.followBox-title .hightText {
+    background: linear-gradient(135deg, #275aff, #2ebdfa);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: 700;
+}
+
+.follow-subtitle {
+    font-size: 16px;
+    color: #666;
+    opacity: 0.8;
+}
+
+/* 筛选区域 */
+.filter-section {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
-    max-width: 1400px;
+    margin-bottom: 30px;
+    padding: 0 20px;
+    flex-wrap: wrap;
+    gap: 20px;
 }
 
 .radio-group {
     display: flex;
     background: #fff;
-    border-radius: 8px;
-    margin-bottom: 15px;
+    border-radius: 12px;
+    padding: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
 }
 
 .radio-item {
@@ -195,110 +248,317 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 8px 16px;
-    border-radius: 6px;
+    padding: 12px 24px;
+    border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    margin-right: 4px;
-    font-size: 16px !important;
-
-    &:last-child {
-        margin-right: 0;
-    }
-
-    input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-
-    .radio-text {
-        font-size: 16px;
-        color: #275AFF;
-        font-weight: 500;
-        transition: all 0.3s ease;
-    }
-
-    &:hover {
-        border-color: #275AFF;
-    }
-
-    &.active {
-        background: linear-gradient(to right, #275AFF, #2EBDFA);
-        border-color: #275AFF;
-        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
-
-        .radio-text {
-            color: #fff;
-        }
-    }
+    background: transparent;
+    font-size: 14px;
 }
 
-/* 关注记录列表样式 */
-.history-list {
+.radio-item:last-child {
+    margin-right: 0;
+}
+
+.radio-item input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.radio-text {
+    font-size: 14px;
+    color: #666;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.radio-item:hover {
+    background: rgba(255, 107, 107, 0.05);
+}
+
+.radio-item.active {
+    background: linear-gradient(135deg, #275aff, #2ebdfa);
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+}
+
+.radio-item.active .radio-text {
+    color: #fff;
+    font-weight: 600;
+}
+
+.stats-info {
+    font-size: 14px;
+    color: #666;
+    background: #f8f9fa;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-weight: 500;
+}
+
+/* 关注列表样式 */
+.follow-list {
     margin-top: 20px;
 }
 
-.history-item {
+.follow-item {
     background: #fff;
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
     border: 1px solid #f0f0f0;
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
 }
 
-.history-item:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-    /* transform: translateY(-2px); */
+.follow-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+      background: linear-gradient(135deg, #275aff, #2ebdfa);
+    opacity: 0;
+    transition: opacity 0.3s ease;
 }
 
-.history-date {
+.follow-item:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+.follow-item:hover::before {
+    opacity: 1;
+}
+
+.follow-header-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f5f5f5;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.follow-date {
     display: flex;
     align-items: center;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #f5f5f5;
+    gap: 12px;
+}
+
+.date-icon {
+    font-size: 18px;
 }
 
 .date-text {
     font-size: 18px;
     font-weight: 600;
-    color: #275AFF;
-    margin-right: 12px;
+    color: #ff6b6b;
 }
 
 .relative-time {
     font-size: 14px;
     color: #999;
     background: #f8f9fa;
-    padding: 4px 8px;
-    border-radius: 12px;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-weight: 500;
 }
 
-.history-content {
+.follow-count {
+    font-size: 14px;
+    color: #666;
+     background: linear-gradient(135deg, #275aff, #2ebdfa);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-weight: 500;
+}
+
+.follow-content {
     margin-top: 8px;
 }
 
 /* 空状态样式 */
 .empty-state {
     text-align: center;
-    padding: 60px 20px;
-    color: #999;
+    padding: 80px 20px;
+    margin-top: 40px;
+}
+
+.empty-content {
+    max-width: 400px;
+    margin: 0 auto;
 }
 
 .empty-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
+    font-size: 80px;
+    margin-bottom: 24px;
     opacity: 0.6;
 }
 
 .empty-text {
-    font-size: 16px;
-    color: #999;
+    font-size: 20px;
+    color: #333;
+    margin-bottom: 12px;
+    font-weight: 600;
 }
-</style>
\ No newline at end of file
+
+.empty-desc {
+    font-size: 14px;
+    color: #999;
+    margin-bottom: 30px;
+    line-height: 1.6;
+}
+
+.explore-btn {
+    padding: 12px 32px;
+    border-radius: 8px;
+    font-weight: 500;
+      background: linear-gradient(135deg, #275aff, #2ebdfa);
+    border: none;
+    transition: all 0.3s ease;
+}
+
+.explore-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .followBox {
+        padding: 20px 15px;
+    }
+
+    .follow-header {
+        margin-bottom: 30px;
+    }
+
+    .followBox-title {
+        font-size: 28px;
+    }
+
+    .filter-section {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 15px;
+    }
+
+    .radio-group {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .radio-item {
+        flex: 1;
+        padding: 10px 16px;
+    }
+
+    .stats-info {
+        align-self: center;
+    }
+
+    .follow-item {
+        padding: 20px;
+        border-radius: 12px;
+    }
+
+    .follow-header-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .follow-date {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    .empty-state {
+        padding: 60px 15px;
+    }
+
+    .empty-icon {
+        font-size: 60px;
+    }
+
+    .empty-text {
+        font-size: 18px;
+    }
+}
+
+@media (max-width: 480px) {
+    .followBox {
+        padding: 15px 10px;
+    }
+
+    .followBox-title {
+        font-size: 24px;
+    }
+
+    .follow-item {
+        padding: 16px;
+        margin-bottom: 16px;
+    }
+
+    .date-text {
+        font-size: 16px;
+    }
+
+    .radio-item {
+        padding: 8px 12px;
+    }
+
+    .empty-icon {
+        font-size: 50px;
+    }
+}
+
+/* 加载状态优化 */
+::v-deep .el-loading-mask {
+    border-radius: 16px;
+}
+
+::v-deep .el-loading-spinner .circular {
+    width: 42px;
+    height: 42px;
+}
+
+::v-deep .el-loading-spinner .path {
+    stroke: #ff6b6b;
+}
+
+/* 特殊样式 - 关注页面的独特视觉效果 */
+.follow-item .heart-pulse {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 24px;
+    height: 24px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b6b'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 0.7;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue b/f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue
index 94c241b..617758d 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue
@@ -1,57 +1,84 @@
 <template>
     <div class="historyBox">
-        <div class="historyBox-title">
-            <span>浏览</span>
-            <span class="hightText">记录</span>
+        <!-- 页面标题 -->
+        <div class="history-header">
+            <div class="historyBox-title">
+                <span>浏览</span>
+                <span class="hightText">记录</span>
+            </div>
+            <div class="history-subtitle">查看您的商品和需求浏览历史</div>
         </div>
-        <div class="radio-group">
-            <label class="radio-item" style="margin-right: 25px;" :class="{ active: publish_type === '1' }">
-                <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
-                <span class="radio-text">企业商品</span>
-            </label>
-            <label class="radio-item" :class="{ active: publish_type === '2' }">
-                <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
-                <span class="radio-text">企业需求</span>
-            </label>
+
+        <!-- 筛选标签 -->
+        <div class="filter-section">
+            <div class="radio-group">
+                <label class="radio-item" :class="{ active: publish_type === '1' }">
+                    <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
+                    <span class="radio-text">企业商品</span>
+                </label>
+                <label class="radio-item" :class="{ active: publish_type === '2' }">
+                    <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
+                    <span class="radio-text">企业需求</span>
+                </label>
+            </div>
+
+            <!-- 统计信息 -->
+            <div class="stats-info" v-if="productList.length > 0">
+                共 {{ getTotalItems() }} 条记录
+            </div>
+        </div>
+
+        <!-- 历史记录列表 -->
+        <div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
+            <div class="history-item" v-for="item in productList" :key="item.id">
+                <div class="history-date">
+                    <div class="date-content">
+                        <span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
+                        <span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
+                    </div>
+                </div>
+                <div class="history-content">
+                    <productCard
+                        contentType="history"
+                        :productList="item.products"
+                        :type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
+                        @delete-item="handleDeleteItem">
+                    </productCard>
+                </div>
+            </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div class="empty-state" v-else>
+            <div class="empty-content">
+                <div class="empty-icon">📋</div>
+                <div class="empty-text">暂无浏览记录</div>
+                <div class="empty-desc">您还没有浏览过任何{{ publish_type === '1' ? '商品' : '需求' }}，快去探索吧</div>
+                <div class="empty-action">
+                    <el-button
+                        type="primary"
+                        @click="$router.push('/ncmatchHome')"
+                        class="explore-btn">
+                        去首页逛逛
+                    </el-button>
+                </div>
+            </div>
         </div>
-   <div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
-    <div class="history-item" v-for="item in productList" :key="item.id">
-      <div class="history-date">
-        <span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
-        <span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
-      </div>
-      <div class="history-content">
-                          <productCard 
-                  contentType="history"
-            :productList="item.products" 
-            :type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
-            @delete-item="handleDeleteItem">
-          </productCard>
-      </div>
-    </div>
-  </div>
-  <div class="empty-state" v-else>
-    <div class="empty-icon">📋</div>
-    <div class="empty-text">暂无浏览记录</div>
-  </div>
     </div>
 </template>
+
 <script>
 import { reqUserBrowseHistorySearch } from '@/api/ncmatch';
 import productCard from '../mainPage/productCard/index.vue';
 import { formatBrowseDate, getRelativeTime } from './tool.js';
+
 export default {
     name: 'historyBox',
     data() {
         return {
-            loadingBox:false,
+            loadingBox: false,
             productList: [],
-            value1: null,
             publish_type: '1', // 默认选择企业商品
-
-            myProductList: [
-       
-            ]
         }
     },
     created() {
@@ -71,55 +98,49 @@ export default {
             this.loadingBox = true;
             reqUserBrowseHistorySearch({
                 url_list: window.location.href,
-                publish_type: this.publish_type // 传递发布类型参数
+                publish_type: this.publish_type
             }).then(res => {
                 this.loadingBox = false;
                 if (res.status) {
-                    // 处理数据结构，将product_info的子项提升到上一级
                     this.productList = this.flattenProductInfo(res.data.history_list);
-                    
                 } else {
-                    this.$message.error(res.msg);
+                    this.$message.error(res.msg || '获取浏览记录失败');
                 }
-            })
+            }).catch(error => {
+                this.loadingBox = false;
+                this.$message.error('网络错误，请稍后重试');
+                console.error('获取浏览记录失败:', error);
+            });
         },
         /**
          * 将product_info的所有子项提升到products中每个产品的上一级，去掉product_info字段
-         * @param {Array} historyList - 原始的历史记录列表
-         * @returns {Array} 处理后的历史记录列表
          */
         flattenProductInfo(historyList) {
             if (!Array.isArray(historyList)) {
                 return [];
             }
-            
+
             return historyList.map(historyItem => {
                 if (historyItem.products && Array.isArray(historyItem.products)) {
-                    // 处理每个历史记录中的products数组
                     const flattenedProducts = historyItem.products.map(product => {
                         if (product.product_info) {
-                            // 将product_info的所有属性合并到product的上一级
                             const flattenedProduct = { ...product };
-                            
-                            // 遍历product_info的所有属性
+
                             Object.keys(product.product_info).forEach(key => {
-                                if(key == 'id'){
+                                if (key == 'id') {
                                     flattenedProduct.productid = product.product_info.id;
                                 }
-                                // 如果上一级已经有同名属性，则跳过（避免覆盖）
                                 if (!(key in flattenedProduct)) {
                                     flattenedProduct[key] = product.product_info[key];
                                 }
                             });
-                            
-                            // 删除product_info字段
+
                             delete flattenedProduct.product_info;
-                            
                             return flattenedProduct;
                         }
                         return product;
                     });
-                    
+
                     return {
                         ...historyItem,
                         products: flattenedProducts
@@ -130,64 +151,93 @@ export default {
         },
         /**
          * 处理删除事件，从列表中移除被删除的项目
-         * @param {string} deletedId - 被删除项目的ID
          */
         handleDeleteItem(deletedId) {
-            // 遍历productList，找到包含被删除产品的历史记录
             for (let i = 0; i < this.productList.length; i++) {
                 const historyItem = this.productList[i];
                 if (historyItem.products && Array.isArray(historyItem.products)) {
-                    // 在products数组中查找并删除指定ID的产品
                     const productIndex = historyItem.products.findIndex(product => product.id === deletedId);
                     if (productIndex !== -1) {
-                        // 删除该产品
                         historyItem.products.splice(productIndex, 1);
-                        
-                        // 如果该历史记录下没有产品了，删除整个历史记录
+
                         if (historyItem.products.length === 0) {
                             this.productList.splice(i, 1);
                         }
-                        
-                        // 更新视图
+
                         this.$forceUpdate();
+                        this.$message.success('删除成功');
                         break;
                     }
                 }
             }
+        },
+        /**
+         * 获取总记录数
+         */
+        getTotalItems() {
+            return this.productList.reduce((total, item) => {
+                return total + (item.products ? item.products.length : 0);
+            }, 0);
         }
     }
 }
 </script>
-<style>
-.historyBox-title {
-    font-size: 32px;
-    font-weight: bold;
-    color: #363a46;
-    margin-bottom: 15px;
 
-    .hightText {
-        background: linear-gradient(90deg, #275aff, #2ebdfa);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        display: inline-block;
-        font-weight: 700;
-    }
+<style scoped>
+.historyBox {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    min-height: calc(100vh - 100px);
 }
 
-.radio-group-container {
-    width: 100% !important;
+/* 页面标题区域 */
+.history-header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding: 0 20px;
+}
+
+.historyBox-title {
+    font-size: 36px;
+    font-weight: bold;
+    color: #363a46;
+    margin-bottom: 12px;
+    line-height: 1.2;
+}
+
+.historyBox-title .hightText {
+    background: linear-gradient(135deg, #275aff, #2ebdfa);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: 700;
+}
+
+.history-subtitle {
+    font-size: 16px;
+    color: #666;
+    opacity: 0.8;
+}
+
+/* 筛选区域 */
+.filter-section {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
-    max-width: 1400px;
+    margin-bottom: 30px;
+    padding: 0 20px;
+    flex-wrap: wrap;
+    gap: 20px;
 }
 
 .radio-group {
     display: flex;
     background: #fff;
-    border-radius: 8px;
-    margin-bottom: 15px;
+    border-radius: 12px;
+    padding: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
 }
 
 .radio-item {
@@ -195,46 +245,53 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 8px 16px;
-    border-radius: 6px;
+    padding: 12px 24px;
+    border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    margin-right: 4px;
-    font-size: 16px !important;
+    background: transparent;
+    font-size: 14px;
+}
 
-    &:last-child {
-        margin-right: 0;
-    }
+.radio-item:last-child {
+    margin-right: 0;
+}
 
-    input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
+.radio-item input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
 
-    .radio-text {
-        font-size: 16px;
-        color: #275AFF;
-        font-weight: 500;
-        transition: all 0.3s ease;
-    }
+.radio-text {
+    font-size: 14px;
+    color: #666;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
 
-    &:hover {
-        border-color: #275AFF;
-    }
+.radio-item:hover {
+    background: rgba(39, 90, 255, 0.05);
+}
 
-    &.active {
-        background: linear-gradient(to right, #275AFF, #2EBDFA);
-        border-color: #275AFF;
-        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
+.radio-item.active {
+    background: linear-gradient(135deg, #275AFF, #2EBDFA);
+    box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
+}
 
-        .radio-text {
-            color: #fff;
-        }
-    }
+.radio-item.active .radio-text {
+    color: #fff;
+    font-weight: 600;
+}
+
+.stats-info {
+    font-size: 14px;
+    color: #666;
+    background: #f8f9fa;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-weight: 500;
 }
 
 /* 历史记录列表样式 */
@@ -244,40 +301,66 @@ export default {
 
 .history-item {
     background: #fff;
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
     border: 1px solid #f0f0f0;
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.history-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(to bottom, #275AFF, #2EBDFA);
+    opacity: 0;
+    transition: opacity 0.3s ease;
 }
 
 .history-item:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-    /* transform: translateY(-2px); */
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+.history-item:hover::before {
+    opacity: 1;
 }
 
 .history-date {
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f5f5f5;
+}
+
+.date-content {
     display: flex;
     align-items: center;
-    margin-bottom: 16px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #f5f5f5;
+    gap: 12px;
+}
+
+.date-icon {
+    font-size: 18px;
 }
 
 .date-text {
     font-size: 18px;
     font-weight: 600;
     color: #275AFF;
-    margin-right: 12px;
 }
 
 .relative-time {
     font-size: 14px;
     color: #999;
     background: #f8f9fa;
-    padding: 4px 8px;
-    border-radius: 12px;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-weight: 500;
 }
 
 .history-content {
@@ -287,18 +370,145 @@ export default {
 /* 空状态样式 */
 .empty-state {
     text-align: center;
-    padding: 60px 20px;
-    color: #999;
+    padding: 80px 20px;
+    margin-top: 40px;
+}
+
+.empty-content {
+    max-width: 400px;
+    margin: 0 auto;
 }
 
 .empty-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
+    font-size: 80px;
+    margin-bottom: 24px;
     opacity: 0.6;
 }
 
 .empty-text {
-    font-size: 16px;
-    color: #999;
+    font-size: 20px;
+    color: #333;
+    margin-bottom: 12px;
+    font-weight: 600;
 }
-</style>
\ No newline at end of file
+
+.empty-desc {
+    font-size: 14px;
+    color: #999;
+    margin-bottom: 30px;
+    line-height: 1.6;
+}
+
+.explore-btn {
+    padding: 12px 32px;
+    border-radius: 8px;
+    font-weight: 500;
+    background: linear-gradient(135deg, #275AFF, #2EBDFA);
+    border: none;
+    transition: all 0.3s ease;
+}
+
+.explore-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(39, 90, 255, 0.3);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .historyBox {
+        padding: 20px 15px;
+    }
+
+    .history-header {
+        margin-bottom: 30px;
+    }
+
+    .historyBox-title {
+        font-size: 28px;
+    }
+
+    .filter-section {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 15px;
+    }
+
+    .radio-group {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .radio-item {
+        flex: 1;
+        padding: 10px 16px;
+    }
+
+    .stats-info {
+        align-self: center;
+    }
+
+    .history-item {
+        padding: 20px;
+        border-radius: 12px;
+    }
+
+    .date-content {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    .empty-state {
+        padding: 60px 15px;
+    }
+
+    .empty-icon {
+        font-size: 60px;
+    }
+
+    .empty-text {
+        font-size: 18px;
+    }
+}
+
+@media (max-width: 480px) {
+    .historyBox {
+        padding: 15px 10px;
+    }
+
+    .historyBox-title {
+        font-size: 24px;
+    }
+
+    .history-item {
+        padding: 16px;
+        margin-bottom: 16px;
+    }
+
+    .date-text {
+        font-size: 16px;
+    }
+
+    .radio-item {
+        padding: 8px 12px;
+    }
+
+    .empty-icon {
+        font-size: 50px;
+    }
+}
+
+/* 加载状态优化 */
+::v-deep .el-loading-mask {
+    border-radius: 16px;
+}
+
+::v-deep .el-loading-spinner .circular {
+    width: 42px;
+    height: 42px;
+}
+
+::v-deep .el-loading-spinner .path {
+    stroke: #275AFF;
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/ncmatch/index.vue b/f/web-kboss/src/views/homePage/ncmatch/index.vue
index c1ec370..ff3a69f 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/index.vue
@@ -1,24 +1,11 @@
 <template>
   <div id="homeOut" class="homeOut">
     <TopBox id="topBox"></TopBox>
-    <div class="banner-box">
-      <div class="conter">
-        <div class="title">
-          供需广场
-        </div>
-        <div class="banner-title">
-          开元云供需对接广场，是企业级云服务合作核心阵地。围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，通过精准匹配打破信息壁垒。这里既能盘活企业闲置算力与云资源，又能快速对接所需技术服务与合作机会，助力企业降本增效，加速数字化与智能化转型。
-        </div>
-        <div class="btn">
-          <div class="btn-box" @click="sendInfo('2')">发布需求</div>
-          <div class="btn-box" @click="sendInfo('1')">发布商品</div>
-        </div>
-      </div>
-    </div>
+
     <!-- <div class="search-box">
       <search></search>
     </div> -->
-    <div style="width: 90%;max-width: 1600px;">
+    <div style="width: 100%;">
       <router-view></router-view>
     </div>
 
@@ -92,7 +79,6 @@ import { mapGetters, mapState } from "vuex";
 import search from "./search/index.vue";
 import { reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
 import productDetail from "./proDetail/index.vue";
-
 export default Vue.extend({
   name: "indexLast",
   components: {
@@ -228,54 +214,7 @@ export default Vue.extend({
 </script>
 
 <style scoped lang="less">
-/deep/.banner-box {
-  height: 700px!important;
-  background: url('./img/tt-banner.png') no-repeat ;
-  width: 100%;
-  padding-bottom: 200px;
 
-  .conter {
-    width: 700px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 140px 240px 0px;
-  }
-
-  .title {
-    font-size: 30px;
-    font-weight: 600;
-    margin-bottom: 18px;
-  }
-
-  .banner-title {
-    width: 700px;
-    font-size: 16px;
-    color: #8890ab;
-    line-height: 2 !important;
-  }
-
-  .btn{
-    display: flex;
-  }
-
-  .btn-box{
-    padding: 10px 20px;
-    background: linear-gradient(90deg, rgb(39, 90, 255), rgb(46, 189, 250));
-    border-radius: 14px;
-    color: #fff;
-    margin-right: 20px;
-    margin-top: 20px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
-    }
-  }
-}
 
 .search-box {
   width: 100%;
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue b/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue
index b6397fb..027a822 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue
@@ -1,7 +1,97 @@
+<template>
+  <div class="jd-homepage">
+    <!-- 搜索区域 -->
+    <div class="search-box">
+      <search></search>
+    </div>
+
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <div class="content-wrapper">
+        <!-- 左侧菜单 -->
+        <menuAside></menuAside>
+
+        <!-- 中间主内容 -->
+        <section class="main-section">
+          <!-- 顶部促销横幅 -->
+          <div id="banner" class="banner">
+            <div class="centerBox">
+              <div class="title">
+                <span class="leftText">NCMatch</span>
+                <span class="rightText">算力供需对接平台</span>
+              </div>
+              <ul class="tagUl">
+                <li>匠造臻品 <span class="separator"></span> 精奢惠选</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <!-- 右侧用户信息栏 -->
+        <aside class="user-sidebar">
+          <div class="sidebar-content">
+            <span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')">
+              算力供需广场
+            </span>
+            <span class="publish-goods" @click="sendInfo('2')">发布需求</span>
+            <span class="publish-goods" @click="sendInfo('1')">发布商品</span>
+
+            <ul class="userBtn">
+              <li @click="goHistory">
+                <img src="./img/eye.png" alt="浏览记录">
+                浏览记录
+              </li>
+              <li @click="goFavorite">
+                <img src="./img/collect.png" alt="我的收藏">
+                我的收藏
+              </li>
+            </ul>
+          </div>
+        </aside>
+      </div>
+    </main>
+
+    <!-- 产品列表区域 -->
+    <div class="productList">
+      <ul class="myTab">
+        <li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
+          :key="menu.name">
+          <span class="tab-text">{{ menu.product_category }}</span>
+        </li>
+      </ul>
+
+      <productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
+
+      <el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </div>
+
+    <!-- 发布商品/需求对话框 -->
+    <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
+      :visible.sync="sendProductVisible">
+      <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
+      </sendProduct>
+    </el-dialog>
+
+    <!-- 提示对话框 -->
+    <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
+      <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
+      <span slot="footer" class="dialog-footer">
+        <span>
+          <span style="margin-right: 10px;">跳转到</span>
+          <el-button size="small" type="primary" @click="goInfo">信息完善</el-button>
+        </span>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
 <script>
 import Vue from 'vue'
 import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch, reqHomepageProductCategory, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
 import { mapGetters, mapState } from "vuex";
+
 export default Vue.extend({
   name: "mainPage",
   components: {
@@ -12,7 +102,6 @@ export default Vue.extend({
   },
   created() {
     this.getHomepageProductCategory()
-
   },
   data() {
     return {
@@ -24,110 +113,12 @@ export default Vue.extend({
       sendProductVisible: false,
       currentHotMenu: "",
       product: [],
-      hotProductList: [
-        // {
-        //   id: 1,
-        //   name: 'NVIDIA-4090',
-        //   image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-        //   price: 6000,
-        //   cpu: 'AMD EPYC 7542 32 C * 2',
-        //   memory: '64G DDR4-3200 * 8',
-        //   gpu: 'NVIDIA-4090-24GB * 8',
-        //   sys_disk: '960G SATA SSD * 2 (Raid)',
-        //   data_disk: '3.84T U.2 NVMe SSD * 1',
-        //   net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-        // },
-        // {
-        //   id: 2,
-        //   name: 'NVIDIA-4090',
-        //   image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-        //   price: 6000,
-        //   cpu: 'AMD EPYC 7542 32 C * 2',
-        //   memory: '64G DDR4-3200 * 8',
-        //   gpu: 'NVIDIA-4090-24GB * 8',
-        //   sys_disk: '960G SATA SSD * 2 (Raid)',
-        //   data_disk: '3.84T U.2 NVMe SSD * 1',
-        //   net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-        // }
-      ],
-      hotMenuList: [
-        {
-          id: "hot",
-          name: "热门推荐",
-          icon: require("../../newImg/niu.png"),
-          activeIcon: require("../../newImg/niuActive.png")
-        },
-        {
-          id: "hlzx",
-          name: "互联网专线",
-          icon: require("../../newImg/niu.png"),
-          activeIcon: require("../../newImg/niuActive.png"),
-        },
-        {
-          id: "SDWAN",
-          name: "SDWAN",
-          icon: require("../../newImg/niu.png"),
-          activeIcon: require("../../newImg/niuActive.png"),
-        },
-        {
-          id: "DCI",
-          name: "DCI",
-          icon: require("../../newImg/niu.png"),
-          activeIcon: require("../../newImg/niuActive.png"),
-        },
-        {
-          id: "AI",
-          name: "AI专线",
-          icon: require("../../newImg/niu.png"),
-          activeIcon: require("../../newImg/niuActive.png"),
-        }
-      ],
-      searchKeyword: '',
-      hotSearchKeywords: [
-        '昆仑芯-P800',
-        '天垓-150',
-        '4090',
-        '云服务器-GPU',
-        '人脸识别',
-        'SDWAN',
-        '互联网专线',
-        'DCI',
-        'AI专线',
-        '对象存储',
-        '智慧医疗',
-        '智慧客服',
-        'A800',
-        'A100',
-        '910B'
-      ],
-      topNavItems: [
-        { name: '早十好价', icon: '10', color: 'red' },
-        { name: '司法拍卖', icon: '⚖️', color: 'red' },
-        { name: '企业购', icon: '🏢', color: 'blue' },
-        { name: '京东新品', icon: '🎁', color: 'blue' },
-        { name: '男装馆', icon: '👔', color: 'blue' },
-        { name: '黑色星期五', icon: '🍃', color: 'green' },
-        { name: '服饰美妆', icon: '👗', color: 'purple' },
-        { name: '清洁馆', icon: '💧', color: 'blue' },
-        { name: '五金城', icon: '⚙️', color: 'red' },
-        { name: '全部频道', icon: '📱', color: 'rainbow' }
-      ],
-      categories: [
-        { name: '云', icon: require('./img/cloud.png'), product_list: ['百度云'] },
-        { name: '国产算力', icon: require('./img/computing.png'), product_list: ['昇腾910B', 'P800', '其他'] },
-        { name: 'NVIDIA', icon: require('./img/nvidia.png'), product_list: ['3090', '4090', '5080', '5090'] },
-        { name: '网', icon: require('./img/net.png'), product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
-        { name: '一体机', icon: require('./img/computer.png'), product_list: ['昆仑芯', '天数智芯'] },
-        { name: '硬件', icon: require('./img/ying.png'), product_list: ['机器人', 'AR眼镜'] },
-        { name: 'AI应用', icon: require('./img/aiApp.png'), product_list: ['数字人', '智慧医疗', '智能客服'] },
-      ],
+      hotProductList: [],
       current_page: 1,
       page_size: 8,
-
     }
   },
   computed: {
-
     ...mapGetters(["sidebar", "avatar", "device"]),
     ...mapState({
       isShowPanel: (state) => state.product.showHomeNav,
@@ -161,12 +152,10 @@ export default Vue.extend({
     goInfo() {
       this.showTip = false
       this.$router.push('/customer/approve')
-
     },
     handleCurrentChange(val) {
       this.current_page = val
       this.initData()
-      // this.init_product_list()
     },
     sendInfo(type) {
       if (this.loginState) {
@@ -200,8 +189,6 @@ export default Vue.extend({
             this.showTip = true
           }
         })
-
-
       } else {
         this.$router.push('/login')
       }
@@ -226,13 +213,18 @@ export default Vue.extend({
             this.hotProductList = res.data[0].product_list
             this.total = res.data[0].total_count
           }
-
         }
       })
-
     },
     init_product_list() {
-      reqPublishProductSearchFirstPage({ publish_type: "1", url_link: window.location.href, to_page: 'first_page', page_size: this.page_size, current_page: this.current_page, product_type: this.currentHotMenu }).then(res => {
+      reqPublishProductSearchFirstPage({
+        publish_type: "1",
+        url_link: window.location.href,
+        to_page: 'first_page',
+        page_size: this.page_size,
+        current_page: this.current_page,
+        product_type: this.currentHotMenu
+      }).then(res => {
         if (res.status) {
           if (res.data.length > 0) {
             this.currentHotMenu = res.data[0].id
@@ -240,7 +232,6 @@ export default Vue.extend({
             this.product = res.data
             this.total = res.data[0].total_count
           }
-
         }
       })
     },
@@ -253,11 +244,6 @@ export default Vue.extend({
       this.currentHotMenu = menu.id;
       this.selectedCategory = menu.id
       this.initData()
-      // this.hotProductList = menu.product_list || [];
-    },
-    handleSearch() {
-      console.log('搜索:1', this.searchKeyword)
-
     },
     goFavorite() {
       if (this.loginState) {
@@ -277,155 +263,55 @@ export default Vue.extend({
 })
 </script>
 
-<template>
-  <div class="jd-homepage">
-    <!-- 顶部Header -->
-    <!-- <header class="header">
-      <div class="header-content">
-
-
-      </div>
-    </header> -->
-    <!-- 主内容区域 -->
-    <main class="main-content">
-      <div class="content-wrapper">
-
-        <menuAside></menuAside>
-        <!-- 中间主内容 -->
-        <section class="main-section">
-          <!-- 顶部促销横幅 -->
-          <div id="banner" class="banner">
-            <div class="centerBox">
-              <span style="margin-top: 100px" class="title">
-                <span class="leftText">
-                  NCMatch &nbsp;&nbsp;
-                </span>
-                <span class="rightText" style="margin-left: 10px;"> 算力供需对接平台</span>
-              </span>
-              <!--        <span class="description">支持模型训练、推理和数据处理，灵活配置，助您高效释放AI潜能</span>-->
-              <ul style="margin-top: 50px" class="tagUl">
-                <li>匠造臻品 <span style="display: inline-block;margin: 0 15px;"></span> 精奢惠选</li>
-              </ul>
-            </div>
-          </div>
-        </section>
-
-        <!-- 右侧用户信息栏 -->
-        <aside class="user-sidebar" style="background-color: #f8fbfe;padding: 10px;padding-top: 20px;">
-          <span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')"> 算力供需广场</span>
-          <span class="publish-goods" @click="sendInfo('2')">发布需求</span>
-          <span class="publish-goods" @click="sendInfo('1')">发布商品</span>
-
-          <ul class="userBtn">
-            <li @click="goHistory"><img style="width: 26px;height: 26px;" src="./img/eye.png" alt="">浏览记录</li>
-            <li @click="goFavorite"><img style="width: 26px;height: 26px;" src="./img/collect.png" alt="">我的收藏</li>
-            <!-- <li><img src="./img/like.png" alt="">关注需求</li> -->
-          </ul>
-        </aside>
-      </div>
-    </main>
-    <div class="productList">
-      <ul class="myTab">
-        <li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
-          :key="menu.name">
-          <!-- <img :src="currentHotMenu === menu.id ? menu.activeIcon : menu.icon" alt="" /> -->
-          <span class="tab-text">{{ menu.product_category }}</span>
-        </li>
-      </ul>
-
-
-      <productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
-      <el-pagination style="background-color: white;" @current-change="handleCurrentChange" :page-size="page_size"
-        layout="total, prev, pager, next" :total="total">
-      </el-pagination>
-      <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
-        :visible.sync="sendProductVisible">
-        <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
-        </sendProduct>
-      </el-dialog>
-      <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
-        <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
-        <span slot="footer" class="dialog-footer">
-
-          <span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
-              @click="goInfo">信息完善</el-button></span>
-        </span>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
 <style scoped lang="scss">
-.userBtn {
-  margin-top: 40px !important;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  li {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s;
-
-    * {
-      img {
-        width: 20px !important;
-        height: 20px !important;
-      }
-    }
-
-    &:hover {
-      transition: all 0.3s;
-      cursor: pointer;
-      color: #2c96fc;
-
-      svg {
-
-        path {
-          fill: #2c96fc !important;
-        }
-      }
-    }
-
-    img {
-      width: 16px;
-      height: 16px;
-    }
-  }
+.jd-homepage {
+  margin: 30px;
+  margin-top: 100px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-
-
-.productList {
-  width: 100%;
-  max-width: 1600px;
-  margin: 0 auto;
-  // padding-bottom: 45px;
+.search-box {
+  margin-bottom: 20px;
 }
 
-.publish-goods {
-  margin-bottom: 25px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* 主内容区域 */
+.main-content {
+  padding: 40px;
   width: 100%;
-  height: 60px;
+  margin-top: 50px;
   border-radius: 10px;
-  background: url('./img//btnBg.png');
-  background-size: cover;
-  background-position: top;
-  color: #222F60 !important;
-  font-size: 18px;
-  font-weight: 900;
 
-  &:hover {
-    cursor: pointer;
-    // background: #2EBDFA;
+  .content-wrapper {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 300px 1fr 300px;
+    gap: 20px;
+
+    @media (max-width: 1200px) {
+      grid-template-columns: 250px 1fr 250px;
+      gap: 15px;
+    }
+
+    @media (max-width: 992px) {
+      grid-template-columns: 200px 1fr;
+
+      .user-sidebar {
+        grid-column: 1 / -1;
+        margin-top: 20px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+
+      .user-sidebar {
+        margin-top: 20px;
+      }
+    }
   }
 }
 
+/* 横幅样式 */
 .banner {
   border-radius: 10px;
   background: url("../../newImg/banner.png");
@@ -433,7 +319,11 @@ export default Vue.extend({
   background-size: cover;
   background-position: center;
   position: relative;
-  height: 100%;
+  height: 500px;
+
+  @media (max-width: 768px) {
+    height: 200px;
+  }
 
   .centerBox {
     display: flex;
@@ -441,7 +331,7 @@ export default Vue.extend({
     align-items: center;
     flex-direction: column;
     position: absolute;
-    top: 35%;
+    top: 50%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, -50%);
@@ -450,27 +340,35 @@ export default Vue.extend({
       color: #222F60;
       font-size: 42px;
       display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      text-align: center;
+
+      @media (max-width: 992px) {
+        font-size: 36px;
+      }
+
+      @media (max-width: 768px) {
+        font-size: 28px;
+        flex-direction: column;
+      }
 
       .leftText {
         background: linear-gradient(to right, #275AFF, #2EBDFA);
-        /* 渐变方向颜色 */
         -webkit-background-clip: text;
-        /* 关键属性：裁剪背景到文字 */
         background-clip: text;
         color: transparent;
-        /* 文字颜色透明 */
         display: inline-block;
-        /* 确保渐变生效 */
       }
-    }
 
+      .rightText {
+        margin-left: 10px;
 
-    .description {
-      margin: 15px 0;
-      color: #7A82A0;
-      font-size: 24px;
-      height: 75px;
-      line-height: 1.6;
+        @media (max-width: 768px) {
+          margin-left: 0;
+          margin-top: 5px;
+        }
+      }
     }
 
     .tagUl {
@@ -479,22 +377,112 @@ export default Vue.extend({
       justify-content: center;
       align-items: center;
       font-size: 24px;
+      margin-top: 30px;
+
+      @media (max-width: 768px) {
+        font-size: 18px;
+        margin-top: 20px;
+      }
 
       li {
         padding: 0 30px;
-        margin-top: 25px;
         display: flex;
         justify-content: center;
         align-items: center;
+      }
 
-        &:not(:last-child) {
-          border-right: 2px solid #D2D7E6;
-        }
+      .separator {
+        display: inline-block;
+        margin: 0 15px;
       }
     }
   }
 }
 
+/* 用户侧边栏 */
+.user-sidebar {
+  background-color: #f8fbfe;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+  .sidebar-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .publish-goods {
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    border-radius: 10px;
+    background: url('./img/btnBg.png');
+    background-size: cover;
+    background-position: top;
+    color: #222F60 !important;
+    font-size: 18px;
+    font-weight: 900;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    @media (max-width: 992px) {
+      height: 50px;
+      font-size: 16px;
+    }
+  }
+
+  .userBtn {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    li {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      padding: 12px 15px;
+      border-radius: 8px;
+      transition: all 0.3s;
+      cursor: pointer;
+      background-color: white;
+
+      &:hover {
+        background-color: #e6f7ff;
+        color: #2c96fc;
+        transform: translateX(5px);
+      }
+
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+/* 产品列表区域 */
+.productList {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 0 20px 40px;
+
+  @media (max-width: 768px) {
+    padding: 0 10px 30px;
+  }
+}
+
 .myTab {
   width: 100%;
   font-size: 18px;
@@ -505,6 +493,13 @@ export default Vue.extend({
   justify-content: center;
   align-items: center;
   margin-top: 50px;
+  flex-wrap: wrap;
+
+  @media (max-width: 768px) {
+    margin-top: 30px;
+    font-size: 16px;
+  }
+
   .activeMenu {
     background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
     color: white;
@@ -513,243 +508,69 @@ export default Vue.extend({
   li {
     transition: all .2s ease-in-out;
     z-index: 2;
-    padding: 10px 20px;
-    margin-right: 45px;
+    padding: 10px 100px;
+    margin: 5px;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 
-    &:hover {
-      cursor: pointer !important;
-    }
-
-    img {
-      width: 24px;
-      height: 24px;
-      margin-right: 5px;
-    }
-  }
-}
-
-
-.jd-homepage {
-  min-height: 100vh;
-  background-color: #f8fbfe;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-// Header样式
-.header {
-  padding: 10px 0;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  position: relative;
-
-  .header-content {
-    width: 100%;
-    max-width: 950px;
-    // margin: 0 auto;
-    margin-top: 15px;
-    display: flex;
-    align-items: center;
-    // gap: 20px;
-    position: absolute;
-    left: 420px;
-  }
-
-  .logo-section {
-
-    margin: 0 50px;
-
-    img {
-      height: 70px;
-      width: 70px;
-    }
-
-    .logo {
-      display: flex;
-      align-items: center;
-      height: 100%;
-
-      .logo-text {
-        font-size: 24px;
-        font-weight: bold;
-        color: #e1251b;
-      }
-
-      .logo-mascot {
-        font-size: 20px;
-      }
-    }
-  }
-
-
-  .signin-section {
-    .signin-btn {
-      background: linear-gradient(45deg, #ffd700, #ff6b35);
-      color: white;
-      border: none;
+    @media (max-width: 768px) {
       padding: 8px 15px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      .signin-icon {
-        font-weight: bold;
-      }
+      margin: 3px;
     }
   }
 }
 
+/* 分页样式 */
+.el-pagination {
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
 
-// 主内容区域
-.main-content {
-  // padding: 16px;
+  @media (max-width: 768px) {
 
-  width: 100%;
-  max-width: 1600px;
-  margin: 20px auto;
-  margin-top: 10px;
-  margin-bottom: 0;
-  border-radius: 10px;
-  overflow: visible;
-  background-color: white;
-  height: 320px;
-
-  .content-wrapper {
-    box-sizing: border-box;
-    display: grid;
-    grid-template-columns: 300px 1fr 250px;
-    gap: 20px;
+    ::v-deep .el-pagination__total,
+    ::v-deep .el-pagination__jump {
+      display: none;
+    }
   }
 }
 
+/* 响应式设计 */
+@media (max-width: 576px) {
+  .jd-homepage {
+    margin: 15px;
+    margin-top: 80px;
+  }
 
-// 中间主内容区域
-.main-section {
-  .promo-banner {
-    background: linear-gradient(45deg, #52c41a, #73d13d);
-    border-radius: 8px;
+  .main-content {
     padding: 20px;
-    margin-bottom: 20px;
-    position: relative;
-    height: 100%;
-
-    .banner-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .banner-text {
-        color: white;
-
-        h3 {
-          margin: 0 0 10px 0;
-          font-size: 24px;
-        }
-
-        p {
-          margin: 5px 0;
-          font-size: 16px;
-        }
-      }
-
-      .banner-image {
-        position: relative;
-
-        .fridge-img {
-          width: 120px;
-          height: 90px;
-          object-fit: cover;
-        }
-
-        .flower-decoration {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          font-size: 20px;
-        }
-      }
-    }
-
+    margin-top: 30px;
   }
 
-  .subsidy-section,
-  .live-section,
-  .seckill-section {
-    background: white;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
+  .banner {
+    height: 150px;
 
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
+    .centerBox .title {
+      font-size: 22px;
+    }
 
-      h3 {
-        margin: 0;
-        font-size: 18px;
-        color: #333;
-      }
-
-      .official-tag,
-      .live-tag,
-      .seckill-tag {
-        background: #e1251b;
-        color: white;
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-      }
+    .centerBox .tagUl {
+      font-size: 16px;
+      margin-top: 15px;
     }
   }
 
-
-
-
-
-}
-
-.user-sidebar {
-  height: 100%;
-
-  * {
-    font-size: 20px !important;
-  }
-}
-
-// 响应式设计
-@media (max-width: 1200px) {
-  .main-content .content-wrapper {
-    grid-template-columns: 180px 1fr 220px;
-    gap: 15px;
-  }
-}
-
-@media (max-width: 768px) {
-  .main-content .content-wrapper {
-    grid-template-columns: 1fr;
+  .user-sidebar .publish-goods {
+    height: 45px;
+    font-size: 14px;
   }
 
-  .category-sidebar,
-  .user-sidebar {
-    display: none;
-  }
-
-  .header .header-content {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .search-section {
-    width: 100%;
+  .myTab {
+    font-size: 14px;
+    margin-top: 20px;
   }
 }
 </style>
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue b/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue
index a8a9ac2..961e204 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue
@@ -1,135 +1,147 @@
 <template>
-    <!-- 左侧分类导航 -->
-    <aside class="category-sidebar">
-        <ul class="category-list">
-            <li class="category-item" style="color: #E02020;"><img src="../img/hot.svg" style="margin-right: 10px;"
-                    alt=""> 热门推荐 / 活动促销</li>
-            <li v-for="category in categories" :key="category.id" class="category-item"
-                @mouseenter="showProductList(category)" @mouseleave="hideProductList">
-                <span class="category-icon"> <img style="width: 24px;height: 24px;" :src="category.icon" alt=""> </span>
-                <span class="category-name">{{ category.first_level_name }}</span>
-                <span style="display: flex;margin-left: 0px;padding-left: 0px;">|</span>
-                <div class="menu-item">
-                    <span v-for="(secondary, index) in category.secondaryClassification" :key="secondary.id">
-                        {{ secondary.second_level_name }}{{ index < category.secondaryClassification.length - 1 ? ' / '
-                            : '' }} </span>
-                </div>
-            </li>
-        </ul>
-        <transition name="slide-fade">
-            <!-- v-if="currentCategory" -->
-            <div v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
-                element-loading-background="rgba(255, 255, 255, 0.8)" class="rightBox" v-if="currentCategory"
-                @mouseenter="keepProductList" @mouseleave="hideProductList">
-                <div class="rightBox-content">
-                    <!-- 二级菜单标题 -->
-                    <div class="secondary-menu">
-                        <div v-for="secondary in currentCategory.secondaryClassification" :key="secondary.id"
-                            class="secondary-item" :class="{ active: selectedSecondary === secondary }"
-                            @mouseenter="selectSecondary(secondary)">
-                            {{ secondary.second_level_name }}
-                        </div>
-                    </div>
+  <!-- 左侧分类导航 -->
+  <aside class="category-sidebar">
+    <ul class="category-list">
+      <li class="category-item special-item">
+        <img src="../img/hot.svg" alt="热门推荐">
+        热门推荐 / 活动促销
+      </li>
+      <li v-for="category in categories" :key="category.id" class="category-item"
+        @mouseenter="showProductList(category)" @mouseleave="hideProductList"
+        :class="{ 'category-item-active': currentCategory && currentCategory.id === category.id }">
+        <span class="category-icon">
+          <img :src="category.icon" :alt="category.first_level_name">
+        </span>
+        <span class="category-name">{{ category.first_level_name }}</span>
+        <span class="category-divider">|</span>
+        <div class="menu-item">
+          <span v-for="(secondary, index) in category.secondaryClassification" :key="secondary.id">
+            {{ secondary.second_level_name }}{{ index < category.secondaryClassification.length - 1 ? ' / ' : '' }}
+          </span>
+        </div>
+        <span class="category-arrow">›</span>
+      </li>
+    </ul>
 
-                    <!-- 三级和四级菜单内容 -->
-                    <div class="menu-content">
-                        <!-- 如果有选中的二级菜单且有三级菜单，显示京东风格的分类区域 -->
-                        <div v-if="selectedSecondary && selectedSecondary.thirdClassification && selectedSecondary.thirdClassification.length > 0"
-                            class="jd-style-menu">
-                            <div v-for="third in selectedSecondary.thirdClassification" :key="third.id"
-                                class="category-section">
-                                <!-- 只有当有四级菜单时才显示三级菜单标题 -->
-                                <div v-if="third.product_list && third.product_list.length > 0" class="section-header">
-                                    <span class="section-title">{{ third.third_level_name }}</span>
-                                    <span class="section-arrow">></span>
-                                </div>
-                                <div class="section-content">
-                                    <!-- 如果有四级菜单（product_list），直接显示所有四级菜单项 -->
-                                    <div v-if="third.product_list && third.product_list.length > 0"
-                                        class="product-grid">
-                                        <div @click="goSearch(product)" v-for="(product, index) in third.product_list"
-                                            :key="product.id"
-                                            class="product-tag">
-                                            {{ product.first_level_name }}
-                                        </div>
-                                    </div>
-                                    <!-- 如果没有四级菜单，将三级菜单项视为四级菜单项显示 -->
-                                    <div v-else class="product-grid">
-                                        <div @click="openTalk" class="product-tag ">
-                                            {{ third.third_level_name }}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- 如果没有三级菜单，显示二级菜单项 -->
-                        <div v-else-if="selectedSecondary" class="jd-style-menu">
-                            <div class="category-section">
-                                <div class="section-header">
-                                    <span class="section-title">{{ selectedSecondary.second_level_name }}</span>
-                                    <span class="section-arrow">></span>
-                                </div>
-                                <div class="section-content">
-                                    <div class="product-grid">
-                                        <div class="product-tag hot-tag">
-                                            {{ selectedSecondary.second_level_name }}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- 默认：显示所有二级菜单项 -->
-                        <div v-else class="jd-style-menu">
-                            <div v-for="secondary in currentCategory.secondaryClassification" :key="secondary.id"
-                                class="category-section">
-                                <div class="section-header">
-                                    <span class="section-title">{{ secondary.second_level_name }}</span>
-                                    <span class="section-arrow">></span>
-                                </div>
-                                <div class="section-content">
-                                    <div class="product-grid">
-                                        <div class="product-tag ">
-                                            {{ secondary.second_level_name }}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+    <transition name="slide-fade">
+      <div v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(255, 255, 255, 0.8)" class="rightBox" v-if="currentCategory"
+        @mouseenter="keepProductList" @mouseleave="hideProductList">
+        <div class="rightBox-content">
+          <!-- 二级菜单标题 -->
+          <div class="secondary-menu">
+            <div v-for="secondary in currentCategory.secondaryClassification" :key="secondary.id" class="secondary-item"
+              :class="{
+                active: selectedSecondary === secondary,
+                'has-children': secondary.thirdClassification && secondary.thirdClassification.length > 0
+              }"
+              @mouseenter="selectSecondary(secondary)"
+              @click="handleSecondaryClick(secondary)">
+              {{ secondary.second_level_name }}
+              <span v-if="secondary.thirdClassification && secondary.thirdClassification.length > 0" class="item-arrow">›</span>
             </div>
-        </transition>
-        <Talk></Talk>
-    </aside>
+          </div>
+
+          <!-- 三级和四级菜单内容 -->
+          <div class="menu-content">
+            <!-- 如果有选中的二级菜单且有三级菜单，显示京东风格的分类区域 -->
+            <div
+              v-if="selectedSecondary && selectedSecondary.thirdClassification && selectedSecondary.thirdClassification.length > 0"
+              class="jd-style-menu">
+              <div v-for="third in selectedSecondary.thirdClassification" :key="third.id" class="category-section">
+                <!-- 只有当有四级菜单时才显示三级菜单标题 -->
+                <div v-if="third.product_list && third.product_list.length > 0" class="section-header">
+                  <span class="section-title">{{ third.third_level_name }}</span>
+                  <span class="section-arrow">›</span>
+                </div>
+                <div class="section-content">
+                  <!-- 如果有四级菜单（product_list），直接显示所有四级菜单项 -->
+                  <div v-if="third.product_list && third.product_list.length > 0" class="product-grid">
+                    <div @click="goSearch(product)" v-for="(product, index) in third.product_list" :key="product.id"
+                      class="product-tag">
+                      {{ product.first_level_name }}
+                    </div>
+                  </div>
+                  <!-- 如果没有四级菜单，将三级菜单项视为四级菜单项显示 -->
+                  <div v-else class="product-grid">
+                    <div @click="openTalk" class="product-tag special-tag">
+                      {{ third.third_level_name }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 如果没有三级菜单，显示二级菜单项 -->
+            <div v-else-if="selectedSecondary" class="jd-style-menu">
+              <div class="category-section">
+                <div class="section-header">
+                  <span class="section-title">{{ selectedSecondary.second_level_name }}</span>
+                  <span class="section-arrow">›</span>
+                </div>
+                <div class="section-content">
+                  <div class="product-grid">
+                    <div class="product-tag special-tag" @click="goSearch(selectedSecondary)">
+                      {{ selectedSecondary.second_level_name }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 默认：显示所有二级菜单项 -->
+            <div v-else class="jd-style-menu">
+              <div v-for="secondary in currentCategory.secondaryClassification" :key="secondary.id"
+                class="category-section">
+                <div class="section-header">
+                  <span class="section-title">{{ secondary.second_level_name }}</span>
+                  <span class="section-arrow">›</span>
+                </div>
+                <div class="section-content">
+                  <div class="product-grid">
+                    <div class="product-tag" @click="goSearch(secondary)">
+                      {{ secondary.second_level_name }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <Talk></Talk>
+  </aside>
 </template>
+
 <script>
 import { reqNcMatchMenu, reqSearch } from '@/api/ncmatch';
 import { buildDynamicStructure } from './buildNcmatchTree';
 import Talk from '@/views/homePage/dialog/talk/index.vue';
 import eventBus from '@/utils/eventBus'
+
 export default {
-    name: 'menuAside',
-    components: {
-        Talk
-    },
-    data() {
-        return {
-            currentCategory: null,
-            selectedSecondary: null,
-            hideTimer: null,
-            categories: [],
-            loading: false,
-            keyword: '',
-            publish_type: '',
-        }
-    },
-    created() {
-        this.getCategories();
-    },
-    methods: {
-        performFormalSearch(keyword, type) {
+  name: 'menuAside',
+  components: {
+    Talk
+  },
+  data() {
+    return {
+      currentCategory: null,
+      selectedSecondary: null,
+      hideTimer: null,
+      categories: [],
+      loading: false,
+      keyword: '',
+      publish_type: '',
+      activeSection: null
+    }
+  },
+  created() {
+    this.getCategories();
+  },
+  methods: {
+    performFormalSearch(keyword, type) {
       console.log('=== 执行正式搜索开始 ===');
       console.log('搜索参数:', { keyword, type });
       console.log('当前路由:', this.$route.path);
@@ -168,379 +180,507 @@ export default {
         this.$message.error('搜索失败，请重试');
       });
     },
-        goSearch(product) {
-            console.log("product",product);
-            if(product.source=='search'){
+    goSearch(product) {
+      console.log("product", product);
 
-                      // 统一与 search 组件的行为：跳转到 /ncmatchHome/search 并触发正式搜索
-            const keywordFromItem = product && (product.first_level_name || product.product_name || product.second_level_name)
-            this.keyword = keywordFromItem || this.keyword || ''
-            this.publish_type = this.publish_type || '1'
-            this.$router.push({
-                path: '/ncmatchHome/search',
-                query: {
-                    keyword: this.keyword,
-                    publish_type: "1",
-                    display_page: 'list',
-                    current_page: 1,
-                    page_size: 8
-                }
-            }).catch(err => {
-                if (err && err.name !== 'NavigationDuplicated') {
-                    // ignore duplicate
-                    // console.error(err)
-                }
-            })
-            this.performFormalSearch(this.keyword, this.publish_type);
-            }else{
-                this.openTalk()
-            }
-            
-      
-        },
+      // 添加点击动画效果
+      const element = event.target;
+      element.classList.add('click-animation');
+      setTimeout(() => {
+        element.classList.remove('click-animation');
+      }, 300);
 
-        async openTalk() {
-            await this.hideProductList('quick')
-            this.$store.commit('setShowTalk', true);
-        },
-        getCategories() {
-            this.loading = true;
-            reqNcMatchMenu({ url_link: window.location.href }).then(res => {
-                this.loading = false;
-                if (res.status) {
-                    this.categories = buildDynamicStructure(res.data)
-                    console.log("测试", this.categories);
+      if (product.source == 'search') {
+        // 统一与 search 组件的行为：跳转到 /ncmatchHome/search 并触发正式搜索
+        const keywordFromItem = product && (product.first_level_name || product.product_name || product.second_level_name)
+        this.keyword = keywordFromItem || this.keyword || ''
+        this.publish_type = this.publish_type || '1'
+        this.$router.push({
+          path: '/ncmatchHome/search',
+          query: {
+            keyword: this.keyword,
+            publish_type: "1",
+            display_page: 'list',
+            current_page: 1,
+            page_size: 8
+          }
+        }).catch(err => {
+          if (err && err.name !== 'NavigationDuplicated') {
+            // ignore duplicate
+            // console.error(err)
+          }
+        })
+        this.performFormalSearch(this.keyword, this.publish_type);
+      } else {
+        this.openTalk()
+      }
+    },
 
-                    // this.categories = res.data.map(item => {
-                    //     return {
-                    //         name: item.name,
-                    //         icon: item.icon,
-                    //         product_list: item.product_list
-                    //     }
-                    // });
-                }
-            })
-        },
-        showProductList(category) {
-            // 清除之前的定时器
-            if (this.hideTimer) {
-                clearTimeout(this.hideTimer);
-                this.hideTimer = null;
-            }
-            this.currentCategory = category;
-            // 自动选中第一个二级菜单
-            if (category.secondaryClassification && category.secondaryClassification.length > 0) {
-                this.selectedSecondary = category.secondaryClassification[0];
-            } else {
-                this.selectedSecondary = null;
-            }
-        },
-        selectSecondary(secondary) {
-            this.selectedSecondary = secondary;
-        },
-
-        keepProductList() {
-            // 清除隐藏定时器，保持显示
-            if (this.hideTimer) {
-                clearTimeout(this.hideTimer);
-                this.hideTimer = null;
-            }
-        },
-        hideProductList(type) {
-            if (type === 'quick') {
-                this.currentCategory = null;
-                this.selectedSecondary = null;
-                this.hideTimer = null;
-                return
-            }
-            // 延迟隐藏，给用户时间移动到rightBox
-            this.hideTimer = setTimeout(() => {
-                this.currentCategory = null;
-                this.selectedSecondary = null;
-                this.hideTimer = null;
-            }, 200);
+    async openTalk() {
+      await this.hideProductList('quick')
+      this.$store.commit('setShowTalk', true);
+    },
+    getCategories() {
+      this.loading = true;
+      reqNcMatchMenu({ url_link: window.location.href }).then(res => {
+        this.loading = false;
+        if (res.status) {
+          this.categories = buildDynamicStructure(res.data)
+          console.log("测试", this.categories);
         }
+      })
+    },
+    showProductList(category) {
+      // 清除之前的定时器
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+      this.currentCategory = category;
+      // 自动选中第一个二级菜单
+      if (category.secondaryClassification && category.secondaryClassification.length > 0) {
+        this.selectedSecondary = category.secondaryClassification[0];
+      } else {
+        this.selectedSecondary = null;
+      }
+    },
+    selectSecondary(secondary) {
+      this.selectedSecondary = secondary;
+    },
+
+    handleSecondaryClick(secondary) {
+      this.selectSecondary(secondary);
+      // 添加点击反馈
+      if (event) {
+        const element = event.target;
+        element.classList.add('click-feedback');
+        setTimeout(() => {
+          element.classList.remove('click-feedback');
+        }, 300);
+      }
+    },
+
+    keepProductList() {
+      // 清除隐藏定时器，保持显示
+      if (this.hideTimer) {
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+      }
+    },
+    hideProductList(type) {
+      if (type === 'quick') {
+        this.currentCategory = null;
+        this.selectedSecondary = null;
+        this.hideTimer = null;
+        return
+      }
+      // 延迟隐藏，给用户时间移动到rightBox
+      this.hideTimer = setTimeout(() => {
+        this.currentCategory = null;
+        this.selectedSecondary = null;
+        this.hideTimer = null;
+      }, 200);
     }
+  }
 }
 </script>
+
 <style scoped lang="scss">
-.menu-item {
-    flex: 1;
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    /* 确保flex子项可以收缩 */
-}
-
-// 左侧分类导航
 .category-sidebar {
-    position: relative;
-    background-color: #f8fbfe;
-    height: 100%;
-    border-radius: 10px;
-    // padding: 15px;
-    padding: 5px;
-
-    .category-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-
-        .category-item {
-            display: flex;
-            margin-bottom: 10px;
-            align-items: center;
-            gap: 10px;
-            padding: 4px 0;
-            cursor: pointer;
-            transition: all 0.3s;
-            padding: 0 10px;
-
-            &:hover {
-                color: #2c96fc !important;
-                background: #c3daee !important;
-            }
-
-            &:last-child {
-                border-bottom: none;
-            }
-
-            .category-icon {
-
-                width: 20px;
-                text-align: center;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-
-            .category-name {
-                // font-size: 14px;
-                font-size: 16px;
-            }
-        }
-    }
+  position: relative;
+  background-color: #f8fbfe;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  height: 100%;
+  border-radius: 10px;
+  padding: 15px 5px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-@media (max-width: 768px) {
-    .main-content .content-wrapper {
-        grid-template-columns: 1fr;
+.category-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+
+  .category-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    border-radius: 6px;
+    margin-bottom: 8px;
+    position: relative;
+
+    &:hover {
+      color: #2c96fc !important;
+      background: #e6f3ff !important;
+      transform: translateX(5px);
+      box-shadow: 0 2px 8px rgba(44, 150, 252, 0.2);
     }
 
-    .category-sidebar,
-    .user-sidebar {
-        display: none;
+    &.category-item-active {
+      color: #2c96fc !important;
+      background: #e6f3ff !important;
+      border-right: 3px solid #2c96fc;
     }
 
-    .header .header-content {
-        flex-direction: column;
-        gap: 10px;
+    &.special-item {
+      color: #E02020;
+      font-weight: 600;
+
+      img {
+        margin-right: 8px;
+        width: 18px;
+        height: 18px;
+      }
     }
 
-    .search-section {
+    .category-icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
         width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transition: transform 0.3s ease;
+      }
     }
+
+    &:hover .category-icon img {
+      transform: scale(1.1);
+    }
+
+    .category-name {
+      font-size: 15px;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    .category-divider {
+      color: #e0e0e0;
+      margin: 0 4px;
+    }
+
+    .menu-item {
+      flex: 1;
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      color: #666;
+    }
+
+    .category-arrow {
+      color: #ccc;
+      font-size: 16px;
+      font-weight: bold;
+      transition: transform 0.3s ease, color 0.3s ease;
+    }
+
+    &:hover .category-arrow {
+      color: #2c96fc;
+      transform: translateX(3px);
+    }
+  }
 }
 
 .rightBox {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: 900px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  padding: 20px;
+  min-height: 400px;
+  margin-left: 8px;
+  overflow: visible;
+  border: 1px solid #e8e8e8;
+  animation: fadeInScale 0.3s ease;
+
+  &::before {
+    content: '';
     position: absolute;
-    left: 100%;
+    left: -10px;
     top: 0;
-    width: 1000px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    z-index: 9999;
-    padding: 25px;
-   min-height: 350px;
-    margin-left: 10px;
-    overflow: visible;
-    white-space: nowrap;
+    width: 10px;
+    height: 100%;
+    background: transparent;
+  }
 
-    /* 添加一个透明的连接区域，防止鼠标移动时意外消失 */
-    &::before {
-        content: '';
-        position: absolute;
-        left: -10px;
-        top: 0;
-        width: 10px;
-        height: 100%;
-        background: transparent;
+  .rightBox-content {
+    height: 100%;
+
+    .secondary-menu {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid #f0f0f0;
+
+      .secondary-item {
+        padding: 8px 16px;
+        background: #f5f7fa;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+          transition: left 0.5s;
+        }
+
+        &:hover::before {
+          left: 100%;
+        }
+
+        &:hover,
+        &.active {
+          background: linear-gradient(to right, #275AFF, #2EBDFA);
+          color: #fff;
+          box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
+          transform: translateY(-2px);
+        }
+
+        &.has-children::after {
+          content: '';
+          position: absolute;
+          bottom: -2px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 0;
+          height: 2px;
+          background: #275AFF;
+          transition: width 0.3s ease;
+        }
+
+        &.active.has-children::after {
+          width: 80%;
+        }
+
+        &.click-feedback {
+          animation: subtle-pulse 0.3s ease;
+        }
+
+        .item-arrow {
+          font-size: 16px;
+          font-weight: bold;
+          transition: transform 0.3s ease;
+        }
+
+        &:hover .item-arrow,
+        &.active .item-arrow {
+          transform: translateX(3px);
+        }
+      }
     }
 
-    .rightBox-content {
+    .menu-content {
+      min-height: 280px;
+      max-height: 500px;
+      overflow-y: auto;
+      padding-right: 5px;
 
+      .jd-style-menu {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
 
-        .secondary-menu {
+        .category-section {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 15px;
 
-            line-height: 1.5;
+          .section-header {
             display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-            margin-bottom: 20px;
+            align-items: center;
+            min-width: 120px;
+            margin-right: 20px;
 
-            .secondary-item {
-                padding: 4px 8px;
-                background: #f8f9fa;
-                border-radius: 4px;
+            .section-title {
+              font-size: 15px;
+              font-weight: 600;
+              color: #333;
+              margin-right: 6px;
+            }
+
+            .section-arrow {
+              color: #999;
+              font-size: 12px;
+            }
+          }
+
+          .section-content {
+            flex: 1;
+
+            .product-grid {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 12px;
+
+              .product-tag {
+                padding: 8px 16px;
+                font-size: 14px;
+                color: #666;
                 cursor: pointer;
-                display: flex;
                 transition: all 0.3s ease;
-                font-size: 16px;
-                color: #333;
-                font-weight: 500;
-
-                &:hover,
-                &.active {
-                    background-color: #ffebf1;
-                    color: #ff0f23;
-                }
-            }
-        }
-
-        .menu-content {
-            min-height: 200px;
-            height: 100%;
-            max-height: calc(100vh - 280px);
-            overflow-y: auto;
-
-            .jd-style-menu {
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-                gap: 20px;
-
-                .category-section {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-
-                    .section-header {
-                        display: flex;
-                        align-items: center;
-
-
-                        .section-title {
-                            font-size: 16px;
-                            font-weight: 600;
-                            color: #333;
-                            margin-right: 8px;
-                        }
-
-                        .section-arrow {
-                            color: #999;
-                            font-size: 12px;
-                        }
-                    }
-
-                    .section-content {
-                        line-height: 1.5;
-
-                        .product-grid {
-                            display: flex;
-                            flex-wrap: wrap;
-                            gap: 10px;
-                            align-items: center;
-
-                            .product-tag {
-                                height: fit-content !important;
-                                font-size: 14px;
-                                color: #666;
-                                cursor: pointer;
-                                transition: all 0.3s ease;
-                                white-space: nowrap;
-                                position: relative;
-
-                                &:hover {
-                                    color: #e1251b;
-
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .hot-tag {
-                color: #e1251b !important;
-                border-color: #e1251b !important;
-                background: #fff5f5 !important;
-                font-weight: 500 !important;
+                border-radius: 20px;
+                background: #f8f9fa;
                 position: relative;
+                overflow: hidden;
+                border: 1px solid transparent;
 
-                &::after {
-                    content: '';
-                    position: absolute;
-                    bottom: -1px;
-                    left: 0;
-                    width: 100%;
-                    height: 2px;
-                    background: #e1251b;
-                    border-radius: 0 0 4px 4px;
+                &::before {
+                  content: '';
+                  position: absolute;
+                  top: 0;
+                  left: -100%;
+                  width: 100%;
+                  height: 100%;
+                  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
+                  transition: left 0.5s;
                 }
-            }
 
-            .product-list {
-                flex: 1;
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 12px;
-                align-content: start;
-                justify-content: center;
-
-                .product-item {
-                    width: fit-content;
-                    border-radius: 6px;
-                    text-align: center;
-                    transition: all 0.3s ease;
-                    cursor: pointer;
-
-                    &:hover {
-                        * {
-                            color: #2c96fc;
-                        }
-
-                    }
-
-                    .product-name {
-                        font-size: 14px;
-                        color: #333;
-                        font-weight: 500;
-                    }
+                &:hover::before {
+                  left: 100%;
                 }
+
+                &:hover {
+                  color: #275AFF;
+                  background: #f0f7ff;
+                  border-color: #275AFF;
+                  transform: translateY(-2px);
+                  box-shadow: 0 4px 8px rgba(39, 90, 255, 0.2);
+                }
+
+                &.click-animation {
+                  animation: subtle-bounce 0.3s ease;
+                }
+              }
+
+              .special-tag {
+                color: #275AFF !important;
+                border: 1px solid #275AFF !important;
+                background: #f0f7ff !important;
+                font-weight: 500 !important;
+
+                &:hover {
+                  color: #275AFF !important;
+                  background: #e0efff !important;
+                  box-shadow: 0 4px 8px rgba(39, 90, 255, 0.2) !important;
+                }
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 
-.category-sidebar {
-    position: relative;
+/* 动画定义 */
+@keyframes fadeInScale {
+  0% {
+    opacity: 0;
+    transform: scale(0.95) translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+
+@keyframes subtle-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes subtle-bounce {
+  0%, 20%, 60%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-3px);
+  }
+  80% {
+    transform: translateY(-1px);
+  }
 }
 
 /* 过渡动画样式 */
 .slide-fade-enter-active {
-    transition: all 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .slide-fade-leave-active {
-    transition: all 0.3s ease;
+  transition: all 0.2s ease;
 }
 
 .slide-fade-enter {
-    //   transform: translateX(-20px);
-    opacity: 0;
+  opacity: 0;
+  transform: translateX(10px);
 }
 
 .slide-fade-leave-to {
-    //   transform: translateX(-20px);
-    opacity: 0;
+  opacity: 0;
+  transform: translateX(10px);
 }
 
 .slide-fade-enter-to,
 .slide-fade-leave {
-    //   transform: translateX(0);
-    opacity: 1;
+  opacity: 1;
+  transform: translateX(0);
 }
-</style>
\ No newline at end of file
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .rightBox {
+    width: 800px;
+  }
+}
+
+@media (max-width: 992px) {
+  .rightBox {
+    width: 700px;
+  }
+}
+
+@media (max-width: 768px) {
+  .category-sidebar {
+    display: none;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/homePage/ncmatch/img/tt-banner.png b/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/img/tt-banner.png
similarity index 100%
rename from f/web-kboss/src/views/homePage/ncmatch/img/tt-banner.png
rename to f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/img/tt-banner.png
diff --git a/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue b/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
index 126c461..f0c76d8 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
@@ -1,6 +1,21 @@
 <template>
+  <div class="conter">
+    <div class="banner-box">
+      <div class="conter">
+        <div class="Toptitle">
+          供需广场
+        </div>
+        <div class="banner-title">
+          开元云供需对接广场，是企业级云服务合作核心阵地。围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，通过精准匹配打破信息壁垒。这里既能盘活企业闲置算力与云资源，又能快速对接所需技术服务与合作机会，助力企业降本增效，加速数字化与智能化转型。
+        </div>
+        <div class="btn">
+          <div class="btn-box" @click="sendInfo('2')">发布需求</div>
+          <div class="btn-box" @click="sendInfo('1')">发布商品</div>
+        </div>
+      </div>
+    </div>
     <div class="main-box">
-        <!-- <div style="margin-top: 25px;">
+      <!-- <div style="margin-top: 25px;">
             <span style="margin-top: 100px;" class="title">
                 <span class="leftText">
                     算力供需
@@ -8,70 +23,70 @@
                 <span class="rightText"> 广场</span></span>
         </div> -->
 
-        <!-- 发布商品/需求弹窗 -->
-        <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
-            :visible.sync="sendProductVisible">
-            <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
-            </sendProduct>
-        </el-dialog>
+      <!-- 发布商品/需求弹窗 -->
+      <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
+        :visible.sync="sendProductVisible">
+        <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
+        </sendProduct>
+      </el-dialog>
 
-        <!-- 审核提示弹窗 -->
-        <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
-            <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
-            <span slot="footer" class="dialog-footer">
-                <span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
-                    @click="goInfo">信息完善</el-button></span>
-            </span>
-        </el-dialog>
+      <!-- 审核提示弹窗 -->
+      <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
+        <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
+        <span slot="footer" class="dialog-footer">
+          <span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
+              @click="goInfo">信息完善</el-button></span>
+        </span>
+      </el-dialog>
 
-        <!-- 筛选条件区域 - 整合到一个卡片中 -->
-        <div class="filter-card">
-            <!-- <div class="filter-header">
+      <!-- 筛选条件区域 - 整合到一个卡片中 -->
+      <div class="filter-card">
+        <!-- <div class="filter-header">
                 <span class="filter-title">筛选条件</span>
             </div> -->
 
-            <div class="filter-content">
-                <!-- 发布类型 -->
-                <div class="filter-section">
-                    <div class="filter-label">发布类型</div>
-                    <div class="filter-options">
-                        <label class="filter-option" :class="{ active: publish_type === '1' }">
-                            <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
-                            <span class="option-text">企业商品</span>
-                        </label>
-                        <label class="filter-option" :class="{ active: publish_type === '2' }">
-                            <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
-                            <span class="option-text">企业需求</span>
-                        </label>
-                    </div>
-                </div>
+        <div class="filter-content">
+          <!-- 发布类型 -->
+          <div class="filter-section">
+            <div class="filter-label">发布类型</div>
+            <div class="filter-options">
+              <label class="filter-option" :class="{ active: publish_type === '1' }">
+                <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
+                <span class="option-text">企业商品</span>
+              </label>
+              <label class="filter-option" :class="{ active: publish_type === '2' }">
+                <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
+                <span class="option-text">企业需求</span>
+              </label>
+            </div>
+          </div>
 
-                <!-- 所属类别 -->
-                <div class="filter-section">
-                    <div class="filter-label">所属类别</div>
-                    <div class="filter-options">
-                        <span v-for="category in firstCategories" :key="category.id"
-                            :class="['filter-option', { active: activeFirstId === category.id }]"
-                            @click="selectFirstCategory(category.id)">
-                            {{ category.product_category || category.label }}
-                        </span>
-                    </div>
-                </div>
+          <!-- 所属类别 -->
+          <div class="filter-section">
+            <div class="filter-label">所属类别</div>
+            <div class="filter-options">
+              <span v-for="category in firstCategories" :key="category.id"
+                :class="['filter-option', { active: activeFirstId === category.id }]"
+                @click="selectFirstCategory(category.id)">
+                {{ category.product_category || category.label }}
+              </span>
+            </div>
+          </div>
 
-                <!-- 所属品类 -->
-                <div class="filter-section" v-if="secondCategories.length > 0">
-                    <div class="filter-label">所属品类</div>
-                    <div class="filter-options">
-                        <span v-for="category in secondCategories" :key="category.id"
-                            :class="['filter-option', { active: activeSecondId === category.id }]"
-                            @click="selectSecondCategory(category.id)">
-                            {{ category.product_category || category.label }}
-                        </span>
-                    </div>
-                </div>
+          <!-- 所属品类 -->
+          <div class="filter-section" v-if="secondCategories.length > 0">
+            <div class="filter-label">所属品类</div>
+            <div class="filter-options">
+              <span v-for="category in secondCategories" :key="category.id"
+                :class="['filter-option', { active: activeSecondId === category.id }]"
+                @click="selectSecondCategory(category.id)">
+                {{ category.product_category || category.label }}
+              </span>
+            </div>
+          </div>
 
-                <!-- 公司类别 -->
-                <!-- <div class="filter-section">
+          <!-- 公司类别 -->
+          <!-- <div class="filter-section">
                     <div class="filter-label">公司类别</div>
                     <div class="filter-options">
                         <span v-for="company in companies" :key="company.id"
@@ -81,25 +96,25 @@
                         </span>
                     </div>
                 </div> -->
-            </div>
         </div>
+      </div>
 
-        <!-- 产品列表 -->
-        <div class="product-card-container">
-            <div v-if="productList.length > 0">
-                <productCard type="supplyAndDemandSquare" :publish_type="publish_type"
-                    :productList="productList">
-                </productCard>
-                <el-pagination @current-change="handleCurrentChange" :page-size="page_size"
-                    layout="total, prev, pager, next" :total="total" style="width: 100%; text-align: center;">
-                </el-pagination>
-            </div>
-            <div v-else class="no-data">
-                <img style="width: 150px;height: 150px;" src="./img/empty.svg" alt="">
-                暂无数据
-            </div>
+      <!-- 产品列表 -->
+      <div class="product-card-container">
+        <div v-if="productList.length > 0">
+          <productCard type="supplyAndDemandSquare" :publish_type="publish_type" :productList="productList">
+          </productCard>
+          <el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
+            :total="total" style="width: 100%; text-align: center;">
+          </el-pagination>
         </div>
+        <div v-else class="no-data">
+          <img style="width: 150px;height: 150px;" src="./img/empty.svg" alt="">
+          暂无数据
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -107,415 +122,470 @@ import { reqGetSupplyAndDemandSquareList, reqCompanyCategorySearch, reqSupplyAnd
 import { mapGetters, mapState } from 'vuex'
 
 export default {
-    name: 'supplyAndDemandSquare',
-    components: {
-        productCard: () => import('@/views/homePage/ncmatch/mainPage/productCard/index.vue'),
-        sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
-    },
-    data() {
-        return {
-            page_size: 8,
-            current_page: 1,
-            typeList: [],
-            publish_type: '1',
-            selectedCategory: '',
-            selectedCompanies: [],
-            categories: [],
-            companies: [],
-            productList: [],
-            total: 0,
-            firstCategories: [],
-            secondCategories: [],
-            activeFirstId: null,
-            activeSecondId: null,
-            showTip: false,
-            sendProductVisible: false,
-        }
-    },
-    created() {
-        this.initAllData()
-    },
-    computed: {
-        isNcmatchHome() {
-            return window.location.href.includes('ncmatchHome')
-        },
-        ...mapGetters(["sidebar", "avatar", "device"]),
-        ...mapState({
-            isShowPanel: (state) => state.product.showHomeNav,
-            navIndex: (state) => state.product.navIndex,
-            gridObj: state => state.operationAnalysis.gridObj,
-            mybalance: state => state.user.mybalance,
-            logoutUrl: state => state.login.logoutUrl,
-            loginStateVuex: state => state.login.loginState,
-            logoInfoNew: state => state.product.logoInfoNew,
-        }),
-        loginState() {
-            const userId = sessionStorage.getItem('userId');
-            return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
-        },
-    },
-    methods: {
-        // 发布需求/商品方法
-        sendInfo(type) {
-            if (this.loginState) {
-                reqEnterpriseAuditInfoSearch({
-                    url_link: window.location.href,
-                }).then(res => {
-                    const dataList = res && res.data && res.data.data
-                    const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
-                    const roles = sessionStorage.getItem('jueseNew')
-                    const isCustomer = roles ? roles.includes('客户') : true
-
-                    if (hasAuditInfo && dataList[0]) {
-                        const auditStatus = dataList[0].audit_status
-
-                        if (auditStatus === 'pending') {
-                            this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
-                        } else if (auditStatus === 'rejected') {
-                            this.$message.warning('您的审核状态为驳回，请重新提交~')
-                        } else {
-                            this.publish_type = type
-                            this.sendProductVisible = true
-                        }
-                    } else if (!isCustomer) {
-                        this.publish_type = type
-                        this.sendProductVisible = true
-                    } else {
-                        this.showTip = true
-                    }
-                })
-            } else {
-                this.$router.push('/login')
-            }
-        },
-
-        // 发布成功回调
-        sendProductSuccess() {
-            this.sendProductVisible = false;
-            this.initData()
-        },
-
-        // 跳转到信息完善页面
-        goInfo() {
-            this.showTip = false
-            this.$router.push('/customer/approve')
-        },
-
-        handleCurrentChange(val) {
-            this.current_page = val
-            this.initData()
-        },
-
-        initAllData() {
-            this.init_product_category().then(() => {
-                this.init_company_category().then(() => {
-                    this.initData()
-                })
-            })
-        },
-
-        init_company_category() {
-            return reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
-                if (res.status) {
-                    this.company_category_list = []
-                    for (let item of res.data) {
-                        this.company_category_list.push({
-                            label: item.company_category,
-                            value: item.company_category
-                        })
-                    }
-                    this.companies = this.company_category_list
-                }
-                return res
-            })
-        },
-
-        // 选中一级分类
-        selectFirstCategory(id) {
-            if (id === this.activeFirstId) return
-            this.activeFirstId = id
-            this.activeSecondId = null
-            this.selectedCategory = id
-            this.loadSecondCategories(id)
-            this.initData()
-        },
-
-        // 选中二级分类
-        selectSecondCategory(id) {
-            if (id === this.activeSecondId) return
-            this.activeSecondId = id
-            this.selectedCategory = id
-            this.initData()
-        },
-
-        init_product_category() {
-            return reqSupplyAndDemandFirstCategory({to_page: 'show', url_link: window.location.href }).then(res => {
-                if (res.status) {
-                    this.firstCategories = Array.isArray(res.data) ? res.data : []
-                    if (this.firstCategories.length > 0) {
-                        this.activeFirstId = this.firstCategories[0].id
-                        this.selectedCategory = this.activeFirstId
-                        this.activeSecondId = null
-                        return this.loadSecondCategories(this.activeFirstId)
-                    } else {
-                        this.activeFirstId = null
-                        this.activeSecondId = null
-                        this.selectedCategory = ''
-                        this.secondCategories = []
-                    }
-                }
-                return res
-            })
-        },
-
-        loadSecondCategories(firstId) {
-            return reqSupplyAndDemandFirstCategory({ to_page: 'show',url_link: window.location.href, first_level_id: firstId }).then(res => {
-                if (res.status) {
-                    this.secondCategories = Array.isArray(res.data) ? res.data : []
-                } else {
-                    this.secondCategories = []
-                }
-                return res
-            })
-        },
-
-        handleTypeChange() {
-            console.log('切换到:', this.publish_type)
-            this.initData()
-        },
-
-        initData() {
-            let ploay = {
-                product_category: this.selectedCategory,
-                to_page: "square",
-                url_link: window.location.href,
-                page_size: this.page_size,
-                current_page: this.current_page,
-                company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(",") : "",
-                publish_type: this.publish_type
-            }
-            reqGetSupplyAndDemandSquareList(ploay).then(res => {
-                if (res.status) {
-                    if (res.data.length === 0) {
-                        this.productList = []
-                    } else {
-                        this.productList = res.data[0].product_list
-                    }
-                    this.total = res.data[0].total_count
-                }
-            })
-        },
-
-        selectCompany(companyId) {
-            const index = this.selectedCompanies.indexOf(companyId)
-            if (index > -1) {
-                this.selectedCompanies.splice(index, 1)
-            } else {
-                this.selectedCompanies.push(companyId)
-            }
-            this.initData()
-        },
+  name: 'supplyAndDemandSquare',
+  components: {
+    productCard: () => import('@/views/homePage/ncmatch/mainPage/productCard/index.vue'),
+    sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
+  },
+  data() {
+    return {
+      page_size: 8,
+      current_page: 1,
+      typeList: [],
+      publish_type: '1',
+      selectedCategory: '',
+      selectedCompanies: [],
+      categories: [],
+      companies: [],
+      productList: [],
+      total: 0,
+      firstCategories: [],
+      secondCategories: [],
+      activeFirstId: null,
+      activeSecondId: null,
+      showTip: false,
+      sendProductVisible: false,
     }
+  },
+  created() {
+    this.initAllData()
+  },
+  computed: {
+    isNcmatchHome() {
+      return window.location.href.includes('ncmatchHome')
+    },
+    ...mapGetters(["sidebar", "avatar", "device"]),
+    ...mapState({
+      isShowPanel: (state) => state.product.showHomeNav,
+      navIndex: (state) => state.product.navIndex,
+      gridObj: state => state.operationAnalysis.gridObj,
+      mybalance: state => state.user.mybalance,
+      logoutUrl: state => state.login.logoutUrl,
+      loginStateVuex: state => state.login.loginState,
+      logoInfoNew: state => state.product.logoInfoNew,
+    }),
+    loginState() {
+      const userId = sessionStorage.getItem('userId');
+      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
+    },
+  },
+  methods: {
+    // 发布需求/商品方法
+    sendInfo(type) {
+      if (this.loginState) {
+        reqEnterpriseAuditInfoSearch({
+          url_link: window.location.href,
+        }).then(res => {
+          const dataList = res && res.data && res.data.data
+          const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
+          const roles = sessionStorage.getItem('jueseNew')
+          const isCustomer = roles ? roles.includes('客户') : true
+
+          if (hasAuditInfo && dataList[0]) {
+            const auditStatus = dataList[0].audit_status
+
+            if (auditStatus === 'pending') {
+              this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
+            } else if (auditStatus === 'rejected') {
+              this.$message.warning('您的审核状态为驳回，请重新提交~')
+            } else {
+              this.publish_type = type
+              this.sendProductVisible = true
+            }
+          } else if (!isCustomer) {
+            this.publish_type = type
+            this.sendProductVisible = true
+          } else {
+            this.showTip = true
+          }
+        })
+      } else {
+        this.$router.push('/login')
+      }
+    },
+
+    // 发布成功回调
+    sendProductSuccess() {
+      this.sendProductVisible = false;
+      this.initData()
+    },
+
+    // 跳转到信息完善页面
+    goInfo() {
+      this.showTip = false
+      this.$router.push('/customer/approve')
+    },
+
+    handleCurrentChange(val) {
+      this.current_page = val
+      this.initData()
+    },
+
+    initAllData() {
+      this.init_product_category().then(() => {
+        this.init_company_category().then(() => {
+          this.initData()
+        })
+      })
+    },
+
+    init_company_category() {
+      return reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
+        if (res.status) {
+          this.company_category_list = []
+          for (let item of res.data) {
+            this.company_category_list.push({
+              label: item.company_category,
+              value: item.company_category
+            })
+          }
+          this.companies = this.company_category_list
+        }
+        return res
+      })
+    },
+
+    // 选中一级分类
+    selectFirstCategory(id) {
+      if (id === this.activeFirstId) return
+      this.activeFirstId = id
+      this.activeSecondId = null
+      this.selectedCategory = id
+      this.loadSecondCategories(id)
+      this.initData()
+    },
+
+    // 选中二级分类
+    selectSecondCategory(id) {
+      if (id === this.activeSecondId) return
+      this.activeSecondId = id
+      this.selectedCategory = id
+      this.initData()
+    },
+
+    init_product_category() {
+      return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href }).then(res => {
+        if (res.status) {
+          this.firstCategories = Array.isArray(res.data) ? res.data : []
+          if (this.firstCategories.length > 0) {
+            this.activeFirstId = this.firstCategories[0].id
+            this.selectedCategory = this.activeFirstId
+            this.activeSecondId = null
+            return this.loadSecondCategories(this.activeFirstId)
+          } else {
+            this.activeFirstId = null
+            this.activeSecondId = null
+            this.selectedCategory = ''
+            this.secondCategories = []
+          }
+        }
+        return res
+      })
+    },
+
+    loadSecondCategories(firstId) {
+      return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href, first_level_id: firstId }).then(res => {
+        if (res.status) {
+          this.secondCategories = Array.isArray(res.data) ? res.data : []
+        } else {
+          this.secondCategories = []
+        }
+        return res
+      })
+    },
+
+    handleTypeChange() {
+      console.log('切换到:', this.publish_type)
+      this.initData()
+    },
+
+    initData() {
+      let ploay = {
+        product_category: this.selectedCategory,
+        to_page: "square",
+        url_link: window.location.href,
+        page_size: this.page_size,
+        current_page: this.current_page,
+        company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(",") : "",
+        publish_type: this.publish_type
+      }
+      reqGetSupplyAndDemandSquareList(ploay).then(res => {
+        if (res.status) {
+          if (res.data.length === 0) {
+            this.productList = []
+          } else {
+            this.productList = res.data[0].product_list
+          }
+          this.total = res.data[0].total_count
+        }
+      })
+    },
+
+    selectCompany(companyId) {
+      const index = this.selectedCompanies.indexOf(companyId)
+      if (index > -1) {
+        this.selectedCompanies.splice(index, 1)
+      } else {
+        this.selectedCompanies.push(companyId)
+      }
+      this.initData()
+    },
+  }
 }
 </script>
 
 <style scoped lang="scss">
-.title {
-    color: #666 !important;
-    font-size: 36px;
-    margin: 25px;
+.conter{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.banner-box {
+  height: 700px!important;
+  background: url('./img/tt-banner.png') no-repeat ;
+  width: 100%;
+  padding-bottom: 200px;
 
-    .leftText {
-        background: linear-gradient(to right, #275AFF, #2EBDFA);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        display: inline-block;
+  .conter {
+    width: 700px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 100px 280px 0px;
+  }
+
+  .Toptitle {
+    font-size: 30px;
+    font-weight: 600;
+    margin-bottom: 18px;
+    color: #000;
+  }
+
+  .banner-title {
+    width: 700px;
+    font-size: 16px;
+    color: #8890ab;
+    line-height: 2 !important;
+  }
+
+  .btn{
+    display: flex;
+  }
+
+  .btn-box{
+    padding: 10px 20px;
+    background: linear-gradient(90deg, rgb(39, 90, 255), rgb(46, 189, 250));
+    border-radius: 14px;
+    color: #fff;
+    margin-right: 20px;
+    margin-top: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
     }
+  }
+}
+.title {
+  color: #666 !important;
+  font-size: 36px;
+  margin: 25px;
+
+  .leftText {
+    background: linear-gradient(to right, #275AFF, #2EBDFA);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+  }
 }
 
 .product-card-container {
-    margin-top: 30px;
-    width: 100%;
+  margin-top: 30px;
+  width: 100%;
 }
 
 .main-box {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    max-width: 1600px;
+  width: 90%;
+  // min-width: 1600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1600px;
 }
 
 /* 筛选卡片样式 */
 .filter-card {
-    width: 100%;
-    max-width: 1400px;
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    margin: 20px 0;
-    transition: all 0.3s ease;
-    overflow: hidden;
+  width: 100%;
+  max-width: 1400px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  margin: 20px 0;
+  transition: all 0.3s ease;
+  overflow: hidden;
 
-    &:hover {
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
-    }
+  &:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+  }
 }
 
 .filter-header {
-    padding: 20px 25px;
-    border-bottom: 1px solid #f0f0f0;
-    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
+  padding: 20px 25px;
+  border-bottom: 1px solid #f0f0f0;
+  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
 }
 
 .filter-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #111e52;
-    display: flex;
-    align-items: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: #111e52;
+  display: flex;
+  align-items: center;
 
-    &::before {
-        content: '';
-        display: inline-block;
-        width: 4px;
-        height: 16px;
-        background: linear-gradient(135deg, #275AFF, #2EBDFA);
-        border-radius: 2px;
-        margin-right: 10px;
-    }
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: linear-gradient(135deg, #275AFF, #2EBDFA);
+    border-radius: 2px;
+    margin-right: 10px;
+  }
 }
 
 .filter-content {
-    padding: 25px;
+  padding: 25px;
 }
 
 .filter-section {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 25px;
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 25px;
 
-    &:last-child {
-        margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .filter-label {
-    font-size: 14px;
-    color: #333;
-    font-weight: 500;
-    white-space: nowrap;
-    flex-shrink: 0;
-    line-height: 32px;
-    width: 80px;
-    margin-right: 20px;
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  line-height: 32px;
+  width: 80px;
+  margin-right: 20px;
 }
 
 .filter-options {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  flex: 1;
 }
 
 .filter-option {
-    position: relative;
-    padding: 8px 20px;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    font-size: 14px;
-    color: #666;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    background: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 80px;
-    text-align: center;
+  position: relative;
+  padding: 8px 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+  text-align: center;
 
-    &:hover {
-        border-color: #275AFF;
-        color: #275AFF;
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.2);
-    }
+  &:hover {
+    border-color: #275AFF;
+    color: #275AFF;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(39, 90, 255, 0.2);
+  }
 
-    &.active {
-        background: linear-gradient(135deg, #275AFF, #2EBDFA);
-        color: white;
-        border-color: #275AFF;
-        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
-    }
+  &.active {
+    background: linear-gradient(135deg, #275AFF, #2EBDFA);
+    color: white;
+    border-color: #275AFF;
+    box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
+  }
 
-    /* 隐藏原生radio */
-    input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
+  /* 隐藏原生radio */
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
 
-    .option-text {
-        font-weight: 500;
-        pointer-events: none;
-    }
+  .option-text {
+    font-weight: 500;
+    pointer-events: none;
+  }
 }
 
 .no-data {
-    min-height: 500px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 16px;
-    color: #7A82A0;
-    flex-direction: column;
+  min-height: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: #7A82A0;
+  flex-direction: column;
 }
 
 .el-pagination {
-    text-align: center;
-    margin-top: 30px;
+  text-align: center;
+  margin-top: 30px;
 }
 
 /* 响应式调整 */
 @media (max-width: 768px) {
-    .filter-card {
-        margin: 15px 10px;
-    }
+  .filter-card {
+    margin: 15px 10px;
+  }
 
-    .filter-content {
-        padding: 15px;
-    }
+  .filter-content {
+    padding: 15px;
+  }
 
-    .filter-section {
-        flex-direction: column;
-        margin-bottom: 20px;
-    }
+  .filter-section {
+    flex-direction: column;
+    margin-bottom: 20px;
+  }
 
-    .filter-label {
-        width: 100%;
-        margin-bottom: 10px;
-        margin-right: 0;
-    }
+  .filter-label {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0;
+  }
 
-    .filter-options {
-        width: 100%;
-        gap: 8px;
-    }
+  .filter-options {
+    width: 100%;
+    gap: 8px;
+  }
 
-    .filter-option {
-        padding: 6px 12px;
-        font-size: 12px;
-        min-width: 60px;
-    }
+  .filter-option {
+    padding: 6px 12px;
+    font-size: 12px;
+    min-width: 60px;
+  }
 }
 
 @media (max-width: 1200px) {
-    .filter-card {
-        max-width: calc(100% - 40px);
-        margin: 20px;
-    }
+  .filter-card {
+    max-width: calc(100% - 40px);
+    margin: 20px;
+  }
 }
 </style>