diff --git a/pages/shareArea/hiList.vue b/pages/shareArea/hiList.vue index 2c631da..70638b3 100644 --- a/pages/shareArea/hiList.vue +++ b/pages/shareArea/hiList.vue @@ -176,54 +176,81 @@ export default { flex-direction: column; } -// Tab选项卡样式 +// Tab选项卡样式 - 简约大气设计 .tab-container { - background: #ffffff; - padding: 20rpx 24rpx 0; + // background: #ffffff; + 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: 16rpx 0; + padding: 24rpx 32rpx; + 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 { - 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; + 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: #1f2937; + 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%); + } } &:active { - .tab-text { - transform: scale(0.95); - } + transform: scale(0.98); } } } @@ -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; - } - } - } - } - } -}