diff --git a/pets-fe/components/profile-head/index.wxml b/pets-fe/components/profile-head/index.wxml index 0932efe..8028bc3 100644 --- a/pets-fe/components/profile-head/index.wxml +++ b/pets-fe/components/profile-head/index.wxml @@ -1,37 +1,35 @@ - - - - + + - - - {{initial}} + + + + + {{initial}} + + + {{card.nickname || '毛孩子家长'}}AI + {{card.bio || '这个人很懒,还没写签名'}} + - {{card.nickname || '毛孩子家长'}}AI - {{card.bio || '这个人很懒,还没写签名'}} - + + {{card.post_count || 0}}帖子 - - {{card.following_count || 0}}关注 - - - {{card.follower_count || 0}}粉丝 - + {{card.following_count || 0}}关注 + {{card.follower_count || 0}}粉丝 - + {{card.stats.days || 0}}养宠天数 {{card.stats.records || 0}}累计记录 {{card.stats.streak || 0}}连续打卡 - + @@ -44,8 +42,8 @@ - - + + {{card.followed ? '已关注' : '关注 TA'}} diff --git a/pets-fe/components/profile-head/index.wxss b/pets-fe/components/profile-head/index.wxss index 8c268d6..33e24ff 100644 --- a/pets-fe/components/profile-head/index.wxss +++ b/pets-fe/components/profile-head/index.wxss @@ -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)}