修改完成待测试

2026-09-13 17:45:47 +08:00
parent 9ad572907b
commit bbc024f7f2
80 changed files with 3844 additions and 1672 deletions
@@ -12,14 +12,21 @@
      src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
      mode="scaleToFill"
    />
-    <view class="surname-seal">
+    <view class="genealogy-book" aria-hidden="true">
      <image
-        class="surname-seal-frame"
-        src="/static/assets/modules/genealogy/transparent/row-seal-frame.png"
-        mode="scaleToFill"
+        class="genealogy-book__cover"
+        src="/static/assets/foundation/opaque/book-blank.png"
+        mode="aspectFit"
      />
-      <view class="surname-seal-copy">
-        <text class="seal-title">家谱</text>
+      <view
+        v-if="genealogy.surname"
+        class="genealogy-book__spine-title"
+      >
+        <text
+          v-for="(character, index) in getBookSpineTitle(genealogy.surname)"
+          :key="`${index}-${character}`"
+          class="genealogy-book__spine-character"
+        >{{ character }}</text>
      </view>
    </view>

@@ -51,8 +58,8 @@
        </view>
        <view class="card-trailing">
          <text class="card-role app-single-line">{{ role }}</text>
-          <text v-if="genealogy.updatedAt" class="card-updated app-single-line"
-            >更新于 {{ genealogy.updatedAt }}</text
+          <text v-if="genealogy.createTime" class="card-updated app-single-line"
+            >创建于 {{ formatGenealogyDate(genealogy.createTime) }}</text
          >
        </view>
      </view>
@@ -70,9 +77,16 @@ const props = defineProps({
 });
 defineEmits(["select"]);

+const formatGenealogyDate = (value) => {
+  const text = String(value || "").trim();
+  return text.length >= 10 ? text.slice(0, 10) : text;
+};
+const getBookSpineTitle = (value) =>
+  Array.from(`${String(value || "").trim()}氏家谱`);
+
 const accessibleLabel = computed(
  () =>
-    `${props.genealogy.name}，${props.role}${props.selected ? '，当前家谱' : ''}，${props.genealogy.location}，${props.genealogy.memberCount} 位成员`,
+    `${props.genealogy.name}，${props.role}${props.selected ? '，当前家谱' : ''}，${props.genealogy.location}，${props.genealogy.memberCount} 位成员${props.genealogy.createTime ? `，创建于 ${formatGenealogyDate(props.genealogy.createTime)}` : ''}`,
 );
 </script>

@@ -81,7 +95,7 @@ const accessibleLabel = computed(
  --card-padding-x: 24rpx;
  --card-padding-y: 20rpx;
  display: grid;
-  grid-template-columns: 68rpx minmax(0, 1fr);
+  grid-template-columns: 112rpx minmax(0, 1fr);
  min-height: 204rpx;
  align-items: center;
  column-gap: 20rpx;
@@ -106,47 +120,37 @@ const accessibleLabel = computed(
  pointer-events: none;
 }

-.surname-seal {
-  display: grid;
+.genealogy-book {
+  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
-  width: 68rpx;
-  height: 106rpx;
-  place-items: center;
-  color: #fff5df;
+  width: 112rpx;
+  height: 153rpx;
 }
-
-.surname-seal-frame {
-  z-index: 0;
+.genealogy-book__cover {
+  display: block;
  width: 100%;
  height: 100%;
 }
-.surname-seal-frame,
-.surname-seal-copy {
-  grid-area: 1 / 1;
-}
-.surname-seal-copy {
-  z-index: 1;
+.genealogy-book__spine-title {
+  position: absolute;
+  top: 5rpx;
+  left: 7rpx;
  display: flex;
-  height: 78rpx;
+  width: 23rpx;
+  height: 91rpx;
  align-items: center;
  justify-content: center;
+  flex-direction: column;
+  color: #2f2925;
+  font-family: "STKaiti", "KaiTi", "SimSun", serif;
 }
-.seal-title {
-  color: #fff5df;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: clamp(17px, 30rpx, 22px);
-  font-weight: 700;
-  letter-spacing: 2rpx;
-  line-height: 1;
-  writing-mode: vertical-rl;
-}
-.genealogy-card:not(.genealogy-card--current) .surname-seal-frame {
-  opacity: 0.32;
-}
-.genealogy-card:not(.genealogy-card--current) .seal-title {
-  color: $ink-muted;
+.genealogy-book__spine-character {
+  display: block;
+  font-size: clamp(9.5px, 17rpx, 12px);
+  font-weight: 400;
+  line-height: 1.05;
 }

 .card-main {
@@ -258,15 +262,21 @@ const accessibleLabel = computed(
@media screen and (max-width: 340px) {
  .genealogy-card {
    --card-padding-x: 18rpx;
-    grid-template-columns: 62rpx minmax(0, 1fr);
+    grid-template-columns: 100rpx minmax(0, 1fr);
    column-gap: 16rpx;
    min-height: 176rpx;
    padding-right: 18rpx;
    padding-left: 18rpx;
  }
-  .surname-seal {
-    width: 62rpx;
-    height: 96rpx;
+  .genealogy-book {
+    width: 100rpx;
+    height: 136rpx;
+  }
+  .genealogy-book__spine-title {
+    top: 4rpx;
+    left: 6rpx;
+    width: 21rpx;
+    height: 81rpx;
  }
  .card-name {
    font-size: clamp(17px, 32rpx, 22px);
@@ -0,0 +1,89 @@
+<template>
+  <view class="home-advertisement-panel">
+    <view class="home-advertisement-panel__grid">
+      <button
+        v-for="advertisement in advertisements"
+        :key="advertisement.image"
+        class="home-advertisement-panel__card"
+        :aria-label="`${advertisement.title}，查看更多内容`"
+        @click="emit('open')"
+      >
+        <image :src="advertisement.image" mode="aspectFill" />
+      </button>
+    </view>
+    <button class="home-advertisement-panel__more" @click="emit('open')">
+      点击查看更多内容
+    </button>
+  </view>
+</template>
+
+<script setup>
+const emit = defineEmits(["open"]);
+
+const advertisements = Object.freeze([
+  {
+    title: "寻根问祖",
+    image: "/static/assets/modules/genealogy/opaque/home-ad-heritage-hall.png",
+  },
+  {
+    title: "家族传承",
+    image: "/static/assets/modules/genealogy/opaque/home-ad-family-tree.png",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.home-advertisement-panel {
+  min-height: 176rpx;
+  padding: 10rpx 8rpx 4rpx;
+  border-top: 1rpx solid rgba(154, 111, 56, 0.34);
+  background: rgba(255, 253, 249, 0.96);
+  box-sizing: border-box;
+}
+
+.home-advertisement-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12rpx;
+}
+
+.home-advertisement-panel__card,
+.home-advertisement-panel__more {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.home-advertisement-panel__card::after,
+.home-advertisement-panel__more::after {
+  border: 0;
+}
+
+.home-advertisement-panel__card {
+  height: 112rpx;
+  overflow: hidden;
+  border: 1rpx solid rgba(142, 96, 44, 0.3);
+  border-radius: 10rpx;
+  background: #f1ece2;
+  line-height: normal;
+}
+
+.home-advertisement-panel__card image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.home-advertisement-panel__more {
+  display: block;
+  width: 100%;
+  height: 40rpx;
+  color: $brand-red;
+  font-family: "STKaiti", "KaiTi", serif;
+  font-size: clamp(13px, 22rpx, 16px);
+  font-weight: 700;
+  line-height: 40rpx;
+  text-align: center;
+}
+</style>
@@ -1,5 +1,8 @@
 <template>
-  <view class="genealogy-page-background">
+  <view
+    class="genealogy-page-background"
+    :class="{ 'genealogy-page-background--light': tone === 'light' }"
+  >
    <image
      class="genealogy-page-background__art"
      src="/static/assets/modules/genealogy/opaque/genealogy-page-background-long.png"
@@ -8,6 +11,12 @@
  </view>
 </template>

+<script setup>
+defineProps({
+  tone: { type: String, default: "default" },
+});
+</script>
+
 <style scoped>
 .genealogy-page-background {
  position: fixed;
@@ -29,4 +38,12 @@
  opacity: 0.28;
 }

+.genealogy-page-background--light {
+  background: #faf8f3;
+}
+
+.genealogy-page-background--light .genealogy-page-background__art {
+  opacity: 0.15;
+}
+
 </style>