updata

f/web-kboss/src/views/H5/calculate/index.vue

@@ -4,7 +4,22 @@
     <div class="top-tit">
       开元云
     </div>
-
+     <!-- 搜索 -->
+    <div class="search">
+      <div class="search-box">
+        <div class="input">
+          <input
+            type="text"
+            placeholder="请输入产品名称"
+            v-model="searchValue"
+            @keyup.enter="handleSearch"
+          />
+        </div>
+        <div class="search-btn" @click="handleSearch">
+          搜索
+        </div>
+      </div>
+    </div>
     <!-- 供应商 -->
     <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
       <div
@@ -32,6 +47,7 @@
             v-for="product in thrMenu.value"
             :key="product.id"
             class="box-item"
+            v-show="shouldShowProduct(product)"
           >
             <!-- 标题 -->
             <div class="item-tit">
@@ -83,6 +99,8 @@ export default {
     return {
       cloudData: {},
       activeSupplierIndex: 0, // 默认选中第一个供应商
+      searchValue: '', // 搜索关键词
+      isSearching: false, // 是否正在搜索
 
       // 咨询弹窗相关
       showConsultDialog: false,
@@ -116,6 +134,26 @@ export default {
       }
     },
 
+    // 处理搜索
+    handleSearch() {
+      this.isSearching = !!this.searchValue.trim()
+      // 这里可以根据需要添加实际的搜索逻辑，比如调用API
+      console.log('搜索关键词:', this.searchValue)
+    },
+
+    // 判断产品是否应该显示
+    shouldShowProduct(product) {
+      if (!this.isSearching) {
+        return true
+      }
+      // 模糊搜索：检查产品名称或描述中是否包含搜索关键词
+      const keyword = this.searchValue.toLowerCase().trim()
+      return (
+        (product.name && product.name.toLowerCase().includes(keyword)) ||
+        (product.description && product.description.toLowerCase().includes(keyword))
+      )
+    },
+
     // 选择供应商
     selectSupplier(index) {
       this.activeSupplierIndex = index

f/web-kboss/src/views/H5/cloud/index.vue

@@ -4,6 +4,22 @@
     <div class="top-tit">
       开元云
     </div>
+     <!-- 搜索 -->
+    <div class="search">
+      <div class="search-box">
+        <div class="input">
+          <input
+            type="text"
+            placeholder="请输入产品名称"
+            v-model="searchValue"
+            @keyup.enter="handleSearch"
+          />
+        </div>
+        <div class="search-btn" @click="handleSearch">
+          搜索
+        </div>
+      </div>
+    </div>
 
     <!-- 供应商 -->
     <div class="supplier-container">
@@ -19,7 +35,7 @@
       <!-- 只显示当前选中的供应商的产品 -->
       <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
         <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
-          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item" v-show="shouldShowProduct(product)">
             <!-- 标题 -->
             <div class="item-tit">
               {{ product.name }}
@@ -67,6 +83,8 @@ export default {
     return {
       cloudData: {},
       activeSupplierIndex: 0, // 默认选中第一个供应商
+      searchValue: '', // 搜索关键词
+      isSearching: false, // 是否正在搜索
 
       // 咨询弹窗相关
       showConsultDialog: false,
@@ -98,6 +116,27 @@ export default {
     }
   },
   methods: {
+    // 处理搜索
+    handleSearch() {
+      this.isSearching = !!this.searchValue.trim()
+      console.log('搜索关键词:', this.searchValue)
+    },
+
+    // 判断产品是否应该显示
+    shouldShowProduct(product) {
+      if (!this.isSearching) {
+        return true
+      }
+      // 模糊搜索
+      const keyword = this.searchValue.toLowerCase().trim()
+      return (
+        (product.name && product.name.toLowerCase().includes(keyword)) ||
+        (product.description && product.description.toLowerCase().includes(keyword)) ||
+        (product.label && product.label.toLowerCase().includes(keyword)) ||
+        (product.ssecTitle && product.ssecTitle.toLowerCase().includes(keyword))
+      )
+    },
+
     // 判断是否显示供应商标签
     showProductDesc(product) {
       // 如果是百度云且有label字段

f/web-kboss/src/views/H5/less/all/index.css

@@ -111,8 +111,42 @@
 .search {
   width: 100%;
   margin: 0.2rem 0;
+  padding: 0.2rem;
+}
+.search .search-box {
   display: flex;
+  justify-content: space-between;
+  background-color: #f3f3f3;
+  border-radius: 0.24rem;
 }
 .search .search-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 0.2rem;
+  width: 18%;
+  color: #fff;
+  padding: 0.2rem 0;
+  background: linear-gradient(90deg, #1f70ff, #3a8cff);
+  border-bottom-right-radius: 0.24rem;
+  border-top-right-radius: 0.24rem;
+  font-size: 0.24rem;
+}
+.search .input {
+  width: 80%;
+  padding: 0.2rem 0;
+  padding-left: 0.2rem;
+}
+.search .input input {
+  border: none;
+  /* 去除边框 */
+  outline: none;
+  /* 去除焦点时的外框 */
+  background: none;
+  /* 去除背景色 */
+  padding: 0;
+  /* 去除内边距 */
+  margin: 0;
+  /* 去除外边距，根据需要设置 */
+  width: 100%;
 }

f/web-kboss/src/views/H5/less/all/index.less

@@ -5,20 +5,24 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  font-size: .39rem; /* 增大30%: .3rem * 1.3 = .39rem */
+  font-size: .39rem;
+  /* 增大30%: .3rem * 1.3 = .39rem */
   font-weight: bold;
   margin: .3rem 0;
 }
 
 .supplier-container {
   display: flex;
-  flex-wrap: wrap; /* 允许换行 */
+  flex-wrap: wrap;
+  /* 允许换行 */
   padding: .2rem .22rem;
-  gap: .15rem; /* 使用gap控制间距 */
+  gap: .15rem;
+  /* 使用gap控制间距 */
 }
 
 .supplier {
-  flex-shrink: 0; /* 防止收缩 */
+  flex-shrink: 0;
+  /* 防止收缩 */
 
   .supplier-title {
     font-size: .28rem;
@@ -29,7 +33,8 @@
     cursor: pointer;
     transition: all 0.3s ease;
 
-    white-space: nowrap; /* 防止文字换行 */
+    white-space: nowrap;
+    /* 防止文字换行 */
 
     &:hover {
       background-color: #e0e0e0;
@@ -52,6 +57,7 @@
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 0 .3rem;
+
   .box-item {
     display: flex;
     width: 48%;
@@ -69,19 +75,21 @@
       border-color: #1f70ff;
     }
 
-    .item-tit{
+    .item-tit {
       font-size: .26rem;
       color: #000;
       font-weight: bold;
       margin-bottom: .1rem;
     }
-    .item-detail{
+
+    .item-detail {
       color: #666;
       font-size: .22rem;
       margin: .15rem 0;
       line-height: 1.4;
     }
-    .item-desc{
+
+    .item-desc {
       color: #666;
       background-color: #f8f9fa;
       font-size: .2rem;
@@ -90,11 +98,13 @@
       margin-bottom: .15rem;
       border: .01rem solid #e9ecef;
     }
-    .item-btn{
+
+    .item-btn {
       width: 100%;
       display: flex;
       justify-content: flex-end;
-      .btn{
+
+      .btn {
         background: linear-gradient(90deg, #1f70ff, #3a8cff);
         color: #fff;
         padding: .08rem .2rem;
@@ -113,11 +123,49 @@
     }
   }
 }
-.search{
+
+.search {
   width: 100%;
   margin: .2rem 0;
-  display: flex;
+  padding: .2rem;
-  .search-btn{
+
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    background-color: #f3f3f3;
+    border-radius: .24rem;
+  }
+
+  .search-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     font-size: .2rem;
+    width: 18%;
+    color: #fff;
+    padding: .2rem 0;
+    background: linear-gradient(90deg, #1f70ff, #3a8cff);
+    border-bottom-right-radius: .24rem;
+    border-top-right-radius: .24rem;
+    font-size: .24rem;
+  }
+
+  .input {
+    width: 80%;
+    padding: .2rem 0;
+    padding-left: .2rem;
+    input {
+      border: none;
+      /* 去除边框 */
+      outline: none;
+      /* 去除焦点时的外框 */
+      background: none;
+      /* 去除背景色 */
+      padding: 0;
+      /* 去除内边距 */
+      margin: 0;
+      /* 去除外边距，根据需要设置 */
+      width: 100%;
+    }
   }
 }

f/web-kboss/src/views/H5/less/cloud/cloud.css

@@ -117,3 +117,45 @@
   transform: translateY(-0.02rem);
   box-shadow: 0 0.04rem 0.1rem rgba(31, 112, 255, 0.3);
 }
+.search {
+  width: 100%;
+  margin: 0.2rem 0;
+  padding: 0.2rem;
+}
+.search .search-box {
+  display: flex;
+  justify-content: space-between;
+  background-color: #f3f3f3;
+  border-radius: 0.24rem;
+}
+.search .search-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.2rem;
+  width: 18%;
+  color: #fff;
+  padding: 0.2rem 0;
+  background: linear-gradient(90deg, #1f70ff, #3a8cff);
+  border-bottom-right-radius: 0.24rem;
+  border-top-right-radius: 0.24rem;
+  font-size: 0.24rem;
+}
+.search .input {
+  width: 80%;
+  padding: 0.2rem 0;
+  padding-left: 0.2rem;
+}
+.search .input input {
+  border: none;
+  /* 去除边框 */
+  outline: none;
+  /* 去除焦点时的外框 */
+  background: none;
+  /* 去除背景色 */
+  padding: 0;
+  /* 去除内边距 */
+  margin: 0;
+  /* 去除外边距，根据需要设置 */
+  width: 100%;
+}

f/web-kboss/src/views/H5/less/cloud/cloud.less

@@ -134,3 +134,48 @@
     }
   }
 }
+.search {
+  width: 100%;
+  margin: .2rem 0;
+  padding: .2rem;
+
+  .search-box {
+    display: flex;
+    justify-content: space-between;
+    background-color: #f3f3f3;
+    border-radius: .24rem;
+  }
+
+  .search-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: .2rem;
+    width: 18%;
+    color: #fff;
+    padding: .2rem 0;
+    background: linear-gradient(90deg, #1f70ff, #3a8cff);
+    border-bottom-right-radius: .24rem;
+    border-top-right-radius: .24rem;
+    font-size: .24rem;
+  }
+
+  .input {
+    width: 80%;
+    padding: .2rem 0;
+    padding-left: .2rem;
+    input {
+      border: none;
+      /* 去除边框 */
+      outline: none;
+      /* 去除焦点时的外框 */
+      background: none;
+      /* 去除背景色 */
+      padding: 0;
+      /* 去除内边距 */
+      margin: 0;
+      /* 去除外边距，根据需要设置 */
+      width: 100%;
+    }
+  }
+}

f/web-kboss/src/views/H5/net/index.vue

@@ -4,7 +4,22 @@
     <div class="top-tit">
       开元云
     </div>
-
+     <!-- 搜索 -->
+    <div class="search">
+      <div class="search-box">
+        <div class="input">
+          <input
+            type="text"
+            placeholder="请输入产品名称"
+            v-model="searchValue"
+            @keyup.enter="handleSearch"
+          />
+        </div>
+        <div class="search-btn" @click="handleSearch">
+          搜索
+        </div>
+      </div>
+    </div>
     <!-- 供应商 -->
     <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
       <div
@@ -32,6 +47,7 @@
             v-for="product in thrMenu.value"
             :key="product.id"
             class="box-item"
+            v-show="shouldShowProduct(product)"
           >
             <!-- 标题 -->
             <div class="item-tit">
@@ -76,13 +92,14 @@ import { reqProductConsult } from '@/api/H5/index'
 export default {
   components: {
     ProductConsultDialog,
-
   },
 
   data() {
     return {
       cloudData: {},
       activeSupplierIndex: 0, // 默认选中第一个供应商
+      searchValue: '', // 搜索关键词
+      isSearching: false, // 是否正在搜索
 
       // 咨询弹窗相关
       showConsultDialog: false,
@@ -116,6 +133,25 @@ export default {
       }
     },
 
+    // 处理搜索
+    handleSearch() {
+      this.isSearching = !!this.searchValue.trim()
+      console.log('搜索关键词:', this.searchValue)
+    },
+
+    // 判断产品是否应该显示
+    shouldShowProduct(product) {
+      if (!this.isSearching) {
+        return true
+      }
+      // 模糊搜索
+      const keyword = this.searchValue.toLowerCase().trim()
+      return (
+        (product.name && product.name.toLowerCase().includes(keyword)) ||
+        (product.description && product.description.toLowerCase().includes(keyword))
+      )
+    },
+
     // 选择供应商
     selectSupplier(index) {
       this.activeSupplierIndex = index

f/web-kboss/src/views/H5/use/index.vue

@@ -6,12 +6,19 @@
     </div>
     <!-- 搜索 -->
     <div class="search">
+      <div class="search-box">
         <div class="input">
-          <input type="text" placeholder="请输入产品名称" v-model="searchValue"></input>
+          <input
+            type="text"
+            placeholder="请输入产品名称"
+            v-model="searchValue"
+            @keyup.enter="handleSearch"
+          />
         </div>
-        <div class="search-btn">
+        <div class="search-btn" @click="handleSearch">
-            搜索
+          搜索
         </div>
+      </div>
     </div>
     <!-- 供应商 -->
     <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
@@ -28,7 +35,7 @@
       <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
         <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
           <!-- 循环每个分类下的产品 -->
-          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item" v-show="shouldShowProduct(product)">
             <!-- 标题 -->
             <div class="item-tit">
               {{ product.name }}
@@ -73,6 +80,8 @@ export default {
     return {
       cloudData: {},
       activeSupplierIndex: 0, // 默认选中第一个供应商
+      searchValue: '', // 搜索关键词
+      isSearching: false, // 是否正在搜索
 
       // 咨询弹窗相关
       showConsultDialog: false,
@@ -106,6 +115,25 @@ export default {
       }
     },
 
+    // 处理搜索
+    handleSearch() {
+      this.isSearching = !!this.searchValue.trim()
+      console.log('搜索关键词:', this.searchValue)
+    },
+
+    // 判断产品是否应该显示
+    shouldShowProduct(product) {
+      if (!this.isSearching) {
+        return true
+      }
+      // 模糊搜索：检查产品名称或分类名称中是否包含搜索关键词
+      const keyword = this.searchValue.toLowerCase().trim()
+      return (
+        (product.name && product.name.toLowerCase().includes(keyword)) ||
+        (this.currentCategory && this.currentCategory.thrTitle && this.currentCategory.thrTitle.toLowerCase().includes(keyword))
+      )
+    },
+
     // 选择供应商
     selectSupplier(index) {
       this.activeSupplierIndex = index