阅行客电子档案
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1032 lines
20 KiB

@import "variables";
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
// @mixin scrollBar {
// &::-webkit-scrollbar-track-piece {
// background: #d3dce6;
// }
// ::-webkit-scrollbar-corner {
// background-color: #021941;
// }
// &::-webkit-scrollbar {
// width: 6px;
// }
// &::-webkit-scrollbar-thumb {
// background: #99a9bf;
// border-radius: 20px;
// }
// }
@mixin btn_blue_style{
[data-theme="light"] & {
background-color: #0348F3;
border-color: #0348F3;
color: #fff !important;
}
}
@mixin btn_blue_hover{
[data-theme="light"] & {
background-color: #4579FA;
border-color: #4579FA;
}
}
@mixin btn_white_style{
[data-theme="light"] & {
background-color: #fff;
border-color: #E3E7EE;
color: #545B65 !important;
}
}
@mixin btn_white_hover{
[data-theme="light"] & {
background-color: #F7F9FA;
}
}
@mixin btn_hover{
[data-theme="dark"] & {
background-color: #02255F;
}
[data-theme="light"] & {
background-color: #0348F3;
}
}
@mixin scrollBar-bg{
[data-theme="dark"] & {
background-color: #13439E;
}
[data-theme="light"] & {
background-color:#0348F3;
}
}
@mixin font_color($color) {
color: $color;
[data-theme="dark"] & {
color: $font-color-dark;
}
[data-theme="light"] & {
color: $font-color-light;
}
}
@mixin shadow-set(){
[data-theme="dark"] & {
box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
}
}
// siderBar
@mixin siderBar-set(){
[data-theme="dark"] & {
background: url(~@/assets/images/sidebar_bg.png) #031435 no-repeat right bottom;
background-size: contain;
box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
}
[data-theme="light"] & {
background: linear-gradient(180deg, #2B67DD 0%, #4180FB 100%);
color: #fff;
}
}
@mixin siderBar-submenu-set(){
[data-theme="light"] & {
color: rgba(255,255,255,0.8) !important;
}
}
@mixin siderBar-submenu-set-acitve(){
[data-theme="dark"] & {
background: $subMenuHover !important;
}
[data-theme="light"] & {
background: linear-gradient(270deg, #021C5E 0%, rgba(2,28,94,0) 100%) !important;
color: #fff !important;
font-weight: bold !important;
border-right: 4px solid #33D0FF !important;
}
}
@mixin siderBar-title-set-acitve{
[data-theme="dark"] & {
color: $mainColor !important;
background-image: $menuActiveBg !important;
&::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 60px;
background-color: $mainColor;
}
}
}
@mixin siderBar-icon{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #fff;
}
}
@mixin breadcrumb-bg{
[data-theme="dark"] & {
background-color: $background-color-dark;
}
[data-theme="light"] & {
background-color: $main-bg-light;
}
}
@mixin breadcrumb-text{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #9098A4;
}
}
@mixin breadcrumb-text-active{
[data-theme="dark"] & {
color: #fff;
}
[data-theme="light"] & {
color: #1F55EB;
}
}
@mixin main_bg_color() {
[data-theme="dark"] & {
background-color: $background-color-dark;
@include font-color($font-color-dark);
}
[data-theme="light"] & {
background-color: transparent;
@include font-color($font-color-light);
}
}
@mixin dropdown_bg() {
[data-theme="dark"] & {
box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
background: #02255F;
}
[data-theme="light"] & {
box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17);
background: #fff;
}
}
@mixin dropdown_bg_hover() {
[data-theme="dark"] & {
background: #13439E;
color: #fff;
}
[data-theme="light"] & {
background: #F5F9FC;
color: #0348F3;
}
}
@mixin icon_color() {
[data-theme="dark"] & {
color: $icon-color-dark;
}
[data-theme="light"] & {
color: $icon-color-light;
}
}
@mixin svg_color() {
[data-theme="dark"] & {
fill: #339cff;
}
[data-theme="light"] & {
fill: #0348F3;
}
}
@mixin bg_color() {
[data-theme="dark"] & {
background-color: $background-color-dark;
@include font-color($font-color-dark);
}
[data-theme="light"] & {
background-color: $background-color-light;
@include font-color($font-color-light);
}
}
// 内容模块 背景-线条-font设置
@mixin user_cont() {
[data-theme="dark"] & {
background-color: $background-color-dark;
border: $mainContainerBorder;
@include font-color($font-color-dark);
}
[data-theme="light"] & {
background-color: $background-color-light;
border: none;
@include font-color($font-color-light);
}
}
@mixin before_line_color() {
[data-theme="dark"] & {
border-top: 1px solid $mainColor;
border-left: 1px solid $mainColor;
}
[data-theme="light"] & {
border-top: none;
border-left: none;
}
}
@mixin after_line_color() {
[data-theme="dark"] & {
border-right: 1px solid $mainColor;
border-bottom: 1px solid $mainColor;
}
[data-theme="light"] & {
border-right: none;
border-bottom: none;
}
}
@mixin left_bottom_line_color() {
[data-theme="dark"] & {
border-bottom: 1px solid $mainColor;
border-left: 1px solid $mainColor;
}
[data-theme="light"] & {
border-left: none;
border-bottom: none;
}
}
@mixin right_top_line_color() {
[data-theme="dark"] & {
border-right: 1px solid $mainColor;
border-top: 1px solid $mainColor;
}
[data-theme="light"] & {
border-right: none;
border-top: none;
}
}
@mixin box_padding{
[data-theme="dark"] & {
padding: 0 !important;
margin-top: 20px;
}
[data-theme="light"] & {
padding: 20px !important;
}
}
@mixin tree_height_min{
[data-theme="dark"] & {
min-height: calc(100vh - 210px);
}
[data-theme="light"] & {
min-height: calc(100vh - 230px);
}
}
@mixin tree_tab_style{
[data-theme="dark"] & {
border-bottom: 1px solid $mainColor;
}
[data-theme="light"] & {
border-bottom: 1px solid #E3E7EE;
}
}
@mixin tree_tab_item{
[data-theme="dark"] & {
padding: 15px 0 12px 0;
}
[data-theme="light"] & {
color: #A6ADB6;
padding-bottom: 12px;
}
}
@mixin tree_tab_item_active{
[data-theme="dark"] & {
border-bottom: 3px solid #3a99fd;
}
[data-theme="light"] & {
color: #000;
border-bottom: 3px solid #0348F3;
}
}
@mixin tree_no_header{
[data-theme="dark"] & {
margin-top:122px;
min-height: calc(100vh - 262px);
padding: 0 20px;
}
}
@mixin table_height_min{
[data-theme="dark"] & {
min-height: calc(100vh - 260px);
}
[data-theme="light"] & {
min-height: calc(100vh - 280px);
}
}
@mixin tab_height_min{
[data-theme="dark"] & {
min-height: calc(100vh - 200px);
}
[data-theme="light"] & {
min-height: calc(100vh - 178px);
}
}
@mixin input_style{
[data-theme="dark"] & {
border: 1px solid $mainColor;
color: #fff;
}
[data-theme="light"] & {
border: 1px solid #E3E7EE;
color: #0C0E1E;
}
}
@mixin tree_font_color{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin tree_style{
@include tree_font_color;
[data-theme="dark"] & {
padding: 0 30px !important;
}
}
@mixin tree_children_font{
[data-theme="light"] & {
color: #545B65;
}
}
@mixin tree_children_icon_font{
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin tree_children_padding{
[data-theme="light"] & {
padding: 0 !important;
}
}
@mixin tree_hover{
[data-theme="dark"] & {
background-color: transparent !important;
background-image: $subMenuActiveBg;
}
[data-theme="light"] & {
background-color: #E8F2FF !important;
color: #0348F3;
}
}
@mixin tree_active{
[data-theme="dark"] & {
background-image: $subMenuActiveBg !important;
color: #fff;
}
[data-theme="light"] & {
background-color: #E8F2FF !important;
color: #0348F3 !important;
}
}
@mixin elButton-style{
[data-theme="dark"] & {
border-color: $mainColor;
color: #fff;
}
[data-theme="light"] & {
font-weight: bold;
border-color: #0348F3;
color: #0348F3;
}
}
@mixin elButton-disabled-style{
[data-theme="dark"] & {
color: #13439E;
background-color: transparent;
border-color: #13439E;
}
[data-theme="light"] & {
color: #B4C8FB;
border-color: #B4C8FB;
background-color: #F2F5FE;
}
}
@mixin elButton-hover-style{
[data-theme="dark"] & {
color: #fff;
background-color: #02255F;
border-color: $mainColor;
}
[data-theme="light"] & {
background-color: #E8F2FF;
}
}
// el-table
@mixin elTable-style{
[data-theme="dark"] & {
background-color: #02255f;
}
[data-theme="light"] & {
background-color: #F5F9FC;
}
}
@mixin elTable-font-style{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin elTable-td-font-style{
[data-theme="dark"] & {
color: $mainColor;
border-bottom: 1px dashed #113D72;
}
[data-theme="light"] & {
color: #545B65;
border-bottom: 1px solid #F5F9FC;
}
}
@mixin elTable-hover-style{
[data-theme="dark"] & {
color: #fff;
background-color: #13439E;
}
[data-theme="light"] & {
background-color: #EAF3FB;
color: #545B65;
}
}
@mixin checkbox-style{
[data-theme="dark"] & {
border-color: $mainColor;
}
[data-theme="light"] & {
border-color: #D6D8DD;
}
}
@mixin checkbox-disabled-style{
[data-theme="dark"] & {
border-color: $mainColor;
background: transparent;
}
[data-theme="light"] & {
border-color:#D6D8DD;
background-color: #E6E7E9;
&::after{
border-color:#D1D3D7;
}
}
}
@mixin checkbox-active-style{
[data-theme="dark"] & {
border-color: $mainColor;
background: transparent;
&::after{
border-color: $mainColor;
}
}
[data-theme="light"] & {
border-color:#0348F3;
background-color: #0348F3;
// border-color:#D6D8DD;
// background-color: #D6D8DD;
&::after{
border-color: #fff;
}
}
}
// el-pagination
@mixin pagination-font{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #545B65;
}
}
@mixin pagination-input{
@include pagination-font;
[data-theme="dark"] & {
border-color: $mainColor;
}
[data-theme="light"] & {
border-color: #E3E7EE;
}
}
@mixin pagination-active{
[data-theme="dark"] & {
background-color: #2072D2;
border-color: #2072D2;
}
[data-theme="light"] & {
background-color:#0348F3;
border-color: #0348F3;
}
}
@mixin pagination-paper{
@include pagination-font;
[data-theme="dark"] & {
border: 1px solid $mainColor;
}
[data-theme="light"] & {
border: 1px solid #E3E7EE;
}
}
@mixin pagination-paper-more{
[data-theme="dark"] & {
color: $mainColor;
}
[data-theme="light"] & {
color: #E3E7EE;
}
}
// switch
@mixin switch-style{
[data-theme="dark"] &{
border-color: rgb(64, 158, 255);
background-color: rgb(64, 158, 255);
}
[data-theme="light"] & {
border-color: #0348F3 !important;
background-color: #0348F3 !important;
}
}
@mixin switch-disabled{
// [data-theme="dark"] &{
// border-color: rgb(64, 158, 255);
// background-color: rgb(64, 158, 255);
// }
[data-theme="light"] & {
border-color: #D6DBE7 !important;
background-color: #D6DBE7 !important;
}
}
@mixin row_height_min{
[data-theme="dark"] & {
min-height: calc(100vh - 262px);
}
[data-theme="light"] & {
min-height: calc(100vh - 282px);
}
}
@mixin row_tab_style{
[data-theme="dark"] & {
margin-top: 61px;
border: 1px solid #113d72;
.head-container{
margin: 20px;
}
.el-table__header{
border-top: 1px solid #113D72;
}
.tab-nav{
height: 41px;
line-height: 41px;
margin: -41px 0 30px -1px;
font-weight: bold;
color: #359AFC;
border-bottom: 1px solid #113D72;
li{
position: relative;
padding: 0 24px;
margin: -1px 30px 0 0;
letter-spacing: 2px;
border-top: 1px solid #113D72;
background-color: #021941;
cursor: pointer;
&::before,
&::after{
content: "";
position: absolute;
top: 0;
width: 33px;
height: 41px;
}
&::before{
left: -15px;
background: url(~@/assets/images/tab_left.png) no-repeat;
background-size: contain;
}
&::after{
right: -32px;
background: url(~@/assets/images/tab_right.png) no-repeat;
background-size: contain;
}
&:first-child{
border-left: 1px solid #113d72;;
&::before{
width: 17px;
height: 17px;
left: -1px;
top: -1px;
border-left: 1px solid $mainColor;
border-top: 1px solid $mainColor;
}
}
&.active-tab-nav{
color: #fff;
&::before{
background: url(~@/assets/images/tab_left_active.png) no-repeat;
background-size: contain;
}
&::after{
background: url(~@/assets/images/tab_right_active.png) no-repeat;
background-size: contain;
}
i{
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #021941;
}
}
}
.tab-right-img{
display: block;
width: 93px;
margin: 4px 0 0 -14px;
background: url(~@/assets/images/tab_img.png) no-repeat;
background-size: contain;
}
}
}
[data-theme="light"] & {
margin-top: 0;
.head-container{
margin: 20px 20px 20px 0;
}
.tab-nav{
color: #545B65;
padding: 0 0 0 20px;
border-bottom: 1px solid #EDEFF3;
li{
margin-right: 60px;
&.active-tab-nav{
padding-bottom: 13px;
color: #0348F3;
border-bottom: 3px solid #0348F3;
}
}
}
}
}
@mixin category-left-style{
[data-theme="dark"] & {
width: 328px;
}
[data-theme="light"] & {
width: 368px;
}
}
@mixin category-right-hide{
[data-theme="dark"] & {
width: calc(100vw - 442px);
}
[data-theme="light"] & {
width: calc(100vw - 482px);
}
}
@mixin category-right-open{
[data-theme="dark"] & {
width: calc(100vw - 644px);
}
[data-theme="light"] & {
width: calc(100vw - 684px);
}
}
@mixin category-info-item{
[data-theme="dark"] & {
margin-bottom: 30px;
}
[data-theme="light"] & {
margin-bottom: 15px;
}
}
@mixin category-info-text{
[data-theme="dark"] & {
background-color: #02255f;
color: #fff;
border-radius: 4px;
margin-right: 20px;
border: none;
}
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin category-padding{
[data-theme="dark"] & {
margin-top: -20px;
}
}
@mixin des-title{
[data-theme="dark"] & {
padding-left: 46px;
p{
position: absolute;
left: 46px;
top: 0;
background-image: -webkit-gradient(
linear,
0 0,
0 bottom,
from(rgba(255, 255, 255, 1)),
to(rgba(46, 143, 237, 1))
);
background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 2;
i{
-webkit-text-fill-color: #fff;
}
}
&::before {
top: 0;
width: 93px;
height: 28px;
background: url(~@/assets/images/des_title.png) no-repeat;
background-size: contain;
}
}
[data-theme="light"] & {
padding-left: 8px;
p{
color: #000;
i{
-webkit-text-fill-color: #9098A4;
}
}
&::before {
top: 50%;
width: 3px;
height: 14px;
margin-top: -7px;
background-color: #0348F3;
}
}
}
@mixin des-fields{
[data-theme="dark"] & {
color: #3a99fd;
border: 1px solid #339cff;
&:hover,
&.fields-active {
color: #fff;
background-color: #339cff;
}
}
[data-theme="light"] & {
color: #545B65;
border: 1px solid #E6E8ED;
&:hover,
&.fields-active {
color: #0348F3;
background-color: #E8F2FF;
}
}
}
@mixin des-preview-label{
font-weight: normal;
[data-theme="dark"] & {
color: #3a99fd;
}
}
@mixin des-preview-input-num{
[data-theme="dark"] & {
margin-right: 24px !important;
}
[data-theme="light"] & {
margin-right: 10px !important;
}
}
@mixin des-preview-input-cont{
[data-theme="dark"] & {
margin-right: 10px !important;
width: 50px !important;
.el-input__inner{
width: 50px !important;
}
}
[data-theme="light"] & {
margin-right: 6px !important;
width: 40px !important;
.el-input__inner{
width: 40px !important;
}
}
}
@mixin main-padding{
[data-theme="dark"] & {
padding: 0 20px 20px 20px;
}
[data-theme="light"] & {
padding: 20px 0;
}
}
@mixin elTag-style{
[data-theme="dark"] & {
border: 1px solid $mainColor;
background-color: #02255f;
}
[data-theme="light"] & {
color: #0348F3;
border: 1px solid #90B0F9;
background-color: #EEF5FE;
}
}
@mixin select-elTag-style{
[data-theme="dark"] & {
color: #fff;
background-color: #02255f;
}
[data-theme="light"] & {
color: #0348F3;
background-color: #EEF5FE;
}
}
@mixin prepend-input{
[data-theme="dark"] & {
border: 1px solid $mainColor;
color: #339cff !important;
}
[data-theme="light"] & {
border: 1px solid #E3E7EE;
color: #545B65 !important;
}
}
@mixin prepend-color{
[data-theme="dark"] & {
color: #339cff !important;
}
[data-theme="light"] & {
color: #545B65 !important;
}
}
@mixin setting-item-font{
[data-theme="dark"] & {
color: #fff;
}
[data-theme="light"] & {
color: #0C0E1E;
}
}
@mixin setting-item-selected{
[data-theme="dark"] & {
color: #fff;
background-color: #02255f;
}
[data-theme="light"] & {
color: #545B65;
background-color: #F5F7FA;
}
}
@mixin table-fixed-style{
[data-theme="dark"] & {
background-color: $boxBg !important;
box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16);
}
[data-theme="light"] & {
background-color: #FFFFFF !important;
box-shadow: -3px 3px 11px 0px rgba(0,0,0,0.08);
}
}
// 个人中心
@mixin process-left-style{
[data-theme="dark"] & {
box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16);
color: #339cff;
li{
&.active-li{
color: #fff;
&::before{
background-color: #fff;
}
}
&:hover{
background-image: $subMenuHover;
}
}
}
[data-theme="light"] & {
color: #0C0E1E;
box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
li{
&.active-li{
color: #0348F3;
&::before{
background-color: #0348F3;
}
}
&:hover{
background-color:#E8F2FF;
color: #0C0E1E;
}
}
}
}
[data-theme=dark] .process-center {
height: calc(100vh - 290px);
margin-top: -30px;
.process-right{
padding-right: 20px;
width: calc(100vw - 944px);
}
}
[data-theme=light] .process-center {
height: calc(100vh - 283px);
.process-right{
width: calc(100vw - 964px);
}
}