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