diff --git a/src/pages/product/select.vue b/src/pages/product/select.vue index ed84290..0da2256 100644 --- a/src/pages/product/select.vue +++ b/src/pages/product/select.vue @@ -14,20 +14,22 @@ - - - - 全部 - - - {{ cat.name }} - - + + + + + + 全部 + + + {{ cat.name }} + + - - - - + + + + {{ item.name }} @@ -47,6 +49,7 @@ + @@ -226,32 +229,37 @@ export default { color: #999; } -/* 分类行 */ -.category-row { +/* 内容区域:侧栏+列表 */ +.content-wrapper { display: flex; - background: #fff; - padding: 20rpx; - overflow-x: auto; - white-space: nowrap; + height: calc(100vh - 130rpx); } -.category-row .category-item { - display: inline-block; - padding: 16rpx 32rpx; +/* 分类侧栏 */ +.category-sidebar { + width: 160rpx; + background: #fff; + flex-shrink: 0; + border-right: 1rpx solid #eee; +} + +.category-sidebar .category-item { + padding: 28rpx 16rpx; font-size: 26rpx; color: #666; - border-radius: 30rpx; - margin-right: 16rpx; - background: #f5f5f5; + text-align: center; + border-left: 6rpx solid transparent; } -.category-row .category-item.active { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: #fff; +.category-sidebar .category-item.active { + background: #f8f9fa; + color: #667eea; + font-weight: bold; + border-left-color: #667eea; } .product-scroll { - height: calc(100vh - 260rpx); + flex: 1; background: #f8f9fa; }