- 侧边栏 #fff → #f0f3fa(比内容区深半档形成层次),Menu light 白底改透明 - 头像:主色渐变圆环+白色首字(替代旧蓝底),白色描边+主色光晕, 悬浮放大 1.06x;姓名/箭头字重与色温微调,箭头悬浮旋转 - 整个用户区悬浮时浅靛蓝胶囊底色
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
.side-menu-wrapper{
|
||||
user-select: none;
|
||||
|
||||
// light 菜单默认白底,改为侧边栏浅灰蓝,保持整体层次
|
||||
.ivu-menu-light{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.menu-collapsed{
|
||||
padding-top: 10px;
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user