@cmstops/pro-compo/es/resourceModal/style/FileTypeThumb.less

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

.file-type-thumb {
  position: relative;
  width: 100%;

  &:hover .mask {
    display: flex;
  }

  .mask {
    position: absolute;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #eaeaea;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.3);

    i {
      display: inline-block;
      cursor: pointer;

      &:active {
        opacity: 0.4;
      }
    }

    .half {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48%;
      height: 100%;

      &:hover {
        cursor: pointer;
        opacity: 0.7;
      }
    }

    .el-divider {
      margin: 0;
      opacity: 0.4;
    }
  }

  .transparent {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

    &:hover {
      cursor: pointer;
    }
  }

  .tag {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    color: white;
    font-size: 12px;
    background-color: rgba(#000, #000, #000, 0.4);
    border-radius: 12px;
  }

  .rate-info-tag {
    top: 8px;
    left: 5px;
  }

  .ai-tag {
    top: 8px;
    right: 5px;
  }

  .pic {
    width: 100%;
    padding-top: 56.25%;
    background-color: #fff;
    background-image: url('../assets/images/unknown.png');
    background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-position: top;
    background-size: cover;

    &:hover {
      transform: scale(1.02);
      transition: ease-out 0.4s;
    }
  }

  .audio {
    background-image: url('../assets/images/music.png') !important;

    &.doc {
      background-image: url('../assets/images/draf.png') !important;
    }
  }

  .project {
    background-image: url('../assets/images/project1.png') !important;
  }

  .doc {
    background-image: url('../assets/images/draf.png');
  }

  .link {
    background-image: url('../assets/images/link.png');
  }

  .sp_topic {
    background-image: url('../assets/images/link.png');
  }

  .live {
    background-image: url('../assets/images/live.png');
  }

  .pdf {
    background-image: url('../assets/images/pdf.png') !important;
  }

  .officeexcel {
    background-image: url('../assets/images/excel.png') !important;
  }

  .officeppt {
    background-image: url('../assets/images/ppt.png') !important;
  }

  .zip {
    background-image: url('../assets/images/zip.png') !important;
  }

  .rar {
    background-image: url('../assets/images/rar.png') !important;
  }

  .txt {
    background-image: url('../assets/images/txt.png') !important;
  }

  .exe {
    background-image: url('../assets/images/exe.png') !important;
  }

  .html {
    background-image: url('../assets/images/html.png') !important;
  }

  .officedoc {
    background-image: url('../assets/images/word.png') !important;
  }

  .wechat {
    background-image: url('../assets/images/wechat.png') !important;
  }

  .h5 {
    background-image: url('../assets/images/h5.png') !important;
  }

  .ad {
    background-image: url('../assets/images/ad.png') !important;
  }

  .booklink {
    background-image: url('../assets/images/booklink.png') !important;
  }

  .activity {
    background-image: url('../assets/images/activity.png') !important;
  }

  .svideo {
    background-image: url('../assets/images/svideo.png') !important;
  }

  .cloud_lottery {
    background-image: url('../assets/images/cloud_lottery.png') !important;
  }

  .cloud_form {
    background-image: url('../assets/images/cloud_form.png') !important;
  }

  .illegal-media-warning {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    background-image: url('../assets/images/unknown.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
  }
}