sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化商品列表页：分类筛选移至左侧垂直显示
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Agent
2026-03-26 14:18:50 +00:00
parent 798f6a97a8
commit f8ce079a4b
1 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/pages/product/list.vue
View File

@@ -3,7 +3,7 @@
<!-- 搜索栏 --> <!-- 搜索栏 -->
<view class="search-section"> <view class="search-section">
<view class="search-bar"> <view class="search-bar">
<text class="search-icon">🔍</text> <Icon name="search" :size="32" color="#999" />
<input <input
class="search-input" class="search-input"
v-model="keyword" v-model="keyword"
@@ -14,28 +14,31 @@
</view> </view>
</view> </view>
<!-- 分类筛选 --> <!-- 分类筛选 + 商品列表 -->
<scroll-view class="category-scroll" scroll-x> <view class="content-wrapper">
<view <!-- 左侧分类 -->
class="category-item" <scroll-view scroll-y class="category-sidebar">
:class="{ active: !categoryId }" <view
@click="selectCategory('')" class="category-item"
> :class="{ active: !categoryId }"
全部 @click="selectCategory('')"
</view> >
<view 全部
v-for="cat in categories" </view>
:key="cat.categoryId" <view
class="category-item" v-for="cat in categories"
:class="{ active: categoryId === cat.categoryId }" :key="cat.categoryId"
@click="selectCategory(cat.categoryId)" class="category-item"
> :class="{ active: categoryId === cat.categoryId }"
{{ cat.name }} @click="selectCategory(cat.categoryId)"
</view> >
</scroll-view> {{ cat.name }}
</view>
</scroll-view>
<!-- 商品列表 --> <!-- 右侧商品列表 -->
<view class="product-list"> <scroll-view scroll-y class="product-scroll">
<view class="product-list">
<view <view
v-for="item in products" v-for="item in products"
:key="item.productId" :key="item.productId"
@@ -192,28 +195,48 @@ export default {
color: #999; color: #999;
} }
/* 分类筛选 */ /* 左侧分类 + 右侧商品布局 */
.category-scroll { .content-wrapper {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex;
padding: 20rpx 30rpx 40rpx; flex: 1;
white-space: nowrap; overflow: hidden;
}
/* 左侧分类侧边栏 */
.category-sidebar {
width: 180rpx;
background: #fff;
flex-shrink: 0;
} }
.category-item { .category-item {
display: inline-block; padding: 28rpx 20rpx;
padding: 14rpx 32rpx;
margin-right: 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 30rpx;
font-size: 26rpx; font-size: 26rpx;
color: rgba(255, 255, 255, 0.8); color: #666;
text-align: center;
border-left: 6rpx solid transparent;
transition: all 0.3s; transition: all 0.3s;
} }
.category-item.active { .category-item.active {
background: #fff; background: #f8f9fa;
color: #667eea; color: #667eea;
font-weight: bold; font-weight: bold;
border-left-color: #667eea;
}
/* 右侧商品列表 */
.product-scroll {
flex: 1;
height: calc(100vh - 180rpx);
background: #f8f9fa;
}
/* 右侧商品列表 */
.product-scroll {
flex: 1;
height: calc(100vh - 180rpx);
background: #f8f9fa;
} }
/* 商品列表 */ /* 商品列表 */