github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-07-18 17:22:29 +00:00
Code Issues Projects Releases Wiki Activity

perf: 优化菜单左侧视图对接

Browse Source
This commit is contained in:
ibuler 2022-11-30 15:25:08 +08:00
parent 4281e02f95
commit d886a5e607
2 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/layout/components/NavLeft/index.vue
View File

@ -12,8 +12,10 @@
/> />
<span <span
v-show="!isCollapse" v-show="!isCollapse"
style="margin-left: 3px;" style="margin-left: 10px;"
>{{ isRouteMeta.title || '' }}</span> >
{{ isRouteMeta.title || '' }}
</span>
<span v-show="!isCollapse" class="switch-view"> <span v-show="!isCollapse" class="switch-view">
<el-popover <el-popover
placement="right-start" placement="right-start"
@ -123,6 +125,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/styles/variables.scss"; @import "~@/styles/variables.scss";
.nav-header { .nav-header {
overflow: hidden; overflow: hidden;
background-color: var(--color-primary); background-color: var(--color-primary);
@ -143,15 +146,18 @@ export default {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background-color: var(--menu-bg); background-color: var(--menu-bg);
.switch-view { .switch-view {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 1; z-index: 1;
&:hover { &:hover {
color: var(--color-primary); color: var(--color-primary);
} }
.icon { .icon {
&:hover { &:hover {
color: var(--color-primary); color: var(--color-primary);
@ -194,20 +200,25 @@ export default {
background-color: $subMenuHover; background-color: $subMenuHover;
} }
} }
.active-mobile { .active-mobile {
display: none; display: none;
&>>> .organization {
& > > > .organization {
padding-left: 8px; padding-left: 8px;
background: transparent; background: transparent;
color: #fff; color: #fff;
} }
&>>> .menu-main {
& > > > .menu-main {
margin-left: -10px; margin-left: -10px;
} }
&>>> .title-label {
& > > > .title-label {
color: white !important; color: white !important;
} }
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.active-mobile { .active-mobile {
display: block; display: block;

23
src/styles/menu.scss
View File

@ -1,8 +1,10 @@
@import "./variables"; @import "./variables";
.left-menu.el-menu { .left-menu.el-menu {
.el-menu--inline { .el-menu--inline {
background-color: $subMenuBg; background-color: $subMenuBg;
} }
.el-menu-item, .el-submenu { .el-menu-item, .el-submenu {
font-weight: 600; font-weight: 600;
} }
@ -13,9 +15,11 @@
.el-submenu__title { .el-submenu__title {
color: $menuText; color: $menuText;
&:hover { &:hover {
color: $menuActiveText; color: $menuActiveText;
} }
i { i {
color: $menuActiveText; color: $menuActiveText;
} }
@ -30,10 +34,10 @@
&.submenu-title-noDropdown { &.submenu-title-noDropdown {
list-style: none; list-style: none;
} }
&.is-active{
&.is-active {
color: $subMenuActiveText; color: $subMenuActiveText;
background-color: $subMenuHover!important; background-color: $subMenuHover !important;
font-weight: 600;
list-style-type: disc; list-style-type: disc;
} }
@ -42,14 +46,15 @@
color: $subMenuActiveText; color: $subMenuActiveText;
list-style-type: disc; list-style-type: disc;
} }
i { i {
color: $menuText; color: $menuText;
} }
} }
i.fa { i.fa {
margin-right: 10px; margin-right: 10px;
width: 13px; width: 13px;
} }
.is-active i.fa { .is-active i.fa {
@ -98,14 +103,16 @@
} }
.el-submenu-sidebar .el-menu-item { .el-submenu-sidebar .el-menu-item {
background-color: $subMenuBg ; background-color: $subMenuBg;
} }
.el-submenu.is-opened { .el-submenu.is-opened {
background-color: $subMenuBg; background-color: $subMenuBg;
.el-submenu__title { .el-submenu__title {
background-color: $subMenuBg!important; background-color: $subMenuBg !important;
} }
& .nest-menu { & .nest-menu {
background-color: $subMenuBg; background-color: $subMenuBg;
} }