lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 layout三种布局重构完成

Browse Source
This commit is contained in:
chenkl
2020-12-21 18:21:27 +08:00
parent bd24b92acb
commit 429e42809c
90 changed files with 3945 additions and 4699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/styles/sidebar.less
View File

@@ -1,234 +0,0 @@
#app {
// 主体区域 Main container
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: @menuWidth;
position: relative;
}
// 侧边栏 Sidebar container
.sidebar-container {
transition: width 0.28s;
width: @menuWidth !important;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
//reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
.el-scrollbar__view {
height: 100%;
}
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 70px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
color: hsla(0,0%,100%,.7) !important;
&:hover {
// background-color: @menuHover !important;
color: @subMenuActiveText !important;
}
}
.is-active>.el-submenu__title {
color: @subMenuActiveText !important;
}
.is-active {
color: @subMenuActiveText !important;
background-color: @menuActiveBg !important;
&:hover {
color: @subMenuActiveText !important;
background-color: @menuActiveBg !important;
}
& .el-menu-item {
background-color: @menuActiveBg !important;
&:hover {
color: @subMenuActiveText !important;
}
}
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: @menuWidth !important;
background-color: @subMenuBg !important;
&:hover {
color: @subMenuActiveText !important;
background-color: @subMenuHover !important;
}
}
& .nest-menu {
& .is-active {
background-color: @menuActiveBg !important;
&:hover {
color: @subMenuActiveText !important;
background-color: @menuActiveBg !important;
}
}
}
}
.hideSidebar {
.sidebar-container {
width: 36px !important;
}
.main-container {
margin-left: 36px;
}
.submenu-title-noDropdown {
padding-left: 10px !important;
position: relative;
.el-tooltip {
padding: 0 10px !important;
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding-left: 10px !important;
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: @menuWidth !important;
}
// 适配移动端, Mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: @menuWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-@menuWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// you can use @subMenuHover
// background-color: @menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}

78
src/styles/sider.less
View File

@@ -35,24 +35,6 @@
}
}
}
.is-active {
color: @menuActiveText !important;
background-color: @subMenuHover !important;
&>.el-submenu__title {
color: @menuActiveText !important;
}
}
.nest-menu {
background-color: @subMenuBg !important;
.el-submenu>.el-submenu__title {
background-color: @subMenuBg !important;
}
.is-active {
background-color: @subMenuHover !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
@@ -65,6 +47,28 @@
color: @subMenuActiveText !important;
// background-color: @subMenuHover !important;
}
.is-active {
color: @menuActiveText !important;
background-color: @subMenuHover !important;
&:hover {
color: @subMenuActiveText !important;
background-color: @subMenuHover !important;
}
&>.el-submenu__title {
color: @menuActiveText !important;
}
}
// .nest-menu {
// background-color: @subMenuBg !important;
// .el-submenu>.el-submenu__title {
// background-color: @subMenuBg !important;
// }
// .is-active {
// background-color: @subMenuHover !important;
// }
// }
}
.el-menu--collapse {
&>div>.el-submenu {
@@ -103,11 +107,11 @@
}
}
.nest-menu {
.is-active {
background-color: @subMenuHover !important;
}
}
// .nest-menu {
// .is-active {
// background-color: @subMenuHover !important;
// }
// }
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
@@ -149,15 +153,15 @@
}
}
.nest-menu {
background-color: @subMenuBg !important;
.el-submenu>.el-submenu__title {
background-color: @subMenuBg !important;
}
.is-active {
background-color: @subMenuHover !important;
}
}
// .nest-menu {
// background-color: @subMenuBg !important;
// .el-submenu>.el-submenu__title {
// background-color: @subMenuBg !important;
// }
// .is-active {
// background-color: @subMenuHover !important;
// }
// }
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
@@ -191,11 +195,11 @@
}
}
.nest-menu {
.is-active {
// background-color: @subMenuHover !important;
}
}
// .nest-menu {
// .is-active {
// // background-color: @subMenuHover !important;
// }
// }
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {