完成home个人中心界面

App.vue

@@ -6,7 +6,11 @@
 </template>
 
 <script>
-
+import puppy_chat from "@/components/swiper/puppy_chat.vue";
+import exercise from "@/components/swiper/exercise.vue";
+import community from "@/components/swiper/community.vue";
+import read_center from "@/components/swiper/read_center.vue";
+import read from './components/tarbar/tarbar.vue';
 import my_exercise_plan from "@/components/my_exercise_plan/my_exercise_plan.vue";
 import my_recipe_plan from "@/components/my_recipe_plan/my_recipe_plan.vue";
 import tarbar from './components/tarbar/tarbar.vue';

components/swiper/community.vue

@@ -0,0 +1,41 @@
+<template>
+  <view :class="['container', extend_class]">
+    <image class="background" src="@/static/components/swiper/community/background.png"></image>
+    <image class="button" @click="go_to_community" src="@/static/components/swiper/community/button.png"></image>
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: "community",
+  data() {
+    return {};
+  },
+  methods: {
+    go_to_community() {
+      uni.navigateTo({
+        url: '/pages/homepages/community/community/community'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.background{
+  position: absolute;
+  width: 100%;
+
+}
+.button{
+  position: absolute;
+  height: 20%;
+  width: 36%;
+  left: 7%;
+  top: 67%;
+
+
+}
+
+</style>

components/swiper/exercise.vue

@@ -0,0 +1,41 @@
+<template>
+  <view :class="['container', extend_class]">
+    <image class="background" src="@/static/components/swiper/exercise/background.png"></image>
+    <image class="button" @click="go_to_exercise" src="@/static/components/swiper/exercise/button.png"></image>
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: "exercise",
+  data() {
+    return {};
+  },
+  methods:{
+    go_to_my_exercise_plan() {
+      uni.navigateTo({
+        url: '/pages/homepages/homes/my_exercise_plan/my_exercise_plan'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.background{
+  position: absolute;
+  width: 100%;
+
+}
+.button{
+  position: absolute;
+  height: 18%;
+  width: 34%;
+  left: 7%;
+  top: 74%;
+
+
+}
+
+</style>

components/swiper/puppy_chat.vue

@@ -0,0 +1,42 @@
+<template>
+  <view :class="['container', extend_class]">
+    <image class="background" src="@/static/components/swiper/puppy_chat/background.png"></image>
+    <image class="button" @click="go_go_puppy_chat"  src="@/static/components/swiper/puppy_chat/button.png"></image>
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: "puppy_chat",
+  data() {
+    return {};
+
+  },
+  methods:{
+     go_go_puppy_chat(){
+        uni.navigateTo({
+             url: '/pages/puppy_chat/puppy_chat'
+           })
+     }
+  }
+}
+</script>
+
+<style lang="scss">
+.background{
+  position: absolute;
+  width: 100%;
+
+}
+.button{
+  position: absolute;
+  height: 20%;
+  width: 36%;
+  left: 7%;
+  top: 67%;
+
+
+}
+
+</style>

components/swiper/read_center.vue

@@ -0,0 +1,42 @@
+<template>
+  <view :class="['container', extend_class]">
+    <image class="background" src="@/static/components/swiper/read/background.png"></image>
+    <image class="button" @click="go_to_choice_book" src="@/static/components/swiper/read/button.png"></image>
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: "read_center",
+  data() {
+    return {};
+  },
+  methods:{
+    go_to_choice_book() {
+      uni.navigateTo({
+        url: '/pages/homepages/homes/choice_book/choice_book'
+      })
+    }
+
+  }
+}
+</script>
+
+<style lang="scss">
+.background{
+  position: absolute;
+  width: 100%;
+
+}
+.button{
+  position: absolute;
+  height: 20%;
+  width: 36%;
+  left: 7%;
+  top: 67%;
+
+
+}
+
+</style>

components/tarbar_home/tarbar_home.vue

@@ -1,6 +1,6 @@
 <!-- TabBar.vue -->
 <template>
-  <view  :class="['container', extend_class]">
+
     <view class="bar_background"></view>
     <!-- Home 图标 -->
 
@@ -12,7 +12,7 @@
     <image class="community"
            src="/static/components/tarbar/pictures/community.png"
            @click="pick_up_community"
-           :style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
+           :style="{ opacity: is_community_picked_up ? 0 : 1 }">
     </image>
     <image class="pick_up_community"
            src="/static/components/tarbar/pictures/community_pick_up.png"
@@ -43,14 +43,14 @@
            @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_community_picked_up: false,
       is_assistant_picked_up: false,
       is_user_picked_up: false
     };
@@ -101,8 +101,6 @@ export default {
 
 <style lang="scss">
 
-
-
 @keyframes colorTransition {
   from {
     background-color: #5858cd;
@@ -112,29 +110,31 @@ export default {
   }
 }
 .bar_background{
-  position: absolute;
+  position: fixed;
   width: 95%; /* 宽度占95% */
   height: 10%; /* 高度 */
-  bottom: 1.2%; /* 距离底部2% */
+  bottom: 0%; /* 距离底部2% */
   left: 2.5%; /* 左侧2.5% */
   background-color: khaki; /* 初始颜色 */
   border-radius: 37px; /* 圆角半径，可以根据需要调整 */
-  z-index: -1; /* 使背景框在其他元素后面 */
+  z-index: 100; /* 使背景框在其他元素后面 */
   animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
 }
 
 .home, .community, .assistant, .user {
-  position: absolute;
+  position: fixed;
   width: 15%;
   height: 6%;
-  bottom: 2%;
+  bottom: 1%;
+  z-index: 101;
   transition: opacity 1s ease; /* 添加渐变过渡 */
 }
 .pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
-  position: absolute;
+  position:fixed;
   width: 17%;
   height: 10%;
-  bottom: 2%;
+  bottom: 0.8%;
+  z-index: 101;
   transition: opacity 1s ease; /* 添加渐变过渡 */
 }
 

pages.json

@@ -491,6 +491,20 @@
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/homepages/community/community/community",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/homepages/community/personal_center/personal_center",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "uniIdRouter": {},

pages/homepages/community/community/community.vue

@@ -1,7 +1,6 @@
 <template>
-<!--临时测试页面-->
   <view>
-  <dictionary></dictionary>
+
   </view>
 </template>
 

pages/homepages/community/personal_center/personal_center.vue

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

pages/homepages/homes/home/home.vue

@@ -1,10 +1,23 @@
 <template>
   <view class="background">
     <image class="home_text" src="@/static/homepages/homes/home/pictures/home_text.png">首页</image>
-    <!--轮播图显示效果   -->
+    <!--轮播图   -->
-    <image class="swiper" src="@/static/homepages/homes/home/pictures/puppy.png"></image>
+    <swiper :autoplay="true" interval="3000" duration="500" class="swiper"  :current="current" circular="true" @change="onSwiperChange">
-    <!--轮播点显示效果   -->
+      <swiper-item>
-    <image class="swipe_dot" src="@/static/homepages/homes/home/pictures/swipe_dot.png"></image>
+        <puppy_chat class="swiper_item"></puppy_chat>
+      </swiper-item>
+      <swiper-item>
+        <read_center class="swiper_item"></read_center>
+      </swiper-item>
+      <swiper-item>
+        <exercise class="swiper_item"></exercise>
+      </swiper-item>
+      <swiper-item>
+        <community class="swiper_item"></community>
+      </swiper-item>
+    </swiper>
+    <!-- 动态切换的轮播点 -->
+    <image :src="dotImages[current]" class="swipe_dot"></image>
     <!--横线显示效果   -->
     <image class="line" src="@/static/homepages/homes/home/pictures/line.png"></image>
     <!--饮食专区文字   -->
@@ -34,22 +47,35 @@
     </view>
     <!--空白区域   -->
     <view class="block_area"></view>
-    <!--底部导航栏   TODO：修改完成底部菜单栏部分-->
+    <!--底部菜单栏 -->
-    <view class="bar_home">
+    <tarbar_home ></tarbar_home>
-      <tarbar_home></tarbar_home>
-    </view>
   </view>
 </template>
 <script>
+import Puppy_chat from "@/components/swiper/puppy_chat.vue";
+import Read_center from "@/components/swiper/read_center.vue";
+import Exercise from "@/components/swiper/exercise.vue";
+import Community from "@/components/swiper/community.vue";
+
 export default {
+  components: {Community, Exercise, Read_center, Puppy_chat},
   data() {
     return {
+      current:0,
+      dotImages: [
+        '/static/homepages/homes/home/pictures/dot1.png',
+        '/static/homepages/homes/home/pictures/dot2.png',
+        '/static/homepages/homes/home/pictures/dot3.png',
+        '/static/homepages/homes/home/pictures/dot4.png',
+      ], // 轮播点图片
 	};
   },
   methods:{
+    onSwiperChange(e){
+      this.current = e.detail.current;
+    }
   }
 }
-
 </script>
 <style lang="scss">
 @import "@/static/homepages/homes/home/css/home.scss";

static/homepages/homes/home/css/home.scss

@@ -22,12 +22,18 @@
   width: 98%;
   left: 1%;
 }
+.swiper_item {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
 .swipe_dot{
   position: absolute;
-  top: 41%;
+  top: 43.8%;
-  height: 5%;
+  height: 2%;
-  width: 44%;
+  width: 25%;
-  left: 28%;
+  left: 37.5%;
 }
 .line{
   position: absolute;
@@ -162,18 +168,10 @@
   height: 5%;
   width: 100%;
 }
-.bar_home {
+.bar{
-  position: fixed;
+
-  bottom: 0;
+
-  left: 0;
+
-  right: 0;
+
-  background-color: #7bc0fe; /* 这可以帮助你确认元素是否正确显示 */
-  height: 10vh;
-  .bar{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 1001;
-  }
 }