家谱APP首页样式设计完成，落地80%

2026-07-13 00:23:04 +08:00
commit 1da4d8cf1f
117 changed files with 9476 additions and 0 deletions
@@ -0,0 +1,64 @@
+<template>
+  <view class="app-tabbar">
+    <view v-for="item in items" :key="item.key" class="tab-item" @click="switchTab(item)">
+      <image class="tab-icon" :src="active === item.key ? item.activeIcon : item.icon" mode="aspectFit" />
+      <text :class="['tab-label', { active: active === item.key }]">{{ item.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({ active: { type: String, required: true } })
+
+const items = [
+  { key: 'genealogy', label: '家谱', path: '/pages/genealogy/index', icon: '/static/assets/icons/tab/genealogy-v4.png', activeIcon: '/static/assets/icons/tab/genealogy-active-v4.png' },
+  { key: 'family', label: '家族', path: '/pages/family/index', icon: '/static/assets/icons/tab/family-v4.png', activeIcon: '/static/assets/icons/tab/family-active-v4.png' },
+  { key: 'profile', label: '我的', path: '/pages/profile/index', icon: '/static/assets/icons/tab/profile-v4.png', activeIcon: '/static/assets/icons/tab/profile-active-v4.png' }
+]
+
+const switchTab = (item) => {
+  if (item.key !== props.active) uni.reLaunch({ url: item.path })
+}
+</script>
+
+<style scoped lang="scss">
+.app-tabbar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+  display: flex;
+  height: 128rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
+  border-top: 1rpx solid $gold-soft;
+  background: $paper-white;
+}
+
+.tab-item {
+  display: flex;
+  min-height: 96rpx;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10rpx 0 8rpx;
+  box-sizing: border-box;
+}
+
+.tab-icon {
+  width: 56rpx;
+  height: 56rpx;
+  margin-bottom: 5rpx;
+}
+
+.tab-label {
+  color: $ink-muted;
+  font-size: 28rpx;
+  letter-spacing: 2rpx;
+  line-height: 1.2;
+}
+
+.tab-label.active { color: $brand-red; font-weight: 700; }
+</style>