Blizzard
6d49d28e1a
## 1. tabBar 高亮不跟着切（进「我的」还亮在「首页」） Phase A 我把高亮改成 custom-tab-bar 自己在 pageLifetimes.show 里按路由算， 想省掉五个页面的硬编码。实测不行：自定义 tabBar 不在页面节点树里， pageLifetimes 拿不到可靠时机，selected 一直停在默认的 0。 回到官方那套「页面 onShow 推一把」，但索引仍然由 tabBar 按当前路由自己算 （utils/tabbar.js → syncSelected），页面这边不写死 0/1/2/3/4。 调 tab 顺序还是只改一个 LIST，五个页面一行都不用动——原来想要的收益保住了， 只是多了五行 syncTabBar(this)。 ## 2. 头像被头图盖住，只露出下半个 .pf-bg 带了 position:relative，定位元素会盖过静态的兄弟节点，DOM 顺序在后 也没用。给 .pf-av 加 position:relative + z-index，同时把 .pf-bg 上那个没人 用的 position 去掉。头图高度 220 → 180rpx，纯渐变时不至于占掉半屏。 ## 3.「我的」页四个入口整个散架，图标文字箭头各占一行 .profile-list / .profile-row / .pr-ic / .pr-label / .pr-val 全在 settings.wxss 里——Phase A 从 profile 拆页时留在了设置页，mine 用同一批 class 但样式跨不了页，于是完全裸奔。提到 app.wxss。 这是这个项目第二次踩「页面级 wxss 跨页用」了（上次是 .post-card 在用户 主页裸奔）。两个页面共用的 class 就不该留在任一页的 wxss 里。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
62 lines
2.7 KiB
Plaintext
62 lines
2.7 KiB
Plaintext
/* 主题只在这里定义两个变量，下面所有着色都走变量。
|
|
后端存的是 theme key 不是色值，就是为了这套配色能随时在前端改。 */
|
|
.pf{--pf-a:#F5A947;--pf-b:#FFE6BA;--pf-ink:#8A5A18}
|
|
.th-warm{--pf-a:#F5A947;--pf-b:#FFE6BA;--pf-ink:#8A5A18}
|
|
.th-mint{--pf-a:#3FB98A;--pf-b:#D7F3E7;--pf-ink:#1F6B4E}
|
|
.th-sky{--pf-a:#4A9BE0;--pf-b:#D8ECFB;--pf-ink:#245F94}
|
|
.th-violet{--pf-a:#9B7BE0;--pf-b:#E8DFFA;--pf-ink:#5B3F9B}
|
|
.th-ink{--pf-a:#5A5550;--pf-b:#E4DED7;--pf-ink:#2D2925}
|
|
|
|
.pf{
|
|
background:#fff;border-radius:var(--r-lg);overflow:hidden;
|
|
box-shadow:var(--sd-1);margin-bottom:var(--sp-5);
|
|
}
|
|
.pf-bg{height:180rpx;background:linear-gradient(135deg,var(--pf-a),var(--pf-b))}
|
|
.pf-bg-img{width:100%;height:100%;display:block}
|
|
|
|
.pf-body{padding:0 var(--sp-5) var(--sp-5);text-align:center}
|
|
/* 头像压在头图上，负 margin 提上去一半 */
|
|
.pf-av{
|
|
/* 必须定位：头像要压在头图上面，靠 DOM 顺序不够——只要头图是定位元素就会反盖过来 */
|
|
position:relative;z-index:1;
|
|
width:144rpx;height:144rpx;margin:-72rpx auto var(--sp-3);
|
|
border-radius:50%;background:var(--pf-b);color:var(--pf-ink);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:var(--fs-xl);font-weight:var(--fw-b);
|
|
border:6rpx solid #fff;overflow:hidden;box-shadow:var(--sd-1);
|
|
}
|
|
.pf-av-img{width:100%;height:100%;display:block}
|
|
.pf-name{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)}
|
|
.pf-bio{
|
|
font-size:var(--fs-sm);color:var(--muted);margin-top:6rpx;
|
|
line-height:1.5;word-break:break-all;
|
|
}
|
|
|
|
.pf-stats{display:flex;margin:var(--sp-4) 0}
|
|
.pf-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4rpx}
|
|
.pf-n{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)}
|
|
.pf-l{font-size:var(--fs-cap);color:var(--muted)}
|
|
|
|
.pf-keep{
|
|
display:flex;background:var(--pf-b);border-radius:var(--r-md);
|
|
padding:var(--sp-3) 0;margin-bottom:var(--sp-4);
|
|
}
|
|
.pf-keep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rpx}
|
|
.pf-kn{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--pf-ink)}
|
|
.pf-kl{font-size:var(--fs-cap);color:var(--pf-ink);opacity:.75}
|
|
|
|
.pf-wall{white-space:nowrap;margin-bottom:var(--sp-4)}
|
|
.pf-pet{
|
|
display:inline-block;width:150rpx;vertical-align:top;
|
|
margin-right:var(--sp-3);white-space:normal;
|
|
}
|
|
.pf-pet:last-child{margin-right:0}
|
|
.pf-pet-av{
|
|
width:112rpx;height:112rpx;margin:0 auto 8rpx;border-radius:var(--r-md);
|
|
background:var(--surface-2);display:flex;align-items:center;justify-content:center;
|
|
font-size:52rpx;overflow:hidden;
|
|
}
|
|
.pf-pet-img{width:100%;height:100%;display:block}
|
|
.pf-pet-n{font-size:var(--fs-cap);font-weight:var(--fw-b);color:var(--text);text-align:center}
|
|
.pf-pet-s{font-size:var(--fs-cap);color:var(--muted);text-align:center}
|