重构底部导航图标:照参考图重做形状与配色
- 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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user