1

main.js

@@ -8,7 +8,8 @@ App.mpType = 'app'
 
 
 Vue.prototype.goBack = function () {
-	getCurrentPages().length > 1 ? uni.navigateBack({}) : uni.navigateBack({delta:999})
+	getCurrentPages().length > 1 ? uni.navigateBack({}) : window.location.href = window.location.origin
+
 }
 Vue.prototype.concat = function () {
 	// let img = require("static/4/0_card.png")

pages/index/index.vue

@@ -1,14 +1,36 @@
 <template>
-	<view>
+	<view class="bg">
-		<view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
+		<!-- <view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
-		 @touchstart="touchStart" @touchend="touchEnd"></view>
+		 @touchstart="touchStart" @touchend="touchEnd"></view> -->
+		
+		<view class="content" v-show="number == 0">
+			<image class="bg-image" src="/static/1/1.png" mode="widthFix"></image>
+			<image src="/static/1/1btn.png" class="btn_1" @click="click"></image>
+		</view>
+		
+		<view class="content content_2" v-show="number == 1">
+			<image class="title_2" src="/static/1/2title.png" ></image>
+			<view class="progress-container">
+				<view class="progress" :style="{'width':progressNum+'%'}"></view>
+			</view>
+			<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressNum}}%</view>
+		</view>
+		
+		<view class="content" v-show="number == 2" @click="click"
+		 @touchstart="touchStart" @touchend="touchEnd">
+			<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image>
+		</view>
 		
 		<!-- 天生有善 后生友善 按钮 -->
-		<view class="btn-box" v-if="number == 3">
+		<view class="content" v-show="number == 3">
-			<image src="/static/1/btn1.png" mode="" class="btn1"></image>
+			<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
-			<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image>
+			<view class="btn-box" >
-			<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image>
+				<image src="/static/1/btn1.png" mode="" class="btn1"></image>
+				<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image>
+				<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image>
+			</view>
 		</view>
+		
 	</view>
 </template>
 
@@ -17,6 +39,7 @@
 		data() {
 			return {
 				imgSrc: require('static/1/1.png'),
+				progressNum: 0,
 				number: 0,
 				startY: 0
 			}
@@ -34,7 +57,7 @@
 				this.number += 1
 				switch (this.number){
 					case 1:
-						this.imgSrc = require('static/1/1.png')
+						this.startProgress()
 						break;
 					case 2:
 						this.imgSrc = require('static/1/2.png')
@@ -46,6 +69,16 @@
 						break;
 				}
 			},
+			startProgress() {
+				let timer = setInterval(()=>{
+					this.progressNum++
+					if (this.progressNum>=100) {
+						this.progressNum = 100
+						clearInterval(timer)
+						this.number = 2
+					}
+				},10)
+			},
 			touchStart(e) {
 				this.startY = e.changedTouches[0].clientY;
 			},
@@ -63,16 +96,60 @@
 </script>
 
 <style lang="scss" scoped>
+	.bg{
+		width: 100%;
+		min-height: 100vh;
+		font-size: 0;
+		background: black;
+	}
 	.content {
-		width: 100vw;
+		width: 100%;
-		height: 100vh;
+		min-height: 100vh;
-		background-size: 100% 100%;
+		position: relative;
+		.bg-image{
+			width: 100%;
+			min-height: 100vh;
+			height: auto;
+		}
+		.btn_1{
+			width: 569rpx;
+			height: 74rpx;
+			position: absolute;
+			bottom: 68rpx;
+			left: 95rpx;
+		}
+		&.content_2{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			.title_2{
+				width: 65rpx;
+				height: 76rpx;
+			}
+			.progress-container{
+				width: 387rpx;
+				height: 24rpx;
+				border-radius: 20rpx;
+				border: 2px solid #8F76EE;
+				margin:  26rpx 0;
+				
+				.progress{
+					height: 100%;
+					background: rgba(143,118,238,0.3);
+					border-radius: 20rpx;
+					width: 0;
+				}
+			}
+		}
+		
+		
 	}
 	
 	.btn-box {
-		width: 100vw;
+		width: 100%;
-		height: 830rpx;
+		height: 100%;
-		position: fixed;
+		position: absolute;
 		left: 0;
 		bottom: 0;
 		
@@ -80,10 +157,11 @@
 			position: absolute;
 		}
 		
+		
 		.btn1 {
 			width: 298rpx;
 			height: 62rpx;
-			top: 0;
+			top: 810rpx;
 			left: 229rpx;
 		}
 		

pages/index/tiansheng.vue

@@ -1,9 +1,15 @@
 <template>
 	<view class="bg">
-		<image class="back-icon" style="position: absolute;top: 20rpx;" src="/static/back.png" @click="goBack()"></image>
+		
+		<image class="bg-image" src="/static/2/bg.png" mode="widthFix"></image>
+		
+		<view class="bg-content">
+		<image style="display: block;" class="back-icon" src="/static/back.png" @click="goBack()"></image>
 		<image :src="`/static/2/${current + 1}s.png`" class="text-img"></image>
+		<view class="line"></view>
 		
-		<swiper class="swiper-box" :circular="false" previous-margin="210rpx" next-margin="210rpx" :duration="800"
+		<swiper class="swiper-box" :circular="false" previous-margin="210rpx" next-margin="210rpx" 
+		:duration="800"
 			:current="current" circular="true" @change="swiperChange">
 			<swiper-item v-for="(item, index) in 3" :key="index" class="flex-center"
 			@click="goShanJuan(item,index)">
@@ -12,6 +18,7 @@
 				</view>
 			</swiper-item>
 		</swiper>
+		</view>
 	</view>
 </template>
 
@@ -48,20 +55,37 @@
 <style lang="scss" scoped>
 	.bg {
 		width: 100vw;
-		height: 100vh;
+		min-height: 100vh;
-		background-image: url('/static/2/bg.png');
-		background-size: 100% 100%;
 		position: relative;
-		padding-top: 780rpx;
 		box-sizing: border-box;
+		font-size: 0;
+		background: black;
+		.bg-image{
+			width: 100%;
+			height: auto;
+		}
+		.bg-content{
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+		}
 	}
 	
 	.text-img {
 		width: 656rpx;
 		height: 546rpx;
-		position: absolute;
+		margin: 0 auto;
-		top: 1.3rpx;
+		display: block;
-		left: 47rpx;
+	}
+	.line{
+		width: 654rpx;
+		height: 2rpx;
+		background: #FCF1E6;
+		margin: 32rpx auto 100rpx;
 	}
 	
 	.swiper-box {
@@ -78,6 +102,18 @@
 	}
 	.swiper-items {
 		transform: scale(.8);
-		filter: blur(2px)
+		transform-origin : 50% 100%;
+		position: relative;
+		&:before{
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: rgba(0,0,0,0.5);
+			z-index: 2;
+		}
+		// filter: blur(2px)
 	}
 </style>