feat ui设计稿

src/views/profile/cpns/ProfileUserCard.vue

@@ -50,63 +50,68 @@ function save(): void {
 </template>
 
 <style lang="less" scoped>
+// 设计 14：左列紫渐变用户卡（渐变实取 #5459E8 → #D2BDF3），内容居中
 .profile-user-card {
-  .flex(row, flex-start);
-  gap: @spacing-base;
-  padding: @spacing-lg @spacing-xl;
+  .flex(column, center);
+  gap: @spacing-xs; // 设计 14：头像与文字块间距约 4px
+  padding: @spacing-base @spacing-sm; // 设计：上 20 / 下 25 设计px ≈ 16
   border-radius: @radius-lg;
-  background: @white;
-  box-shadow: @shadow-base;
+  background: linear-gradient(170deg, @profile-user-from 0%, @profile-user-to 100%);
 
   &__avatar {
     .flex(row, center);
     flex-shrink: 0;
-    width: 64px;
-    height: 64px;
+    width: 42px; // 设计 54 × 0.77
+    height: 42px;
     border-radius: @radius-round;
-    background: linear-gradient(135deg, @primary-color, @primary-hover);
+    background: @profile-user-avatar;
     color: @white;
-    font-size: @font-size-xxl;
+    font-size: @font-size-lg;
     font-weight: 600;
   }
 
   &__info {
-    .flex(column, flex-start);
+    .flex(column, center);
     gap: @spacing-xs;
     min-width: 0;
+    width: 100%;
+    text-align: center;
   }
 
+  // 卡内为深色底：名称/号码一律白字（设计 14 实取 #FFFFFF）
   &__name {
-    width: 240px;
-    height: 34px;
-    padding: 0 @spacing-sm;
+    width: 100%;
+    height: 16px; // 设计 19 × 0.77
+    padding: 0 @spacing-xs;
     border: 1px solid transparent;
-    border-radius: @radius-base;
+    border-radius: @profile-radius;
     background: transparent;
-    font-size: @font-size-xl;
+    font-size: 11px;
     font-weight: 600;
-    color: @heading-color;
+    color: @white;
+    text-align: center;
     outline: none;
     transition: all 0.2s;
 
     &:hover {
-      border-color: @border-color;
+      border-color: fade(@white, 55%);
     }
 
     &:focus {
-      border-color: @primary-color;
-      background: @bg-color-light;
+      border-color: @white;
+      background: fade(@white, 12%);
     }
 
     &::placeholder {
-      font-size: @font-size-lg;
+      font-size: 11px;
       font-weight: 400;
-      color: @text-color-disabled;
+      color: fade(@white, 75%);
     }
   }
 
   &__phone {
-    font-size: @font-size-base;
+    font-size: 11px;
+    color: @white;
   }
 }
 </style>