完成性别界面代码

pages.json

@@ -1,6 +1,6 @@
 {
   "pages": [
-    {
+    /*{
       "path": "pages/transition/page1/page1",
       "style": {
         "navigationStyle": "custom"
@@ -53,47 +53,41 @@
       "style": {
         "navigationStyle": "custom"
       }
-    },
+    },*/
     {
       "path": "pages/information/sex/sex",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-        "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/information/boy_height/boy_height",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-        "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/information/girl_height/girl_height",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-        "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/information/boy_weight/boy_weight",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-        "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/information/gril_weight/gril_weight",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-        "enablePullDownRefresh": false
       }
     },
     {
       "path": "pages/login/forget_password/forget_password",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-        "enablePullDownRefresh": false
       }
     }
   ],

pages/information/boy_weight/boy_weight.vue

@@ -1,17 +1,42 @@
 <template>
-    <view>
+  <view class="background">
+    <!--按钮-->
+    <image class="button" @click="click" src="@/static/transition/page2/pictures/button.png"></image>
 
-    </view>
+  </view>
 </template>
 
 <script>
-    export default {
+export default {
-        data() {
+  methods: {
-            return {};
+    click() {
-        }
+      uni.navigateTo({
+        url: '/pages/inforamtion/boy_weight/boy_weight' // 跳转到 page3
+      });
     }
+  }
+}
 </script>
 
 <style lang="scss">
+.background {
+  background-image: url("@/static/transition/page2/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: 315px;
+  height: 60px;
+  bottom: 20%; /* 距离底部 20% 的位置 */
+  left: 50%; /* 水平居中 */
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
+}
 </style>

pages/information/sex/sex.vue

@@ -1,17 +1,76 @@
 <template>
-  <view>
+  <view class="background">
+    <!-- 男生按钮 -->
+    <image
+        class="boy_image"
+        @click="clickBoyImage"
+        v-if="!isBoySelected"
+        :class="{'slide-in-left': !isBoySelected}"
+        src="/static/information/sex/pictures/boy.png"
+    ></image>
+    <image
+        class="boy_image"
+        @click="clickBoyImage"
+        v-else
+        :class="{'slide-in-left': !isBoySelected}"
+        src="/static/information/sex/pictures/shift_boy.png"
+    ></image>
 
+    <!-- 女生按钮 -->
+    <image
+        class="girl_image"
+        @click="clickGirlImage"
+        v-if="!isGirlSelected"
+        :class="{'slide-in-right': !isGirlSelected}"
+        src="/static/information/sex/pictures/girl.png"
+    ></image>
+    <image
+        class="girl_image"
+        @click="clickGirlImage"
+        v-else
+        :class="{'slide-in-right': !isGirlSelected}"
+        src="/static/information/sex/pictures/shift_girl.png"
+    ></image>
+
+    <!-- 底部下一步按钮 -->
+    <image
+        class="button"
+        @click="goToNextPage"
+        src="/static/information/sex/pictures/button.png"
+    ></image>
   </view>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
-  }
+      isBoySelected: false,
-}
+      isGirlSelected: false,
+    };
+  },
+  methods: {
+    // 跳转到下一页
+    goToNextPage() {
+      const targetPage = this.isBoySelected
+          ? "/pages/information/boy_height/boy_height"
+          : "/pages/information/girl_height/girl_height";
+      uni.navigateTo({
+        url: targetPage, // 根据选择跳转到对应页面
+      });
+    },
+    clickBoyImage() {
+      this.isBoySelected = true;
+      this.isGirlSelected = false; // 取消女生选中状态
+    },
+    clickGirlImage() {
+      this.isGirlSelected = true;
+      this.isBoySelected = false; // 取消男生选中状态
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-
+@import "@/static/information/sex/css/sex.css";
 </style>

pages/login/account_login/account_login.vue

@@ -36,7 +36,7 @@
 				</view>
 				<view class="forget_passage">忘了密码？</view>
 				<view class="button_box login_form_item">
-					<button name="submit_button" class="login_button">登录</button>
+					<button name="submit_button" class="login_button" @click="login">登录</button>
 				</view>
 			</view>
 		</form>
@@ -70,8 +70,6 @@ const passageWordsBottomBorder = computed(() => isPassagePage.value? "0.1rem sol
 const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"0.1rem solid #094ABC");	//验证码登录导航的下边框
 const isOpened = ref(true);	//密码是否明文显示的标志
 const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");
-
-
 //进入验证码登录页面
 function toCaptchaEvent(){
 	isPassagePage.value = false;
@@ -97,7 +95,12 @@ function sendCaptchaEvent(){
 		},1000)
 	};
 }
-
+function login(){
+  //TODO:登录操作向后端发送验证码的逻辑
+  uni.navigateTo({
+    url: '@pages/information/sex/sex.vue'//登录成功后跳转的页面
+  })
+}
 //进入密码登录页面
 function toPassageEvent(){
 	isPassagePage.value = true;

static/information/sex/css/sex.css

@@ -0,0 +1,48 @@
+
+.background {
+    background-image: url("/static/information/sex/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; /* 为绝对定位子元素提供相对定位的上下文 */
+}
+
+.boy_image {
+    position: absolute; /* 绝对定位 */
+    width: 30%;
+    height: 16%;
+    bottom: 33%; /* 距离底部 20% 的位置 */
+    left: 10%; /* 水平居中 */
+}
+
+.girl_image {
+    position: absolute; /* 绝对定位 */
+    width: 30%;
+    height: 16%;
+    bottom: 33%; /* 距离底部 20% 的位置 */
+    right: 10%; /* 水平居中 */
+}
+
+.button {
+    position: absolute; /* 绝对定位 */
+    width: 90%;
+    height: 12%;
+    bottom: 2%; /* 距离底部 20% 的位置 */
+    left: 50%; /* 水平居中 */
+    transform: translateX(-50%); /* 通过 translateX 使其居中 */
+}
+
+
+.boy_image,
+.girl_image {
+    transition: transform 0.3s ease; /* 设置过渡效果 */
+}
+
+.boy_image:hover,
+.girl_image:hover {
+    transform: scale(1.1); /* 鼠标悬浮时放大 */
+}

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

@@ -1,8 +1,8 @@
 {
-  "hash": "239ea83a",
+  "hash": "3dcffc29",
-  "configHash": "3f4641d2",
+  "configHash": "cc60d382",
   "lockfileHash": "e3b0c442",
-  "browserHash": "619b4131",
+  "browserHash": "e601f541",
   "optimized": {},
   "chunks": {}
 }