jiapu/design-qa.md

首页设计还原 QA

对照基准

• 设计源：用户在当前对话提供的桌面首页设计图，红色文字和箭头作为替换与结构调整标注。
• 实现基线：原首页 index-modern.html 的品牌色、字体、卡片质感和 public/js/page-effects.js 交互。
• 桌面审查截图：artifacts/homepage-final-review-full.png，CSS 视口 1440 × 2200，DPR 1。
• 移动审查截图：artifacts/homepage-final-review-mobile.png，CSS 视口 500 × 1600，DPR 1。
• 页面状态：未登录初始状态。

结构对照

• 页面沿用原首页 1280px 宽屏容器，顺序为双层导航、首屏、四个主入口、第一条九格广告栏、六个内容入口、推荐与友情链接、第二条九格广告栏、页脚。
• 已删除设计图没有的家谱广场、文章列表、姓氏百科、相关推荐大卡、下载大区块。
• “我的家谱”是独立强调入口，链接 profile-families.html，承担查看、新建和管理全部家谱。
• 红色标注按替换文案处理；被替换的旧标题没有在同一卡片中保留。

视觉与交互对照

• 保留原首页的暖纸色、朱红渐变导航、宋体标题、黑体正文、宽屏留白、圆角卡片、层次阴影与半透明面板。
• 首屏按设计图重组为正文、二维码、原有蓝色家谱封面、祠堂和家族记忆图片。
• 保留原首页的 tilt-card 指针倾斜、按钮磁吸、图片悬停缩放、移动菜单和 reduced-motion 行为。
• 桌面页脚链接与备案信息已恢复居中，不受原全局链接布局影响。
• 主入口图片按左侧内容定位，避免服务、视频和相册标题被居中裁切；入口区、内容卡和广告栏已压缩无效留白。
• 两组九格广告栏均使用项目已有广告图片，不再显示文字占位块。
• 页脚链接区改为完整浅色横条，消除了深色背景在两侧提前露出的断层。

响应式与可访问性

• 1120px 以下主入口和广告栏分栏；720px 以下首屏、入口和内容卡改为单列。
• 浏览器导航结构专项检查通过，移动断点继续沿用原首页规则。
• 图片提供替代文本；二维码入口、导航、广告位和内容卡均使用链接语义；焦点样式沿用公共样式。

剩余差异

• P3：设计图右下角为多人家族合影，仓库没有对应素材，当前继续使用原有家族记忆图片。
• P3：原首页交互动效在截图中不可见，但已通过复用原脚本和交互类保留。

final result: passed