Fix:3306 【礼品功能】礼品封面两边还要再低于中间,左右两边往下移,底部文字平行,顶部低于中间

This commit is contained in:
linxi
2025-02-27 19:02:33 +08:00
parent 44798a564f
commit b85a619027
2 changed files with 17 additions and 11 deletions
@@ -13,18 +13,18 @@
:circular="true" :circular="true"
:indicator-dots="false" :indicator-dots="false"
@change="onChange" @change="onChange"
previous-margin="180rpx" previous-margin="160rpx"
next-margin="180rpx" next-margin="180rpx"
class="cover-swiper" class="cover-swiper"
> >
<swiper-item v-for="(item, index) in list" :key="index"> <swiper-item v-for="(item, index) in list" :key="index">
<view class="cover-item" > <view class="cover-item" >
<view class="img-wrap" :class="currentIndex === index ? 'v12-mt-8' : 'v12-mt-4'"> <view class="img-wrap" :class="currentIndex === index ? 'v12-mt-10' : 'v12-mt-18'">
<view class="pro-img-wrap " v-show="currentIndex === index "> <view class="pro-img-wrap ">
<image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" /> <image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" />
</view> </view>
<image :src="item.cover" class="cover-image" mode="widthFix|heightFix" /> <image :src="item.cover" class="cover-image" mode="widthFix|heightFix" />
<view class="message-text">{{ message || '礼笺轻启,礼藏心意' }}</view> <view class="message-text" :style="{top: currentIndex !== index ? '260rpx' : '220rpx'}">{{ message || '礼笺轻启,礼藏心意' }}</view>
</view> </view>
<view class="cover-name">{{ item.name }} </view> <view class="cover-name">{{ item.name }} </view>
</view> </view>
@@ -104,6 +104,8 @@ export default {
margin: auto; margin: auto;
border: 10rpx solid #FDF0D3; border: 10rpx solid #FDF0D3;
top: -40px; top: -40px;
border-radius: 16rpx;
overflow: hidden;
} }
.img-wrap{ .img-wrap{
position: relative; position: relative;
@@ -116,7 +118,7 @@ export default {
margin-top: 20rpx; margin-top: 20rpx;
} }
.cover-swiper{ .cover-swiper{
height: 540rpx; height: 620rpx;
} }
.cover-picker { .cover-picker {
.cover-title { .cover-title {
+9 -5
View File
@@ -84,7 +84,9 @@ export default {
}, },
computed: { computed: {
isReceive() { isReceive() {
return this.card.recipientsNum === this.card.receiveNum const gitfNum = this.card.giftProducts && this.card.giftProducts.length
const isReceiveNum = this.card.giftProducts && this.card.giftProducts.filter(e => e.isReceive === 1).length
return gitfNum === isReceiveNum
}, },
isLogin() { isLogin() {
return !!cookie.get('login_status'); return !!cookie.get('login_status');
@@ -243,15 +245,15 @@ export default {
.share-btn{ .share-btn{
width: fit-content; width: fit-content;
border-radius: 100rpx; border-radius: 100rpx;
font-size: 24rpx; font-size: 32rpx;
margin-top: 40rpx; margin-top: 40rpx;
z-index: 999; z-index: 999;
align-items: center; align-items: center;
border: 1rpx solid #C52733 ; border: 1rpx solid #C52733 ;
margin-left: 10rpx; margin-left: 10rpx;
font-weight: bold; font-weight: bold;
height: 70rpx; height: 80rpx;
line-height: 70rpx; line-height: 80rpx;
} }
.share-btn::before{ .share-btn::before{
border: none; border: none;
@@ -261,10 +263,12 @@ export default {
} }
.address-btn{ .address-btn{
width: fit-content; width: fit-content;
padding: 10rpx 30rpx; padding: 10rpx 40rpx;
border-radius: 100rpx; border-radius: 100rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
height: 80rpx;
line-height: 80rpx;
/* margin-top: 40rpx; */ /* margin-top: 40rpx; */
z-index: 999; z-index: 999;
} }