Fix:5222 【商城小程序】抽奖界面优化2

This commit is contained in:
linxi
2026-05-08 19:28:36 +08:00
parent 02e1015594
commit 842ba2ff7f
2 changed files with 37 additions and 20 deletions
+36 -20
View File
@@ -76,7 +76,9 @@
</view>
</view>
<image class="prize-tag" :src="prize.levelIcon" v-if="prize.levelIcon" mode="aspectFit" />
<view class="pool-name one-t">{{ prize.prizeName }}</view>
<view class="pool-name-wrap">
<view class="pool-name one-t">{{ prize.prizeName }}</view>
</view>
</view>
</view>
</swiper-item>
@@ -656,7 +658,7 @@ export default {
}
.pool-swiper {
height: 310rpx; /* 增加高度防止放大后被裁剪,并留出阴影和标签的空间 */
height: 340rpx; /* 增加高度防止放大后被裁剪,并留出阴影和标签的空间 */
width: 100%;
}
@@ -675,23 +677,27 @@ export default {
flex-shrink: 0;
transform: scale(0.85); /* 默认两侧缩小 */
transition: transform 0.3s ease;
color: #333;
&.is-active {
transform: scale(1.1); /* 当前项放大 */
z-index: 10;
color: #cb302c;
}
.item-inner {
background: #fff;
border-radius: 16rpx 48rpx 16rpx 16rpx;
padding: 12rpx;
height: 220rpx;
height: 270rpx;
box-sizing: border-box;
border: 2rpx solid #ffb611;
box-shadow: 10rpx 10rpx 0 #ffb611;
border: 10rpx solid #ffb611;
border-bottom-width: 60rpx;
// box-shadow: 10rpx 10rpx 0 #ffb611;
.item-dashed {
border: 2rpx dashed #ccc;
// border: 2rpx dashed #ccc;
border-radius: 8rpx 36rpx 8rpx 8rpx;
height: 100%;
display: flex;
@@ -714,22 +720,32 @@ export default {
z-index: 2;
}
.pool-name {
.pool-name-wrap {
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translateX(-50%);
background: #fff;
color: #cb302c;
font-size: 22rpx;
font-weight: bold;
padding: 6rpx 24rpx;
border-radius: 30rpx;
white-space: nowrap;
bottom: 10rpx;
right: -10rpx;
z-index: 3;
border: 2rpx solid #ffb611;
max-width: 95%;
text-align: center;
max-width: 70%;
&::after {
content: '';
position: absolute;
top: -10rpx;
right: 0;
width: 0;
height: 0;
border-bottom: 10rpx solid #A19669;
border-right: 10rpx solid transparent;
}
.pool-name {
background: #fff;
font-size: 22rpx;
font-weight: bold;
padding: 6rpx 10rpx;
border-radius: 30rpx 0 0 30rpx;
text-align: center;
}
}
}
}
+1
View File
@@ -530,6 +530,7 @@ export default {
flex: 1;
height: 36rpx;
margin-right: 8rpx;
margin-top: 8rpx;
}
.tip-btn {