updata

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

@@ -6,8 +6,14 @@
     </div>
 
     <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
-      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</div>
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier" v-for="(value, index) in cloudData.secMenu" :key="index">
+      <div
+        class="supplier-title"
+        :class="{ 'active': activeSupplierIndex === index }"
+        @click="toggleSupplier(index)"
+      >
+        {{ value.secTitle }}
+      </div>
     </div>
 
     <!-- 云产品 -->
@@ -54,6 +60,7 @@ export default {
   data() {
     return {
       cloudData: {},
+      activeSupplierIndex: 0// 默认没有选中任何供应商
     }
   },
   created() {
@@ -65,6 +72,20 @@ export default {
       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
+        // }
+      }
+    },
+    // 切换供应商选中状态
+    toggleSupplier(index) {
+      // 如果点击的是已选中的供应商，则取消选中
+      if (this.activeSupplierIndex === index) {
+        this.activeSupplierIndex = 0
+      } else {
+        // 否则选中点击的供应商
+        this.activeSupplierIndex = index
       }
     }
   }
@@ -89,16 +110,22 @@ export default {
 }
 
 .supplier {
-
   display: flex;
-  padding: .22rem ;
+  padding: .22rem;
 
   .supplier-title {
     font-size: .2rem;
     color: #000;
     padding: .1rem .16rem;
-    background-color: pink;
+    background-color: #eee;
     border-radius: 0.08rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &.active {
+      background: linear-gradient(90deg, #275aff, #2ebdfa);
+      color: #fff;
+    }
   }
 }