Skip to content

D
dsk-cr20g
Commit eba666d0 authored by 远方不远's avatar 远方不远
Browse files
Options

hy

parent faef043c
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 41 deletions
dsk-operate-ui/src/assets/styles/sidebar.scss
View file @ eba666d0
...@@ -42,8 +42,10 @@ ...@@ -42,8 +42,10 @@
.el-scrollbar { .el-scrollbar {
height: 100%; height: 100%;
} }
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 50px);
...@@ -61,55 +63,82 @@ ...@@ -61,55 +63,82 @@
} }
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 6px;
}
.el-submenu__icon-arrow{
top: 54%;
right: 5px;
color: #d8d8d8;
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: calc(100% - 16px) !important;
margin: 0 8px;
}
.el-menu--inline{
margin: 0;
width: 100%!important;
}
.el-menu--inline .nest-menu .el-menu-item{
width: 100%!important;
min-width: 128px;
color: #fff!important;
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
height: 40px;
line-height: 40px;
border: 1px solid #141b2f;
color: #fff;
margin-bottom: 6px;
padding: 0 6px!important;
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
// menu hover // menu hover
.submenu-title-noDropdown, .el-menu-item.is-active {
.el-submenu__title { // 点击菜单的颜色
background-color: #1e2c4c!important;
color: #fff!important;
border-radius: 10px;
border: 1px solid #2b3f69;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: #1e2c4c!important;
border-radius: 10px;
color: #fff!important;
border: 1px solid #2b3f69;
} }
} }
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $base-sidebar-width !important;
// menu hover
.submenu-title-noDropdown, .el-submenu__title {
color: #fff!important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: #1e2c4c!important;
color: #fff!important;
border-radius: 10px;
border: 1px solid #2b3f69;
} }
} }
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important;
&:hover {
background-color: $base-sub-menu-hover !important;
}
} }
.sidebar-container .el-submenu .el-menu-item:hover,.sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover {
background-color: #1e2c4c!important;
color: #fff!important;
border-radius: 10px;
border: 1px solid #2b3f69;
} }
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 54px !important; width: 48px !important;
} }
.main-container { .main-container {
...@@ -117,14 +146,25 @@ ...@@ -117,14 +146,25 @@
} }
.submenu-title-noDropdown { .submenu-title-noDropdown {
padding: 0 !important; margin-bottom: 6px;
padding: 0 6px!important;
text-align: center;
cursor: pointer;
position: relative; position: relative;
.el-tooltip { .el-tooltip {
padding: 0 !important; padding: 0 !important;
.svg-icon { .svg-icon {
margin-left: 20px; margin: 0px!important;
width: 1em;
height: 1em;
font-size: 16px;
margin-bottom: -2px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
} }
} }
} }
...@@ -133,10 +173,21 @@ ...@@ -133,10 +173,21 @@
overflow: hidden; overflow: hidden;
&>.el-submenu__title { &>.el-submenu__title {
padding: 0 !important; margin-bottom: 6px;
padding: 0 6px!important;
text-align: center;
cursor: pointer;
.svg-icon { .svg-icon {
margin-left: 20px; margin: 0px!important;
width: 1em;
height: 1em;
font-size: 16px;
margin-bottom: -2px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-left: 0px;
} }
} }
......
dsk-operate-ui/src/assets/styles/variables.scss
View file @ eba666d0
...@@ -36,7 +36,13 @@ $base-sub-menu-background:#000c17; ...@@ -36,7 +36,13 @@ $base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#001528;
*/ */
$base-sidebar-width: 200px; // 央企颜色设置自定义
$base-menu-background:#141b2f;
$base-menu-light-background: #fff; // 选中菜单的字体颜色
$base-logo-light-title-color: #fff; // 对应base-logo-title-color
$base-sidebar-width: 144px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......
dsk-operate-ui/src/layout/components/Sidebar/Logo.vue
View file @ eba666d0
...@@ -55,9 +55,10 @@ export default { ...@@ -55,9 +55,10 @@ export default {
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 55px;
line-height: 50px; line-height: 55px;
background: #2b2f3a; background: #141b2f;
border-bottom: 1px solid #1a2743;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
...@@ -66,8 +67,8 @@ export default { ...@@ -66,8 +67,8 @@ export default {
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 32px; width: 16px;
height: 32px; height: 23px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px; margin-right: 12px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment