feat: 在各页面中新增底部导航栏组件TabBar

src/components/TabBar.vue

@@ -1,12 +1,15 @@
 <template>
   <view class="tab-bar">
     <view class="tab-item" @click="onTabClick(0)">
+      <uni-icons type="home" size="20" color="#666"></uni-icons>
       <text class="tab-text">慢病首页</text>
     </view>
     <view class="tab-item" @click="onTabClick(1)">
+      <uni-icons type="bars" size="20" color="#666"></uni-icons>
       <text class="tab-text">健康数据</text>
     </view>
     <view class="tab-item" @click="onTabClick(2)">
+      <uni-icons type="person" size="20" color="#666"></uni-icons>
       <text class="tab-text">个人中心</text>
     </view>
   </view>
@@ -23,9 +26,8 @@ const onTabClick = (index: number) => {
       })
       break
     case 1: // 健康数据
-      uni.showToast({
-        title: '健康数据功能开发中',
-        icon: 'none'
+      uni.switchTab({
+        url: '/pages/health/health'
       })
       break
     case 2: // 个人中心

src/pages/health/health.vue

@@ -3,12 +3,14 @@
   <view class="content">
     <PageTitle :title="title" />
   </view>
+  <TabBar />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import PageTitle from '@/components/PageTitle.vue'
 import CustomNav from '@/components/CustomNav.vue'
+import TabBar from '@/components/TabBar.vue'
 
 const title = ref('健康数据')
 </script>
@@ -20,7 +22,7 @@ const title = ref('健康数据')
   align-items: center;
   justify-content: center;
   padding-top: calc(var(--status-bar-height) + 44px);
-  padding-bottom: 100rpx; /* 给底边栏留空间 */
+  height: calc(100vh - var(--status-bar-height) - 44px);
 }
 
 .text-area {

src/pages/index/index.vue

@@ -15,19 +15,21 @@
       </view>
     </view>
   </view>
+  <TabBar />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import PageTitle from '@/components/PageTitle.vue'
 import CustomNav from '@/components/CustomNav.vue'
+import TabBar from '@/components/TabBar.vue'
 
 const title = ref('Hello')
 
 const bannerImages = [
-  '/static/logo.png',
-  '/static/logo.png',
-  '/static/logo.png'
+  '/static/carousel/BHFIIABBCDJII-5kCEkD6zh9.png',
+  '/static/carousel/BHFIIABBDGHEA-wtWLrLS75o.png',
+  '/static/carousel/BHFIIABBHJBAH-yDeckRiiQP.png'
 ]
 
 const cards = [
@@ -45,15 +47,14 @@ const cards = [
   align-items: center;
   justify-content: flex-start;
   padding-top: calc(var(--status-bar-height) + 44px);
-  padding-bottom: 100rpx;
-  height: calc(100vh - var(--status-bar-height) - 44px - 100rpx);
+  height: calc(100vh - var(--status-bar-height) - 44px);
   background: #f7f8fa;
 }
 
 .banner-swiper {
   width: 670rpx;
   max-width: 100vw;
-  height: 300rpx;
+  height: 400rpx;
   margin: 20rpx auto 30rpx auto;
   border-radius: 16rpx;
   overflow: hidden;

src/pages/profile/profile.vue

@@ -36,6 +36,7 @@
       <button class="logout-btn" @click="onLogout">退出登录</button>
     </view>
   </view>
+  <TabBar />
 </template>
 
 <script setup lang="ts">
@@ -44,6 +45,7 @@ import { computed } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import PageTitle from '@/components/PageTitle.vue'
 import CustomNav from '@/components/CustomNav.vue'
+import TabBar from '@/components/TabBar.vue'
 
 const title = ref('个人中心')
 
@@ -117,7 +119,6 @@ const onLogout = () => {
   min-height: 100vh;
   background-color: #f5f5f5;
   padding-top: calc(var(--status-bar-height) + 44px);
-  padding-bottom: 100rpx; /* 给底边栏留空间 */
 }
 
 .header {