updata

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

@@ -6,13 +6,19 @@
     </div>
 
     <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier" v-for="(value, index) in cloudData.secMenu" :key="index">
+    <div class="supplier-container">
       <div
-        class="supplier-title"
+        v-for="(value, index) in cloudData.secMenu"
-        :class="{ 'active': activeSupplierIndex === index }"
+        :key="index"
+        class="supplier"
         @click="toggleSupplier(index)"
       >
-        {{ value.secTitle }}
+        <div
+          class="supplier-title"
+          :class="{ 'active': activeSupplierIndex === index }"
+        >
+          {{ value.secTitle }}
+        </div>
       </div>
     </div>
 
@@ -60,7 +66,7 @@ export default {
   data() {
     return {
       cloudData: {},
-      activeSupplierIndex: 0// 默认没有选中任何供应商
+      activeSupplierIndex: 0 // 默认选中第一个供应商
     }
   },
   created() {
@@ -72,17 +78,17 @@ 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) {
+        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
-        //   this.activeSupplierIndex = 0
+          this.activeSupplierIndex = 0
-        // }
+        }
       }
     },
     // 切换供应商选中状态
     toggleSupplier(index) {
       // 如果点击的是已选中的供应商，则取消选中
       if (this.activeSupplierIndex === index) {
-        this.activeSupplierIndex = 0
+        this.activeSupplierIndex = -1
       } else {
         // 否则选中点击的供应商
         this.activeSupplierIndex = index
@@ -107,24 +113,42 @@ export default {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: .3rem;
+  font-weight: bold;
+  margin-bottom: .3rem;
+}
+
+.supplier-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  padding: .2rem .22rem;
+  gap: .15rem; /* 使用gap控制间距 */
 }
 
 .supplier {
-  display: flex;
+  flex-shrink: 0; /* 防止收缩 */
-  padding: .22rem;
 
   .supplier-title {
     font-size: .2rem;
     color: #000;
-    padding: .1rem .16rem;
+    padding: .12rem .2rem;
-    background-color: #eee;
+    background-color: #f5f5f5;
-    border-radius: 0.08rem;
+    border-radius: 0.12rem;
     cursor: pointer;
     transition: all 0.3s ease;
 
+    white-space: nowrap; /* 防止文字换行 */
+
+    &:hover {
+      background-color: #e0e0e0;
+      transform: translateY(-0.02rem);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
     &.active {
       background: linear-gradient(90deg, #275aff, #2ebdfa);
       color: #fff;
+      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
+      transform: translateY(-0.02rem);
     }
   }
 }
@@ -142,34 +166,56 @@ export default {
     align-items: self-start;
     border: .02rem solid #f0f0f0;
     border-radius: .2rem;
-    padding: .1rem 0.1rem;
+    padding: .15rem .2rem;
     margin: .34rem 0;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.05rem);
+      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
+      border-color: #1f70ff;
+    }
+
     .item-tit{
-      font-size: .14rem;
+      font-size: .16rem;
       color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
     }
     .item-detail{
-      color: #737373;
+      color: #666;
-      font-size: .12rem;
+      font-size: .13rem;
-      margin: .26rem 0;
+      margin: .15rem 0;
+      line-height: 1.4;
     }
     .item-desc{
-      color: #acafb3;
+      color: #666;
-      background-color: #e9edf2;
+      background-color: #f8f9fa;
       font-size: .12rem;
-      padding: .06rem .1rem;
+      padding: .08rem .12rem;
-      border-radius: .08rem;
+      border-radius: .1rem;
+      margin-bottom: .15rem;
+      border: .01rem solid #e9ecef;
     }
     .item-btn{
       width: 100%;
       display: flex;
       justify-content: flex-end;
       .btn{
-        background-color: #1f70ff;
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
         color: #fff;
-        padding: .05rem .1rem;
+        padding: .08rem .2rem;
-        border-radius: .1rem;
+        border-radius: .15rem;
-        font-size: 0.16rem;
+        font-size: 0.14rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: none;
+
+        &:hover {
+          background: linear-gradient(90deg, #0d5aff, #2a7aff);
+          transform: translateY(-0.02rem);
+          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
+        }
       }
     }
   }