veterans_H5/h5_web/pages/publicCourse/videoDetails/videoDetails.scss

.container {
  &-video {
    width: 100%;
    height: 400rpx;
    position: relative;

    .video-control {
      background-color: rgba(0, 0, 0, 0.1);
      height: 90rpx;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 997;
    }

    .multi-list.full-screen.vertical {
      height: 100vh !important;
      padding: 8vh 0;
    }
    .multi-list.full-screen.horizontal {
      height: 100vw !important;
      padding: 8vw 0;
    }
    .multi {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      z-index: 998;
      width: 100rpx;
      color: #fff;
      padding: 10rpx 0;
      text-align: center;
      transition: color ease 0.3s;
    }
    .multi.rate {
      right: 30rpx;
    }
    .multi-list {
      position: absolute;
      height: 100%;
      width: 0;
      background-color: rgba(0, 0, 0, 0.65);
      top: 0;
      right: 0;
      transition: width 0.3s ease;
      z-index: 999;
      box-sizing: border-box;
      padding: 20rpx 0;
    }
    .multi-list.rate {
      padding: 25rpx 0;
    }
    .multi-list.active {
      width: 200rpx;
    }
    .multi-item {
      text-align: center;
      color: #fff;
      line-height: 80rpx;
      transition: color ease 0.3s;
    }
    .multi-item.rate {
      line-height: 70rpx;
    }
    .multi-item:hover,
    .multi:hover {
      color: #00d8ff;
    }
    .multi-item.active {
      color: #00d8ff;
    }
  }
}