26 · 主题装扮

DRIFTLY / HTML LAYOUT STUDY

画布背景对照

真实 HTML / CSS 排版 · 示例人物与数据 · 操作只在本页演示，不进行真实登录、发送或支付。背景根据当前逐页设计生成，可在背景对照中查看与下载。

LIVE HTML PREVIEW390 × 844

晴海来信

让每一封信，都有一点不一样的心情。

瓶型图为近似样例，实际皮肤以完成的资源为准。

IMPLEMENTATION NOTES

本页独立背景

下载背景 PNG · 设计图与背景对照

实际像素 852 × 1846；背景层 opacity = 1；cover，中心对齐。雾化与色调已绘入图片，不额外叠加统一遮罩。

1. 页面理解与当前修订

上方大漂流瓶与主题名，中部瓶子/信纸/背景分类，下方三列缩略卡，底部应用。旧图多款瓶子实际外观相似，不能视作六种不同皮肤已经设计完成。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
导航	返回和主题装扮	有未应用预览时退出按需要提示
预览舞台	约180～240高，主瓶宽90～110，主题名在下	背景、瓶型、信纸分层，不同分类保留选择
分类栏	瓶子/信纸/背景按真实资源目录	不可把相同图片换名字充作已交付多款
资源网格	默认三列，间隔12，卡内边距12	窄屏/大字体退两列，选中有边框+勾
应用栏	当前状态、下载进度/错误与应用按钮56	全部资源可用且权益核实后才能提交

表中位置表示正常内容流；除装饰舞台和头像叠放外，不以整屏绝对坐标定位。尺寸沿用通用单位约定，字体放大时内容可增高。

3. 背景和素材怎么设置

背景使用本页独立生成的 PNG。整页保持浅色雾化海岸，主题瓶体与皮肤缩略图独立 contain。预览皮肤的背景时在独立舞台显示，不改变设置页底图。

本页背景：查看或下载；实际尺寸 852×1846 px。设计图 / 新背景对照。

显示参数：cover、ax=0.50、ay=0.50、背景层 opacity=1、额外整页遮罩 alpha=0。浅色雾化或夜景调色已经绘入图片，不叠加旧版通用白色/深蓝遮罩。卡片自己的背景 Alpha 与整页背景透明度分开设置。

iOS：将 PNG 新增为 imageset driftly_bg_26_themes，Universal / Single Scale 保留原始像素；Image("driftly_bg_26_themes") 使用 resizable、scaledToFill、按容器 frame 并 clipped，背景可单独忽略安全区，opacity(1)。这是新增导入步骤，旧资源包未包含此 imageset。
Android：将 PNG 复制为 res/drawable-nodpi/driftly_bg_26_themes.png，使用 painterResource(R.drawable.driftly_bg_26_themes)、ContentScale.Crop、居中对齐、alpha=1f；不另铺白色渐变。旧资源包未包含此 drawable。
Web：本站对应 /layouts/backgrounds/26_themes.png；业务项目复制到自己的 public 目录后，使用 background-size:cover; background-position:center; background-repeat:no-repeat，背景伪元素 opacity:1，不跟随正文滚动拉长。

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`26_themes/bottle_hero`，90×166	`driftly_26_themes_bottle_hero`	3× PNG
`26_themes/bottle_sunny`，40×78	`driftly_26_themes_bottle_sunny`	3× PNG
`26_themes/bottle_night`，40×78	`driftly_26_themes_bottle_night`	3× PNG
`26_themes/bottle_pink`，40×78	`driftly_26_themes_bottle_pink`	3× PNG
`26_themes/bottle_forest`，40×78	`driftly_26_themes_bottle_forest`	3× PNG
`26_themes/bottle_sunset`，40×78	`driftly_26_themes_bottle_sunset`	3× PNG
`26_themes/bottle_moon`，40×78	`driftly_26_themes_bottle_moon`	3× PNG

多个瓶图复用了近似/同一母体，不能当六个已完成的不同款式；见清单reuse_source。

元素逻辑尺寸是清单的画布尺寸，可能包含透明边距；布局时先观察主体实际占位。iOS 调用 Image(资源名)，Android 调用 painterResource(R.drawable.资源名)；Web 源文件复制后改为站内 URL。完整资源目录、密度和裁切规则见通用实现与素材索引。

4. iOS 具体做法

预览用ZStack背景+瓶Image+说明，选择状态与已应用状态分别存储；返回不自动覆盖已用主题。
LazyVGrid三列/自适应，selected卡有accessibilityValue，应用按钮safeAreaInset。
下载与图片解码异步执行，先落可用缓存再原子切换；失败保留旧主题，避免白屏。

5. Android 具体做法

Box预览绑定临时choice，资源网格用稳定theme_id作key；背景Crop、瓶子Fit，不混用。
ThemeChoice有限枚举走现行int映射，资源条目/瓶型走真实记录ID；后端权益结果决定可用性。
下载校验、低存储与失败重试交给资源层，应用成功后全局主题StateFlow更新，退出不清掉有效缓存。

6. Web 具体做法

CSS变量/主题状态仅在预览容器作用域临时变更；点击应用成功后才更新应用根主题。
网格按钮有aria-pressed或单选语义，背景缩略图object-fit:cover，瓶型图contain；键盘能选择。
下载失败维持默认可用资源，桌面可左预览右网格；后台返回权益不足时不只靠前端解锁标记。

7. 状态、交互和数据绑定

P1免费主题和P2付费扩展分开；后端验证权益，不虚构价格、订阅或购买能力。
下载/校验成功后应用；失败保留旧主题并重试，不将“预览选中”误作“已应用”。
四种背景ThemeChoice=1晴日、2海底、3日落、4月夜；具体资源ID不能由这个编号推断。
瓶子重复素材可作默认占位且在开发中标记，正式选项只展示真实完成资源；主题不能赋予安全特权。

8. 本页验收重点

点击不同选项只是预览，返回后原主题仍在；应用成功才跨页生效。
无网/低存储/下载损坏/权益过期均可回到默认可用主题。
网格选中态可读，三列在大字体自动调整且名称不裁切。

还需覆盖通用验收中的窄屏、大字体、RTL、读屏、断网、图片失败与键盘场景。本页是开发交接说明，不代表三端业务已实现或已通过实机测试。

LIVE DESIGN SPECIFICATIONS

精细布局标注

0 个元素

点击预览中的任一元素，查看当前实际生效的尺寸、四边间距与文字样式。标注模式下点击用于选取，关闭后恢复页面交互。

外边距 margin内边距 padding内容 content

选择元素（也可以点击左侧预览）

查找标题、按钮、卡片、图片或元素编号

四边顺序：上 / 右 / 下 / 左。点击行可定位元素。离开滚动可视区的节点仍列在表内。

元素	宽 × 高	margin	padding	字号 / 行高 / 字重	背景 Alpha / opacity	圆角	gap 行 / 列

数值口径与 iOS / Android 对照

尺寸、坐标与间距采用当前 HTML 的 CSS px；矩形测量保留两位小数，CSS计算字符串保留浏览器返回值；不是源 PNG 的像素标注。390 画布是实现参考基线，原图 1170 px 对应 3 倍视觉比例。

iOS 按逻辑 pt、Android 按 dp / sp 实施时可参考这些数值，但仍需平台字体、安全区和缩放适配，不直接做物理像素等同换算。

字体大小、行高和字重为当前继承与响应式规则合并后的值。外边距展示 CSS margin 声明的计算结果；父级距离、兄弟间隙是可视矩形测量，可能受滚动、折叠、transform 影响，不等同于 margin。

背景 Alpha 仅影响该颜色；整体 opacity 同时影响文字与子元素。透明度 = 1 − 不透明度。多层渐变、祖先 opacity、PNG 自带 Alpha 无法用一个百分比描述最终视觉。

切换画布、大字体、输入状态或滚动后可重新测量。CSS媒体查询按浏览器窗口宽度生效；画布宽度选项只改变预览容器，验证手机断点请同时缩窄浏览器或使用设备模拟。标注读取当前示例，不将这些样式数值视为已批准的产品 token。