pages/shareArea/hiList.vue

@@ -176,81 +176,54 @@ export default {
   flex-direction: column;
 }
 
-// Tab选项卡样式 - 简约大气设计
+// Tab选项卡样式
 .tab-container {
-  // background: #ffffff;
+  background: #ffffff;
-  padding: 0;
+  padding: 20rpx 24rpx 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: 1;
+      flex: none;
       position: relative;
       cursor: pointer;
-      padding: 24rpx 32rpx;
+      margin: 0 32rpx;
-      text-align: center;
+      padding: 16rpx 0;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
       .tab-text {
-        font-size: 32rpx;
+        font-size: 30rpx;
         font-weight: 500;
-        color: #64748b;
+        color: #9ca3af;
         transition: all 0.3s ease;
-        position: relative;
-        z-index: 2;
       }
 
       .tab-line {
-        display: none;
+        position: absolute;
-      }
+        bottom: 0;
-
+        left: 0;
-      // 悬停效果
+        right: 0;
-      &:hover:not(.tab-active) {
+        height: 3rpx;
-        .tab-text {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-          color: #475569;
+        border-radius: 2rpx;
-          transform: translateY(-1rpx);
+        animation: slideIn 0.3s ease;
-        }
       }
 
       &.tab-active {
-        background: rgba(102, 126, 234, 0.08);
-
         .tab-text {
-          color: #667eea;
+          color: #1f2937;
           font-weight: 600;
         }
-
-        // 选中指示器 - 底部完整宽度线条
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 3rpx;
-          background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        }
       }
 
       &:active {
-        transform: scale(0.98);
+        .tab-text {
+          transform: scale(0.95);
+        }
       }
     }
   }
@@ -634,4 +607,84 @@ 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>