updata

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

@@ -1,97 +1,114 @@
 <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;">
       <router-view></router-view>
     </div>
-    <el-dialog :title="productDetailInfo.publish_type==='1'? '商品详情' :'需求详情'" top="5vh" :visible.sync="showProductDetail" width="80%" @open="scrollToTop">
+
+    <!-- 发布商品/需求弹窗 -->
+    <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
+        :visible.sync="sendProductVisible">
+        <sendProduct :isEdit="false" v-if="sendProductVisible" @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="productDetailInfo.publish_type === '1' ? '商品详情' : '需求详情'" top="5vh" :visible.sync="showProductDetail"
+      width="80%" @open="scrollToTop">
       <ProductDetail></ProductDetail>
       <span slot="footer" class="dialog-footer">
-        <!-- <el-button @click="closeProductDetail">取 消</el-button> -->
         <el-button type="primary" @click="closeProductDetail">关 闭</el-button>
       </span>
     </el-dialog>
-    <!--    footer-->
+
+    <!-- Footer -->
     <div class="footer">
       <div class="left-box" style="border-bottom: 1px solid  #7A82A0">
-
         <div style="display: flex;flex-direction: column">
           <img v-if="JSON.stringify(logoInfoNew) !== '{}'" style="width: 148px;height: 48px;"
             :src="logoInfoNew.home.logoImg" alt="" class="img">
           <div class="content-main">
             <ul class="info">
-              <li>地址：<span v-if="JSON.stringify(logoInfoNew) !== '{}'">{{ logoInfoNew.home.adress }}</span>
+              <li>地址：<span v-if="JSON.stringify(logoInfoNew) !== '{}'">{{ logoInfoNew.home.adress }}</span></li>
-              </li>
               <li v-if="JSON.stringify(logoInfoNew) !== '{}'"> 邮箱：{{ logoInfoNew.home.email }}</li>
-              <li v-if="JSON.stringify(logoInfoNew) !== '{}'">电话： <span class="tel">{{ logoInfoNew.home.mobile }}</span>
+              <li v-if="JSON.stringify(logoInfoNew) !== '{}'">电话： <span class="tel">{{ logoInfoNew.home.mobile }}</span></li>
-              </li>
-
-
-              <li>
-                <!-- <a href="" rel="noreferrer" target="_blank"></a> -->
-              </li>
             </ul>
-
           </div>
         </div>
-        <ul class="bigUl">
+        <ul class="bigUl"></ul>
-        </ul>
         <div v-if="JSON.stringify(logoInfoNew) !== '{}' && logoInfoNew.home.bannerTitle !== '开元数智'" class="right-box">
           <div class="qr-box">
-            <div class="qr-code">
             <img src="../img/kefu.jpg" style="padding: 0.08rem" alt="">
-            </div>
             <span class="qr-content">微信客服</span>
           </div>
           <div class="qr-box" style="margin-left: 0.667rem">
-            <div class="qr-code">
             <img src="../img/img.png" alt="">
-            </div>
             <span class="qr-content">关注公众号</span>
           </div>
         </div>
       </div>
       <div style="display: flex;justify-content: center;align-items: center;width: 100%; ">
         <span v-if="JSON.stringify(logoInfoNew) !== '{}'"
-          style="margin:15px 0 ;width: 1400px;display:flex;justify-content:center;align-items:center;color: #7A82A0;"><span
+          style="margin:15px 0 ;width: 1400px;display:flex;justify-content:center;align-items:center;color: #7A82A0;">
-            class="goStyle" @click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
+          <span class="goStyle" @click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
-            京ICP备{{
+            京ICP备{{ logoInfoNew.home.license }}&nbsp;
-              logoInfoNew.home.license
+          </span>
-            }}&nbsp;
+          &nbsp;&nbsp;{{ logoInfoNew.home.footerTitle }}&nbsp;{{ logoInfoNew.home.copyright }}&nbsp;
-          </span> &nbsp;&nbsp;{{
+        </span>
-            logoInfoNew.home.footerTitle
-          }}&nbsp;{{
-            logoInfoNew.home.copyright
-          }}&nbsp; </span>
-        <!--        IPC备案号:{{ ICP }} <span style="margin-left: 0.267rem">版权所有 @kaiyuanyun 2023</span>-->
-        <!--        <img src="../../image/login/policeInsignia/policeInsignia.png" alt=""-->
-        <!--             style="width:0.227rem;height:0.227rem;margin-right: 0.027rem;">-->
-        <!--        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer"-->
-        <!--           target="_blank"-->
-        <!--           style="margin-right:0.4rem;">京公网安备11010502054007</a>-->
-        <!--        <span>-->
-        <!--                  <router-link tag="a" target="_blank"-->
-        <!--                               :to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>-->
-        <!--                </span>-->
       </div>
     </div>
   </div>
 </template>
+
 <script>
 import Vue from 'vue'
 import TopBox from "@/views/homePage/components/topBox/index.vue";
 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: { TopBox, search, ProductDetail: productDetail },
+  components: {
+    TopBox,
+    search,
+    ProductDetail: productDetail,
+    sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
+  },
   data() {
     return {
-      currentBaseMenu: "hot", // 默认选中热门推荐
+      currentBaseMenu: "hot",
+      // 新增发布相关状态
+      sendProductVisible: false,
+      showTip: false,
+      publish_type: "",
     }
   },
   computed: {
@@ -114,23 +131,12 @@ export default Vue.extend({
         this.$store.commit('SHOWPRODUCTDETAIL', value);
       }
     },
-    showRegisterButton() {
-      const orgType = window.sessionStorage.getItem('org_type');
-      const userId = window.sessionStorage.getItem('userId');
-      console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
-      return orgType !== '2' && orgType !== '3' && userId === null;
-    },
-    username() {
-      return sessionStorage.getItem('username') || '';
-    },
-
   },
   methods: {
     closeProductDetail() {
       this.$store.commit('SHOWPRODUCTDETAIL', false)
     },
     scrollToTop() {
-      // 使用nextTick确保DOM更新完成后再滚动
       this.$nextTick(() => {
         const dialogBody = document.querySelector('.el-dialog__body');
         if (dialogBody) {
@@ -145,13 +151,12 @@ export default Vue.extend({
       const element = document.getElementById(id);
       if (element) {
         element.scrollIntoView({
-          behavior: 'smooth', // 平滑滚动
+          behavior: 'smooth',
-          block: 'start',     // 滚动到顶部对齐（可选：'start', 'center', 'end', 'nearest'）
+          block: 'start',
         });
       }
     },
     clickBaseMenu(menu) {
-      console.log("emnu", menu)
       this.currentBaseMenu = menu.id;
     },
     async goBaidu() {
@@ -160,22 +165,122 @@ export default Vue.extend({
       await this.$store.commit('setNavIndex', 0)
     },
     async goAliyun() {
-
       this.scrollToElement('topBox')
       await this.$store.commit('setShowHomeNav', true)
       await this.$store.commit('setNavIndex', 1)
     },
+
+    // 发布需求/商品方法
+    sendInfo(type) {
+      console.log("发布类型:", 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.$message.success(this.publish_type === '1' ? '商品发布成功' : '需求发布成功');
+      // 如果当前在供需广场页面，可以刷新列表数据
+      if (this.$route.path === '/supplyAndDemandSquare') {
+        // 触发供需广场页面的数据刷新
+        this.$bus.$emit('refreshSupplyDemandList');
+      }
+    },
+
+    // 跳转到信息完善页面
+    goInfo() {
+      this.showTip = false
+      this.$router.push('/customer/approve')
+    },
   }
 })
 </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;
+  }
+
+  .banner-title {
+    width: 500px;
+    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);
+    }
+  }
+}
 
-<style scoped lang="scss">
 .search-box {
   width: 100%;
-  margin-top: 15px;
+  // margin: 45px 0 25px 0;
-  margin: 45px 0;
+  margin-bottom: 20px;
-  margin-bottom: 25px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -183,7 +288,6 @@ export default Vue.extend({
 }
 
 .homeOut {
-  //padding-top: 60px;
   height: 100%;
   overflow: auto !important;
   min-width: 1500px;
@@ -192,12 +296,9 @@ export default Vue.extend({
   align-items: center;
   justify-content: flex-start;
   background-color: #f6f8fd;
-
-
 }
 
 .footer {
-
   padding: 35px 0;
   width: 100%;
   display: flex;
@@ -227,13 +328,11 @@ export default Vue.extend({
   font-size: 0.187rem;
 }
 
-
 .qr-code {
   img {
     width: 100%;
     height: 100%;
   }
-
   width: 1.853rem;
   height: 1.853rem;
 }
@@ -253,19 +352,9 @@ export default Vue.extend({
   align-items: center;
 }
 
-.logo {
-  background-color: #32abfc;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 .bigUl {
   margin: 0 15px;
   margin-left: -250px;
-  //padding-top: 15px;
   width: fit-content;
   display: flex;
   justify-content: flex-start;
@@ -273,7 +362,6 @@ export default Vue.extend({
   .bigLi {
     margin: 0 25px;
   }
-
   height: 100%;
 
   .title {
@@ -283,7 +371,6 @@ export default Vue.extend({
   }
 
   .smallUl {
-
     font-size: 16px;
     color: #7A82A0;
 
@@ -323,4 +410,7 @@ export default Vue.extend({
     color: #1b5bff;
   }
 }
+/deep/.el-pagination{
+  text-align: center !important;
+}
 </style>

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

@@ -1,25 +1,11 @@
 <template>
     <div class="main-box">
-        <div class="class">
-            <div class="class-box" @mouseenter="hoverClassBox = 1" @mouseleave="hoverClassBox = 0" :class="{ active: hoverClassBox === 1 }">
-                <div class="class-title" @click="sendInfo('2')">
-                    发布需求
-                </div>
-            </div>
-            <div class="class-box" @mouseenter="hoverClassBox = 2" @mouseleave="hoverClassBox = 0" :class="{ active: hoverClassBox === 2 }">
-                <div class="class-title" @click="sendInfo('1')">
-                    发布商品
-                </div>
-            </div>
-        </div>
-
         <div style="margin-top: 25px;">
             <span style="margin-top: 100px;" class="title">
                 <span class="leftText">
                     算力供需
                 </span>
                 <span class="rightText"> 广场</span></span>
-
         </div>
 
         <!-- 发布商品/需求弹窗 -->
@@ -38,80 +24,88 @@
             </span>
         </el-dialog>
 
-        <!-- <div style="width: 100%;max-width: 1600px;"> -->
+        <!-- 筛选条件区域 - 整合到一个卡片中 -->
-            <div class="category-filter">
+        <div class="filter-card">
-                <!-- 新增的需求和商品radio按钮组 -->
+            <!-- <div class="filter-header">
-                <div class="radio-group-container">
+                <span class="filter-title">筛选条件</span>
-                    <div class="radio-group">
+            </div> -->
-                        <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-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="category-section">
+                <div class="filter-section">
-                    <div class="category-title">所属类别</div>
+                    <div class="filter-label">所属类别</div>
-                    <div class="category-tags">
+                    <div class="filter-options">
                         <span v-for="category in firstCategories" :key="category.id"
-                            :class="['category-tag', { active: activeFirstId === category.id }]"
+                            :class="['filter-option', { active: activeFirstId === category.id }]"
                             @click="selectFirstCategory(category.id)">
                             {{ category.product_category || category.label }}
                         </span>
                     </div>
                 </div>
 
-                <div class="category-section" v-if="secondCategories.length > 0">
+                <!-- 所属品类 -->
-                    <div class="category-title">所属品类</div>
+                <div class="filter-section" v-if="secondCategories.length > 0">
-                    <div class="category-tags">
+                    <div class="filter-label">所属品类</div>
+                    <div class="filter-options">
                         <span v-for="category in secondCategories" :key="category.id"
-                            :class="['category-tag', { active: activeSecondId === category.id }]"
+                            :class="['filter-option', { active: activeSecondId === category.id }]"
                             @click="selectSecondCategory(category.id)">
                             {{ category.product_category || category.label }}
                         </span>
                     </div>
                 </div>
+
                 <!-- 公司类别 -->
-                <div class="category-section">
+                <div class="filter-section">
-                    <div class="category-title">公司类别</div>
+                    <div class="filter-label">公司类别</div>
-                    <div class="category-tags">
+                    <div class="filter-options">
                         <span v-for="company in companies" :key="company.id"
-                            :class="['category-tag', { active: selectedCompanies.includes(company.value) }]"
+                            :class="['filter-option', { active: selectedCompanies.includes(company.value) }]"
                             @click="selectCompany(company.value)">
                             {{ company.label }}
                         </span>
                     </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">
+                    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: 10px;" src="./img/empty.svg" alt="">
+                <img style="width: 150px;height: 150px;" src="./img/empty.svg" alt="">
                 暂无数据
             </div>
         </div>
-
-            </div>
-        <!-- </div> -->
     </div>
 </template>
 
 <script>
 import { reqGetSupplyAndDemandSquareList, reqCompanyCategorySearch, reqSupplyAndDemandFirstCategory, reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
 import { mapGetters, mapState } from 'vuex'
+
 export default {
     name: 'supplyAndDemandSquare',
     components: {
@@ -120,26 +114,20 @@ export default {
     },
     data() {
         return {
-            // 新增 hover 状态控制
-            hoverClassBox: 0, // 0: 无悬停, 1: 第一个悬停, 2: 第二个悬停
             page_size: 8,
             current_page: 1,
             typeList: [],
-            publish_type: '1', // 默认选中商品
+            publish_type: '1',
-            selectedCategory: '', // 兼容旧逻辑，最终请求用这个字段
+            selectedCategory: '',
-            selectedCompanies: [], // 默认选中项，改为数组支持多选
+            selectedCompanies: [],
             categories: [],
             companies: [],
             productList: [],
-            detailVisible: false,
+            total: 0,
-            oneLevelCategory:[],
-            twoLevelCategory:[],
-            // 新增：一二级分类数据与高亮状态（平级数组）
             firstCategories: [],
             secondCategories: [],
             activeFirstId: null,
             activeSecondId: null,
-            // 新增发布相关状态
             showTip: false,
             sendProductVisible: false,
         }
@@ -178,7 +166,6 @@ export default {
                     const roles = sessionStorage.getItem('jueseNew')
                     const isCustomer = roles ? roles.includes('客户') : true
 
-                    // 安全检查：确保 data[0] 存在
                     if (hasAuditInfo && dataList[0]) {
                         const auditStatus = dataList[0].audit_status
 
@@ -187,16 +174,13 @@ export default {
                         } 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
                     }
                 })
@@ -207,8 +191,8 @@ export default {
 
         // 发布成功回调
         sendProductSuccess() {
-            this.sendProductVisible = false; // 关闭弹窗
+            this.sendProductVisible = false;
-            this.initData() // 刷新列表
+            this.initData()
         },
 
         // 跳转到信息完善页面
@@ -217,32 +201,19 @@ export default {
             this.$router.push('/customer/approve')
         },
 
-        getOneLevelCategory(){
-            // reqSupplyAndDemandFirstCategory({url_link:window.location.href}).then(res=>{
-            //     if(res.status){
-            //         this.oneLevelCategory=res.data
-            //     }
-            // })
-        },
-        getTwoLevelCategory(){
-            // reqSupplyAndDemandSecondCategory({url_link:window.location.href}).then(res=>{
-            //     if(res.status){
-            //         this.twoLevelCategory=res.data
-            //     }
-            // })
-        },
         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) {
@@ -253,23 +224,22 @@ export default {
                             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
@@ -277,8 +247,8 @@ export default {
             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 : []
@@ -286,7 +256,6 @@ export default {
                         this.activeFirstId = this.firstCategories[0].id
                         this.selectedCategory = this.activeFirstId
                         this.activeSecondId = null
-                        // 立即拉取对应二级分类
                         return this.loadSecondCategories(this.activeFirstId)
                     } else {
                         this.activeFirstId = null
@@ -298,8 +267,8 @@ export default {
                 return res
             })
         },
+
         loadSecondCategories(firstId) {
-            // 同一个接口，通过是否传 first_level_id 区分一级/二级
             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 : []
@@ -309,12 +278,12 @@ export default {
                 return res
             })
         },
+
         handleTypeChange() {
-            // 处理类型切换逻辑
             console.log('切换到:', this.publish_type)
-            // 根据类型重新加载数据
             this.initData()
         },
+
         initData() {
             let ploay = {
                 product_category: this.selectedCategory,
@@ -335,197 +304,22 @@ export default {
                     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)
             }
-            console.log("this.selectedCompanies", this.selectedCompanies);
             this.initData()
         },
-        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()
     }
 }
 </script>
 
 <style scoped lang="scss">
-.class{
-  margin: 40px 0;
-  min-width: 1200px;
-  display: flex;
-  background-color: #fff;
-  padding:8px 10px;
-  .class-box{
-    width: 50%;
-    padding: 10px 20px;
-    // border-radius: 8px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    border: 1px solid transparent;
-    text-align: center;
-
-    /* 悬停时的渐变背景 */
-    &:hover,
-    &.active {
-      background: linear-gradient(to right, #2979fe, #2eb8fa);
-      border-color: #2979fe;
-      color: #fff;
-      box-shadow: 0 4px 12px rgba(41, 121, 254, 0.3);
-
-      .class-title {
-        color: #fff;
-      }
-    }
-  }
-  .class-title{
-    font-size: 16px;
-    color: #333;
-    transition: color 0.3s ease;
-  }
-}
-
-.back-btn {
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-top: 20px;
-    font-size: 16px;
-    color: #666;
-
-    &:hover {
-        cursor: pointer;
-        color: #275AFF;
-    }
-}
-
-/* 新增的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;
-    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;
-        }
-    }
-}
-
 .title {
     color: #666 !important;
     font-size: 36px;
@@ -533,52 +327,15 @@ export default {
 
     .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%;
-
-    // display: grid;
-    // grid-template-columns: repeat(4, 1fr);
-    // gap: 20px;
-    .no-data {
-        text-align: center;
-        font-size: 16px;
-    }
-}
-
-/* 产品卡片容器样式 */
 .product-card-container {
-    margin-top: 20px;
+    margin-top: 30px;
     width: 100%;
 }
 
@@ -591,66 +348,119 @@ export default {
     max-width: 1600px;
 }
 
-.category-filter {
+/* 筛选卡片样式 */
-    // padding: 20px;
+.filter-card {
-    bottom: 1rem;
+    width: 100%;
-    // background-color: #;
+    max-width: 1400px;
-    border-radius: 8px;
+    background: white;
-    margin: 20px;
+    border-radius: 16px;
-    margin-left: 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    margin-right: 0;
+    margin: 20px 0;
+    transition: all 0.3s ease;
+    overflow: hidden;
 
-    .category-section {
+    &: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%);
+}
+
+.filter-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #111e52;
     display: flex;
-        justify-content: flex-start;
     align-items: center;
-        margin-bottom: 20px;
+
+    &::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;
+}
+
+.filter-section {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 25px;
 
     &:last-child {
         margin-bottom: 0;
     }
+}
 
-        .category-title {
+.filter-label {
-            font-size: 16px;
+    font-size: 14px;
     color: #333;
-            //   margin-bottom: 12px;
     font-weight: 500;
-            display: flex;
+    white-space: nowrap;
-            justify-content: flex-end;
+    flex-shrink: 0;
-            align-items: center;
+    line-height: 32px;
-            height: 100%;
+    width: 80px;
-            margin-right: 15px;
+    margin-right: 20px;
-        }
+}
 
-        .category-tags {
+.filter-options {
     display: flex;
     flex-wrap: wrap;
-            gap: 8px;
+    gap: 12px;
+    flex: 1;
+}
 
-
+.filter-option {
-            .category-tag {
+    position: relative;
-
+    padding: 8px 20px;
-                padding: 3px 6px;
+    border: 1px solid #e0e0e0;
-                background-color: #fff;
+    border-radius: 8px;
-                border: 1px solid #e8e8e8;
+    font-size: 14px;
-                border-radius: 2px;
     color: #666;
     cursor: pointer;
     transition: all 0.3s ease;
-                font-size: 14px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 80px;
+    text-align: center;
 
     &:hover {
-                    border-color: #1890ff;
+        border-color: #275AFF;
-                    color: #1890ff;
+        color: #275AFF;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.2);
     }
 
     &.active {
-                    background-color: #e6f7ff;
+        background: linear-gradient(135deg, #275AFF, #2EBDFA);
-                    border-color: #1890ff;  /* 激活状态下的边框颜色 */
+        color: white;
-                    color: #1890ff;
+        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;
     }
+
+    .option-text {
+        font-weight: 500;
+        pointer-events: none;
     }
 }
 
@@ -662,11 +472,50 @@ export default {
     font-size: 16px;
     color: #7A82A0;
     flex-direction: column;
-
 }
 
-.el-pagination{
+.el-pagination {
     text-align: center;
+    margin-top: 30px;
 }
 
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .filter-card {
+        margin: 15px 10px;
+    }
+
+    .filter-content {
+        padding: 15px;
+    }
+
+    .filter-section {
+        flex-direction: column;
+        margin-bottom: 20px;
+    }
+
+    .filter-label {
+        width: 100%;
+        margin-bottom: 10px;
+        margin-right: 0;
+    }
+
+    .filter-options {
+        width: 100%;
+        gap: 8px;
+    }
+
+    .filter-option {
+        padding: 6px 12px;
+        font-size: 12px;
+        min-width: 60px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .filter-card {
+        max-width: calc(100% - 40px);
+        margin: 20px;
+    }
+}
 </style>

f/web-kboss/src/views/login/indexNew.vue

@@ -99,9 +99,9 @@
                         <el-input ref="vcode" v-model="loginForm.vcode" placeholder="请输入验证码" name="vcode" type="text" />
                       </div>
                     </el-form-item>
-                    <!-- 获取验证码按钮 -->
+                    <!-- 获取验证码按钮 - 添加防抖功能 -->
-                    <span :disabled="isDisabled" class="getCodeStyleNew" style="height:40px;margin-left:10px"
+                    <span :disabled="isDisabled || isGettingCode" class="getCodeStyleNew" style="height:40px;margin-left:10px"
-                      @click="getCode">
+                      @click="debouncedGetCode">
                       {{ SendCode_text }}
                     </span>
                   </div>
@@ -155,7 +155,7 @@
                       <el-input style="border:1px solid #d9d9d9;border-radius: 3px" ref="vcode" v-model="form.vcode"
                         placeholder="请输入验证码" name="vcode" type="text" />
                       <el-button type="primary" size="mini" style="height: 40px; margin-left: 10px"
-                        :disabled="isDisabled1" @click="getCode1">
+                        :disabled="isDisabled1 || isGettingCode1" @click="debouncedGetCode1">
                         {{ SendCode_text1 }}
                       </el-button>
                     </div>
@@ -246,6 +246,12 @@ export default {
       timer: null,        // 手机登录验证码定时器
       timer1: null,       // 重置密码验证码定时器
 
+      // 防抖相关
+      isGettingCode: false, // 是否正在获取验证码
+      isGettingCode1: false, // 是否正在获取重置密码验证码
+      debounceTimer: null,  // 防抖定时器
+      debounceTimer1: null, // 重置密码防抖定时器
+
       // 对话框和加载状态
       dialogVisible: false, // 重置密码对话框是否可见
       loading: false,       // 登录按钮加载状态
@@ -347,6 +353,50 @@ export default {
   },
 
   methods: {
+    // 防抖函数
+    debounce(func, wait) {
+      return function() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+          func.apply(context, args);
+        }, wait);
+      };
+    },
+
+    // 防抖后的获取验证码方法
+    debouncedGetCode: function() {
+      if (this.isDisabled || this.isGettingCode) return;
+
+      this.isGettingCode = true;
+
+      // 清除之前的定时器
+      clearTimeout(this.debounceTimer);
+
+      // 设置新的定时器，300ms后执行
+      this.debounceTimer = setTimeout(() => {
+        this.getCode();
+        this.isGettingCode = false;
+      }, 300);
+    },
+
+    // 防抖后的获取重置密码验证码方法
+    debouncedGetCode1: function() {
+      if (this.isDisabled1 || this.isGettingCode1) return;
+
+      this.isGettingCode1 = true;
+
+      // 清除之前的定时器
+      clearTimeout(this.debounceTimer1);
+
+      // 设置新的定时器，300ms后执行
+      this.debounceTimer1 = setTimeout(() => {
+        this.getCode1();
+        this.isGettingCode1 = false;
+      }, 300);
+    },
+
     // 跳转到百度产品页面
     goBaidu(listUrl, url) {
       this.$store.commit('setRedirectUrl', url)
@@ -695,6 +745,9 @@ export default {
             });
           }
         }
+      }).catch(error => {
+        this.isGettingCode = false;
+        this.$message.error('验证码获取失败');
       });
     },
 
@@ -743,6 +796,9 @@ export default {
             type: "error",
           });
         }
+      }).catch(error => {
+        this.isGettingCode1 = false;
+        this.$message.error('验证码获取失败');
       });
     },