用的是 app.wxss 的真 token 值和真图标资源(Tabler mask,含本次新增的 15 个),不是另画一套。
rpx 按 2:1 折成 px,所以这里的尺寸就是小程序里的尺寸。
要定的只有第 ① 项:门面色块和浅底内容的接缝怎么处理。
关键约束(跟规划里写的不一样,实际读代码才发现):nav-bar 是 position:fixed,
背景是半透明奶白 + backdrop-filter,底边还有一层 mask 淡出——当初就是为了别和页面渐变留一道硬接缝。
所以品牌色块要盖到最顶部,导航栏必须参与:得给 nav-bar 加一个 tone 属性,
在色块上时不铺奶白、文字转深棕。A / B 需要这个改动,C 不需要。
A · 色块只到宠物切换条
门面卡压在接缝上,一半在色块里。
B · 色块整个包住门面卡
最接近竞品。白卡完整浮在黄底上。
C · 色块渐隐,没有硬边界
不动 nav-bar。改动最小,也最不像竞品。
四组各一个色系,全部走现成的 --primary / green / purple / blue 的 soft/ink 二件套,没有新色值。
竞品看着「彩色」的真正原因是浅色圆底 + 分组配色,不是插画;图标仍是线性 Tabler mask,零美术成本。
新:24 种 4 组
一屏看到日常+健康,滚一下到洗护/清洁。
现状:9 种一锅
全是低频医疗和记账。今天打开大概率没什么可记。
从本地那份 tabler-icons-3.46.0 里挑的真源,不是我凭记忆画路径。
已解码抽检确认路径非空——Tabler 是 stroke 描边,这套方案唯一的坑就是空字形,
转字体必踩,走 mask 不会。
绘制复用现有海报那套 canvas 2d(bottom-sheet.js 270-380 行),换的是内容不是功能。
唯一新增后端工作:小程序码要调微信 wxacode.getUnlimited,AppID/Secret 配置里已有、接口还没写。
身份 ID 用「品种码 + 生日 + 序号」本地拼,不入库。
身份卡
价值全在「可炫耀、可分享」,不在信息量。