优化商品列表:左侧分类栏+右侧商品
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
/* 加载更多 */
|
||||
|
||||
Reference in New Issue
Block a user