| 
					
				 | 
			
			
				@@ -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; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 |