优化sidebar适配
This commit is contained in:
@@ -1,22 +1,15 @@
|
||||
#app {
|
||||
.layout-sidebar__container {
|
||||
.sidebar {
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
z-index: 1001;
|
||||
transition: width 0.28s ease;
|
||||
background-color: var(--base-menu-background);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: 0px;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
|
||||
box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
@@ -29,7 +22,10 @@
|
||||
|
||||
// 展开sidebar状态设置svg-icon边距
|
||||
.openSidebar {
|
||||
.layout-sidebar__container .svg-icon {
|
||||
.sidebar {
|
||||
transform: translate(0);
|
||||
}
|
||||
.sidebar .svg-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
@@ -76,14 +72,14 @@
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.layout-sidebar__container {
|
||||
.sidebar {
|
||||
transition: transform 0.28s;
|
||||
position: fixed;
|
||||
background: var(--base-menu-background, #fff);
|
||||
// background: var(--base-menu-background, #fff);
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.layout-sidebar__container {
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,11 +10,6 @@ $panGreen: #30b08f;
|
||||
|
||||
// 默认菜单主题风格
|
||||
:root {
|
||||
// --base-menu-background: #ffffff;
|
||||
// --base-logo-title-color: #ffffff;
|
||||
// --base-topBar-background: #ffffff;
|
||||
// --base-topBar-color: #5a5e66;
|
||||
|
||||
--base-text-color-rgba: rgba(0, 0, 0, 0.85);
|
||||
--base-sidebar-width: 220px;
|
||||
--el-aside-width: 220px;
|
||||
@@ -23,16 +18,7 @@ $panGreen: #30b08f;
|
||||
--base-header-height: 50px;
|
||||
}
|
||||
|
||||
/***默认主题颜色配置***/
|
||||
[data-theme='theme-light'] {
|
||||
// 菜单背景
|
||||
// --base-menu-background: #ffffff;
|
||||
// // logo部分文字颜色
|
||||
// --base-logo-title-color: #001529;
|
||||
// // 顶部导航栏背景色
|
||||
// --base-topBar-background: #ffffff;
|
||||
}
|
||||
/***深色主题颜色配置***/
|
||||
/***侧边栏深色配置***/
|
||||
[data-theme='theme-dark'] {
|
||||
--base-menu-background: #304156;
|
||||
--base-logo-title-color: #ffffff;
|
||||
|
||||
Reference in New Issue
Block a user