38 lines
1.9 KiB
Markdown
38 lines
1.9 KiB
Markdown
# G 类型页面共用 C 背景设计
|
||
|
||
## 目标
|
||
|
||
将已选定的 C“云竹亭台连续宣纸景”设为所有活动 G 类型页面的公共背景。背景必须完整显示左右画面、不裁剪、不变形；高屏和长页面超出图片高度的部分使用同色宣纸底色自然延展。
|
||
|
||
## 范围
|
||
|
||
- 覆盖 `pages.json` 中 9 个活动 G 路由：G01、G03、G05、G06、G08、G09、G10、G11、G12。
|
||
- 只替换页面最底层的旧纸纹和页脚山水，不改标题栏、内容卡片、交互、状态数据或路由。
|
||
- G01 的固定区／独立滚动结构不在本次范围内。
|
||
- 当前只形成 H5 内部候选证据；Android/HBuilderX 真机或模拟器复核仍然缺失。
|
||
|
||
## 单一所有者
|
||
|
||
新增 `components/GenealogyPageBackground.vue`，由它唯一持有：
|
||
|
||
- C 背景运行资产路径；
|
||
- 同色宣纸延展底色；
|
||
- 顶部对齐、按宽度等比显示、固定在页面底层且不接收指针事件的布局规则。
|
||
|
||
9 个页面只渲染该组件，不再分别引用 `page-paper.jpg`、`footer-mountain-bamboo.png` 或直接引用 C 背景资产。
|
||
|
||
## 显示规则
|
||
|
||
- 外层背景固定覆盖视口，使用宣纸底色填满未被图片覆盖的区域。
|
||
- C 背景图片宽度为 `100%`，使用 `mode="widthFix"` 等比计算高度并顶部对齐。
|
||
- 图片不使用 `aspectFill` 或 `scaleToFill`，因此左右不裁剪且画面不变形。
|
||
- 页面内容继续使用各页现有层级；公共背景位于 `z-index: 0`，不改变弹窗和操作层层级。
|
||
|
||
## 验证
|
||
|
||
- 契约测试必须解析 `pages.json` 得到实际 G 路由，并断言每个页面只使用公共背景组件。
|
||
- 契约测试必须禁止 G 页面继续引用旧纸纹、旧页脚山水或直接重复引用 C 背景。
|
||
- G01 原有视觉、空状态和运行冒烟测试继续通过。
|
||
- H5 在 320×568、360×640、360×800、412×915 下截图检查：左右完整、无拉伸、无横向溢出，底部宣纸延展连续。
|
||
|