linkmore-design/es/card-table/style/index-pure.less

🌈 🚀lm组件库。🚀

@import '../../style/themes/index.less';

.lm_card_table_wrapper {
  height: 100%;
  display: flex;
  flex-flow: column;

  .lm_card_table_container {
    flex: 1 1 0;
    // height: 100%;
    overflow: auto;

    .lm_card_table {

      .lm_card_table_body {

        .lm_card_table_body_row {
          display: grid;
          grid-gap: 16px;
          // grid-template-columns: repeat(5, 1fr);
          padding-bottom: 16px;

          &.last_row {
            padding-bottom: 0;
          }

          .lm_card_table_body_cell {
            position: relative;
            width: 100%;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            transition: .3s;

            &.cell_checked {
              border-color: @primary-color;
            }
          }
        }
      }
    }
  }

  .lm_card_table_pager {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .lm_card_table_pagination {
      display: flex;
      align-items: center;
      height: 48px;
    }
  }
}

// 通用样式
.lm_card_table_container {
  .lm_card_table_body_cell {

    .card_checkbox {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 1;
      opacity: 0;
      transition: .3s;

      .lm-checkbox {
        font-size: 0;
        border: 8px solid rgba(255, 255, 255, 0.625);
        border-radius: @border-radius-base;
        line-height: 1;
      }

      .ant-checkbox {
        margin: 0;
        top: 0;
      }
    }

    .card_extra {
      position: absolute;
      right: 8px;
      top: 8px;
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.625);
      border-radius: @border-radius-base;
      opacity: 0;
      transition: .3s;

      &>* {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
      }

      &:hover {
        color: @primary-color;
      }
    }

    .card_footer {
      position: relative;
      display: flex;
      align-items: center;
      background-color: @card-table-bg;

      &>* {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: initial;
        height: 40px;
        border: none;
        background-color: @card-table-bg;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          height: 18px;
          width: 1px;
          background-color: #d9d9d9;
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    &:hover {

      .card_checkbox,
      .card_extra {
        opacity: 1;
      }
    }
  }
}

// 上图下文 PTC
.card_PTC {
  height: 100%;

  .card_PTC_container {
    position: relative;
    display: flex;
    flex-flow: column;
    gap: 8px;
    height: 100%;
    background-color: #f5f5f5;
    padding: calc(@gap-base * 2);
    transition: .3s;

    .PTC_operate {
      position: absolute;
      right: 8px;
      top: 8px;
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.625);
      border-radius: @border-radius-base;
      opacity: 0;
      transition: .3s;

      &>* {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
      }

      &:hover {
        color: @primary-color;
      }
    }

    .card_PTC_top {
      position: relative;
      flex: 1;
      border-radius: @border-radius-base;
      background: #d9d9d9;
      overflow: hidden;

      .ant-image {
        width: 100%;
        height: 100%;

        .ant-image-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

    }

    .card_PTC_center {

      .card_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 8px;
      }

      .card_copy_text {
        font-size: 12px;
        color: @text-color-secondary;
        margin-top: 4px;

        .ant-typography {
          margin: 0;
          color: inherit;

          .ant-typography-copy {
            color: inherit;

            &.ant-typography-copy-success {
              color: @success-color;
            }
          }
        }
      }
    }

    .card_PTC_bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-height: 24px;
      overflow: hidden;

      button {
        border: none;
        background-color: @card-table-bg;
      }
    }

    &:hover {
      background-color: #f0f0f0;
      // background-color: @primary-1;
    }

    &.checked {

      .card_checkbox {
        opacity: 1;
      }
    }
  }
}

// 左图35 右文65 PTR
.card_PTR {
  height: 100%;

  .card_PTR_container {
    position: relative;
    height: 100%;
    display: flex;
    flex-flow: column;
    background-color: @card-table-bg;
    transition: .3s;

    .card_PTR_body {
      position: relative;
      display: flex;
      flex: 1;
      gap: @gap-base;
      padding: calc(@gap-base * 2);
      overflow: hidden;

      .card_PTR_left {
        flex: 0 0 auto;
        width: 35%;
        min-width: 126px;
        border-radius: @border-radius-base;
        background: #d9d9d9;
        overflow: hidden;

        .ant-image {
          width: 100%;
          height: 100%;

          .ant-image-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .card_PTR_right {
        flex: 1;
        display: flex;
        flex-flow: column;
        overflow: hidden;

        .card_title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .card_copy_text {
          font-size: 12px;
          color: @text-color-secondary;
          margin-top: 4px;
          padding-bottom: 6px;
          border-bottom: 1px solid @line-color;

          .ant-typography {
            margin: 0;
            color: inherit;

            .ant-typography-copy {
              color: inherit;

              &.ant-typography-copy-success {
                color: @success-color;
              }
            }
          }
        }

        .PTR_column {
          flex: 1 1 0;
          .PTR_column_box {
            font-size: 12px;
            display: flex;
            flex-flow: wrap;
            column-gap: 8px;
            color: @text-color-new;
            margin-top: 8px;

            &>div {
              display: inline-flex;
              align-items: center;
              min-height: 20px;
              width: calc(50% - 4px);
            }

            .ellipsis {
              flex: 1 1 0;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }

        .PTR_desc {
          font-size: 12px;
          color: @text-color-new;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }

    .card_PTR_footer {
      position: relative;
      display: flex;
      align-items: center;
      background-color: @card-table-bg;

      &>* {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: initial;
        height: 40px;
        border: none;
        background-color: @card-table-bg;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          height: 18px;
          width: 1px;
          background-color: #d9d9d9;
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    &:hover {
      background-color: @text-color-dark;
    }
  }
}

// 左图40 右文60 带操作 PTRO
.card_PTRO {
  height: 100%;

  .card_PTRO_container {
    position: relative;
    height: 100%;
    display: flex;
    flex-flow: column;
    background-color: @card-table-bg;
    transition: .3s;

    .card_PTRO_body {
      position: relative;
      display: flex;
      flex: 1;
      gap: @gap-base;
      padding: calc(@gap-base * 2);
      overflow: hidden;

      .card_PTRO_left {
        flex: 0 0 auto;
        width: 40%;
        min-width: 126px;
        border-radius: @border-radius-base;
        background: #d9d9d9;
        overflow: hidden;

        .ant-image {
          width: 100%;
          height: 100%;

          .ant-image-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .card_PTRO_right {
        flex: 1;
        display: flex;
        flex-flow: column;
        overflow: hidden;

        .card_title {
          flex: 0 0 auto;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .card_copy_text {
          font-size: 12px;
          color: @text-color-secondary;
          margin-top: 4px;

          .ant-typography {
            margin: 0;
            color: inherit;

            .ant-typography-copy {
              color: inherit;

              &.ant-typography-copy-success {
                color: @success-color;
              }
            }
          }
        }

        .PTRO_column {
          display: flex;
          flex-flow: wrap;
          column-gap: 8px;
          font-size: 12px;
          color: @text-color-new;
          margin-top: 8px;

          &>span {
            min-height: 20px;
            width: calc(50% - 4px);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }

        .PTRO_extend {
          font-size: 12px;
          flex: 1 1 0;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          row-gap: 126px; // 通过隔断的方式隐藏第二行
          margin-top: 8px;
          overflow: hidden;
          color: @text-color-new;

          button {
            border: none;
            background-color: @card-table-bg;
          }
        }

        .PTRO_desc {
          font-size: 12px;
          color: @text-color-new;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }

    .card_PTRO_footer {
      position: relative;
      display: flex;
      align-items: center;
      background-color: @card-table-bg;

      &>* {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: initial;
        height: 40px;
        border: none;
        // background-color: @text-color-dark;
        background-color: @card-table-bg;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          height: 18px;
          width: 1px;
          background-color: #d9d9d9;
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    &:hover {
      background-color: @text-color-dark;
    }
  }
}

// 存在选中时的样式
.hasChecked {

  .lm_card_table_body_cell .card_checkbox,
  .card_PTC .card_PTC_container .card_checkbox,
  .card_PTR .card_PTR_container .card_checkbox,
  .card_PTRO .card_PTRO_container .card_checkbox {
    opacity: 1;
  }
}