classroom-app/src/views/courseware-play/component/audio-item/index.module.less

.videoWrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  height: 100%;
  padding: 8% 20px;
}

.contentWrap {
  height: 100%;

  canvas {
    width: 100%;
    height: 100%;
  }
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.5s;

  &.hide {
    transform: translateY(100%);
  }

  .time {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #fff;
    font-size: 10px;
    padding: 4px 20px;
  }

  .slider {
    width: 100%;
    padding: 0 20px;
    --van-slider-button-width: 13px !important;
    --van-slider-button-height: 13px !important;

    :global {
      .n-slider {
        --n-handle-size: 13px !important;
        --n-fill-color: var(--van-primary-color) !important;
        --n-fill-color-hover: var(--van-primary-color) !important;
      }

      .van-loading {
        width: 100%;
        height: 100%;
      }
    }
  }

  .actions {
    display: flex;
    width: 100%;
    color: #fff;
    font-size: 12px;
    padding: 0 20px;
    align-items: center;

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 28px;
      height: 28px;
      padding: 4px 0;
      background: transparent;
    }

    .actionBtn>img {
      width: 100%;
      height: 100%;
    }

    :global {
      .van-loading__circular {
        width: 100%;
        height: 100%;
      }
    }

    .playIcon {
      display: none;
    }

    .btnPlay img:nth-child(2) {
      display: block;
    }

    .btnPause img:nth-child(3) {
      display: block;
    }

    .btnPlay,
    .btnPause {
      :global {
        .van-loading {
          display: none;
        }
      }
    }

    .loopBtn {
      :global {
        .loop {
          display: block;
        }

        .loopActive {
          display: none;
        }
      }
    }

    .loopBtn.active {
      :global {
        .loop {
          display: none;
        }

        .loopActive {
          display: block;
        }
      }
    }

  }
}