twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-30 09:24:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update vertical style

Browse Source
This commit is contained in:
xiaoxian521 2021-11-07 16:56:15 +08:00
parent ad2f7358db
commit 0ad3418239
10 changed files with 62 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layout/theme/auroraGreen-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #0b1e15; $menuBg: #0b1e15;
$menuHover: #60ac80; $menuHover: #60ac80;
$subMenuBg: #000; $subMenuBg: #000;
$subMenuHover: #60ac80; $subMenuActiveBg: #60ac80;
$navTextColor: #7a80b4; $navTextColor: #7a80b4;
$menuText: #7a80b4; $menuText: #7a80b4;
$sidebarLogo: #112f21; $sidebarLogo: #112f21;
$menuTitleHover: #fff; $menuTitleHover: #fff;
$menuActiveBefore: #60ac80;

7
src/layout/theme/default-vars.scss
View File

@ -6,18 +6,19 @@
// 暗雅（默认） // 暗雅（默认）
// 菜单选中后字体样式 // 菜单选中后字体样式
$subMenuActiveText: #f4f4f5 !default; $subMenuActiveText: #fff !default;
//菜单背景 //菜单背景
$menuBg: #001529 !default; $menuBg: #001529 !default;
// 鼠标覆盖到菜单时的背景 // 鼠标覆盖到菜单时的背景
$menuHover: #4091f7 !default; $menuHover: #4091f7 !default;
// 子菜单背景 // 子菜单背景
$subMenuBg: #0f0303 !default; $subMenuBg: #0f0303 !default;
// 鼠标覆盖子菜单时的背景 // 有无子集的激活菜单背景
$subMenuHover: #4091f7 !default; $subMenuActiveBg: #4091f7 !default;
$navTextColor: #fff !default; $navTextColor: #fff !default;
$menuText: rgba(254, 254, 254, 0.65) !default; $menuText: rgba(254, 254, 254, 0.65) !default;
// logo背景颜色 // logo背景颜色
$sidebarLogo: #002140 !default; $sidebarLogo: #002140 !default;
// 鼠标覆盖到菜单时的字体颜色 // 鼠标覆盖到菜单时的字体颜色
$menuTitleHover: #fff !default; $menuTitleHover: #fff !default;
$menuActiveBefore: #4091f7 !default;

3
src/layout/theme/dusk-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #2a0608; $menuBg: #2a0608;
$menuHover: #e13c39; $menuHover: #e13c39;
$subMenuBg: #000; $subMenuBg: #000;
$subMenuHover: #e13c39; $subMenuActiveBg: #e13c39;
$navTextColor: red; $navTextColor: red;
$menuText: rgba(254, 254, 254, 0.651); $menuText: rgba(254, 254, 254, 0.651);
$sidebarLogo: #42090c; $sidebarLogo: #42090c;
$menuTitleHover: #fff; $menuTitleHover: #fff;
$menuActiveBefore: #e13c39;

5
src/layout/theme/light-vars.scss
View File

@ -3,8 +3,9 @@ $subMenuActiveText: #409eff;
$menuBg: #fff; $menuBg: #fff;
$menuHover: #e0ebf6; $menuHover: #e0ebf6;
$subMenuBg: #fff; $subMenuBg: #fff;
$subMenuHover: #e0ebf6; $subMenuActiveBg: #e0ebf6;
$navTextColor: #7a80b4; $navTextColor: #7a80b4;
$menuText: #7a80b4; $menuText: #7a80b4;
$sidebarLogo: #fff; $sidebarLogo: #fff;
$menuTitleHover: #7a80b4; $menuTitleHover: #000;
$menuActiveBefore: #4091f7;

3
src/layout/theme/mingQing-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #032121; $menuBg: #032121;
$menuHover: #59bfc1; $menuHover: #59bfc1;
$subMenuBg: #000; $subMenuBg: #000;
$subMenuHover: #59bfc1; $subMenuActiveBg: #59bfc1;
$navTextColor: #7a80b4; $navTextColor: #7a80b4;
$menuText: #7a80b4; $menuText: #7a80b4;
$sidebarLogo: #053434; $sidebarLogo: #053434;
$menuTitleHover: #fff; $menuTitleHover: #fff;
$menuActiveBefore: #59bfc1;

3
src/layout/theme/pink-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #28081a; $menuBg: #28081a;
$menuHover: #d84493; $menuHover: #d84493;
$subMenuBg: #000; $subMenuBg: #000;
$subMenuHover: #d84493; $subMenuActiveBg: #d84493;
$navTextColor: #7a80b4; $navTextColor: #7a80b4;
$menuText: #7a80b4; $menuText: #7a80b4;
$sidebarLogo: #3f0d29; $sidebarLogo: #3f0d29;
$menuTitleHover: #fff; $menuTitleHover: #fff;
$menuActiveBefore: #d84493;

3
src/layout/theme/saucePurple-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #130824; $menuBg: #130824;
$menuHover: #693ac9; $menuHover: #693ac9;
$subMenuBg: #000; $subMenuBg: #000;
$subMenuHover: #693ac9; $subMenuActiveBg: #693ac9;
$navTextColor: #7a80b4; $navTextColor: #7a80b4;
$menuText: #7a80b4; $menuText: #7a80b4;
$sidebarLogo: #1f0c38; $sidebarLogo: #1f0c38;
$menuTitleHover: #fff; $menuTitleHover: #fff;
$menuActiveBefore: #693ac9;

3
src/layout/theme/volcano-vars.scss
View File

@ -4,8 +4,9 @@ $subMenuActiveText: #fff;
$menuBg: #2b0e05; $menuBg: #2b0e05;
$menuHover: #e85f33; $menuHover: #e85f33;
$subMenuBg: #0f0603; $subMenuBg: #0f0603;
$subMenuHover: #e85f33; $subMenuActiveBg: #e85f33;
$navTextColor: #fff; $navTextColor: #fff;
$menuText: rgba(254, 254, 254, 0.65); $menuText: rgba(254, 254, 254, 0.65);
$sidebarLogo: #441708; $sidebarLogo: #441708;
$menuTitleHover: #fff; $menuTitleHover: #fff;
$menuActiveBefore: #e85f33;

7
src/layout/theme/yellow-vars.scss
View File

@ -1,11 +1,12 @@
// 黄色 // 黄色
$subMenuActiveText: #fff; $subMenuActiveText: #d25f00;
$menuBg: #2b2503; $menuBg: #2b2503;
$menuHover: #f6da4d; $menuHover: #f6da4d;
$subMenuBg: #0f0603; $subMenuBg: #0f0603;
$subMenuHover: #f6da4d; $subMenuActiveBg: #f6da4d;
$navTextColor: #fff; $navTextColor: #fff;
$menuText: rgba(254, 254, 254, 0.65); $menuText: rgba(254, 254, 254, 0.65);
$sidebarLogo: #443b05; $sidebarLogo: #443b05;
$menuTitleHover: #443b05; $menuTitleHover: #fff;
$menuActiveBefore: #f6da4d;

73
src/style/sidebar.scss
View File

@ -134,7 +134,7 @@
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-sub-menu__title { .el-sub-menu__title {
&:hover { &:hover {
background-color: $menuHover !important; background-color: transparent;
} }
} }
@ -157,10 +157,16 @@
font-size: 12px; font-size: 12px;
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
}
&:hover { // 无子集的激活菜单背景
background-color: $subMenuHover !important; .is-active.submenu-title-noDropdown.outer-most {
} background: $subMenuActiveBg;
}
// 有子集的激活菜单背景
.is-active.nest-menu {
background: $subMenuActiveBg !important;
} }
} }
@ -182,9 +188,9 @@
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { // &:hover {
background: $menuHover; // background: transparent;
} // }
i { i {
font-size: 30px; font-size: 30px;
@ -291,7 +297,7 @@
background: $menuBg; background: $menuBg;
&:hover { &:hover {
background-color: $menuHover !important; // background-color: transparent !important;
} }
} }
@ -312,6 +318,10 @@
} }
} }
// .is-active.submenu-title-noDropdown.outer-most {
// background: transparent;
// }
// vertical菜单折叠 // vertical菜单折叠
.el-menu--vertical { .el-menu--vertical {
.el-menu--popup { .el-menu--popup {
@ -322,10 +332,6 @@
font-size: 12px; font-size: 12px;
margin-left: 10px; margin-left: 10px;
} }
&:hover {
background-color: $subMenuHover;
}
} }
.el-sub-menu__title { .el-sub-menu__title {
@ -359,7 +365,7 @@
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
&:hover { &:hover {
background-color: $menuHover !important; // background-color: transparent !important;
} }
} }
@ -378,11 +384,8 @@
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
.nest-menu .el-sub-menu > .el-sub-menu__title, .el-menu-item.is-active.nest-menu {
.el-menu-item { background: $subMenuActiveBg !important;
&:hover {
background-color: $menuHover !important;
}
} }
.el-menu-item, .el-menu-item,
@ -413,10 +416,6 @@
font-size: 12px; font-size: 12px;
margin-left: 10px; margin-left: 10px;
} }
&:hover {
background-color: $subMenuHover;
}
} }
.el-sub-menu__title { .el-sub-menu__title {
@ -440,9 +439,9 @@
min-width: $sideBarWidth !important; min-width: $sideBarWidth !important;
background-color: $subMenuBg !important; background-color: $subMenuBg !important;
&:hover { // &:hover {
background-color: $menuHover !important; // background-color: transparent !important;
} // }
} }
& > .el-menu { & > .el-menu {
@ -465,12 +464,12 @@
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
.nest-menu .el-sub-menu > .el-sub-menu__title, // .nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item { // .el-menu-item {
&:hover { // &:hover {
background-color: $menuHover !important; // background-color: transparent !important;
} // }
} // }
} }
.el-scrollbar__wrap { .el-scrollbar__wrap {
@ -491,7 +490,7 @@
left: 5px; left: 5px;
width: 3px; width: 3px;
height: 100%; height: 100%;
background-color: #1890ff !important; background-color: $menuActiveBefore;
content: ""; content: "";
clear: both; clear: both;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
@ -507,7 +506,7 @@
left: 5px; left: 5px;
width: 3px; width: 3px;
height: 100%; height: 100%;
background-color: #1890ff !important; background-color: $menuActiveBefore;
content: ""; content: "";
clear: both; clear: both;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
@ -602,8 +601,10 @@ body[layout="vertical"] {
} }
} }
// 菜单折叠
.el-menu--collapse { .el-menu--collapse {
margin-left: -5px; //需优化的地方 margin-left: -5px;
.el-sub-menu { .el-sub-menu {
& > .el-sub-menu__title { & > .el-sub-menu__title {
& > span { & > span {
@ -615,6 +616,10 @@ body[layout="vertical"] {
} }
} }
} }
.submenu-title-noDropdown {
background: transparent !important;
}
} }
} }
} }