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-row :gutter="[10, 10]" class="shop-row" justify="start">
|
||||||
<van-col v-for="shop in shopList" :key="shop.shopId" span="12" class="shop-col">
|
<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-item" @click="handleShopSelect(shop.shopId)">
|
||||||
<div class="shop-info">
|
<van-image :src="shop.coverImg || `${publicPath}product-image.png`" class="shop-cover-img" fit="cover" />
|
||||||
<van-icon name="shop-o" size="20" class="shop-icon" />
|
<div class="shop-info">
|
||||||
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
<van-icon name="shop-o" size="20" class="shop-icon" />
|
||||||
</div>
|
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</van-col>
|
</van-col>
|
||||||
<van-col v-if="shopList.length % 2 === 0" span="12" class="shop-col"></van-col>
|
<van-col v-if="shopList.length % 2 === 0" span="12" class="shop-col"></van-col>
|
||||||
</van-row>
|
</van-row>
|
||||||
|
@ -341,19 +342,25 @@ onBeforeUnmount(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-item {
|
.shop-item {
|
||||||
height: 60px !important;
|
height: auto !important;
|
||||||
padding: 12px;
|
padding: 0;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
|
|
||||||
|
.shop-cover-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.shop-info {
|
.shop-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
height: 100%;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-name {
|
.shop-name {
|
||||||
|
@ -366,7 +373,6 @@ onBeforeUnmount(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -220,6 +220,7 @@ async function handleAb98Bind() {
|
||||||
<van-row :gutter="[10, 10]" class="shop-row" justify="start">
|
<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">
|
<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-item" @click="handleShopSelect(shop.shopId)">
|
||||||
|
<van-image :src="shop.coverImg || `${publicPath}product-image.png`" class="shop-cover-img" fit="cover" />
|
||||||
<div class="shop-info">
|
<div class="shop-info">
|
||||||
<van-icon name="shop-o" size="20" class="shop-icon" />
|
<van-icon name="shop-o" size="20" class="shop-icon" />
|
||||||
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
<div class="shop-name van-ellipsis">{{ shop.shopName }}</div>
|
||||||
|
@ -579,8 +580,8 @@ async function handleAb98Bind() {
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-item {
|
.shop-item {
|
||||||
height: 60px !important;
|
height: auto !important;
|
||||||
padding: 12px;
|
padding: 0;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -591,7 +592,12 @@ async function handleAb98Bind() {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
height: 100%;
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.shop-cover-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-name {
|
.shop-name {
|
||||||
|
|
Loading…
Reference in New Issue