admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(产品列表): 为店铺列表项添加封面图片并调整样式 

在店铺列表项中添加封面图片显示功能，当没有封面图时使用默认图片。同时调整了列表项的布局样式，将高度改为自适应并移除内边距，使封面图片能够完整显示。
This commit is contained in:
dzq 2025-06-16 15:35:59 +08:00
parent 1914dacfe5
commit e446ad2b38
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/cabinet/index.vue
View File

@ -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%;
} }
} }
} }

12
src/pages/product/ProductList.vue
View File

@ -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 {