feat(hiList): tab栏样式调整

pages/shareArea/hiList.vue

@@ -176,54 +176,81 @@ export default {
   flex-direction: column;
 }
 
-// Tab选项卡样式
+// Tab选项卡样式 - 简约大气设计
 .tab-container {
-  background: #ffffff;
+  // background: #ffffff;
-  padding: 20rpx 24rpx 0;
+  padding: 0;
   position: relative;
   z-index: 4;
 
+  // 顶部装饰线
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3rpx;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  }
+
   .tab-wrapper {
     display: flex;
-    justify-content: center;
     position: relative;
+    // background: #ffffff;
+    // padding: 32rpx 24rpx 24rpx;
 
     .tab-item {
-      flex: none;
+      flex: 1;
       position: relative;
       cursor: pointer;
-      margin: 0 32rpx;
+      padding: 24rpx 32rpx;
-      padding: 16rpx 0;
+      text-align: center;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
       .tab-text {
-        font-size: 30rpx;
+        font-size: 32rpx;
         font-weight: 500;
-        color: #9ca3af;
+        color: #64748b;
         transition: all 0.3s ease;
+        position: relative;
+        z-index: 2;
       }
 
       .tab-line {
+        display: none;
+      }
+
+      // 悬停效果
+      &:hover:not(.tab-active) {
+        .tab-text {
+          color: #475569;
+          transform: translateY(-1rpx);
+        }
+      }
+
+      &.tab-active {
+        background: rgba(102, 126, 234, 0.08);
+
+        .tab-text {
+          color: #667eea;
+          font-weight: 600;
+        }
+
+        // 选中指示器 - 底部完整宽度线条
+        &::after {
+          content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           height: 3rpx;
           background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        border-radius: 2rpx;
-        animation: slideIn 0.3s ease;
-      }
-
-      &.tab-active {
-        .tab-text {
-          color: #1f2937;
-          font-weight: 600;
         }
       }
 
       &:active {
-        .tab-text {
+        transform: scale(0.98);
-          transform: scale(0.95);
-        }
       }
     }
   }
@@ -607,84 +634,4 @@ export default {
 .goodList_i:nth-child(n + 6) {
   animation-delay: 0.6s;
 }
-
-// 响应式优化
-@media (max-width: 750rpx) {
-  .tab-container {
-    padding: 24rpx 16rpx 0;
-
-    .tab-wrapper {
-      .tab-item {
-        margin: 0 24rpx;
-        padding: 12rpx 0;
-
-        .tab-text {
-          font-size: 28rpx;
-        }
-      }
-    }
-  }
-
-  .goodList {
-    .goodList_i {
-      padding: 24rpx;
-
-      .cover {
-        width: 200rpx;
-        height: 200rpx;
-      }
-
-      .goodList_ir {
-        margin-left: 20rpx;
-
-        .tit1 {
-          font-size: 28rpx;
-        }
-
-        .goodList_ib {
-          .price-container {
-            .price {
-              font-size: 32rpx;
-            }
-          }
-        }
-
-        .quantity-section {
-          .quantity-control {
-            .quantity-btn {
-              width: 50rpx;
-              height: 50rpx;
-
-              .quantity-icon {
-                font-size: 28rpx;
-              }
-            }
-
-            .quantity-display {
-              min-width: 70rpx;
-              height: 50rpx;
-
-              .quantity-text {
-                font-size: 24rpx;
-              }
-            }
-          }
-        }
-
-        .toBuy {
-          padding: 14rpx 20rpx;
-          font-size: 22rpx;
-          min-width: 100rpx;
-        }
-
-        .sold-out-section {
-          .sold-out-btn {
-            padding: 14rpx 28rpx;
-            font-size: 22rpx;
-          }
-        }
-      }
-    }
-  }
-}
 </style>