hbt-prevention-ui/src/views/common.component.scss

::v-deep {
  .color_0 {
    color: #f56c6c;
  }
  .color_1 {
    color: #68c23a;
  }

  .color_2 {
    color: #409eff;
  }

  .color_3 {
    color: #e6a23c;
  }

  .color_4 {
    color: #f56c6c;
  }

  .color_5 {
    color: rgba(0, 0, 0, 0.5);
  }
  
  .color_6{
    color: rgba(0,0,0,0.3)
  }

  .color_level_1 {
    color: #fff;
    background-color: #116ff5;
    padding: 5px 21px;
    font-size: 12px;
    border-radius: 4px;
  }

  .color_level_2 {
    color: #fff;
    background-color: #ffc019;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 4px;
  }

  .color_level_3 {
    color: #fff;
    background-color: #ff7802;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 4px;
  }

  .color_level_4 {
    color: #fff;
    background-color: #e31c21;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 4px;
  }

  .noDraw {
    color: #f56c6c;
  }

  .text_link {
    color: #409eff;
    cursor: pointer;
    pointer-events: auto;

    &:hover {
      text-decoration: underline;
    }
  }
  .el-dialog__header {
    padding: 20px 0 20px 0px;
    border-bottom: 1px solid #eee;
    margin: 0 40px;
  }
  .el-dialog__body {
    padding: 30px 40px;
  }
  .el-dialog__wrapper,
  .v-modal {
    z-index: 99 !important;
  }

  .el-tree-node__content {
    height: 39px;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: rgb(0 0 0 / 60%);
    font-size: 24px;
  }

  .el-dialog__headerbtn {
    right: 34px;
  }

  .el-tree-node__content:hover,
  .el-upload-list__item:hover {
    background: #e4e8f1;
  }

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: #409eff;
    border-radius: 4px;
    color: #fff;
  }

  .td-content {
    &.active {
      &::before {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: "";
        background: #68c23a;
        z-index: 1;
      }

      span {
        position: relative;
        z-index: 9;
        color: #fff;
      }
    }
  }
}

.common-box {
  width: 100%;
  height: 100%;
  padding: 8px;
  font-size: 14px;
  position: relative;

  .model-box {
    position: fixed;
    inset: 40px 40px 40px 240px;
    z-index: 999;

    .mask {
      position: fixed;
      inset: 0;
      background: rgba($color: #000000, $alpha: 0.6);
      z-index: 10;
    }
  }

  .common-tree-box {
    width: 200px;
    padding: 20px 10px;
    margin-right: 8px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eeeeee;
  }

  .common-content-box {
    width: 1px;
    height: 100%;

    .search-box {
      padding: 20px 20px 0;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #eeeeee;
    }

    .table-box {
      width: 100%;
      height: 1px;
      margin-top: 8px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      border: 1px solid #eeeeee;
      padding: 24px 24px 0;
    }
  }
}

.sub-title {
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #eeeeee;
  color: #606266;
  font-size: 16px;
  margin-bottom: 20px;
}

.sub-table-title {
  width: 100%;
  padding: 16px 0;
  color: #606266;
  font-size: 16px;
  font-weight: 700;
  // margin-bottom: 20px;
}

.sub-btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.tips {
  color: #f56c6c;
  margin-left: -43px;
  margin-bottom: 20px;
  margin-top: -10px;
  font-size: 20px;
  scale: 0.5;
}

.tabs_full{
  width: 100%;
  border-bottom: 1px solid #E5E7ED;
  margin-bottom: 24px;
}