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

fix: 选择商品页面分类改回左侧侧栏
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Agent
2026-04-01 15:53:17 +00:00
parent 0500d3e688
commit e25d288fae
1 changed files with 36 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/product/select.vue
View File

@@ -14,20 +14,22 @@
</view> </view>
</view> </view>
<!-- 分类行 --> <!-- 分类侧栏 + 商品列表 -->
<view class="category-row"> <view class="content-wrapper">
<view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')"> <!-- 左侧分类 -->
全部 <scroll-view scroll-y class="category-sidebar">
</view> <view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
<view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)"> 全部
{{ cat.name }} </view>
</view> <view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
</view> {{ cat.name }}
</view>
</scroll-view>
<!-- 商品列表 --> <!-- 右侧商品列表 -->
<scroll-view scroll-y class="product-scroll"> <scroll-view scroll-y class="product-scroll">
<view class="product-list"> <view class="product-list">
<view v-for="item in productList" :key="item.productId" class="product-item" @click="openProductDetail(item)"> <view v-for="item in productList" :key="item.productId" class="product-item" @click="openProductDetail(item)">
<view class="product-info"> <view class="product-info">
<text class="product-name">{{ item.name }}</text> <text class="product-name">{{ item.name }}</text>
<view class="product-row"> <view class="product-row">
@@ -220,32 +222,37 @@ export default {
color: #999; color: #999;
} }
/* 分类行 */ /* 内容区域：侧栏+列表 */
.category-row { .content-wrapper {
display: flex; display: flex;
background: #fff; height: calc(100vh - 130rpx);
padding: 20rpx;
overflow-x: auto;
white-space: nowrap;
} }
.category-row .category-item { /* 分类侧栏 */
display: inline-block; .category-sidebar {
padding: 16rpx 32rpx; width: 160rpx;
background: #fff;
flex-shrink: 0;
border-right: 1rpx solid #eee;
}
.category-sidebar .category-item {
padding: 28rpx 16rpx;
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
border-radius: 30rpx; text-align: center;
margin-right: 16rpx; border-left: 6rpx solid transparent;
background: #f5f5f5;
} }
.category-row .category-item.active { .category-sidebar .category-item.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #f8f9fa;
color: #fff; color: #667eea;
font-weight: bold;
border-left-color: #667eea;
} }
.product-scroll { .product-scroll {
height: calc(100vh - 260rpx); flex: 1;
background: #f8f9fa; background: #f8f9fa;
} }