yxk-electronic-archives/src/assets/styles/yxk-admin.scss

.elect-cont-left{
  width: 265px;
  margin-right: 20px;
  @include bg_color;
  @include box_padding;
  .head-container{
    margin-bottom: 20px;
    .crud-opts{
      justify-content: center;
    }
  }
  .container-left{
    @include tree_height_min;
  }
}
.elect-cont-right{
  @include bg_color;
  @include box_padding;
  .head-container{
    margin-bottom: 20px;
  }
  .container-right{
    @include table_height_min;
    &.tab-content{
      @include tab_height_min;
    }
  }
}

.role-cont-left{
  .container-left{
    @include tree_no_header;
  }
}

.hideSidebar{
  // siderbar-收起 54 + 间距 60 + treeLeft 265
  .elect-cont-right{
    width: calc(100vw - 379px);
  }
  .category-container{
    .elect-cont-right{
      @include category-right-hide;
    }
  }
}

.openSidebar{
  // siderbar-展开 256 + 间距 60 + treeLeft 265
  .elect-cont-right{
    width: calc(100vw - 581px);
  }
  .category-container{
    .elect-cont-right{
      @include category-right-open;
    }
  }
}

.row-container{
  @include bg_color;
  @include box_padding;
  .container-wrap{
    margin-top: 20px;
    @include row_height_min;
  }
}

.tab-container{
  @include bg_color;
  @include box_padding;
}

.tab-container,
.category-container,
.archives-container{
  .tab-content{
    position: relative;
    @include row_tab_style;
    
    .tab-nav{
      margin-bottom: 0;
    }
  }
}

.detail-tab{
  margin-top: 0;
  .head-container{
    margin: 20px 20px 20px 0;
  }
  .tab-nav{
    margin: 25px 0 18px 0;
    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;
      }
    }
  }
}

.category-container{
  .elect-cont-left{
    @include category-left-style;
  }
  .elect-cont-right{
    margin-top: 0;
  }
}

.head-container {
  .filter-item {
    vertical-align: middle;
    margin-right: 10px;
    input {
      @include input_style;
      background-color: transparent;
      height: 30px;
      line-height: 30px;
    }
    .iconfont{
      line-height: 30px;
    }
  }
  .el-select__caret.el-input__icon.el-icon-arrow-up{
    line-height: 30px;
  }
  .date-item {
    display: inline-block;
    vertical-align: middle;
    @include bg_color;
    @include input_style;
    margin-right: 10px;
    height: 30px !important;
    width: 230px !important;
  }
  .icon-zhuangtai{
    font-size: 14px;
  }
  // tree-select
  .vue-treeselect{
    margin-right: 10px;
    .vue-treeselect__control{
      font-size: 12px !important;
      height: 30px !important;
      background-color: transparent !important;
      border-radius: 4px;
      @include input_style;
      .vue-treeselect__placeholder{
        line-height: 28px !important;
      }
      .vue-treeselect__input{
        font-size: 13px !important;
      }
    }
  }
  .el-select{
    margin-right: 10px;
    .el-input__inner{
      height: 30px !important;
      line-height: 30px !important;
      background-color: transparent;
      @include pagination-input;
    }
  }
}

.el-tabs{
  margin-bottom: 25px;
}

// xu
// 四角边线
// 有左右分区时
.container-main{
  display: flex;
  justify-content: space-between;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.container-left,
.container-right,
.container-wrap,
.el-card,
.header-container-wrap{
  position: relative;
  min-height: 100%;
  @include user_cont;
  min-height: calc(100vh - 190px);
  &::before,
  &::after{
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    z-index: 99;
  }
  &::before{
    top: -1px;
    left: -1px;
    @include before_line_color;
  }
  &::after{
    right: -1px;
    bottom: -1px;
    @include after_line_color;
  }
}

.el-card,
.container-left{
  background-color: transparent;
  min-height: auto;
  border-radius: 0;
  overflow: visible;
  .el-card__header{
    background-color: #02255F;
    border-bottom: none;
    .role-span{
      color: #fff;
    }
  }
  .el-card__body{
    padding: 0;
    .head-container{
      padding: 0;
    }
  }
  .crud-opts{
    justify-content: center;
    padding: 20px 0 !important;
    border-bottom: 1px solid #113D72;
  }
  .el-tree{
    margin: 20px 0;
  }
}

.head-search{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  .el-button{
    margin-left: 0;
    background-color: $desPreviewColor;
  }
}

.el-button,
.el-button--info.is-plain{
  font-size: 14px;
  background-color: transparent;
  @include elButton-style;
}
.el-button.is-disabled,
.el-button.is-disabled:hover, 
.el-button.is-disabled:focus{
  @include elButton-disabled-style;
}
.el-button:hover,
.el-button:focus,
.el-button--info.is-plain:hover,
.el-button--info.is-plain:focus{
  @include elButton-hover-style;
}

.el-button--mini{
  padding: 7px 10px;
}

.header-container-wrap{
  min-height: auto;
}

.right-top-line,
.left-bottom-line,
.right-bottom-line{
  display: block;
  position: absolute;
  width: 17px;
  height: 17px;
  z-index: 99;
}

.left-bottom-line{
  bottom: -1px;
  left: -1px;
  @include left_bottom_line_color;
}

.right-top-line{
  right: -1px;
  top: -1px;
  @include right_top_line_color;
}
.right-bottom-line{
  right: -1px;
  bottom: -1px;
  @include after_line_color;
}
.el-tree{
  background: transparent !important;
  .el-tree-node:focus>.el-tree-node__content {    
    background-color: transparent !important;
  }
  .is-current>.el-tree-node__content {    
    @include tree_active;
  }
  .el-tree-node__content{
    height: 40px;
    @include tree_style;
    background-color: transparent;
    .el-tree-node__label{
      font-size: 16px;
      font-weight: 600;
    }
    &:hover{
      @include tree_hover;
    }
  }
  .el-tree-node__expand-icon{
    font-size: 16px;
    @include tree_font_color;
  }
  .el-tree-node__children{
    padding: 0 0 0 18px;
    .el-tree-node__content{
      @include tree_children_padding;
      height: 30px;
    }
    .el-tree-node__label{
      @include tree_children_font;
      font-size: 14px;
      font-weight: normal;

    }
  }

}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  @include tree_hover;
}
.el-tree .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label{
  @include tree_active;
}

.el-date-editor .el-range-input{
  background: transparent;
  @include tree_font_color;
}
// table
.el-table{
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  tr{
    background: transparent;
    .el-table__cell{
      height: 40px;
      background-color: transparent;
    }
  }
  .el-table__body-wrapper {
    flex: 1;
  }
  
  .el-table__header-wrapper,
  .el-table__header{
    th.el-table__cell{
      @include elTable-style;
      border-bottom: none;
      &>.cell{
        font-size: 14px;
        @include elTable-font-style;
      }
    }
  }

  .el-table__body-wrapper,
  .el-table__fixed-right{
    td.el-table__cell{
      @include elTable-td-font-style;
      font-size: 14px;
      padding: 5px 0;
    }
  }

  &::before, 
  .el-table--group::after, 
  .el-table--border::after,
  .el-table__fixed::before, 
  .el-table__fixed-right::before{
    background-color: transparent;
  }

  .el-table__body tr.hover-row > td, 
  .el-table__body tr.hover-row.current-row > td, 
  .el-table__body tr.hover-row.el-table__row--striped > td, 
  .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
    @include elTable-hover-style;
    .el-checkbox__input.is-checked .el-checkbox__inner{
      @include checkbox-active-style;
    }
  }
  .el-button{
    padding: 7px 15px;
  }
  .el-button--primary {
    background-color: #1890ff;
    border-color: #1890ff;
  }
  .el-button--danger {
    background-color: #ff4949;
    border-color: #ff4949;
  }

  .el-button.is-disabled, 
  .el-button.is-disabled:hover, 
  .el-button.is-disabled:focus{
    color: #fff;
    background-color: #ffa4a4;
    border-color: #ffa4a4;
  }
}
.el-table__body tr.el-table__row:hover>td.el-table__cell,
.el-table__body tr.el-table__row:focus>td.el-table__cell,
.el-table__body tr.current-row>td.el-table__cell,
.el-table__body tr.current-row:hover>td.el-table__cell, 
.el-table__body tr.current-row:focus>td.el-table__cell{
  @include elTable-hover-style;
  .el-checkbox__input.is-checked .el-checkbox__inner{
    @include checkbox-active-style;
  }
}

.el-table__body tr.current-row>td.el-table__cell{
  background-color: transparent;
}

.el-checkbox__inner{
  background: transparent;
  @include checkbox-style;
}

.el-icon-arrow-right:before{
  @include icon_color;
}
.el-picker-panel__icon-btn:before{
  color: #303133;
}
// 分页
.el-pagination{
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 64px 0 10px 0 !important;
  .el-pagination__total{
    font-size: 12px;
    @include pagination-font;
  }
  button,
  span:not([class*=suffix]){
    height: 24px!important;
    line-height: 24px!important;
    background-color: transparent;
    &:disabled{
      background-color: transparent;
    }
  }
  .el-pager li{
    min-width: 24px;
    height: 24px;
    margin: 0 4px;
    line-height: 24px;
    border: 1px solid #fff;
    font-size: 12px;
    @include pagination-input;
    background-color: transparent;
    &.more{
      border: none;
      @include pagination-paper-more;
      &::before{
        margin-right: 0 !important;
        line-height: 24px !important;
      }
    }
  }
  .el-pager li.active{
    color: #fff;
    @include pagination-active;
    &+li{
     @include pagination-paper;
    }
  }
  .el-select .el-input {
    width: 70px;
    margin: 0 !important;
    .el-input__inner{
      height: 24px;
      line-height: 24px;
      padding-left: 6px;
      padding-right: 18px !important;
      font-size: 12px;
      background-color: transparent;
      border-radius: 0;
      @include pagination-input;
    }
  }
  .el-icon-arrow-right:before{
    @include pagination-font;
  }
  .btn-prev,
  .btn-next{
    @include pagination-font;
    background-color: transparent;
  }
  .el-select .el-input .el-select__caret{
    line-height: 24px;
    @include pagination-font;
  }
}

// 弹框
.el-dialog{
  position: relative;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin-top: 0 !important;
  width: 736px;
  padding: 0 20px;
  border-radius: 6px;
  box-shadow: 0px 14px 21px 0px rgba(0,0,0,0.17);
  .el-dialog__header{
    padding: 17px 0;
    border-bottom: 1px solid #E6E8ED;
    .el-dialog__title{
      font-size: 16px;
      color: #000;
    }
    .el-dialog__close{
      font-family: "iconfont" !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 14px;
      color: #545B65;
      &::before{
        content: "\e61c";
      }
    }
  }
  .el-dialog__body{
    padding: 30px 0;
    .el-form-item{
      &:nth-child(odd){
        margin-right: 40px;
      }
      .el-form-item__label{
        color: #0C0E1E;
      }
      .el-form-item__content{
        width: 225px;
        .el-input__inner,
        .el-textarea__inner{
          border-color: #E6E8ED;
          &:focus{
            border-color:#0348F3;
          }
        }
        .vue-treeselect__control{
          height: 32px;
          border-color: #E6E8ED;
         .vue-treeselect__control,
          .vue-treeselect__placeholder,
          .vue-treeselect__single-value {
            height: 32px;
            line-height: 32px;
          }
        }
        .vue-treeselect--focused{
          .vue-treeselect__control{
            border-radius: 5px;
            border-color: #0348F3;
          }
        }
        .el-icon-close{
          border-radius: 0;
          font-family: "iconfont" !important;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          background-color: transparent;
          color: #0348F3;
          &:before{
            content: "\E61b";
          }
        }
        .el-radio__inner::after{
          width: 8px;
          height: 8px;
        }
        .el-radio__input.is-checked{
          .el-radio__inner{
            border-color: #0348F3;
            background: #0348F3;
          }
          &+.el-radio__label{
            color: #545B65;
          }
        }
        
      }
      &.is-error .el-input__inner, 
      &.is-error .el-input__inner:focus, 
      &.is-error .el-textarea__inner, 
      &.is-error .el-textarea__inner:focus{
        border-color:#ED4A41;
      }
    }
    .selecct-dropdown{
      .el-select-dropdown{
        position: absolute !important;
        top: 36px !important;
        left: 0 !important;
        padding: 6px 0;
        margin-top: 0;
        .el-select-dropdown__item{
          height: 26px;
          line-height: 26px;
        }
      }
    }
    .el-input-number{
      width: 225px;
      .el-input__inner{
        text-align: left;
      }
      .el-input-number__increase,
      .el-input-number__decrease{
        background-color: transparent !important;
        &.is-disabled{
          background-color: #E3E7EE !important;
        }
      }
      .el-icon-arrow-down,
      .el-icon-arrow-up{
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 12px;
        color: #545B65;
        transform: scale(0.5);
      }
      .el-icon-arrow-down:before{
        content: "\E629";
      }
      .el-icon-arrow-up:before{
        content: "\E62c";
      }
    }
  }
}


.dialog-footer,
.el-message-box__btns{
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
  .el-button{
    width: 76px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    border-color: #E6E8ED;
    background-color: transparent;
    color: #545B65;
    font-weight: normal;
    &.el-button--primary{
      color: #fff;
      background-color: #0348F3;
      border-color: #0348F3;
    }
  }
}

.el-form-item.is-error .el-input__inner, 
.el-form-item.is-error .el-input__inner:focus, 
.el-form-item.is-error .el-textarea__inner, 
.el-form-item.is-error .el-textarea__inner:focus{
  border-color:#ED4A41;
}

// el-tree 最终节点不显示箭头
.is-leaf::before  {
  color: transparent;
}

.el-input__prefix{
  left: 8px;
}

// tab样式布局
.tab-content{
  border-top: none;
  &::before{
    display: none;
  }
  .tab-nav{
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
    li{
      cursor: pointer;
    }
  }
}

// 默认底图 - 暂时只有头像
.user-img-cover{
  border-radius: 50%;
  background: url(~@/assets/images/avatar.png) no-repeat #fff;
  background-size: cover;
  overflow: hidden;
}

// 提示框-dialog
.tip-dialog{
  .el-dialog{
    width: 504px;
    .setting-dialog{
      padding: 0 10px;
    }
    .tip-content{
      padding-left: 34px;
      font-size: 14px;
      line-height: 24px;
      color: #0C0E1E;
      background: url("~@/assets/images/icon/tip-icon.png") no-repeat left top;
      background-size: 24px 24px;
      span{
        font-size: 12px;
        color: #ED4A41;
      }
    }
  }
  .dialog-footer{
    margin-top: 27px;
  }
}
.tip-middle-dialog{
  .el-dialog{
    width: 708px;
  }
}

// 门类-字段管理
.field-setting-dialog,
.edit-form-dialog{
  .el-dialog{
    width: 600px;
    .el-dialog__body {
      .el-form-item{
        &:nth-child(odd){
          margin-right: 0;
        }
        .el-form-item__content{
          .el-input__inner,
          .el-textarea__inner{
            width: 264px;
          }
        }
      }
    }
  }
  .des-form{
    .checkbox-item{
      height: 33px;
      line-height: 33px;
      .el-checkbox__inner{
        border-color: #D6D8DD;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner{
        border-color: #0348f3;
        background-color: #0348f3;
        &::after{
          border-color: #fff;
        }
      }
      .el-checkbox__input.is-disabled .el-checkbox__inner {
        border-color: #D6D8DD;
        background-color:#f5f7fa;
        &::after{
          border-color: #fff;
        }
      }
      span{
        font-weight: bold;
        color: #0C0E1E;
      }
    }

  }
}
.des-form{
  .input-num{
    .el-form-item__content{
      display: flex;
      justify-content: flex-start;
      width: 50px !important;
      .el-input,
      .el-input-number--small,
      .el-input-number.is-controls-right {
        width: 50px !important;
        margin-right: 10px;
        .el-input__inner{
          width: 50px !important;
          padding-left: 5px;
          padding-right: 5px;
          text-align: center;
        }
        .el-input-number__decrease,
        .el-input-number__increase{
          display: none;
        }
      }
    }
  }
}

.des-preview-left{
  .el-form-item__label{
    @include des-preview-label;
  }
  .el-form-item__content{
    span{
      @include des-preview-label;
    }
  }
  .el-input__inner{
    @include category-info-text;
  }
}

.small-preview-left{
  .checkbox-item {
    .el-form-item__content{
      margin-left: 50px !important;
    }
  }
}

.preview-dialog{
  .el-dialog{
    width: 758px !important;
    .preview-content{
      max-height: calc(100vh - 330px) !important;
      overflow: hidden !important;
      overflow-y: auto !important;
      border: none !important;
      .el-form-item__label{
        color: #0C0E1E !important;
      }
    }
    .dialog-footer{
      margin-top: 10px !important;
    }
  }
}

// 去除element ui 中el-input type=“number“的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type ='number'] {
  -moz-appearance: textfield !important;
}
 
.dialog-middle{
  .el-dialog{
    width: 536px;
    .el-dialog__body {
      .el-form-item {
        .el-form-item__content{
          width: 400px;
        }
        &:nth-child(odd){
          margin-right: 0;
        }
      }
    }
  }
}

.el-message-box{
  width: 504px;
  padding: 0 20px 30px 20px;
  .el-message-box__header{
    
    padding: 17px 0;
    border-bottom: 1px solid #E6E8ED;
    .el-message-box__title{
      font-size: 16px;
      line-height: 24px;
      color: #000;
    }
    .el-message-box__headerbtn{
      top: 20px;
      right: 0;
      .el-icon-close{
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 16px;
        color: #545b65;
        &::before{
          content: "\E61b";
        }
      }
    }
  }
  .el-message-box__content{
    padding: 26px 10px 10px 10px;
    .el-message-box__status{
      top: 12px;
      &.el-icon-warning{
        color: #ED4A41;
      }
    }
    .el-message-box__message{
      p{
        color: #0C0E1E;
        span{
          display: block;
          font-size: 12px;
          color: #ED4A41;
        }
      }
    }
  }
  .el-message-box__btns{
    padding: 0;
    margin-top: 27px;
  }
}

.el-table__header-wrapper{
  @include elTable-style;
}

.svg-style{
  margin-right: 5px;
}
.svg-arc-style{
  margin-right: 10px;
}

.el-form-item__error--inline{
  margin-left: 0;
  vertical-align: top;
}
.inline-error-item .el-form-item__content{
  line-height: normal;
  margin-bottom: -15px;
}

.el-select-dropdown,
.el-dropdown-menu{
  margin: 0;
  padding: 17px 0;
  @include dropdown_bg;
  border: none;
}
.el-dropdown-menu{
  top: 46px !important;
}
.el-select-dropdown__item{
  @include icon_color;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover{
  @include dropdown_bg_hover;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
  background-color: transparent;
  @include icon_color;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
  @include dropdown_bg_hover;
}

.el-popper[x-placement^=bottom] .popper__arrow{
  opacity: 0;
}

.el-popper[x-placement^=bottom] .popper__arrow::after{
  content: '';
  border: none;
}
.el-dropdown-menu .el-dropdown-menu__item{
  @include icon_color;
}
.el-dropdown-menu .el-dropdown-menu__item:hover{
  @include dropdown_bg_hover;
}

//vue-treeselect
.vue-treeselect__multi-value-item{
  background:#13439E !important;
  border: none !important;
}
.vue-treeselect__multi-value-label{
  color: #fff;
}
.vue-treeselect__value-remove{
  border-left: none !important;
}
.vue-treeselect__value-remove > svg{
  color: #fff;
}
.el-dropdown-menu--small .el-dropdown-menu__item{
  font-size: 14px;
  line-height: 32px;
  padding: 0 32px;
}

.el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{
  padding: 0;
}
.message-list-item a{
  display: flex; 
  justify-content: space-between; 
  padding: 0 20px; 
  height: 40px; 
  font-size: 14px; 
  border-bottom: 1px solid #113D72;
  p, span, i{
    line-height: 40px; 
  }
  p{
    width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  span{
    display: block;
  }
  i.el-icon-arrow-right:before{
    font-size: 16px;
    color: $mainColor;
  }
}
.message-dropdown.el-popper[x-placement^=bottom]{
  .popper__arrow{
    width: 89px;
    height: 20px;
    top: -8px;
    background:  url('~@/assets/images/pop-message.png') no-repeat !important;
    border: none;
    transform: rotate(0);
  }
}

// 库房空气质量监控
.msg-list{
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw - 800px);
}
.msg-list,
.screen-env-list{
  display: flex;
  li{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: calc(100%/6);
    height: 80px;
    margin-right: 20px;
    background: url('~@/assets/images/data_border_default.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    &.li-warn{
      background: url('~@/assets/images/data_border_warn.png') no-repeat;
      background-size: 100% 100%;
    }
    .msg-list-svg{
      font-size: 36px;
      display: inline-block;
      height: 80px;
      line-height: 80px;
      margin-left: 30px;
    }
    .msg-pm{
      font-size: 46px;
    }
    .msg-txt{
      position: relative;
      flex: 1;
      height: 80px;
      text-align: center;
    }
    .msg-list-unit{
      position: absolute;
      left: 0;
      bottom: 12px;
      width: 100%;
      font-size: 14px;
      color: $mainColor;
    }
    .msg-list-num{
      color: #fff;
      font-size: 26px;
      position: absolute;
      left: 0;
      top: 14px;
      width: 100%;
    }
  }
}

.el-tag--small{
  margin: 2px 0;
  @include elTag-style;
}

.el-tag.el-tag--warning {
  background-color: transparent;
  border-color: #FD8042;
  color: #FD8042;
}

.el-tag.el-tag--danger {
  background-color: transparent;
  border-color: #f65163;
  color: #f65163;
}

.el-tag.el-tag--info {
  margin: 0 0 0 8px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  border: none;
  @include select-elTag-style;
}

.el-tag.el-tag--info .el-tag__close {
  @include select-elTag-style;
}

// table 选中状态
.el-table__body .rowStyle>td {
  color: #fff !important;
  background-color: #13439E !important;
}

// 数据为空
.empty-main{
  display: flex;
  height: calc(100% - 40px);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .empty-img{
    width: 140px !important;
    height: 140px !important;
    vertical-align: middle !important;
  }
  p{
    font-size: 12px;
    color: #999;
    margin-top: -10px;
  }
}

// 日期控件btn
.el-date-range-picker{
  .el-picker-panel__footer .el-button{
    border: 1px  solid $mainColor;
    color: $mainColor !important;
  }
  .el-picker-panel__footer .el-button:hover{
    background-color: transparent;
  }
  .el-picker-panel__footer .el-button.is-plain {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff !important;
  }
}
// 档案统计title
.table-title {
  @include font-color($font-color-dark);
  font-size: 16px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
 
.warehouse-svg {
  margin: 0 10px 1px 0;
}
.title-arrow {
  position: relative;
  display: inline-block;

  &::before {
    content: '';
    width: 36px;
    height: 12px;
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    background: url('~@/assets/images/warehouse_arrow_left.png') no-repeat;
  }

  &::after {
    content: '';
    width: 36px;
    height: 12px;
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat;
  }
}
.el-switch .el-switch__core{
  @include switch-disabled;
}

.el-switch.is-checked .el-switch__core{
  @include switch-style;
}

.el-switch.is-disabled .el-switch__core{
  @include switch-disabled;
}

.vue-treeselect--open-below .vue-treeselect__menu{
  padding: 6px 0;
  top: 4px !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.17) !important;
  border-radius: 3px !important;
  .vue-treeselect__option{
    height: 26px;
    line-height: 26px;
    .vue-treeselect__label{
      font-weight: normal;
      color: #545B65;
    }
    &.vue-treeselect__option--highlight,
    &.vue-treeselect__option--selected{
      background: #F5F9FC;
      .vue-treeselect__label{
        color:#0348F3;
      }
    }
  }
}

// 角色权限选择
.tree-tab {
  display: flex;
  justify-content: space-between;
  align-items: first baseline; 
  @include tree_tab_style;
  span.role-span{
    display: block;
    font-size: 14px;
    @include tree_tab_item;
    line-height: 26px;
    cursor: pointer;
    &.role-tab-active{
      font-size: 16px;
      @include tree_tab_item_active;
    }
  }
  .el-button--mini{
    width: 46px;
    height: 26px;
    padding: 0;
  }
}

// checkbox
.el-checkbox__input.is-checked .el-checkbox__inner{
  @include checkbox-active-style;
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner{
  @include checkbox-active-style;
}

.el-checkbox__input.is-disabled .el-checkbox__inner{
  @include checkbox-disabled-style;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
  @include checkboxAnddisabled-style;
}

.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color: #0348F3;
  background-color: #E8F2FF;
  border-color: #dcdfe6;
  -webkit-box-shadow: -1px 0 0 0 #1890ff;
  box-shadow: -1px 0 0 0 #E8F2FF;
}

.iconFolder{
  display: inline-block;
  width: 17px;
  height: 17px;
  padding-left: 22px;
  background: url('~@/assets/images/icon/tree-01.png') no-repeat left center;
  background-size: contain;
}
.iconArch{
  display: inline-block;
  width: 20px;
  height: 20px;
  padding-left: 22px;
  background: url('~@/assets/images/icon/tree-02.png') no-repeat left center;
  background-size: cover;
}

.iconFile{
  @include tree_children_font;
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before{
    content: "\e623";
    font-size: 16px;
    @include tree_children_icon_font;
  }
}

.iconStoreHouse{
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before{
    content: "\e667";
    font-size: 16px;
    @include tree_store_icon_font;
  }
}

.iconArea{
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before{
    content: "\e678";
    font-size: 14px;
    @include tree_children_icon_font;
  }
}

.iconClassify{
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before{
    content: "\e648";
    font-size: 14px;
    @include tree_classfiy_icon_font;
  }
}
.iconClassify-child{
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before{
    content: "\e64a";
    font-size: 14px;
    @include tree_classfiy_icon_font;
  }
}

// 档案门类-基本信息
.system-base-info {
  @include category-padding;
  padding: 20px;
  .info-item {
    display: flex;
    font-size: 14px;
    @include category-info-item;
    span {
      display: block;
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: right;
      @include pagination-font;
    }
    p {
      width: 300px;
      padding: 0 10px;
      line-height: 36px;
      @include category-info-text;
    }
  }
  .info-content p {
    height: 120px;
  }
}


.sort-dialog{
  .el-dialog{
    width: 504px;
    padding: 0;
  }
  .el-dialog__header{
    margin: 0 20px;
  }
  .el-dialog__body{
    padding-top: 0;
  }
  .dialog-footer{
    padding: 0 20px;
  }
  .drag-tip {
    display: block;
    padding: 15px 20px;
    font-style: normal;
    font-weight: normal;
    color: #0348F3;
  }
}

// 档案门类 2
.format-main {
  display: flex;
  justify-content: flex-start;
  @include category-padding;
  .format-main-left {
    padding-right: 10px;
  }
  .format-main-right {
    flex-grow: 1;
  }
}
.addEdit-category-form{
  .setting-dialog{
    .el-form{
      max-height: 600px;
      padding-right: 10px;
      overflow: hidden;
      overflow-y: scroll;
    }
  }
}

// 归档章/水印提示
.chapter-tip{
  padding: 10px 20px 10px 40px;
  margin-bottom: 30px;
  font-size: 12px;
  color: #545B65;
  line-height: 26px;
  background-color: #EEF5FE;
  border: 1px solid #CBDAFF;
  border-left: 2px solid #0348F3;
  p{
    font-size: 14px;
    color: #0C0E1E;
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &::before{
      content: '\e61e';
      color: #215EF4;
      margin-left: -24px;
      margin-right: 10px;
    }
  }
  span{
    display: block;
    position: relative;
    padding-left: 14px;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #9BA6B7;
      transform: translateY(-50%);
    }
  }
}
.chapter-setting,
.waterMark-main{
  display: flex;
  justify-content: space-between;
}
.chapter-format{
  padding-left: 42px;
}

.chapter-item{
  display: flex;
  justify-content: flex-start;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 20px;
  p.item-title{
    width: 70px;
    @include setting-item-font;
    text-align: right;
    margin-right: 10px;
  }
  span.item-selected{
    display: block;
    width: 297px;
    padding: 0 13px;
    @include setting-item-selected;
  }
}

.chapter-enable{
  display: flex;
  justify-content: flex-start;
  .chapter-edit{
    margin-left: 36px;
  }
}

.format-style{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 300px;
  height: 80px;
  border-left: 1px solid #E6E8ED;
  border-top: 1px solid #E6E8ED;
  span{
    display: block;
    width: 100px;
    height: 40px;
    margin-left: -1px;
    margin-top: -1px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #E6E8ED;
    border-left: none;
    border-top: none;
  }
}

.isEnable-chapter{
  margin-top: 5px;
  .el-switch__core{
    width: 28px !important;
    height: 16px !important;
    &::after{
      width: 12px;
      height: 12px;
      margin-left: 0;
    }
  }
}

.chapter-enable,
.process-item{
  .el-switch.is-checked .el-switch__core::after{
    margin-left: -13px !important;
  }
}

.waterMark-result{
  .chapter-item{
    p.item-title{
      width: 90px;
    }
    .item-remark{
      height: 110px;
    }
  }
}

// 著录界面
.category-main {
  display: flex;
  justify-content: flex-start;
  @include main-padding;
  .des-preview-left,
  .des-preview-right {
    height: calc(100vh - 274px);
    padding-right: 10px;
    overflow-y: auto;
  }
  .des-preview-left {
    flex: 1;
    .des-form{
      .input-num{
        display: flex;
        justify-content: flex-end;
        text-align: right;
        @include des-preview-input-num;
        .el-form-item__content{
          margin-left: 0 !important;
          .el-input,
          .el-input-number--small,
          .el-input-number.is-controls-right {
            padding-left: 2px;
            padding-right: 2px;
            @include des-preview-input-cont;
          }
        }
      }
    }
    .el-col-8{
      text-align: right;
    }
    checkbox-item{
      .el-form-item__content{
        margin-left: 0 !important;
      }
    }
  }
  .des-title {
    position: relative;
    height: 28px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    @include des-title;
    p {
      line-height: 28px;
      i {
        font-size: 16px;
        margin-left: 6px;
        background-image: none;
        transition: all ease-in 0.5s;
        &.arrow-up {
          transform: rotate(180deg);
        }
      }
    }
    &::before {
      content: "";
      position: absolute;
      left: 0;
      z-index: 1;
    }
  }
  .des-fields {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-left: 1px;
    li {
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: -1px 0 0 -1px;
      font-size: 14px;
      text-align: center;
      @include des-fields;
      cursor: pointer;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }
  .des-set-btn {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    margin-bottom: 20px;
    .el-button {
      display: block;
      @include elButton-style;
      &.el-button--small{
        padding: 7px 10px;
      }
    }
    .des-set-sort {
      .iconfont {
        line-height: 0 !important;
      }
    }
  }

  .des-preview-right {
    width: 740px;
    margin-left: 20px;
  }
}

// 带select得输入框
.input-prepend{
  position: relative;
  z-index: 99;
  overflow: hidden;
  .el-input__inner {
    padding-left: 80px;
    background-color: transparent;
  }
  .el-input-group__prepend {
    position: absolute;
    left: 0;
    top: 1px;
    color: #fff;
    background-color: transparent;
    border: none !important;
    height: 32px;
    line-height: 30px;
    .el-input__inner {
      padding: 0 10px !important;
      border-radius: 3px 0 0 3px;
      @include prepend-input;
    }
    .el-input__inner:hover,
    .el-input__inner:focus{
      @include prepend-input;
    }
    .el-select__caret{
      @include prepend-color;
    }
  }
}

// 系统日志
.el-table__expanded-cell{
  padding: 0 !important;
}
.demo-table-expand {
  padding: 10px 30px;
  background-color: #F5F9FC;
}
.demo-table-expand {
  .el-form-item {
    display: flex;
    justify-content: flex-start;
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    .el-form-item__label{
      width: 80px !important;
      font-size: 12px;
      color: #0C0E1E;
    }
    .el-form-item__content {
      font-size: 12px;
      color: #545B65;
    }
  }
}

// 元数据
.hljs{
  width: 100%;
  padding: 0 30px;
  background-color: transparent !important;
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 14px;
  .hljs-attribute{
    display: inline-block;
    margin: 2px 0 !important;
  }
}

.java.hljs {
  color: #545B65 !important;
  height: 630px !important;
}

.tip {
  display: inline-block;
  margin: 4px 0 0 14px;
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  background: url('~@/assets/images/icon/tip-icon.png') no-repeat left 6px;
  background-size: 14px 14px;
}


.fixed-table.el-table .el-table__fixed-right{
  @include table-fixed-style;
}

// 流程管理内 - 档案列表dialog
.detail-dialog{
  .el-dialog{
    width: 860px;
    .el-dialog__body{
      padding: 0 0 30px 0;
    }
  }
  .el-pagination{
    margin: 20px 0 10px 0 !important;
  }
}

.item-content{
  height: calc(100vh - 380px);
}

// 个人中心
.process-center{
  display: flex;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  .process-left{
    width: 240px;
    padding: 26px 0;
    @include process-left-style;
    li{
      height: 50px;
      line-height: 50px;
      padding-left: 40px;
      cursor: pointer;
      &.active-li{
        position: relative;
        &::before{
          position: absolute;
          left: 0;
          top: 50%;
          content: "";
          width: 3px;
          height: 28px;
          margin-top: -14px;
        }
      }
      
    }
  }
  .head-container{
    margin: 20px 0 !important;
  }
  .user-search-btn{
    @include btn_blue_style;
  }
}

.corres-field-main{
  display: flex;
  justify-content: space-between;
  height: 428px;
  border: 1px solid #E6E8ED;
  overflow: hidden;
      overflow-y: scroll;
  .corres-field-list{
    .corres-field-title{
      height: 60px;
      line-height: 20px;
      background-color: #F5F9FC;
      text-align: center;
      p{
        font-size: 14px;
        color: #0C0E1E;
        padding-top: 10px;
      }
      span{
        font-size: 12px;
        color: #0348F3;
      }
    }
    .field-list{
      border-right: 1px solid #E6E8ED;
      .field-item{
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #E6E8ED;
        p{
          flex: 1;
          font-size: 14px;
          color: #545B65;
          text-align: center;
        }
        .el-select{
          width: 302px;
          border-right: 1px solid #E6E8ED;
          .el-input__inner{
            height: 38px;
            line-height: 38px;
            border: none;
          }
        }
        .field-state{
          width: 88px;
          text-align: center;
          border-left: 1px solid #E6E8ED;
          span{
            display: inline-block;
            width: 48px;
            height: 22px;
            line-height: 22px;
            font-size: 12px;
            border-radius: 3px;
          }
          span.is-select{
            color: #0348F3;
            background-color: #EEF5FE;
            border: 1px solid #90B0F9;
          }
          span.is-hide{
            color: #A6ADB6;
            background-color: #F3F5F9;
            border: 1px solid #E6E8ED;
          }
        }
      }
    }
  }
  .corres-field-middle,
  .corres-field-right{
    flex: 1;
  }
  .corres-field-right{
    border-right: none;
  }
}

.el-upload {
  .el-button{
    color: #fff !important;
    background-color: #1F55EB !important;
    border: none !important;
  }
}

// 2023-10-8
.upload-bgColor{
  position: relative;
  .upload-input{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .el-button{
    color: #fff !important;
    background-color: #1F55EB !important;
    border: none !important;
  }
}

.row-state{
  display: inline-block;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  border-radius: 3px;
  @include process-status-style;
}

.vue-treeselect--disabled .vue-treeselect__control{
  background-color: #f5f7fa !important;
  border-color: #dfe4ed !important;
  color: #c0c4cc !important;
  cursor: not-allowed !important;
}
.vue-treeselect--disabled .vue-treeselect__single-value{
  color: #c0c4cc !important;
}

.fileIcon{
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  &.icon-image{
    background: url("~@/assets/images/fileIcon/image.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-excel{
    background: url("~@/assets/images/fileIcon/excel.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-pdf{
    background: url("~@/assets/images/fileIcon/pdf.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-ppt{
    background: url("~@/assets/images/fileIcon/ppt.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-word{
    background: url("~@/assets/images/fileIcon/word.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-zip{
    background: url("~@/assets/images/fileIcon/zip.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-txt{
    background: url("~@/assets/images/fileIcon/txt.png") no-repeat;
    background-size: 100% 100%;
  }
  &.icon-other{
    background: url("~@/assets/images/fileIcon/attachment.png") no-repeat;
    background-size: 100% 100%;
  }
}