feat(产品列表): 为店铺列表项添加封面图片并调整样式
在店铺列表项中添加封面图片显示功能,当没有封面图时使用默认图片。同时调整了列表项的布局样式,将高度改为自适应并移除内边距,使封面图片能够完整显示。
This commit is contained in:
parent
1914dacfe5
commit
e446ad2b38
|
@ -6,11 +6,12 @@
|
|||
<van-row :gutter="[10, 10]" class="shop-row" justify="start">
|
||||
<van-col v-for="shop in shopList" :key="shop.shopId" span="12" class="shop-col">
|
||||
<div class="shop-item" @click="handleShopSelect(shop.shopId)">
|
||||
<div class="shop-info">
|
||||
<van-icon name="shop-o" size="20" class="shop-icon" />
|
||||
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-image :src="shop.coverImg || `${publicPath}product-image.png`" class="shop-cover-img" fit="cover" />
|
||||
<div class="shop-info">
|
||||
<van-icon name="shop-o" size="20" class="shop-icon" />
|
||||
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-col>
|
||||
<van-col v-if="shopList.length % 2 === 0" span="12" class="shop-col"></van-col>
|
||||
</van-row>
|
||||
|
@ -341,19 +342,25 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
.shop-item {
|
||||
height: 60px !important;
|
||||
padding: 12px;
|
||||
height: auto !important;
|
||||
padding: 0;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s;
|
||||
|
||||
.shop-cover-img {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
|
@ -366,7 +373,6 @@ onBeforeUnmount(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -220,6 +220,7 @@ async function handleAb98Bind() {
|
|||
<van-row :gutter="[10, 10]" class="shop-row" justify="start">
|
||||
<van-col v-for="shop in shopList" :key="shop.shopId" span="12" class="shop-col">
|
||||
<div class="shop-item" @click="handleShopSelect(shop.shopId)">
|
||||
<van-image :src="shop.coverImg || `${publicPath}product-image.png`" class="shop-cover-img" fit="cover" />
|
||||
<div class="shop-info">
|
||||
<van-icon name="shop-o" size="20" class="shop-icon" />
|
||||
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
||||
|
@ -579,8 +580,8 @@ async function handleAb98Bind() {
|
|||
}
|
||||
|
||||
.shop-item {
|
||||
height: 60px !important;
|
||||
padding: 12px;
|
||||
height: auto !important;
|
||||
padding: 0;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
@ -591,7 +592,12 @@ async function handleAb98Bind() {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
.shop-cover-img {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
|
|
Loading…
Reference in New Issue