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{
  .tab-content{
    position: relative;
    @include row_tab_style;
    
    .tab-nav{
      margin-bottom: 0;
    }
  }
}

.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;
  }
}

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

// xu
// 四角边线
// 有左右分区时
.container-main{
  display: flex;
  justify-content: space-between;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
// .container-left{
//   // margin-right: 20px;
//   // @include box_padding;
// }
.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;
  }
}

// xu  el-button
.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;
}
// .el-message-box,
// .el-popover{
//   .el-button{
//     border-color: #dcdfe6;
//     color: #606266;
//   }
  
//   .el-button:focus, 
//   .el-button:hover {
//       color: #1890ff;
//       border-color: #badeff;
//       background-color: #e8f4ff;
//   }
//   .el-button--primary,
//   .el-button--primary:focus,
//   .el-button--primary:hover {
//     background: #46a6ff;
//     border-color: #46a6ff;
//     color: #fff;
//   }
// }

.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__children .is-current .el-tree-node__label{
  @include tree_active;
}

.el-date-editor .el-range-input{
  background: transparent;
  @include tree_font_color;
}

// table
.el-table{
  background: transparent;
  tr{
    background: transparent;
    .el-table__cell{
      height: 40px;
      background-color: transparent;
    }
  }
  
  .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: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";
      }
    }
    // .el-input-number.is-controls-right {
    //   .el-input-number__decrease,
    //   .el-input-number__increase{
    //     display: none;
    //   }
    //   .el-input__inner{
    //     padding-left: 0;
    //     padding-right: 0;
    //   }
    // }
  }

  // position: relative;
  // position: fixed;
  // width: 620px;
  // padding: 2px;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  // margin-top: 2vh !important;
  // background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, 
  //             linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, 
  //             linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, 
  //             linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left;
  // background-size: 50% 50%;
  // background-repeat: no-repeat;
  // &::before,
  // &::after,
  // .dialog-right-top,
  // .dialog-left-bottom{
  //   position: absolute;
  //   content: "";
  //   width: 134px;
  //   height: 63px;
  //   z-index: 99;
  // }
  // &::before{
  //   left: -6px;
  //   top: -6px;
  //   background: url(~@/assets/images/dialog_left_top.png) no-repeat;
  //   background-size: contain;
  // }
  // &::after{
  //   right: -18px;
  //   bottom: -7px;
  //   background: url(~@/assets/images/dialog_right_bottom.png) no-repeat;
  //   background-size: contain;
  // }
  // .dialog-right-top{
  //   right: -23px;
  //   top: -6px;
  //   background: url(~@/assets/images/dialog_right_top.png) no-repeat;
  //   background-size: contain;
  // }
  // .dialog-left-bottom{
  //   left: -6px;
  //   bottom: -7px;
  //   background: url(~@/assets/images/dialog_left_bottom.png) no-repeat;
  //   background-size: contain;
  // }
  // .el-dialog__header{
  //   position: absolute;
  //   top: -40px;
  //   left: 50%;
  //   width: 360px;
  //   padding: 0;
  //   transform: translateX(-50%);
  //   &::before{
  //     position: absolute;
  //     left: -23px;
  //     top: 0;
  //     content: "";
  //     width: 23px;
  //     height: 42px;
  //     background: url(~@/assets/images/dialog_left.png) no-repeat;
  //     background-size: cover;
  //   }
  //   &::after{
  //     position: absolute;
  //     right: -23px;
  //     top: 0;
  //     content: "";
  //     width: 23px;
  //     height: 42px;
  //     background: url(~@/assets/images/dialog_right.png) no-repeat;
  //     background-size: cover;
  //   }
  //   .el-dialog__title{
  //     display: block;
  //     font-size: 18px;
  //     font-weight: bold;
  //     line-height: 38px;
  //     color: #fff;
  //     text-align: center;
  //     background-color: $boxBg;
  //     border-top: 2px solid $mainColor;
  //     border-bottom: 2px solid $mainColor;
  //   }
  //   .el-dialog__headerbtn{
  //     top: 4px;
  //     right: -160px;
  //   }
  //   .el-dialog__close{
  //     font-family: "iconfont" !important;
  //     font-style: normal;
  //     -webkit-font-smoothing: antialiased;
  //     -moz-osx-font-smoothing: grayscale;
  //     font-size: 24px;
  //     color: $mainColor;
  //     &::before{
  //       content: "\e60c";
  //     }
  //   }
  // }
  // .el-dialog__body{
  //   width: 100%;
  //   // background-color: $boxBg;
  //   // border: 2px solid $mainColor;
  //   // min-height: 400px;
  //   // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left, 
  //   //           linear-gradient(-135deg, transparent 12px, $boxBg 0) top right, 
  //   //           linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right, 
  //   //           linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left;
  //   // background-size: 50% 50%;
  //   // background-repeat: no-repeat;
  //   // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
  // }
  // .dialog-footer{
  //   margin: 30px auto 0 auto;
  //   text-align: center;
  //   .el-button{
  //     font-size: 16px;
  //     padding: 8px 28px;
  //   }
  //   .el-button--primary{
  //     background-color: $desPreviewColor;
  //   }
  // }
}


.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-dialog,
// .right-preview{
//   .el-form{
//     .el-form-item__label{
//       color: $mainColor;
//     }
//     .el-input__inner{
//       color: #fff;
//       border: 1px solid $mainColor;
//       background-color: transparent !important;
//     }
//     .vue-treeselect__control, 
//     .vue-treeselect__placeholder,
//     .vue-treeselect__single-value{
//       height: 28px;
//       // line-height: 28px;
//       color: #fff;      
//     }
//     .vue-treeselect__control{
//       border: 1px solid $mainColor;
//       background-color: transparent;
//       .vue-treeselect__control-arrow{
//         color: $mainColor;
//       }
//     }
//     .el-radio{
//       color: #fff;
//     }
//     .el-textarea__inner{
//       color: #fff;
//       border: 1px solid $mainColor;
//       background-color: transparent;
//     }
//     .el-input-number.is-controls-right[class*=small] [class*=increase], 
//     .el-input-number.is-controls-right[class*=small] [class*=decrease]{
//       background-color: transparent;
//     }
//     .el-input-number__decrease,
//     .el-input-number__increase{
//       border-left-color: $mainColor;
//       &>i{
//         color: #fff;
//       }
//     }
//     .el-input-number__increase{
//       border-bottom-color: $mainColor;
//     }
//     .el-select .el-input .el-select__caret{
//       color: $mainColor;
//     }
//     .vue-treeselect .vue-treeselect__control:focus,
//     .vue-treeselect .vue-treeselect__control:hover{
//       border-color: $mainColor !important;
//     }
//     .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control,
//     .el-input.is-disabled .el-input__inner,
//     .el-textarea.is-disabled .el-textarea__inner{
//       color: $desPreviewColor !important;
//       border: none !important;
//       background-color: #02255f!important;
//     }
//   }
// }

.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;
}

// 著录界面表单
// .des-form{
  // .el-form-item__label{
  //   font-weight: normal;
  //   color: $desPreviewColor;
  // }
  // .el-input__inner{
  //   // color: $desPreviewColor;
  //   // background: #021941 !important;
  //   @include input_style;
  //   border: none;
  //   &::placeholder{
  //     color: $desPreviewColor !important;
  //   }
  //   &::-webkit-input-placeholder{
  //     color: $desPreviewColor !important;
  //   }
  // }
  // .el-input.is-disabled .el-input__inner{
  //   color: $desPreviewColor !important;
  //   border: none;
  //   background-color: #02255f!important;
  // }
  // .el-input__icon{
  //   color: $desPreviewColor !important;
  // }
  // .checkbox-item{
  //   height: 36px;
  //   line-height: 36px;
  //   // text-align: right;
  //   .el-form-item__content{
  //     margin-left: 0 !important;
  //   }
  //   .el-checkbox__input.is-disabled .el-checkbox__inner{
  //     // background-color: transparent;
  //     // border-color: $mainColor;
  //     @include checkbox-disabled-style;
  //     // &::after{
  //     //   border-color: $desPreviewColor;
  //     // }
  //   }
  //   span{
  //     color: $desPreviewColor;
  //   }
  // }
  // .input-num{
  //   display: flex;
  //   justify-content: flex-end;
  //   .el-input__inner{
  //     width: 50px;
  //   }
  //   .el-form-item__content{
  //     display: flex;
  //     justify-content: flex-start;
  //     margin-left: 0 !important;
  //     .el-input,
  //     .el-input-number--small{
  //       width: 60px;
  //     }
  //     .el-input-number.is-controls-right {
  //       .el-input-number__decrease,
  //       .el-input-number__increase{
  //         display: none;
  //       }
  //       .el-input__inner{
  //         padding-left: 0;
  //         padding-right: 0;
  //       }
  //     }
  //   }
  //   span{
  //     color: $desPreviewColor;
  //     line-height: 36px;
  //   }
  // }
// }
// 提示框-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: 536px;
    .el-dialog__body {
      .el-form-item{
        &:nth-child(odd){
          margin-right: 0;
        }
        .el-form-item__content{
          // width: 264px;
          .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;
  }
  
}

.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;
    }
  }
}
// .preview-dialog{
//   .el-dialog__body{
//     padding: 30px 0 !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;
}

// 弹框-删除等提示
// .setting-dialog{
//   // .dialog-delt{
//   //   line-height: 26px;
//   //   color: #fff;
//   //   margin-bottom: 20px;
//   // }
//   // .delt-tip{
//   //   margin-top: 10px;
//   //   color: #EF3147;
//   // }
// }

// alert 样式
// .el-message-box{
//   position: relative;
//   width: 588px;
//   border: 2px solid $mainColor;
//   border-bottom: none;
//   border-radius: 4px 4px 0 0;
//   background-color: $boxBg;
//   overflow: visible;
//   &::after{
//     position: absolute;
//     left: -2px;
//     bottom: -30px;
//     content: "";
//     width: 589px;
//     height: 30px;
//     background:  url(~@/assets/images/alert_bottom.png) no-repeat;
//     background-size: contain;
//   }
//   .el-message-box__header{
//     padding: 18px 60px;
//     background-color: $mainColor;
//     .el-message-box__title{
//       font-weight: bold;
//       color: #fff;
//     }
//     .el-message-box__headerbtn{
//       top: -36px;
//       right: -16px;
//     }
//     .el-icon-close{
//       font-family: "iconfont" !important;
//       font-style: normal;
//       -webkit-font-smoothing: antialiased;
//       -moz-osx-font-smoothing: grayscale;
//       font-size: 24px;
//       color: $mainColor;
//       &::before{
//         content: "\E61b";
//       }
//     }
//   }
//   .el-message-box__content{
//     height: 110px;
//     padding: 35px 60px 15px 60px;
//     color: #fff;
//   }
// }
// .el-message-box .el-button, 
// .el-popover .el-button{
//   color: #fff;
//   border-color: $mainColor;
//   background-color: transparent;
// }

// .el-message-box .el-button:hover,
// .el-popover .el-button:focus{
//   color: #fff;
//   background-color: #02255F;
//   border-color: $mainColor;
// }
// .el-message-box .el-button--primary,
// .el-message-box .el-button--primary:focus,
// .el-message-box .el-button--primary:hover {
//   background: #46a6ff;
//   border-color: #46a6ff;
//   color: #fff;
// }

 
.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;
}

// 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 {
  // color: #fff;
  @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-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;
  }
}
// 档案门类-基本信息
.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;
    }
  }
}
.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: 758px;
    margin-left: 20px;
  }
}

// 带select得输入框
.input-prepend{
  position: relative;
  z-index: 99;
  .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: 30px;
    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;
    }
  }
}
.java.hljs {
  color: #545B65 !important;
  background: transparent !important;
  width: 100%;
  height: 630px !important;
}