|  | @@ -1,133 +1,142 @@
 | 
	
		
			
				|  |  |  .videoWrap {
 | 
	
		
			
				|  |  | -    position: relative;
 | 
	
		
			
				|  |  | -    width: 100%;
 | 
	
		
			
				|  |  | -    height: 100%;
 | 
	
		
			
				|  |  | +  position: relative;
 | 
	
		
			
				|  |  | +  width: 100%;
 | 
	
		
			
				|  |  | +  height: 100%;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | -.content{
 | 
	
		
			
				|  |  | -    height: 100%;
 | 
	
		
			
				|  |  | -    padding: 8% 20px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.content {
 | 
	
		
			
				|  |  | +  height: 100%;
 | 
	
		
			
				|  |  | +  padding: 8% 20px;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | -.contentWrap{
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.contentWrap {
 | 
	
		
			
				|  |  | +  height: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  canvas {
 | 
	
		
			
				|  |  | +    width: 100%;
 | 
	
		
			
				|  |  |      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);
 | 
	
		
			
				|  |  | +  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;
 | 
	
		
			
				|  |  | -    flex-direction: column;
 | 
	
		
			
				|  |  |      justify-content: space-between;
 | 
	
		
			
				|  |  | -    transition: all 0.5s;
 | 
	
		
			
				|  |  | +    width: 100%;
 | 
	
		
			
				|  |  | +    color: #fff;
 | 
	
		
			
				|  |  | +    font-size: 10px;
 | 
	
		
			
				|  |  | +    padding: 4px 20px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    &.hide{
 | 
	
		
			
				|  |  | -        transform: translateY(100%);
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | +  .slider {
 | 
	
		
			
				|  |  | +    width: 100%;
 | 
	
		
			
				|  |  | +    padding: 0 20px;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .time {
 | 
	
		
			
				|  |  | -        display: flex;
 | 
	
		
			
				|  |  | -        justify-content: space-between;
 | 
	
		
			
				|  |  | +    :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%;
 | 
	
		
			
				|  |  | -        color: #fff;
 | 
	
		
			
				|  |  | -        font-size: 10px;
 | 
	
		
			
				|  |  | -        padding: 4px 20px;
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .slider {
 | 
	
		
			
				|  |  | -        width: 100%;
 | 
	
		
			
				|  |  | -        padding: 0 20px;
 | 
	
		
			
				|  |  | -        :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%;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .actions {
 | 
	
		
			
				|  |  | -        display: flex;
 | 
	
		
			
				|  |  | +    :global {
 | 
	
		
			
				|  |  | +      .van-loading__circular {
 | 
	
		
			
				|  |  |          width: 100%;
 | 
	
		
			
				|  |  | -        color: #fff;
 | 
	
		
			
				|  |  | -        font-size: 12px;
 | 
	
		
			
				|  |  | -        padding: 0 20px;
 | 
	
		
			
				|  |  | -        align-items: center;
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .actionWrap {
 | 
	
		
			
				|  |  | -            display: flex;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +    .playIcon {
 | 
	
		
			
				|  |  | +      display: none;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .actionBtn {
 | 
	
		
			
				|  |  | -            display: flex;
 | 
	
		
			
				|  |  | -            width: 38px;
 | 
	
		
			
				|  |  | -            height: 38px;
 | 
	
		
			
				|  |  | -            padding: 4px 0;
 | 
	
		
			
				|  |  | -            background: transparent;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +    .btnPlay img:nth-child(2) {
 | 
	
		
			
				|  |  | +      display: block;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .actionBtn>img {
 | 
	
		
			
				|  |  | -            width: 100%;
 | 
	
		
			
				|  |  | -            height: 100%;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +    .btnPause img:nth-child(3) {
 | 
	
		
			
				|  |  | +      display: block;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        :global {
 | 
	
		
			
				|  |  | -            .van-loading__circular {
 | 
	
		
			
				|  |  | -                width: 100%;
 | 
	
		
			
				|  |  | -                height: 100%;
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | +    .btnPlay,
 | 
	
		
			
				|  |  | +    .btnPause {
 | 
	
		
			
				|  |  | +      :global {
 | 
	
		
			
				|  |  | +        .van-loading {
 | 
	
		
			
				|  |  | +          display: none;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .playIcon {
 | 
	
		
			
				|  |  | -            display: none;
 | 
	
		
			
				|  |  | +    .loopBtn {
 | 
	
		
			
				|  |  | +      :global {
 | 
	
		
			
				|  |  | +        .loop {
 | 
	
		
			
				|  |  | +          display: block;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .btnPlay img:nth-child(2) {
 | 
	
		
			
				|  |  | -            display: block;
 | 
	
		
			
				|  |  | +        .loopActive {
 | 
	
		
			
				|  |  | +          display: none;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .btnPause img:nth-child(3) {
 | 
	
		
			
				|  |  | -            display: block;
 | 
	
		
			
				|  |  | +    .loopBtn.active {
 | 
	
		
			
				|  |  | +      :global {
 | 
	
		
			
				|  |  | +        .loop {
 | 
	
		
			
				|  |  | +          display: none;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .btnPlay,
 | 
	
		
			
				|  |  | -        .btnPause {
 | 
	
		
			
				|  |  | -            :global {
 | 
	
		
			
				|  |  | -                .van-loading {
 | 
	
		
			
				|  |  | -                    display: none;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        .loopBtn{
 | 
	
		
			
				|  |  | -            :global{
 | 
	
		
			
				|  |  | -                .loop{
 | 
	
		
			
				|  |  | -                    display: block;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                .loopActive{
 | 
	
		
			
				|  |  | -                    display: none;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -        .loopBtn.active{
 | 
	
		
			
				|  |  | -            :global{
 | 
	
		
			
				|  |  | -                .loop{
 | 
	
		
			
				|  |  | -                    display: none;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -                .loopActive{
 | 
	
		
			
				|  |  | -                    display: block;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | +        .loopActive {
 | 
	
		
			
				|  |  | +          display: block;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  }
 |