47 lines
2.6 KiB
Markdown
47 lines
2.6 KiB
Markdown
# G 类型页面分层自适应背景设计
|
||
|
||
## 目标
|
||
|
||
解决 G 类型页面在高屏下半区只剩纯色宣纸、画面重心中断的问题，同时继续满足：左右不裁剪、背景不拉伸、不同屏幕比例可用、9 个活动 G 页面共用。
|
||
|
||
## 用户决定
|
||
|
||
采用现有 C 图贴底的自适应背景，不生成新图，也不重做一张依赖固定长宽比的超长整图。
|
||
|
||
## 视觉结构
|
||
|
||
公共背景由两个固定视口图层组成，统一归 `components/GenealogyPageBackground.vue` 管理：
|
||
|
||
1. 宣纸底层：覆盖完整视口，沿用与 C 母版底部匹配的暖灰宣纸色。
|
||
2. 底部山水层：继续使用用户选定的 C“云竹亭台连续宣纸景”，宽度 `100%`、`widthFix` 等比显示并贴底，完整保留左右画面，不裁剪、不拉伸。
|
||
|
||
不新增顶部竹枝资产，不重复渲染或裁切 C 图。高屏多出的宣纸区留在上方，主要由标题栏、当前家谱卡片和快捷入口覆盖；C 图的亭台、山水与竹影集中承托下方列表和加入申请区。
|
||
|
||
## 响应式规则
|
||
|
||
- 320×568：C 层贴底后接近页头，完整画面覆盖大部分视口。
|
||
- 360×640：C 层贴底，顶部只保留较小宣纸区，中央内容区保持可读。
|
||
- 360×800、412×915：高屏多出的宣纸区位于上方，C 层稳定承托“我创建的”“我加入的”“加入申请”等下半区。
|
||
- 所有尺寸都禁止 `aspectFill` 和 `scaleToFill`；C 图片层按原比例显示。
|
||
- 背景固定于视口，页面内容继续自然滚动；本轮不改变 G01 固定区／独立滚动结构。
|
||
|
||
## 资产与可恢复性
|
||
|
||
- C 母版和现有确定性构建流程保持不变。
|
||
- 不新增任何背景候选或运行资产；继续使用 `static/assets/modules/genealogy/opaque/genealogy-page-background.png`。
|
||
- manifest、构建脚本和测试继续以现有 C 母版为唯一可重建输入。
|
||
|
||
## 验证
|
||
|
||
- 更新公共组件前先写贴底定位失败契约并执行红绿循环。
|
||
- G01 在 320×568、360×640、360×800、412×915 下生成真实 H5 截图。
|
||
- 同一比较输入中查看 C 母版和实现截图，检查上方宣纸区、贴底位置、裁剪、拉伸、文字对比度和横向溢出。
|
||
- 其他 8 个 G 页面至少通过公共背景契约与现有运行 smoke；仍不得据此宣称逐页视觉验收。
|
||
- Android/HBuilderX 真机或模拟器复核继续保留为最终验证缺口。
|
||
|
||
## 非目标
|
||
|
||
- 不修改 G 页面内容、卡片、标题栏、路由、接口或状态逻辑。
|
||
- 不实施 G01 标题／当前家谱／快捷入口固定和列表独立滚动。
|
||
- 不删除 A/B/C 历史母版、未跟踪资产、截图或缓存。
|