mirror of
https://github.com/jumpserver/lina.git
synced 2025-08-19 15:28:25 +00:00
perf: 调整菜单样式
This commit is contained in:
parent
7e7bcae8e7
commit
a28dd9cf6f
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="padding: 0 15px;" @click="toggleClick">
|
<div style="padding: 0 20px;" @click="toggleClick">
|
||||||
<svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
|
<svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -178,6 +178,9 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
|
margin-top: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1px solid rgba(31, 35, 41, 0.15);
|
||||||
background-color: $subMenuBg;
|
background-color: $subMenuBg;
|
||||||
|
|
||||||
.toggle-bar {
|
.toggle-bar {
|
||||||
@ -195,12 +198,6 @@ export default {
|
|||||||
.toggle-bar:hover {
|
.toggle-bar:hover {
|
||||||
background-color: $subMenuHover;
|
background-color: $subMenuHover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger-container {
|
|
||||||
left: 2px;
|
|
||||||
top: 10px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.active-mobile {
|
.active-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -7,7 +7,7 @@ export default {
|
|||||||
component: Layout,
|
component: Layout,
|
||||||
meta: {
|
meta: {
|
||||||
title: i18n.t('route.UserProfile'),
|
title: i18n.t('route.UserProfile'),
|
||||||
icon: 'gear',
|
icon: 'personal',
|
||||||
view: 'profile',
|
view: 'profile',
|
||||||
type: 'view',
|
type: 'view',
|
||||||
showNavSwitcher: false,
|
showNavSwitcher: false,
|
||||||
@ -21,7 +21,7 @@ export default {
|
|||||||
component: () => import('@/views/profile/ProfileInfo'),
|
component: () => import('@/views/profile/ProfileInfo'),
|
||||||
meta: {
|
meta: {
|
||||||
title: i18n.t('users.AccountInformation'),
|
title: i18n.t('users.AccountInformation'),
|
||||||
icon: 'adjust',
|
icon: 'attestation',
|
||||||
permissions: []
|
permissions: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -31,7 +31,7 @@ export default {
|
|||||||
component: () => import('@/views/profile/ProfileUpdate/index'),
|
component: () => import('@/views/profile/ProfileUpdate/index'),
|
||||||
meta: {
|
meta: {
|
||||||
title: i18n.t('users.Profile'),
|
title: i18n.t('users.Profile'),
|
||||||
icon: 'user-circle',
|
icon: 'personal',
|
||||||
permissions: []
|
permissions: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -72,7 +72,7 @@ export default {
|
|||||||
name: 'ConnectionToken',
|
name: 'ConnectionToken',
|
||||||
meta: {
|
meta: {
|
||||||
title: i18n.t('common.nav.ConnectionToken'),
|
title: i18n.t('common.nav.ConnectionToken'),
|
||||||
icon: 'map-pin',
|
icon: 'token',
|
||||||
permissions: ['authentication.view_connectiontoken']
|
permissions: ['authentication.view_connectiontoken']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -24,10 +24,11 @@
|
|||||||
color: $menuText;
|
color: $menuText;
|
||||||
&.is-active{
|
&.is-active{
|
||||||
color: $subMenuActiveText;
|
color: $subMenuActiveText;
|
||||||
|
background-color: $subMenuHover!important;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $subMenuHover;
|
background-color: $subMenuHover;
|
||||||
color: $--color-primary;
|
color: $subMenuActiveText;
|
||||||
}
|
}
|
||||||
i {
|
i {
|
||||||
color: $menuText;
|
color: $menuText;
|
||||||
@ -44,8 +45,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-submenu .el-menu-item {
|
.el-submenu .el-menu-item {
|
||||||
height: 48px;
|
height: 38px;
|
||||||
line-height: 48px;
|
line-height: 38px;
|
||||||
padding: 0 52px;
|
padding: 0 52px;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
}
|
}
|
||||||
@ -65,7 +66,7 @@
|
|||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item:hover, .el-menu-item:focus {
|
.el-menu-item:hover, .el-menu-item:focus {
|
||||||
@ -81,7 +82,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
li.is-active {
|
li.is-active {
|
||||||
border-left: 4px solid $menuActiveLeft;
|
// border-left: 4px solid $menuActiveLeft;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-submenu-sidebar .el-menu-item {
|
.el-submenu-sidebar .el-menu-item {
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
// reset element-ui css
|
// reset element-ui css
|
||||||
.horizontal-collapse-transition {
|
.horizontal-collapse-transition {
|
||||||
@ -79,7 +80,7 @@
|
|||||||
& .nest-menu .el-submenu-sidebar>.el-submenu__title,
|
& .nest-menu .el-submenu-sidebar>.el-submenu__title,
|
||||||
& .el-submenu-sidebar .el-menu-item {
|
& .el-submenu-sidebar .el-menu-item {
|
||||||
min-width: $sideBarWidth !important;
|
min-width: $sideBarWidth !important;
|
||||||
background-color: $subMenuBg !important;
|
background-color: $subMenuBg;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $subMenuHover !important;
|
background-color: $subMenuHover !important;
|
||||||
|
Loading…
Reference in New Issue
Block a user