dai
3 years ago
23 changed files with 1191 additions and 333 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 259 B |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 581 B |
|
After Width: | Height: | Size: 681 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,893 @@ |
|||
@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; |
|||
} |
|||
|
|||
*, |
|||
*: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: #e8f6ff; |
|||
} |
|||
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: linear-gradient(180deg, #02245f, #008efb); |
|||
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; |
|||
font-size: 33px; |
|||
font-weight: 800; |
|||
color: transparent; |
|||
// text-shadow: 0px 1px 4px rgba(2, 39, 100, 0.1); |
|||
background: linear-gradient(180deg, #ffffff 30%, #98cafd 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
-webkit-box-reflect: below -45% -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, 0.5)); |
|||
&-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; |
|||
overflow: hidden; |
|||
transition: width 0.3s; |
|||
background-color: transparent; |
|||
padding: 8px; |
|||
|
|||
.aui-sidebar_wrap { |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background: #00213f; |
|||
border: 1px solid #b8c5d5; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
&__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 { |
|||
background-color: transparent; |
|||
|
|||
.el-menu { |
|||
background-color: transparent; |
|||
.el-menu-item { |
|||
&:hover { |
|||
background-color: transparent; |
|||
} |
|||
&.is-active { |
|||
background-color: transparent; |
|||
background-image: url("~@/assets/imgs/common/sider-nav-on.png"); |
|||
background-size: 210px 30px; |
|||
background-position: -7px center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
} |
|||
} |
|||
> div { |
|||
> .el-menu-item, |
|||
> .el-submenu > .el-submenu__title { |
|||
margin-bottom: 3px; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
background: linear-gradient(0deg, #a6c3d0, #ffffff); |
|||
border: 1px solid #b8c5d5; |
|||
border-radius: 3px; |
|||
font-size: 18px; |
|||
font-weight: 800; |
|||
color: #002765; |
|||
font-family: "思源宋体"; |
|||
* { |
|||
vertical-align: inherit; |
|||
line-height: 42px; |
|||
} |
|||
} |
|||
> .el-submenu > .el-submenu__title .el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
|
|||
> .el-submenu { |
|||
.i-arrow { |
|||
width: 11px; |
|||
margin-left: 3px; |
|||
margin-right: 7px; |
|||
} |
|||
.i-down { |
|||
display: none; |
|||
} |
|||
&.is-opened { |
|||
.i-down { |
|||
display: inline-block; |
|||
} |
|||
.i-right { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.el-menu-item, |
|||
.el-submenu__title { |
|||
height: $sidebar--menu-item-height; |
|||
line-height: $sidebar--menu-item-height; |
|||
color: #fff; |
|||
} |
|||
} |
|||
&__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; |
|||
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; |
|||
} |
|||
} |
|||
@ -1,85 +0,0 @@ |
|||
<template> |
|||
<div class="aui-theme-tools" v-show="false" :class="{ 'aui-theme-tools--open': isOpen }"> |
|||
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen"> |
|||
<svg class="icon-svg" aria-hidden="true"> |
|||
<use xlink:href="#icon-setting"></use> |
|||
</svg> |
|||
</div> |
|||
<div class="aui-theme-tools__content"> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Navbar</h3> |
|||
<el-checkbox |
|||
v-model="$store.state.navbarLayoutType" |
|||
true-label="colorful" |
|||
>colorful 鲜艳</el-checkbox |
|||
> |
|||
</div> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Sidebar</h3> |
|||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark" |
|||
>dark 黑色</el-checkbox |
|||
> |
|||
</div> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Theme</h3> |
|||
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle"> |
|||
<el-radio |
|||
v-for="item in themeList" |
|||
:key="item.name" |
|||
:label="item.name" |
|||
>{{ `${item.name} ${item.desc}` }}</el-radio |
|||
> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isOpen: false, |
|||
themeList: require('@/element-ui/config.js'), |
|||
themeColor: '' |
|||
} |
|||
}, |
|||
created() { |
|||
let color = window.localStorage.getItem('themeColor') || 'blue' |
|||
this.themeColorChangeHandle(color) |
|||
this.themeColor = color |
|||
}, |
|||
methods: { |
|||
themeColorChangeHandle(val) { |
|||
window.localStorage.setItem('themeColor', val) |
|||
|
|||
var styleList = [ |
|||
{ |
|||
id: 'J_elementTheme', |
|||
url: `${ |
|||
process.env.BASE_URL |
|||
}element-theme/${val}/index.css?t=${new Date().getTime()}` |
|||
}, |
|||
{ |
|||
id: 'J_auiTheme', |
|||
url: `${ |
|||
process.env.BASE_URL |
|||
}element-theme/${val}/aui.css?t=${new Date().getTime()}` |
|||
} |
|||
] |
|||
for (var i = 0; i < styleList.length; i++) { |
|||
var el = document.querySelector(`#${styleList[i].id}`) |
|||
if (el) { |
|||
el.href = styleList[i].url |
|||
continue |
|||
} |
|||
el = document.createElement('link') |
|||
el.id = styleList[i].id |
|||
el.href = styleList[i].url |
|||
el.rel = 'stylesheet' |
|||
document.querySelector('head').appendChild(el) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,85 +0,0 @@ |
|||
<template> |
|||
<div class="aui-theme-tools" v-show="false" :class="{ 'aui-theme-tools--open': isOpen }"> |
|||
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen"> |
|||
<svg class="icon-svg" aria-hidden="true"> |
|||
<use xlink:href="#icon-setting"></use> |
|||
</svg> |
|||
</div> |
|||
<div class="aui-theme-tools__content"> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Navbar</h3> |
|||
<el-checkbox |
|||
v-model="$store.state.navbarLayoutType" |
|||
true-label="colorful" |
|||
>colorful 鲜艳</el-checkbox |
|||
> |
|||
</div> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Sidebar</h3> |
|||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark" |
|||
>dark 黑色</el-checkbox |
|||
> |
|||
</div> |
|||
<div class="aui-theme-tools__item"> |
|||
<h3>Theme</h3> |
|||
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle"> |
|||
<el-radio |
|||
v-for="item in themeList" |
|||
:key="item.name" |
|||
:label="item.name" |
|||
>{{ `${item.name} ${item.desc}` }}</el-radio |
|||
> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isOpen: false, |
|||
themeList: require('@/element-ui/config.js'), |
|||
themeColor: '' |
|||
} |
|||
}, |
|||
created() { |
|||
let color = window.localStorage.getItem('themeColor') || 'blue' |
|||
this.themeColorChangeHandle(color) |
|||
this.themeColor = color |
|||
}, |
|||
methods: { |
|||
themeColorChangeHandle(val) { |
|||
window.localStorage.setItem('themeColor', val) |
|||
|
|||
var styleList = [ |
|||
{ |
|||
id: 'J_elementTheme', |
|||
url: `${ |
|||
process.env.BASE_URL |
|||
}element-theme/${val}/index.css?t=${new Date().getTime()}` |
|||
}, |
|||
{ |
|||
id: 'J_auiTheme', |
|||
url: `${ |
|||
process.env.BASE_URL |
|||
}element-theme/${val}/aui.css?t=${new Date().getTime()}` |
|||
} |
|||
] |
|||
for (var i = 0; i < styleList.length; i++) { |
|||
var el = document.querySelector(`#${styleList[i].id}`) |
|||
if (el) { |
|||
el.href = styleList[i].url |
|||
continue |
|||
} |
|||
el = document.createElement('link') |
|||
el.id = styleList[i].id |
|||
el.href = styleList[i].url |
|||
el.rel = 'stylesheet' |
|||
document.querySelector('head').appendChild(el) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue