
#addRelation {
  height: 100%;
  background-color: #fff;
  padding: 10px 20px 10px 10px;
  .text-right {
    text-align: right;
  }
  /deep/ .table-container {
    height: calc(100% - 160px);
    & > div {
      width: 49.5%;
      float: left;
    }
    .left-table,
    .right-table {
      height: 100%;
      h5 {
        line-height: 44px;
        padding-left: 5px;
        background-color: #e1e4e5;
        color: #2b2b2b
      }
      .query-box {
        margin-bottom: 20px;
        .query-item {
          float: left;
          width: 30%;
          margin: 5px;
          label {
            display: block;
            margin-bottom: 5px;
          }
          .el-select {
            width: 100%;
          }
        }
      }
      .table-box {
        height: calc(100% - 50px);
        position: relative;
        .AIRecom {
          position: absolute;
          width: 96%;
          height: 160px;
          bottom: 5px;
          left: 1%;
          background-color: rgba(255, 255, 255, 0.9);
          z-index: 3;
          font-size: 12px;
          .r-title {
            padding-left: 10px;
            i {
              float: right;
            }
          }
          .l-title {
            text-align: right;
            padding-right: 10px;
            i {
              float: left;
            }
          }
          .ai-recom-item {
            width: 30%;
            height: 126px;
            float: left;
            border: 1px solid #ebeef5;
            overflow: hidden;
            padding-top: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            p {
              position: relative;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              padding: 0 8px;
              z-index: -1;
              span {
                float: right;
              }
              .el-checkbox {
                margin-right: 0;
              }
            }
          }
          .ai-recom-item.r-ai-recom-item + .ai-recom-item {
            margin-left: 3%;
          }
          .l-ai-recom-item {
            float: right;
            p {
              text-align: right;
              padding-right: 10px;
              span {
                float: left;
              }
            }
          }
          .ai-recom-item.l-ai-recom-item + .ai-recom-item {
            margin-right: 3%;
          }
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
      //列表
      .custom-table {
        height: 100%;
        .bgf5 {
          background-color: #f5f7fa;
        }
        thead {
          color: #2b2b2b;
          tr th{
            border-top:1px solid #EBEEF5;
          }
        }
        thead label.el-checkbox {
          display: none;
        }
      }
      .l-custom-table {
        td {
          text-align: right;
        }
      }
      .tool-tip {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .fr {
    padding-top: 10px;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  .ani-his-plus {
    position: relative;
    .plusOne {
      position: absolute;
      color: red;
      left: 50%;
      bottom: 50%;
      font-size: 20px;
      font-weight: 800;
    }
    .startAni {
      animation: fadeToTop 1s;
    }
  }
  @keyframes fadeToTop {
    0% {
      left: 50%;
      bottom: 50%;
      opacity: 1;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
}