diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index bdbc94a..6ffcd33 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -168,6 +168,7 @@ } } + // 收起菜单后的样式 .hideSidebar { .sidebar-container { width: 54px !important; @@ -180,29 +181,48 @@ .sub-menu-title-noDropdown { padding: 0 !important; position: relative; + height: 45px; + // 选中状态的菜单 + &.is-active { + background-color: var(--el-menu-active-color) !important; + color: #fff !important; + } .el-tooltip { padding: 0 !important; - - .svg-icon { - margin-left: 20px; - } } } - .el-sub-menu { + + & .el-sub-menu { overflow: hidden; + border-radius: 8px; + .el-sub-menu__title.el-tooltip__trigger { + border-radius: 8px; + height: 45px; + } + + // 选中状态的菜单 + &.is-active .el-sub-menu__title.el-tooltip__trigger { + background-color: var(--el-menu-active-color) !important; + } + & > .el-sub-menu__title { padding: 0 !important; - - .svg-icon { - margin-left: 20px; - } } } .el-menu--collapse { + .is-active .svg-icon { + fill: #fff; + } + .svg-icon { + display: flex; + margin: auto; + height: 100%; + // 这里设置width会跟随sidebar-container的transition 不符合预期 + } .el-sub-menu { & > .el-sub-menu__title { & > span { @@ -264,3 +284,13 @@ } } } +// 收起菜单后悬浮的菜单样式 +.el-popper.is-pure{ + border-radius: 8px; + .el-menu--popup{ + border-radius: 8px; + } + .el-menu-item{ + border-radius: 4px; + } +} diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index accc25c..b6ecbfa 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -11,6 +11,7 @@ :unique-opened="true" :active-text-color="theme" :collapse-transition="false" + :popper-offset="12" mode="vertical" >