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