loading

src/views/exercise-after-class/index.module.less

@@ -59,6 +59,17 @@
     }
   }
 }
+.loadWrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, #21232a, #111218);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .itemDiv {
   position: relative;
   width: 100%;

src/views/exercise-after-class/index.tsx

@@ -24,6 +24,8 @@ import iconpause from '../coursewarePlay/image/icon-pause.svg'
 import iconVideobg from '../coursewarePlay/image/icon-videobg.png'
 import { browser, getSecondRPM } from '@/helpers/utils'
 import qs from 'query-string'
+import { Vue3Lottie } from 'vue3-lottie'
+import playLoadData from '../coursewarePlay/datas/data.json'
 
 const materialType = {
   视频: 'VIDEO',
@@ -409,6 +411,11 @@ export default defineComponent({
                         </div>
                       )}
                     </Transition>
+                    {m.muted && (
+                      <div class={styles.loadWrap}>
+                        <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
+                      </div>
+                    )}
                   </>
                 </SwipeItem>
               )