bugfix

f/web-kboss/src/api/ncmatch/index.js

@@ -37,4 +37,14 @@ export function reqPublishProductSearchFirstPage(data) {
     headers: { 'Content-Type': 'application/json' },
     data
   })
-}
+}
+
+//算力供需广场 获取列表
+export function reqGetSupplyAndDemandSquareList(data) {
+  return request({
+    url: '/product/get_supply_and_demand_square_list.dspy',
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    data
+  })
+}

f/web-kboss/src/views/homePage/ncmatch/mainPage/img/history.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753942817241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1738" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><path d="M783.53 240.47C641.08 98.02 413.8 91.41 263.09 220.03V167.1c0-17.67-14.33-32-32-32s-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32s-14.33-32-32-32h-48.15c125.55-101.54 310.66-94.06 427.34 22.62 124.75 124.77 124.75 327.8 0 452.56-124.78 124.75-327.78 124.75-452.56 0C225.28 677.84 192 597.48 192 512c0-17.67-14.33-32-32-32s-32 14.33-32 32c0 102.58 39.94 199.02 112.47 271.53 74.86 74.86 173.19 112.3 271.53 112.3 98.33 0 196.67-37.44 271.53-112.3 149.7-149.72 149.7-393.34 0-543.06z" fill="#333333" p-id="1739"></path><path d="M512 288c-17.67 0-32 14.33-32 32v185.38c0 12.81 5 24.88 14.06 33.94l123.31 123.31c6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38c12.5-12.5 12.5-32.75 0-45.25L544 498.75V320c0-17.67-14.33-32-32-32z" fill="#333333" p-id="1740"></path></svg>

f/web-kboss/src/views/homePage/ncmatch/mainPage/img/star.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753942811442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><path d="M544.32 107.91h0.16-0.16M512 173.39l83.56 169.3 14.89 30.17 33.3 4.84 186.84 27.15-135.2 131.78-24.09 23.49 5.69 33.16 31.92 186.08L541.8 691.5 512 675.85l-29.78 15.66-167.11 87.85 31.92-186.08 5.69-33.16-24.09-23.49-135.2-131.78 186.84-27.15 33.3-4.84 14.89-30.17L512 173.39M512 64c-9.97 0-19.95 5.2-25.07 15.59L371.05 314.37l-259.1 37.65c-22.93 3.33-32.09 31.52-15.5 47.69l187.49 182.75-44.26 258.05c-3.1 18.07 11.26 32.75 27.55 32.75 4.3 0 8.73-1.02 13.02-3.27L512 748.16 743.75 870c4.28 2.25 8.72 3.27 13.02 3.27 16.29 0 30.65-14.68 27.55-32.75l-44.26-258.05 187.49-182.75c16.6-16.18 7.44-44.36-15.5-47.69l-259.1-37.65L537.07 79.59C531.95 69.2 521.97 64 512 64z" fill="#333333" p-id="1575"></path></svg>

f/web-kboss/src/views/homePage/ncmatch/mainPage/img/zan.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753942853047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1907" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><path d="M840.88 330H631.67c-11.17 0-19.3-10.6-16.41-21.38l23.16-86.43c14.45-53.93-17.55-109.36-71.48-123.81A98.616 98.616 0 0 0 541.36 95c-43.88 0-84.3 29.38-96.17 73.66l-19.8 73.88C411.57 294.12 364.82 330 311.41 330H150c-17.67 0-32 14.33-32 32v448c0 17.67 14.33 32 32 32h618.88c30.8 0 57.23-21.94 62.9-52.21l72-384c7.39-39.38-22.82-75.79-62.9-75.79zM182 394h93.63L248.2 778H182V394z m586.88 384H312.37l27.6-386.39c69.97-11.15 128.47-62.44 147.25-132.51l19.8-73.88c4.07-15.2 18.52-26.22 34.35-26.22 3.01 0 6.04 0.4 9.01 1.2 19.76 5.29 31.52 25.68 26.23 45.43l-23.16 86.43c-6.57 24.52-1.47 50.13 13.98 70.26 15.45 20.14 38.87 31.69 64.25 31.69h209.21L768.88 778z" fill="#333333" p-id="1908"></path></svg>

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: require('./img/cloud.png'), product_list: ['百度云'] },
-        { name: '国产算力', icon: '📱', product_list: ['昇腾910B', 'P800', '其他'] },
+        { name: '国产算力', icon: require('./img/computing.png'), product_list: ['昇腾910B', 'P800', '其他'] },
-        { name: 'NVIDIA', icon: '💻', product_list: ['3090', '4090', '5080', '5090'] },
+        { name: 'NVIDIA', icon: require('./img/nvidia.png'), product_list: ['3090', '4090', '5080', '5090'] },
-        { name: '网', icon: '🪑', product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
+        { name: '网', icon: require('./img/net.png'), product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
-        { name: '一体机', icon: '👕', product_list: ['昆仑芯', '天数智芯'] },
+        { name: '一体机', icon: require('./img/computer.png'), product_list: ['昆仑芯', '天数智芯'] },
-        { name: '硬件', icon: '💄', product_list: ['机器人', 'AR眼镜'] },
+        { 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,13 +176,12 @@ 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;border: 1px solid red;margin-left: 0px;padding-left: 0px;">|</span>
+              <span style="display: flex;margin-left: 0px;padding-left: 0px;">|</span>
               <div class="menu-item">
                 <span v-for="(product, index) in category.product_list" :key="product">
-                  {{ product }}{{ index < category.product_list.length - 1 ? ' / ' : '' }}
+                  {{ product }}{{ index < category.product_list.length - 1 ? ' / ' : '' }} </span>
-                </span>
               </div>
             </li>
           </ul>
@@ -207,10 +207,16 @@ export default Vue.extend({
         </section>
 
         <!-- 右侧用户信息栏 -->
-        <aside class="user-sidebar">
+        <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>
+
+          <ul class="userBtn">
+            <li><img src="./img/history.svg" alt="">浏览记录</li>
+            <li><img src="./img/star.svg" alt="">收藏商品</li>
+            <li><img src="./img/zan.svg" alt="">关注需求</li>
+          </ul>
         </aside>
       </div>
     </main>
@@ -233,20 +239,38 @@ export default Vue.extend({
 </template>
 
 <style scoped lang="scss">
+
+.userBtn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  li {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
 .menu-item {
   flex: 1;
-  border: 1px solid red;
   font-size: 13px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 0; /* 确保flex子项可以收缩 */
+  min-width: 0;
+  /* 确保flex子项可以收缩 */
 }
 
 .productList {
   width: 1400px;
   margin: 0 auto;
-  border: 1px solid red;
 }
 
 .publish-goods {
@@ -315,7 +339,6 @@ export default Vue.extend({
       font-size: 24px;
       height: 75px;
       line-height: 1.6;
-      border: 1px solid red;
     }
 
     .tagUl {
@@ -389,23 +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;
-    border: 1px solid red;
     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;
@@ -506,7 +531,6 @@ export default Vue.extend({
   border-radius: 10px;
   overflow: hidden;
   background-color: white;
-  border: 1px solid red;
 
   .content-wrapper {
     box-sizing: border-box;
@@ -530,7 +554,6 @@ export default Vue.extend({
 
 
     .category-item {
-      border: 1px solid red;
       display: flex;
       align-items: center;
       gap: 10px;
@@ -549,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 {
@@ -648,7 +674,9 @@ export default Vue.extend({
 
 }
 
-
+.user-sidebar{
+  height: 100%;
+}
 
 // 响应式设计
 @media (max-width: 1200px) {

f/web-kboss/src/views/homePage/ncmatch/mainPage/productCard/index.vue

@@ -1,13 +1,18 @@
 <template>
   <!-- 产品列表 -->
-  <ul class="productListContent" style="padding: 16px;">
+<div>
-    <li v-if="type === 'homePage'" class="product-item" v-for="item in productList" :key="item.id">
+  <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">
         <img :src="item.img" style="min-width: 278px;min-height: 185px;" :alt="item.name">
       </div>
       <div class="product-info">
         <h3 class="product-name">{{ item.name }}</h3>
         <div class="product-specs">
+          <div class="spec-item" v-if="type === 'homePage'">
+            <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>
@@ -37,17 +42,55 @@
           <span class="price">¥{{ item.price }}</span>
           <span class="price-unit">/台/月 (可短租)</span>
         </div>
-        <button class="consult-btn">立即咨询</button>
+        <button class="consult-btn" @click="openTalk">立即咨询</button>
       </div>
     </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">
+      <div class="product-image">
+        <img :src="item.img" style="min-width: 278px;min-height: 185px;" :alt="item.name">
+      </div>
+      <div class="product-info">
+        <h3 class="product-name">{{ item.name }}</h3>
+        <div class="product-specs">
+          <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">所属类别:</span>
+            <span class="spec-value">{{ item.company_type }}</span>
+          </div>
+          <div class="spec-item">
+            <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.requirement_summary }}</span>
+          </div>
 
+
+ 
+        </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>
+</div>
 </template>
 <script>
+import Talk from '@/views/homePage/dialog/talk/index.vue'
 export default {
   name: 'productCard',
+  components: {
+    Talk
+  },
   props: {
     productList: {
       type: Array,
@@ -57,7 +100,12 @@ export default {
       type: String,
       default: 'homePage'
     }
-  }
+  },
+  methods: {
+    openTalk() {
+      this.$store.commit('setShowTalk', true);
+    },
+}
 }
 </script>
 <style scoped lang="scss">
@@ -69,7 +117,6 @@ export default {
   max-width: 1400px;
   margin: 0 auto;
   background-color: white;
-  border: 1px solid red;
 
   .product-item {
 
@@ -176,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;
+      }
     }
   }
 }

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"
+                        <span v-for="category in typeList" :key="category.id"
-                            :class="['category-tag', { active: selectedCategory === category.id }]"
+                            :class="['category-tag', { active: selectedCategory === category.value }]"
-                            @click="selectCategory(category.id)">
+                            @click="selectCategory(category.value)">
-                            {{ category.name }}
+                            {{ category.label }}
                         </span>
                     </div>
                 </div>
@@ -25,17 +54,20 @@
                         </span>
                     </div>
                 </div>
-                                 <!-- 产品 -->
+                <!-- 产品 -->
-                 <div class="product-card-container">
+
-                     <productCard v-if="productList.length > 0" :productList="productList"></productCard>
+                <div class="product-card-container">
-                     <div v-else class="no-data">暂无数据</div>
+                    <productCard v-if="productList.length > 0" type="supplyAndDemandSquare" :productList="productList">
-                 </div>
+                    </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: {
@@ -43,7 +75,9 @@ export default {
     },
     data() {
         return {
-            selectedCategory: 'category2', // 默认选中项
+            typeList:[],
+            selectedType: 'product', // 默认选中需求
+            selectedCategory: '', // 默认选中项
             selectedCompany: 'company1', // 默认选中项
             categories: [
                 { id: 'category1', name: '云' },
@@ -67,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() {
+        getProductList() {
-             this.productList = [
+            this.productList = [
-                 {
+                {
-                     id: 1,
+                    id: 1,
-                     name: 'NVIDIA-4090',
+                    name: 'NVIDIA-4090',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 6000,
+                    price: 6000,
-                     cpu: 'AMD EPYC 7542 32 C * 2',
+                    cpu: 'AMD EPYC 7542 32 C * 2',
-                     memory: '64G DDR4-3200 * 8',
+                    memory: '64G DDR4-3200 * 8',
-                     gpu: 'NVIDIA-4090-24GB * 8',
+                    gpu: 'NVIDIA-4090-24GB * 8',
-                     sys_disk: '960G SATA SSD * 2 (Raid)',
+                    sys_disk: '960G SATA SSD * 2 (Raid)',
-                     data_disk: '3.84T U.2 NVMe SSD * 1',
+                    data_disk: '3.84T U.2 NVMe SSD * 1',
-                     net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
+                    net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-                 },
+                },
-                 {
+                {
-                     id: 2,
+                    id: 2,
-                     name: 'NVIDIA-A100',
+                    name: 'NVIDIA-A100',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 8000,
+                    price: 8000,
-                     cpu: 'AMD EPYC 7542 32 C * 2',
+                    cpu: 'AMD EPYC 7542 32 C * 2',
-                     memory: '128G DDR4-3200 * 8',
+                    memory: '128G DDR4-3200 * 8',
-                     gpu: 'NVIDIA-A100-80GB * 8',
+                    gpu: 'NVIDIA-A100-80GB * 8',
-                     sys_disk: '1.92T SATA SSD * 2 (Raid)',
+                    sys_disk: '1.92T SATA SSD * 2 (Raid)',
-                     data_disk: '7.68T U.2 NVMe SSD * 1',
+                    data_disk: '7.68T U.2 NVMe SSD * 1',
-                     net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
+                    net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-                 },
+                },
-                 {
+                {
-                     id: 3,
+                    id: 3,
-                     name: '昇腾910B',
+                    name: '昇腾910B',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 5000,
+                    price: 5000,
-                     cpu: 'Kunpeng 920 64 C * 2',
+                    cpu: 'Kunpeng 920 64 C * 2',
-                     memory: '64G DDR4-3200 * 8',
+                    memory: '64G DDR4-3200 * 8',
-                     gpu: '昇腾910B-32GB * 8',
+                    gpu: '昇腾910B-32GB * 8',
-                     sys_disk: '960G SATA SSD * 2 (Raid)',
+                    sys_disk: '960G SATA SSD * 2 (Raid)',
-                     data_disk: '3.84T U.2 NVMe SSD * 1',
+                    data_disk: '3.84T U.2 NVMe SSD * 1',
-                     net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
+                    net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-                 },
+                },
-                 {
+                {
-                     id: 4,
+                    id: 4,
-                     name: '昆仑芯P800',
+                    name: '昆仑芯P800',
-                     image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
+                    image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
-                     price: 4000,
+                    price: 4000,
-                     cpu: 'Kunpeng 920 64 C * 2',
+                    cpu: 'Kunpeng 920 64 C * 2',
-                     memory: '64G DDR4-3200 * 8',
+                    memory: '64G DDR4-3200 * 8',
-                     gpu: '昆仑芯P800-16GB * 8',
+                    gpu: '昆仑芯P800-16GB * 8',
-                     sys_disk: '960G SATA SSD * 2 (Raid)',
+                    sys_disk: '960G SATA SSD * 2 (Raid)',
-                     data_disk: '3.84T U.2 NVMe SSD * 1',
+                    data_disk: '3.84T U.2 NVMe SSD * 1',
-                     net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
+                    net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
-                 }
+                }
-             ]
+            ]
-         }
+        }
     },
     mounted() {
         this.getProductList()
@@ -134,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;
     }
@@ -151,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;
@@ -175,7 +350,6 @@ export default {
         justify-content: flex-start;
         align-items: center;
         margin-bottom: 20px;
-        border: 1px solid red;
 
         &:last-child {
             margin-bottom: 0;
@@ -189,7 +363,6 @@ export default {
             display: flex;
             justify-content: flex-end;
             align-items: center;
-            border: 1px solid red;
             height: 100%;
             margin-right: 15px;
         }