|
|
@@ -24,21 +24,22 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- Level 1 分类：2列横排网格 -->
|
|
|
- <view class="cat-level1">
|
|
|
- <view
|
|
|
- v-for="cat in categories"
|
|
|
- :key="cat.id"
|
|
|
- :class="['cat1-item', currentCat1 && currentCat1.id === cat.id ? 'active' : '']"
|
|
|
- @click="onCat1Select(cat)"
|
|
|
- >
|
|
|
- <image v-if="cat.image" class="cat1-icon" :src="cat.image" mode="aspectFit" />
|
|
|
- <view v-else class="cat1-icon-placeholder">
|
|
|
- <text class="cat1-icon-text">{{ cat.name.substr(0, 1) }}</text>
|
|
|
- </view>
|
|
|
- <text class="cat1-name">{{ cat.name }}</text>
|
|
|
+ <!-- Level 1 分类：横向滚动chips -->
|
|
|
+ <scroll-view
|
|
|
+ scroll-x
|
|
|
+ enable-flex
|
|
|
+ show-scrollbar="false"
|
|
|
+ class="cat-level1-scroll"
|
|
|
+ >
|
|
|
+ <view class="cat1-chips">
|
|
|
+ <view
|
|
|
+ v-for="cat in categories"
|
|
|
+ :key="cat.id"
|
|
|
+ :class="['cat1-chip', currentCat1 && currentCat1.id === cat.id ? 'active' : '']"
|
|
|
+ @click="onCat1Select(cat)"
|
|
|
+ >{{ cat.name }}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
|
|
|
<!-- Level 2 子分类：横向滚动chips -->
|
|
|
<scroll-view
|
|
|
@@ -340,61 +341,31 @@ export default {
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
/* ==================== 分类布局 ==================== */
|
|
|
-/* Level 1 分类：2列横排网格 */
|
|
|
-.cat-level1 {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 16rpx 16rpx 8rpx;
|
|
|
+/* Level 1 分类：横向滚动chips */
|
|
|
+.cat-level1-scroll {
|
|
|
background: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 12rpx 16rpx;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
}
|
|
|
-.cat1-item {
|
|
|
- width: 25%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 16rpx 8rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin-bottom: 8rpx;
|
|
|
-}
|
|
|
-.cat1-item.active {
|
|
|
- background: rgba(249, 115, 22, 0.08);
|
|
|
-}
|
|
|
-.cat1-icon {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- background: #f5f5f5;
|
|
|
+.cat1-chips {
|
|
|
+ display: inline-flex;
|
|
|
+ gap: 12rpx;
|
|
|
+ padding: 0 4rpx;
|
|
|
}
|
|
|
-.cat1-icon-placeholder {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+.cat1-chip {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 10rpx 28rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
-.cat1-icon-text {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
+.cat1-chip.active {
|
|
|
+ background: #F97316;
|
|
|
color: #fff;
|
|
|
-}
|
|
|
-.cat1-name {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333;
|
|
|
- max-width: 140rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-.cat1-item.active .cat1-name {
|
|
|
- color: #F97316;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
/* 搜索栏 + 购物车 */
|
|
|
@@ -568,7 +539,7 @@ export default {
|
|
|
/* ==================== 商品列表 ==================== */
|
|
|
.product-list {
|
|
|
flex: 1;
|
|
|
- height: calc(100vh - 220rpx);
|
|
|
+ min-height: 0;
|
|
|
}
|
|
|
.login-hint-bar {
|
|
|
text-align: center;
|
