cyber-narrator-cn-ui/src/assets/css/common/table-common.scss

/*列表table通用样式*/
.list-page {
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-page);
  $border-color: var(--el-color-info-light-7);
  $border-radius: 2px;
  $color-white: var(--el-color-white);

  .main-list {
    background-color: var(--el-fill-color-blank);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    z-index: 0;
  }

  .main-container {
    padding: 0;
    height: 100%;

    & > div {
      background-color: var(--el-fill-color-blank);
    }
  }

  .main-list.main-list-with-sub {
    height: 50%;
  }

  .main-modal {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 100;
  }

  .top-tools {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding: 12px 20px;

    &.top-tools--sub {
      align-items: center;
      padding: 0 70px 0 15px;
      height: 44px;
      background-color: var(--el-fill-color-blank);
      border: 1px solid var(--el-border-color-light);
    }

    .top-tool-search {
      .top-tool-search__display {
        display: flex;
      }

      .top-tool-btn--search {
        width: 28px !important;
        height: 28px !important;
        padding: unset !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
        border-left: none;

        i {
          font-size: 14px;
          margin-right: unset !important;
        }
      }

      .el-input__wrapper, .el-input__inner {
        border-radius: var(--el-border-radius-small) 0 0 var(--el-border-radius-small) !important;
      }

      .el-input {
        width: 214px !important;
      }
    }

    .top-tool-right {
      display: flex;
    }

    .top-tool-left {
      display: flex;
      min-width: 300px;
    }

    .top-tool-btn-group {
      display: flex;

      .top-tool-btn:not(:last-of-type):not(:first-of-type) {
        border-left: none;
        border-radius: 0;
      }

      .top-tool-btn:first-of-type:not(:last-of-type) {
        border-radius: $border-radius 0 0 $border-radius;
      }

      .top-tool-btn:last-of-type:not(:first-of-type) {
        border-radius: 0 $border-radius $border-radius 0;
        border-left: none;
      }
    }

    .business-button {
      height: 28px;
      width: 72px;
      font-size: 12px;

      i {
        font-size: 14px;
        margin-right: 4px;
      }
    }

    .btn-customize {
      color: var(--el-color-primary);
      font-size: 12px;
      padding: 2px 11px;

      .icon-gear {
        color: var(--el-color-primary);
        width: 12px;
        height: 12px;
        margin-right: 2px;
        font-size: 12px;
      }
    }

    .btn-customize:hover {
      cursor: pointer;
      background: var(--el-color-primary-light-9);
      border-radius: 2px;
    }

    .top-tool-btn--dropdown {
      position: relative;
      width: auto;
      min-width: 36px;
    }
  }

  .cn-table {
    padding: 0 20px;
    height: calc(100% - 48px);

    .el-table:not(.chart-table) {
      height: calc(100% - 58px);
      width: calc(100% - 2px); // 防止出现横向滚动条
      border: 1px solid var(--el-table-border-color);
      border-bottom: none;

      thead {
        color: var(--el-text-color-primary);
      }

      .el-switch {
        height: auto;
      }
    }
  }

  /* end--覆盖el-table边框、gutter等样式 */
  .cn-pagination {
    position: absolute;
    bottom: 8px;
    height: 48px;
    width: calc(100% - 20px);
  }
}

.el-table {
  // 令no data垂直居中
  .el-scrollbar__view {
    height: 100%;
  }

  // 令no data出现时table底部不出现滚动条
  .el-table__empty-block {
    width: calc(100% - 8px) !important;
  }
}

.col-resize-area {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
}

.margin-r-10 {
  margin-right: 10px;
}

.margin-r-20 {
  margin-right: 20px;
}

.margin-l-10 {
  margin-left: 10px;
}

.margin-t-20 {
  margin-top: 20px;
}

.margin-r-3 {
  margin-right: 3px;
}

.margin-r-30 {
  margin-right: 30px;
}

.margin-l-6 {
  margin-left: 6px;
}

.margin-b-10 {
  margin-bottom: 10px;
}

.padding-r-20 {
  padding-right: 20px;
}

.tooltip-column-name {
  color: var(--el-color-info-light-3);
  height: 40px;
}