FE-V2-PC/src/assets/styles/ZDelement.scss

@import './ZDcolor.sass';
/*消息提示窗背景色*/
.el-message--success{
  background-color: rgba(231,250,240,0.4);
}
.el-message--warning{
  background-color: rgba(253,246,236,0.4);
}
.el-message--error{
  background-color: rgba(254,240,240,0.4);
}
/*===================================多选框样式===================================*/
.el-tag.el-tag--info{
  color:#0183fa!important;
  background:rgba(1,131,250,0.2)!important;;
  border:none;
}
.el-tag.el-tag--info .el-tag__close{
  color:#fff;
  background-color: #0183fa;
}
.el-tag.el-tag--info .el-tag__close:hover{
  color:#fff;
  background-color: #0183fa;
}
/*===================================label标签样式===================================*/
.el-form-item--medium .el-form-item__label{
  color:#333;
  font-weight:500;
}
/*===================================分页按钮===================================*/
//选中
.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: $pagination_button-color;
  //border:1px solid $pagination_button_selected;
  color:$pagination_button_selected;
}
//未选中
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
  background-color: $pagination_button-color;
  //border:1px solid $pagination_button;
  color:$pagination_button-font-color;
}
//样式部分
.pagination-container{
  height:32px!important;
  padding:0!important;
  .el-pagination__sizes{
    width: 120px !important;
    overflow: hidden!important;
    .teacher .el-select{
      width: 120px !important;
    }
    input{
      border:none;
    }
  }
  .el-pagination{
    display: flex;
    width:100%;
  }
}
.el-pagination__total{
  flex:1;
  text-align: right;
}
/*===================================表格===================================*/
.el-table--border th{
  border:none;
}
.el-table--group, .el-table--border{
  border:none;
}
.el-table--group::after, .el-table--border::after{
  width:0;
}
.el-table--fit{
  display: flex;
  flex-direction: column;
}
.el-table__row{
  color:$color_33;
  //font-size:14px;
}
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
  color:$color_33;
  background-color:#f5f5f5;
  //font-size:16px;
}
.el-table__header-wrapper{
  height:60px;
}
.el-table__body-wrapper{
  border:1px solid #dfe6ec;
  flex: 1;
  overflow-y: scroll!important;
}
.el-table--fit{
  flex: 1;
}
//表格滚动条样式
.el-table__body-wrapper::-webkit-scrollbar{
width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb{
border-radius: 5px;
//-webkit-box-shadow: inset 0 0 5px #cac8c8;
background: #CBCDD1;
}
.el-table__body-wrapper::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
border-radius: 0;
background: rgba(255,255,255,0);
}
//表格内容高度部分
//表头
.el-table__fixed-header-wrapper{
  th, td{
    padding:18px 0;
  }
  .el-table--medium th, .el-table--medium td{
    padding:12px 0!important;
    border-top: 1px solid #dfe6ec!important;
  }
}
//.el-table__fixed::before, .el-table__fixed-right::before{
//  height:0;
//}
.el-table__fixed, .el-table__fixed-right{
  top:1px;
  left:1px;
}
.el-table__header-wrapper{
  th, td{
    padding:19px 0;
  }
}
//表格
.el-table__body-wrapper{
  th, td{
    padding:10px 0;
  }
}
//.el-table--medium th, .el-table--medium td{
//  padding:18px 0;
//}
.el-table{
  font-size:14px;
}
//============================实心按钮部分================================
.el-button--primary{
  font-size:14px;
  background:$back_one;
}
.el-button{
  width:70px;
  height:40px;
  border-radius:6px;
}
//============================空心按钮部分================================
//新增
.el-button--primary.is-plain{
  width:120px;
  height:40px;
  color:$color_one!important;
  border:1px solid $color_one!important;
  background: $back_ff;
}
.el-button--primary.is-plain:hover{
  color:$color_ff!important;
  background: $back_one;
}
//修改
.el-button--success.is-plain.is-disabled{

}
.el-button--success.is-plain.is-disabled:hover{

}
//删除
.el-button--danger.is-plain.is-disabled{

}
.el-button--danger.is-plain.is-disabled:hover{

}
//导出
.el-button--warning.is-plain{

}
.el-button--warning.is-plain:hover{

}
//===========================输入框
.el-form-item__label{
  line-height:40px!important;
}
.el-input--small{
  width:220px;
}
.el-input--small input{
  height: 40px !important;
}
.el-input--medium .el-input__inner{
  height: 40px ;
}
//===========================弹窗窗体
.el-dialog{
  border-radius: 10px;
}
//===========================弹窗title
.el-dialog__title{
  color:$color_one;
  font-weight: bold;
}
//===========================弹出层
.el-dialog__header{
  border-bottom:1px solid #E0E0E0;
  padding-bottom:20px;
}
.el-dialog__footer{
  padding-top:20px!important;
  border-top:1px solid #E0E0E0;
}
//===========================提示弹窗按钮(包含登录失效)
.el-message-box__btns{
  .el-button{
    width:100px;
  }
}
//==================抽屉滚动条

.el-drawer__body::-webkit-scrollbar{
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.el-drawer__body::-webkit-scrollbar-thumb{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #999;
  background: #fff;
}
.el-drawer__body::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  border-radius: 0;
  background: rgba(255,255,255,0);
}

//====================公共滚动条样式
.scrollbar-box::-webkit-scrollbar{
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.scrollbar-box::-webkit-scrollbar-thumb{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #999;
  background: #fff;
}
.scrollbar-box::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
  border-radius: 0;
  background: rgba(255,255,255,0);
}
/*=================================switch按钮样式==================================*/
.el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{
  cursor: pointer!important;
}
/*============================表格无数据样式*/
.el-table__empty-text{
  color:rgba(0,0,0,0);
  width:100%;
  height:100%;
  background: url("../ZDimages/null-data-1.png") no-repeat 50% 50%;
}
.el-table-min-img-box{
  .el-table__empty-text{
    font-size:0;
    color:rgba(0,0,0,0);
    width:100%;
    height:100%;
    background: url("../ZDimages/null-data-1.png") no-repeat 50% 50%;
    background-size: 12%;
  }
}
/*======================el-dialog弹窗居中*/
.el-dialog__wrapper{
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box;  -webkit-box-align: center;-webkit-box-pack: center;
}
.el-dialog__wrapper .el-dialog{
  -webkit-box-flex: 0;
  margin-top:-1%!important;
}
/*表格标题字号*/
.el-table th > .cell{
  font-size:14px;
}
/*表格内容*/
.el-table td div{
  font-weight:500;
}
//左侧导航滚动条
.scrollbar-wrapper{
  padding-right:17px;
}
.scrollbar-wrapper::-webkit-scrollbar{
  display: none;
}
/*顶部按钮滚动条*/
.tags-view-container{
  padding:0!important;
  margin:0!important;
  overflow: hidden;
  .scroll-container{
    padding:0!important;
    margin:0!important;
    overflow: hidden;
    .el-scrollbar__wrap{
      padding:0!important;
      margin:0!important;
      overflow: hidden;
      .el-scrollbar__view{
        margin-top:16px;
        height:50px;
        overflow-x: scroll;
        overflow-y: hidden;
      }
      //滚动条样式
      .el-scrollbar__view::-webkit-scrollbar{
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
      }
      .el-scrollbar__view::-webkit-scrollbar-thumb{
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px #999;
        background: #fff
      }
      .el-scrollbar__view::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
        border-radius: 0;
        background: rgba(255,255,255,0);
      }

    }
  }
}
/*登录页面*/
.login{
  .login-input-box{
    margin-bottom:30px!important;
  }
  .login-input-box-one{
    margin-bottom:0!important;
  }
  .login-input-box-two{
    margin-bottom:50px!important;
  }
  .login-max-box .right-box .login-form .el-input{
    height:50px!important;
  }
  .login-max-box .right-box .login-form .el-input input{
    height:50px!important;
    background: #f8f8f8!important;
    border: 1px solid #E0E0E0!important;
    border-radius:10px;
  }
  .el-form-item__error{
    padding-top:10px;
  }
  .el-button{
    height:50px;
  }
}
//消息详情列表展示富文本弹窗信息
.manageInformation{
  .el-collapse{
    border:none!important;
  }
  .el-collapse-item__header.is-active{
    border:none!important;
  }
  .el-collapse-item__header{
    height:23px;
    color:#999;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td{
    background: rgba(255,255,255,0);
  }
  img{
    max-width:100%!important;
  }
}
//消息弹窗
.user-home-el-dialog{
  .el-dialog__body{
    overflow: auto;
    height:800px;
    img{
      max-width:100%!important;
    }
  }
  .el-dialog__body::-webkit-scrollbar{
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  .el-dialog__body::-webkit-scrollbar-thumb{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #999;
    background: #fff
  }
  .el-dialog__body::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
    border-radius: 0;
    background: rgba(255,255,255,0);
  }
}
//管理员工作台
.manageHome{
  .top-max-big-box .top-right-max-box .top-right-top-box .top-right-top-for-max-box .top-right-top-for-box div:nth-child(1) p{
    font-weight: 500;
  }
  .top-max-big-box .top-right-max-box .top-right-bottom-box .top-right-bottom-for-max-box .top-right-bottom-for-box{
    font-weight: 500;
  }
}
//关联配置页面
.associationConfiguration{
  .el-input-group__append{
    padding:0;
  }
}

//实验室列表
.subject-page{
  .left-subject-list{
    .el-table{
      .el-input--medium .el-input__inner{
        height:30px;
        line-height:30px;
        width:55px;
        text-align: center;
        padding:0 10px;
      }
    }
    .pagination-container{
      height: 45px;
    }
  }
}

//实验室编辑
.addSubject{
  .el-form .el-select__tags-text {
    display: inline-block;
    max-width: 455px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-select .el-tag__close.el-icon-close {
    top: -7px;
  }
}
//table 过长文本浮层样式
.el-tooltip__popper.is-dark{
  max-width:60%!important;
}
/*****************input-number去除加减按钮*****************/
.input-number-none-box{
  .el-input-number__decrease{
    display: none;
  }
  .el-input-number__increase{
    display: none;
  }
  .el-input__inner{
    padding:0 15px;
  }
}
.input-number-none-box-left{
  .el-input-number__decrease{
    display: none;
  }
  .el-input-number__increase{
    display: none;
  }
  .el-input__inner{
    padding:0 15px;
    text-align: left;
  }
}