FD_Pano/src/components/table/style.less

.table-layout {
  width: 100%;
  color: #777;
  font-size: 14px;

  .check-cls {
    max-width: 20px;
    text-align: left !important;
    margin-left: 20px;
  }

  .t-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 16px 15px 16px;
    background-color: #F5F7FA;
    color: #646566;
    line-height: 19px;
    position: relative; // 为了设置z-index
    z-index: 1; // 为了避免.t-con向下滚动后覆盖本元素。因为.t-con的margin-top是负值。
    li {
      text-align: left;
      padding-right: 20px;
      flex-grow: 1;
    }
  }

  // 表格内容
  .t-con {
    padding-top: 49px; // 为了能上下滚动，overflow的值不能是visible，导致此元素是个BFC，导致绝对定位的tip在第一行无法显示在此元素区域外，只好让此元素具有padding-top以供第一行的tip显示。
    margin-top: -49px;
    height: calc(100vh - 325px); // 必须指定高度，element-ui的无限滚动指令才能生效
    overflow: auto;
    .t-item {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px 16px 10px 16px;
      .showWhenHover {
        visibility: hidden;
      }
      &:hover {
        background: #F7F7F7;
        .showWhenHover {
          visibility: visible;
        }
        &[active-txt] {
          // 关键列，会加粗显示且有hover效果。
          >.themetxt {
            span {
              word-break: break-all;
              font-weight: bold;

              &:hover {
                color: #1FE4DC !important;
                cursor: pointer;
              }
            }
          }
        }
      }
      .multiLine {
        span {
          word-break: break-all;
          white-space: normal;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      li {
        text-align: left;
        display: inline-block;
        padding-right: 20px;
        flex-grow: 1;
        span {
          color: #323233;
          word-break: keep-all;
          // white-space: nowrap;
        }
      }
    }

    .bottom-line {
      min-height: 50px;
      border-bottom: 1px solid rgba(#202020, 0.1);
    }
  }
}