重构底部导航图标:照参考图重做形状与配色

- 5 个 Tab 图标形状改为参考图语言:房子(首页)/爱心(找对象)/对话气泡(消息)/日历加号(活动)/人物(我的)
- 配色改为参考图方案:默认态藏青蓝 #47528C、选中态玫红 #F4005A(与导航栏品牌色同系)
- 同步重生成 1x/2x/3x 共 30 张透明 RGBA PNG(Edge CDP 栅格化)
- app.json tabBar.color/selectedColor 对齐新配色
- 守卫 tabbar-icons.mjs 增加两态颜色与 app.json 一致性断言
- 静态预览复刻 tabBar 配色同步更新;DESIGN.md 同步
This commit is contained in:
WorkBuddy
2026-09-23 16:30:32 +08:00
parent 45e84722e1
commit 1ad9793ea2
45 changed files with 66 additions and 59 deletions
+3 -3
View File
@@ -804,15 +804,15 @@ function main() {
.phone-screen { width:100%; height:760px; overflow-y:auto; border-radius:26px; background:#F4F5FA; }
.wx-page { min-height:100%; }
/* 原生 tabBar 复刻。颜色/边框取 app.json 的 tabBar 字段:
color #999999 / selectedColor #E96B6B / backgroundColor #FFFFFF / borderStyle black。
color #47528C / selectedColor #F4005A / backgroundColor #FFFFFF / borderStyle black。
图标按微信客户端实际渲染尺寸(约 26px)呈现,与 81px 源图尺寸不同;文字 10px 同理。 */
.mini-tabbar { position:sticky; bottom:0; z-index:20; display:flex; align-items:stretch;
background:#FFFFFF; border-top:1px solid rgba(0,0,0,.2); padding-bottom:20px; }
.mini-tabbar__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:2px; padding:6px 0 0; }
.mini-tabbar__icon { width:26px; height:26px; display:block; }
.mini-tabbar__label { font-size:10px; line-height:14px; color:#999999; }
.mini-tabbar__item.is-active .mini-tabbar__label { color:#E96B6B; }
.mini-tabbar__label { font-size:10px; line-height:14px; color:#47528C; }
.mini-tabbar__item.is-active .mini-tabbar__label { color:#F4005A; }
/* ====== 以下为页面 WXSS 转换结果(rpx 已按 375 宽换算) ====== */
${cssAll}
</style>