diff --git a/src/pages/mine/index.module.scss b/src/pages/mine/index.module.scss index d13aca9..d2d1322 100644 --- a/src/pages/mine/index.module.scss +++ b/src/pages/mine/index.module.scss @@ -4,40 +4,45 @@ } .header { - padding: 80px 32px; - background: $color-bg-white; + padding: 120px 32px 80px; + background: $color-primary-grad; display: flex; align-items: center; } +// 白底绿字头像:与渐变头形成对比 .avatar { - width: 120px; - height: 120px; + width: 132px; + height: 132px; border-radius: $radius-circle; - background: $color-primary-grad; - color: #ffffff; - font-size: 48px; - font-weight: 600; + background: $color-bg-white; display: flex; align-items: center; justify-content: center; margin-right: 32px; } +.avatarText { + font-size: 52px; + font-weight: 600; + color: $color-primary; +} + .headerInfo { display: flex; flex-direction: column; } .name { font-size: 36px; font-weight: 600; - color: $color-text; + color: #ffffff; } .uid { margin-top: 8px; font-size: 24px; - color: $color-text-secondary; + color: rgba(255, 255, 255, 0.8); } +// 菜单卡上浮叠在渐变区上 .menuCard { - margin: 20px 24px 0; + margin: -48px 24px 0; } diff --git a/src/pages/mine/index.tsx b/src/pages/mine/index.tsx index 4a2a547..564a2bc 100644 --- a/src/pages/mine/index.tsx +++ b/src/pages/mine/index.tsx @@ -30,7 +30,9 @@ export default function Mine() { - {user?.name?.[0] ?? '?'} + + {user?.name?.[0] ?? '?'} + {user?.name ?? '加载中...'} {auth.userId ? `ID: ${auth.userId}` : ''}