@cmstops/pro-compo/es/thumbCard/style/index.less

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

@import './thumbUploading.less';

.thumb-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  // 高度宽度不在这里定义，根据具体的业务场景去处理，更灵活
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;

  // 样式
  .thumb-image {
    img {
      width: 100%;
      height: 100%;
      user-select: none;
      -webkit-user-drag: none;
    }
  }

  // 扩展按钮
  .thumb-handler-list {
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    opacity: 0;
    transition: all 0.3s ease-in-out;

    &.thumb-handler-always {
      opacity: 1 !important;
    }

    .handler-item {
      padding: 0 8px;
      color: #fff;
      font-size: 12px;
      line-height: 26px;
      // 50%透明度
      background-color: #000000b3;
      border-radius: 2px;
      cursor: pointer;

      &:hover {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }

  &:hover {
    .thumb-handler-list {
      opacity: 1;
    }

    .thumb-select-tag {
      opacity: 0;
    }
  }

  // 非马赛克模式
  &.thumb-no-mask {
    background-color: #f2f3f5;
    border: 1px dashed #e5e6eb !important;
  }

  .thumb-select-tag {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
  }
}