wechat_wc/docs/页面设计规范/C类/商品详情-沉浸式.md

商品详情（沉浸式） 页面设计规范

基本信息

• 路由：pages/shop/detail
• 分类：C类
• 标题文本：商品详情
• TabBar：否

组件调用

• ScrollTopMask
  • title="商品详情"
  • targetSelector=".shop-back-btn"
  • showBack：是
• CustomTabBar：不显示。

设计要点

• 顶部字距：不套用普通字距（保留滚动 Hero）。
• 底部安全区：避让 env(safe-area-inset-bottom)。
• TopMask 出现阈值由 .shop-back-btn 测量决定；滚动后标题淡入，位置遵循所在分类通用规范。

页面特有说明

darkTop + 全屏 Hero；页面自带返回按钮与 TopMask 返回按钮双保险。

验收要点

• 顶部字距符合 class 通用规范
• TopMask 标题/返回按钮符合预期
• 浅色/深色主题正常
• iOS / Android 真机表现一致