提交

pages.json

@@ -3,7 +3,15 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "uni-app",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/tiansheng",
+			"style": {
+				"navigationBarTitleText": "uni-app",
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/index/index.vue

@@ -1,8 +1,13 @@
 <template>
-	<view class="content">
+	<view>
-		<image class="logo" src="/static/logo.png"></image>
+		<view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
-		<view class="text-area">
+		 @touchstart="touchStart" @touchend="touchEnd"></view>
-			<text class="title">{{title}}</text>
+		
+		<!-- 天生有善 后生友善 按钮 -->
+		<view class="btn-box" v-if="number == 3">
+			<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" style="left: 449rpx;"></image>
 		</view>
 	</view>
 </template>
@@ -11,42 +16,82 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				imgSrc: require('static/1/1.png'),
+				number: 0,
+				startY: 0
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
-
+			gotoPath(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			click() {
+				this.number += 1
+				switch (this.number){
+					case 1:
+						this.imgSrc = require('static/1/1.png')
+						break;
+					case 2:
+						this.imgSrc = require('static/1/2.png')
+						break;
+					case 3:
+						this.imgSrc = require('static/1/3.png')
+						break;
+					default:
+						break;
+				}
+			},
+			touchStart(e) {
+				this.startY = e.changedTouches[0].clientY;
+			},
+			touchEnd(e) {
+				const endY = e.changedTouches[0].clientY;
+				const distanceY = this.startY - endY;
+				if (distanceY > 50 && this.number == 2) {
+					console.log('上滑操作触发');
+					this.click()
+					// 在此处编写上滑操作执行的逻辑
+				}
+			},
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
 	.content {
-		display: flex;
+		width: 100vw;
-		flex-direction: column;
+		height: 100vh;
-		align-items: center;
+		background-size: 100% 100%;
-		justify-content: center;
 	}
 	
-	.logo {
+	.btn-box {
-		height: 200rpx;
+		width: 100vw;
-		width: 200rpx;
+		height: 830rpx;
-		margin-top: 200rpx;
+		position: fixed;
-		margin-left: auto;
+		left: 0;
-		margin-right: auto;
+		bottom: 0;
-		margin-bottom: 50rpx;
-	}
 		
-	.text-area {
+		image {
-		display: flex;
+			position: absolute;
-		justify-content: center;
+		}
-	}
+		
+		.btn1 {
+			width: 298rpx;
+			height: 62rpx;
+			top: 0;
+			left: 229rpx;
+		}
 		
-	.title {
+		.btn2 {
-		font-size: 36rpx;
+			width: 243rpx;
-		color: #8f8f94;
+			height: 74rpx;
+			bottom: 223rpx;
+			left: 78rpx;
+		}
 	}
 </style>

pages/index/tiansheng.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="bg">
+		<image :src="`/static/2/${current + 1}s.png`" class="text-img"></image>
+		
+		<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">
+				<view :class="['swiper-item', {'swiper-items': index != current}]">
+					<image :src="`/static/2/${item}.png`" mode="aspectFill"></image>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 0
+			}
+		},
+		methods: {
+			//轮播图左右滑动
+			swiperChange(e) {
+				let {
+					current,
+					source
+				} = e.detail;
+				//在自动或手动的时候才赋予current值
+				if (source === 'autoplay' || source === 'touch') {
+					this.current = current;
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bg {
+		width: 100vw;
+		height: 100vh;
+		background-image: url('/static/2/bg.png');
+		background-size: 100% 100%;
+		position: relative;
+		padding-top: 780rpx;
+		box-sizing: border-box;
+	}
+	
+	.text-img {
+		width: 656rpx;
+		height: 546rpx;
+		position: absolute;
+		top: 1.3rpx;
+		left: 47rpx;
+	}
+	
+	.swiper-box {
+		height: 746rpx;
+	}
+	.swiper-item {
+		width: 337rpx;
+		height: 746rpx;
+		
+		image {
+			width: 337rpx;
+			height: 746rpx;
+		}
+	}
+	.swiper-items {
+		transform: scale(.8);
+		filter: blur(2px)
+	}
+</style>