Blizzard
95471d0549
- 没设头图时不再留一块空橙色 banner（和整页暖橘背景撞色的怪感消除） - 身份行改左对齐：头像 + 昵称/签名并排；社交数(帖子/关注/粉丝)缩成 一小行内联；养宠数据保留高亮带。头图设了才显示 - 主题色/头图/签名/展示开关都照常生效 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
66 lines
2.6 KiB
Plaintext
66 lines
2.6 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-img{width:100%;height:200rpx;display:block}
|
|
|
|
.pf-body{padding:var(--sp-5)}
|
|
|
|
/* 身份行：头像 + 昵称/签名 左对齐 */
|
|
.pf-top{display:flex;align-items:center;gap:var(--sp-4)}
|
|
.pf-av{
|
|
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);
|
|
}
|
|
.pf-av-img{width:100%;height:100%;display:block}
|
|
.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:8rpx;
|
|
line-height:1.5;word-break:break-all;
|
|
}
|
|
|
|
/* 社交数：小一行，数字+标签内联，左对齐 */
|
|
.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-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-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-top: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}
|
|
|
|
.pf-follow{margin-top:var(--sp-4)}
|