updata

f/web-kboss/src/App.vue

@@ -41,51 +41,6 @@ import FloatingBox from './components/FloatingBox/FloatingBox.vue'; // 导入悬
 import '@/assets/elementStyle.css'
 import Hammer from 'hammerjs';
 import {mapState} from "vuex";
-import {white} from "mockjs/src/mock/random/color_dict";
-// 禁止通过	ctrl + +/- 和 	ctrl + 滚轮 对页面进行缩放
-// document.addEventListener(
-//   "keydown",
-//   function (event) {
-//     if (
-//       (event.ctrlKey === true || event.metaKey === true) &&
-//       (event.which === 61 ||
-//         event.which === 107 ||
-//         event.which === 173 ||
-//         event.which === 109 ||
-//         event.which === 187 ||
-//         event.which === 189)
-//     ) {
-//       event.preventDefault();
-//     }
-//   },
-//   false
-// );
-// Chrome IE 360
-// window.addEventListener(
-//   "mousewheel",
-//   function (event) {
-//     if (event.ctrlKey === true || event.metaKey) {
-//       event.preventDefault();
-//
-//   },
-//   {
-//     passive: false,
-//   }
-// );
-//
-// // firefox
-// window.addEventListener(
-//   "DOMMouseScroll",
-//   function (event) {
-//     if (event.ctrlKey === true || event.metaKey) {
-//       event.preventDefault();
-//     }
-//   },
-//   {
-//     passive: false,
-//   }
-// );
-
 export default {
   name: "App",
   components: {
@@ -100,16 +55,6 @@ export default {
       customerName: ''
     }
   },
-  created() {
-    //   if (sessionStorage.getItem('userId')) {
-    //     if (sessionStorage.getItem('org_type')=='2'||sessionStorage.getItem('org_type')=='3') {
-    //       this.isshow=true
-    //     }else{
-    //       this.isshow=false
-    //     }
-    //   }
-
-  },
   mounted() {
     this.audioElement = new Audio('https://www.kaiyuancloud.cn/dev/idfile?path=/batch_upload/phone-ring.mp3');
 

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

@@ -4,7 +4,8 @@
     <div class="top-tit">
       开元云
     </div>
-     <!-- 搜索 -->
+
+    <!-- 搜索 -->
     <div class="search">
       <div class="search-box">
         <div class="input">
@@ -20,18 +21,17 @@
         </div>
       </div>
     </div>
-    <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
-      <div
-        v-for="(value, index) in cloudData.secMenu"
-        :key="index"
-        class="supplier"
-        @click="selectSupplier(index)"
-      >
-        <div
-          class="supplier-title"
-          :class="{ 'active': activeSupplierIndex === index }"
-        >
+
+    <!-- 搜索提示 -->
+    <div v-if="isSearching && searchValue" class="search-tip">
+      搜索关键词: "{{ searchValue }}"
+      <span class="clear-search" @click="clearSearch">× 清空搜索</span>
+    </div>
+
+    <!-- 供应商 - 只在非搜索模式显示 -->
+    <div v-if="!isSearching && cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
+      <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
+        <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
           {{ value.secTitle }}
         </div>
       </div>
@@ -39,34 +39,45 @@
 
     <!-- 产品 -->
     <div class="box">
-      <!-- 只显示当前选中的供应商的产品 -->
-      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+      <!-- 搜索模式：显示搜索结果 -->
+      <template v-if="isSearching && searchResults.length > 0">
+        <div v-for="product in searchResults" :key="product.id" class="box-item">
+          <div class="item-tit">
+            {{ product.name }}
+          </div>
+          <div class="item-detail">
+            {{ product.description }}
+          </div>
+          <div class="item-desc">
+            智算
+          </div>
+          <div class="item-btn">
+            <div class="btn" @click="goToDetail(product.id)">
+              查看详情
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索模式：无结果 -->
+      <div v-else-if="isSearching && searchResults.length === 0" class="no-data">
+        未找到与"{{ searchValue }}"相关的产品
+      </div>
+
+      <!-- 正常模式：只显示当前选中的供应商的产品 -->
+      <template v-else-if="!isSearching && 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"
-            v-show="shouldShowProduct(product)"
-          >
-            <!-- 标题 -->
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
             <div class="item-tit">
               {{ product.name }}
             </div>
-            <!-- 详情 -->
             <div class="item-detail">
               {{ product.description }}
             </div>
-            <!-- 描述 -->
             <div class="item-desc">
               智算
             </div>
-            <!-- 立即咨询和查看详情 -->
             <div class="item-btn">
-              <!-- <div class="btn" @click="openConsultDialog(product, thrMenu)">
-                立即咨询
-              </div> -->
-              <!-- 查看详情 带着id跳转/h5HomePage/details -->
               <div class="btn" @click="goToDetail(product.id)">
                 查看详情
               </div>
@@ -74,84 +85,91 @@
           </div>
         </template>
       </template>
-    </div>
 
+      <!-- 正常模式：无数据 -->
+      <div v-else-if="!isSearching && (!cloudData.secMenu || cloudData.secMenu.length === 0)" class="no-data">
+        暂无产品数据
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { reqNavList } from '@/api/H5/index'
-import ProductConsultDialog from '../components/H5_dialog/index.vue'
 
 export default {
-
   data() {
     return {
       cloudData: {},
-      activeSupplierIndex: 0, // 默认选中第一个供应商
-      searchValue: '', // 搜索关键词
-      isSearching: false, // 是否正在搜索
-
-      // 咨询弹窗相关
-      showConsultDialog: false,
-      platformName: '开元云',
-      qrCode: '',
-      consultFormData: {
-        content: '',
-        custom_type: '1',
-        name: '',
-        phone: '',
-        company: '',
-        email: '',
-        checked: false
-      },
-      currentProduct: null,
-      currentCategory: null
+      activeSupplierIndex: 0,
+      searchValue: '',
+      isSearching: false,
+      searchResults: []
     }
   },
   created() {
     this.getCloudData()
   },
   methods: {
-    async getCloudData() {
-      const res = await reqNavList({ url_link: window.location.href })
-      if (res.status == true) {
-        this.cloudData = res.data.product_service[1]
-        // 确保有数据时选中第一个
-        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
-          this.activeSupplierIndex = 0
+    async getCloudData(keyword) {
+      try {
+        const params = {
+          url_link: window.location.href,
+          ...(keyword && { keyword: keyword.trim() })
         }
+
+        const res = await reqNavList(params)
+        if (res.status == true) {
+          if (keyword) {
+            // 搜索模式
+            this.isSearching = true
+            this.searchResults = Array.isArray(res.data) ? res.data : []
+          } else {
+            // 正常模式
+            this.isSearching = false
+            this.searchResults = []
+            this.cloudData = res.data.product_service[1] || {}
+
+            if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+              this.activeSupplierIndex = 0
+            }
+          }
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.isSearching = false
+        this.searchResults = []
       }
     },
 
     // 处理搜索
     handleSearch() {
-      this.isSearching = !!this.searchValue.trim()
-      // 这里可以根据需要添加实际的搜索逻辑，比如调用API
-      console.log('搜索关键词:', this.searchValue)
+      const keyword = this.searchValue.trim()
+      if (keyword) {
+        this.getCloudData(keyword)
+      } else {
+        // 如果搜索框为空，返回正常模式
+        this.clearSearch()
+      }
     },
 
-    // 判断产品是否应该显示
-    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))
-      )
+    // 清空搜索
+    clearSearch() {
+      this.isSearching = false
+      this.searchValue = ''
+      this.searchResults = []
+      this.getCloudData() // 重新加载正常数据
     },
 
     // 选择供应商
     selectSupplier(index) {
-      this.activeSupplierIndex = index
+      if (!this.isSearching) {
+        this.activeSupplierIndex = index
+      }
     },
 
     // 跳转到详情页
     goToDetail(productId) {
-      // 使用路由跳转到详情页，携带productId作为参数
       if (productId === '2113') {
         this.$router.push({
           path: '/h5HomePage/details',
@@ -159,7 +177,7 @@ export default {
             id: productId
           }
         })
-      }else{
+      } else {
         this.$router.push({
           path: '/h5HomePage/netDetail',
           query: {
@@ -173,12 +191,49 @@ export default {
 </script>
 
 <style>
-  html,
-  body {
+  html, body {
     height: 100%;
     overflow-y: auto;
   }
 </style>
+
 <style lang="less" scoped>
-  @import url('../less/all/index.less');
+@import url('../less/all/index.less');
+
+/* 搜索提示样式 */
+.search-tip {
+  padding: 10px 20px;
+  background-color: #f5f7fa;
+  color: #666;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.clear-search {
+  color: #409EFF;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  transition: all 0.3s;
+}
+
+.clear-search:hover {
+  background-color: #ecf5ff;
+  color: #409EFF;
+}
+
+/* 无数据样式 */
+.no-data {
+  text-align: center;
+  padding: 40px 20px;
+  color: #909399;
+  font-size: 14px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin: 20px;
+}
 </style>

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

@@ -4,25 +4,26 @@
     <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"
+            v-model="keyWord"
+            @keyup.enter="search"
           />
         </div>
-        <div class="search-btn" @click="handleSearch">
+        <div class="search-btn" @click="search">
           搜索
         </div>
       </div>
     </div>
 
     <!-- 供应商 -->
-    <div class="supplier-container">
+    <div class="supplier-container" v-if="!isSearchMode">
       <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
         <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
           {{ value.secTitle }}
@@ -32,10 +33,42 @@
 
     <!-- 云产品 -->
     <div class="box">
-      <!-- 只显示当前选中的供应商的产品 -->
-      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+      <!-- 无数据提示 -->
+      <div v-if="showNoData" class="no-data">
+        暂无相关产品数据
+      </div>
+
+      <!-- 搜索模式：显示所有产品 -->
+      <template v-else-if="isSearchMode && searchResults.length > 0">
+        <div v-for="product in searchResults" :key="product.id" class="box-item">
+          <!-- 标题 -->
+          <div class="item-tit">
+            {{ product.name }}
+          </div>
+
+          <!-- 产品描述（如果有） -->
+          <div class="item-detail" v-if="product.description">
+            {{ product.description }}
+          </div>
+
+          <!-- 供应商标签 -->
+          <div class="item-desc" v-if="product.label">
+            {{ product.label }}
+          </div>
+
+          <!-- 立即咨询 -->
+          <div class="item-btn">
+            <div class="btn" @click="openConsultDialog(product, null)">
+              立即咨询
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 正常模式：只显示当前选中的供应商的产品 -->
+      <template v-else-if="!isSearchMode && activeSupplierIndex >= 0">
         <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
-          <div v-for="product in thrMenu.value" :key="product.id" class="box-item" v-show="shouldShowProduct(product)">
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
             <!-- 标题 -->
             <div class="item-tit">
               {{ product.name }}
@@ -83,9 +116,10 @@ export default {
     return {
       cloudData: {},
       activeSupplierIndex: 0, // 默认选中第一个供应商
-      searchValue: '', // 搜索关键词
-      isSearching: false, // 是否正在搜索
-
+      keyWord: '',
+      // 搜索相关
+      isSearchMode: false,
+      searchResults: [],
       // 咨询弹窗相关
       showConsultDialog: false,
       platformName: '开元云',
@@ -100,7 +134,8 @@ export default {
         checked: false
       },
       currentProduct: null,
-      currentCategory: null
+      currentCategory: null,
+      searchTimer: null // 防抖定时器
     }
   },
   created() {
@@ -113,28 +148,25 @@ export default {
         return this.cloudData.secMenu[this.activeSupplierIndex].secTitle
       }
       return ''
+    },
+    // 显示无数据提示
+    showNoData() {
+      if (this.isSearchMode) {
+        return this.searchResults.length === 0
+      } else {
+        return !this.cloudData.secMenu || this.cloudData.secMenu.length === 0
+      }
     }
   },
   methods: {
-    // 处理搜索
-    handleSearch() {
-      this.isSearching = !!this.searchValue.trim()
-      console.log('搜索关键词:', this.searchValue)
-    },
-
-    // 判断产品是否应该显示
-    shouldShowProduct(product) {
-      if (!this.isSearching) {
-        return true
+    // 防抖处理：避免频繁请求
+    debounce(func, delay = 500) {
+      return (...args) => {
+        if (this.searchTimer) clearTimeout(this.searchTimer)
+        this.searchTimer = setTimeout(() => {
+          func.apply(this, args)
+        }, delay)
       }
-      // 模糊搜索
-      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))
-      )
     },
 
     // 判断是否显示供应商标签
@@ -186,39 +218,49 @@ export default {
       return supplierTitle
     },
 
-    // 获取云数据
-    async getCloudData() {
-      const res = await reqNavList({ url_link: window.location.href })
-      if (res.status == true) {
-        this.cloudData = res.data.product_service[0]
-        console.log('云产品数据:', this.cloudData)
-
-        // 确保有数据时选中第一个
-        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
-          this.activeSupplierIndex = 0
-
-          // 打印数据结构以帮助调试
-          this.cloudData.secMenu.forEach((supplier, index) => {
-            console.log(`供应商 ${index} (${supplier.secTitle}):`)
-            if (supplier.thrMenu && supplier.thrMenu.length > 0) {
-              supplier.thrMenu.forEach((category, catIndex) => {
-                console.log(`  分类 ${catIndex} (${category.thrTitle}):`)
-                if (category.value && category.value.length > 0) {
-                  // 只打印第一个产品作为示例
-                  const firstProduct = category.value[0]
-                  console.log(`    第一个产品:`, {
-                    name: firstProduct.name,
-                    description: firstProduct.description,
-                    label: firstProduct.label,
-                    ssecTitle: firstProduct.ssecTitle,
-                    source: firstProduct.source
-                  })
-                }
-              })
-            }
-          })
-        }
+    // 获取云数据（支持接收keyword参数）
+    async getCloudData(keyword = '') {
+      if (keyword) {
+        this.keyWord = keyword
       }
+
+      try {
+        const res = await reqNavList({
+          url_link: window.location.href,
+          keyword: this.keyWord.trim()  // 去除首尾空格，避免空字符请求
+        })
+
+        if (res.status == true) {
+          // 判断是搜索模式还是正常模式
+          if (this.keyWord.trim() && Array.isArray(res.data)) {
+            // 搜索模式：返回的是数组
+            this.isSearchMode = true
+            this.searchResults = res.data
+            console.log('搜索模式数据:', this.searchResults)
+          } else {
+            // 正常模式：返回的是嵌套结构
+            this.isSearchMode = false
+            this.searchResults = []
+            this.cloudData = res.data.product_service[0] || {}
+            console.log('正常模式数据:', this.cloudData)
+
+            // 确保有数据时重置选中第一个供应商
+            if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+              this.activeSupplierIndex = 0
+            } else {
+              this.activeSupplierIndex = -1
+            }
+          }
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+      }
+    },
+
+    // 搜索方法（绑定防抖）
+    search: function() {
+      // 调用防抖后的获取数据方法
+      this.debounce(this.getCloudData)(this.keyWord)
     },
 
     // 选择供应商（不允许取消选中）
@@ -232,9 +274,14 @@ export default {
       this.currentCategory = category
 
       // 设置咨询表单的预填内容
+      let content = `我想咨询关于【${product.name}】的产品信息`
+      if (product.description) {
+        content += ` - ${product.description}`
+      }
+
       this.consultFormData = {
         ...this.consultFormData,
-        content: `我想咨询关于【${product.name}】的产品信息`
+        content: content
       }
 
       this.showConsultDialog = true
@@ -249,8 +296,8 @@ export default {
         product_description: this.currentProduct?.description || '',
         product_label: this.currentProduct?.label || '',
         product_category: this.currentCategory?.thrTitle || '',
-        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
-        page_type: 'product_list'
+        supplier_name: this.isSearchMode ? '搜索产品' : (this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || ''),
+        page_type: this.isSearchMode ? 'search_result' : 'product_list'
       }
 
       return await reqProductConsult(submitData)
@@ -259,7 +306,6 @@ export default {
     // 咨询成功回调
     handleConsultSuccess(response) {
       console.log('咨询提交成功:', response)
-      // 可以在这里添加后续逻辑，比如记录咨询历史等
       this.$message.success('咨询提交成功，我们将尽快联系您！')
     },
 
@@ -277,7 +323,19 @@ export default {
         email: '',
         checked: false
       }
+    },
+
+    // 清空搜索
+    clearSearch() {
+      this.keyWord = ''
+      this.isSearchMode = false
+      this.searchResults = []
+      this.getCloudData()
     }
+  },
+  // 销毁时清除定时器
+  beforeDestroy() {
+    if (this.searchTimer) clearTimeout(this.searchTimer)
   }
 }
 </script>
@@ -291,4 +349,27 @@ body {
 </style>
 <style lang="less" scoped>
  @import url('../less/cloud/cloud.less');
+
+ // 新增无数据样式
+ .no-data {
+   text-align: center;
+   padding: 40px 0;
+   color: #999;
+   font-size: 14px;
+ }
+
+ // 搜索模式提示
+ .search-mode-tip {
+   text-align: center;
+   padding: 10px 0;
+   color: #666;
+   font-size: 14px;
+
+   .clear-btn {
+     color: #409EFF;
+     text-decoration: underline;
+     cursor: pointer;
+     margin-left: 10px;
+   }
+ }
 </style>

f/web-kboss/src/views/H5/components/footer/footer.vue

@@ -54,7 +54,7 @@
         </div>
 
         <!-- 备案信息 -->
-        <div class="footer-bottom">
+        <!-- <div class="footer-bottom">
           <div class="icp-info">
             <div class="icp-item">
               <span class="icp-text">ICP备案号：</span>
@@ -79,7 +79,7 @@
               </router-link>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>

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

@@ -265,7 +265,7 @@ export default {
     border-radius: .3rem;
     padding: .2rem .2rem;
     background-color: #fff;
-
+    padding-bottom: 2rem;
     // 标题
     .box-title {
       font-size: 0.24rem;
@@ -297,6 +297,9 @@ export default {
 
     // 价格
     .price {
+      width: calc(100% - 0.4rem);
+      position: absolute;
+      bottom: .2rem;
       font-size: .16rem;
       color: #F62424;
       margin-top: .2rem;

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

@@ -61,6 +61,8 @@
   padding: 0.15rem 0.2rem;
   margin: 0.34rem 0;
   transition: all 0.3s ease;
+  position: relative;
+  padding-bottom: 0.6rem;
 }
 .box .box-item:hover {
   transform: translateY(-0.05rem);
@@ -91,17 +93,21 @@
 .box .box-item .item-btn {
   width: 100%;
   display: flex;
-  justify-content: flex-end;
+  padding-top: 0.2rem;
 }
 .box .box-item .item-btn .btn {
-  background: linear-gradient(90deg, #1f70ff, #3a8cff);
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  border-radius: 0.04rem;
+  padding: 0.08rem 0;
+  width: calc(100% - 0.4rem);
+  text-align: center;
   color: #fff;
-  padding: 0.08rem 0.2rem;
-  border-radius: 0.15rem;
-  font-size: 0.24rem;
+  font-size: 0.182rem;
   cursor: pointer;
   transition: all 0.3s ease;
   border: none;
+  position: absolute;
+  bottom: 0.2rem;
 }
 .box .box-item .item-btn .btn:hover {
   background: linear-gradient(90deg, #0d5aff, #2a7aff);

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

@@ -68,7 +68,8 @@
     padding: .15rem .2rem;
     margin: .34rem 0;
     transition: all 0.3s ease;
-
+    position: relative;
+    padding-bottom: .6rem;
     &:hover {
       transform: translateY(-0.05rem);
       box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
@@ -102,17 +103,23 @@
     .item-btn {
       width: 100%;
       display: flex;
-      justify-content: flex-end;
-
+      // justify-content: flex-end;
+      padding-top: .2rem;
       .btn {
-        background: linear-gradient(90deg, #1f70ff, #3a8cff);
+        background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+        border-radius: 0.04rem;
+        // padding: 0.08rem ;
+        padding: .08rem 0;
+        width: calc(100% - 0.4rem);
+
+        text-align: center;
         color: #fff;
-        padding: .08rem .2rem;
-        border-radius: .15rem;
-        font-size: 0.24rem;
+        font-size: 0.182rem;
         cursor: pointer;
         transition: all 0.3s ease;
         border: none;
+        position: absolute;
+        bottom: 0.2rem;
 
         &:hover {
           background: linear-gradient(90deg, #0d5aff, #2a7aff);
@@ -178,9 +185,9 @@
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.2) 50%,
-        rgba(255, 255, 255, 0) 100%);
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.2) 50%,
+          rgba(255, 255, 255, 0) 100%);
       transition: left 0.5s ease;
     }
 
@@ -259,6 +266,7 @@
     opacity: 0;
     transform: translateY(.1rem);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);

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

@@ -53,6 +53,7 @@
   padding: 0 0.3rem;
 }
 .box .box-item {
+  position: relative;
   display: flex;
   width: 48%;
   flex-direction: column;
@@ -62,6 +63,7 @@
   padding: 0.15rem 0.2rem;
   margin: 0.34rem 0;
   transition: all 0.3s ease;
+  padding-bottom: 0.6rem;
 }
 .box .box-item:hover {
   transform: translateY(-0.05rem);
@@ -99,18 +101,21 @@
 .box .box-item .item-btn {
   width: 100%;
   display: flex;
-  justify-content: flex-end;
+  padding-top: 0.2rem;
 }
 .box .box-item .item-btn .btn {
-  background: linear-gradient(90deg, #1f70ff, #3a8cff);
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  border-radius: 0.04rem;
+  padding: 0.08rem 0;
+  width: calc(100% - 0.4rem);
+  text-align: center;
   color: #fff;
-  padding: 0.08rem 0.2rem;
-  border-radius: 0.15rem;
-  font-size: 0.24rem;
-  /* 修改为下方代码的字体大小 */
+  font-size: 0.182rem;
   cursor: pointer;
   transition: all 0.3s ease;
   border: none;
+  position: absolute;
+  bottom: 0.2rem;
 }
 .box .box-item .item-btn .btn:hover {
   background: linear-gradient(90deg, #0d5aff, #2a7aff);

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

@@ -60,6 +60,7 @@
   padding: 0 .3rem;
 
   .box-item {
+    position: relative;
     display: flex;
     width: 48%;
     flex-direction: column;
@@ -69,6 +70,7 @@
     padding: .15rem .2rem;
     margin: .34rem 0;
     transition: all 0.3s ease;
+    padding-bottom: .6rem;
 
     &:hover {
       transform: translateY(-0.05rem);
@@ -112,18 +114,24 @@
     .item-btn {
       width: 100%;
       display: flex;
-      justify-content: flex-end;
+      // justify-content: flex-end;
+      padding-top: .2rem;
 
       .btn {
-        background: linear-gradient(90deg, #1f70ff, #3a8cff);
+        background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+        border-radius: 0.04rem;
+        // padding: 0.08rem ;
+        padding: .08rem 0;
+        width: calc(100% - 0.4rem);
+
+        text-align: center;
         color: #fff;
-        padding: .08rem .2rem;
-        border-radius: .15rem;
-        font-size: 0.24rem;
-        /* 修改为下方代码的字体大小 */
+        font-size: 0.182rem;
         cursor: pointer;
         transition: all 0.3s ease;
         border: none;
+        position: absolute;
+        bottom: 0.2rem;
 
         &:hover {
           background: linear-gradient(90deg, #0d5aff, #2a7aff);
@@ -134,6 +142,7 @@
     }
   }
 }
+
 .search {
   width: 100%;
   margin: .3rem 0;
@@ -188,9 +197,9 @@
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.2) 50%,
-        rgba(255, 255, 255, 0) 100%);
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.2) 50%,
+          rgba(255, 255, 255, 0) 100%);
       transition: left 0.5s ease;
     }
 
@@ -269,6 +278,7 @@
     opacity: 0;
     transform: translateY(.1rem);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);

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

@@ -5,6 +5,10 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
+.logo-item {
+  display: flex;
+  align-items: center;
+}
 .top-box {
   width: 100%;
   height: 50vh;
@@ -79,16 +83,16 @@
   display: flex;
   flex-direction: column;
   background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
-  border: 1px solid rgba(39, 90, 255, 0.1);
+  border: 0.01rem solid rgba(39, 90, 255, 0.1);
   transition: all 0.3s ease;
   position: relative;
-  padding-bottom: 1.2rem;
+  padding-bottom: 1.8rem;
 }
 .base-box .content .item-box:hover,
 .journey-box .content .item-box:hover,
 .latitude-box .content .item-box:hover {
   box-shadow: 0 0.04rem 0.16rem rgba(39, 90, 255, 0.12);
-  transform: translateY(-2px);
+  transform: translateY(-0.02rem);
   border-color: rgba(39, 90, 255, 0.2);
   background: linear-gradient(135deg, #e8f2ff 0%, #ffffff 100%);
 }
@@ -145,10 +149,13 @@
 .base-box .content .item-box .item-price,
 .journey-box .content .item-box .item-price,
 .latitude-box .content .item-box .item-price {
+  width: calc(100% - 0.4rem);
+  padding-top: 0.2rem;
+  border-top: 0.02rem dashed #d4d6e1;
   font-size: 0.13rem;
   font-weight: bold;
   color: #d4d6e1;
-  margin: 0.15rem 0;
+  margin: 0.2rem 0;
   position: absolute;
   bottom: 0.6rem;
 }
@@ -194,7 +201,7 @@
   margin-top: auto;
   width: 100%;
   position: relative;
-  bottom: -0.9rem;
+  bottom: -1.6rem;
 }
 .base-box .content .item-box .item-button .item-button-text,
 .journey-box .content .item-box .item-button .item-button-text,
@@ -228,8 +235,9 @@
 .partner .partner-scroll .logo-scroll-container {
   display: flex;
   height: 100%;
-  animation: scroll 15s linear infinite;
+  animation: scroll linear infinite;
   white-space: nowrap;
+  width: max-content;
 }
 .partner .partner-scroll .logo-item {
   flex: 0 0 auto;
@@ -248,12 +256,14 @@
   height: 100%;
   object-fit: contain;
 }
+/* 关键：无缝循环滚动动画 */
 @keyframes scroll {
   0% {
     transform: translateX(0);
   }
   100% {
-    transform: translateX(-50%);
+    /* 因为图片重复了三份，所以移动33.33%实现无缝循环 */
+    transform: translateX(-33.33%);
   }
 }
 .footer {
@@ -273,7 +283,7 @@
   padding: 0.6rem 0.2rem 0.4rem;
   position: relative;
   overflow: hidden;
-  border-top: 1px solid #e8edf5;
+  border-top: 0.01rem solid #e8edf5;
 }
 .footer:before {
   content: '';
@@ -308,9 +318,9 @@
   padding: 0.3rem 0.2rem;
   background: #fff;
   border-radius: 0.16rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.05);
   margin-top: 0.4rem;
-  border: 1px solid #eef2f9;
+  border: 0.01rem solid #eef2f9;
   width: 100%;
 }
 @media (min-width: 768px) {
@@ -358,7 +368,7 @@
     gap: 0.16rem;
   }
 }
-.footer-center .contact-item 下 .phone-link {
+.footer-center .contact-item .phone-link {
   color: #333;
   text-decoration: none;
   transition: all 0.3s;
@@ -366,7 +376,7 @@
   font-size: 0.208rem;
   /* 增大30%: 0.16rem * 1.3 = 0.208rem */
 }
-.footer-center .contact-item 下 .phone-link:hover {
+.footer-center .contact-item .phone-link:hover {
   color: #275AFF;
   text-decoration: underline;
 }
@@ -410,8 +420,8 @@
   background: #fff;
   border-radius: 0.16rem;
   padding: 0.24rem;
-  box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
-  border: 1px solid #eef2f9;
+  box-shadow: 0 0.02rem 0.12rem rgba(39, 90, 255, 0.08);
+  border: 0.01rem solid #eef2f9;
   transition: all 0.3s ease;
 }
 .code-img .qr-box:hover {

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

@@ -6,6 +6,11 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.logo-item {
+  display: flex;
+  align-items: center;
+}
+
 .top-box {
   width: 100%;
   height: 50vh;
@@ -85,13 +90,14 @@
       display: flex;
       flex-direction: column;
       background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
-      border: 1px solid rgba(39, 90, 255, 0.1);
+      border: .01rem solid rgba(39, 90, 255, 0.1);
       transition: all 0.3s ease;
       position: relative;
-      padding-bottom: 1.2rem;
+      padding-bottom: 1.8rem;
+
       &:hover {
         box-shadow: 0 .04rem .16rem rgba(39, 90, 255, 0.12);
-        transform: translateY(-2px);
+        transform: translateY(-0.02rem);
         border-color: rgba(39, 90, 255, 0.2);
         background: linear-gradient(135deg, #e8f2ff 0%, #ffffff 100%);
       }
@@ -141,12 +147,17 @@
       }
 
       .item-price {
+        width: calc(100% - 0.4rem);
+        padding-top: 0.2rem;
+        // 上虚线
+        border-top: .02rem dashed #d4d6e1;
         font-size: 0.13rem;
         font-weight: bold;
         color: #d4d6e1;
-        margin: 0.15rem 0;
+        margin: 0.2rem 0;
         position: absolute;
         bottom: .6rem;
+
         .price {
           font-size: .38rem;
           color: #f52220;
@@ -184,10 +195,12 @@
         margin-top: auto;
         width: 100%;
         position: relative;
-        bottom: -0.9rem;
+        bottom: -1.6rem;
+
         .item-button-text {
           color: #fff;
-          font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
+          font-size: 0.182rem;
+          /* 增大30%: 0.14rem * 1.3 = 0.182rem */
         }
       }
     }
@@ -220,8 +233,9 @@
     .logo-scroll-container {
       display: flex;
       height: 100%;
-      animation: scroll 15s linear infinite;
+      animation: scroll linear infinite;
       white-space: nowrap;
+      width: max-content;
     }
 
     .logo-item {
@@ -245,13 +259,15 @@
   }
 }
 
+/* 关键：无缝循环滚动动画 */
 @keyframes scroll {
   0% {
     transform: translateX(0);
   }
 
   100% {
-    transform: translateX(-50%);
+    /* 因为图片重复了三份，所以移动33.33%实现无缝循环 */
+    transform: translateX(-33.33%);
   }
 }
 
@@ -276,7 +292,7 @@
   // margin-top: 1rem;
   position: relative;
   overflow: hidden;
-  border-top: 1px solid #e8edf5;
+  border-top: .01rem solid #e8edf5;
 }
 
 .footer:before {
@@ -322,9 +338,9 @@
   padding: 0.3rem 0.2rem;
   background: #fff;
   border-radius: 0.16rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.05);
   margin-top: 0.4rem;
-  border: 1px solid #eef2f9;
+  border: .01rem solid #eef2f9;
   width: 100%;
 
   @media (min-width: 768px) {
@@ -372,13 +388,15 @@
         align-items: center;
         gap: 0.16rem;
       }
-    }下
+    }
+
     .phone-link {
       color: #333;
       text-decoration: none;
       transition: all 0.3s;
       font-weight: 500;
-      font-size: 0.208rem; /* 增大30%: 0.16rem * 1.3 = 0.208rem */
+      font-size: 0.208rem;
+      /* 增大30%: 0.16rem * 1.3 = 0.208rem */
 
       &:hover {
         color: #275AFF;
@@ -400,7 +418,8 @@
       text-decoration: none;
       word-break: break-all;
       font-weight: 500;
-      font-size: 0.208rem; /* 增大30%: 0.16rem * 1.3 = 0.208rem */
+      font-size: 0.208rem;
+      /* 增大30%: 0.16rem * 1.3 = 0.208rem */
 
       &:hover {
         color: #2ebdfa;
@@ -428,13 +447,12 @@
     background: #fff;
     border-radius: 0.16rem;
     padding: 0.24rem;
-    box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
-    border: 1px solid #eef2f9;
+    box-shadow: 0 .02rem .12rem rgba(39, 90, 255, 0.08);
+    border: .01rem solid #eef2f9;
     transition: all 0.3s ease;
 
     &:hover {
       background: #fff;
-
       border-color: #2ebdfa;
       transform: translateY(-4px);
       box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15);
@@ -460,7 +478,8 @@
 
     .qr-content {
       color: #333;
-      font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
+      font-size: 0.182rem;
+      /* 增大30%: 0.14rem * 1.3 = 0.182rem */
       font-weight: 500;
       letter-spacing: 0.5px;
     }
@@ -697,7 +716,8 @@
 
     .qr-content {
       color: #333;
-      font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
+      font-size: 0.182rem;
+      /* 增大30%: 0.14rem * 1.3 = 0.182rem */
       font-weight: 500;
       letter-spacing: 0.5px;
     }

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

@@ -4,7 +4,8 @@
     <div class="top-tit">
       开元云
     </div>
-     <!-- 搜索 -->
+
+    <!-- 搜索 -->
     <div class="search">
       <div class="search-box">
         <div class="input">
@@ -20,18 +21,17 @@
         </div>
       </div>
     </div>
-    <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
-      <div
-        v-for="(value, index) in cloudData.secMenu"
-        :key="index"
-        class="supplier"
-        @click="selectSupplier(index)"
-      >
-        <div
-          class="supplier-title"
-          :class="{ 'active': activeSupplierIndex === index }"
-        >
+
+    <!-- 搜索提示 -->
+    <div v-if="isSearching && searchValue" class="search-tip">
+      搜索关键词: "{{ searchValue }}"
+      <span class="clear-search" @click="clearSearch">× 清空搜索</span>
+    </div>
+
+    <!-- 供应商 - 只在非搜索模式显示 -->
+    <div v-if="!isSearching && cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
+      <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
+        <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
           {{ value.secTitle }}
         </div>
       </div>
@@ -39,33 +39,45 @@
 
     <!-- 云产品 -->
     <div class="box">
-      <!-- 只显示当前选中的供应商的产品 -->
-      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+      <!-- 搜索模式：显示搜索结果 -->
+      <template v-if="isSearching && searchResults.length > 0">
+        <div v-for="product in searchResults" :key="product.id" class="box-item">
+          <div class="item-tit">
+            {{ product.name }}
+          </div>
+          <div class="item-detail">
+            {{ product.description }}
+          </div>
+          <div class="item-desc">
+            算力网络
+          </div>
+          <div class="item-btn">
+            <div class="btn" @click="goToDetail(product.id)">
+              查看详情
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索模式：无结果 -->
+      <div v-else-if="isSearching && searchResults.length === 0" class="no-data">
+        未找到与"{{ searchValue }}"相关的产品
+      </div>
+
+      <!-- 正常模式：只显示当前选中的供应商的产品 -->
+      <template v-else-if="!isSearching && 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"
-            v-show="shouldShowProduct(product)"
-          >
-            <!-- 标题 -->
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
             <div class="item-tit">
               {{ product.name }}
             </div>
-            <!-- 详情 -->
             <div class="item-detail">
               {{ product.description }}
             </div>
-            <!-- 描述 -->
             <div class="item-desc">
               算力网络
             </div>
-            <!-- 立即咨询 -->
             <div class="item-btn">
-              <!-- <div class="btn" @click="openConsultDialog(product, thrMenu)">
-                立即咨询
-              </div> -->
               <div class="btn" @click="goToDetail(product.id)">
                 查看详情
               </div>
@@ -73,57 +85,91 @@
           </div>
         </template>
       </template>
+
+      <!-- 正常模式：无数据 -->
+      <div v-else-if="!isSearching && (!cloudData.secMenu || cloudData.secMenu.length === 0)" class="no-data">
+        暂无产品数据
+      </div>
     </div>
-
-
   </div>
 </template>
 
 <script>
 import { reqNavList } from '@/api/H5/index'
-export default {
 
+export default {
   data() {
     return {
       cloudData: {},
-      activeSupplierIndex: 0, // 默认选中第一个供应商
-      searchValue: '', // 搜索关键词
-      isSearching: false, // 是否正在搜索
-
-      // 咨询弹窗相关
-      showConsultDialog: false,
-      platformName: '开元云',
-      qrCode: '',
-      consultFormData: {
-        content: '',
-        custom_type: '1',
-        name: '',
-        phone: '',
-        company: '',
-        email: '',
-        checked: false
-      },
-      currentProduct: null,
-      currentCategory: null
+      activeSupplierIndex: 0,
+      searchValue: '',
+      isSearching: false,
+      searchResults: []
     }
   },
   created() {
     this.getCloudData()
   },
   methods: {
-    async getCloudData() {
-      const res = await reqNavList({ url_link: window.location.href })
-      if (res.status == true) {
-        this.cloudData = res.data.product_service[2]
-        // 确保有数据时选中第一个
-        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
-          this.activeSupplierIndex = 0
+    async getCloudData(keyword) {
+      try {
+        const params = {
+          url_link: window.location.href,
+          ...(keyword && { keyword: keyword.trim() })
         }
+
+        const res = await reqNavList(params)
+        if (res.status == true) {
+          if (keyword) {
+            // 搜索模式
+            this.isSearching = true
+            this.searchResults = Array.isArray(res.data) ? res.data : []
+          } else {
+            // 正常模式
+            this.isSearching = false
+            this.searchResults = []
+            this.cloudData = res.data.product_service[2] || {}
+
+            if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+              this.activeSupplierIndex = 0
+            }
+          }
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.isSearching = false
+        this.searchResults = []
       }
     },
-     // 跳转到详情页
+
+    // 处理搜索
+    handleSearch() {
+      const keyword = this.searchValue.trim()
+      if (keyword) {
+        this.getCloudData(keyword)
+      } else {
+        // 如果搜索框为空，返回正常模式
+        this.clearSearch()
+      }
+    },
+
+    // 清空搜索
+    clearSearch() {
+      this.isSearching = false
+      this.searchValue = ''
+      this.searchResults = []
+      this.getCloudData() // 重新加载正常数据
+    },
+
+    // 选择供应商
+    selectSupplier(index) {
+      if (!this.isSearching) {
+        this.activeSupplierIndex = index
+      }
+    },
+
+    // 跳转到详情页
     goToDetail(productId) {
-      // 使用路由跳转到详情页，携带productId作为参数
       this.$router.push({
         path: '/h5HomePage/netDetail',
         query: {
@@ -131,40 +177,54 @@ 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
-    },
   }
 }
 </script>
 
 <style>
-  html,
-  body {
+  html, body {
     height: 100%;
     overflow-y: auto;
   }
 </style>
+
 <style lang="less" scoped>
 @import url('../less/all/index.less');
+
+/* 搜索提示样式 */
+.search-tip {
+  padding: 10px 20px;
+  background-color: #f5f7fa;
+  color: #666;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.clear-search {
+  color: #409EFF;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  transition: all 0.3s;
+}
+
+.clear-search:hover {
+  background-color: #ecf5ff;
+  color: #409EFF;
+}
+
+/* 无数据样式 */
+.no-data {
+  text-align: center;
+  padding: 40px 20px;
+  color: #909399;
+  font-size: 14px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin: 20px;
+}
 </style>

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

@@ -21,11 +21,9 @@
       <!-- 内容 -->
       <div class="content">
         <div class="item-box" v-for="(item, key) in baseData" :key="key">
-
           <div class="item-title">{{ item.title }}</div>
           <div class="item-description">{{ item.description }}</div>
 
-          <!-- 优势列表 -->
           <div class="advantage-list" v-if="item.list && item.list.length">
             <div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
               <div>
@@ -71,8 +69,12 @@
           </div>
 
           <div class="item-price">
-            <span class="price-icon">￥</span>
-            <span class="price">{{ item.price }}</span> {{ item.price_unit }}
+            <!-- 虚线 -->
+            <div class="item-price-line">
+              <span class="price-icon">￥</span>
+              <span class="price">{{ item.price }}</span> {{ item.price_unit }}
+            </div>
+
           </div>
           <div class="item-button">
             <div class="item-button-text" @click="openConsultDialog(item, '智算未来征程')">立即咨询</div>
@@ -89,7 +91,7 @@
       </div>
       <!-- 内容 -->
       <div class="content">
-        <div class="item-box" v-for="(item, key) in latitude" :key="key">
+        <div class="item-box" v-for="(item, key) in latitudeData" :key="key">
           <div class="item-title">{{ item.title }}</div>
           <div class="item-description">{{ item.description }}</div>
 
@@ -127,7 +129,7 @@
       <!-- 滚动合作伙伴内容 -->
       <div class="partner-scroll">
         <div class="logo-scroll-wrapper">
-          <div class="logo-scroll-container">
+          <div class="logo-scroll-container" :style="{ animationDuration: 60 + 's' }">
             <div v-for="(image, index) in duplicatedImages" :key="index" class="logo-item">
               <img :src="image" />
             </div>
@@ -160,20 +162,13 @@ export default {
 
   data() {
     return {
+      // 过滤掉 hot 和 container
       baseData: {},
+      // 过滤掉 hot
       journeyData: {},
-      latitude: {},
-      images: [
-        require('../images/top/img.png'),
-        require('../images/top/img_1.png'),
-        require('../images/top/img_2.png'),
-        require('../images/top/img_3.png'),
-        require('../images/top/img_4.png'),
-        require('../images/top/img_5.png'),
-        require('../images/top/img_6.png'),
-        require('../images/top/img_8.png'),
-        require('../images/top/img_9.png')
-      ],
+      // 过滤掉 hot
+      latitudeData: {},
+
       logoImg: require("@/assets/logo/colorLogo.png"),
       logoText: "开元云(北京)科技有限公司",
       url: window.location.href,
@@ -195,12 +190,26 @@ export default {
         checked: false
       },
       currentItem: null,
-      currentCategory: null
+      currentCategory: null,
+
+      // 滚动速度控制
+      scrollDuration: 6
     }
   },
   computed: {
     duplicatedImages() {
-      return [...this.images, ...this.images]
+      const images = [];
+      for (let i = 1; i <= 52; i++) {
+        try {
+          const imagePath = require(`./img/image${i}.png`);
+          images.push(imagePath);
+        } catch (error) {
+          continue;
+        }
+      }
+
+      // 为了无缝滚动效果，将图片复制三份
+      return [...images, ...images, ...images];
     }
   },
   created() {
@@ -221,10 +230,20 @@ export default {
       console.log('热门产品数据', res)
 
       if (res.status) {
-        // 直接使用对象结构
-        this.baseData = res.data.base || {}
-        this.journeyData = res.data.suan || {}
-        this.latitude = res.data.net || {}
+        // 处理 base 数据：过滤掉 hot 和 container
+        const base = res.data.base || {}
+        const { container, ...restBase } = base
+        this.baseData = restBase
+
+        // 处理 suan 数据：过滤掉 hot
+        const suan = res.data.suan || {}
+        const { hot: suanHot, ...restSuan } = suan
+        this.journeyData = restSuan
+
+        // 处理 net 数据：过滤掉 hot
+        const net = res.data.net || {}
+        const { hot: netHot, ...restNet } = net
+        this.latitudeData = restNet
       }
     },
 
@@ -271,8 +290,6 @@ export default {
       }
       // 如果是相对路径，尝试使用 require 加载
       try {
-        // 注意：这里可能需要根据实际路径调整
-        // 假设图标在 @/views/homePage/mainPage/ 目录下
         return require(`@/views/homePage/mainPage/${iconPath}`)
       } catch (e) {
         console.warn('图标加载失败:', iconPath)
@@ -326,13 +343,11 @@ export default {
       }
 
       return await reqProductConsult(submitData)
-
     },
 
     // 咨询成功回调
     handleConsultSuccess(response) {
       console.log('咨询提交成功:', response)
-      // 可以在这里添加后续逻辑，比如记录咨询历史等
       this.$message.success('咨询提交成功，我们将尽快联系您！')
     },
 
@@ -375,5 +390,3 @@ body {
 <style lang="less" scoped>
 @import url('../less/official/index.less');
 </style>
-
-

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

@@ -15,8 +15,15 @@
         </div>
       </div>
     </div>
-    <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
+
+    <!-- 搜索提示 -->
+    <div v-if="isSearching && searchValue" class="search-tip">
+      搜索关键词: "{{ searchValue }}"
+      <span class="clear-search" @click="clearSearch">× 清空搜索</span>
+    </div>
+
+    <!-- 供应商（只在非搜索模式显示） -->
+    <div v-if="!isSearching && cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
       <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
         <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
           {{ value.secTitle }}
@@ -26,24 +33,53 @@
 
     <!-- 云产品 -->
     <div class="box">
-      <!-- 只显示当前选中的供应商的产品 -->
-      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+      <!-- 搜索模式：显示搜索结果 -->
+      <template v-if="isSearching && searchResults.length > 0">
+        <div v-for="product in searchResults" :key="product.id" class="box-item">
+          <!-- 标题 -->
+          <div class="item-tit">
+            {{ product.name }}
+          </div>
+          <!-- 详情 -->
+          <div class="item-detail">
+            {{ product.description || '产品描述' }}
+          </div>
+          <!-- 描述 -->
+          <div class="item-desc">
+            AI应用
+          </div>
+          <!-- 查看详情 -->
+          <div class="item-btn">
+            <div class="btn" @click="goToDetail(product)">
+              查看详情
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索模式：无结果 -->
+      <div v-else-if="isSearching && searchResults.length === 0" class="no-data">
+        未找到与"{{ searchValue }}"相关的产品
+      </div>
+
+      <!-- 正常模式：显示当前供应商的产品 -->
+      <template v-else-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" v-show="shouldShowProduct(product)">
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
             <!-- 标题 -->
             <div class="item-tit">
               {{ product.name }}
             </div>
             <!-- 详情 -->
             <div class="item-detail">
-              {{ thrMenu.thrTitle }}
+              {{ thrMenu.thrTitle || '产品分类' }}
             </div>
             <!-- 描述 -->
             <div class="item-desc">
               AI应用
             </div>
-            <!-- 立即咨询 -->
+            <!-- 查看详情 -->
             <div class="item-btn">
               <div class="btn" @click="goToDetail(product)">
                 查看详情
@@ -52,6 +88,11 @@
           </div>
         </template>
       </template>
+
+      <!-- 正常模式：无数据 -->
+      <div v-else-if="!isSearching && (!cloudData.secMenu || cloudData.secMenu.length === 0)" class="no-data">
+        暂无产品数据
+      </div>
     </div>
 
   </div>
@@ -67,48 +108,74 @@ export default {
       activeSupplierIndex: 0, // 默认选中第一个供应商
       searchValue: '', // 搜索关键词
       isSearching: false, // 是否正在搜索
+      searchResults: [], // 搜索结果
     }
   },
   created() {
     this.getCloudData()
   },
   methods: {
-    async getCloudData() {
-      const res = await reqNavList({ url_link: window.location.href })
-      if (res.status == true) {
-        this.cloudData = res.data.product_service[3]
-        // 确保有数据时选中第一个
-        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
-          this.activeSupplierIndex = 0
+    async getCloudData(keyword) {
+      try {
+        const params = {
+          url_link: window.location.href,
+          ...(keyword && { keyword: keyword.trim() })
         }
+
+        const res = await reqNavList(params)
+        if (res.status == true) {
+          if (keyword) {
+            // 搜索模式：返回的是产品数组
+            this.isSearching = true
+            this.searchResults = Array.isArray(res.data) ? res.data : []
+            console.log('搜索结果:', this.searchResults)
+          } else {
+            // 正常模式：返回的是嵌套结构
+            this.isSearching = false
+            this.searchResults = []
+            this.cloudData = res.data.product_service[3] || {}
+            console.log('正常数据:', this.cloudData)
+
+            // 确保有数据时选中第一个供应商
+            if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+              this.activeSupplierIndex = 0
+            }
+          }
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.isSearching = false
+        this.searchResults = []
       }
     },
 
     // 处理搜索
     handleSearch() {
-      this.isSearching = !!this.searchValue.trim()
-      console.log('搜索关键词:', this.searchValue)
-    },
-
-    // 判断产品是否应该显示
-    shouldShowProduct(product) {
-      if (!this.isSearching) {
-        return true
+      const keyword = this.searchValue.trim()
+      if (keyword) {
+        this.getCloudData(keyword)
+      } else {
+        // 如果搜索框为空，返回正常模式
+        this.clearSearch()
       }
-      // 模糊搜索：检查产品名称或分类名称中是否包含搜索关键词
-      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))
-      )
     },
 
-    // 选择供应商
+    // 清空搜索
+    clearSearch() {
+      this.isSearching = false
+      this.searchValue = ''
+      this.searchResults = []
+      this.getCloudData() // 重新加载正常数据
+    },
+
+    // 选择供应商（只在非搜索模式可用）
     selectSupplier(index) {
-      this.activeSupplierIndex = index
+      if (!this.isSearching) {
+        this.activeSupplierIndex = index
+      }
     },
 
-    // 跳转到详情页，传入当前产品对象
+    // 跳转到详情页
     goToDetail(product) {
       if (product && product.name === '灵医智能体') {
         this.$router.push({
@@ -131,6 +198,44 @@ body {
   overflow-y: auto;
 }
 </style>
+
 <style lang="less" scoped>
 @import url('../less/all/index.less');
+
+/* 搜索提示样式 */
+.search-tip {
+  padding: 10px 20px;
+  background-color: #f5f7fa;
+  color: #666;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.clear-search {
+  color: #409EFF;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  transition: all 0.3s;
+}
+
+.clear-search:hover {
+  background-color: #ecf5ff;
+  color: #409EFF;
+}
+
+/* 无数据样式 */
+.no-data {
+  text-align: center;
+  padding: 40px 20px;
+  color: #909399;
+  font-size: 14px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin: 20px;
+}
 </style>

f/web-kboss/src/views/homePage/components/topBox/index.vue

@@ -1261,15 +1261,16 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 30px;
-  height: 30px;
+  background-color: #1A1A1A;
+  width: 46px;
+  height: 46px;
   border-radius: 50%;
   color: white;
   margin-right: 8px;
 
   img {
-    width: 40px;
-    height: 40px;
+    width: 26px;
+    height: 26px;
   }
 }