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

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

4
src/style/element-plus.scss
View File

@@ -37,10 +37,6 @@
box-sizing: content-box;
}
.el-loading-mask {
z-index: -1;
}
// el-tooltip的权重
.is-dark {
z-index: 99999 !important;

14
src/style/index.scss
View File

@@ -65,20 +65,6 @@ ul {
}
}
// main-container global css
.app-container {
padding: 20px;
}
.login,
.register {
width: 100vw;
height: 100vh;
overflow-x: hidden;
background: url("../assets/bg.png") no-repeat center;
background-size: cover;
}
/* 头部用户信息样式重置 */
.hidden {
display: none !important;

227
src/style/login.css Normal file
View File

@@ -0,0 +1,227 @@
.wave {
position: fixed;
height: 100%;
left: 0;
bottom: 0;
z-index: -1;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 18rem;
padding: 0 2rem;
}
.img {
display: flex;
justify-content: flex-end;
align-items: center;
}
.img img {
width: 500px;
}
.login-box {
display: flex;
align-items: center;
text-align: center;
}
.login-form {
width: 360px;
}
.avatar {
width: 350px;
height: 80px;
}
.login-form h2 {
text-transform: uppercase;
margin: 15px 0;
color: #999;
font: bold 200% Consolas, Monaco, monospace;
}
.input-group {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.input-group:nth-child(1) {
margin-bottom: 4px;
}
.input-group::before,
.input-group::after {
content: "";
position: absolute;
bottom: -2px;
width: 0;
height: 2px;
background-color: #c5d3f7;
transition: 0.5s;
}
.input-group::after {
right: 50%;
}
.input-group::before {
left: 50%;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
.icon i {
color: #d9d9d9;
transition: 0.5s;
}
.input-group > div {
position: relative;
height: 45px;
}
.input-group > div > h5 {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #d9d9d9;
font-size: 18px;
transition: 0.3s;
margin: 0;
padding: 0;
}
.input-group.focus .icon i {
color: #5392f0;
}
.input-group.focus div h5 {
top: -5px;
font-size: 15px;
}
.input-group.focus::after,
.input-group.focus::before {
width: 50%;
}
.input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: "Roboto", sans-serif;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: 0.3s;
}
a:hover {
color: #5392f0;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
margin: 1rem 0;
font-size: 1.2rem;
outline: none;
border: none;
background-image: linear-gradient(to right, #567dbe, #5392f0, #567dbe);
cursor: pointer;
color: #fff;
text-transform: uppercase;
font-family: "Roboto", sans-serif;
background-size: 200%;
transition: 0.5s;
}
.btn:hover {
background-position: right;
}
.copyright {
position: absolute;
width: 100%;
height: 50px;
bottom: 2px;
color: #5392f0;
text-align: center;
font-size: 18px;
font-family: "Roboto", sans-serif;
}
@media screen and (max-width: 1080px) {
.container {
grid-gap: 9rem;
}
}
@media screen and (max-width: 1024px) {
.login-form {
width: 290px;
}
.login-form h2 {
font-size: 2.4rem;
margin: 8px 0;
}
.img img {
width: 360px;
}
.avatar {
width: 280px;
height: 80px;
}
}
@media screen and (max-width: 768px) {
.wave {
display: none;
}
.img {
display: none;
}
.container {
grid-template-columns: 1fr;
}
.login-box {
justify-content: center;
}
}

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
);
}