From 97074ba1bb6a3a3d553d3d086dd2698853f9cd2b Mon Sep 17 00:00:00 2001
From: chenkainan <chenkainan163@163.com>
Date: Mon, 9 Jun 2025 17:06:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue | 431 +++++++++++++++++++++++-------------------
 1 file changed, 238 insertions(+), 193 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 36a5cfc..2703251 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,200 +1,245 @@
 <template>
-	<view class="bg">
-		<!-- <view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
-		 @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+'%'}">
-					<image class="dongxiao" src="/static/1/loading.png"></image>
-				</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" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image>
-			<swiper class="swiper-box" :vertical="true">
-				<swiper-item >
-					<image class="bg-image" src="/static/1/2.png" mode="widthFix"></image>
-				</swiper-item>
-			</swiper>
-		</view>
-		
-		<!-- 天生有善 后生友善 按钮 -->
-		<view class="content" v-show="number == 3">
-			<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
-			<view class="btn-box" >
-				<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>
+    <view class="bg">
+        <!-- 第一页 -->
+        <view :class="['content', {'content-first': isFlipFade}]" v-show="currentPage === 0">
+            <image class="bg-image" src="/static/1/1.png" mode="widthFix"></image>
+            <image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image>
+        </view>
+
+        <!-- 加载页 -->
+        <view class="content content_2" v-show="currentPage === 1">
+            <image class="title_2" src="/static/1/2title.png"></image>
+            <view class="progress-container">
+                <view class="progress" :style="{'width': progressPercentage + '%'}">
+                    <image class="dongxiao" src="/static/1/loading.png"></image>
+                </view>
+            </view>
+            <view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
+        </view>
+
+        <!-- 第二页 -->
+        <view class="content" v-show="currentPage === 2" @click="handlePageClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+            <image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image>
+            <swiper class="swiper-box" :vertical="true">
+                <swiper-item>
+                    <image class="bg-image" src="/static/1/2.png" mode="widthFix"></image>
+                </swiper-item>
+            </swiper>
+        </view>
+
+        <!-- 第三页 -->
+        <view class="content" v-show="currentPage === 3">
+            <image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
+            <view class="btn-box">
+                <image src="/static/1/btn1.png" mode="" class="btn1"></image>
+                <image src="/static/1/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')"></image>
+                <image src="/static/1/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')" style="left: 449rpx;"></image>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				imgSrc: require('static/1/1.png'),
-				progressNum: 0,
-				number: 0,
-				startY: 0,
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-			gotoPath(url) {
-				uni.navigateTo({
-					url: url
-				})
-			},
-			click() {
-				this.number += 1
-				switch (this.number){
-					case 1:
-						this.startProgress()
-						break;
-					case 2:
-						this.imgSrc = require('static/1/2.png')
-						break;
-					case 3:
-						this.imgSrc = require('static/1/3.png')
-						break;
-					default:
-						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;
-			},
-			touchEnd(e) {
-				const endY = e.changedTouches[0].clientY;
-				const distanceY = this.startY - endY;
-				if (distanceY > 50 && this.number == 2) {
-					console.log('上滑操作触发');
-					setTimeout(()=>{this.click()},100)
-					
-					// 在此处编写上滑操作执行的逻辑
-				}
-			},
-		}
-	}
+export default {
+    data() {
+        return {
+            progressPercentage: 0,
+            currentPage: 0,
+            startTouchY: 0,
+            isFlipFade: false,
+            progressTimer: null
+        };
+    },
+    onLoad() {
+        // 页面加载时的逻辑
+    },
+    methods: {
+        // 跳转到指定页面
+        navigateToPage(url) {
+            uni.navigateTo({
+                url
+            });
+        },
+        // 处理第一页按钮点击事件
+        handleFirstPageClick() {
+            this.isFlipFade = true;
+            setTimeout(() => {
+                this.handlePageClick();
+            }, 1500);
+        },
+        // 处理页面点击事件
+        handlePageClick() {
+            this.currentPage++;
+            this.updatePageContent();
+        },
+        // 根据当前页面更新内容
+        updatePageContent() {
+            switch (this.currentPage) {
+                case 1:
+                    this.startProgress();
+                    break;
+                case 2:
+                    // 这里可以添加第二页的特殊逻辑
+                    break;
+                case 3:
+                    // 这里可以添加第三页的特殊逻辑
+                    break;
+                default:
+                    break;
+            }
+        },
+        // 开始加载进度条
+        startProgress() {
+            this.progressTimer = setInterval(() => {
+                this.progressPercentage++;
+                if (this.progressPercentage >= 100) {
+                    this.progressPercentage = 100;
+                    clearInterval(this.progressTimer);
+                    this.currentPage = 2;
+                }
+            }, 10);
+        },
+        // 处理触摸开始事件
+        handleTouchStart(e) {
+            this.startTouchY = e.changedTouches[0].clientY;
+        },
+        // 处理触摸结束事件
+        handleTouchEnd(e) {
+            const endY = e.changedTouches[0].clientY;
+            const distanceY = this.startTouchY - endY;
+            if (distanceY > 50 && this.currentPage === 2) {
+                console.log('上滑操作触发');
+                setTimeout(() => {
+                    this.handlePageClick();
+                }, 100);
+            }
+        }
+    },
+    beforeDestroy() {
+        // 组件销毁前清除定时器
+        if (this.progressTimer) {
+            clearInterval(this.progressTimer);
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.bg{
-		width: 100%;
-		min-height: 100vh;
-		font-size: 0;
-		background: black;
-	}
-	.content {
-		width: 100%;
-		min-height: 100vh;
-		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;
-					overflow: hidden;
-					position: relative;
-				}
-			}
-		}
-		
-		
-	}
-	
-	.btn-box {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		bottom: 0;
-		
-		image {
-			position: absolute;
-		}
-		
-		
-		.btn1 {
-			width: 298rpx;
-			height: 62rpx;
-			top: 810rpx;
-			left: 229rpx;
-		}
-		
-		.btn2 {
-			width: 243rpx;
-			height: 74rpx;
-			bottom: 223rpx;
-			left: 78rpx;
-		}
-	}
-	.dongxiao{
-		position: absolute;
-		right: 0;
-		height: 100%;
-		width: 158rpx;
-	}
-	.swiper-box{
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>
+.bg {
+    width: 100%;
+    min-height: 100vh;
+    font-size: 0;
+    background: black;
+}
+
+.content {
+    width: 100%;
+    min-height: 100vh;
+    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;
+                overflow: hidden;
+                position: relative;
+            }
+        }
+    }
+}
+
+.btn-box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+
+    image {
+        position: absolute;
+    }
+
+    .btn1 {
+        width: 298rpx;
+        height: 62rpx;
+        top: 810rpx;
+        left: 229rpx;
+    }
+
+    .btn2 {
+        width: 243rpx;
+        height: 74rpx;
+        bottom: 223rpx;
+        left: 78rpx;
+    }
+}
+
+.dongxiao {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    width: 158rpx;
+}
+
+.swiper-box {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.content-first {
+    animation: flipFade 2s forwards;
+    opacity: 1;
+    transform: rotateY(0deg);
+}
+
+/* 定义动画 */
+@keyframes flipFade {
+    0% {
+        opacity: 1;
+        transform: rotateY(0deg);
+    }
+
+    100% {
+        opacity: 0;
+        transform: rotateY(180deg);
+    }
+}
+</style>
\ No newline at end of file