@import 'reset.css';

body { 
  min-width: 1200px;
  overflow-x: auto;
  overflow-y: auto;
}

/* header */
.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #fff;
  box-sizing: border-box;

  .title {
    width: 220px;
    height: 100%;
    float: left;
    background-color: #353d48;
    transition: background .25s ease-in-out;

    &.is-collapse {
      background-color: #ffffff;
      border-bottom: 1px solid #dfdfe1;
    }
    
    .icon-menu {
      float: left;
      width: 64px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      color: #878d9d;
      background-color: #353d48;
      cursor: pointer;
    }
    > .logo {
      float: right;
      margin-right: 40px;
      margin-top: 7px;
    }
    > a { 
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      line-height: 1;
      vertical-align: middle;
    }
  }

  .userImformation{ 
    padding-left: 18px;
    display: flex;
    justify-content: space-between;
    flex: 1;
    border-bottom: solid 1px #dfdfe1;
    height: 50px;
    line-height: 50px;

    .yunweiTitle {
      font-size: 18px;
      color: #363a3d;
    }

    .changePassword {
      line-height: 34px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }

  .user-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    margin-left: 40px;
    margin-right: 12px;
    
    .changeTheme {
      padding: 0 10px;
    }
    .message {
      width: 50px;
      height: 49px;
      text-align: center;
      position: relative;
      cursor: pointer;
      
      i {
        color: #878d9d;
        font-size: 20px;
      }
      .dot {
        width: 10px;
        height: 10px;
        background: #e02e43;
        border-radius: 50%;
        position: absolute;
        right: 5px;
        top: 5px;
      }
    }

    .user-img {
      width: 40px;
      height: 40px;
      border: solid 1px #acafb6;
      padding: 1px;
      color: #20a0ff;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
      border-radius: 50%;
      margin: 0 12px;

      .user-imgIn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        overflow: hidden;
      }

      .iconfont {
        font-size: 24px;
      }
    }
    .user-more {
      font-size: 16px;
      margin-right: 8px;
      font-weight: bold;
      cursor: pointer;

      i {
        color: #86889d;
        font-size: 20px;
      }

      /* .exit{ 
        margin-left: 10px;
        cursor: pointer;
        font-weight: normal;
      }

      .el-dropdown-link {
        color: #fff;
      
        &:hover {
          opacity: .85;
        }
      } */
    }
  }
  .el-menu {
    background: transparent !important;
    border: 0 none;
  }
}
.changeThemDialog {
  .clr {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    border: 1px solid #333;
    vertical-align: middle;
  }
}

/* 面包屑 */
.breadCrumb .el-breadcrumb__separator{ 
  color: #747474;
}

/* 单选目录 */
.radioTree {
  >.el-tree-node {
    >.el-tree-node__content {
      background: rgba(213, 212, 217, 0.1);
    }

    >.el-tree-node__children{ 
      background: rgba(213, 212, 217, 0.1);
    }
  }
  .el-tree-node__content {
    &:hover {
      background: #d8d8d8;
    }
  }

  .el-checkbox {
    margin-left: 10px;
    float: left;
  }
  .el-tree-node__expand-icon { 
    float: right;

    background: url('../img/right.png') no-repeat center center;
    background-size: 70% auto;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
  }

  .el-tree-node__expand-icon.is-leaf {
    border: none;
    background: none;
  }
  .el-tree-node__label { 
    float: left;
  }
}

/* 多选目录树 */
.multiselectTree {
  .el-tree-node__content {
    overflow: hidden;
    line-height: 36px;
  }
  .el-tree-node__expand-icon { 
    float: right;
    background: url('../img/right.png') no-repeat center center;
    background-size: 70% auto;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
  }
  .el-tree-node__expand-icon.is-leaf {
    border: none;
    background: none;
  }
  .el-checkbox {
    margin-left: 10px;
    float: left;
  }
  
  .el-tree-node__label {
    float: left;
  }
}


/* 弹窗 */
.el-dialog__header{
  text-align: center;
}
.el-dialog__footer{ 
  text-align: center;
}

/* 查询项的样式 */
.searchCommon {
  .el-form-item__label { 
    /* border: solid 1px #8dc9c7; */
    border-radius: 4px 0 0 4px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    border: solid 1px #d5d4d9;
    border-right: none;
  }
  .el-input__inner { 
    border-radius: 0 4px 4px 0;
  }
  .select .el-input__inner { 
    border-left: solid 1px #8dc9c7;
    border-radius: 4px;
  }
}

/* 范围时间样式 */
.el-time-range-picker { 
  min-width: 220px;
}
.el-time-panel__footer { 
  text-align: center;
}

.el-loading-mask {
  background-color: rgba(255,255,255,.5);
}

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: #d8d8d8;
  font-weight: bold;
}

.el-date-editor .el-range-separator {
  width: auto !important;
}

/* 用户机构目录 */
.el-tree-node__content {
  height: 35px;
}
.el-tree-node__label {
  margin-left: 0;
}

@media screen and (max-height: 540px) {
  body {
    height: 540px;
    overflow-y: auto;
  }
}

/* 单选框
.el-radio__input.is-checked .el-radio__inner {
  background: $primaryColor;
  border-color: $primaryColor;
}
.el-radio__input.is-focus {
  .el-radio__inner {
    border-color: $primaryColor;
  }
}
.el-radio__inner:hover {
  border-color: $primaryColor;
}
 */
/* 多选框
.el-checkbox__input.is-checked {
  .el-checkbox__inner {
    background: $primaryColor;
    border-color: $primaryColor;
  }
}
.el-checkbox__input.is-focus {
  .el-checkbox__inner {
    border-color: $primaryColor;
  }
}
.el-checkbox__input.is-indeterminate {
  .el-checkbox__inner {
    background: $primaryColor;
    border-color: $primaryColor;
  }
}
 */

.global {
  // 头部 
  .header {
    .el-submenu__title {
      padding: 0;
    }
    .el-submenu__icon-arrow {
      display: none;
    }
    .el-menu--horizontal {
      > .el-submenu {
        .el-submenu__title {
          height: 50px;
          line-height: 50px;
        }
      }
    }
  }
  .el-menu--horizontal {
    .el-menu--popup {
      min-width: 120px;
    }
  }

  .el-menu--vertical {
    .el-menu {
      i {
        margin-right: 6px;
      }
    }
  }
  .bigMenuVertical {
    &:not(.el-menu--collapse) {
      width: 220px;
    }
  }
  // 树的三角图标
  .el-icon-caret-right {
    &:before {
      display: none;
    }
  }
}

/* 输入框
.el-select-dropdown__item.selected {
  color: $primaryColor;
}
 */
/* .el-table--enable-row-hover .el-table__body tr:hover>td, .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 {
  background: #ececec;
}

.el-input__inner:focus, .el-textarea__inner:focus, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner:focus {
  border-color: $infoColor;
}
.el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-textarea__inner {
  border-color: #dcdfe6;
} */

.catalogCon .el-input.is-disabled .el-input__inner, .editDialog .el-input.is-disabled .el-input__inner, .editDialog .el-textarea.is-disabled .el-textarea__inner {
  color: #606266;
  border-color: #e4e7ed;
}

// 用户管理——添加用户
.addeditUserDialog {
  .el-cascader, .el-select {
    display: block;
  }
}

@media screen and (min-width: 1400px) {
  .global {
    .bigMenuVertical:not(.el-menu--collapse) {
      width: 280px;
    }
  
    .header {
      .title {
        width: 280px;
      }
    }
  }
}

@media screen and (max-width: 1400px) {
  .global {
    .header {
      .title {
        > .logo {
          margin-right: 20px;
        }
      }
    }
  }
}

@media screen and (max-width:1366px) {
  .global {
    .bigMenuVertical:not(.el-menu--collapse) {
      width: 220px;
    }
  
    .header {
      .title {
        width: 220px;
        > img {
          margin-right: 10px;
        }
        > .logo {
          margin-right: 10px;
        }
      }
    }
          
    .multiselectTree {
      max-height: 320px;
      margin-top: 0;
    }
  }
}