家谱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>
@@ -0,0 +1,138 @@
+<template>
+  <view class="genealogy-card" :class="{ 'genealogy-card--current': selected }" @click="$emit('select', genealogy)">
+    <image class="row-frame" src="/static/assets/backgrounds/genealogy-list-slip-frame.png" mode="scaleToFill" />
+    <view class="surname-seal">
+      <image class="surname-seal-frame" src="/static/assets/icons/genealogy/seal-row-frame-v1.png" mode="scaleToFill" />
+      <view class="surname-seal-copy">
+        <text class="seal-title">家谱</text>
+      </view>
+    </view>
+
+    <view class="card-copy">
+      <text class="card-name">{{ genealogy.name }}</text>
+      <view class="card-detail-row">
+        <view class="card-metas">
+          <view class="card-meta-item">
+            <image class="card-meta-icon" src="/static/assets/icons/common/location-v1.png" mode="aspectFit" />
+            <text class="card-meta">{{ genealogy.location }}</text>
+          </view>
+          <view class="card-meta-item">
+            <image class="card-meta-icon" src="/static/assets/icons/common/member-meta-v1.png" mode="aspectFit" />
+            <text class="card-meta">{{ genealogy.memberCount }} 位成员</text>
+          </view>
+        </view>
+        <view class="card-updated">
+          <text>更新于 {{ genealogy.updatedAt }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="card-side">
+      <text class="card-role">{{ role }}</text>
+      <image class="card-chevron" src="/static/assets/icons/common/chevron-right-v2.png" mode="aspectFit" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  genealogy: { type: Object, required: true },
+  role: { type: String, required: true },
+  selected: { type: Boolean, default: false }
+})
+defineEmits(['select'])
+</script>
+
+<style scoped lang="scss">
+.genealogy-card {
+  position: relative;
+  display: flex;
+  min-height: 160rpx;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+.genealogy-card--current { background: transparent; }
+
+.row-frame {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.surname-seal {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 76rpx;
+  height: 118rpx;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  margin-right: 22rpx;
+  color: #fff5df;
+}
+
+.surname-seal-frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; }
+.surname-seal-copy { position: relative; z-index: 1; display: flex; height: 82rpx; align-items: center; justify-content: center; }
+.seal-title { color: #fff5df; font-family: 'STKaiti', 'KaiTi', serif; font-size: 30rpx; font-weight: 700; letter-spacing: 2rpx; line-height: 1; writing-mode: vertical-rl; }
+.genealogy-card:not(.genealogy-card--current) .surname-seal-frame { opacity: .32; }
+.genealogy-card:not(.genealogy-card--current) .seal-title { color: $ink-muted; }
+
+.card-copy {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.card-name,
+.card-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-name { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 37rpx; font-weight: 700; }
+.card-detail-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; margin-top: 12rpx; }
+.card-metas { display: flex; min-width: 0; align-items: center; }
+.card-meta-item { display: flex; min-width: 0; align-items: center; margin-right: 14rpx; }
+.card-meta-icon { width: 24rpx; height: 24rpx; margin-right: 5rpx; }
+.card-meta { color: $ink-muted; font-size: 22rpx; }
+.card-updated { display: flex; flex: 0 0 auto; align-items: center; margin-left: 10rpx; color: $ink-muted; font-size: 20rpx; white-space: nowrap; }
+
+.card-side {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 124rpx;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 10rpx;
+}
+
+.card-role { color: $ink-muted; font-size: 24rpx; white-space: nowrap; }
+.card-chevron { width: 34rpx; height: 34rpx; margin-left: 14rpx; }
+
+@media screen and (max-width: 340px) {
+  .genealogy-card { min-height: 148rpx; padding-right: 18rpx; padding-left: 18rpx; }
+  .surname-seal { width: 68rpx; height: 106rpx; margin-right: 16rpx; }
+  .card-name { font-size: 32rpx; }
+  .card-meta { font-size: 20rpx; }
+  .card-updated { display: none; }
+  .card-side { width: 92rpx; margin-left: 8rpx; }
+  .card-chevron { width: 28rpx; height: 28rpx; margin-left: 8rpx; }
+}
+</style>
@@ -0,0 +1,152 @@
+<template>
+  <view class="page-header" :class="{ 'page-header--root': root }">
+    <image v-if="root" class="header-texture" src="/static/assets/backgrounds/header-cinnabar-texture-v2.jpg" mode="scaleToFill" />
+    <image v-if="root" class="header-hall" src="/static/assets/backgrounds/header-hall-lineart.png" mode="aspectFit" />
+    <view class="header-side header-side--left">
+      <view v-if="root" class="header-icon-button" @click="$emit('brand')">
+        <image class="header-logo" src="/static/assets/icons/brand/jiapu-seal-logo-header.png" mode="aspectFit" />
+      </view>
+      <view v-else class="header-back" @click="goBack">{{ backLabel }}</view>
+    </view>
+
+    <text class="header-title">{{ title }}</text>
+
+    <view class="header-side header-side--right">
+      <view v-if="root" class="header-icon-button header-notice" @click="$emit('notice')">
+        <image class="header-notice-icon" src="/static/assets/icons/common/notice-v3.png" mode="aspectFit" />
+        <view v-if="unreadCount > 0" class="notice-dot"></view>
+      </view>
+      <view v-else class="header-action" @click="$emit('action')">{{ action }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: true },
+  action: { type: String, default: '' },
+  backLabel: { type: String, default: '返回' },
+  root: { type: Boolean, default: false },
+  unreadCount: { type: Number, default: 0 }
+})
+
+const goBack = () => uni.navigateBack()
+</script>
+
+<style scoped lang="scss">
+.page-header {
+  display: flex;
+  align-items: center;
+  height: 104rpx;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+  background: $brand-red;
+  color: #fff9ed;
+}
+
+.page-header--root {
+  position: relative;
+  z-index: 3;
+  height: 184rpx;
+  padding-top: env(safe-area-inset-top);
+  background-color: #b52e22;
+  overflow: hidden;
+}
+
+.header-texture {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.header-hall {
+  position: absolute;
+  bottom: -8rpx;
+  left: -34rpx;
+  z-index: 1;
+  width: 368rpx;
+  height: 147rpx;
+  opacity: .16;
+  pointer-events: none;
+}
+
+.page-header--root .header-side,
+.page-header--root .header-title { position: relative; z-index: 2; }
+
+.header-side {
+  display: flex;
+  width: 120rpx;
+  min-height: 88rpx;
+  align-items: center;
+}
+
+.header-side--left { justify-content: flex-start; }
+.header-side--right { justify-content: flex-end; }
+
+.header-icon-button {
+  position: relative;
+  display: flex;
+  width: 88rpx;
+  height: 88rpx;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-logo { width: 66rpx; height: 66rpx; }
+.header-notice-icon { width: 48rpx; height: 48rpx; }
+
+.notice-dot {
+  position: absolute;
+  top: 15rpx;
+  right: 13rpx;
+  width: 14rpx;
+  height: 14rpx;
+  border: 2rpx solid $brand-red;
+  border-radius: 50%;
+  background: #fff9ed;
+}
+
+.header-back,
+.header-action {
+  width: 100%;
+  font-size: 27rpx;
+}
+
+.header-back { text-align: left; }
+.header-action { color: #ffe3a7; text-align: right; }
+
+.header-title {
+  flex: 1;
+  overflow: hidden;
+  color: #fff9ed;
+  font-family: serif;
+  font-size: 35rpx;
+  font-weight: 700;
+  letter-spacing: 4rpx;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.page-header--root .header-title {
+  color: #ffe3a7;
+  font-family: 'STKaiti', 'KaiTi', serif;
+  font-size: 48rpx;
+  letter-spacing: 5rpx;
+  transform: translateY(8rpx);
+}
+
+.page-header--root .header-logo {
+  width: 88rpx;
+  height: 88rpx;
+  transform: translate(-8rpx, -12rpx);
+}
+
+.page-header--root .header-notice { transform: translateY(10rpx); }
+</style>