feat: add pure-admin-thin
This commit is contained in:
xiaoxian521
54
src/style/element-ui.scss
Normal file
54
src/style/element-ui.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
// cover some element-plus styles
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type="file"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
transform: none;
|
||||
left: 0;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// refine element ui upload
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.el-dropdown-menu {
|
||||
padding: 2px 0 2px 0 !important;
|
||||
}
|
||||
|
||||
// to fix el-date-picker css style
|
||||
.el-range-separator {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
// el-tooltip的权重
|
||||
.is-dark {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
111
src/style/index.scss
Normal file
111
src/style/index.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@import "./mixin.scss";
|
||||
@import "./transition.scss";
|
||||
@import "./element-ui.scss";
|
||||
@import "./sidebar.scss";
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&::after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 灰色模式
|
||||
.html-grey {
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
}
|
||||
|
||||
// 色弱模式
|
||||
.html-weakness {
|
||||
filter: invert(80%);
|
||||
-webkit-filter: invert(80%);
|
||||
-moz-filter: invert(80%);
|
||||
-ms-filter: invert(80%);
|
||||
-o-filter: invert(80%);
|
||||
}
|
||||
|
||||
.pc-spacing {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.mobile-spacing {
|
||||
margin: 0;
|
||||
}
|
||||
28
src/style/mixin.scss
Normal file
28
src/style/mixin.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollBar {
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
563
src/style/sidebar.scss
Normal file
563
src/style/sidebar.scss
Normal file
@@ -0,0 +1,563 @@
|
||||
@mixin merge-style(
|
||||
// 菜单选中后字体样式
|
||||
$subMenuActiveText,
|
||||
//菜单背景
|
||||
$menuBg,
|
||||
// 鼠标覆盖菜单时的背景
|
||||
$menuHover,
|
||||
// 子菜单背景
|
||||
$subMenuBg,
|
||||
// 鼠标覆盖子菜单时的背景
|
||||
$subMenuHover,
|
||||
// vertical模式下主体内容距离网页文档左侧的距离
|
||||
$sideBarWidth,
|
||||
$navTextColor
|
||||
) {
|
||||
$menuText: #7a80b4;
|
||||
$menuActiveText: #7a80b4;
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: $sideBarWidth;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-popper.is-light {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
width: $sideBarWidth;
|
||||
background-color: $menuBg;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 1px #888;
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
|
||||
0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: $menuText;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
// background: $menuBg;
|
||||
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
transition: color 0.3s;
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
|
||||
.el-menu .el-menu--inline .el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
font-size: 12px;
|
||||
min-width: $sideBarWidth !important;
|
||||
background-color: $subMenuBg !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $subMenuHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-header {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: $menuBg;
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
align-items: center;
|
||||
|
||||
.horizontal-header-left {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
color: #1890ff;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: $navTextColor;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-header-menu {
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-header-right {
|
||||
display: flex;
|
||||
min-width: 280px;
|
||||
align-items: center;
|
||||
color: $navTextColor;
|
||||
justify-content: flex-end;
|
||||
|
||||
.screen-full {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
}
|
||||
}
|
||||
|
||||
.globalization {
|
||||
height: 62px;
|
||||
width: 40px;
|
||||
padding: 11px;
|
||||
cursor: pointer;
|
||||
color: $navTextColor;
|
||||
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
width: 100px;
|
||||
height: 62px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
cursor: pointer;
|
||||
color: $navTextColor;
|
||||
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-setting {
|
||||
height: 62px;
|
||||
width: 40px;
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: $menuText;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
height: 60px;
|
||||
background: $menuBg;
|
||||
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
border-bottom-color: #409eff;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
transition: color 0.3s;
|
||||
color: $subMenuActiveText !important;
|
||||
border-bottom-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
// vertical菜单折叠
|
||||
.el-menu--vertical {
|
||||
.el-menu--popup {
|
||||
background-color: $subMenuBg !important;
|
||||
|
||||
.el-menu-item {
|
||||
color: $menuText;
|
||||
background-color: $subMenuBg;
|
||||
|
||||
&:hover {
|
||||
background-color: $subMenuHover;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
color: $menuText;
|
||||
}
|
||||
}
|
||||
|
||||
& > .el-menu {
|
||||
i {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// horizontal菜单折叠
|
||||
.el-menu--horizontal {
|
||||
.el-menu--popup {
|
||||
background-color: $subMenuBg !important;
|
||||
|
||||
.el-menu-item {
|
||||
color: $menuText;
|
||||
background-color: $subMenuBg;
|
||||
|
||||
&:hover {
|
||||
background-color: $subMenuHover;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
& > .el-menu {
|
||||
i {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
// 手机端
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform 0.28s;
|
||||
width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$sideBarWidth, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-layout="vertical"] {
|
||||
.hideSidebar {
|
||||
.fixed-header {
|
||||
width: calc(100% - 54px);
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px !important;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
overflow: hidden;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
.el-sub-menu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
margin-left: -5px; //需优化的地方
|
||||
.el-sub-menu {
|
||||
& > .el-sub-menu__title {
|
||||
& > span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
);
|
||||
}
|
||||
44
src/style/transition.scss
Normal file
44
src/style/transition.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
// global transition css
|
||||
|
||||
/* fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.fade-transform-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
Reference in New Issue
Block a user