首页UI、样式调整

pages/about/index.vue

@@ -4,7 +4,7 @@
 		<view class="about">
 			<view class="flex about-logo">
 				<image src="../../static/logo.png" mode=""></image>
-				<view class="edition">v 1.0.13</view>
+				<view class="edition">v 1.1.0</view>
 			</view>
 			<view class="about-action">
 				<u-cell-group :border="false">

pages/index/index.vue

@@ -5,12 +5,6 @@
 		<view class="box">
 			<view class="box-top">
 				<view class="box-top-action">
-					<!-- <view class="box-top-action-item">
-						<view class="flex box-top-action-item-cir">
-							<u-icon name="scan" color="#fff" size="45"></u-icon>
-						</view>
-						<view class="box-top-action-item-txt">扫一扫</view>
-					</view> -->
 					<view class="box-top-action-item" @click="toPrize">
 						<view class="flex box-top-action-item-cir">
 							<image src="../../static/icon/index_prize.png" mode=""></image>
@@ -28,18 +22,15 @@
 				</view>
 			</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 :vertical="true" :current="currentIndex" :autoplay="false" @change="swiperChange">
+				<swiper class="image-container" 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=""></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" previous-margin="270rpx" next-margin="270rpx" circular :duration="1800" :interval="1500" easing-function="easeOutCubic" :current="currentPrizeIndex" :disable-touch="true" :autoplay="true">
+				<swiper class="prize-container" previous-margin="270rpx" next-margin="270rpx" circular :duration="1500" :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>
@@ -58,19 +49,6 @@
 					</view>
 				</view>
 			</view>
-			<!-- <view class="box-ticket-tip">超值100%中奖</view>
-			<view class="box-start flex">
-				<view class="flex box-start-action" @click="exchange">
-					<text>立即</text>
-					<text>开刮</text>
-				</view>
-				<view class="box-start-all" @click="toTicket">
-					<view class="flex icon">
-						<image class="icon-image" src="../../static/icon/index_all.png" mode="aspectFill"></image>
-					</view>
-					<view class="title">更多盲票</view>
-				</view>
-			</view> -->
 		</view>
 		<custom-tab-bar :activeValue="'index'" />
 
@@ -144,11 +122,6 @@
 			},
 			
 			ticketLeft(){
-				// 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)){
@@ -157,11 +130,6 @@
 			},
 			
 			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){
@@ -304,12 +272,12 @@
 <style lang="scss" scoped>
 	.image-container {
 		width: 750rpx;
-		height: 620rpx;
+		height: 39vh;
 		
 		.swiper-item {
 			position: relative;
-			width: 460rpx;
-			height: 580rpx;
+			width: 61vw;
+			height: 39vh;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -317,53 +285,37 @@
 		
 		.image-wrap{
 			position: relative;
-			width: 460rpx;
-			height: 580rpx;
+			width: 61vw;
+			height: 39vh;
 			
 			.img{
-				width: 460rpx;
-				height: 580rpx;
-			}
-			
-			.img-left{
-				position: absolute;
-				top: 0;
-				left: -80rpx;
-				width: 80rpx;
-				z-index: 30;
-			}
-			
-			.img-right{
-				position: absolute;
-				top: 0;
-				right: -80rpx;
-				width: 80rpx;
-				z-index: 100;
+				width: 61vw;
+				height: 39vh;
 			}
 		}
 	}
 	
 	.prize-container{
 		width: 750rpx;
-		height:  210rpx;
-		margin-top: 60rpx;
+		height:  13vh;
+		margin-top: 2vh;
 		
 		.swiper-item {
 			width: 100rpx;
-			height:  210rpx;
+			height:  13vh;
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
 			
 			.image-wrap{
 				width: 160rpx;
-				height: 210rpx;
+				height: 13vh;
 				border-radius: 20rpx;
 				background: linear-gradient(0deg, #BBBBBB, #FFFFFF);
 				
 				.img{
-					width: 160rpx;
-					height: 160rpx;
+					width: 100%;
+					height: 76%;
 				}
 			}
 		}
@@ -372,13 +324,13 @@
 	
 	.box {
 		width: 100%;
-		min-height: calc(100vh - 50px);
+		height: calc(100vh - 50px);
 		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/index_bg.jpeg) center center;
 
 		&-top {
 			display: flex;
 			justify-content: space-between;
-			padding: 140rpx 0 0 40rpx;
+			padding: 120rpx 0 0 40rpx;
 
 			&-action {
 				display: flex;
@@ -435,7 +387,7 @@
 				position: absolute;
 				width: 100rpx;
 				height: 100rpx;
-				top: 330rpx;
+				top: 310rpx;
 				left: 10rpx;
 				z-index: 20;
 			}
@@ -443,30 +395,22 @@
 				position: absolute;
 				width: 100rpx;
 				height: 100rpx;
-				top: 330rpx;
+				top: 310rpx;
 				right: 10rpx;
 				z-index: 20;
 			}
 			
 			.box-img{
 				position: absolute;
-				top: 0;
+				top: -50rpx;
 				z-index: 10;
 				width: 100vw;
-				height: 580rpx;
+				height: 70vw;
 			}
 		}
 
-		&-ticket-tip {
-			margin-top: 20rpx;
-			line-height: 40rpx;
-			text-align: center;
-			font-size: 40rpx;
-			color: #FE5924;
-		}
-
 		&-ticket-btn{
-			margin-top: 60rpx;
+			margin-top: 30rpx;
 			&-content{
 				position: relative;
 				width: 420rpx;