diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 5f09f017..eeb56142 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -4,17 +4,7 @@ min-height: 100%; transition: margin-left 0.28s; margin-left: 180px; - } - // 侧边栏 - .hideSidebar { - .sidebar-container { - width: 36px!important; - overflow: inherit; - } - .main-container { - margin-left: 36px; - } - } + } // 侧边栏 .sidebar-container { transition: width 0.28s; width: 180px!important; @@ -28,72 +18,78 @@ &::-webkit-scrollbar { display: none } - } - .sidebar-container>.el-menu { - width: 100%!important; - min-height: 100%; - } - .sidebar-container .svg-icon { - margin-right: 16px; - } - .hideSidebar .el-submenu>.el-submenu__title, - .hideSidebar .submenu-title-noDropdown { - padding-left: 10px!important; - } - .hideSidebar .submenu-title-noDropdown span, - .hideSidebar .el-submenu>.el-submenu__title>span { - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - display: inline-block; - } - .hideSidebar .nest-menu .el-submenu__title { - text-align: initial!important; - padding-left: 20px!important; - span { - height: auto; - width: auto; - visibility: visible; - display: inline; + a { + display: inline-block; + width: 100%; } - .el-submenu__icon-arrow { - display: block!important; + .svg-icon { + margin-right: 16px; + } + .el-menu { + border: none; } } - .hideSidebar .menu-wrapper>.el-menu-item, - .hideSidebar .submenu-title-noDropdown, - .hideSidebar .menu-wrapper>.el-submenu .el-submenu__title { - text-align: center; - } - .hideSidebar .el-menu-item .el-submenu__icon-arrow, - .hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow { - display: none; - } - .hideSidebar .submenu-title-noDropdown { - position: relative; - span { - transition: opacity .3s cubic-bezier(.55, 0, .1, 1); - opacity: 0; + .hideSidebar { + .sidebar-container { + width: 36px!important; + overflow: inherit; } - &:hover { + .main-container { + margin-left: 36px; + } + } + .hideSidebar { + .submenu-title-noDropdown { + padding-left: 10px!important; + position: relative; span { - display: block; - border-radius: 3px; - z-index: 1002; - width: 140px; - height: 56px; - visibility: visible; - position: absolute; - right: -145px; - text-align: left; - text-indent: 20px; - top: 0px; - background-color: #2B2C2D!important; - opacity: 1; + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + transition: opacity .3s cubic-bezier(.55, 0, .1, 1); + opacity: 0; + display: inline-block; + } + &:hover { + span { + display: block; + border-radius: 3px; + z-index: 1002; + width: 140px; + height: 56px; + visibility: visible; + position: absolute; + right: -145px; + text-align: left; + text-indent: 20px; + top: 0px; + background-color: #2B2C2D!important; + opacity: 1; + } + } + } + .el-submenu { + &>.el-submenu__title { + padding-left: 10px!important; + &>span { + display: none; + } + .el-submenu__icon-arrow { + display: none; + } + } + .nest-menu { + .el-submenu__icon-arrow { + display: block!important; + } + span { + display: inline-block!important; + } } } } + .nest-menu .el-submenu>.el-submenu__title, .el-submenu .el-menu-item { min-width: 180px!important; background-color: #2B2C2D!important; diff --git a/src/views/layout/components/Sidebar.vue b/src/views/layout/components/Sidebar.vue index 56abd7c1..301a86ee 100644 --- a/src/views/layout/components/Sidebar.vue +++ b/src/views/layout/components/Sidebar.vue @@ -4,8 +4,6 @@ - -