初始化信息填写界面代码

pages.json

@@ -30,6 +30,18 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/transition/page6/page6",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/transition/page7/page7",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/login/account_login/account_login",
       "style": {
@@ -41,6 +53,48 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/information/sex/sex",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/information/boy_height/boy_height",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/information/girl_height/girl_height",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/information/boy_weight/boy_weight",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/information/gril_weight/gril_weight",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/login/forget_password/forget_password",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "uniIdRouter": {},

pages/information/boy_height/boy_height.vue

@@ -6,7 +6,9 @@
 
 <script>
 export default {
-
+  data() {
+    return {};
+  }
 }
 </script>
 

pages/information/girl_height/girl_height.vue

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

pages/information/gril_weight/gril_weight.vue

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

pages/information/sex/sex.vue

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

pages/login/account_login/account_login.vue

@@ -6,6 +6,7 @@
 	<view class="login_part">
 		<!-- 导航栏 -->
 		<view class="login_ways">
+<!--      -->
 			<view class="account_words" @click="toPassageEvent" 
 				:style="{borderBottomColor:passageWordsBottomColor, borderBottom:passageWordsBottomBorder}">
 				密码登录

pages/login/forget_password/forget_password.vue

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

pages/login/index/index.vue

@@ -1,52 +0,0 @@
-<template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>

pages/transition/page5/page5.vue

@@ -1,17 +1,114 @@
 <template>
-  <view >
+  <!-- 背景 -->
-
+  <view class="background">
+    <image class="blue_background" src="/static/transition/page5/pictures/blue_background.png"></image>
+    <!-- 人物 -->
+    <image class="human" src="/static/transition/page5/pictures/human.png"></image>
+    <!-- 文字 -->
+    <image class="text" src="/static/transition/page5/pictures/text.png"></image>
+    <!-- 按钮 -->
+    <image class="button" @click="goToPage6" src="/static/transition/page5/pictures/button.png"></image>
   </view>
 </template>
 
 <script>
 export default {
-  data() {
+  methods: {
-    return {};
+    goToPage6() {
+      uni.navigateTo({
+        url: '/pages/transition/page6/page6' // 跳转到 page6
+      });
+    }
   }
 }
 </script>
 
 <style lang="scss">
+.background {
+  background-image: url("/static/transition/page5/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.blue_background {
+  position: absolute;
+  top: 0%;
+  width: 100%;
+  height: 50%;
+  object-fit: cover;
+  animation: fadeIn 1s ease forwards;
+  opacity: 0;
+}
+
+/* Human 从右侧缓缓移动到屏幕中间 */
+.human {
+  position: absolute;
+  width: 75%;
+  height: 48%;
+  top: 5%;
+  object-fit: contain;
+  animation: slideInLeft 2s ease forwards; /* 定义新的动画 */
+  right: -100%; /* 从屏幕右侧外部开始 */
+  transform: translateX(0);
+}
 
+/* Text 延迟显示 */
+.text {
+  position: absolute;
+  width: 85%;
+  height: 12%;
+  object-fit: contain;
+  animation: fadeIn 1s ease 2s forwards;
+  opacity: 0;
+  top: 55%;
+}
+
+/* Button 延迟显示并加缩放特效，放在右下角 */
+.button {
+  position: absolute;
+  height: 10vh;
+  width: 22vw;
+  animation: fadeInScale 1s ease 2.5s forwards;
+  opacity: 0;
+  right: 5%;
+  bottom: 3%;
+}
+
+/* 定义 human 从右侧移动到中间的动画 */
+@keyframes slideInLeft {
+  from {
+    right: -100%; /* 从屏幕右侧外部开始 */
+  }
+  to {
+    right: 12.5%; /* 到达屏幕中间位置 */
+  }
+}
+
+/* Text 和 Button 的渐入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button 的缩放渐入动画 */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

pages/transition/page6/page6.vue

@@ -1,17 +1,114 @@
 <template>
-  <view>
+  <!-- 背景 -->
-
+  <view class="background">
+    <image class="blue_background" src="/static/transition/page6/pictures/blue_background.png"></image>
+    <!-- 人物 -->
+    <image class="human" src="/static/transition/page6/pictures/human.png"></image>
+    <!-- 文字 -->
+    <image class="text" src="/static/transition/page6/pictures/text.png"></image>
+    <!-- 按钮 -->
+    <image class="button" @click="goToPage7" src="/static/transition/page6/pictures/button.png"></image>
   </view>
 </template>
 
 <script>
 export default {
-  data() {
+  methods: {
-    return {};
+    goToPage7() {
+      uni.navigateTo({
+        url: '/pages/transition/page7/page7' // 跳转到 page6
+      });
+    }
   }
 }
 </script>
 
 <style lang="scss">
+.background {
+  background-image: url("/static/transition/page6/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.blue_background {
+  position: absolute;
+  top: 0%;
+  width: 100%;
+  height: 50%;
+  object-fit: cover;
+  animation: fadeIn 1s ease forwards;
+  opacity: 0;
+}
+
+/* Human 从右侧缓缓移动到屏幕中间 */
+.human {
+  position: absolute;
+  width: 75%;
+  height: 48%;
+  top: 3%;
+  object-fit: contain;
+  animation: slideInLeft 2s ease forwards; /* 定义新的动画 */
+  right: -100%; /* 从屏幕右侧外部开始 */
+  transform: translateX(0);
+}
 
+/* Text 延迟显示 */
+.text {
+  position: absolute;
+  width: 85%;
+  height: 12%;
+  object-fit: contain;
+  animation: fadeIn 1s ease 2s forwards;
+  opacity: 0;
+  top: 55%;
+}
+
+/* Button 延迟显示并加缩放特效，放在右下角 */
+.button {
+  position: absolute;
+  height: 10vh;
+  width: 22vw;
+  animation: fadeInScale 1s ease 2.5s forwards;
+  opacity: 0;
+  right: 5%;
+  bottom: 3%;
+}
+
+/* 定义 human 从右侧移动到中间的动画 */
+@keyframes slideInLeft {
+  from {
+    right: -100%; /* 从屏幕右侧外部开始 */
+  }
+  to {
+    right: 12.5%; /* 到达屏幕中间位置 */
+  }
+}
+
+/* Text 和 Button 的渐入动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button 的缩放渐入动画 */
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

pages/transition/page7/page7.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="background">
+    <!--按钮-->
+    <image class="button" @click="goToLoginPage" src="@/static/transition/page7/pictures/button.png"></image>
+
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    goToLoginPage() {
+      uni.navigateTo({
+        url: '/pages/login/account_login/account_login' // 跳转到 page3
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.background {
+  background-image: url("@/static/transition/page7/pictures/background.png");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  display: flex;
+  flex-direction: column; /* 纵向排列 */
+  align-items: center; /* 水平居中 */
+  justify-content: flex-end; /* 使内容向底部对齐 */
+  position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
+}
+
+.button {
+  position: absolute; /* 绝对定位 */
+  width: 80%;
+  height: 12%;
+  bottom: 5%; /* 距离底部 20% 的位置 */
+  left: 50%; /* 水平居中 */
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
+}
+</style>