12 海洋首页 · Driftly HTML布局

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

LIVE HTML PREVIEW390 × 844

早安，海风

今天也会有温暖的相遇。

写下心事，让世界听见你的声音。

海风正好，故事正在靠近

扔一个瓶子写下心事，交给大海捡一个瓶子去遇见，远方的温柔

IMPLEMENTATION NOTES

本页独立背景

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

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

1. 页面理解与当前修订

顶部Driftly字标、问候和小操作按钮，中上部白色心情卡，中部日落海面漂流瓶，底部并排“扔一个瓶子/捡一个瓶子”和Tab导航。原图首Tab“海洋”改为“首页”。

2. 从上到下怎么布局

区域（从上到下）	布局与建议尺寸	开发约束
顶部栏	字标/问候左，筛选设置右，左右20	操作有独立44/48命中区
问候卡	约W-40宽，内边距16～20	数据缺失用真实空态，不写死在线人数
海洋舞台	伸缩占剩余高度，约280～420起点	装饰漂瓶位置以舞台归一化坐标设置
扔捡双动作	两列等宽，间隔12，高72～88起点	推荐扔瓶更突出，捡瓶清晰可点
底部导航	完整四项，导航内容与系统底部inset分开	当前首页，通知角标来自实时数据

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

3. 背景和素材怎么设置

背景使用本页独立生成的 PNG。海洋首页保留左侧裁切人物、中央落日、右侧海岸及右下现实玻璃瓶。三个可交互的小瓶子继续独立叠放，背景中的玻璃瓶仅作装饰。

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

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

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

可复用元素与逻辑尺寸	iOS / Android 同名资源	Web 源文件
`12_ocean_home/bottle_float_left`，80×116	`driftly_12_ocean_home_bottle_float_left`	3× PNG
`12_ocean_home/bottle_float_right`，65×94	`driftly_12_ocean_home_bottle_float_right`	3× PNG
`12_ocean_home/bottle_float_small`，56×89	`driftly_12_ocean_home_bottle_float_small`	3× PNG

三只瓶使用舞台相对坐标；背景已有瓶时减少重复叠放。它们不代表真实待领取对象。

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

4. iOS 具体做法

一级页用TabView或项目统一自定义Tab容器，二选一；海洋页内部不再放第二套tab。
ZStack背景、VStack前景，舞台GeometryReader只控制装饰瓶位置；按钮在正常布局中占位。
漂浮动画只作用于装饰，减少动态效果时停止；点击扔/捡先检查当前业务能力并进入13/15。

5. Android 具体做法

Scaffold或自有壳统一承接NavigationBar，Box画舞台，Column按剩余空间分配海面。
三个装饰瓶用ContentScale.Fit和相对舞台位置，点击入口始终是实际Button，至少48dp。
首页状态由ViewModel提供，刷新额度/功能开关和未读数；错误只影响对应卡片，不闪掉整页底栏。

6. Web 具体做法

采用受约束的窗口舞台+底部导航，桌面改侧栏和中央海景；主按钮为真实button/路由链接。
装饰瓶absolute定位仅限舞台，pointer-events:none；入口按钮仍处在flex/grid文档布局。
返回本页保留适当展示状态但重新检查额度，页面隐藏时暂停动画和无用刷新。

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

扔瓶13，捡瓶15，消息18，我的23，广场22仅开放时可达。P0未开放广场的导航方案保留待批准边界。
游客不被强制送回登录；仅会话无效或真实权限问题触发相应恢复/提示。
无候选、额度耗尽、功能暂停、离线分别说明，不显示虚构海况或将加载失败当零额度。

8. 本页验收重点

小屏时双按钮和Tab始终不压进手势区，插画可收缩。
快速点扔/捡只进入一次，捡瓶请求不重复消耗。
无网仍能辨识页面和错误；切账号后不显示前一个人的统计。

还需覆盖通用验收中的窄屏、大字体、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。