首页UI调整

pages/index/index.vue

@@ -13,7 +13,7 @@
 					</view> -->
 					<view class="box-top-action-item" @click="toPrize">
 						<view class="flex box-top-action-item-cir">
-							<u-icon name="gift" color="#fff" size="45"></u-icon>
+							<image src="../../static/icon/index_prize.png" mode=""></image>
 						</view>
 						<view class="box-top-action-item-txt">奖品库</view>
 					</view>
@@ -29,17 +29,17 @@
 			</view>
 			<view class="box-ticket">
 				<!-- <carousel :img-list="imgList" url-key="picUrl" @selected="selectedBanner" @changeTicket="getTicket" /> -->
-				<swiper class="image-container" previous-margin="10rpx" next-margin="10rpx" circular :current="currentIndex" :autoplay="false" @change="swiperChange">
+				<swiper class="image-container" previous-margin="10rpx" next-margin="10rpx" circular :vertical="true" :current="currentIndex" :autoplay="false" @change="swiperChange">
 					<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="item.picUrl">
 						<view class="flex image-wrap">
-							<image class="img" @click="clickImg(item)" :src="item.picUrl" lazy-load mode="aspectFill"></image>
+							<image class="img" @click="clickImg(item)" :src="item.picUrl" lazy-load mode=""></image>
 							<!-- <image class="img-left" src="../../static/icon/box_left.png" mode=""></image>
 							<image class="img-right" src="../../static/icon/box_right.png" mode=""></image> -->
 						</view>
 					</swiper-item>
 				</swiper>
 				
-				<swiper class="prize-container" next-margin="540rpx" :current="currentPrizeIndex" :autoplay="false" @change="prizeChange">
+				<swiper class="prize-container" previous-margin="270rpx" next-margin="270rpx" circular :duration="1800" :interval="1500" easing-function="easeOutCubic" :current="currentPrizeIndex" :disable-touch="true" :autoplay="true">
 					<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index">
 						<view class="flex image-wrap">
 							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
@@ -114,7 +114,6 @@
 		},
 		methods: {
 			swiperChange(e) {
-				console.log(e);
 				this.dontFirstAnimation = false
 				this.currentIndex = e.detail.current
 				this.getPrize(this.imgList[this.currentIndex].boxId)
@@ -124,8 +123,6 @@
 				let ticketNum = this.imgList.length - 1
 				let num = this.prizeList.length - 1
 				let index = this.currentPrizeIndex = e.detail.current
-				console.log(num);
-				console.log(e.detail.current);
 				
 				let acIndex = this.currentIndex
 				if(num == index){
@@ -147,14 +144,11 @@
 			},
 			
 			ticketLeft(){
-				if(this.currentIndex > 0){
-					this.currentIndex --
-				}else if (this.currentIndex == 0){
-					this.currentIndex = this.imgList.length - 1
-				}
-			},
-			
-			ticketRight(){
+				// if(this.currentIndex > 0){
+				// 	this.currentIndex --
+				// }else if (this.currentIndex == 0){
+				// 	this.currentIndex = this.imgList.length - 1
+				// }
 				if((this.currentIndex >= 0) && (this.currentIndex < (this.imgList.length - 1))){
 					this.currentIndex ++
 				}else if (this.currentIndex == (this.imgList.length - 1)){
@@ -162,6 +156,19 @@
 				}
 			},
 			
+			ticketRight(){
+				// if((this.currentIndex >= 0) && (this.currentIndex < (this.imgList.length - 1))){
+				// 	this.currentIndex ++
+				// }else if (this.currentIndex == (this.imgList.length - 1)){
+				// 	this.currentIndex = 0
+				// }
+				if(this.currentIndex > 0){
+					this.currentIndex --
+				}else if (this.currentIndex == 0){
+					this.currentIndex = this.imgList.length - 1
+				}
+			},
+			
 			
 			getList() {
 				uni.showLoading({
@@ -207,7 +214,6 @@
 						this.prizeList = prizeList
 						this.currentPrizeIndex = 2
 						this.payInfo = this.imgList[this.currentIndex]
-						console.log(this.prizeList);
 					}
 				}).catch(() => {
 					uni.hideLoading();
@@ -298,11 +304,11 @@
 <style lang="scss" scoped>
 	.image-container {
 		width: 750rpx;
-		height: 580rpx;
+		height: 620rpx;
 		
 		.swiper-item {
 			position: relative;
-			width: 420rpx;
+			width: 460rpx;
 			height: 580rpx;
 			display: flex;
 			justify-content: center;
@@ -311,11 +317,11 @@
 		
 		.image-wrap{
 			position: relative;
-			width: 420rpx;
+			width: 460rpx;
 			height: 580rpx;
 			
 			.img{
-				width: 420rpx;
+				width: 460rpx;
 				height: 580rpx;
 			}
 			
@@ -381,14 +387,20 @@
 					margin-right: 76rpx;
 
 					&-cir {
-						width: 104rpx;
-						height: 104rpx;
+						width: 72rpx;
+						height: 72rpx;
 						background-color: #FFC320 ;
 						border-radius: 50%;
 						margin-bottom: 14rpx;
+						
+						image{
+							width: 40rpx;
+							height: 36rpx;
+						}
 					}
 
 					&-txt {
+						font-size: 24rpx;
 						text-align: center;
 						color: #FFFFFF;
 					}
@@ -423,7 +435,7 @@
 				position: absolute;
 				width: 100rpx;
 				height: 100rpx;
-				top: 230rpx;
+				top: 330rpx;
 				left: 10rpx;
 				z-index: 20;
 			}
@@ -431,7 +443,7 @@
 				position: absolute;
 				width: 100rpx;
 				height: 100rpx;
-				top: 230rpx;
+				top: 330rpx;
 				right: 10rpx;
 				z-index: 20;
 			}
@@ -441,6 +453,7 @@
 				top: 0;
 				z-index: 10;
 				width: 100vw;
+				height: 580rpx;
 			}
 		}