zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 商品卡片组件的样式调整

Browse Source
This commit is contained in:
zoujing
2026-03-11 15:47:54 +08:00
parent ecb1611cc0
commit 1c5a7ddaab
2 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/SwipeCards/index.vue
View File

@@ -15,38 +15,24 @@
<!-- 商品大图部分：自适应剩余空间 -->
<view class="goods-image-wrapper relative">
<image class="w-full h-full" :src="card.commodityPhoto" mode="aspectFill"/>
<view
class="goods-title absolute left-0 right-0 bottom-0 border-box p-12"
>
<view class="font-size-14 font-500 color-white ellipsis-1">
{{ card.commodityName }}
</view>
<view class="card-price-row color-white">
<text class="font-size-11">￥</text>
<text class="font-size-14 font-bold">
{{ card.specificationPrice }}
</text>
<text class="font-size-11 ml-2" v-if="card.stockUnitLabel"
>/{{ card.stockUnitLabel }}</text
>
</view>
</view>
</view>
<!-- 底部相册部分：固定比例或高度 -->
<view class="border-box p-12 flex flex-justify-between">
<view
v-for="(item, index) in card.commodityPhotoList"
:key="index"
class="album-item relative overflow-hidden bg-f5 rounded-10"
>
<image :src="item.photoUrl" mode="aspectFill" />
<view
class="album-title absolute left-0 right-0 bottom-0 color-white font-size-11 font-500 ellipsis-1 flex flex-items-center flex-justify-center"
>
{{ item.photoName }}
<!-- 底部：价格 + 购买按钮 -->
<view class="card-footer border-box p-12 flex flex-justify-between flex-items-center">
<view class="border-box">
<view class="font-size-14 font-500 color-333 ellipsis-1">
{{ card.commodityName }}
</view>
<view class="card-price-row color-333">
<text class="font-size-11">￥</text>
<text class="font-size-24 font-bold">
{{ card.specificationPrice }}
</text>
<text class="font-size-11 ml-2" v-if="card.stockUnitLabel">/{{ card.stockUnitLabel }}</text>
</view>
</view>
<view class="buy-btn" @click.stop="placeOrderHandle(card)">购买</view>
</view>
</view>
</view>

35
src/components/SwipeCards/styles/index.scss
View File

@@ -21,13 +21,6 @@
height: 193px;
}
.goods-title {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
}
.album-item {
width: 96px;
@@ -38,3 +31,31 @@
background: rgba(0, 0, 0, 0.5);
height: 20px;
}
/* 底部价格与购买按钮 */
.card-footer {
border-top: 1px solid rgba(0,0,0,0.04);
}
.card-footer .price-left {
display: flex;
align-items: baseline;
color: #171717;
}
.buy-btn {
background-color: $theme-color-500;
color: #fff;
margin-top: 12px;
padding: 12px 24px;
border-radius: 12px;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buy-btn:active {
opacity: 0.9;
}