twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-11-14 06:33:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

index on main: f96885b perf: 同步代码

Browse Source
This commit is contained in:
xiaoxian521
2021-11-10 22:12:47 +08:00
parent f96885b48d
commit a9357aa1a6
85 changed files with 8325 additions and 5704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
src/style/sidebar.scss
View File

@@ -1,26 +1,39 @@
@import "../layout/theme/default-vars.scss";
@mixin merge-style(
// 菜单选中后字体样式
$subMenuActiveText,
//菜单背景
$menuBg,
// 鼠标覆盖菜单时的背景
$menuHover,
// 子菜单背景
$subMenuBg,
// 鼠标覆盖子菜单时的背景
$subMenuHover,
// vertical模式下主体内容距离网页文档左侧的距离
$sideBarWidth,
$navTextColor
$sideBarWidth
) {
$menuText: #7a80b4;
$menuActiveText: #7a80b4;
@media screen and (min-width: 150px) and (max-width: 420px) {
.app-main-nofixed-header {
overflow-y: hidden;
}
}
@media screen and (min-width: 420px) {
.app-main-nofixed-header {
overflow: hidden;
}
}
.main-container {
height: 100vh;
min-height: 100%;
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
position: relative;
background: #f0f2f5;
@media screen and (min-width: 150px) and (max-width: 420px) {
.app-main .el-scrollbar__view:first-child {
overflow-y: hidden;
}
}
@media screen and (min-width: 420px) {
.app-main .el-scrollbar__view:first-child {
overflow: hidden;
}
}
}
.fixed-header {
@@ -39,7 +52,7 @@
width: 100% !important;
+ .app-main {
padding-top: 37px;
padding-top: 37px !important;
}
}
}
@@ -50,8 +63,8 @@
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth;
background-color: $menuBg;
width: $sideBarWidth !important;
background: $menuBg;
height: 100%;
position: fixed;
font-size: 0;
@@ -91,8 +104,10 @@
a {
display: inline-block;
display: flex;
padding-left: 10px;
flex-wrap: wrap;
width: 100%;
overflow: hidden;
}
.el-menu {
@@ -104,15 +119,18 @@
.el-menu-item,
.el-sub-menu__title {
color: $menuText;
padding: 0 20px 0 40px;
&:hover {
color: $menuTitleHover !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-sub-menu__title {
// background: $menuBg;
&:hover {
background-color: $menuHover !important;
background-color: transparent;
}
}
@@ -135,17 +153,23 @@
font-size: 12px;
min-width: $sideBarWidth !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;
}
}
.horizontal-header {
display: flex;
justify-content: space-around;
background-color: $menuBg;
background: $menuBg;
width: 100%;
height: 62px;
align-items: center;
@@ -160,10 +184,6 @@
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: $menuHover;
}
i {
font-size: 30px;
color: #1890ff;
@@ -173,7 +193,7 @@
h4 {
font-size: 16px;
font-weight: 700;
color: $navTextColor;
color: $subMenuActiveText;
transition: all 0.5s;
}
}
@@ -189,7 +209,7 @@
display: flex;
min-width: 280px;
align-items: center;
color: $navTextColor;
color: $subMenuActiveText;
justify-content: flex-end;
.screen-full {
@@ -205,7 +225,7 @@
width: 40px;
padding: 11px;
cursor: pointer;
color: $navTextColor;
color: $subMenuActiveText;
&:hover {
background: $menuHover;
@@ -220,7 +240,7 @@
align-items: center;
justify-content: space-around;
cursor: pointer;
color: $navTextColor;
color: $subMenuActiveText;
&:hover {
background: $menuHover;
@@ -240,7 +260,7 @@
.el-icon-setting {
height: 62px;
width: 40px;
padding: 11px;
padding: 12px;
display: flex;
cursor: pointer;
align-items: center;
@@ -261,16 +281,16 @@
.el-menu-item,
.el-sub-menu__title {
color: $menuText;
&:hover {
color: $menuTitleHover !important;
}
}
.submenu-title-noDropdown,
.el-sub-menu__title {
height: 60px;
background: $menuBg;
&:hover {
background-color: $menuHover !important;
}
}
.is-active > .el-sub-menu__title,
@@ -296,22 +316,24 @@
background-color: $subMenuBg !important;
.el-menu-item {
color: $menuText;
background-color: $subMenuBg;
&:hover {
background-color: $subMenuHover;
span {
font-size: 12px;
margin-left: 10px;
}
}
.el-sub-menu__title {
color: $menuText;
span {
margin-left: 10px;
}
}
}
& > .el-menu {
i {
margin-right: 16px;
margin-right: 20px;
}
}
@@ -329,9 +351,15 @@
font-size: 12px;
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
}
.el-menu-item,
.el-sub-menu__title {
color: $menuText;
background-color: $subMenuBg;
&:hover {
background-color: $menuHover !important;
color: $menuTitleHover !important;
}
}
@@ -340,11 +368,8 @@
color: $subMenuActiveText !important;
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
background-color: $menuHover !important;
}
.el-menu-item.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
.el-menu-item,
@@ -362,8 +387,13 @@
}
}
// horizontal菜单折叠
// horizontal菜单
.el-menu--horizontal {
& > .el-sub-menu .el-sub-menu__icon-arrow {
position: static !important;
margin-top: 0;
}
.el-menu--popup {
background-color: $subMenuBg !important;
@@ -371,13 +401,18 @@
color: $menuText;
background-color: $subMenuBg;
&:hover {
background-color: $subMenuHover;
span {
font-size: 12px;
margin-left: 10px;
}
}
.el-sub-menu__title {
color: $menuText;
span {
margin-left: 10px;
}
}
}
@@ -394,7 +429,7 @@
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover !important;
color: $menuTitleHover !important;
}
}
@@ -413,17 +448,22 @@
}
}
.is-active {
transition: color 0.3s;
color: $subMenuActiveText !important;
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
background-color: $menuHover !important;
color: $menuTitleHover !important;
}
}
// 有子集的激活菜单背景
.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
.el-menu-item.is-active {
transition: color 0.3s;
color: $subMenuActiveText !important;
}
}
.el-scrollbar__wrap {
@@ -435,6 +475,52 @@
min-width: $sideBarWidth !important;
}
// 有子菜单
.el-menu--collapse
.is-active.outer-most.el-sub-menu
> .el-sub-menu__title::before {
position: absolute;
top: 0;
left: 5px;
width: 3px;
height: 100%;
background-color: $menuActiveBefore;
content: "";
clear: both;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: translateY(0);
transform: translateY(0);
}
// 无子菜单
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
top: 0;
left: 5px;
width: 3px;
height: 100%;
background-color: $menuActiveBefore;
content: "";
clear: both;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before,
.el-menu--collapse .submenu-title-noDropdown.outer-most::before {
content: "";
display: block;
position: absolute;
height: 0;
width: 3px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
}
// 手机端
.mobile {
.fixed-header {
@@ -448,7 +534,7 @@
.sidebar-container {
transition: transform 0.28s;
width: $sideBarWidth !important;
width: $sideBarWidth;
}
&.hideSidebar {
@@ -468,14 +554,17 @@
}
}
body[data-layout="vertical"] {
.fixed-header + .app-main {
padding-top: 85px;
body[layout="vertical"] {
$sideBarWidth: 210px;
@include merge-style($sideBarWidth);
.sidebar-logo-container {
background: $sidebarLogo;
}
.hideSidebar {
.fixed-header {
width: calc(100% - 54px) !important;
width: calc(100% - 54px);
transition: width 0.28s;
}
@@ -484,7 +573,7 @@ body[data-layout="vertical"] {
}
.main-container {
margin-left: 54px !important;
margin-left: 54px;
}
.submenu-title-noDropdown {
@@ -506,8 +595,10 @@ body[data-layout="vertical"] {
}
}
// 菜单折叠
.el-menu--collapse {
margin-left: -5px; //需优化的地方
margin-left: -5px;
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
@@ -519,101 +610,20 @@ body[data-layout="vertical"] {
}
}
}
.submenu-title-noDropdown {
background: transparent !important;
}
}
}
}
body[data-layout="horizontal"] {
body[layout="horizontal"] {
$sideBarWidth: 0;
@include merge-style($sideBarWidth);
.fixed-header {
width: 100% !important;
width: 100%;
transition: none !important;
}
.fixed-header + .app-main {
padding-top: 98px;
}
}
// vertical模式下暗色主题
body[data-layout="vertical"][data-theme="dark"] {
$subMenuActiveText: #f4f4f5;
$menuBg: #1b2a47;
$menuHover: #2a395b;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;
$navTextColor: #fff;
@include merge-style(
$subMenuActiveText,
$menuBg,
$menuHover,
$subMenuBg,
$subMenuHover,
$sideBarWidth,
$navTextColor
);
}
// vertical模式下亮色主题
body[data-layout="vertical"][data-theme="light"] {
$subMenuActiveText: #409eff;
$menuBg: #fff;
$menuHover: #e0ebf6;
$subMenuBg: #fff;
$subMenuHover: #e0ebf6;
$sideBarWidth: 210px;
$navTextColor: #7a80b4;
@include merge-style(
$subMenuActiveText,
$menuBg,
$menuHover,
$subMenuBg,
$subMenuHover,
$sideBarWidth,
$navTextColor
);
}
// horizontal模式下暗色主题
body[data-layout="horizontal"][data-theme="dark"] {
$subMenuActiveText: #f4f4f5;
$menuBg: #1b2a47;
$menuHover: #2a395b;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 0;
$navTextColor: #fff;
@include merge-style(
$subMenuActiveText,
$menuBg,
$menuHover,
$subMenuBg,
$subMenuHover,
$sideBarWidth,
$navTextColor
);
}
// horizontal模式下亮色主题
body[data-layout="horizontal"][data-theme="light"] {
$subMenuActiveText: #409eff;
$menuBg: #fff;
$menuHover: #e0ebf6;
$subMenuBg: #fff;
$subMenuHover: #e0ebf6;
$sideBarWidth: 0;
$navTextColor: #7a80b4;
@include merge-style(
$subMenuActiveText,
$menuBg,
$menuHover,
$subMenuBg,
$subMenuHover,
$sideBarWidth,
$navTextColor
);
}