优化商品列表:左侧分类栏+右侧商品

This commit is contained in:
Agent
2026-03-26 14:27:02 +00:00
parent f8ce079a4b
commit 84e2259be4

View File

@@ -46,7 +46,7 @@
@click="viewDetail(item)"
>
<view class="product-image">
<text class="product-emoji">📦</text>
<Icon name="product" :size="60" color="#fff" />
</view>
<view class="product-content">
<text class="product-name">{{ item.name }}</text>
@@ -66,7 +66,7 @@
<!-- 空状态 -->
<view v-if="products.length === 0" class="empty">
<text class="empty-icon">📭</text>
<Icon name="product" :size="80" color="#ccc" />
<text class="empty-text">暂无商品</text>
</view>
</view>
@@ -75,6 +75,8 @@
<view v-if="products.length > 0" class="load-more">
<text>{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}</text>
</view>
</scroll-view>
</view>
</view>
</template>
@@ -159,7 +161,6 @@ export default {
</script>
<style>
/* 全局 */
.page {
min-height: 100vh;
background: #f8f9fa;
@@ -180,15 +181,11 @@ export default {
height: 80rpx;
}
.search-icon {
font-size: 32rpx;
margin-right: 16rpx;
}
.search-input {
flex: 1;
font-size: 28rpx;
color: #333;
margin-left: 16rpx;
}
.placeholder {
@@ -198,8 +195,7 @@ export default {
/* 左侧分类 + 右侧商品布局 */
.content-wrapper {
display: flex;
flex: 1;
overflow: hidden;
height: calc(100vh - 130rpx);
}
/* 左侧分类侧边栏 */
@@ -228,14 +224,6 @@ export default {
/* 右侧商品列表 */
.product-scroll {
flex: 1;
height: calc(100vh - 180rpx);
background: #f8f9fa;
}
/* 右侧商品列表 */
.product-scroll {
flex: 1;
height: calc(100vh - 180rpx);
background: #f8f9fa;
}
@@ -272,10 +260,6 @@ export default {
justify-content: center;
}
.product-emoji {
font-size: 80rpx;
}
.product-content {
padding: 20rpx;
}
@@ -350,14 +334,10 @@ export default {
align-items: center;
}
.empty-icon {
font-size: 100rpx;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
margin-top: 20rpx;
}
/* 加载更多 */