perf: 调整菜单样式

This commit is contained in:
“huailei000” 2022-11-22 16:09:36 +08:00 committed by huailei
parent 7e7bcae8e7
commit a28dd9cf6f
5 changed files with 16 additions and 17 deletions

View File

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

View File

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

View File

@ -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']
} }
} }

View File

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

View File

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