feat ui设计稿bug修复

src/views/profile/index.vue

@@ -5,7 +5,8 @@ import { useProfileStore } from '@/stores/modules/profile'
 import ProfileSider from './cpns/ProfileSider.vue'
 import ProfileUserCard from './cpns/ProfileUserCard.vue'
 
-// 布局容器：顶部用户卡 + 左侧菜单 / 右侧子路由出口，数据只经 store
+// 布局容器：左侧用户卡 + 菜单（x155 起 245 宽），右侧内容卡（x400 起 1400 宽）
+// 数据只经 store
 const profileStore = useProfileStore()
 const { profile } = storeToRefs(profileStore)
 
@@ -20,7 +21,7 @@ onMounted(() => {
 
 <template>
   <div class="profile">
-    <div class="profile__container">
+    <div class="profile__container container">
       <div class="profile__body">
         <aside class="profile__aside">
           <ProfileUserCard :profile="profile" @save-nickname="onSaveNickname" />
@@ -35,40 +36,46 @@ onMounted(() => {
 </template>
 
 <style lang="less" scoped>
+// 设计稿（个人中心 1920×1568）锚点：
+//   面包屑 y23 h26 · 左列 x155 宽 245 · 右卡 x400 y98 1400×532 · 页脚 y1087
+//   内容区顶 98 = 顶栏 72 + 上留白 26
 .profile {
-  padding-bottom: @spacing-xxl;
-  background: @bg-color;
+  min-height: 737px;                      // 内容区 y98→835
+  background: @profile-page-bg;
 
   &__container {
-    width: @container-width;
-    max-width: calc(100% - @spacing-xl);
-    margin: 0 auto;
-    padding-top: @spacing-lg;
+    padding-top: 26px;                    // 顶栏 72 → 内容区 98
+    // 个人中心系独立基准（视觉核对定版 x155/1600），不随全站 70/1780 联动
+    padding-left: clamp(@spacing-base, calc((100% - @profile-content) / 2), @profile-gutter);
+    padding-right: clamp(@spacing-base, calc((100% - @profile-content) / 2), @profile-gutter);
   }
 
   &__body {
-    .flex(row, flex-start);
-    gap: @spacing-base;
-    align-items: flex-start;
+    .flex(row, flex-start, stretch);
+    width: 100%;
   }
 
-  // 左列（设计14）：紫渐变用户卡 + 菜单，直接坐在页面底色上，无外层白卡
+  // 左列 200：用户卡 + 菜单白卡，两卡间距 6
+  // （设计稿左列 245、右卡 1400，合计 1645 超出内容宽 1595，按比例收左列到 200 保右卡 1400）
   &__aside {
-    width: 114px; // 设计 148 × 0.77
-    flex-shrink: 0;
-    .flex(column, flex-start);
-    gap: @spacing-base;
+    .flex(column, flex-start, stretch);
+    gap: 6px;
+    flex: 0 0 200px;
+    width: 200px;
+    margin-right: 0;
   }
 
-  // 右侧内容面板（设计14/28）：整块白卡，内缩 16px 承载各页面
+  // 右内容卡 1400：白底 + 浅灰描边
   &__main {
-    flex: 1;
+    flex: 1 1 auto;
     min-width: 0;
-    min-height: 400px;
-    padding: @spacing-base;
-    border-radius: @radius-base;
+    min-height: 425px;
+    margin-left: 40px;                    // 左列 200 → 右卡起点 240（设计稿比例：160/245 ≈ 0.65）
+    padding: 24px 24px 0;                 // 卡内左缩进：卡 → 标题 +28
+    border: 1px solid @profile-card-border;
+    border-radius: @radius-lg;
     background: @white;
-    box-shadow: @shadow-base;
+    box-sizing: border-box;
   }
 }
 </style>