feat(mine): 我的页渐变头部与菜单卡片化

src/pages/mine/index.module.scss

@@ -4,40 +4,45 @@
 }
 
 .header {
-  padding: 80px 32px;
+  padding: 120px 32px 80px;
-  background: $color-bg-white;
+  background: $color-primary-grad;
   display: flex;
   align-items: center;
 }
 
+// 白底绿字头像：与渐变头形成对比
 .avatar {
-  width: 120px;
+  width: 132px;
-  height: 120px;
+  height: 132px;
   border-radius: $radius-circle;
-  background: $color-primary-grad;
+  background: $color-bg-white;
-  color: #ffffff;
-  font-size: 48px;
-  font-weight: 600;
   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;
 }

src/pages/mine/index.tsx

@@ -30,7 +30,9 @@ export default function Mine() {
     <View className={styles.page}>
       <Navbar title="个人中心" autoBack={false} />
       <View className={styles.header}>
-        <Text className={styles.avatar}>{user?.name?.[0] ?? '?'}</Text>
+        <View className={styles.avatar}>
+          <Text className={styles.avatarText}>{user?.name?.[0] ?? '?'}</Text>
+        </View>
         <View className={styles.headerInfo}>
           <Text className={styles.name}>{user?.name ?? '加载中...'}</Text>
           <Text className={styles.uid}>{auth.userId ? `ID: ${auth.userId}` : ''}</Text>