@cmstops/pro-compo/lib/videoThumb/style/index.less

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

.video-thumb {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;

  // 播放器
  .video-player-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    img {
      max-width: 800px;
      max-height: 100%;
    }
  }

  // 视频封面列表
  .video-thumb-list {
    position: relative;
    display: flex;
    height: 80px;
    padding: 10px 0;

    .video-thumb-list-item {
      flex: 1;
      cursor: pointer;
      user-select: none;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.1s ease-in-out;
        // 不允许拖动
        pointer-events: none;
      }

      &:hover:not(.active) {
        img {
          transform: scale(1.05);
        }
      }
    }

    .video-thumb-list-drager {
      position: absolute;
      top: 10px;
      left: 0;
      z-index: 100;
      width: 6px;
      height: calc(100% - 20px);
      background-color: rgb(var(--primary-5));
      cursor: pointer;
      transition: transform 0.3s ease-in-out;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  &-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}