Fix:5222 【商城小程序】抽奖界面优化2
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -530,6 +530,7 @@ export default {
|
||||
flex: 1;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.tip-btn {
|
||||
|
||||
Reference in New Issue
Block a user