817 lines
16 KiB
SCSS
817 lines
16 KiB
SCSS
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
outline: 0 none;
|
||
}
|
||
ul, li{
|
||
list-style: none;
|
||
}
|
||
html{
|
||
font-family: 'PingFang SC';
|
||
color: $color-text-primary;
|
||
}
|
||
.cursor-pointer{
|
||
cursor: pointer;
|
||
}
|
||
//=================== start::全局自定义滚动条样式 =======================
|
||
/* 设置垂直滚动条的宽度和水平滚动条的高度 */
|
||
::-webkit-scrollbar{
|
||
width: 5px;
|
||
height: 5px;
|
||
}
|
||
|
||
/* 设置滚动条的滑轨 */
|
||
::-webkit-scrollbar-track {
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
/* 滑块 */
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: $border-color-light;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 滑轨两头的监听按钮 */
|
||
::-webkit-scrollbar-button {
|
||
background-color: $border-color-light;
|
||
display: none;
|
||
}
|
||
|
||
/* 横向滚动条和纵向滚动条相交处尖角 */
|
||
::-webkit-scrollbar-corner {
|
||
/*background-color: black;*/
|
||
}
|
||
.el-scrollbar__wrap {
|
||
overflow-x: hidden !important;
|
||
overflow-y: auto !important;
|
||
}
|
||
.el-scrollbar__bar.is-horizontal{
|
||
display: none;
|
||
}
|
||
.overflow-y-scroll{
|
||
overflow-y: scroll !important;
|
||
}
|
||
.overflow-y-auto{
|
||
overflow-y: auto !important;
|
||
}
|
||
|
||
|
||
//=================== end::全局自定义滚动条样式 =========================
|
||
|
||
//=================== start::文字样式 =======================
|
||
.f12{
|
||
font-size: $f12;
|
||
}
|
||
.f14{
|
||
font-size: $f14;
|
||
}
|
||
.f16{
|
||
font-size: $f16;
|
||
}
|
||
.f18{
|
||
font-size: $f18;
|
||
}
|
||
.f20{
|
||
font-size: $f20;
|
||
}
|
||
.f22{
|
||
font-size: $f22;
|
||
}
|
||
.f24{
|
||
font-size: $f24;
|
||
}
|
||
.f32{
|
||
font-size: $f32;
|
||
}
|
||
.f-weight400{
|
||
font-weight: 400;
|
||
}
|
||
.f-weight500{
|
||
font-weight: 500;
|
||
}
|
||
.f-weight600{
|
||
font-weight: 600;
|
||
}
|
||
.background-color-fff{
|
||
background-color: $color-white;
|
||
}
|
||
.color-fff{
|
||
color: $color-white;
|
||
}
|
||
.color-000{
|
||
color: $color-000000;
|
||
}
|
||
.color-86909C{
|
||
color: #86909C;
|
||
}
|
||
.color-274ea4{
|
||
color: #274ea4;
|
||
}
|
||
|
||
.color-text-primary{
|
||
color: $color-text-primary;
|
||
}
|
||
.color-text-regular{
|
||
color: $color-text-regular;
|
||
}
|
||
.color-text-secondary{
|
||
color: $color-text-secondary;
|
||
}
|
||
.color-text-placeholder{
|
||
color: $color-text-placeholder;
|
||
}
|
||
.bg-color-light{
|
||
background-color:$bg-color-light
|
||
}
|
||
.color-1960F4{
|
||
color: $color-1960F4;
|
||
}
|
||
.color-primary{
|
||
color: $color-primary;
|
||
}
|
||
.text-overflow{
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
.text-center{
|
||
text-align: center;
|
||
}
|
||
.text-right{
|
||
text-align: right;
|
||
}
|
||
//=================== end::文字样式 =========================
|
||
|
||
//=================== start::定位样式 =======================
|
||
.position-r{
|
||
position: relative;
|
||
}
|
||
.position-a{
|
||
position: absolute;
|
||
}
|
||
.position-f{
|
||
position: fixed;
|
||
}
|
||
//=================== end::定位样式 =========================
|
||
|
||
//=================== start::边距样式 =======================
|
||
|
||
// 内边距
|
||
@mixin basePadding($top:$size8,$right:$top,$bottom:$top,$left:$right) {
|
||
padding: {
|
||
top: $top;
|
||
right: $right;
|
||
bottom: $bottom;
|
||
left: $left;
|
||
}
|
||
}
|
||
|
||
.padding-0{
|
||
padding: 0 !important;
|
||
}
|
||
.pt-8{
|
||
padding-top: $size8;
|
||
}
|
||
.pb-8{
|
||
padding-bottom: $size8;
|
||
}
|
||
.pr-8{
|
||
padding-right: $size8;
|
||
}
|
||
.pl-8{
|
||
padding-left: $size8;
|
||
}
|
||
|
||
.p-8{
|
||
@include basePadding($size8)
|
||
}
|
||
.p-v-8{
|
||
@include basePadding($size8, 0);
|
||
}
|
||
|
||
.p-h-8{
|
||
@include basePadding(0, $size8);
|
||
}
|
||
|
||
.p-16{
|
||
@include basePadding($size16)
|
||
}
|
||
.p-v-16{
|
||
@include basePadding($size16, 0);
|
||
}
|
||
|
||
.p-h-16{
|
||
@include basePadding(0, $size16);
|
||
}
|
||
|
||
.pt-16{
|
||
padding-top: $size16;
|
||
}
|
||
.pb-16{
|
||
padding-bottom: $size16;
|
||
}
|
||
.pr-16{
|
||
padding-right: $size16;
|
||
}
|
||
.pl-16{
|
||
padding-left: $size16;
|
||
}
|
||
.p-16{
|
||
@include basePadding($size16)
|
||
}
|
||
.p-v-16{
|
||
@include basePadding($size16, 0);
|
||
}
|
||
|
||
.p-h-16{
|
||
@include basePadding(0, $size16);
|
||
}
|
||
|
||
.p-h-22{
|
||
@include basePadding(0, $size22)
|
||
}
|
||
|
||
.pt-24{
|
||
padding-top: $size24;
|
||
}
|
||
.pb-24{
|
||
padding-bottom: $size24;
|
||
}
|
||
.pr-24{
|
||
padding-right: $size24;
|
||
}
|
||
.pl-24{
|
||
padding-left: $size24;
|
||
}
|
||
.p-24{
|
||
@include basePadding($size24);
|
||
}
|
||
.p-v-24{
|
||
@include basePadding($size24, 0);
|
||
}
|
||
.p-h-24{
|
||
@include basePadding(0, $size24);
|
||
}
|
||
|
||
.pt-32{
|
||
padding-top: $size32;
|
||
}
|
||
.pb-32{
|
||
padding-bottom: $size32;
|
||
}
|
||
.pr-32{
|
||
padding-right: $size32;
|
||
}
|
||
.pl-32{
|
||
padding-left: $size32;
|
||
}
|
||
.p-32{
|
||
@include basePadding($size32);
|
||
}
|
||
.p-v-32{
|
||
@include basePadding($size32, 0);
|
||
}
|
||
.p-h-32{
|
||
@include basePadding(0, $size32);
|
||
}
|
||
|
||
.pt-40{
|
||
padding-top: $size40;
|
||
}
|
||
.pb-40{
|
||
padding-bottom: $size40;
|
||
}
|
||
.pr-40{
|
||
padding-right: $size40;
|
||
}
|
||
.pl-40{
|
||
padding-left: $size40;
|
||
}
|
||
.p-40{
|
||
@include basePadding($size40);
|
||
}
|
||
.p-v-40{
|
||
@include basePadding($size40, 0);
|
||
}
|
||
.p-h-40{
|
||
@include basePadding(0, $size40);
|
||
}
|
||
|
||
// 外边距
|
||
@mixin baseMargin($top:$size8,$right:$top,$bottom:$top,$left:$right) {
|
||
margin: {
|
||
top: $top;
|
||
right: $right;
|
||
bottom: $bottom;
|
||
left: $left;
|
||
}
|
||
}
|
||
.mt-8{
|
||
margin-top: $size8;
|
||
}
|
||
|
||
.mb-8{
|
||
margin-bottom: $size8;
|
||
}
|
||
|
||
.mr-8{
|
||
margin-right: $size8;
|
||
}
|
||
.ml-8{
|
||
margin-left: $size8;
|
||
}
|
||
.m-8{
|
||
@include baseMargin($size8)
|
||
}
|
||
.m-v-8{
|
||
@include baseMargin($size8, 0)
|
||
}
|
||
.m-h-8{
|
||
@include baseMargin(0, $size8)
|
||
}
|
||
|
||
.mt-16{
|
||
margin-top: $size16;
|
||
}
|
||
|
||
.mb-16{
|
||
margin-bottom: $size16;
|
||
}
|
||
|
||
.mr-16{
|
||
margin-right: $size16;
|
||
}
|
||
.ml-16{
|
||
margin-left: $size16;
|
||
}
|
||
.m-16{
|
||
@include baseMargin($size16);
|
||
}
|
||
.m-v-16{
|
||
@include baseMargin($size16, 0);
|
||
}
|
||
.m-h-16{
|
||
@include baseMargin(0, $size16);
|
||
}
|
||
|
||
.mt-24{
|
||
margin-top: $size24;
|
||
}
|
||
|
||
.mb-24{
|
||
margin-bottom: $size24;
|
||
}
|
||
|
||
.mr-24{
|
||
margin-right: $size24;
|
||
}
|
||
.ml-24{
|
||
margin-left: $size24;
|
||
}
|
||
.m-24{
|
||
@include baseMargin($size24)
|
||
}
|
||
.m-v-24{
|
||
@include baseMargin($size24, 0)
|
||
}
|
||
.m-h-24{
|
||
@include baseMargin(0, $size24)
|
||
}
|
||
|
||
.mt-32{
|
||
margin-top: $size32;
|
||
}
|
||
|
||
.mb-32{
|
||
margin-bottom: $size32;
|
||
}
|
||
|
||
.mr-32{
|
||
margin-right: $size32;
|
||
}
|
||
.ml-32{
|
||
margin-left: $size32;
|
||
}
|
||
.m-32{
|
||
@include baseMargin($size32)
|
||
}
|
||
.m-v-32{
|
||
@include baseMargin($size32, 0)
|
||
}
|
||
.m-h-32{
|
||
@include baseMargin(0, $size32)
|
||
}
|
||
|
||
.mt-40{
|
||
margin-top: $size40;
|
||
}
|
||
|
||
.mb-40{
|
||
margin-bottom: $size40;
|
||
}
|
||
|
||
.mr-40{
|
||
margin-right: $size40;
|
||
}
|
||
.ml-40{
|
||
margin-left: $size40;
|
||
}
|
||
.m-40{
|
||
@include baseMargin($size40)
|
||
}
|
||
.m-v-40{
|
||
@include baseMargin($size40, 0)
|
||
}
|
||
.m-h-40{
|
||
@include baseMargin(0, $size40)
|
||
}
|
||
|
||
//=================== end::边距样式 =========================
|
||
|
||
//=================== start::宽高样式 =========================
|
||
.width100{
|
||
width: 100% !important;
|
||
}
|
||
.width75{
|
||
width: 75% !important;
|
||
}
|
||
.width-40{
|
||
width: $height40;
|
||
}
|
||
.width-120{
|
||
width: $height120;
|
||
}
|
||
.width70{
|
||
width: 70% !important;
|
||
}
|
||
.width30{
|
||
width: 30% !important;
|
||
}
|
||
|
||
.height100{
|
||
height: 100% !important;
|
||
}
|
||
.height-30 {
|
||
height: $height30;
|
||
}
|
||
.height-40{
|
||
height: $height40;
|
||
}
|
||
.height-48{
|
||
height: $height48;
|
||
}
|
||
.height-56{
|
||
height: $height56;
|
||
}
|
||
.height-90{
|
||
height: $height90;
|
||
}
|
||
.height-138{
|
||
height: $height138;
|
||
}
|
||
|
||
.line-height-30{
|
||
line-height: $height30;
|
||
}
|
||
.line-height-40{
|
||
line-height: $height40;
|
||
}
|
||
.line-height-48{
|
||
line-height: $height48;
|
||
}
|
||
|
||
//=================== end::宽高样式 ===========================
|
||
|
||
|
||
//=================== start::border边框 ===========================
|
||
.border-t-0{
|
||
border-top: 0 none !important;
|
||
}
|
||
.border-b-0{
|
||
border-bottom: 0 none !important;
|
||
}
|
||
.border-r-0{
|
||
border-right: 0 none !important;
|
||
}
|
||
.border-l-0{
|
||
border-left: 0 none !important;
|
||
}
|
||
|
||
.border-t-solid-lighter-1{
|
||
border-top: 1px solid $border-color-lighter;
|
||
}
|
||
.border-b-solid-lighter-1{
|
||
border-bottom: 1px solid $border-color-lighter;
|
||
}
|
||
.border-solid-lighter-1{
|
||
border:1px solid $border-color-lighter;
|
||
}
|
||
//=================== end::border边框 ===========================
|
||
//=================== start::圆角样式 ==============================
|
||
.border-radius50{
|
||
border-radius: 50%;
|
||
}
|
||
.border-radius-2{
|
||
border-radius: 2px;
|
||
}
|
||
.border-radius-4{
|
||
border-radius: 4px;
|
||
}
|
||
.border-radius-8{
|
||
border-radius: 8px;
|
||
}
|
||
//=================== end::圆角样式 ================================
|
||
//=================== start::旋转动画 ==============================
|
||
.transform-time-default{
|
||
transition: transform .3s
|
||
}
|
||
.rotate-0{
|
||
transform: rotate(0deg);
|
||
}
|
||
.rotate-45{
|
||
transform: rotate(45deg);
|
||
}
|
||
.rotate-90{
|
||
transform: rotate(90deg);
|
||
}
|
||
.rotate-180{
|
||
transform: rotate(180deg);
|
||
}
|
||
.rotate--180{
|
||
transform: rotate(-180deg);
|
||
}
|
||
//=================== end::旋转动画 ================================
|
||
|
||
|
||
//=================== start:: 自定义tabs样式 ==============================
|
||
.zd-el-tabs-custom{
|
||
.el-tabs__header{
|
||
margin: 0;
|
||
}
|
||
.el-tabs__item{
|
||
height: $height48;
|
||
line-height: $height48;
|
||
}
|
||
// tabs第一个菜单有左边的边距
|
||
.el-tabs__item.is-top:nth-child(2),
|
||
.el-tabs__item.is-bottom:nth-child(2){
|
||
padding-left: $size24 !important;
|
||
}
|
||
// 被选中的tabs样式
|
||
.el-tabs__item.is-active{
|
||
color: $color-1960F4 !important;
|
||
}
|
||
// 被选中的tabs样式
|
||
.el-tabs__active-bar{
|
||
background-color: $color-1960F4 !important;
|
||
}
|
||
}
|
||
// tabs第一个菜单有padding-left
|
||
.zd-el-tabs-custom__left_padding{
|
||
.el-tabs__item.is-top:nth-child(2),
|
||
.el-tabs__item.is-bottom:nth-child(2){
|
||
padding-left: $size24 !important;
|
||
}
|
||
}
|
||
// tabs最后一个菜单有padding-right
|
||
.zd-el-tabs-custom__right_padding{
|
||
.el-tabs__item.is-top:last-child,
|
||
.el-tabs__item.is-bottom:last-child{
|
||
padding-right: $size24 !important;
|
||
}
|
||
}
|
||
|
||
// 去调解页面 去掉tabs灰色的下横线
|
||
.layout-center-right-center .zd-el-tabs-custom{
|
||
.el-tabs__nav-wrap::after {
|
||
height: 0 !important;
|
||
background-color: transparent!important;
|
||
}
|
||
}
|
||
//=================== end::自定义tabs样式 ================================
|
||
|
||
|
||
//=================== start:: tabs内容区域通用样式 ==============================
|
||
.layout-tabs-content-box{
|
||
width: 100%;
|
||
// height: calc(100% - $height48);
|
||
padding: $size16 $size24;
|
||
box-sizing: border-box;
|
||
.tabs__search-criteria-title{
|
||
@extend .f14;
|
||
@extend .color-text-regular;
|
||
@extend .text-right;
|
||
min-width: 88px;
|
||
white-space: nowrap;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.tabs__search-criteria-title—minwidth120{
|
||
@extend .f14;
|
||
@extend .color-text-regular;
|
||
@extend .text-right;
|
||
min-width: 120px;
|
||
white-space: nowrap;
|
||
box-sizing: content-box;
|
||
}
|
||
}
|
||
|
||
//=================== end::tabs内容区域通用样式 =================================
|
||
//=================== start::border 样式 ===============================
|
||
|
||
//=================== end::border-bottom 样式 ==================================
|
||
//=================== start::图片宽高 样式 ===============================
|
||
.images24{
|
||
width:$height24 ;
|
||
height: $height24;
|
||
}
|
||
.images56{
|
||
width:$height56 ;
|
||
height: $height56;
|
||
}
|
||
.images120{
|
||
width: $height120;
|
||
height: $height120;
|
||
}
|
||
//=================== start::图片宽高 样式 ===============================
|
||
|
||
//=================== start::自定义drawer样式 ===============================
|
||
.el-drawer__wrapper {
|
||
.el-drawer__header{
|
||
height: $height64 !important;
|
||
line-height: $height64 !important;
|
||
margin: 0;
|
||
font-size:$f22;
|
||
color: $color-text-primary;
|
||
padding: 0 $height20;
|
||
}
|
||
}
|
||
//=================== start::自定义drawer样式 ===============================
|
||
//=================== start::自定义dialog样式 ===============================
|
||
.el-dialog__wrapper {
|
||
|
||
.el-dialog{
|
||
// 设置居中显示
|
||
position:absolute;
|
||
top:50%;
|
||
left:50%;
|
||
margin:0 !important;
|
||
transform:translate(-50%, -50%);
|
||
|
||
.el-dialog__header{
|
||
height: $height64 !important;
|
||
line-height: $height64 !important;
|
||
margin: 0;
|
||
font-size:$f16;
|
||
color: $color-text-primary;
|
||
padding: 0 $size24;
|
||
}
|
||
.el-dialog__body{
|
||
// padding: $size16 $size72 $size16 $size72;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
//=================== start::自定义dialog样式 ===============================
|
||
|
||
|
||
//=================== start::日期时间选择器 ===============================
|
||
.el-date-editor .el-range-separator{
|
||
box-sizing: content-box;
|
||
}
|
||
//=================== end::日期时间选择器 ===============================
|
||
|
||
|
||
// message提示框加优先级，防止抽屉、弹框等被遮挡
|
||
.messageZindex{
|
||
z-index: 4000!important;
|
||
}
|
||
|
||
//=================== start::提示框置顶 ===============================
|
||
.el-message.el-message--error.is-closable{z-index: 3000 !important;}
|
||
.el-message.el-message--warning.is-closable{z-index: 3000 !important;}
|
||
.el-message.el-message--success.is-closable{z-index: 3000 !important;}
|
||
.el-loading-mask.is-fullscreen{z-index: 9999 !important;}
|
||
//=================== end::提示框置顶 ===============================
|
||
|
||
//=================== start::解决Elementui输入框(text)与文本域(textarea)字体不一样问题 ===============================
|
||
.el-textarea__inner{
|
||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||
}
|
||
//去调解页 去掉textarea边框
|
||
.layout-center-right-bottom .el-textarea__inner {
|
||
border: none!important;
|
||
padding: 5px 0!important;
|
||
resize: none!important;
|
||
}
|
||
|
||
//=================== end::解决Elementui输入框(text)与文本域(textarea)字体不一样问题 ===============================
|
||
|
||
//=================== start::状态标签样式 ===============================
|
||
// 公用状态标签样式
|
||
.status-btn {
|
||
width: 60px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
border: 1px solid;
|
||
height: 24px;
|
||
line-height: 22px;
|
||
}
|
||
// 调解状态 0-待调解 1-调解中 2-已结束
|
||
.case-status0{
|
||
background-color: #fdf6ec;
|
||
border-color: #faecd8;
|
||
color: #e6a23c
|
||
}
|
||
.case-status1{
|
||
background-color: #ecf5ff;
|
||
border-color: #d9ecff;
|
||
color: #409EFF;
|
||
}
|
||
.case-status2{
|
||
background-color: #f0f9eb;
|
||
border-color: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
// 案件状态1-调解成功、0-调解失败、2-暂存
|
||
.result-status0{
|
||
background-color: #fef0f0;
|
||
border-color: #fde2e2;
|
||
color: #f56c6c;
|
||
}
|
||
.result-status1{
|
||
background-color: #f0f9eb;
|
||
border-color: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
.result-status2{
|
||
background-color: #fdf6ec;
|
||
border-color: #faecd8;
|
||
color: #e6a23c
|
||
}
|
||
|
||
|
||
.case-lable{
|
||
a{
|
||
padding:2px 5px;
|
||
font-size: 12px;
|
||
border:solid 1px #fdf6ec;
|
||
border-radius: 3px;
|
||
margin: 0 5px;
|
||
}
|
||
// 调解进度 承诺客户、重点客户
|
||
.case-status0{
|
||
background-color: #ecf5ff;
|
||
border-color: #d9ecff;
|
||
color: #409EFF;
|
||
}
|
||
|
||
// 已结清客户、疑难账户、失联账户、半失联账户、投诉倾向客户
|
||
.case-status1{
|
||
background-color: #fef0f0;
|
||
border-color: #fde2e2;
|
||
color: #f56c6c;
|
||
}
|
||
// 部分还款账户、适诉案件、可联账户、分期客户
|
||
.case-status2{
|
||
background-color: #fdf6ec;
|
||
border-color: #faecd8;
|
||
color: #e6a23c
|
||
}
|
||
// 已签署协议
|
||
.case-status3{
|
||
background-color: #f0f9eb;
|
||
border-color: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
|
||
|
||
// 案件状态1-调解成功、0-调解失败、2-暂存
|
||
.result-status0{
|
||
background-color: #fef0f0;
|
||
border-color: #fde2e2;
|
||
color: #f56c6c;
|
||
}
|
||
.result-status1{
|
||
background-color: #f0f9eb;
|
||
border-color: #e1f3d8;
|
||
color: #67c23a;
|
||
}
|
||
.result-status2{
|
||
background-color: #fdf6ec;
|
||
border-color: #faecd8;
|
||
color: #e6a23c
|
||
}
|
||
|
||
}
|
||
|
||
//=================== end::状态标签样式 ===============================
|
||
|
||
.navigation-bar{
|
||
|
||
} |