style(fe): 我的顶部卡片重排——左对齐紧凑布局

- 没设头图时不再留一块空橙色 banner(和整页暖橘背景撞色的怪感消除)
- 身份行改左对齐:头像 + 昵称/签名并排;社交数(帖子/关注/粉丝)缩成
  一小行内联;养宠数据保留高亮带。头图设了才显示
- 主题色/头图/签名/展示开关都照常生效

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-31 15:28:23 +08:00
parent 1610fd6814
commit 95471d0549
2 changed files with 41 additions and 39 deletions
+21 -17
View File
@@ -11,41 +11,43 @@
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-bg-img{width:100%;height:200rpx;display:block}
.pf-body{padding:0 var(--sp-5) var(--sp-5);text-align:center}
/* 头像压在头图上,负 margin 提上去一半 */
.pf-body{padding:var(--sp-5)}
/* 身份行:头像 + 昵称/签名 左对齐 */
.pf-top{display:flex;align-items:center;gap:var(--sp-4)}
.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);
flex:none;width:120rpx;height:120rpx;border-radius:50%;
background:var(--pf-b);color:var(--pf-ink);overflow:hidden;
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-id{flex:1;min-width:0}
.pf-name{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--text)}
.pf-bio{
font-size:var(--fs-sm);color:var(--muted);margin-top:6rpx;
font-size:var(--fs-sm);color:var(--muted);margin-top:8rpx;
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-social{display:flex;gap:var(--sp-6);margin-top:var(--sp-4)}
.pf-stat{display:flex;align-items:baseline;gap:6rpx}
.pf-n{font-size:var(--fs-md);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);
padding:var(--sp-4) 0;margin-top: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-kn{font-size:var(--fs-lg);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-wall{white-space:nowrap;margin-top:var(--sp-4)}
.pf-pet{
display:inline-block;width:150rpx;vertical-align:top;
margin-right:var(--sp-3);white-space:normal;
@@ -59,3 +61,5 @@
.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}
.pf-follow{margin-top:var(--sp-4)}