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

chore: 同步完整版代码

Browse Source
This commit is contained in:
xiaoxian521
2023-02-28 22:42:12 +08:00
parent 2c887ee1d9
commit 1e30b31be2
34 changed files with 1552 additions and 1436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/style/index.scss
View File

@@ -6,7 +6,8 @@
/* 自定义全局 CssVar */
:root {
--pure-transition-duration: 0.016s;
/* 左侧菜单展开、收起动画时长 */
--pure-transition-duration: 0.3s;
}
/* 灰色模式 */

460
src/style/sidebar.scss
View File

@@ -14,12 +14,13 @@
}
.sub-menu-icon {
vertical-align: middle;
font-size: 18px;
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 5px;
svg {
width: 18px;
height: 18px;
}
}
.set-icon {
@@ -161,6 +162,24 @@
color: $subMenuActiveText !important;
}
.el-menu-item.is-active.nest-menu > * {
z-index: 1;
color: #fff;
}
.el-menu-item.is-active.nest-menu::before {
content: "";
clear: both;
position: absolute;
left: 8px;
right: 8px;
margin: 4px 0;
top: 0;
bottom: 0;
border-radius: 3px;
background: var(--el-color-primary) !important;
}
.el-menu .el-menu--inline .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
font-size: 12px;
@@ -168,14 +187,209 @@
background-color: $subMenuBg !important;
}
/* 无子集的激活菜单背景 */
.is-active.submenu-title-noDropdown.outer-most {
background: $subMenuActiveBg !important;
/* 有子集的激活菜单左侧小竖条 */
.el-menu--collapse
.is-active.outer-most.el-sub-menu
> .el-sub-menu__title::before {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background-color: $menuActiveBefore;
content: "";
clear: both;
transition: all var(--pure-transition-duration) ease-in-out;
transform: translateY(0);
}
/* 有子集的激活菜单背景 */
.is-active.nest-menu {
background: $subMenuActiveBg !important;
.el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
content: "";
display: block;
position: absolute;
height: 0;
width: 3px;
transform: translateY(-50%);
top: 50%;
}
/* 无子集的激活菜单背景 */
.is-active.submenu-title-noDropdown.outer-most > * {
z-index: 1;
color: #fff;
}
.is-active.submenu-title-noDropdown.outer-most::before {
content: "";
clear: both;
position: absolute;
left: 8px;
right: 8px;
margin: 4px 0;
top: 0;
bottom: 0;
border-radius: 3px;
background: var(--el-color-primary) !important;
}
}
/* vertical 菜单折叠 */
.el-menu--vertical {
.el-menu--popup {
background-color: $subMenuBg !important;
.el-menu-item {
span {
font-size: 12px;
}
}
}
& > .el-menu {
i {
margin-right: 20px;
}
}
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
i {
color: $subMenuActiveText !important;
}
}
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
font-size: 12px;
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
}
.el-menu-item,
.el-sub-menu__title {
height: 50px;
line-height: 50px;
color: $menuText;
background-color: $subMenuBg;
&:hover {
color: $menuTitleHover !important;
}
}
.is-active {
transition: color 0.3s;
color: $subMenuActiveText !important;
}
.el-menu-item.is-active.nest-menu > * {
z-index: 1;
color: #fff;
}
.el-menu-item.is-active.nest-menu::before {
content: "";
clear: both;
position: absolute;
left: 8px;
right: 8px;
top: 0;
bottom: 0;
border-radius: 3px;
background: var(--el-color-primary) !important;
}
.el-menu-item,
.el-sub-menu {
.iconfont {
font-size: 18px;
}
.el-menu-tooltip__trigger {
width: 54px;
padding: 0;
}
}
}
/* 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;
.el-menu-item {
color: $menuText;
background-color: $subMenuBg;
span {
font-size: 12px;
}
}
.el-sub-menu__title {
color: $menuText;
}
}
/* 无子菜单时激活 border-bottom */
.router-link-exact-active > .submenu-title-noDropdown {
height: 60px;
border-bottom: 2px solid var(--el-menu-active-color);
}
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
font-size: 12px;
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
color: $menuTitleHover !important;
}
}
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
i {
color: $subMenuActiveText !important;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
color: $menuTitleHover !important;
}
}
.el-menu-item.is-active {
transition: color 0.3s;
color: $subMenuActiveText !important;
}
.el-menu-item.is-active.nest-menu > * {
z-index: 1;
color: #fff;
}
.el-menu-item.is-active.nest-menu::before {
content: "";
clear: both;
position: absolute;
left: 5px;
right: 5px;
top: 0;
bottom: 0;
border-radius: 3px;
background: var(--el-color-primary) !important;
}
}
@@ -195,19 +409,24 @@
align-items: center;
padding-left: 10px;
cursor: pointer;
transition: all 0.125s ease;
transition: all var(--pure-transition-duration) ease;
i {
font-size: 30px;
color: #1890ff;
margin-right: 4px;
img {
height: 32px;
display: inline-block;
}
h4 {
font-size: 16px;
font-weight: 700;
span {
height: 32px;
line-height: 32px;
margin: 2px 0 0 12px;
color: $subMenuActiveText;
transition: all 0.5s;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 18px;
font-weight: 600;
}
}
@@ -273,6 +492,7 @@
.el-menu-item,
.el-sub-menu__title {
padding-right: var(--el-menu-base-level-padding);
color: $menuText;
&:hover {
@@ -306,181 +526,10 @@
}
}
/* vertical 菜单折叠 */
.el-menu--vertical {
.el-menu--popup {
background-color: $subMenuBg !important;
.el-menu-item {
span {
font-size: 12px;
}
}
}
& > .el-menu {
i {
margin-right: 20px;
}
}
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
i {
color: $subMenuActiveText !important;
}
}
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
font-size: 12px;
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
}
.el-menu-item,
.el-sub-menu__title {
height: 50px;
line-height: 50px;
color: $menuText;
background-color: $subMenuBg;
&:hover {
color: $menuTitleHover !important;
}
}
.is-active {
transition: color 0.3s;
color: $subMenuActiveText !important;
}
.el-menu-item.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
.el-menu-item,
.el-sub-menu {
// i {
// width: 20px;
// text-align: center;
// font-size: 16px;
// }
// i.fa {
// margin-right: 5px;
// font-size: 16px;
// }
.el-menu-tooltip__trigger {
width: 54px;
padding: 18px !important;
}
}
}
/* 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;
.el-menu-item {
color: $menuText;
background-color: $subMenuBg;
span {
font-size: 12px;
}
}
.el-sub-menu__title {
color: $menuText;
}
}
/* 无子菜单时激活 border-bottom */
.router-link-exact-active > .submenu-title-noDropdown {
height: 60px;
border-bottom: 2px solid var(--el-menu-active-color);
}
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
font-size: 12px;
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
color: $menuTitleHover !important;
}
}
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
i {
color: $subMenuActiveText !important;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
color: $menuTitleHover !important;
}
}
/* 有子集的激活菜单背景 */
.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
.el-menu-item.is-active {
transition: color 0.3s;
color: $subMenuActiveText !important;
}
}
.el-menu--collapse .el-menu .el-sub-menu {
min-width: $sideBarWidth !important;
}
/* 有子菜单 */
.el-menu--collapse
.is-active.outer-most.el-sub-menu
> .el-sub-menu__title::before,
/* 无子菜单 */
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
top: 0;
left: 2px;
width: 2px;
height: 100%;
background-color: $menuActiveBefore;
content: "";
clear: both;
transition: all 0.125s ease-in-out;
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;
transform: translateY(-50%);
top: 50%;
}
/* 手机端 */
.mobile {
.fixed-header {
@@ -526,7 +575,7 @@ body[layout="vertical"] {
}
.sidebar-container {
transition: width 0.125s;
transition: width var(--pure-transition-duration);
width: 54px !important;
.is-active.submenu-title-noDropdown.outer-most {
@@ -543,11 +592,10 @@ body[layout="vertical"] {
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
height: 100%;
width: 100%;
text-align: center;
visibility: visible;
}
}
}
@@ -557,7 +605,7 @@ body[layout="vertical"] {
}
.el-sub-menu__title {
padding: 0 18px !important;
padding: 0;
}
}
@@ -584,9 +632,13 @@ body[layout="horizontal"] {
$sideBarWidth: 0;
@include merge-style($sideBarWidth);
.fixed-header,
.main-container {
transition: none !important;
}
.fixed-header {
width: 100%;
transition: none !important;
}
}
@@ -609,7 +661,7 @@ body[layout="mix"] {
}
.sidebar-container {
transition: width 0.125s;
transition: width var(--pure-transition-duration);
width: 54px !important;
.is-active.submenu-title-noDropdown.outer-most {
@@ -625,12 +677,12 @@ body[layout="mix"] {
.el-menu--collapse {
.el-sub-menu {
& > .el-sub-menu__title {
padding: 0;
& > span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
height: 100%;
width: 100%;
text-align: center;
visibility: visible;
}
}
}