dai
3 years ago
9 changed files with 778 additions and 2417 deletions
@ -1,860 +0,0 @@ |
|||||
// @font-face { |
|
||||
// font-family: "思源宋体"; |
|
||||
// src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Regular-1.otf) format("opentype"); |
|
||||
// font-weight: normal; |
|
||||
// font-style: normal; |
|
||||
// } |
|
||||
// @font-face { |
|
||||
// font-family: "思源宋体"; |
|
||||
// src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Heavy-4.otf) format("opentype"); |
|
||||
// font-weight: 800; |
|
||||
// font-style: normal; |
|
||||
// } |
|
||||
// @font-face { |
|
||||
// font-family: "思源宋体"; |
|
||||
// src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Medium-6.otf) format("opentype"); |
|
||||
// font-weight: 500; |
|
||||
// font-style: normal; |
|
||||
// } |
|
||||
// @font-face { |
|
||||
// font-family: "思源宋体"; |
|
||||
// src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Medium-6.otf) format("opentype"); |
|
||||
// font-weight: 600; |
|
||||
// font-style: normal; |
|
||||
// } |
|
||||
@import "./c/function.scss"; |
|
||||
|
|
||||
*, |
|
||||
*:before, |
|
||||
*:after { |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
html { |
|
||||
min-width: 1200px; |
|
||||
overflow-x: auto; |
|
||||
@include scrollBar; |
|
||||
} |
|
||||
body { |
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, |
|
||||
sans-serif; |
|
||||
font-size: $--font-size-base; |
|
||||
line-height: $base--line-height; |
|
||||
color: $--color-text-primary; |
|
||||
background-color: #f5f7fa; |
|
||||
} |
|
||||
a { |
|
||||
color: mix(#fff, $--color-primary, 20%); |
|
||||
text-decoration: none; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: $--color-primary; |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
} |
|
||||
img { |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
:focus, |
|
||||
:hover { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
/* Utils |
|
||||
------------------------------ */ |
|
||||
[v-cloak] { |
|
||||
display: none; |
|
||||
} |
|
||||
.clearfix:before, |
|
||||
.clearfix:after { |
|
||||
content: " "; |
|
||||
display: table; |
|
||||
} |
|
||||
.clearfix:after { |
|
||||
clear: both; |
|
||||
} |
|
||||
.fr { |
|
||||
float: right !important; |
|
||||
} |
|
||||
.fl { |
|
||||
float: left !important; |
|
||||
} |
|
||||
.fi { |
|
||||
float: initial !important; |
|
||||
} |
|
||||
.m-auto { |
|
||||
margin: auto !important; |
|
||||
} |
|
||||
.mt-auto { |
|
||||
margin-top: auto !important; |
|
||||
} |
|
||||
.mr-auto { |
|
||||
margin-right: auto !important; |
|
||||
} |
|
||||
.mb-auto { |
|
||||
margin-bottom: auto !important; |
|
||||
} |
|
||||
.ml-auto { |
|
||||
margin-left: auto !important; |
|
||||
} |
|
||||
.text-right { |
|
||||
text-align: right !important; |
|
||||
} |
|
||||
.text-center { |
|
||||
text-align: center !important; |
|
||||
} |
|
||||
.text-left { |
|
||||
text-align: left !important; |
|
||||
} |
|
||||
.w-percent-100 { |
|
||||
width: 100% !important; |
|
||||
} |
|
||||
.base-line-height { |
|
||||
line-height: $base--line-height !important; |
|
||||
} |
|
||||
|
|
||||
/* Reset element-ui |
|
||||
------------------------------ */ |
|
||||
.aui-wrapper { |
|
||||
.el-card + .el-card { |
|
||||
margin-top: 15px; |
|
||||
} |
|
||||
.el-input__prefix .el-input__icon { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
.el-date-editor .el-range-separator { |
|
||||
width: 8%; |
|
||||
} |
|
||||
.el-table th { |
|
||||
color: $--color-text-primary; |
|
||||
background-color: $--background-color-base; |
|
||||
} |
|
||||
.el-pagination { |
|
||||
margin-top: 15px; |
|
||||
text-align: right; |
|
||||
} |
|
||||
.el-table__expand-icon { |
|
||||
display: inline-block; |
|
||||
width: 14px; |
|
||||
vertical-align: middle; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Common |
|
||||
------------------------------ */ |
|
||||
// 图标 |
|
||||
.icon-svg { |
|
||||
width: 1em; |
|
||||
height: 1em; |
|
||||
fill: currentColor; |
|
||||
vertical-align: middle; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
// 卡片 |
|
||||
.aui-card--fill .el-card__header { |
|
||||
height: $content--card-header-height; |
|
||||
line-height: $content--card-header-height - 36px; |
|
||||
} |
|
||||
.aui-card__title { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
// 表单 |
|
||||
.aui-form__label-icon { |
|
||||
display: inline-block; |
|
||||
margin: 0 3px; |
|
||||
vertical-align: middle; |
|
||||
font-size: 18px; |
|
||||
color: $--color-text-secondary; |
|
||||
} |
|
||||
// 按钮 |
|
||||
.aui-button--dashed { |
|
||||
border-style: dashed; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
&-add { |
|
||||
> span > *[class*="el-icon-"], |
|
||||
> span > *[class*="icon"] { |
|
||||
vertical-align: middle; |
|
||||
font-size: 18px; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Layout |
|
||||
------------------------------ */ |
|
||||
.aui-wrapper { |
|
||||
position: relative; |
|
||||
padding-top: $navbar--height; |
|
||||
&.z-iframe { |
|
||||
padding-top: 0; |
|
||||
.aui-content--tabs { |
|
||||
padding-top: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Sidebar fold |
|
||||
------------------------------ */ |
|
||||
.aui-sidebar--fold { |
|
||||
.aui-navbar { |
|
||||
&__header, |
|
||||
&__brand { |
|
||||
// width: $sidebar--width-fold; |
|
||||
} |
|
||||
&__brand { |
|
||||
&-lg { |
|
||||
// display: none; |
|
||||
} |
|
||||
&-mini { |
|
||||
// display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
&__icon-menu--switch { |
|
||||
transform: rotateZ(180deg); |
|
||||
} |
|
||||
} |
|
||||
.aui-sidebar { |
|
||||
&__inner { |
|
||||
width: $sidebar--width-fold + 20px; |
|
||||
} |
|
||||
&, |
|
||||
&__menu { |
|
||||
width: $sidebar--width-fold; |
|
||||
} |
|
||||
&__menu > li > .el-submenu__title { |
|
||||
text-align: center; |
|
||||
} |
|
||||
&__menu-icon { |
|
||||
margin-right: 0; |
|
||||
font-size: 18px; |
|
||||
} |
|
||||
} |
|
||||
.aui-content { |
|
||||
&__wrapper { |
|
||||
margin-left: $sidebar--width-fold; |
|
||||
} |
|
||||
&--tabs > .el-tabs > .el-tabs__header { |
|
||||
left: $sidebar--width-fold; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.aui-sidebar--noside { |
|
||||
.aui-sidebar { |
|
||||
display: none !important; |
|
||||
} |
|
||||
.aui-content { |
|
||||
&__wrapper { |
|
||||
margin-left: 0 !important; |
|
||||
} |
|
||||
&--tabs > .el-tabs > .el-tabs__header { |
|
||||
left: 0 !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Navbar |
|
||||
------------------------------ */ |
|
||||
.aui-navbar { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
left: 0; |
|
||||
z-index: 1030; |
|
||||
display: flex; |
|
||||
align-items: stretch; |
|
||||
height: $navbar--height; |
|
||||
background-color: $--color-primary; |
|
||||
background: #fff; |
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); |
|
||||
|
|
||||
&__header { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
width: $sidebar--width; |
|
||||
height: $navbar--height; |
|
||||
transition: width 0.3s; |
|
||||
align-items: center; |
|
||||
|
|
||||
.aui-navbar__logo { |
|
||||
margin-left: 16px; |
|
||||
width: 32px; |
|
||||
height: 32px; |
|
||||
background: #0056d6; |
|
||||
border-radius: 100%; |
|
||||
overflow: hidden; |
|
||||
img { |
|
||||
width: 32px; |
|
||||
height: 32px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__brand { |
|
||||
display: flex; |
|
||||
// justify-content: center; |
|
||||
align-items: center; |
|
||||
padding: 5px 0 5px 16px; |
|
||||
margin: 0; |
|
||||
width: 60%; |
|
||||
height: 100%; |
|
||||
font-size: 20px; |
|
||||
text-transform: uppercase; |
|
||||
white-space: nowrap; |
|
||||
color: #fff; |
|
||||
overflow: hidden; |
|
||||
transition: width 0.3s; |
|
||||
font-size: 16px; |
|
||||
font-weight: bold; |
|
||||
|
|
||||
&-lg, |
|
||||
&-mini { |
|
||||
max-width: 100%; |
|
||||
cursor: pointer; |
|
||||
color: #333; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
} |
|
||||
&-mini { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
&__body { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex: 1; |
|
||||
background-color: #fff; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
&__menu { |
|
||||
background-color: transparent; |
|
||||
border-bottom: 0 !important; |
|
||||
a:focus, |
|
||||
a:hover { |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
&.z-div { |
|
||||
.el-menu-item { |
|
||||
position: relative; |
|
||||
|
|
||||
&:last-child { |
|
||||
&::after { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
content: ""; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto 0; |
|
||||
width: 1px; |
|
||||
height: 18px; |
|
||||
background-color: rgba(#ffffff, 0.6); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu-item, |
|
||||
.el-submenu > .el-submenu__title { |
|
||||
height: $navbar--height; |
|
||||
padding: 0 15px; |
|
||||
line-height: $navbar--height; |
|
||||
border-color: transparent !important; |
|
||||
} |
|
||||
.el-menu-item.is-active, |
|
||||
.el-submenu.is-active > .el-submenu__title { |
|
||||
color: $--color-text-secondary; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: $--color-text-primary; |
|
||||
} |
|
||||
} |
|
||||
.el-menu-item { |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
.aui-navbar__icon-menu { |
|
||||
color: $--color-text-primary; |
|
||||
} |
|
||||
.el-dropdown { |
|
||||
color: $--color-text-primary; |
|
||||
.el-icon-arrow-down { |
|
||||
transform: rotateZ(180deg); |
|
||||
} |
|
||||
} |
|
||||
.icon-nav { |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
} |
|
||||
* { |
|
||||
vertical-align: initial; |
|
||||
} |
|
||||
.aui-navbar__icon-menu { |
|
||||
vertical-align: middle; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.el-dropdown { |
|
||||
color: $--color-text-secondary; |
|
||||
.el-icon-arrow-down { |
|
||||
width: auto; |
|
||||
font-size: 12px; |
|
||||
margin: 0 0 0 5px; |
|
||||
transition: transform 0.3s; |
|
||||
} |
|
||||
} |
|
||||
.icon-nav { |
|
||||
color: #333; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.img-nav { |
|
||||
position: relative; |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
.nav-item { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
img { |
|
||||
display: block; |
|
||||
margin-right: 6px; |
|
||||
width: 24px; |
|
||||
border-radius: 2px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
span { |
|
||||
display: block; |
|
||||
color: #333; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-badge { |
|
||||
display: inline; |
|
||||
z-index: 2; |
|
||||
&__content { |
|
||||
line-height: 16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__search { |
|
||||
> *[class*="el-icon-"], |
|
||||
> *[class*="icon"] { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
&-txt { |
|
||||
width: 0; |
|
||||
transition: width 0.3s, margin-left 0.3s; |
|
||||
&.is-show { |
|
||||
width: 210px; |
|
||||
margin-left: 8px; |
|
||||
} |
|
||||
.el-input__inner { |
|
||||
height: $navbar--height - 20px; |
|
||||
padding: 0; |
|
||||
line-height: $navbar--height - 20px; |
|
||||
border-color: $--color-text-primary; |
|
||||
border-top: 0; |
|
||||
border-right: 0; |
|
||||
border-left: 0; |
|
||||
border-radius: 0; |
|
||||
background: transparent; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__avatar { |
|
||||
.el-dropdown-link { |
|
||||
> img { |
|
||||
width: 36px; |
|
||||
height: auto; |
|
||||
margin-right: 5px; |
|
||||
border-radius: 100%; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Sidebar |
|
||||
------------------------------ */ |
|
||||
.aui-sidebar { |
|
||||
position: fixed; |
|
||||
top: $navbar--height; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
z-index: 1020; |
|
||||
width: $sidebar--width + $sidebar--width-fold; |
|
||||
// overflow: hidden; |
|
||||
transition: width 0.3s; |
|
||||
background-color: transparent; |
|
||||
|
|
||||
.aui-sidebar_wrap { |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
&__inner { |
|
||||
position: relative; |
|
||||
z-index: 1; |
|
||||
width: $sidebar--width; |
|
||||
height: 100%; |
|
||||
padding-top: 58px; |
|
||||
padding-bottom: 15px; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: auto; |
|
||||
transition: width 0.3s; |
|
||||
} |
|
||||
|
|
||||
&__menu { |
|
||||
width: $sidebar--width; |
|
||||
border-right: 0; |
|
||||
transition: width 0.3s; |
|
||||
|
|
||||
&.el-menu { |
|
||||
background-color: transparent; |
|
||||
|
|
||||
.el-menu { |
|
||||
background-color: transparent; |
|
||||
.el-menu-item { |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu-item, |
|
||||
.el-submenu__title { |
|
||||
height: $sidebar--menu-item-height; |
|
||||
line-height: $sidebar--menu-item-height; |
|
||||
color: rgba(0, 0, 0, 0.65); |
|
||||
} |
|
||||
} |
|
||||
&__menu-icon { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
width: 16px !important; |
|
||||
margin-right: 5px; |
|
||||
text-align: center; |
|
||||
font-size: 16px; |
|
||||
color: inherit !important; |
|
||||
transition: font-size 0.3s; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Content |
|
||||
------------------------------ */ |
|
||||
.aui-content { |
|
||||
position: relative; |
|
||||
padding: $content--padding; |
|
||||
// min-height: calc(100vh - #{$navbar--height}); |
|
||||
&__wrapper { |
|
||||
position: relative; |
|
||||
margin-left: $sidebar--width + $sidebar--width-fold; |
|
||||
min-height: calc(100vh - #{$navbar--height}); |
|
||||
// background-color: $content--background-color; |
|
||||
transition: margin-left 0.3s; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height} - 2px); |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
&--tabs { |
|
||||
padding: $content--tabs-header-height 0 0; |
|
||||
} |
|
||||
&--tabs-tools { |
|
||||
position: fixed; |
|
||||
top: $navbar--height; |
|
||||
right: 0; |
|
||||
z-index: 1051; |
|
||||
min-width: $content--tabs-header-height; |
|
||||
height: $content--tabs-header-height; |
|
||||
padding: 0 12px; |
|
||||
text-align: center; |
|
||||
font-size: 16px; |
|
||||
line-height: $content--tabs-header-height; |
|
||||
background-color: $--background-color-base; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
&--tabs-icon-nav { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
> .el-tabs { |
|
||||
> .el-tabs__header { |
|
||||
position: fixed; |
|
||||
top: $navbar--height; |
|
||||
left: $sidebar--width-fold; |
|
||||
// left: $sidebar--width + $sidebar--width-fold; |
|
||||
right: 0; |
|
||||
z-index: 1050; |
|
||||
padding: 0 55px 0 15px; |
|
||||
margin: 0; |
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
|
||||
// background-color: #fff; |
|
||||
background: #ebedf0; |
|
||||
transition: left 0.3s; |
|
||||
> .el-tabs__nav-wrap { |
|
||||
margin-bottom: 0; |
|
||||
&:after { |
|
||||
display: none; |
|
||||
} |
|
||||
> .el-tabs__nav-next, |
|
||||
> .el-tabs__nav-prev { |
|
||||
line-height: $content--tabs-header-height; |
|
||||
} |
|
||||
> .el-tabs__nav-scroll > .el-tabs__nav { |
|
||||
& > .el-tabs__active-bar { |
|
||||
display: none; |
|
||||
} |
|
||||
& > .el-tabs__item { |
|
||||
height: $content--tabs-header-height; |
|
||||
padding: 0 15px; |
|
||||
line-height: $content--tabs-header-height; |
|
||||
border: 0; |
|
||||
color: $--color-text-regular; |
|
||||
&:focus, |
|
||||
&:hover, |
|
||||
&.is-active { |
|
||||
color: $--color-text-primary; |
|
||||
background-color: $--background-color-base; |
|
||||
&:after { |
|
||||
display: block; |
|
||||
} |
|
||||
> .el-icon-close { |
|
||||
color: $--color-text-primary; |
|
||||
} |
|
||||
} |
|
||||
&:after { |
|
||||
display: none; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
content: ""; |
|
||||
width: 100%; |
|
||||
height: 2px; |
|
||||
background-color: $--color-primary; |
|
||||
} |
|
||||
+ .el-tabs__item { |
|
||||
margin-left: 1px; |
|
||||
} |
|
||||
> .el-icon-close { |
|
||||
width: 14px; |
|
||||
margin-left: 15px; |
|
||||
color: $--color-text-secondary; |
|
||||
} |
|
||||
> i.icon { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
font-size: 18px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-tabs__nav.is-top { |
|
||||
padding: 4px; |
|
||||
.el-tabs__item { |
|
||||
margin-left: 3px !important; |
|
||||
height: 32px !important; |
|
||||
line-height: 32px !important; |
|
||||
background: #ffffff !important; |
|
||||
|
|
||||
&.is-active, |
|
||||
&:hover { |
|
||||
color: #0056d6 !important; |
|
||||
&::after { |
|
||||
display: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
> .el-tabs__content { |
|
||||
padding: $content--padding; |
|
||||
.el-loading-mask { |
|
||||
z-index: 830; |
|
||||
} |
|
||||
> .el-tab-pane { |
|
||||
min-height: calc(#{$content--fill-height-tabs}); |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height-tabs} - 2px); |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
&.is-iframe { |
|
||||
height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); |
|
||||
margin: -$content--padding; |
|
||||
min-height: auto; |
|
||||
> .aui-card--fill { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header { |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
height: calc(#{$content--fill-height-tabs} - 2px); |
|
||||
margin: $content--padding; |
|
||||
min-height: auto; |
|
||||
border: $--border-base; |
|
||||
border-color: $--border-color-lighter; |
|
||||
border-radius: $--border-radius-base; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// quill富文本编辑器 |
|
||||
.ql-toolbar { |
|
||||
line-height: 20px; |
|
||||
&.ql-snow { |
|
||||
border-color: $--border-color-base; |
|
||||
} |
|
||||
.ql-formats { |
|
||||
margin: 0 5px; |
|
||||
} |
|
||||
} |
|
||||
.ql-container { |
|
||||
height: 150px; |
|
||||
&.ql-snow { |
|
||||
border-color: $--border-color-base; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-loading-mask { |
|
||||
z-index: 5001 !important; |
|
||||
} |
|
||||
|
|
||||
/* Page |
|
||||
------------------------------ */ |
|
||||
*[class*="aui-page__"] { |
|
||||
padding-top: 0; |
|
||||
.aui-content { |
|
||||
min-height: auto; |
|
||||
&__wrapper { |
|
||||
min-height: 100vh; |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
min-height: calc(100vh - #{$content--padding * 2} - 2px); |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-button--green { |
|
||||
color: #fff; |
|
||||
background-color: #22c1c3; |
|
||||
border-color: #22c1c3; |
|
||||
} |
|
||||
.el-button--green:hover { |
|
||||
color: #fff; |
|
||||
background-color: #05b1b4; |
|
||||
border-color: #05b1b4; |
|
||||
} |
|
||||
.el-button--green:focus { |
|
||||
color: #fff; |
|
||||
background-color: #22c1c3; |
|
||||
border-color: #22c1c3; |
|
||||
} |
|
||||
|
|
||||
.el-button--yellow:hover { |
|
||||
color: #fff; |
|
||||
background-color: #fa9200; |
|
||||
border-color: #fa9200; |
|
||||
} |
|
||||
.el-button--yellow:focus { |
|
||||
color: #fff; |
|
||||
background-color: #feb349; |
|
||||
border-color: #feb349; |
|
||||
} |
|
||||
.el-button--yellow { |
|
||||
color: #fff; |
|
||||
background-color: #feb349; |
|
||||
border-color: #feb349; |
|
||||
} |
|
||||
.el-button--blue:focus { |
|
||||
color: #fff; |
|
||||
background-color: #2195fe; |
|
||||
border-color: #2195fe; |
|
||||
} |
|
||||
.el-button--blue:hover { |
|
||||
color: #fff; |
|
||||
background-color: #0083fd; |
|
||||
border-color: #0083fd; |
|
||||
} |
|
||||
.el-button--blue { |
|
||||
color: #fff; |
|
||||
background-color: #2195fe; |
|
||||
border-color: #2195fe; |
|
||||
} |
|
||||
.el-button--red:focus { |
|
||||
color: #fff; |
|
||||
background-color: #fe6252; |
|
||||
border-color: #fe6252; |
|
||||
} |
|
||||
.el-button--red:hover { |
|
||||
color: #fff; |
|
||||
background-color: #fd341e; |
|
||||
border-color: #fd341e; |
|
||||
} |
|
||||
.el-button--red { |
|
||||
color: #fff; |
|
||||
background-color: #fe6252; |
|
||||
border-color: #fe6252; |
|
||||
} |
|
||||
|
|
||||
// 修改表格不换行的问题 |
|
||||
div.el-table div.cell { |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
word-wrap: normal; |
|
||||
} |
|
||||
|
|
||||
input::-webkit-outer-spin-button, |
|
||||
input::-webkit-inner-spin-button { |
|
||||
-webkit-appearance: none; |
|
||||
} |
|
||||
input[type="number"] { |
|
||||
-moz-appearance: textfield; |
|
||||
} |
|
||||
|
|
||||
// 默认输入框placeholder样式 |
|
||||
html .el-input.is-disabled .el-input__inner, |
|
||||
html .el-textarea.is-disabled textarea.el-textarea__inner { |
|
||||
color: #333; |
|
||||
background-color: rgba(#000, 0.01); |
|
||||
border-color: rgba(#000, 0.02); |
|
||||
resize: none; |
|
||||
&::placeholder { |
|
||||
// color: rgba(#fff, 0); |
|
||||
} |
|
||||
} |
|
||||
html .el-checkbox.is-disabled.is-checked .el-checkbox__label { |
|
||||
color: #333; |
|
||||
} |
|
||||
html .el-form-item__label { |
|
||||
&::after { |
|
||||
content: " :"; |
|
||||
display: inline; |
|
||||
color: #333; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.g-cnt-wrap { |
|
||||
padding: 12px 6px; |
|
||||
} |
|
||||
File diff suppressed because it is too large
@ -1,853 +0,0 @@ |
|||||
*, |
|
||||
*:before, |
|
||||
*:after { |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
body { |
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, |
|
||||
sans-serif; |
|
||||
font-size: $--font-size-base; |
|
||||
line-height: $base--line-height; |
|
||||
color: $--color-text-primary; |
|
||||
// background-color: #fff; |
|
||||
} |
|
||||
a { |
|
||||
color: mix(#fff, $--color-primary, 20%); |
|
||||
text-decoration: none; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: $--color-primary; |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
} |
|
||||
img { |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
:focus, |
|
||||
:hover { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
/* Utils |
|
||||
------------------------------ */ |
|
||||
[v-cloak] { |
|
||||
display: none; |
|
||||
} |
|
||||
.clearfix:before, |
|
||||
.clearfix:after { |
|
||||
content: " "; |
|
||||
display: table; |
|
||||
} |
|
||||
.clearfix:after { |
|
||||
clear: both; |
|
||||
} |
|
||||
.fr { |
|
||||
float: right !important; |
|
||||
} |
|
||||
.fl { |
|
||||
float: left !important; |
|
||||
} |
|
||||
.fi { |
|
||||
float: initial !important; |
|
||||
} |
|
||||
.m-auto { |
|
||||
margin: auto !important; |
|
||||
} |
|
||||
.mt-auto { |
|
||||
margin-top: auto !important; |
|
||||
} |
|
||||
.mr-auto { |
|
||||
margin-right: auto !important; |
|
||||
} |
|
||||
.mb-auto { |
|
||||
margin-bottom: auto !important; |
|
||||
} |
|
||||
.ml-auto { |
|
||||
margin-left: auto !important; |
|
||||
} |
|
||||
.text-right { |
|
||||
text-align: right !important; |
|
||||
} |
|
||||
.text-center { |
|
||||
text-align: center !important; |
|
||||
} |
|
||||
.text-left { |
|
||||
text-align: left !important; |
|
||||
} |
|
||||
.w-percent-100 { |
|
||||
width: 100% !important; |
|
||||
} |
|
||||
.base-line-height { |
|
||||
line-height: $base--line-height !important; |
|
||||
} |
|
||||
|
|
||||
/* Reset element-ui |
|
||||
------------------------------ */ |
|
||||
.aui-wrapper { |
|
||||
.el-card + .el-card { |
|
||||
margin-top: 15px; |
|
||||
} |
|
||||
.el-input__prefix .el-input__icon { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
.el-date-editor .el-range-separator { |
|
||||
width: 8%; |
|
||||
} |
|
||||
.el-table th { |
|
||||
color: $--color-text-primary; |
|
||||
background-color: $--background-color-base; |
|
||||
} |
|
||||
.el-pagination { |
|
||||
margin-top: 15px; |
|
||||
text-align: right; |
|
||||
} |
|
||||
.el-table__expand-icon { |
|
||||
display: inline-block; |
|
||||
width: 14px; |
|
||||
vertical-align: middle; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Common |
|
||||
------------------------------ */ |
|
||||
// 图标 |
|
||||
.icon-svg { |
|
||||
width: 1em; |
|
||||
height: 1em; |
|
||||
fill: currentColor; |
|
||||
vertical-align: middle; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
// 卡片 |
|
||||
.aui-card--fill .el-card__header { |
|
||||
height: $content--card-header-height; |
|
||||
line-height: $content--card-header-height - 36px; |
|
||||
} |
|
||||
.aui-card__title { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
// 表单 |
|
||||
.aui-form__label-icon { |
|
||||
display: inline-block; |
|
||||
margin: 0 3px; |
|
||||
vertical-align: middle; |
|
||||
font-size: 18px; |
|
||||
color: $--color-text-secondary; |
|
||||
} |
|
||||
// 按钮 |
|
||||
.aui-button--dashed { |
|
||||
border-style: dashed; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
&-add { |
|
||||
> span > *[class*="el-icon-"], |
|
||||
> span > *[class*="icon"] { |
|
||||
vertical-align: middle; |
|
||||
font-size: 18px; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// 主题工具 |
|
||||
.aui-theme-tools { |
|
||||
position: fixed; |
|
||||
top: $navbar--height + $content--tabs-header-height + 15px; |
|
||||
right: -210px; |
|
||||
bottom: 0; |
|
||||
z-index: 1010; |
|
||||
width: 210px; |
|
||||
transition: right 0.3s; |
|
||||
&--open { |
|
||||
right: 0; |
|
||||
} |
|
||||
&__toggle { |
|
||||
position: absolute; |
|
||||
top: 80px; |
|
||||
left: -40px; |
|
||||
width: 40px; |
|
||||
padding: 10px 8px; |
|
||||
text-align: center; |
|
||||
font-size: 20px; |
|
||||
border-right: 0; |
|
||||
border-radius: $--border-radius-base 0 0 $--border-radius-base; |
|
||||
color: #fff; |
|
||||
background-color: $--color-primary; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
&__content { |
|
||||
height: 100%; |
|
||||
padding: 5px 20px 20px; |
|
||||
border: 1px solid $--border-color-lighter; |
|
||||
border-radius: $--border-radius-base 0 0 $--border-radius-base; |
|
||||
background-color: #fff; |
|
||||
.el-radio { |
|
||||
display: block; |
|
||||
margin-left: 0 !important; |
|
||||
line-height: 28px; |
|
||||
} |
|
||||
} |
|
||||
&__item + &__item { |
|
||||
margin-top: 15px; |
|
||||
border-top: 1px solid $--border-color-lighter; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Layout |
|
||||
------------------------------ */ |
|
||||
.aui-wrapper { |
|
||||
position: relative; |
|
||||
padding-top: $navbar--height; |
|
||||
&.z-iframe { |
|
||||
padding-top: 0; |
|
||||
.aui-content--tabs { |
|
||||
padding-top: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Sidebar fold |
|
||||
------------------------------ */ |
|
||||
.aui-sidebar--fold { |
|
||||
.aui-navbar { |
|
||||
&__header, |
|
||||
&__brand { |
|
||||
width: $sidebar--width-fold; |
|
||||
} |
|
||||
&__brand { |
|
||||
&-lg { |
|
||||
display: none; |
|
||||
} |
|
||||
&-mini { |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
&__icon-menu--switch { |
|
||||
transform: rotateZ(180deg); |
|
||||
} |
|
||||
} |
|
||||
.aui-sidebar { |
|
||||
&__inner { |
|
||||
width: $sidebar--width-fold + 20px; |
|
||||
} |
|
||||
&, |
|
||||
&__menu { |
|
||||
width: $sidebar--width-fold; |
|
||||
} |
|
||||
&__menu > li > .el-submenu__title { |
|
||||
text-align: center; |
|
||||
} |
|
||||
&__menu-icon { |
|
||||
margin-right: 0; |
|
||||
font-size: 18px; |
|
||||
} |
|
||||
} |
|
||||
.aui-content { |
|
||||
&__wrapper { |
|
||||
margin-left: $sidebar--width-fold; |
|
||||
} |
|
||||
&--tabs > .el-tabs > .el-tabs__header { |
|
||||
left: $sidebar--width-fold; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.aui-sidebar--noside { |
|
||||
.aui-sidebar { |
|
||||
display: none !important; |
|
||||
} |
|
||||
.aui-content { |
|
||||
&__wrapper { |
|
||||
margin-left: 0 !important; |
|
||||
} |
|
||||
&--tabs > .el-tabs > .el-tabs__header { |
|
||||
left: 0 !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Navbar |
|
||||
------------------------------ */ |
|
||||
.aui-navbar { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
left: 0; |
|
||||
z-index: 1030; |
|
||||
display: flex; |
|
||||
align-items: stretch; |
|
||||
height: $navbar--height; |
|
||||
background-color: $--color-primary; |
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); |
|
||||
&--colorful { |
|
||||
.aui-navbar__body { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
.aui-navbar__menu { |
|
||||
> .el-menu-item, |
|
||||
> .el-submenu > .el-submenu__title { |
|
||||
color: #fff; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: #fff; |
|
||||
background-color: mix(#000, $--color-primary, 15%); |
|
||||
} |
|
||||
} |
|
||||
> .el-menu-item.is-active, |
|
||||
> .el-submenu.is-active > .el-submenu__title { |
|
||||
color: #fff; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
.el-menu-item i, |
|
||||
.el-submenu__title i, |
|
||||
.el-menu-item svg, |
|
||||
.el-submenu__title svg, |
|
||||
.el-menu-item .el-dropdown { |
|
||||
color: #fff !important; |
|
||||
} |
|
||||
.el-button { |
|
||||
color: #fff; |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
} |
|
||||
.aui-navbar__search { |
|
||||
&-txt { |
|
||||
.el-input__inner { |
|
||||
color: #fff; |
|
||||
border-color: #fff; |
|
||||
&::-webkit-input-placeholder { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__header { |
|
||||
position: relative; |
|
||||
width: $sidebar--width; |
|
||||
height: $navbar--height; |
|
||||
transition: width 0.3s; |
|
||||
} |
|
||||
&__brand { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
padding: 5px; |
|
||||
margin: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
font-size: 20px; |
|
||||
text-transform: uppercase; |
|
||||
white-space: nowrap; |
|
||||
color: #fff; |
|
||||
overflow: hidden; |
|
||||
transition: width 0.3s; |
|
||||
&-lg, |
|
||||
&-mini { |
|
||||
max-width: 100%; |
|
||||
color: #fff; |
|
||||
cursor: pointer; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: #fff; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
} |
|
||||
&-mini { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
&__body { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex: 1; |
|
||||
background-color: #fff; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
&__menu { |
|
||||
background-color: transparent; |
|
||||
border-bottom: 0 !important; |
|
||||
a:focus, |
|
||||
a:hover { |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
&.z-div { |
|
||||
.el-menu-item { |
|
||||
position: relative; |
|
||||
|
|
||||
&:last-child { |
|
||||
&::after { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&::after { |
|
||||
position: absolute; |
|
||||
content: ""; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto 0; |
|
||||
width: 1px; |
|
||||
height: 18px; |
|
||||
background-color: rgba(#ffffff, 0.6); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-menu-item, |
|
||||
.el-submenu > .el-submenu__title { |
|
||||
height: $navbar--height; |
|
||||
padding: 0 15px; |
|
||||
line-height: $navbar--height; |
|
||||
border-color: transparent !important; |
|
||||
} |
|
||||
.el-menu-item.is-active, |
|
||||
.el-submenu.is-active > .el-submenu__title { |
|
||||
color: $--color-text-secondary; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: $--color-text-primary; |
|
||||
} |
|
||||
} |
|
||||
.el-menu-item { |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
.aui-navbar__icon-menu { |
|
||||
color: $--color-text-primary; |
|
||||
} |
|
||||
.el-dropdown { |
|
||||
color: $--color-text-primary; |
|
||||
.el-icon-arrow-down { |
|
||||
transform: rotateZ(180deg); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
* { |
|
||||
vertical-align: initial; |
|
||||
} |
|
||||
.aui-navbar__icon-menu { |
|
||||
vertical-align: middle; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.el-dropdown { |
|
||||
color: $--color-text-secondary; |
|
||||
.el-icon-arrow-down { |
|
||||
width: auto; |
|
||||
font-size: 12px; |
|
||||
margin: 0 0 0 5px; |
|
||||
transition: transform 0.3s; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.el-badge { |
|
||||
display: inline; |
|
||||
z-index: 2; |
|
||||
&__content { |
|
||||
line-height: 16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__search { |
|
||||
> *[class*="el-icon-"], |
|
||||
> *[class*="icon"] { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
&-txt { |
|
||||
width: 0; |
|
||||
transition: width 0.3s, margin-left 0.3s; |
|
||||
&.is-show { |
|
||||
width: 210px; |
|
||||
margin-left: 8px; |
|
||||
} |
|
||||
.el-input__inner { |
|
||||
height: $navbar--height - 20px; |
|
||||
padding: 0; |
|
||||
line-height: $navbar--height - 20px; |
|
||||
border-color: $--color-text-primary; |
|
||||
border-top: 0; |
|
||||
border-right: 0; |
|
||||
border-left: 0; |
|
||||
border-radius: 0; |
|
||||
background: transparent; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__avatar { |
|
||||
.el-dropdown-link { |
|
||||
> img { |
|
||||
width: 36px; |
|
||||
height: auto; |
|
||||
margin-right: 5px; |
|
||||
border-radius: 100%; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Sidebar |
|
||||
------------------------------ */ |
|
||||
.aui-sidebar { |
|
||||
position: fixed; |
|
||||
top: $navbar--height; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
z-index: 1020; |
|
||||
width: $sidebar--width; |
|
||||
background-color: #fff; |
|
||||
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.05); |
|
||||
overflow: hidden; |
|
||||
transition: width 0.3s; |
|
||||
&--dark { |
|
||||
background-color: $sidebar--background-color-dark; |
|
||||
.aui-sidebar__menu, |
|
||||
> .el-menu--popup { |
|
||||
background-color: $sidebar--background-color-dark; |
|
||||
.el-menu-item, |
|
||||
.el-submenu > .el-submenu__title { |
|
||||
color: $sidebar--text-color-dark; |
|
||||
&:focus, |
|
||||
&:hover { |
|
||||
color: mix(#fff, $sidebar--text-color-dark, 50%); |
|
||||
background-color: mix(#fff, $sidebar--background-color-dark, 2.5%); |
|
||||
} |
|
||||
} |
|
||||
.el-menu, |
|
||||
.el-submenu.is-opened { |
|
||||
background-color: mix(#000, $sidebar--background-color-dark, 15%); |
|
||||
} |
|
||||
.el-menu-item.is-active, |
|
||||
.el-submenu.is-active > .el-submenu__title { |
|
||||
color: mix(#fff, $sidebar--text-color-dark, 80%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&__inner { |
|
||||
position: relative; |
|
||||
z-index: 1; |
|
||||
width: $sidebar--width + 20px; |
|
||||
height: 100%; |
|
||||
padding-bottom: 15px; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: scroll; |
|
||||
transition: width 0.3s; |
|
||||
} |
|
||||
&__menu { |
|
||||
width: $sidebar--width; |
|
||||
border-right: 0; |
|
||||
transition: width 0.3s; |
|
||||
.el-menu-item, |
|
||||
.el-submenu__title { |
|
||||
height: $sidebar--menu-item-height; |
|
||||
line-height: $sidebar--menu-item-height; |
|
||||
} |
|
||||
} |
|
||||
&__menu-icon { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
width: 24px !important; |
|
||||
margin-right: 5px; |
|
||||
text-align: center; |
|
||||
font-size: 16px; |
|
||||
color: inherit !important; |
|
||||
transition: font-size 0.3s; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* Content |
|
||||
------------------------------ */ |
|
||||
.aui-content { |
|
||||
position: relative; |
|
||||
padding: $content--padding; |
|
||||
// min-height: calc(100vh - #{$navbar--height}); |
|
||||
&__wrapper { |
|
||||
position: relative; |
|
||||
margin-left: $sidebar--width; |
|
||||
min-height: calc(100vh - #{$navbar--height}); |
|
||||
background-color: $content--background-color; |
|
||||
transition: margin-left 0.3s; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height} - 2px); |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
&--tabs { |
|
||||
padding: $content--tabs-header-height 0 0; |
|
||||
} |
|
||||
&--tabs-tools { |
|
||||
position: fixed; |
|
||||
top: $navbar--height; |
|
||||
right: 0; |
|
||||
z-index: 931; |
|
||||
min-width: $content--tabs-header-height; |
|
||||
height: $content--tabs-header-height; |
|
||||
padding: 0 12px; |
|
||||
text-align: center; |
|
||||
font-size: 16px; |
|
||||
line-height: $content--tabs-header-height; |
|
||||
background-color: $--background-color-base; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
&--tabs-icon-nav { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
> .el-tabs { |
|
||||
> .el-tabs__header { |
|
||||
position: fixed; |
|
||||
top: $navbar--height; |
|
||||
left: $sidebar--width; |
|
||||
right: 0; |
|
||||
z-index: 930; |
|
||||
padding: 0 55px 0 15px; |
|
||||
margin: 0; |
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
|
||||
background-color: #fff; |
|
||||
transition: left 0.3s; |
|
||||
> .el-tabs__nav-wrap { |
|
||||
margin-bottom: 0; |
|
||||
&:after { |
|
||||
display: none; |
|
||||
} |
|
||||
> .el-tabs__nav-next, |
|
||||
> .el-tabs__nav-prev { |
|
||||
line-height: $content--tabs-header-height; |
|
||||
} |
|
||||
> .el-tabs__nav-scroll > .el-tabs__nav { |
|
||||
& > .el-tabs__active-bar { |
|
||||
display: none; |
|
||||
} |
|
||||
& > .el-tabs__item { |
|
||||
height: $content--tabs-header-height; |
|
||||
padding: 0 15px; |
|
||||
line-height: $content--tabs-header-height; |
|
||||
border: 0; |
|
||||
color: $--color-text-regular; |
|
||||
&:focus, |
|
||||
&:hover, |
|
||||
&.is-active { |
|
||||
color: $--color-text-primary; |
|
||||
background-color: $--background-color-base; |
|
||||
&:after { |
|
||||
display: block; |
|
||||
} |
|
||||
> .el-icon-close { |
|
||||
color: $--color-text-primary; |
|
||||
} |
|
||||
} |
|
||||
&:after { |
|
||||
display: none; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
content: ""; |
|
||||
width: 100%; |
|
||||
height: 2px; |
|
||||
background-color: $--color-primary; |
|
||||
} |
|
||||
+ .el-tabs__item { |
|
||||
margin-left: 1px; |
|
||||
} |
|
||||
> .el-icon-close { |
|
||||
width: 14px; |
|
||||
margin-left: 15px; |
|
||||
color: $--color-text-secondary; |
|
||||
} |
|
||||
> i.icon { |
|
||||
display: inline-block; |
|
||||
vertical-align: middle; |
|
||||
font-size: 18px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
> .el-tabs__content { |
|
||||
padding: $content--padding; |
|
||||
.el-loading-mask { |
|
||||
z-index: 830; |
|
||||
} |
|
||||
> .el-tab-pane { |
|
||||
min-height: calc(#{$content--fill-height-tabs}); |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height-tabs} - 2px); |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
&.is-iframe { |
|
||||
height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2}); |
|
||||
margin: -$content--padding; |
|
||||
min-height: auto; |
|
||||
> .aui-card--fill { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header { |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
height: calc(#{$content--fill-height-tabs} - 2px); |
|
||||
margin: $content--padding; |
|
||||
min-height: auto; |
|
||||
border: $--border-base; |
|
||||
border-color: $--border-color-lighter; |
|
||||
border-radius: $--border-radius-base; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// quill富文本编辑器 |
|
||||
.ql-toolbar { |
|
||||
line-height: 20px; |
|
||||
&.ql-snow { |
|
||||
border-color: $--border-color-base; |
|
||||
} |
|
||||
.ql-formats { |
|
||||
margin: 0 5px; |
|
||||
} |
|
||||
} |
|
||||
.ql-container { |
|
||||
height: 150px; |
|
||||
&.ql-snow { |
|
||||
border-color: $--border-color-base; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-loading-mask { |
|
||||
z-index: 5001 !important; |
|
||||
} |
|
||||
|
|
||||
/* Page |
|
||||
------------------------------ */ |
|
||||
*[class*="aui-page__"] { |
|
||||
padding-top: 0; |
|
||||
.aui-content { |
|
||||
min-height: auto; |
|
||||
&__wrapper { |
|
||||
min-height: 100vh; |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__body { |
|
||||
min-height: calc(100vh - #{$content--padding * 2} - 2px); |
|
||||
} |
|
||||
> .aui-card--fill > .el-card__header + .el-card__body { |
|
||||
min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-button--green { |
|
||||
color: #fff; |
|
||||
background-color: #22c1c3; |
|
||||
border-color: #22c1c3; |
|
||||
} |
|
||||
.el-button--green:hover { |
|
||||
color: #fff; |
|
||||
background-color: #05b1b4; |
|
||||
border-color: #05b1b4; |
|
||||
} |
|
||||
.el-button--green:focus { |
|
||||
color: #fff; |
|
||||
background-color: #22c1c3; |
|
||||
border-color: #22c1c3; |
|
||||
} |
|
||||
|
|
||||
.el-button--yellow:hover { |
|
||||
color: #fff; |
|
||||
background-color: #fa9200; |
|
||||
border-color: #fa9200; |
|
||||
} |
|
||||
.el-button--yellow:focus { |
|
||||
color: #fff; |
|
||||
background-color: #feb349; |
|
||||
border-color: #feb349; |
|
||||
} |
|
||||
.el-button--yellow { |
|
||||
color: #fff; |
|
||||
background-color: #feb349; |
|
||||
border-color: #feb349; |
|
||||
} |
|
||||
.el-button--blue:focus { |
|
||||
color: #fff; |
|
||||
background-color: #2195fe; |
|
||||
border-color: #2195fe; |
|
||||
} |
|
||||
.el-button--blue:hover { |
|
||||
color: #fff; |
|
||||
background-color: #0083fd; |
|
||||
border-color: #0083fd; |
|
||||
} |
|
||||
.el-button--blue { |
|
||||
color: #fff; |
|
||||
background-color: #2195fe; |
|
||||
border-color: #2195fe; |
|
||||
} |
|
||||
.el-button--red:focus { |
|
||||
color: #fff; |
|
||||
background-color: #fe6252; |
|
||||
border-color: #fe6252; |
|
||||
} |
|
||||
.el-button--red:hover { |
|
||||
color: #fff; |
|
||||
background-color: #fd341e; |
|
||||
border-color: #fd341e; |
|
||||
} |
|
||||
.el-button--red { |
|
||||
color: #fff; |
|
||||
background-color: #fe6252; |
|
||||
border-color: #fe6252; |
|
||||
} |
|
||||
|
|
||||
// 修改表格不换行的问题 |
|
||||
div.el-table div.cell { |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
word-wrap: normal; |
|
||||
} |
|
||||
|
|
||||
input::-webkit-outer-spin-button, |
|
||||
input::-webkit-inner-spin-button { |
|
||||
-webkit-appearance: none; |
|
||||
} |
|
||||
input[type="number"] { |
|
||||
-moz-appearance: textfield; |
|
||||
} |
|
||||
|
|
||||
// 默认输入框placeholder样式 |
|
||||
html .el-input.is-disabled .el-input__inner, |
|
||||
html .el-textarea.is-disabled textarea.el-textarea__inner { |
|
||||
color: #333; |
|
||||
background-color: rgba(#000, 0.01); |
|
||||
border-color: rgba(#000, 0.02); |
|
||||
resize: none; |
|
||||
&::placeholder { |
|
||||
// color: rgba(#fff, 0); |
|
||||
} |
|
||||
} |
|
||||
html .el-checkbox.is-disabled.is-checked .el-checkbox__label { |
|
||||
color: #333; |
|
||||
} |
|
||||
html .el-form-item__label { |
|
||||
&::after { |
|
||||
content: " :"; |
|
||||
display: inline; |
|
||||
color: #333; |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue