更新

src/App.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
 export default defineComponent({
   name: 'App',
   setup() {

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

@@ -81,7 +81,7 @@
     width: 100%;
     color: #fff;
     font-size: 12px;
-    padding: 0 20px 0 12px;
+    padding: 0 20px 5px 14px;
     align-items: center;
 
     .actionWrap {
@@ -90,10 +90,11 @@
 
     .actionBtn {
       display: flex;
-      width: 28px;
-      height: 28px;
-      padding: 4px 0;
+      width: 24px;
+      height: 24px;
+
       background: transparent;
+      margin: 4px 16px 4px 0;
     }
 
     .actionBtn>img {
@@ -154,4 +155,4 @@
     }
 
   }
-}
+}

src/views/courseware-play/component/video-item/index.module.less

@@ -74,7 +74,7 @@
     width: 100%;
     color: #fff;
     font-size: 12px;
-    padding: 0 20px 0 14px;
+    padding: 0 20px 5px 14px;
     align-items: center;
 
     .actionWrap {
@@ -83,10 +83,11 @@
 
     .actionBtn {
       display: flex;
-      width: 28px;
-      height: 28px;
-      padding: 4px 0;
+      width: 24px;
+      height: 24px;
+      // padding: 4px 0;
       background: transparent;
+      margin: 4px 16px 4px 0;
     }
 
     .actionBtn>img {
@@ -148,3 +149,61 @@
 
   }
 }
+
+
+.sliderPopup {
+  position: absolute;
+  z-index: 9999;
+  left: 82px;
+  bottom: 46px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  height: 165px;
+  width: 45px;
+  padding: 10px 0 15px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAGaCAMAAAC199R3AAAAY1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmaHTeAAAAIXRSTlOzABemsKsIoZB3G15aUBILlZqHgHs2MnRsZSwOVT9IJiO5jme8AAABrUlEQVR42u3VWXIaMRhF4Xtp9QhNgxnM4Gn/q0xsF+lgYqhg/W/nW8Ap1S2pJF+o5pM7zCtfOI8Pz7um1J3KZvc8fBt/bUv9UNm+/jPerZTFqruMPyVlkp6+xKuVMlpVf8ePjbJqjmO8apRZU/2Jr5Xd+hTvFaD/jE9KBSgnH/FWIdr3eJcUInWW9wqyt1woSGEdFOagmcLMtFaYtRYKs1ChMIWSwiQBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABESAqTVChMoUZhGrUK06pXmF5vCvMmLxVkaXmmIDPLx1IhyqNl7xVi7/f4UCtAPXzEvVGAjT/jniq7qU9xPyqzR49xP+Zvj3FP825yHve2Vib11l/jrqalMihnlcf4aOgX+qFFP3gkn+ledg/LujhJuiEVJ/XyYffS+Yx8zaG+cdCJr5Gvmj/oirbyPfHRLOkb6cm+N37rjhZb3xm/Pc2i8w/j3z/fdeVMcW+Liy/MeeKX05QbZ4pfTrPsnDnuTaFPq8HZ4563SVLR2wHx3/nN88H/QQ70CynDD0im9E3OAAAAAElFTkSuQmCC') no-repeat top center;
+  background-size: contain;
+
+  .iconAdd,
+  .iconCut {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABMlBMVEUAAAAkqP8ckv8zu/8op/81v/8ajv8elP82v/8rrv8elP4npv8yuf8elP8elf81v/8sr/8elf8vuv8dlv8srv8jn/8zu/8wtf82wP8oqP8npf8Zjf8mpP8Zjf8hmv8bj/40vP8wtP81wP8Zjf41vv8sr/8jnf8aj/0zuf8dlf81vv8rq/4kof4vsf8imP8aj/////8usv8qrP4jn/4inP4dlP4yuf8el/4srv8pqv4gmf4bkf40vf8ssP4wtP8lov4koP4xt/8npv4mpP4zu/8hmv4ajv4ckv4wtv4op/58x/5+y/6Cxv5/zf57xP6Dx/6BxP7u+P/t9/6a1f6Bz/56w/5iuP5zwP5Bpv4yoP6x3/6w3f6d2/6Wzv5tyf5pwv5nvv5svP5Rsv5Pr/5Mq/43p/49/opPAAAAMHRSTlMACoRW+Pf38dTUurGDWEhHR0cjI/b28fHr6+vr19fQ0Lq6sbGoqKiolZWGhoZSUlKk1yinAAAB+UlEQVQ4y43S6VbaQACG4S9E9h3c933fatISI4sWYxUjAVQQ99r2/m+hGQfGMJNEHw4M+XhPTn4AjpQNLM1MhUJTM0uBrAQ/qbXQmUNoLQUve3Nngrk9uMnHjlzF8hAkw0cewklwAr98BDBg47uvjYH72oNx1/WuHfdOFgqFu3qj8bfgiT13Pmy3DbNhtr3jcB5UTNe7DdM0f6s69dRqPemcGG13dV3t2G2737b3bW2+3gUxaxh/LHJfo+eWxLcGZxa2lKqqHcsyuyph2G8aq71rdpL/yar9tW5ZbypTJ3Fd5a0C0oiiKG9W51hhaKzwRiRkFeJfVRFiQRbbx4IaiWvivo14RUBjcY9julKlKtXXGvVA4ofexWuV/T6NyWrf9b6raxZMYuhnX8s9brFgyBE33eOmI5646PN6DBZMIHpIXJCPl0vqnjT3vYuXj9+jiB8KLkl8Je5xbB0Irt5jcd9C5utxBtKwph1oBDtprPH7sASsaFpJs5XYSeMSv68AyJR4NyS+EeYMbNFvHBrzaxTEDj8/k/iZX3fwboGby4/N5mOZGxdA5cbKnxrLoUcunxMn596nDCZx8okEHNZ/+FrHgIRfmwBHHj31MCpDkJsvntqvov0eOOdzcCNHioKIDC/p5aCzDC6n4UdKby5GxoPB8cjiZlrCoP+meld2tFTGwgAAAABJRU5ErkJggg==') no-repeat center;
+    background-size: contain;
+    flex-shrink: 0;
+
+    &.disabled {
+      opacity: 0.7;
+    }
+  }
+
+  .iconCut {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABGlBMVEUAAAAkqP8zu/8op/8ajv8aj/8yuP8elP4npv4dlP8elP8yuP8elP81v/8sr/8jnf8Zjf81v/81v/8jn/8zu/8wtf8gl/82wP8oqP8npf83wP8qqv8mpP8Zjf81vf8tsv8hmv8bj/41wP8qqv8lof8Zjf41vv8sr/8jnf8aj/0zuf8dlf8bjf00vP8xt/8zvf8stv8dmf8dkv8srv8trf8qq/7///8tsP4jn/4us/8srv8gmf4lov4yuf8dlf4wt/8inf4hm/4ck/4bkf4wtP8koP4mpf4fl/4op/40vP8ajv4pqf4zuv98x/5+y/6Bxf40vv80u/6Dx/6a1f5owP5PsP4/p/5zwP4oo/4yoP7u+P7u9/5svP5it/4TfkURAAAANXRSTlMACoT49+66uoaDWFJSR0dHR/j29vHx8evr69fX19fQ0NDQsbGxsaioqKiVlYZYWCMjIyP29l0yDtwAAAGnSURBVDjLjc6HVsIwGAXg27I37r33nkilWloXCGK17OH7v4YpSKSQtPnS5v7n5J6cYIyUPt1bC/j9gbW907QEN+kjf2mE/ygNnvhWacJWHCzXoWem0DUmRAPPHIEoxkSeXETgcPJEaGSx88Rxr6ZpaqOtcUVARTWt0DBNs06yoBGTSd99NV8gXeKnwDV/hYGQqrZNoqerfCH0xVXVaNr3GqqbOGybhlG3LKunG642QaQMXW9altkmaRhk42UKwKGu6xXLquteDgFpRlGUutV8VbzMSEj1h0ZL8ZZC+FVYGLsPwnaxSudWrcJQa9HCKpbehqp3TFVaWIKPzl12uUsLPviKQx12uUMLPiwWi+XBzHsGOR9YxEqZqn0y1MrUCnYy5Uyfd+4gnBEWRlK8nIR0kxN0KwEHuVzWnrNeeQAgmRWUBLEh1t2ALXYvJIa+oEg3iIHLuRdPc5f4c/6Sz+fd/3NQct6DjBHHj66O4SC7dWWMOZv94Jg9w4SL4Ps3WeRzZvACLLH1d8Iu/Od6DDyJ/emvEdP7CbiREvL28sLU1MLytpyQ4PQLtc9vYI2HRk0AAAAASUVORK5CYII=') no-repeat center;
+    background-size: contain;
+  }
+
+  .sliderPoint {
+    background: #FFFFFF;
+    box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
+    border-radius: 14px;
+    font-size: 14px;
+    font-weight: 500;
+    height: 20px;
+    color: #198CFE;
+    min-width: 35px;
+    text-align: center;
+    vertical-align: text-bottom;
+
+    span {
+      font-size: 11px;
+    }
+  }
+
+  :global {
+    .van-slider {
+      margin: 7px 0;
+    }
+  }
+}

src/views/courseware-play/component/video-item/index.tsx

@@ -15,8 +15,10 @@ import iconLoop from '../../image/icon-loop.svg';
 import iconLoopActive from '../../image/icon-loop-active.svg';
 import iconplay from '../../image/icon-play.svg';
 import iconpause from '../../image/icon-pause.svg';
+import iconSpeed from '../../image/icon-speed.png';
 import { NSlider } from 'naive-ui';
 import { getSecondRPM } from '@/helpers/utils';
+import { Slider } from 'vant';
 
 export default defineComponent({
   name: 'video-play',
@@ -47,6 +49,7 @@ export default defineComponent({
   emits: ['canplay', 'pause', 'togglePlay', 'ended', 'reset', 'close', 'error'],
   setup(props, { emit, expose }) {
     const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100);
+    const speedBtnId = 'speed' + Date.now() + Math.floor(Math.random() * 100);
     const videoItem = ref();
     const { item, isEmtry } = toRefs(props);
     const data = reactive({
@@ -56,7 +59,12 @@ export default defineComponent({
       loop: false,
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any,
-      reload: false
+      reload: false,
+      speedControl: false,
+      speedStyle: {
+        left: '1px'
+      },
+      defaultSpeed: 1 // 默认速度
     });
     const contetRef = ref();
 
@@ -78,6 +86,7 @@ export default defineComponent({
     let playTimer = null as any;
     // 切换音频播放
     const onToggleAudio = (state: 'play' | 'pause') => {
+      data.speedControl = false;
       clearTimeout(playTimer);
       if (state === 'play') {
         playTimer = setTimeout(() => {
@@ -93,6 +102,7 @@ export default defineComponent({
 
     // 如果视屏异常后，需要重新播放视屏
     const onPlay = () => {
+      data.speedControl = false;
       if (videoItem.value) {
         videoItem.value.src(item.value.content);
         emit('reset');
@@ -101,6 +111,7 @@ export default defineComponent({
 
     /** 改变播放时间 */
     const handleChangeTime = (val: number) => {
+      data.speedControl = false;
       data.currentTime = val;
       clearTimeout(data.timer);
       data.timer = setTimeout(() => {
@@ -112,18 +123,14 @@ export default defineComponent({
     };
 
     const __init = () => {
-      videoItem.value = TCPlayer(videoID, {
-        appID: '',
-        controls: false
-      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       if (videoItem.value) {
-        console.log(videoItem.value);
+        // console.log(videoItem.value);
         videoItem.value.poster(props.item.coverImg); // 封面
         videoItem.value.src(item.value.content); // url 播放地址
-
+        videoItem.value.playbackRate(data.defaultSpeed);
         // 初步加载时
         videoItem.value.one('loadedmetadata', (e: any) => {
-          console.log(' Loading metadata', e);
+          videoItem.value.playbackRate(data.defaultSpeed);
           data.reload = false;
           // 获取时长
           data.duration = videoItem.value.duration();
@@ -132,13 +139,13 @@ export default defineComponent({
         });
         // 视频开始播放
         videoItem.value.on('play', () => {
-          emit('close')
-          emit('canplay')
+          emit('close');
+          emit('canplay');
         });
         //
         videoItem.value.on('pause', () => {
           data.playState = 'pause';
-          emit('pause')
+          emit('pause');
         });
 
         // 视频播放时加载
@@ -150,16 +157,16 @@ export default defineComponent({
         videoItem.value.on('ended', () => {
           data.playState = 'pause';
           // emit('ended');
-        });     
+        });
 
         videoItem.value.on('playing', () => {
           data.playState = 'play';
         });
 
         videoItem.value.on('canplay', (e: any) => {
-          console.log('canplay', );
+          // console.log('canplay');
           data.duration = videoItem.value.duration();
-          emit('canplay')
+          emit('canplay');
         });
 
         // 视频播放异常
@@ -170,20 +177,38 @@ export default defineComponent({
       }
     };
 
-    watch(() => props.item, (val, oldVal) => {
-      videoItem.value.currentTime(0)
-      videoItem.value.poster(props.item.coverImg); // 封面
-      videoItem.value.src(item.value.content); // url 播放地址
-      data.playState = 'pause';
-    })
+    watch(
+      () => props.item,
+      () => {
+        videoItem.value.currentTime(0);
+        __init();
+        data.playState = 'pause';
+      }
+    );
+    watch(
+      () => props.showModel,
+      () => {
+        console.log(props.showModel, 'showModel');
+        data.speedControl = false;
+      }
+    );
 
     onMounted(() => {
+      videoItem.value = TCPlayer(videoID, {
+        appID: '',
+        controls: false
+      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       __init();
+
+      document.getElementById(speedBtnId)?.addEventListener('click', e => {
+        e.stopPropagation();
+        data.speedControl = !data.speedControl;
+      });
     });
 
     const pause = () => {
       videoItem.value.pause();
-    }
+    };
 
     expose({
       onPlay,
@@ -208,14 +233,13 @@ export default defineComponent({
           class={[styles.controls, props.showModel ? '' : styles.hide]}
           onClick={(e: Event) => {
             e.stopPropagation();
-            if(videoItem.value.paused()) return
-            emit('close')
-          }} 
-          onTouchmove={(e: Event) => {
-            if(videoItem.value.paused()) return
-            emit('close')
+            if (videoItem.value.paused()) return;
+            emit('close');
           }}
-          >
+          onTouchmove={(e: Event) => {
+            if (videoItem.value.paused()) return;
+            emit('close');
+          }}>
           <div class={styles.time}>
             <div>{getSecondRPM(data.currentTime)}</div>
             <div>{getSecondRPM(data.duration)}</div>
@@ -241,11 +265,73 @@ export default defineComponent({
             <div
               class={styles.actionBtn}
               onClick={() => {
-                data.loop = !data.loop
-                videoItem.value.loop(data.loop)
+                data.loop = !data.loop;
+                data.speedControl = false;
+                videoItem.value.loop(data.loop);
               }}>
               <img src={data.loop ? iconLoopActive : iconLoop} />
             </div>
+
+            <div class={styles.actionBtn} id={speedBtnId}>
+              <img src={iconSpeed} />
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: data.speedControl ? 'block' : 'none'
+          }}>
+          <div
+            class={styles.sliderPopup}
+            onClick={(e: Event) => {
+              e.stopPropagation();
+            }}>
+            <i
+              class={styles.iconAdd}
+              onClick={() => {
+                if (data.defaultSpeed >= 1.5) {
+                  return;
+                }
+
+                if (videoItem.value) {
+                  data.defaultSpeed = (data.defaultSpeed * 10 + 1) / 10;
+                  videoItem.value.playbackRate(data.defaultSpeed);
+                }
+              }}></i>
+            <Slider
+              min={0.6}
+              max={1.5}
+              step={0.1}
+              v-model={data.defaultSpeed}
+              vertical
+              barHeight={5}
+              reverse
+              onChange={() => {
+                if (videoItem.value) {
+                  videoItem.value.playbackRate(data.defaultSpeed);
+                }
+              }}>
+              {{
+                button: () => (
+                  <div class={styles.sliderPoint}>
+                    {data.defaultSpeed}
+                    <span>x</span>
+                  </div>
+                )
+              }}
+            </Slider>
+            <i
+              class={[styles.iconCut]}
+              onClick={() => {
+                if (data.defaultSpeed <= 0.6) {
+                  return;
+                }
+                if (videoItem.value) {
+                  data.defaultSpeed = (data.defaultSpeed * 10 - 1) / 10;
+                  videoItem.value.playbackRate(data.defaultSpeed);
+                }
+              }}></i>
           </div>
         </div>
       </div>

src/views/courseware-play/image/icon-loop-active.svg

@@ -1,22 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>切片</title>
     <defs>
-        <path d="M5.00480947,15.25 C6.49624217,17.8332372 9.29235844,19.1935866 12.0802733,18.9792617 C12.1933752,19.672858 12.4261755,20.3264161 12.7562805,20.918295 C9.05647623,21.4111568 5.25493468,19.6832296 3.27275866,16.25 C2.99661629,15.7717074 3.16049144,15.160117 3.63878407,14.8839746 C4.11707669,14.6078322 4.7286671,14.7717074 5.00480947,15.25 Z M10.4132849,7.08904722 L10.5144958,7.14250707 L15.5144958,10.1425071 C16.123756,10.5080632 16.1595948,11.3606179 15.6220123,11.7834679 L15.5144958,11.8574929 L10.5144958,14.8574929 C9.88129747,15.2374119 9.08434351,14.8231057 9.00623111,14.1142925 L9,14 L9,8 C9,7.26157025 9.76529405,6.79134664 10.4132849,7.08904722 Z M19.7272413,6.75 C20.8183076,8.63978222 21.1863003,10.7486105 20.9170607,12.7561204 C20.3245684,12.4254359 19.6711964,12.1929305 18.9778301,12.0792818 C19.0927198,10.6209049 18.7822682,9.11325853 17.9951905,7.75 C15.9241227,4.16280532 11.3371947,2.93374166 7.75,5.00480947 C6.85788041,5.51987496 6.09738693,6.19866524 5.49784407,6.99904787 L7,7 C7.51283584,7 7.93550716,7.38604019 7.99327227,7.88337887 L8,8 C8,8.51283584 7.61395981,8.93550716 7.11662113,8.99327227 L7,9 L3,9 C2.48716416,9 2.06449284,8.61395981 2.00672773,8.11662113 L2,8 L2,4 C2,3.44771525 2.44771525,3 3,3 C3.51283584,3 3.93550716,3.38604019 3.99327227,3.88337887 L4,4 L3.99919549,5.66623947 C4.74283972,4.70951337 5.67119653,3.89560614 6.75,3.27275866 C11.2937799,0.649406102 17.1038888,2.20622008 19.7272413,6.75 Z M11.001,9.766 L11.001,12.233 L13.057,11 L11.001,9.766 Z" id="path-1"></path>
-        <filter x="-31.6%" y="-31.6%" width="163.2%" height="163.1%" filterUnits="objectBoundingBox" id="filter-2">
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#36C0FF" offset="0%"></stop>
+            <stop stop-color="#198CFE" offset="100%"></stop>
+        </linearGradient>
     </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="课件播放（控件）" transform="translate(-42.000000, -289.000000)" fill-rule="nonzero">
-            <g id="循环备份" transform="translate(42.000000, 289.000000)">
-                <g id="形状结合">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+    <g id="（最新版）上课页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="上课页面-视频" transform="translate(-132.000000, -1006.000000)">
+            <g id="编组-4" transform="translate(132.000000, 1006.000000)">
+                <path d="M20.0364629,2.64780703 C23.5119013,2.64780703 26.6636469,3.60966843 29.4746633,5.51621514 L29.4746633,5.51621514 L27.2769596,8.05827742 C25.3859122,6.46090045 22.5408229,5.82538488 20.0194264,5.82538488 C12.4382004,5.82538488 6.13470916,12.1977167 6.13470916,19.8239035 C6.13470916,27.4672665 12.4552369,33.8224222 20.0194264,33.8224222 C21.2373516,33.8224222 22.4223003,33.657962 23.5534353,33.3502636 C24.0828084,34.3781373 24.7949378,35.2963492 25.6463878,36.0628017 C23.8930535,36.670292 22.0060049,37 20.0364629,37 C10.5641895,37 3,29.3738132 3,19.8239035 C3,10.2739939 10.5641895,2.64780703 20.0364629,2.64780703 Z M35.4885347,18.2265265 C36.4425766,18.2265265 37.0729257,18.8620421 37.0729257,19.8239035 C37.0729257,20.2009806 37.0611327,20.5750585 37.0378949,20.9457862 C36.0936072,20.3525212 35.0376237,19.9220828 33.9088104,19.6918272 C33.9633543,18.8044181 34.5787732,18.2265265 35.4885347,18.2265265 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.530184528" fill="#FFFFFF" fill-rule="nonzero"></path>
+                <g id="编组-8" transform="translate(3.000000, 1.000000)">
+                    <g id="编组" fill="#FFFFFF">
+                        <path d="M19.9945582,15.7497809 L23.6145156,21.7339958 C24.0691834,22.485615 23.8284567,23.4635038 23.0768375,23.9181715 C22.8285105,24.0683889 22.5438155,24.1477982 22.2535887,24.1477982 L15.0136738,24.1477982 C14.1352353,24.1477982 13.4231202,23.4356831 13.4231202,22.5572446 C13.4231202,22.2670178 13.5025294,21.9823228 13.6527468,21.7339958 L17.2727043,15.7497809 C17.7273721,14.9981617 18.7052608,14.757435 19.45688,15.2121028 C19.6769413,15.3452217 19.8614393,15.5297197 19.9945582,15.7497809 Z" id="三角形" transform="translate(18.633631, 18.823904) rotate(-270.000000) translate(-18.633631, -18.823904) "></path>
+                        <path d="M30.3312059,5.24809907 L33.9186551,11.2349874 C34.3701744,11.9885021 34.1253588,12.9653753 33.371844,13.4168946 C33.1266024,13.5638477 32.8462852,13.6419824 32.5603875,13.6430774 L25.3393967,13.6707329 C24.4609646,13.6740972 23.7461275,12.9647146 23.7427632,12.0862825 C23.7416449,11.7943024 23.8209199,11.5076482 23.971901,11.2577315 L27.6054427,5.24318768 C28.0596745,4.49130496 29.0374235,4.25001123 29.7893062,4.70424305 C30.0116384,4.83855966 30.1976914,5.02528433 30.3312059,5.24809907 Z" id="三角形备份" transform="translate(28.931402, 8.331027) rotate(125.000000) translate(-28.931402, -8.331027) "></path>
+                    </g>
+                    <path d="M29,36 C33.418278,36 37,32.418278 37,28 C37,23.581722 33.418278,20 29,20 C24.581722,20 21,23.581722 21,28 C21,32.418278 24.581722,36 29,36 Z" id="形状结合" fill="url(#linearGradient-1)"></path>
+                    <path d="M25.8351688,23.8111688 C26.278259,23.8111688 26.643447,24.1288248 26.6933561,24.5380634 L26.6991688,24.634026 L26.6983048,27.9252788 L32.7471688,27.9254545 C33.190259,27.9254545 33.555447,28.2431105 33.6053561,28.6523492 L33.6111688,28.7483117 C33.6111688,29.1703023 33.2776301,29.5181004 32.8479295,29.5656329 L32.7471688,29.5711688 L25.8351688,29.5711688 C25.3920787,29.5711688 25.0268906,29.2535129 24.9769816,28.8442742 L24.9711688,28.7483117 L24.9711688,24.634026 C24.9711688,24.1795745 25.3579948,23.8111688 25.8351688,23.8111688 Z" id="路径" fill="#FFFFFF" transform="translate(29.291169, 26.691169) rotate(-45.000000) translate(-29.291169, -26.691169) "></path>
                 </g>
-                <path d="M18,13 C20.7614237,13 23,15.2385763 23,18 C23,20.7614237 20.7614237,23 18,23 C15.2385763,23 13,20.7614237 13,18 C13,15.2385763 15.2385763,13 18,13 Z M20.9553274,16.1420886 C20.7524108,15.9832858 20.4506336,16.0042922 20.2548135,16.2001122 L20.2548135,16.2001122 L17.5814904,18.87328 L16.1273302,17.4183562 L16.0823515,17.3785153 C15.8794349,17.2197125 15.5776577,17.2407189 15.3818377,17.436539 C15.1709545,17.6474221 15.1628139,17.9811905 15.3636549,18.1820315 L15.3636549,18.1820315 L17.1819295,20.0003061 L17.2269082,20.0401471 C17.4298248,20.1989498 17.731602,20.1779434 17.9274221,19.9821234 L17.9274221,19.9821234 L20.9821234,16.9274221 L21.0242071,16.8804452 C21.1931032,16.669536 21.1868014,16.3684248 21.0003061,16.1819295 L21.0003061,16.1819295 Z" id="形状结合" fill="#FF8057"></path>
             </g>
         </g>
     </g>

src/views/courseware-play/image/icon-loop.svg

@@ -1,19 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>切片</title>
-    <defs>
-        <path d="M19.7272413,6.75 C22.3505939,11.2937799 20.7937799,17.1038888 16.25,19.7272413 C11.7062201,22.3505939 5.89611123,20.7937799 3.27275866,16.25 C2.99661629,15.7717074 3.16049144,15.160117 3.63878407,14.8839746 C4.11707669,14.6078322 4.7286671,14.7717074 5.00480947,15.25 C7.07587728,18.8371947 11.6628053,20.0662583 15.25,17.9951905 C18.8371947,15.9241227 20.0662583,11.3371947 17.9951905,7.75 C15.9241227,4.16280532 11.3371947,2.93374166 7.75,5.00480947 C6.85788041,5.51987496 6.09738693,6.19866524 5.49784407,6.99904787 L7,7 C7.51283584,7 7.93550716,7.38604019 7.99327227,7.88337887 L8,8 C8,8.51283584 7.61395981,8.93550716 7.11662113,8.99327227 L7,9 L3,9 C2.48716416,9 2.06449284,8.61395981 2.00672773,8.11662113 L2,8 L2,4 C2,3.44771525 2.44771525,3 3,3 C3.51283584,3 3.93550716,3.38604019 3.99327227,3.88337887 L4,4 L3.99919549,5.66623947 C4.74283972,4.70951337 5.67119653,3.89560614 6.75,3.27275866 C11.2937799,0.649406102 17.1038888,2.20622008 19.7272413,6.75 Z M9,8 C9,7.22270552 9.84797124,6.74259237 10.5144958,7.14250707 L10.5144958,7.14250707 L15.5144958,10.1425071 C16.1618347,10.5309105 16.1618347,11.4690895 15.5144958,11.8574929 L15.5144958,11.8574929 L10.5144958,14.8574929 C9.84797124,15.2574076 9,14.7772945 9,14 L9,14 Z M11.001,9.766 L11.001,12.233 L13.057,11 L11.001,9.766 Z" id="path-1"></path>
-        <filter x="-31.6%" y="-31.6%" width="163.2%" height="163.1%" filterUnits="objectBoundingBox" id="filter-2">
-            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="课件播放（控件）" transform="translate(-42.000000, -246.000000)" fill-rule="nonzero">
-            <g id="形状结合" transform="translate(42.000000, 246.000000)">
-                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                <use fill="#FFFFFF" xlink:href="#path-1"></use>
+    <g id="（最新版）上课页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="上课页面-视频" transform="translate(-132.000000, -932.000000)" fill="#FFFFFF">
+            <g id="编组-4备份" transform="translate(132.000000, 932.000000)">
+                <g id="编组" transform="translate(3.000000, 1.000000)">
+                    <path d="M17.0364629,1.64780703 C7.56418951,1.64780703 0,9.27399387 0,18.8239035 C0,28.3738132 7.56418951,36 17.0364629,36 C26.5087362,36 34.0729257,28.3738132 34.0729257,18.8239035 C34.0729257,17.8620421 33.4425766,17.2265265 32.4885347,17.2265265 C31.5344927,17.2265265 30.9041436,17.8620421 30.9041436,18.8239035 C30.9041436,26.4500904 24.6006524,32.8224222 17.0194264,32.8224222 C9.45523688,32.8224222 3.13470916,26.4672665 3.13470916,18.8239035 C3.13470916,11.1977167 9.43820042,4.82538488 17.0194264,4.82538488 C19.5408229,4.82538488 22.3859122,5.46090045 24.2769596,7.05827742 L26.4746633,4.51621514 C23.6636469,2.60966843 20.5119013,1.64780703 17.0364629,1.64780703 Z" id="路径" stroke="#FFFFFF" stroke-width="0.530184528" fill-rule="nonzero"></path>
+                    <path d="M19.9945582,15.7497809 L23.6145156,21.7339958 C24.0691834,22.485615 23.8284567,23.4635038 23.0768375,23.9181715 C22.8285105,24.0683889 22.5438155,24.1477982 22.2535887,24.1477982 L15.0136738,24.1477982 C14.1352353,24.1477982 13.4231202,23.4356831 13.4231202,22.5572446 C13.4231202,22.2670178 13.5025294,21.9823228 13.6527468,21.7339958 L17.2727043,15.7497809 C17.7273721,14.9981617 18.7052608,14.757435 19.45688,15.2121028 C19.6769413,15.3452217 19.8614393,15.5297197 19.9945582,15.7497809 Z" id="三角形" transform="translate(18.633631, 18.823904) rotate(-270.000000) translate(-18.633631, -18.823904) "></path>
+                    <path d="M30.3312059,5.24809907 L33.9186551,11.2349874 C34.3701744,11.9885021 34.1253588,12.9653753 33.371844,13.4168946 C33.1266024,13.5638477 32.8462852,13.6419824 32.5603875,13.6430774 L25.3393967,13.6707329 C24.4609646,13.6740972 23.7461275,12.9647146 23.7427632,12.0862825 C23.7416449,11.7943024 23.8209199,11.5076482 23.971901,11.2577315 L27.6054427,5.24318768 C28.0596745,4.49130496 29.0374235,4.25001123 29.7893062,4.70424305 C30.0116384,4.83855966 30.1976914,5.02528433 30.3312059,5.24809907 Z" id="三角形备份" transform="translate(28.931402, 8.331027) rotate(125.000000) translate(-28.931402, -8.331027) "></path>
+                </g>
             </g>
         </g>
     </g>

src/views/courseware-play/index.tsx

@@ -331,7 +331,6 @@ export default defineComponent({
         handleSwipeChange(resourceIndex);
       }, 0);
 
-      console.log('资源', data.itemList, resourceIndex);
       setTimeout(() => {
         data.animationState = 'end';
       }, 500);
@@ -848,7 +847,6 @@ export default defineComponent({
 
     // 是否允许下一页
     const isDownArrow = computed(() => {
-      console.log(22222222222);
       if (popupData.activeIndex < data.itemList.length - 1) {
         return true;
       }