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 @@