@cmstops/pro-compo/es/selectResourceModal/style/listCardWrapper.less

[物料平台文档中心](https://arco.design/docs/material/guide)

.card-wrapper-image {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;

  .card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    // 宽高：43
    aspect-ratio: 4 / 3;

    &.disable:not(.active) {
      // disabled 下禁用
      .thumb-image {
        cursor: not-allowed;
        opacity: 0.4;
      }

      .thumb-upload-loading {
        cursor: not-allowed;
      }
    }

    .mask {
      position: absolute;
      top: 0;
      z-index: 9;
      display: none;
      width: 100%;
      height: 100%;
      font-size: 18px;
      background: rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }

    &.active .mask {
      display: block;
    }
  }

  .card-alias {
    width: 100%;
    margin-top: 6px;
    overflow: hidden;
    color: #3d3d3d;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-drag: none;
  }

  &:hover .check-box-wrapper .check-box,
  .check-box-wrapper .check-box.active {
    opacity: 1;
  }

  .check-box-wrapper {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    cursor: pointer;

    .check-box {
      box-sizing: border-box;
      width: 22px;
      height: 22px;
      font-size: 14px;
      line-height: 22px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.2);
      border: 1px solid white;
      border-radius: 50%;
      opacity: 0;
      transition: all 0.3s ease-in-out;

      &::selection {
        display: none;
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
      }

      &.active {
        color: white;
        background-color: #165dff;
        border-color: #165dff;
      }
    }
  }
}