diff --git a/f/web-kboss/src/api/ncmatch/index.js b/f/web-kboss/src/api/ncmatch/index.js
index b7f2760..5945551 100644
--- a/f/web-kboss/src/api/ncmatch/index.js
+++ b/f/web-kboss/src/api/ncmatch/index.js
@@ -37,4 +37,14 @@ export function reqPublishProductSearchFirstPage(data) {
     headers: { 'Content-Type': 'application/json' },
     data
   })
-}
\ No newline at end of file
+}
+
+//算力供需广场 获取列表
+export function reqGetSupplyAndDemandSquareList(data) {
+  return request({
+    url: '/product/get_supply_and_demand_square_list.dspy',
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    data
+  })
+}
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/cloud.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/cloud.png
new file mode 100644
index 0000000..a815277
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/cloud.png differ
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computer.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computer.png
new file mode 100644
index 0000000..c661502
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computer.png differ
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computing.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computing.png
new file mode 100644
index 0000000..96467b8
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computing.png differ
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/logo.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/logo.png
new file mode 100644
index 0000000..32fad15
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/logo.png differ
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/net.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/net.png
new file mode 100644
index 0000000..ead9da9
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/net.png differ
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/nvidia.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/nvidia.png
new file mode 100644
index 0000000..65133dc
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/nvidia.png differ
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/ying.png b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/ying.png
new file mode 100644
index 0000000..8486e61
Binary files /dev/null and b/f/web-kboss/src/views/homePage/ncmatch/mainPage/img/ying.png differ
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 6aa051d..83fbc7b 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue
@@ -104,12 +104,12 @@ export default Vue.extend({
         { name: '全部频道', icon: '📱', color: 'rainbow' }
       ],
       categories: [
-        { name: '云', icon: '🏠', product_list: ['百度云'] },
-        { name: '国产算力', icon: '📱', product_list: ['昇腾910B', 'P800', '其他'] },
-        { name: 'NVIDIA', icon: '💻', product_list: ['3090', '4090', '5080', '5090'] },
-        { name: '网', icon: '🪑', product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
-        { name: '一体机', icon: '👕', product_list: ['昆仑芯', '天数智芯'] },
-        { name: '硬件', icon: '💄', product_list: ['机器人', 'AR眼镜'] },
+        { 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眼镜'] },
       ]
     }
   },
@@ -147,6 +147,7 @@ export default Vue.extend({
         <div class="logo-section">
           <div class="logo">
             <!-- <span class="logo-text">京东</span> -->
+             <img src="./img/logo.png" alt="">
           </div>
         </div>
 
@@ -175,7 +176,7 @@ export default Vue.extend({
         <aside class="category-sidebar">
           <ul class="category-list">
             <li v-for="category in categories" :key="category.name" class="category-item">
-              <span class="category-icon">{{ category.icon }}</span>
+              <span class="category-icon"> <img style="width: 24px;height: 24px;" :src=" category.icon" alt=""> </span>
               <span class="category-name">{{ category.name }}</span>
               <span style="display: flex;margin-left: 0px;padding-left: 0px;">|</span>
               <div class="menu-item">
@@ -207,7 +208,7 @@ export default Vue.extend({
 
         <!-- 右侧用户信息栏 -->
         <aside class="user-sidebar" style="background-color: #f8fbfe;padding: 10px;padding-top: 20px;">
-          <span class="publish-goods"> <img src="./img/gc.svg" alt=""> 算力供需广场</span>
+          <span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')">  算力供需广场</span>
           <span class="publish-goods">发布需求</span>
           <span class="publish-goods" @click="sendProductVisible = true">发布商品</span>
 
@@ -238,6 +239,7 @@ export default Vue.extend({
 </template>
 
 <style scoped lang="scss">
+
 .userBtn {
   display: flex;
   justify-content: space-between;
@@ -410,22 +412,25 @@ export default Vue.extend({
   padding: 10px 0;
 
   .header-content {
-
     max-width: 1400px;
     margin: 0 auto;
     margin-top: 15px;
-    margin-left: 200px;
-    margin-right: 200px;
     display: flex;
     align-items: center;
-    gap: 20px;
+    // gap: 20px;
+
   }
 
   .logo-section {
+margin: 0 50px;
+img{
+  height: 70px;
+  width: 80px;
+}
     .logo {
       display: flex;
       align-items: center;
-      gap: 5px;
+      height: 100%;
 
       .logo-text {
         font-size: 24px;
@@ -567,9 +572,12 @@ export default Vue.extend({
       }
 
       .category-icon {
-        font-size: 16px;
+  
         width: 20px;
         text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
       .category-name {
@@ -666,7 +674,9 @@ export default Vue.extend({
 
 }
 
-
+.user-sidebar{
+  height: 100%;
+}
 
 // 响应式设计
 @media (max-width: 1200px) {
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/productCard/index.vue b/f/web-kboss/src/views/homePage/ncmatch/mainPage/productCard/index.vue
index 182571f..af427d0 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/mainPage/productCard/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/mainPage/productCard/index.vue
@@ -1,7 +1,6 @@
 <template>
   <!-- 产品列表 -->
 <div>
-  type:{{ type }}
   <ul v-if="type === 'homePage'" class="productListContent" style="padding: 16px;">
     <li  class="product-item" v-for="item in productList" :key="item.id">
       <div class="product-image">
@@ -10,10 +9,10 @@
       <div class="product-info">
         <h3 class="product-name">{{ item.name }}</h3>
         <div class="product-specs">
-          <!-- <div class="spec-item" v-if="type === 'homePage'">
+          <div class="spec-item" v-if="type === 'homePage'">
             <span class="spec-label">企业名称:</span>
             <span class="spec-value">{{ item.company_name }}</span>
-          </div> -->
+          </div>
           <div class="spec-item">
             <span class="spec-label">CPU:</span>
             <span class="spec-value">{{ item.cpu }}</span>
@@ -46,9 +45,6 @@
         <button class="consult-btn" @click="openTalk">立即咨询</button>
       </div>
     </li>
-    <li>
-
-    </li>
   </ul>
   <ul v-else-if="type === 'supplyAndDemandSquare'" class="productListContent" style="padding: 16px;">
     <li  class="product-item" v-for="item in productList" :key="item.id">
@@ -58,44 +54,31 @@
       <div class="product-info">
         <h3 class="product-name">{{ item.name }}</h3>
         <div class="product-specs">
-          <!-- <div class="spec-item" v-if="type === 'homePage'">
+          <div class="spec-item" >
             <span class="spec-label">企业名称:</span>
             <span class="spec-value">{{ item.company_name }}</span>
-          </div> -->
-          <div class="spec-item">
-            <span class="spec-label">CPU:</span>
-            <span class="spec-value">{{ item.cpu }}</span>
           </div>
           <div class="spec-item">
-            <span class="spec-label">内存:</span>
-            <span class="spec-value">{{ item.memory }}</span>
+            <span class="spec-label">所属类别:</span>
+            <span class="spec-value">{{ item.company_type }}</span>
           </div>
           <div class="spec-item">
-            <span class="spec-label">GPU:</span>
-            <span class="spec-value">{{ item.gpu }}</span>
+            <span class="spec-label">更新日期:</span>
+            <span class="spec-value">{{ item.update_time }}</span>
           </div>
           <div class="spec-item">
-            <span class="spec-label">系统盘:</span>
-            <span class="spec-value">{{ item.sys_disk }}</span>
+            <span class="spec-label">需求描述:</span>
+            <span class="spec-value">{{ item.requirement_summary }}</span>
           </div>
-          <div class="spec-item">
-            <span class="spec-label">数据盘:</span>
-            <span class="spec-value">{{ item.data_disk }}</span>
-          </div>
-          <div class="spec-item">
-            <span class="spec-label">网卡:</span>
-            <span class="spec-value">{{ item.net_card }}</span>
-          </div>
-        </div>
-        <div class="product-price">
-          <span class="price">¥{{ item.price }}</span>
-          <span class="price-unit">/台/月 (可短租)</span>
-        </div>
-        <button class="consult-btn" @click="openTalk">立即咨询</button>
-      </div>
-    </li>
-    <li>
 
+
+ 
+        </div>
+     <div style="display: flex;justify-content: space-between;align-items: center;">
+      
+      <button class="consult-btn" @click="openTalk">立即咨询</button> <span class="detail-btn">详情>></span>
+     </div>
+      </div>
     </li>
   </ul>
   <Talk></Talk>
@@ -134,7 +117,6 @@ export default {
   max-width: 1400px;
   margin: 0 auto;
   background-color: white;
-  border: 1px solid red;
 
   .product-item {
 
@@ -241,6 +223,13 @@ export default {
           box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
         }
       }
+      .detail-btn{
+        font-size: 14px;
+        color: #275AFF;
+        cursor: pointer;
+       min-width: 50px;
+       margin-left: 25px;
+      }
     }
   }
 }
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 76aa3b5..a5c76fc 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
@@ -1,15 +1,44 @@
 <template>
     <div class="main-box">
-        <div style="width: 1400px;border: 1px solid red;">
+
+        <div style="margin-top: 25px;">
+            <span style="margin-top: 100px;" class="title">
+
+                <span class="leftText">
+                    算力供需
+                </span>
+
+
+
+                <span class="rightText"> 广场</span></span>
+
+        </div>
+   
+
+        <div style="width: 1400px;">
             <div class="category-filter">
+                     <!-- 新增的需求和商品radio按钮组 -->
+        <div class="radio-group-container">
+            <div class="radio-group">
+                <label class="radio-item" :class="{ active: selectedType === 'product' }">
+                    <input type="radio" v-model="selectedType" value="product" @change="handleTypeChange">
+                    <span class="radio-text">企业商品</span>
+                </label>
+                <label class="radio-item" :class="{ active: selectedType === 'demand' }">
+                    <input type="radio" v-model="selectedType" value="demand" @change="handleTypeChange">
+                    <span class="radio-text">企业需求</span>
+                </label>
+           
+            </div>
+        </div>
                 <!-- 所属类别 -->
                 <div class="category-section">
                     <div class="category-title">所属类别</div>
                     <div class="category-tags">
-                        <span v-for="category in categories" :key="category.id"
-                            :class="['category-tag', { active: selectedCategory === category.id }]"
-                            @click="selectCategory(category.id)">
-                            {{ category.name }}
+                        <span v-for="category in typeList" :key="category.id"
+                            :class="['category-tag', { active: selectedCategory === category.value }]"
+                            @click="selectCategory(category.value)">
+                            {{ category.label }}
                         </span>
                     </div>
                 </div>
@@ -25,18 +54,20 @@
                         </span>
                     </div>
                 </div>
-                                 <!-- 产品 -->
-                                  {{ productList.length > 0}}
-                 <div class="product-card-container">
-                     <productCard v-if="productList.length > 0" type="supplyAndDemandSquare" :productList="productList"></productCard>
-                     <div v-else class="no-data">暂无数据</div>
-                 </div>
+                <!-- 产品 -->
+
+                <div class="product-card-container">
+                    <productCard v-if="productList.length > 0" type="supplyAndDemandSquare" :productList="productList">
+                    </productCard>
+                    <div v-else class="no-data">暂无数据</div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import { reqGetProductCategorySearch, reqGetSupplyAndDemandSquareList  } from '@/api/ncmatch'
 export default {
     name: 'supplyAndDemandSquare',
     components: {
@@ -44,7 +75,9 @@ export default {
     },
     data() {
         return {
-            selectedCategory: 'category2', // 默认选中项
+            typeList:[],
+            selectedType: 'product', // 默认选中需求
+            selectedCategory: '', // 默认选中项
             selectedCompany: 'company1', // 默认选中项
             categories: [
                 { id: 'category1', name: '云' },
@@ -68,65 +101,104 @@ export default {
             productList: []
         }
     },
+    created() {
+        this.init_product_category()
+    },
     methods: {
         selectCategory(categoryId) {
+            if(categoryId===this.selectedCategory) return;
             this.selectedCategory = categoryId
+            this.initData(this.selectedCategory)
+        },
+        init_product_category(product_category) {
+            reqGetProductCategorySearch({ userid: '9KVhsVCJsW_29q3hRhMAr' }).then(res => {
+                if (res.status) {
+                    let list = []   
+                    for(let item of res.data){
+                        if(item.parentid === null){
+                            list.push({
+                            label:item.product_category,
+                            value:item.id
+                        })
+                        }
+                    
+                    }
+                    this.selectedCategory = list[0].value
+                    this.typeList = list
+                    this.initData(this.selectedCategory)
+                    console.log("2@@", this.typeList);
+
+                }
+            })
+        },
+        handleTypeChange() {
+            // 处理类型切换逻辑
+            console.log('切换到:', this.selectedType)
+            // 这里可以根据类型重新加载数据
+        },
+        initData(product_category) {
+            reqGetSupplyAndDemandSquareList({product_category}).then(res => {
+                if (res.status) {
+
+                }
+            })
+
         },
         selectCompany(companyId) {
             this.selectedCompany = companyId
         },
-                 getProductList() {
-             this.productList = [
-                 {
-                     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-A100',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 8000,
-                     cpu: 'AMD EPYC 7542 32 C * 2',
-                     memory: '128G DDR4-3200 * 8',
-                     gpu: 'NVIDIA-A100-80GB * 8',
-                     sys_disk: '1.92T SATA SSD * 2 (Raid)',
-                     data_disk: '7.68T U.2 NVMe SSD * 1',
-                     net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-                 },
-                 {
-                     id: 3,
-                     name: '昇腾910B',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 5000,
-                     cpu: 'Kunpeng 920 64 C * 2',
-                     memory: '64G DDR4-3200 * 8',
-                     gpu: '昇腾910B-32GB * 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: 4,
-                     name: '昆仑芯P800',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 4000,
-                     cpu: 'Kunpeng 920 64 C * 2',
-                     memory: '64G DDR4-3200 * 8',
-                     gpu: '昆仑芯P800-16GB * 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'
-                 }
-             ]
-         }
+        getProductList() {
+            this.productList = [
+                {
+                    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-A100',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    price: 8000,
+                    cpu: 'AMD EPYC 7542 32 C * 2',
+                    memory: '128G DDR4-3200 * 8',
+                    gpu: 'NVIDIA-A100-80GB * 8',
+                    sys_disk: '1.92T SATA SSD * 2 (Raid)',
+                    data_disk: '7.68T U.2 NVMe SSD * 1',
+                    net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
+                },
+                {
+                    id: 3,
+                    name: '昇腾910B',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    price: 5000,
+                    cpu: 'Kunpeng 920 64 C * 2',
+                    memory: '64G DDR4-3200 * 8',
+                    gpu: '昇腾910B-32GB * 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: 4,
+                    name: '昆仑芯P800',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    price: 4000,
+                    cpu: 'Kunpeng 920 64 C * 2',
+                    memory: '64G DDR4-3200 * 8',
+                    gpu: '昆仑芯P800-16GB * 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'
+                }
+            ]
+        }
     },
     mounted() {
         this.getProductList()
@@ -135,13 +207,115 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.product-list{
+/* 新增的radio按钮组样式 */
+.radio-group-container {
+    width: 100%!important;
+    display: flex;
+    justify-content: flex-start;
+    // margin: 20px 0;
+    align-items: center;
+    max-width: 1400px;
+}
+
+.radio-group {
+    display: flex;
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.radio-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    margin-right: 4px;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .radio-text {
+        font-size: 14px;
+        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;
+        }
+    }
+}
+
+.title {
+    color: #222F60;
+    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;
+        /* 确保渐变生效 */
+    }
+}
+
+.itemTitle {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+
+    .topText {
+        color: #222F60;
+        font-size: 48px;
+        font-weight: bold;
+    }
+
+    .bottomText {
+        font-size: 24px;
+        color: #7A82A0;
+        margin-top: 15px;
+    }
+
+}
+
+.product-list {
     width: 100%;
-    border: 1px solid red;
+
     // display: grid;
     // grid-template-columns: repeat(4, 1fr);
     // gap: 20px;
-    .no-data{
+    .no-data {
         text-align: center;
         font-size: 16px;
     }
@@ -152,9 +326,9 @@ export default {
     margin-top: 20px;
     width: 100%;
 }
+
 .main-box {
     width: 100%;
-    border: 1px solid red;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -176,7 +350,6 @@ export default {
         justify-content: flex-start;
         align-items: center;
         margin-bottom: 20px;
-        border: 1px solid red;
 
         &:last-child {
             margin-bottom: 0;
@@ -190,7 +363,6 @@ export default {
             display: flex;
             justify-content: flex-end;
             align-items: center;
-            border: 1px solid red;
             height: 100%;
             margin-right: 15px;
         }