修改完成待测试

2026-09-13 17:45:47 +08:00
parent 9ad572907b
commit bbc024f7f2
80 changed files with 3844 additions and 1672 deletions
@@ -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>