|
@@ -39,13 +39,13 @@
|
|
|
|
|
|
<!-- 奖品 -->
|
|
<!-- 奖品 -->
|
|
<swiper class="prize-swiper" previous-margin="100px" next-margin="100px" :interval="4000" :autoplay="true" :circular="true" @change="changePrizeSwiper">
|
|
<swiper class="prize-swiper" previous-margin="100px" next-margin="100px" :interval="4000" :autoplay="true" :circular="true" @change="changePrizeSwiper">
|
|
- <swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in prizeList.slice(0, 10)" :key="index" @click="toPrizeGoods(item)">
|
|
|
|
- <view class="prize-swiper-item flex">
|
|
|
|
|
|
+ <swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in prizeList.slice(0, 10)" :key="index">
|
|
|
|
+ <view class="prize-swiper-item flex" @click="toPrizeGoods(item)">
|
|
<image :class="prizeIndex == index ? 'img' : 'img-side'" :src="item.picUrl" mode="aspectFit"></image>
|
|
<image :class="prizeIndex == index ? 'img' : 'img-side'" :src="item.picUrl" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</swiper>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 奖品价格 -->
|
|
<!-- 奖品价格 -->
|
|
<view class="prize-price flex">
|
|
<view class="prize-price flex">
|
|
<view class="prize-price-present" v-if="prizeInfo.prizeType != 'coin'">¥{{ $numberFormat(prizeInfo.value) }}</view>
|
|
<view class="prize-price-present" v-if="prizeInfo.prizeType != 'coin'">¥{{ $numberFormat(prizeInfo.value) }}</view>
|
|
@@ -367,7 +367,6 @@
|
|
background: #FFF3EB;
|
|
background: #FFF3EB;
|
|
padding-bottom: 100rpx;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
}
|
|
-
|
|
|
|
.nav-left {
|
|
.nav-left {
|
|
&__code {
|
|
&__code {
|
|
margin-left: 10rpx;
|
|
margin-left: 10rpx;
|
|
@@ -376,7 +375,7 @@
|
|
|
|
|
|
// 奖品轮播
|
|
// 奖品轮播
|
|
.prize {
|
|
.prize {
|
|
- height: 71vh;
|
|
|
|
|
|
+ // height: 71vh;
|
|
background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_3.png) center center no-repeat;
|
|
background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_3.png) center center no-repeat;
|
|
background-size: 100vw 71vh;
|
|
background-size: 100vw 71vh;
|
|
margin-bottom: 14rpx;
|
|
margin-bottom: 14rpx;
|
|
@@ -407,27 +406,28 @@
|
|
|
|
|
|
// 奖品轮播
|
|
// 奖品轮播
|
|
&-swiper {
|
|
&-swiper {
|
|
- height: 33vh;
|
|
|
|
|
|
+ height: 534rpx;
|
|
|
|
|
|
.swiper-item {
|
|
.swiper-item {
|
|
- width: 60vw;
|
|
|
|
- height: 80%;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ // 80
|
|
}
|
|
}
|
|
|
|
|
|
.swiper-item-side {
|
|
.swiper-item-side {
|
|
- width: 60%;
|
|
|
|
- height: 60%;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
margin: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
&-item {
|
|
&-item {
|
|
- height: 100%;
|
|
|
|
|
|
+ height: 267px;
|
|
|
|
|
|
.img {
|
|
.img {
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 80%;
|
|
|
|
|
|
+ height: 100%;
|
|
animation: prizeBig .3s;
|
|
animation: prizeBig .3s;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -708,10 +708,10 @@
|
|
{
|
|
{
|
|
from {
|
|
from {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 80%;
|
|
|
|
|
|
+ height: 100%;
|
|
}
|
|
}
|
|
to {
|
|
to {
|
|
- width: 50%;
|
|
|
|
|
|
+ width: 60%;
|
|
height: 60%;
|
|
height: 60%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -720,12 +720,12 @@
|
|
@keyframes prizeBig
|
|
@keyframes prizeBig
|
|
{
|
|
{
|
|
from {
|
|
from {
|
|
- width: 50%;
|
|
|
|
|
|
+ width: 60%;
|
|
height: 60%;
|
|
height: 60%;
|
|
}
|
|
}
|
|
to {
|
|
to {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 80%;
|
|
|
|
|
|
+ height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|