jiangyy
3 years ago
14 changed files with 816 additions and 663 deletions
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 224 KiB |
@ -1,684 +1,113 @@ |
|||
@import "~@/element-ui/theme-variables.scss"; |
|||
@import "./shuju-variables.scss"; |
|||
@import "./c/config"; |
|||
@import "./c/function"; |
|||
@import "./modules/visual/c/common.scss"; |
|||
|
|||
.g-main { |
|||
padding: 10px 20px 10px; |
|||
.g-fx { |
|||
background-color: #00023a; |
|||
} |
|||
|
|||
.m-iframe { |
|||
position: relative; |
|||
box-sizing: content-box; |
|||
width: calc(100% + 20px); |
|||
margin: -10px -20px -10px; |
|||
z-index: 100; |
|||
} |
|||
|
|||
/* Reset element-ui |
|||
------------------------------ */ |
|||
.g-bd { |
|||
background-image: url(../img/shuju/bg.jpg); |
|||
background-size: cover; |
|||
background-position: center 0; |
|||
height: 100%; |
|||
@include scrollBar; |
|||
|
|||
.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%; |
|||
.i-corner { |
|||
position: absolute; |
|||
z-index: 0; |
|||
width: 121px; |
|||
&.z-left-top { |
|||
top: 15px; |
|||
left: 15px; |
|||
} |
|||
.el-table th { |
|||
color: $--color-text-primary; |
|||
background-color: $--background-color-base; |
|||
&.z-left-bottom { |
|||
bottom: 15px; |
|||
left: 15px; |
|||
} |
|||
.el-pagination { |
|||
margin-top: 15px; |
|||
text-align: right; |
|||
&.z-right-top { |
|||
top: 15px; |
|||
right: 15px; |
|||
} |
|||
.el-table__expand-icon { |
|||
display: inline-block; |
|||
width: 14px; |
|||
vertical-align: middle; |
|||
margin-right: 5px; |
|||
&.z-right-bottom { |
|||
bottom: 15px; |
|||
right: 15px; |
|||
} |
|||
} |
|||
|
|||
/* 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 |
|||
------------------------------ */ |
|||
.g-bd { |
|||
.m-topnav { |
|||
position: relative; |
|||
padding-top: $navbar--height; |
|||
|
|||
/* Sidebar fold |
|||
------------------------------ */ |
|||
&.z-sidebar--fold { |
|||
.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; |
|||
} |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: $sidebar--width-fold; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: $sidebar--width-fold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-sidebar--noside { |
|||
.aui-sidebar { |
|||
display: none !important; |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: 0 !important; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-iframe { |
|||
padding-top: 0; |
|||
.aui-content--tabs { |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Navbar |
|||
------------------------------ */ |
|||
.m-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); |
|||
background: linear-gradient(180deg, #00023f, #176dec); |
|||
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); |
|||
font-size: 19px; |
|||
.el-menu-item { |
|||
font-size: 19px; |
|||
} |
|||
|
|||
.navbar--colorful { |
|||
.navbar__body { |
|||
background-color: transparent; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
.navbar__search { |
|||
&-txt { |
|||
.el-input__inner { |
|||
color: #fff; |
|||
border-color: #fff; |
|||
&::-webkit-input-placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.navbar__header { |
|||
position: relative; |
|||
width: $sidebar--width; |
|||
height: $navbar--height; |
|||
transition: width 0.3s; |
|||
} |
|||
.navbar__brand { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px 20px; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
white-space: nowrap; |
|||
// overflow: hidden; |
|||
transition: width 0.3s; |
|||
font-family: FZZCHJW; |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 101px; |
|||
background-image: url(../images/shuju/main/top-bg.png); |
|||
background-repeat: no-repeat; |
|||
background-position: top center; |
|||
background-size: 100%; |
|||
.title { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
margin: 0 auto; |
|||
line-height: 70px; |
|||
text-align: center; |
|||
font-size: 32px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: rgba(#fff, 0.7); |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
z-index: 100000; |
|||
display: block; |
|||
bottom: -10px; |
|||
left: -920px; |
|||
right: -1000px; |
|||
margin: 0 auto; |
|||
width: 400px; |
|||
height: 20px; |
|||
// background-color: #fff; |
|||
background-image: url(../img/shuju/flash.png); |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
|
|||
&-lg, |
|||
&-mini { |
|||
max-width: 100%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
&-mini { |
|||
display: none; |
|||
} |
|||
} |
|||
.navbar__body { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
// background-color: #fff; |
|||
background-color: transparent; |
|||
// overflow: hidden; |
|||
} |
|||
.navbar__menu { |
|||
background-color: transparent; |
|||
border-bottom: 0 !important; |
|||
|
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
&.z-div { |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
position: relative; |
|||
.nav-list { |
|||
position: absolute; |
|||
top: 40px; |
|||
left: 40px; |
|||
display: flex; |
|||
width: 500px; |
|||
|
|||
&.is-active, |
|||
&.z-right { |
|||
left: auto; |
|||
right: 40px; |
|||
.nav-item { |
|||
background-image: url(../images/shuju/main/nav-right.png); |
|||
&.z-on { |
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
display: block; |
|||
bottom: -6px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 50px; |
|||
height: 4px; |
|||
border: 0; |
|||
border-radius: 0 0 2px 2px; |
|||
background: #1effff; |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
&::after { |
|||
display: none; |
|||
background-image: url(../images/shuju/main/nav-right-on.png); |
|||
} |
|||
} |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
width: 1px; |
|||
height: 18px; |
|||
background-color: rgba(#ffffff, 0.6); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sub-menu { |
|||
.nav-item { |
|||
position: relative; |
|||
float: left; |
|||
width: 120px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
background-image: url(../images/shuju/main/nav-left.png); |
|||
background-size: 100%; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
&:hover { |
|||
.sub-menu-list { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.sub-menu-list { |
|||
position: absolute; |
|||
display: none; |
|||
padding: 0 10px; |
|||
width: 160px; |
|||
left: -100px; |
|||
right: -100px; |
|||
margin: 0 auto; |
|||
background-color: rgba(#176dec, 0.9); |
|||
text-align: center; |
|||
cursor: pointer; |
|||
> div { |
|||
border-top: 1px dashed rgba(#fff, 0.4); |
|||
color: rgba(#fff, 0.7); |
|||
transition: all ease 0.5s; |
|||
padding: 10px 0; |
|||
line-height: $navbar--height * 0.5; |
|||
color: rgba(#fff, 0.85); |
|||
|
|||
&.z-on { |
|||
font-weight: bold; |
|||
} |
|||
&.z-on, |
|||
&:hover { |
|||
color: #ffd; |
|||
} |
|||
} |
|||
span { |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
|
|||
.el-menu-item, |
|||
.sub-menu { |
|||
height: $navbar--height; |
|||
padding: 0 15px; |
|||
line-height: $navbar--height; |
|||
border-color: transparent !important; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item.is-active, |
|||
.sub-menu.z-on { |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
i { |
|||
color: #fff; |
|||
} |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: transparent !important; |
|||
|
|||
.navbar__icon-menu { |
|||
color: #fff; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
.el-icon-arrow-down { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
} |
|||
* { |
|||
vertical-align: initial; |
|||
} |
|||
.navbar__icon-menu { |
|||
vertical-align: middle; |
|||
font-size: 20px; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
.el-icon-arrow-down { |
|||
width: auto; |
|||
font-size: 16px; |
|||
margin: 0 0 0 5px; |
|||
transition: transform 0.3s; |
|||
} |
|||
} |
|||
} |
|||
.el-badge { |
|||
display: inline; |
|||
z-index: 2; |
|||
&__content { |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.navbar__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; |
|||
} |
|||
} |
|||
} |
|||
.navbar__avatar { |
|||
.el-dropdown-link { |
|||
> img { |
|||
width: 42px; |
|||
height: auto; |
|||
margin-right: 7px; |
|||
border-radius: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Content |
|||
------------------------------ */ |
|||
.g-cnt { |
|||
position: relative; |
|||
// padding: $content--padding; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: transparent; |
|||
|
|||
&__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); |
|||
} |
|||
&.z-on { |
|||
background-image: none; |
|||
&::before { |
|||
position: absolute; |
|||
z-index: -1; |
|||
content: ""; |
|||
display: block; |
|||
top: -2px; |
|||
left: -5px; |
|||
width: 132px; |
|||
height: 47px; |
|||
background-image: url(../images/shuju/main/nav-left-on.png); |
|||
background-size: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 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); |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,684 @@ |
|||
@import "~@/element-ui/theme-variables.scss"; |
|||
@import "./shuju-variables.scss"; |
|||
@import "./c/config"; |
|||
@import "./c/function"; |
|||
@import "./modules/visual/c/common.scss"; |
|||
|
|||
.g-main { |
|||
padding: 10px 20px 10px; |
|||
} |
|||
|
|||
.m-iframe { |
|||
position: relative; |
|||
box-sizing: content-box; |
|||
width: calc(100% + 20px); |
|||
margin: -10px -20px -10px; |
|||
z-index: 100; |
|||
} |
|||
|
|||
/* Reset element-ui |
|||
------------------------------ */ |
|||
.g-bd { |
|||
background-image: url(../img/shuju/bg.jpg); |
|||
background-size: cover; |
|||
background-position: center 0; |
|||
height: 100%; |
|||
@include scrollBar; |
|||
|
|||
.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 |
|||
------------------------------ */ |
|||
.g-bd { |
|||
position: relative; |
|||
padding-top: $navbar--height; |
|||
|
|||
/* Sidebar fold |
|||
------------------------------ */ |
|||
&.z-sidebar--fold { |
|||
.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; |
|||
} |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: $sidebar--width-fold; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: $sidebar--width-fold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-sidebar--noside { |
|||
.aui-sidebar { |
|||
display: none !important; |
|||
} |
|||
.g-cnt { |
|||
&__wrapper { |
|||
margin-left: 0 !important; |
|||
} |
|||
&--tabs > .el-tabs > .el-tabs__header { |
|||
left: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.z-iframe { |
|||
padding-top: 0; |
|||
.aui-content--tabs { |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Navbar |
|||
------------------------------ */ |
|||
.m-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); |
|||
background: linear-gradient(180deg, #00023f, #176dec); |
|||
box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); |
|||
font-size: 19px; |
|||
.el-menu-item { |
|||
font-size: 19px; |
|||
} |
|||
|
|||
.navbar--colorful { |
|||
.navbar__body { |
|||
background-color: transparent; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
.navbar__search { |
|||
&-txt { |
|||
.el-input__inner { |
|||
color: #fff; |
|||
border-color: #fff; |
|||
&::-webkit-input-placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.navbar__header { |
|||
position: relative; |
|||
width: $sidebar--width; |
|||
height: $navbar--height; |
|||
transition: width 0.3s; |
|||
} |
|||
.navbar__brand { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px 20px; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
white-space: nowrap; |
|||
// overflow: hidden; |
|||
transition: width 0.3s; |
|||
font-family: FZZCHJW; |
|||
color: #ffffff; |
|||
background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: rgba(#fff, 0.7); |
|||
|
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
z-index: 100000; |
|||
display: block; |
|||
bottom: -10px; |
|||
left: -920px; |
|||
right: -1000px; |
|||
margin: 0 auto; |
|||
width: 400px; |
|||
height: 20px; |
|||
// background-color: #fff; |
|||
background-image: url(../img/shuju/flash.png); |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
|
|||
&-lg, |
|||
&-mini { |
|||
max-width: 100%; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
&-mini { |
|||
display: none; |
|||
} |
|||
} |
|||
.navbar__body { |
|||
position: relative; |
|||
display: flex; |
|||
flex: 1; |
|||
// background-color: #fff; |
|||
background-color: transparent; |
|||
// overflow: hidden; |
|||
} |
|||
.navbar__menu { |
|||
background-color: transparent; |
|||
border-bottom: 0 !important; |
|||
|
|||
a:focus, |
|||
a:hover { |
|||
text-decoration: none; |
|||
} |
|||
&.z-div { |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
position: relative; |
|||
|
|||
&.is-active, |
|||
&.z-on { |
|||
&::before { |
|||
position: absolute; |
|||
content: ""; |
|||
display: block; |
|||
bottom: -6px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: 0 auto; |
|||
width: 50px; |
|||
height: 4px; |
|||
border: 0; |
|||
border-radius: 0 0 2px 2px; |
|||
background: #1effff; |
|||
} |
|||
} |
|||
|
|||
&: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); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sub-menu { |
|||
position: relative; |
|||
float: left; |
|||
cursor: pointer; |
|||
&:hover { |
|||
.sub-menu-list { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.sub-menu-list { |
|||
position: absolute; |
|||
display: none; |
|||
padding: 0 10px; |
|||
width: 160px; |
|||
left: -100px; |
|||
right: -100px; |
|||
margin: 0 auto; |
|||
background-color: rgba(#176dec, 0.9); |
|||
text-align: center; |
|||
cursor: pointer; |
|||
> div { |
|||
border-top: 1px dashed rgba(#fff, 0.4); |
|||
color: rgba(#fff, 0.7); |
|||
transition: all ease 0.5s; |
|||
padding: 10px 0; |
|||
line-height: $navbar--height * 0.5; |
|||
|
|||
&.z-on { |
|||
font-weight: bold; |
|||
} |
|||
&.z-on, |
|||
&:hover { |
|||
color: #ffd; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-menu-item, |
|||
.sub-menu { |
|||
height: $navbar--height; |
|||
padding: 0 15px; |
|||
line-height: $navbar--height; |
|||
border-color: transparent !important; |
|||
color: #fff; |
|||
} |
|||
.el-menu-item.is-active, |
|||
.sub-menu.z-on { |
|||
color: #fff; |
|||
font-weight: bold; |
|||
} |
|||
.el-menu-item, |
|||
.sub-menu { |
|||
i { |
|||
color: #fff; |
|||
} |
|||
&:focus, |
|||
&:hover { |
|||
color: #fff; |
|||
background-color: transparent !important; |
|||
|
|||
.navbar__icon-menu { |
|||
color: #fff; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
.el-icon-arrow-down { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
} |
|||
* { |
|||
vertical-align: initial; |
|||
} |
|||
.navbar__icon-menu { |
|||
vertical-align: middle; |
|||
font-size: 20px; |
|||
} |
|||
.el-dropdown { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
.el-icon-arrow-down { |
|||
width: auto; |
|||
font-size: 16px; |
|||
margin: 0 0 0 5px; |
|||
transition: transform 0.3s; |
|||
} |
|||
} |
|||
} |
|||
.el-badge { |
|||
display: inline; |
|||
z-index: 2; |
|||
&__content { |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.navbar__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; |
|||
} |
|||
} |
|||
} |
|||
.navbar__avatar { |
|||
.el-dropdown-link { |
|||
> img { |
|||
width: 42px; |
|||
height: auto; |
|||
margin-right: 7px; |
|||
border-radius: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Content |
|||
------------------------------ */ |
|||
.g-cnt { |
|||
position: relative; |
|||
// padding: $content--padding; |
|||
min-height: calc(100vh - #{$navbar--height}); |
|||
background-color: transparent; |
|||
|
|||
&__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); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue