1111

2026-09-22 15:03:13 +08:00
parent 426eaca97f
commit dec3dfdfe3
9 changed files with 3341 additions and 4 deletions
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const currentTab = computed(() => {
+  const path = route.path
+  if (path.startsWith('/assessment')) return 'assessment'
+  if (path.startsWith('/profile')) return 'profile'
+  return 'home'
+})
+
+function navigate(target: string) {
+  if (target === 'home' && route.path !== '/dashboard') {
+    router.push('/dashboard')
+  } else if (target === 'assessment' && route.path !== '/assessment') {
+    router.push('/assessment')
+  } else if (target === 'profile' && route.path !== '/profile') {
+    router.push('/profile')
+  }
+}
+</script>
+
+<template>
+  <nav class="app-tab-bar">
+    <div
+      class="tab-item"
+      :class="{ active: currentTab === 'home' }"
+      @click="navigate('home')"
+    >
+      <div class="tab-icon">
+        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <polyline points="9 22 9 12 15 12 15 22" />
+        </svg>
+      </div>
+      <span class="tab-label">首页</span>
+    </div>
+
+    <div
+      class="tab-item"
+      :class="{ active: currentTab === 'assessment' }"
+      @click="navigate('assessment')"
+    >
+      <div class="tab-icon">
+        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+          <path d="M9 13h6" />
+          <path d="M9 17h6" />
+          <polyline points="10 9 12 11 14 9" />
+        </svg>
+      </div>
+      <span class="tab-label">健康评估</span>
+    </div>
+
+    <div
+      class="tab-item"
+      :class="{ active: currentTab === 'profile' }"
+      @click="navigate('profile')"
+    >
+      <div class="tab-icon">
+        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+          <circle cx="12" cy="7" r="4" />
+        </svg>
+      </div>
+      <span class="tab-label">我的</span>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.app-tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 480px;
+  height: 60px;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid rgba(18, 63, 55, 0.08);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  z-index: 99;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  box-shadow: 0 -4px 16px rgba(18, 63, 55, 0.04);
+}
+
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+  color: #7d8e87;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.tab-icon {
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.tab-label {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.tab-item.active {
+  color: #0c5045;
+}
+
+.tab-item.active .tab-icon {
+  transform: translateY(-1px);
+}
+
+.tab-item.active .tab-label {
+  font-weight: 700;
+}
+</style>