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

2026-07-13 00:23:04 +08:00
commit 1da4d8cf1f
117 changed files with 9476 additions and 0 deletions
@@ -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>