liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：4140 【商城小程序】礼品卡封面图自适应范围需要调整，包含上一版本封面图上面的商品图高度

Browse Source
This commit is contained in:
linxi
2025-08-08 11:41:21 +08:00
parent 5586afec97
commit 2dd9430c8d
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_user/views/gift/components/CoverPicker.vue
+5 -5
View File
@@ -14,7 +14,7 @@
:circular="true" :circular="true"
:indicator-dots="false" :indicator-dots="false"
@change="onChange" @change="onChange"
previous-margin="160rpx" previous-margin="200rpx"
next-margin="180rpx" next-margin="180rpx"
class="cover-swiper" class="cover-swiper"
> >
@@ -22,8 +22,8 @@
<view class="cover-item" > <view class="cover-item" >
<view class="img-wrap" :class="currentIndex === index ? 'v12-mt-10' : 'v12-mt-18'"> <view class="img-wrap" :class="currentIndex === index ? 'v12-mt-10' : 'v12-mt-18'">
<view class="pro-img-wrap " :style="{ <view class="pro-img-wrap " :style="{
left: (item.productImageX || 0) * 2 + 'rpx', left: (item.productImageX || 0) + 'px',
top: (item.productImageY || -40) * 2 + 'rpx' top: (item.productImageY || -20) + 'px'
}"> }">
<image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" /> <image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" />
</view> </view>
@@ -147,8 +147,8 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.cover-image { .cover-image {
width: 320rpx; width: 240rpx;
height: 400rpx; height: 560rpx;
border-radius: 16rpx; border-radius: 16rpx;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
pkg_user/views/gift/components/GiftCard.vue
+10 -10
View File
@@ -3,8 +3,8 @@
<view class="gift-card-modal" > <view class="gift-card-modal" >
<image class="bg-image" :src="!card.isBlind ? card.cover : card.blindBoxImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image> <image class="bg-image" :src="!card.isBlind ? card.cover : card.blindBoxImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
<view v-if="card.isBlind !== 1" class="image-wrap" :style="{ <view v-if="card.isBlind !== 1" class="image-wrap" :style="{
top: card.productImageY*2 * 1.8 + 'rpx', top: card.productImageY + 'px',
left: card.productImageX*2 * 1.8 + 'rpx' left: card.productImageX + 'px'
}"> }">
<image class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load=""> <image class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load="">
@@ -228,8 +228,8 @@ export default {
align-content: center; align-content: center;
} }
.bg-image{ .bg-image{
width: 576rpx; width: 240rpx;
height: 720rpx; height: 560rpx;
position: absolute; position: absolute;
border-radius: 16rpx; border-radius: 16rpx;
top: 0; top: 0;
@@ -260,8 +260,8 @@ export default {
height: 296rpx; height: 296rpx;
} }
.image-wrap{ .image-wrap{
width: 288rpx; width: 160rpx;
height: 288rpx; height: 160rpx;
/*border: 10rpx solid #FDF0D3;*/ /*border: 10rpx solid #FDF0D3;*/
border-radius: 30rpx; border-radius: 30rpx;
position: absolute; position: absolute;
@@ -271,8 +271,8 @@ export default {
margin: auto; margin: auto;
} }
.pro-image{ .pro-image{
width: 288rpx; width: 160rpx;
height: 288rpx; height: 160rpx;
/* border-radius: 30rpx; */ /* border-radius: 30rpx; */
} }
.auto-text-color { .auto-text-color {
@@ -316,8 +316,8 @@ export default {
text-align: center; text-align: center;
} }
.gift-card-modal { .gift-card-modal {
height: 720rpx; height: 560rpx;
width: 576rpx; width: 240rpx;
justify-content: center; justify-content: center;
z-index: 999; z-index: 999;
margin-top: 100rpx; margin-top: 100rpx;