封装组件tarbar，完成页面布局

TODO：身高体重填写部分界面还存在问题
TODO：忘记密码登录部分还存在问题

.idea/watcherTasks.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>

App.vue

@@ -1,22 +1,41 @@
+<!-- App.vue -->
+<template>
+  <view class="app-container">
+  </view>
+</template>
+
 <script>
-	export default {
+import tarbar from './components/tarbar/tarbar.vue';
-		onLaunch: function() {
+import tarbar_home from "@/components/tarbar_home/tarbar_home.vue";
-			console.log('App Launch')
+import tarbar_user from "@/components/tarbar_user/tarbar_user.vue";
-		},
+import tarbar_community from "@/components/tarbar_community/tarbar_community.vue";
-		onShow: function() {
+import tarbar_puppy_chat from "@/components/tarbar_puppy_chat/tarbar_puppy_chat.vue";
-			console.log('App Show')
+
-		},
+export default {
-		onHide: function() {
+  components: {
-			console.log('App Hide')
+    tarbar
-		}
+  },
-	}
+  onLaunch: function() {
+    console.log('App Launch');
+    // 你可以在这里执行初始化逻辑，比如检查用户状态
+  },
+  onShow: function() {
+    console.log('App Show');
+    // 更新应用状态，比如获取最新数据
+  },
+  onHide: function() {
+    console.log('App Hide');
+    // 清理工作，比如保存数据
+  }
+};
 </script>
 
 <style>
+/* 你的样式 */
+.app-container {
+  position: relative;  /* 确保容器能够正确定位子元素 */
+  height: 100vh;      /* 确保应用占满整个视口 */
+}
 
-
+/* 其他全局样式 */
-
-
-
-
 </style>

components/tarbar/tarbar.vue

@@ -0,0 +1,141 @@
+<!-- TabBar.vue -->
+<template>
+  <view>
+    <image class="bar" src="/static/components/tarbar/pictures/bar.png"></image>
+
+    <!-- Home 图标 -->
+    <image class="home"
+           src="/static/components/tarbar/pictures/home.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_home"
+           src="/static/components/tarbar/pictures/home_picked_up.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Community 图标 -->
+    <image class="community"
+           src="/static/components/tarbar/pictures/community.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_community"
+           src="/static/components/tarbar/pictures/community_pick_up.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Assistant 图标 -->
+    <image class="assistant"
+           src="/static/components/tarbar/pictures/assistant.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_assistant"
+           src="/static/components/tarbar/pictures/assistant_picked_up.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- User 图标 -->
+    <image class="user"
+           src="/static/components/tarbar/pictures/user.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_user"
+           src="/static/components/tarbar/pictures/user_picked_up.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 1 : 0 }">
+    </image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      is_home_picked_up: false,
+      is_communnity_picked_up: false,
+      is_assistant_picked_up: false,
+      is_user_picked_up: false
+    };
+  },
+  methods: {
+
+      pick_up_home() {
+        this.resetPicks();
+        this.is_home_picked_up = true;
+        uni.navigateTo({
+          url: '/pages/homepages/home/home', // 使用 navigateTo
+        });
+      },
+      pick_up_community() {
+        this.resetPicks();
+        this.is_communnity_picked_up = true;
+        uni.navigateTo({
+          url: '/pages/homepages/community/community',
+        });
+      },
+      pick_up_assistant() {
+        this.resetPicks();
+        this.is_assistant_picked_up = true;
+        uni.navigateTo({
+          url: '/pages/homepages/puppy_chat/puppy_chat',
+        });
+      },
+      pick_up_user() {
+        this.resetPicks();
+        this.is_user_picked_up = true;
+        uni.navigateTo({
+          url: '/pages/homepages/user/user',
+        });
+      },
+      resetPicks() {
+        this.is_home_picked_up = false;
+        this.is_communnity_picked_up = false;
+        this.is_assistant_picked_up = false;
+        this.is_user_picked_up = false;
+      }
+
+  }
+  };
+</script>
+
+<style lang="scss">
+.bar {
+  position: absolute;
+  width: 95%;
+  height: 10%;
+  bottom: 1%;
+  left: 2.5%;
+  background-size: cover;
+  background-position: center;
+}
+.home, .community, .assistant, .user {
+  position: absolute;
+  width: 15%;
+  height: 6%;
+  bottom: 2%;
+  transition: opacity 0.3s ease; /* 添加渐变过渡 */
+}
+.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
+  position: absolute;
+  width: 17%;
+  height: 10%;
+  bottom: 2%;
+  transition: opacity 0.3s ease; /* 添加渐变过渡 */
+}
+
+/* 图标位置调整 */
+.home { left: 6%; }
+.pick_up_home { left: 6%; }
+.community { left: 30%; }
+.pick_up_community { left: 30%; }
+.assistant { left: 54%; }
+.pick_up_assistant { left: 54%; }
+.user { left: 78%; }
+.pick_up_user { left: 78%; }
+</style>

components/tarbar_community/tarbar_community.vue

@@ -0,0 +1,153 @@
+<!-- TabBar.vue -->
+<template>
+
+  <view class="bar_background"></view>
+
+    <!-- Home 图标 -->
+    <image class="home"
+           src="/static/components/tarbar/pictures/home.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_home"
+           src="/static/components/tarbar/pictures/home_picked_up.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Community 图标 -->
+    <image class="pick_up_community"
+           src="/static/components/tarbar/pictures/community_pick_up.png"
+           @click="pick_up_community">
+    </image>
+
+    <!-- Assistant 图标 -->
+    <image class="assistant"
+           src="/static/components/tarbar/pictures/assistant.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_assistant"
+           src="/static/components/tarbar/pictures/assistant_picked_up.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- User 图标 -->
+    <image class="user"
+           src="/static/components/tarbar/pictures/user.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_user"
+           src="/static/components/tarbar/pictures/user_picked_up.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 1 : 0 }">
+    </image>
+
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      is_home_picked_up: false,
+      is_communnity_picked_up: false,
+      is_assistant_picked_up: false,
+      is_user_picked_up: false
+    };
+  },
+  methods: {
+
+    pick_up_home() {
+      this.resetPicks();
+      this.is_home_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/home/home', // 使用 navigateTo
+      });
+    },
+    pick_up_community() {
+      this.resetPicks();
+      this.is_communnity_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/community/community',
+      });
+    },
+    pick_up_assistant() {
+      this.resetPicks();
+      this.is_assistant_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/puppy_chat/puppy_chat',
+      });
+    },
+    pick_up_user() {
+      this.resetPicks();
+      this.is_user_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/user/user',
+      });
+    },
+    resetPicks() {
+      this.is_home_picked_up = false;
+      this.is_communnity_picked_up = false;
+      this.is_assistant_picked_up = false;
+      this.is_user_picked_up = false;
+    }
+
+  }
+};
+</script>
+
+<style lang="scss">
+
+@keyframes colorTransition {
+  from {
+    background-color: #5858cd;
+  }
+  to {
+    background-color: #E9D0D0;
+  }
+}
+.bar_background{
+  position: absolute;
+  width: 95%; /* 宽度占95% */
+  height: 10%; /* 高度 */
+  bottom: 1.2%; /* 距离底部2% */
+  left: 2.5%; /* 左侧2.5% */
+  background-color: khaki; /* 初始颜色 */
+  border-radius: 37px; /* 圆角半径，可以根据需要调整 */
+  z-index: -1; /* 使背景框在其他元素后面 */
+  animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
+}
+
+
+
+
+.home, .community, .assistant, .user {
+  position: absolute;
+  width: 15%;
+  height: 6%;
+  bottom: 2%;
+  transition: opacity 0.7s ease; /* 添加渐变过渡 */
+
+}
+.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
+  position: absolute;
+  width: 17%;
+  height: 10%;
+  bottom: 2%;
+  transition: opacity 1s ease; /* 添加渐变过渡 */
+
+}
+
+/* 图标位置调整 */
+.home { left: 6%; }
+.pick_up_home { left: 6%; }
+.community { left: 30%; }
+.pick_up_community { left: 30%; }
+.assistant { left: 54%; }
+.pick_up_assistant { left: 54%; }
+.user { left: 78%; }
+.pick_up_user { left: 78%; }
+</style>

components/tarbar_home/tarbar_home.vue

@@ -0,0 +1,145 @@
+<!-- TabBar.vue -->
+<template>
+  <view>
+    <view class="bar_background"></view>
+    <!-- Home 图标 -->
+
+    <image class="pick_up_home"
+           src="/static/components/tarbar/pictures/home_picked_up.png"
+           @click="pick_up_home">
+    </image>
+    <!-- Community 图标 -->
+    <image class="community"
+           src="/static/components/tarbar/pictures/community.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_community"
+           src="/static/components/tarbar/pictures/community_pick_up.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Assistant 图标 -->
+    <image class="assistant"
+           src="/static/components/tarbar/pictures/assistant.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_assistant"
+           src="/static/components/tarbar/pictures/assistant_picked_up.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- User 图标 -->
+    <image class="user"
+           src="/static/components/tarbar/pictures/user.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_user"
+           src="/static/components/tarbar/pictures/user_picked_up.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 1 : 0 }">
+    </image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      is_communnity_picked_up: false,
+      is_assistant_picked_up: false,
+      is_user_picked_up: false
+    };
+  },
+  methods: {
+
+    pick_up_home() {
+      this.resetPicks();
+      this.is_home_picked_up = true;
+    },
+    pick_up_community() {
+      this.resetPicks();
+      this.is_communnity_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/community/community',
+      });
+    },
+    pick_up_assistant() {
+      this.resetPicks();
+      this.is_assistant_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/puppy_chat/puppy_chat',
+      });
+    },
+    pick_up_user() {
+      this.resetPicks();
+      this.is_user_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/user/user',
+      });
+    },
+    resetPicks() {
+      this.is_home_picked_up = false;
+      this.is_communnity_picked_up = false;
+      this.is_assistant_picked_up = false;
+      this.is_user_picked_up = false;
+    }
+
+  }
+};
+</script>
+
+<style lang="scss">
+
+
+
+@keyframes colorTransition {
+  from {
+    background-color: #5858cd;
+  }
+  to {
+    background-color: #E9D0D0;
+  }
+}
+.bar_background{
+  position: absolute;
+  width: 95%; /* 宽度占95% */
+  height: 10%; /* 高度 */
+
+  bottom: 1.2%; /* 距离底部2% */
+  left: 2.5%; /* 左侧2.5% */
+  background-color: khaki; /* 初始颜色 */
+  border-radius: 37px; /* 圆角半径，可以根据需要调整 */
+  z-index: -1; /* 使背景框在其他元素后面 */
+  animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
+}
+
+.home, .community, .assistant, .user {
+  position: absolute;
+  width: 15%;
+  height: 6%;
+  bottom: 2%;
+  transition: opacity 1s ease; /* 添加渐变过渡 */
+}
+.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
+  position: absolute;
+  width: 17%;
+  height: 10%;
+  bottom: 2%;
+  transition: opacity 1s ease; /* 添加渐变过渡 */
+}
+
+/* 图标位置调整 */
+.home { left: 6%; }
+.pick_up_home { left: 6%; }
+.community { left: 30%; }
+.pick_up_community { left: 30%; }
+.assistant { left: 54%; }
+.pick_up_assistant { left: 54%; }
+.user { left: 78%; }
+.pick_up_user { left: 78%; }
+</style>

components/tarbar_puppy_chat/tarbar_puppy_chat.vue

@@ -0,0 +1,148 @@
+<!-- TabBar.vue -->
+<template>
+  <view>
+    <view class="bar_background"></view>
+    <!-- Home 图标 -->
+    <image class="home"
+           src="/static/components/tarbar/pictures/home.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_home"
+           src="/static/components/tarbar/pictures/home_picked_up.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Community 图标 -->
+    <image class="community"
+           src="/static/components/tarbar/pictures/community.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_community"
+           src="/static/components/tarbar/pictures/community_pick_up.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Assistant 图标 -->
+    <image class="pick_up_assistant"
+           src="/static/components/tarbar/pictures/assistant_picked_up.png"
+           @click="pick_up_assistant">
+    </image>
+
+    <!-- User 图标 -->
+    <image class="user"
+           src="/static/components/tarbar/pictures/user.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_user"
+           src="/static/components/tarbar/pictures/user_picked_up.png"
+           @click="pick_up_user"
+           :style="{ opacity: is_user_picked_up ? 1 : 0 }">
+    </image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      is_home_picked_up: false,
+      is_communnity_picked_up: false,
+      is_user_picked_up: false
+    };
+  },
+  methods: {
+
+    pick_up_home() {
+      this.resetPicks();
+      this.is_home_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/home/home', // 使用 navigateTo
+      });
+    },
+    pick_up_community() {
+      this.resetPicks();
+      this.is_communnity_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/community/community',
+      });
+    },
+    pick_up_assistant() {
+      this.resetPicks();
+      this.is_assistant_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/puppy_chat/puppy_chat',
+      });
+    },
+    pick_up_user() {
+      this.resetPicks();
+      this.is_user_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/user/user',
+      });
+    },
+    resetPicks() {
+      this.is_home_picked_up = false;
+      this.is_communnity_picked_up = false;
+      this.is_assistant_picked_up = false;
+      this.is_user_picked_up = false;
+    }
+
+  }
+};
+</script>
+
+<style lang="scss">
+
+
+
+@keyframes colorTransition {
+  from {
+    background-color: #5858cd;
+  }
+  to {
+    background-color: #E9D0D0;
+  }
+}
+.bar_background{
+  position: absolute;
+  width: 95%; /* 宽度占95% */
+  height: 10%; /* 高度 */
+
+  bottom: 1.2%; /* 距离底部2% */
+  left: 2.5%; /* 左侧2.5% */
+  background-color: khaki; /* 初始颜色 */
+  border-radius: 37px; /* 圆角半径，可以根据需要调整 */
+  z-index: -1; /* 使背景框在其他元素后面 */
+  animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
+}
+
+.home, .community, .assistant, .user {
+  position: absolute;
+  width: 15%;
+  height: 6%;
+  bottom: 2%;
+  transition: opacity 1s ease; /* 添加渐变过渡 */
+}
+.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
+  position: absolute;
+  width: 17%;
+  height: 10%;
+  bottom: 2%;
+  transition: opacity 1s ease; /* 添加渐变过渡 */
+}
+
+/* 图标位置调整 */
+.home { left: 6%; }
+.pick_up_home { left: 6%; }
+.community { left: 30%; }
+.pick_up_community { left: 30%; }
+.assistant { left: 54%; }
+.pick_up_assistant { left: 54%; }
+.user { left: 78%; }
+.pick_up_user { left: 78%; }
+</style>

components/tarbar_user/tarbar_user.vue

@@ -0,0 +1,152 @@
+<!-- TabBar.vue -->
+<keep-alive>
+
+</keep-alive>
+<template>
+  <view>
+    <view class="bar_background"></view>
+
+    <!-- Home 图标 -->
+    <image class="home"
+           src="/static/components/tarbar/pictures/home.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_home"
+           src="/static/components/tarbar/pictures/home_picked_up.png"
+           @click="pick_up_home"
+           :style="{ opacity: is_home_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Community 图标 -->
+    <image class="community"
+           src="/static/components/tarbar/pictures/community.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_community"
+           src="/static/components/tarbar/pictures/community_pick_up.png"
+           @click="pick_up_community"
+           :style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- Assistant 图标 -->
+    <image class="assistant"
+           src="/static/components/tarbar/pictures/assistant.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
+    </image>
+    <image class="pick_up_assistant"
+           src="/static/components/tarbar/pictures/assistant_picked_up.png"
+           @click="pick_up_assistant"
+           :style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
+    </image>
+
+    <!-- User 图标 -->
+    <image class="pick_up_user"
+           src="/static/components/tarbar/pictures/user_picked_up.png"
+           @click="pick_up_user">
+    </image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      is_home_picked_up: false,
+      is_communnity_picked_up: false,
+      is_assistant_picked_up: false,
+      is_user_picked_up: false
+    };
+  },
+  methods: {
+
+    pick_up_home() {
+      this.resetPicks();
+      this.is_home_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/home/home', // 使用 navigateTo
+      });
+    },
+    pick_up_community() {
+      this.resetPicks();
+      this.is_communnity_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/community/community',
+      });
+    },
+    pick_up_assistant() {
+      this.resetPicks();
+      this.is_assistant_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/puppy_chat/puppy_chat',
+      });
+    },
+    pick_up_user() {
+      this.resetPicks();
+      this.is_user_picked_up = true;
+      uni.reLaunch({
+        url: '/pages/homepages/user/user',
+      });
+    },
+    resetPicks() {
+      this.is_home_picked_up = false;
+      this.is_communnity_picked_up = false;
+      this.is_assistant_picked_up = false;
+      this.is_user_picked_up = false;
+    }
+
+  }
+};
+</script>
+
+<style lang="scss">
+
+
+@keyframes colorTransition {
+  from {
+    background-color: #5858cd;
+  }
+  to {
+    background-color: #E9D0D0;
+  }
+}
+.bar_background{
+  position: absolute;
+  width: 95%; /* 宽度占95% */
+  height: 10%; /* 高度 */
+
+  bottom: 1.2%; /* 距离底部2% */
+  left: 2.5%; /* 左侧2.5% */
+  background-color: khaki; /* 初始颜色 */
+  border-radius: 37px; /* 圆角半径，可以根据需要调整 */
+  z-index: -1; /* 使背景框在其他元素后面 */
+  animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
+}
+
+.home, .community, .assistant, .user {
+  position: absolute;
+  width: 15%;
+  height: 6%;
+  bottom: 2%;
+  transition: opacity 2s ease; /* 添加渐变过渡 */
+}
+.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
+  position: absolute;
+  width: 17%;
+  height: 10%;
+  bottom: 2%;
+
+}
+
+/* 图标位置调整 */
+.home { left: 6%; }
+.pick_up_home { left: 6%; }
+.community { left: 30%; }
+.pick_up_community { left: 30%; }
+.assistant { left: 54%; }
+.pick_up_assistant { left: 54%; }
+.user { left: 78%; }
+.pick_up_user { left: 78%; }
+</style>

pages.json

@@ -1,122 +1,162 @@
 {
   "pages": [
-    // {
+    /*  {
-    //   "path": "pages/transition/page1/page1",
+      "path": "pages/transition/page1/page1",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },
-    // {
+    {
-    //   "path": "pages/transition/page2/page2",
+      "path": "pages/transition/page2/page2",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },
-    // {
+    {
-    //   "path": "pages/transition/page3/page3",
+      "path": "pages/transition/page3/page3",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },
-    // {
+    {
-    //   "path": "pages/transition/page4/page4",
+      "path": "pages/transition/page4/page4",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },
-    // {
+    {
-    //   "path": "pages/transition/page5/page5",
+      "path": "pages/transition/page5/page5",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },
-    // {
+    {
-    //   "path": "pages/transition/page6/page6",
+      "path": "pages/transition/page6/page6",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },
-    // {
+    {
-    //   "path": "pages/transition/page7/page7",
+      "path": "pages/transition/page7/page7",
-    //   "style": {
+      "style": {
-    //     "navigationStyle": "custom"
+        "navigationStyle": "custom"
-    //   }
+      }
-    // },
+    },*/
-    // {
+    /*-----------------------------------------------------------------------动画过渡界面-------------------------------------------*/
-    //   "path": "pages/login/account_login/account_login",
+
-    //   "style": {
+    /*
-    //     "navigationStyle": "custom"
+
-    //   }
+    {
-    // },
+      "path": "pages/login/account_login/account_login",
-    // {
+      "style": {
-    //   "path": "pages/login/register/register",
+        "navigationStyle": "custom"
-    //   "style": {
+      }
-    //     "navigationStyle": "custom"
+    },
-    //   }
+    {
-    // },
+      "path": "pages/login/register/register",
-    // {
+      "style": {
-    //   "path": "pages/information/sex/sex",
+        "navigationStyle": "custom"
-    //   "style": {
+      }
-    //     "navigationBarTitleText": "",
+    },
-    //     "enablePullDownRefresh": false
+    {
-    //   }
+      "path": "pages/login/forget_password/forget_password",
-    // },
+      "style": {
-    {
+        "navigationStyle": "custom"
-      "path": "pages/information/boy_height/boy_height",
+      }
-      "style": {
+    },*/
-        "navigationStyle": "custom"
+    /*-----------------------------------------------------------------------登录注册界面-------------------------------------------*/
-      }
+
-    },
+    {
-	{
+      "path": "pages/information/sex/sex",
-	  "path": "pages/information/boy_height2/boy_height2",
+      "style": {
-	  "style": {
+        "navigationStyle": "custom"
-	    "navigationStyle": "custom"
+      }
-	  }
+    },
-	},
+    {
-	{
+      "path": "pages/information/boy_height_start/boy_height_start",
-	  "path": "pages/information/boy_roll/boy_roll",
+      "style": {
-	  "style": {
+        "navigationStyle": "custom"
-	    "navigationStyle": "custom"
+      }
-	  }
+    },
-	},
+    {
-    // {
+      "path": "pages/information/boy_height_roll/boy_height_roll",
-    //   "path": "pages/information/girl_height/girl_height",
+      "style": {
-    //   "style": {
+        "navigationStyle": "custom"
-    //     "navigationStyle": "custom"
+      }
-    //   }
+    },
-    // },
+    {
-    {
+      "path": "pages/information/boy_height_end/boy_height_end",
-      "path": "pages/information/boy_weight/boy_weight",
+      "style": {
-      "style": {
+        "navigationStyle": "custom"
-        "navigationStyle": "custom"
+      }
-      }
+    },
-    },
+    /*------------------------------------------------男生填写身高------------------------------------------------------------*/
-	{
+    {
-	  "path": "pages/information/boy_weight2/boy_weight2",
+      "path": "pages/information/boy_weight_start/boy_weight_start",
-	  "style": {
+      "style": {
-	    "navigationStyle": "custom"
+        "navigationStyle": "custom"
-	  }
+      }
-	},
+    },
-	{
+    {
-	  "path": "pages/information/boy_roll_w/boy_roll_w",
+      "path": "pages/information/boy_weight_roll/boy_weight_roll",
-	  "style": {
+      "style": {
-	    "navigationStyle": "custom"
+        "navigationStyle": "custom"
-	  }
+      }
-	}
+    },
-    // {
+    {
-    //   "path": "pages/information/gril_weight/gril_weight",
+      "path": "pages/information/boy_weight_end/boy_weight_end",
-    //   "style": {
+      "style": {
-    //     "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-    //     "enablePullDownRefresh": false
+      }
-    //   }
+    },
-    // },
+    /*---------------------------------------男生填写体重--------------------------------------------------------------*/
-    // {
+    {
-    //   "path": "pages/login/forget_password/forget_password",
+      "path": "pages/information/girl_height/girl_height",
-    //   "style": {
+      "style": {
-    //     "navigationBarTitleText": "",
+        "navigationStyle": "custom"
-    //     "enablePullDownRefresh": false
+      }
-    //   }
+    },
-    // }
+    {
+      "path": "pages/information/girl_weight/girl_weight",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/information/purpose/purpose",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    /*---------------------------------------------------------------信息填写界面----------------------------------------------------*/
+    {
+      "path": "pages/homepages/home/home",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    /*--------------------------------------------------------------主界面----------------------------------------------------------*/
+    {
+      "path": "pages/homepages/puppy_chat/puppy_chat",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    /*-------------------------------------------------------------聊天界面--------------------------------------------------------*/
+    {
+      "path": "pages/homepages/community/community",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    /*-------------------------------------------------------------社区界面------------------------------------------------------*/
+    {
+      "path": "pages/homepages/user/user",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    }
+    /*---------------------------------------------------------------个人信息界面----------------------------------------------------*/
   ],
   "uniIdRouter": {},
   "tabBar": null

pages/homepages/community/community.vue

@@ -1,6 +1,7 @@
 <template>
   <view>
-
+  <text>这个是社区界面</text>
+   <tarbar_community></tarbar_community>
   </view>
 </template>
 

pages/homepages/home/home.vue

@@ -1,6 +1,7 @@
 <template>
   <view>
-	这是主页面
+    <text>这个是home界面</text>
+    <tarbar_home></tarbar_home>
   </view>
 </template>
 

pages/homepages/puppy_chat/puppy_chat.vue

@@ -1,6 +1,7 @@
 <template>
   <view>
-
+    <text>这个是puppy_chat界面</text>
+    <tarbar_puppy_chat></tarbar_puppy_chat>
   </view>
 </template>
 

pages/homepages/user/user.vue

@@ -1,6 +1,7 @@
 <template>
   <view>
-
+    <text>这个是User界面</text>
+    <tarbar_user></tarbar_user>
   </view>
 </template>
 

pages/information/boy_height_end/boy_height_end.vue

@@ -5,9 +5,9 @@
     <!-- 人物 -->
     <image class="human" src="/static/information/boy_height/pictures/human.png"></image>
     <!-- 滚动条 -->
-    <image class="roll" @click="goTob_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
+    <image class="roll" @click="go_to_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
     <!-- 按钮 -->
-    <image class="button" @click="goTob_weight" src="/static/information/boy_height/pictures/button.png"></image>
+    <image class="button" @click="go_to_purpose" src="/static/information/boy_height/pictures/button.png"></image>
 	<!-- 进度条 -->
 	<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
 	<!-- 文本-->
@@ -32,12 +32,12 @@ export default {
             });
         },
 
-        goTob_weight() {
+        go_to_purpose() {
-            this.navigateTo('/pages/information/boy_weight/boy_weight');
+            this.navigateTo('/pages/information/purpose/purpose');
         },
 
-        goTob_roll() {
+        go_to_roll() {
-            this.navigateTo('/pages/information/boy_roll/boy_roll');
+            this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
         },
     }
 }
@@ -57,7 +57,7 @@ export default {
   position: relative;
 }
 
-/* Human 动画，从页面中部向上移动 */
+
 .human {
   position: absolute;
   width: 100%;
@@ -88,8 +88,8 @@ export default {
 /* Button 延迟显示并加缩放特效，放在下方 */
 .button {
   position: absolute;
-  height: 13vh;
+  height: 13%;
-  width: 45vh;
+  width: 80%;
   opacity: 1;
   right: 10%; /* 距右边 10% */
   bottom: 2%; /* 距底部 3.5% */

pages/information/boy_height_roll/boy_height_roll.vue

@@ -8,11 +8,13 @@
       </picker-view-column>
     </picker-view>
 
-    <image class="button" @click="goTob_height" src="/static/information/boy_height/pictures/button.png"></image>
+    <image class="button" @click="go_to_height" src="/static/information/boy_height/pictures/button.png"></image>
   </view>
+<!-- TODO:修改 -->
 </template>
 
 <script>
+// TODO:修改
 export default {
   data() {
     return {
@@ -37,9 +39,9 @@ export default {
       });
     },
     
-    goTob_height() {
+    go_to_height() {
       const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
-      this.navigateTo(`/pages/information/boy_height2/boy_height2?height=${selectedValue}`); // 跳转到 boy_height2，并传递选中值
+      this.navigateTo(`/pages/information/boy_height_end/boy_height_end?height=${selectedValue}`); // 跳转到 boy_height_end，并传递选中值
     },
   },
 };
@@ -73,8 +75,8 @@ export default {
 .button {
   margin-top: 10px; /* 按钮与选择器之间的间距 */
   position: absolute;
-  height: 13vh;
+  height: 13%;
-  width: 45vh;
+  width: 80%;
   right: 10%; /* 距右边 10% */
   bottom: 2%; /* 距底部 3.5% */
 }

pages/information/boy_height_start/boy_height_start.vue

@@ -5,13 +5,13 @@
     <!-- 人物 -->
     <image class="human" src="/static/information/boy_height/pictures/human.png"></image>
     <!-- 滚动条 -->
-    <image class="roll" @click="goTob_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
+    <image class="roll" @click="go_to_roll" src="/static/information/boy_height/pictures/roll.png"></image>
     <!-- 按钮 -->
-    <image class="button" @click="goTob_weight" src="/static/information/boy_height/pictures/button.png"></image>
+    <image class="button" @click="go_to_purpose" src="/static/information/boy_height/pictures/button.png"></image>
 	<!-- 进度条 -->
 	<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
 	<!-- 文本-->
-	<text class="text" @click="goTob_roll()">175 cm</text>
+	<text class="text" @click="go_to_roll()">175 cm</text>
   </view>
 </template>
 
@@ -24,12 +24,12 @@ export default {
             });
         },
 
-        goTob_weight() {
+        go_to_purpose() {
-            this.navigateTo('/pages/information/boy_weight/boy_weight');
+            this.navigateTo('/pages/information/purpose/purpose');
         },
 
-        goTob_roll() {
+        go_to_roll() {
-            this.navigateTo('/pages/information/boy_roll/boy_roll');
+            this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
 			height:''
         },
     }
@@ -86,8 +86,8 @@ export default {
 /* Button 延迟显示并加缩放特效，放在下方 */
 .button {
   position: absolute;
-  height: 13vh;
+  height: 13%;
-  width: 45vh;
+  width: 80%;
   animation: fadeInScale 1s ease 2.5s forwards; /* 2.5秒后显示并缩放 */
   opacity: 0;
   right: 10%; /* 距右边 10% */
@@ -100,7 +100,7 @@ export default {
 	text-align: center;
 	width: 100%;
 	height: 20%;
-	top: 68%; 
+	top: 69%;
 	animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
 	opacity: 0;
 	color:#ffffff;

pages/information/boy_weight_end/boy_weight_end.vue

@@ -33,11 +33,11 @@ export default {
         },
 
         goTob_height() {
-            this.navigateTo('/pages/information/boy_height/boy_height');
+            this.navigateTo('/pages/information/boy_height_start/boy_height_start');
         },
 
         goTob_roll() {
-            this.navigateTo('/pages/information/boy_roll_w/boy_roll_w');
+            this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
         },
     }
 }
@@ -88,8 +88,8 @@ export default {
 /* Button 延迟显示并加缩放特效，放在下方 */
 .button {
   position: absolute;
-  height: 13vh;
+  height: 13%;
-  width: 45vh;
+  width: 80%;
   opacity: 1;
   right: 10%; /* 距右边 10% */
   bottom: 2%; /* 距底部 3.5% */
@@ -101,7 +101,7 @@ export default {
 	font-size: 1.5em; 
 	width: 100%;
 	height: 20%;
-	top: 68%; 
+	top: 69%;
 	color:#ffffff;
 }
 </style>

pages/information/boy_weight_roll/boy_weight_roll.vue

@@ -8,7 +8,7 @@
       </picker-view-column>
     </picker-view>
 
-    <image class="button" @click="goTob_height" src="/static/information/boy_weight/pictures/button.png"></image>
+    <image class="button" @click="go_to_weight_end" src="/static/information/boy_weight/pictures/button.png"></image>
   </view>
 </template>
 
@@ -37,9 +37,9 @@ export default {
       });
     },
     
-    goTob_height() {
+    go_to_weight_end() {
       const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
-      this.navigateTo(`/pages/information/boy_weight2/boy_weight2?weight=${selectedValue}`); // 跳转到 boy_height2，并传递选中值
+      this.navigateTo(`/pages/information/boy_weight_end/boy_weight_end?weight=${selectedValue}`); // 跳转到 boy_weight_end，并传递选中值
     },
   },
 };
@@ -73,8 +73,8 @@ export default {
 .button {
   margin-top: 10px; /* 按钮与选择器之间的间距 */
   position: absolute;
-  height: 13vh;
+  height: 13%;
-  width: 45vh;
+  width: 80%;
   right: 10%; /* 距右边 10% */
   bottom: 2%; /* 距底部 3.5% */
 }

pages/information/boy_weight_start/boy_weight_start.vue

@@ -25,11 +25,11 @@ export default {
         },
 
         goTob_height() {
-            this.navigateTo('/pages/information/boy_weight/boy_weight');
+            this.navigateTo('/pages/information/boy_height_start/boy_height_start');
         },
 
         goTob_roll() {
-            this.navigateTo('/pages/information/boy_roll_w/boy_roll_w');
+            this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
 			height:''
         },
     }
@@ -86,8 +86,8 @@ export default {
 /* Button 延迟显示并加缩放特效，放在下方 */
 .button {
   position: absolute;
-  height: 13vh;
+  height: 13%;
-  width: 45vh;
+  width: 80%;
   animation: fadeInScale 1s ease 2.5s forwards; /* 2.5秒后显示并缩放 */
   opacity: 0;
   right: 10%; /* 距右边 10% */
@@ -100,7 +100,7 @@ export default {
 	text-align: center;
 	width: 100%;
 	height: 20%;
-	top: 68%; 
+	top: 69%;
 	animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
 	opacity: 0;
 	color:#ffffff;

pages/information/girl_height/girl_height.vue

@@ -1,178 +1,146 @@
 <template>
-<view class="main">
+  <view class="background">
-	<view class="header">
+    <!-- 人物图片 -->
-		<image class="imgage" src="../../../static/pros.png"></image>
+    <image class="human slide-in" src="/static/information/girl_height/pictures/human.png"></image>
-	</view>
+
-	<view class="img">
+    <!-- 字体：你的身高是 -->
-		<image class="imgs" src="../../../static/Group1.png"></image>
+    <image class="height_text" src="/static/information/girl_height/pictures/height_text.png"></image>
-	</view>
+
-	<view class="bottom">
+    <!-- 身高选择窗口 -->
-		你当前的身高是？
+    <view class="weight_choice_window" @click="toggleHeightPicker">
-	</view>
+      {{ height_number }} cm
-	<view class="kg">
+    </view>
-			{{modelChange}}cm
+
-	</view>
+    <!-- 按钮图片 -->
-	
+    <image class="button" src="/static/information/girl_height/pictures/button.png" @click="goToWeightPage"></image>
-</view>
+
-<view class="buttons">
+    <!-- 身高选择轮播 -->
-		<button @click="show">下一步</button>
+    <view class="height_picker" v-if="is_height_picker_visible">
-	</view>
+      <view class="ruler" :style="{ transform: `translateY(-${currentHeightIndex * 100}px)` }"></view>
-	<view class="mask" v-if="isShow">
+
-		<view class="tz">
+      <swiper :current="currentHeightIndex" @change="onHeightChange">
-			你当前的身高是{{modelChange}}cm
+        <swiper-item v-for="(height, index) in heightOptions" :key="index">
-		</view>
+          <view class="height_option">{{ height }} cm</view>
-		<view class="picker" >
+        </swiper-item>
-		<picker-view  @change="getChange" class="picker-view" 
+      </swiper>
-		:mask-bottom-style="bottomStyle"
+
-		:mask-top-style="topStyle"
+    </view>
-		 >
+  </view>
-			<picker-view-column style="background-color: transparent;">
-				<view class="pickers" v-for="item in weightRange" :key="item">
-					{{item}}
-				</view>
-			</picker-view-column>
-			
-		</picker-view>
-		</view>
-		<view class="button">
-				<button @click="change">选择身高</button>
-			</view>
-	</view>
 </template>
 
+
+
 <script>
 export default {
   data() {
     return {
-		weightRange:[160,165,170,175,178,180,183,185,188,190,195,199],
+      is_height_picker_visible: false, // 控制身高选择窗口的显示状态
-		modelChange:180,
+      height_number: 160, // 初始身高为160cm
-		count:'',
+      heightOptions: Array.from({ length: 81 }, (_, i) => i + 150), // 150cm 到 230cm
-		isShow:false,
+      currentHeightIndex: 10 // 默认选择的索引
-		bottomStyle:`background:transparent`,
-		topStyle:'background:transparent'
     };
   },
-  methods:{
+  methods: {
-	  show(){
+    toggleHeightPicker() {
-		  this.isShow  =true
+      this.is_height_picker_visible = !this.is_height_picker_visible; // 切换显示状态
-	  },
+    },
-	   getChange(e){
+    onHeightChange(event) {
-	   		this.count	= e.detail.value;
+      this.currentHeightIndex = event.detail.current; // 更新当前身高索引
-	   },
+      this.height_number = this.heightOptions[this.currentHeightIndex]; // 更新显示的身高
-	   change(){
+    },
-		 this.modelChange = this.weightRange[this.count]
+    goToWeightPage() {
-		 this.isShow = false
+      uni.navigateTo({
-	   }
+        url: '/pages/information/girl_weight', // 跳转到 girl_weight 界面
-  }
+      });
-}
+    },
+  },
+};
 </script>
 
-<style >
+
-.main{
+
-	width: 100%;
+
-	height: 700px;
+
-	border: 1px solid;
+
-	background-color: #94A9FE;
+<style lang="scss">
-}
+
-.header{
+.background {
-	width: 80%;
+  background-image: url("@/static/information/girl_height/pictures/background.png");
-	height: 60px;
+  background-size: cover;
-	margin: 20px auto;
+  background-position: center;
-}
+  height: 100vh;
-.img{
+  display: flex;
-	width: 80%;
+  flex-direction: column; /* 纵向排列 */
-	height: 300px;
+  align-items: center; /* 水平居中 */
-	margin: auto;
+  justify-content: flex-end; /* 使内容向底部对齐 */
-}
+  position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
-.imgs{
-	width: 50%;
-	height: 90%;
-	margin-left: 25%;
-	margin-top: 5%;
-	animation: move 1s ease-in-out;
-}
-@keyframes move{
-	0%{
-		transform: translateX(300px);
-	}
-	100%{
-		transform: translateX(0);
-	}
-}
-.imgage{
-	width: 100%;
-	height: 100%;
-}
-.bottom{
-	width: 80%;
-	height: 30px;
-	font-size: 35px;
-	margin:30px auto;
-	text-align: center;
-}
-.kg{
-	width: 80%;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
-	margin:50px auto;
-	font-size: 20px;
-	background-color: #86A2EF;
-	border-top:2px solid #4F7CEC;
-	border-bottom: 2px solid #4F7CEC;
-}
-.buttons{
-	width: 80%;
-	height: 30px;
-	line-height: 30px;
-	margin:70px auto;
-	z-index: 1;
-	
 }
-button{
+
-	border-radius: 20px;
+.human {
-	color:white;
+  position: absolute; /* 绝对定位 */
-	background-color: #94ABFD;
+  top: 12%;
+  left: 50%;
+  width: 65%;
+  height: 40%;
+  transform: translateX(100%); /* 初始位置在右侧 */
+  animation: slide-in 1s forwards; /* 添加动画 */
 }
 
-.mask{
+.height_text {
-	width: 100%;
+  position: absolute; /* 绝对定位 */
-	height: 1000px;
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
-	position: absolute;
+  top: 60%;
-	left: 0;
+  left: 50%;
-	top: 0;
+  width: 40%;
-	background-color: #96A7E6;
+  height: 3%;
-	
 }
-.tz{
+
-	width: 80%;
+.weight_choice_window {
-	height: 30px;
+  position: absolute; /* 绝对定位 */
-	line-height: 30px;
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
-	margin:20px auto;
+  top: 60%;
-	text-align: center;
+  left: 50%;
-	font-size: 30px;
+  width: 80%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  margin: 50px auto;
+  font-size: 20px;
+  background-color: #86A2EF;
+  border-top: 2px solid #4F7CEC;
+  border-bottom: 2px solid #4F7CEC;
 }
 
-.button{
+.button {
-	width: 80%;
+  position: absolute; /* 绝对定位 */
-	height: 30px;
+  width: 90%;
-	line-height: 30px;
+  height: 13%;
-	margin:70px auto;
+  bottom: 1%; /* 距离底部 20% 的位置 */
-	z-index: 2;
+  left: 50%; /* 水平居中 */
-	
+  transform: translateX(-50%); /* 通过 translateX 使其居中 */
 }
-.picker{
+
-	width: 80%;
+.height_picker {
-	height: 300px;
+  position: absolute; /* 绝对定位 */
-	margin: auto;
+  top: 70%; /* 根据需要调整位置 */
-	text-align: center;
+  left: 50%;
-	z-index: 2;
+  transform: translateX(-50%);
+  width: 80%;
 }
-.picker-view{
+
-	width: 100%;
+.height_option {
-	height: 300px;
+  font-size: 24px;
+  text-align: center;
+  line-height: 100px; /* 根据需要调整高度 */
 }
-.pickers{
+
-	text-align: center;
+/* 动画定义 */
+@keyframes slide-in {
+  0% {
+    transform: translateX(100%); /* 从右侧开始 */
+  }
+  100% {
+    transform: translateX(-50%); /* 移动到屏幕中心 */
+  }
 }
-</style>
+</style>

pages/information/purpose/purpose.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="background">
+    <!-- Swiper 轮播图 -->
+    <swiper
+        class="swiper-container"
+        autoplay="3000"
+        circular
+        :current="current"
+        @change="onSwiperChange"
+    >
+      <swiper-item v-for="(image, index) in images" :key="index">
+        <image :src="image" class="swiper-image"></image>
+      </swiper-item>
+    </swiper>
+
+    <!-- 动态切换的轮播点 -->
+    <image :src="dotImages[current]" class="dot"></image>
+
+    <!-- 按钮效果 -->
+    <image class="button" @click="click" src="/static/information/purpose/pictures/button.png"></image>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      images: [
+        '/static/information/purpose/pictures/picture1.png',
+        '/static/information/purpose/pictures/picture2.png',
+        '/static/information/purpose/pictures/picture3.png',
+        '/static/information/purpose/pictures/picture4.png',
+        '/static/information/purpose/pictures/picture5.png',
+      ], // Swiper 轮播图片
+      dotImages: [
+        '/static/information/purpose/pictures/dot1.png',
+        '/static/information/purpose/pictures/dot2.png',
+        '/static/information/purpose/pictures/dot3.png',
+        '/static/information/purpose/pictures/dot4.png',
+        '/static/information/purpose/pictures/dot5.png',
+      ], // 轮播点图片
+      current: 0, // 当前显示的图片索引
+    };
+  },
+  methods: {
+    click() {
+      uni.navigateTo({
+        url: '/pages/homepages/home/home', // 使用 navigateTo
+      });
+    },
+    onSwiperChange(e) {
+      this.current = e.detail.current;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.background {
+  background-image: url("/static/information/purpose/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;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 80%; /* 根据需要调整轮播图高度 */
+  bottom: 10%;
+}
+
+.swiper-image {
+  width: 80%;
+  height: 70%;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  object-fit: cover; /* 保持图片比例 */
+}
+
+.dot {
+  position: absolute;
+  width: 22%;
+  height: 3%;
+  bottom: 15%;
+}
+
+.button {
+  position: absolute;
+  width: 90%;
+  height: 13%;
+  bottom: 1%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

pages/information/sex/sex.vue

@@ -1,18 +1,25 @@
 <template>
   <view class="background">
+    <!-- human 图片，带有渐变效果 -->
+    <image
+        class="human"
+        :class="{ 'fade-in': isHumanVisible }"
+        src="/static/information/sex/pictures/human.png"
+    ></image>
+
     <!-- 男生按钮 -->
     <image
         class="boy_image"
         @click="clickBoyImage"
         v-if="!isBoySelected"
-        :class="{'slide-in-left': !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}"
+        :class="{ 'slide-in-left': !isBoySelected }"
         src="/static/information/sex/pictures/shift_boy.png"
     ></image>
 
@@ -21,14 +28,14 @@
         class="girl_image"
         @click="clickGirlImage"
         v-if="!isGirlSelected"
-        :class="{'slide-in-right': !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}"
+        :class="{ 'slide-in-right': !isGirlSelected }"
         src="/static/information/sex/pictures/shift_girl.png"
     ></image>
 
@@ -47,25 +54,31 @@ export default {
     return {
       isBoySelected: false,
       isGirlSelected: false,
+      isHumanVisible: false, // 控制 human 图片显示
     };
   },
+  mounted() {
+    // 页面加载时延时显示 human 图片
+    setTimeout(() => {
+      this.isHumanVisible = true;
+    }, 100); // 延迟 100ms 开始渐变，可以根据需求调整
+  },
   methods: {
-    // 跳转到下一页
     goToNextPage() {
       const targetPage = this.isBoySelected
-          ? "/pages/information/boy_height/boy_height"
+          ? "/pages/information/boy_weight_start/boy_weight_start"
-          : "/pages/information/girl_height/girl_height";
+          : "/pages/information/girl_weight/girl_weight";
       uni.navigateTo({
-        url: targetPage, // 根据选择跳转到对应页面
+        url: targetPage,
       });
     },
     clickBoyImage() {
       this.isBoySelected = true;
-      this.isGirlSelected = false; // 取消女生选中状态
+      this.isGirlSelected = false;
     },
     clickGirlImage() {
       this.isGirlSelected = true;
-      this.isBoySelected = false; // 取消男生选中状态
+      this.isBoySelected = false;
     },
   },
 };
@@ -73,4 +86,13 @@ export default {
 
 <style lang="scss">
 @import "@/static/information/sex/css/sex.css";
+
+/* 渐变效果样式 */
+.human {
+  opacity: 0; /* 初始透明 */
+  transition: opacity 1.5s ease-in-out; /* 渐变持续时间和效果 */
+}
+.fade-in {
+  opacity: 1; /* 最终完全显示 */
+}
 </style>

pages/transition/page2/page2.vue

@@ -19,6 +19,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 .background {
   background-image: url("@/static/transition/page2/pictures/background.png");
   background-size: cover;

static/homepages/main/main.vue

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

static/information/sex/css/sex.css

@@ -45,4 +45,38 @@
 .boy_image:hover,
 .girl_image:hover {
     transform: scale(1.1); /* 鼠标悬浮时放大 */
-}
+}
+.human{
+    height: 30%;
+    width: 80%;
+    bottom: 55%;
+
+
+
+
+}
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+.slide-in-left {
+    animation: slideInLeft 0.5s ease forwards;
+}
+
+.slide-in-right {
+    animation: slideInRight 0.5s ease forwards;
+}

static/transition/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/transition.iml" filepath="$PROJECT_DIR$/.idea/transition.iml" />
-    </modules>
-  </component>
-</project>

static/transition/.idea/transition.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

static/transition/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
-  </component>
-</project>

static/transition/.idea/workspace.xml

@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="fe49509e-66b4-4a6b-ab2d-3ef0674550e6" name="更改" comment="">
-      <change beforePath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/_metadata.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/_metadata.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/package.json" afterDir="false" />
-    </list>
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
-  </component>
-  <component name="ProjectId" id="2o1M2OtcNfb7BYpsadE3cgKuP5x" />
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
-  <component name="ProjectViewState">
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "last_opened_file_path": "D:/webgl-examples/examples/front",
-    "vue.rearranger.settings.migration": "true"
-  }
-}]]></component>
-  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="默认任务">
-      <changelist id="fe49509e-66b4-4a6b-ab2d-3ef0674550e6" name="更改" comment="" />
-      <created>1730032420973</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1730032420973</updated>
-      <workItem from="1730032422091" duration="31000" />
-    </task>
-    <servers />
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="3" />
-  </component>
-  <component name="Vcs.Log.Tabs.Properties">
-    <option name="TAB_STATES">
-      <map>
-        <entry key="MAIN">
-          <value>
-            <State />
-          </value>
-        </entry>
-      </map>
-    </option>
-  </component>
-</project>

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": {}
 }