From 5868a4eda4735c7feeff055f045a7c8c7c255ff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=B6=E8=AE=AD?=
 <zhangjiaxun-xf@bestpay.com.cn>
Date: Tue, 20 Oct 2026 18:08:55 +0800
Subject: [PATCH] =?UTF-8?q?style(main):=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E6=B5=85=E7=81=B0=E8=93=9D=E5=BA=95=EF=BC=8C=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=87=8D=E5=81=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧边栏 #fff → #f0f3fa（比内容区深半档形成层次），Menu light 白底改透明
- 头像：主色渐变圆环+白色首字（替代旧蓝底），白色描边+主色光晕，
  悬浮放大 1.06x；姓名/箭头字重与色温微调，箭头悬浮旋转
- 整个用户区悬浮时浅靛蓝胶囊底色
---
 .../main/components/side-menu/side-menu.less  |  6 ++++
 src/components/main/components/user/user.less | 36 +++++++++++++++++--
 src/components/main/components/user/user.vue  | 16 ++++++---
 src/components/main/main.less                 |  6 ++--
 4 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/components/main/components/side-menu/side-menu.less b/src/components/main/components/side-menu/side-menu.less
index 4716d82..4edd196 100644
--- a/src/components/main/components/side-menu/side-menu.less
+++ b/src/components/main/components/side-menu/side-menu.less
@@ -1,5 +1,11 @@
 .side-menu-wrapper{
   user-select: none;
+
+  // light 菜单默认白底，改为侧边栏浅灰蓝，保持整体层次
+  .ivu-menu-light{
+    background: transparent;
+  }
+
   .menu-collapsed{
     padding-top: 10px;
 
diff --git a/src/components/main/components/user/user.less b/src/components/main/components/user/user.less
index 0974462..6d9064c 100644
--- a/src/components/main/components/user/user.less
+++ b/src/components/main/components/user/user.less
@@ -2,8 +2,40 @@
   &-avator-dropdown{
     cursor: pointer;
     display: inline-block;
-    // height: 64px;
     vertical-align: middle;
-    // line-height: 64px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    transition: background .18s;
+    &:hover{
+      background: rgba(79, 110, 247, .08);
+    }
+    // 头像：白色描边 + 主色光晕，悬浮轻微放大
+    .user-avatar{
+      width: 34px;
+      height: 34px;
+      font-size: 16px;
+      vertical-align: middle;
+      box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(79, 110, 247, .25);
+      transition: transform .15s;
+    }
+    &:hover .user-avatar{
+      transform: scale(1.06);
+    }
+    // 姓名与下拉箭头
+    .user-nick{
+      font-size: 14px;
+      font-weight: 600;
+      color: #3d4a66;
+      margin: 0 4px 0 8px;
+      vertical-align: middle;
+    }
+    .user-arrow{
+      vertical-align: middle;
+      color: #8090b0;
+      transition: transform .18s;
+    }
+    &:hover .user-arrow{
+      transform: rotate(180deg);
+    }
   }
 }
diff --git a/src/components/main/components/user/user.vue b/src/components/main/components/user/user.vue
index 7a4dbab..cc508e4 100644
--- a/src/components/main/components/user/user.vue
+++ b/src/components/main/components/user/user.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="user-avator-dropdown">
     <Dropdown @on-click="handleClick">
-      <span style="font-size: 15px;font-weight: bold"> {{ nickname }} </span>
-      <Avatar :key="userAvator" :src="userAvator" style="background-color: #2d8cf0; vertical-align: middle">{{ avatarText }}</Avatar>
-      <Icon :size="18" type="md-arrow-dropdown"></Icon>
+      <Avatar :key="userAvator" :src="userAvator || undefined" class="user-avatar" :style="avatarStyle">{{ avatarText }}</Avatar>
+      <span class="user-nick">{{ nickname }}</span>
+      <Icon :size="18" class="user-arrow" type="md-arrow-dropdown"></Icon>
       <DropdownMenu slot="list">
         <DropdownItem name="personal-center">个人中心</DropdownItem>
         <DropdownItem name="logout" style="color: #ed4014" divided>退出登录</DropdownItem>
@@ -31,6 +31,15 @@ export default {
     avatarText () {
       const name = (this.nickname || '').trim()
       return name ? name.charAt(0) : 'U'
+    },
+    // 无头像图片时用主色渐变圆环 + 白色首字；有图片时直接显示
+    avatarStyle () {
+      if (this.userAvator) return {}
+      return {
+        background: 'linear-gradient(135deg, #4f6ef7, #7c5cf0)',
+        color: '#fff',
+        fontWeight: 600
+      }
     }
   },
   methods: {
@@ -54,7 +63,6 @@ export default {
             this.$router.push({
               name: 'login'
             })
-
           })
           break
       }
diff --git a/src/components/main/main.less b/src/components/main/main.less
index c1477d1..1b6acfd 100644
--- a/src/components/main/main.less
+++ b/src/components/main/main.less
@@ -36,9 +36,9 @@
     background: #fff;
   }
   .left-sider{
-    // 浅色侧边栏：与内容区统一，仅以右边框区分
-    background: #fff;
-    box-shadow: 1px 0 0 #e8ecf4;
+    // 浅灰蓝侧边栏：比内容区深半档，形成层次但不沉重
+    background: #f0f3fa;
+    box-shadow: 1px 0 0 #e2e8f5;
     .ivu-layout-sider-children{
       overflow-y: scroll;
       margin-right: -18px;