Pārlūkot izejas kodu

盲票详情轮播图以及跳转调整

DELL 3 gadi atpakaļ
vecāks
revīzija
2d73e48514
1 mainītis faili ar 16 papildinājumiem un 16 dzēšanām
  1. 16 16
      src/pages/ticketBox/detail.vue

+ 16 - 16
src/pages/ticketBox/detail.vue

@@ -39,13 +39,13 @@
 			
 			<!-- 奖品 -->
 			<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>
 					</view>
 				</swiper-item>
 			</swiper>
-			
+
 			<!-- 奖品价格 -->
 			<view class="prize-price flex">
 				<view class="prize-price-present" v-if="prizeInfo.prizeType != 'coin'">¥{{ $numberFormat(prizeInfo.value) }}</view>
@@ -367,7 +367,6 @@
 		background: #FFF3EB;
 		padding-bottom: 100rpx;
 	}
-	
 	.nav-left {
 		&__code {
 			margin-left: 10rpx;
@@ -376,7 +375,7 @@
 	
 	// 奖品轮播
 	.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-size: 100vw 71vh;
 		margin-bottom: 14rpx;
@@ -407,27 +406,28 @@
 		
 		// 奖品轮播
 		&-swiper {
-			height: 33vh;
+			height: 534rpx;
 			
 			.swiper-item {
-				width: 60vw;
-				height: 80%;
+				width: 100%;
+				height: 100%;
+				// 80
 			}
 			
 			.swiper-item-side {
-				width: 60%;
-				height: 60%;
+				width: 100%;
+				height: 100%;
 				margin: 0;
 			}
 			
 			&-item {
-				height: 100%;
+				height: 267px;
 				
 				.img {
 					position: absolute;
 	
 					width: 100%;
-					height: 80%;
+					height: 100%;
 					animation: prizeBig .3s;
 				}
 				
@@ -708,10 +708,10 @@
 	{
 		from {
 			width: 100%;
-			height: 80%;
+			height: 100%;
 		}
 		to {
-			width: 50%;
+			width: 60%;
 			height: 60%;
 		}
 	}
@@ -720,12 +720,12 @@
 	@keyframes prizeBig
 	{
 		from {
-			width: 50%;
+			width: 60%;
 			height: 60%;
 		}
 		to {
 			width: 100%;
-			height: 80%;
+			height: 100%;
 		}
 	}
 </style>