This commit is contained in:
@@ -3,35 +3,30 @@
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 18px;
|
||||
transition: background .18s;
|
||||
&:hover{
|
||||
background: rgba(79, 110, 247, .08);
|
||||
}
|
||||
// 头像:白色描边 + 主色光晕,悬浮轻微放大
|
||||
// 头像:小尺寸、无描边无光晕,安静融入顶栏
|
||||
.user-avatar{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
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;
|
||||
font-weight: 400;
|
||||
color: #515a6e;
|
||||
margin: 0 2px 0 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-arrow{
|
||||
vertical-align: middle;
|
||||
color: #8090b0;
|
||||
color: #a3b0c9;
|
||||
transition: transform .18s;
|
||||
}
|
||||
&:hover .user-arrow{
|
||||
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
return {
|
||||
background: 'linear-gradient(135deg, #4f6ef7, #7c5cf0)',
|
||||
color: '#fff',
|
||||
fontWeight: 600
|
||||
fontWeight: 500
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
.main{
|
||||
.logo-con{
|
||||
height: 64px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
img{
|
||||
height: 44px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
// flex 居中:收起态只剩徽标也自动居中
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
// 渐变徽标:与登录页主色同源,无底色块,直接落在侧栏上
|
||||
.logo-badge{
|
||||
flex: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #4f6ef7, #7c5cf0);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(79, 110, 247, .3);
|
||||
}
|
||||
// 文字:深墨色,轻字重间隔,与侧栏浅底协调
|
||||
.logo-name{
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .5px;
|
||||
color: #1f2d50;
|
||||
}
|
||||
}
|
||||
.header-con{
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<Layout style="height: 100%" class="main">
|
||||
<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider sider-light" :style="{overflow: 'hidden'}">
|
||||
<side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" theme="light" @on-select="turnToPage" :menu-list="menuList">
|
||||
<!-- 需要放在菜单上面的内容,如Logo,写在side-menu标签内部,如下 -->
|
||||
<div class="logo-con" style="text-align: center">
|
||||
<img v-show="!collapsed" :src="maxLogo" key="max-logo" />
|
||||
<img v-show="collapsed" :src="minLogo" key="min-logo" />
|
||||
<!-- 纯 CSS logo:渐变徽标 + 文字,不用图片 -->
|
||||
<div class="logo-con">
|
||||
<div class="logo-badge">F</div>
|
||||
<span v-show="!collapsed" class="logo-name">Freedom</span>
|
||||
</div>
|
||||
</side-menu>
|
||||
</Sider>
|
||||
@@ -41,8 +41,6 @@ import Fullscreen from './components/fullscreen'
|
||||
import ErrorStore from './components/error-store'
|
||||
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
||||
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
|
||||
import minLogo from '@/assets/images/logo-min.svg'
|
||||
import maxLogo from '@/assets/images/logo.svg'
|
||||
import './main.less'
|
||||
export default {
|
||||
name: 'Main',
|
||||
@@ -57,8 +55,6 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false,
|
||||
minLogo,
|
||||
maxLogo,
|
||||
isFullscreen: false
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user