修改页面4代码

pages.json

@@ -24,12 +24,12 @@
         "navigationStyle": "custom"
       }
     },
-	{
+    {
-	  "path": "pages/transition/page5/page5",
+      "path": "pages/transition/page5/page5",
-	  "style": {
+      "style": {
-	    "navigationStyle": "custom"
+        "navigationStyle": "custom"
-	  }
+      }
-	}
+    }
   ],
   "uniIdRouter": {},
   "tabBar": null

pages/transition/page1/page1.vue

@@ -1,7 +1,6 @@
 <template>
-  <view class="page1">
+<!-- 页面1 图片 -->
-    <!-- 设置图片渐变的效果显示 -->
+  <view class="page1"></view>
-  </view>
 </template>
 
 <script>

pages/transition/page2/page2.vue

@@ -2,7 +2,7 @@
   <view class="background">
     <!--按钮-->
     <image class="button" @click="click" src="@/static/transition/page2/pictures/button.png"></image>
-    <!--按钮-->
+
   </view>
 </template>
 

pages/transition/page3/page3.vue

@@ -1,5 +1,8 @@
 <template>
+  <!-- 背景 -->
   <view class="background">
+
+    <image class="blue_background" src="/static/transition/page3/pictures/blue_background.png"></image>
     <!-- 人物 -->
     <image class="human" src="/static/transition/page3/pictures/human.png"></image>
     <!-- 文字 -->
@@ -33,16 +36,25 @@ export default {
   overflow: hidden;
   position: relative;
 }
-
+.blue_background{
+ position: absolute;
+  top: 0%;
+  width: 100%;
+  height: 50%;
+  object-fit: cover; /* 保持图片比例 */
+  animation: fadeIn 1s ease forwards; /* 1秒后显示 */
+  opacity: 0;
+}
 /* Human 动画，从页面中部向上移动 */
 .human {
   position: absolute;
-  width: 100%;
+  width: 75%;
   height: 48%;
 
+
   object-fit: contain; /* 保持图片比例 */
   animation: moveUp 2s ease forwards;
-  top: 50%; /* 起始位置 */
+  top: 30%; /* 起始位置 */
   transform: translateY(-50%); /* 垂直居中 */
 }
 
@@ -72,10 +84,10 @@ export default {
 /* 定义 human 上移动画 */
 @keyframes moveUp {
   from {
-    top: 50%;
+    top: 70%;
   }
   to {
-    top: 20%; /* 移动到页面顶部 10% */
+    top: 25.8%; /* 移动到页面顶部 10% */
   }
 }
 

pages/transition/page4/page4.vue

@@ -1,18 +1,21 @@
 <template>
+  <!-- 背景 -->
   <view class="background">
+
+    <image class="blue_background" src="/static/transition/page4/pictures/blue_background.png"></image>
     <!-- 人物 -->
     <image class="human" src="/static/transition/page4/pictures/human.png"></image>
     <!-- 文字 -->
     <image class="text" src="/static/transition/page4/pictures/text.png"></image>
     <!-- 按钮 -->
-    <image class="button" @click="goToPage4" src="/static/transition/page4/pictures/button.png"></image>
+    <image class="button" @click="goToPage3" src="/static/transition/page4/pictures/button.png"></image>
   </view>
 </template>
 
 <script>
 export default {
   methods: {
-    goToPage4() {
+    goToPage3() {
       uni.navigateTo({
         url: '/pages/transition/page5/page5' // 跳转到 page5
       });
@@ -34,28 +37,39 @@ export default {
   position: relative;
 }
 
+.blue_background {
+  position: absolute;
+  top: 0%;
+  width: 100%;
+  height: 50%;
+  object-fit: cover; /* 保持图片比例 */
+  animation: fadeIn 1s ease forwards; /* 1秒后显示 */
+  opacity: 0;
+}
+
 /* Human 动画，从页面中部向上移动 */
 .human {
   position: absolute;
-  width: 100%;
+  width: 75%;
   height: 48%;
 
+
   object-fit: contain; /* 保持图片比例 */
   animation: moveUp 2s ease forwards;
-  top: 50%; /* 起始位置 */
+  top: 30%; /* 起始位置 */
   transform: translateY(-50%); /* 垂直居中 */
 }
 
 /* Text 延迟显示 */
 .text {
   position: absolute;
-  width: 90%;
+  width: 85%;
-  height: 17%;
+  height: 12%;
 
   object-fit: contain; /* 保持图片比例 */
   animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
   opacity: 0;
-  top: 50%; /* 根据需要调整位置 */
+  top: 55%; /* 根据需要调整位置 */
 }
 
 /* Button 延迟显示并加缩放特效，放在右下角 */
@@ -72,10 +86,10 @@ export default {
 /* 定义 human 上移动画 */
 @keyframes moveUp {
   from {
-    top: 50%;
+    top: 70%;
   }
   to {
-    top: 20%; /* 移动到页面顶部 10% */
+    top: 28%; /* 移动到页面顶部 10% */
   }
 }
 

pages/transition/page5/page5.vue

@@ -1,8 +1,17 @@
 <template>
+  <view >
+
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {};
+  }
+}
 </script>
 
-<style>
+<style lang="scss">
+
 </style>

pages/transition/page6/page6.vue

@@ -0,0 +1,17 @@
+<template>
+  <view>
+
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
 {
-  "hash": "48f6c93b",
+  "hash": "3dcffc29",
-  "configHash": "badd50c8",
+  "configHash": "cc60d382",
   "lockfileHash": "e3b0c442",
-  "browserHash": "debd2ea0",
+  "browserHash": "e601f541",
   "optimized": {},
   "chunks": {}
 }