修改样式

src/components/card-preview/song-modal/index.module.less

@@ -47,7 +47,7 @@
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(26px);
   height: 80px;
-  padding: 0 40px 0 40px !important;
+  padding: 0 26px 0 26px !important;
   transition: all 0.5s;
   display: flex;
   align-items: center;

src/components/card-preview/song-modal/index.tsx

@@ -226,7 +226,7 @@ export default defineComponent({
                 <button
                   class={styles.iconReplay}
                   onClick={onDownload}
-                  style={{ marginLeft: '12px' }}>
+                  style={{ marginLeft: '15px' }}>
                   <img src={iconPreviewDownload} />
                 </button>
               )}

src/components/card-preview/video-modal/index.module.less

@@ -13,7 +13,7 @@
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(26px);
     height: 80px;
-    padding: 0 40px 0 40px !important;
+    padding: 0 26px 0 26px !important;
     transition: all 0.5s;
     display: flex;
     align-items: center;

src/components/card-preview/video-modal/index.tsx

@@ -214,7 +214,7 @@ export default defineComponent({
                 <button
                   class={styles.iconReplay}
                   onClick={onDownload}
-                  style={{ marginLeft: '12px' }}>
+                  style={{ marginLeft: '15px' }}>
                   <img src={iconPreviewDownload} />
                 </button>
               )}

src/views/attend-class/component/video-play.tsx

@@ -36,7 +36,16 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['canplay', 'pause', 'togglePlay', 'ended', 'reset', 'error', "close"],
+  emits: [
+    'canplay',
+    'pause',
+    'togglePlay',
+    'ended',
+    'reset',
+    'error',
+    'close',
+    'loadedmetadata'
+  ],
   setup(props, { emit, expose }) {
     const { item, isEmtry } = toRefs(props);
     const videoFroms = reactive({
@@ -113,13 +122,14 @@ export default defineComponent({
           );
           videoFroms.durationNum = videoItem.value.duration();
 
-          emit('canplay', videoItem.value);
+          emit('canplay');
+          emit('loadedmetadata', videoItem.value);
         });
 
         // 视频开始播放
         videoItem.value.on('play', () => {
-          emit('close')
-          emit('canplay')
+          emit('close');
+          emit('canplay');
         });
 
         // 视频播放时加载
@@ -139,7 +149,7 @@ export default defineComponent({
         //
         videoItem.value.on('pause', () => {
           videoFroms.paused = true;
-          emit('pause')
+          emit('pause');
         });
 
         videoItem.value.on('playing', () => {
@@ -147,13 +157,12 @@ export default defineComponent({
         });
 
         videoItem.value.on('canplay', (e: any) => {
-          console.log('canplay', );
           // 获取时长
           videoFroms.duration = timeFormat(
             Math.round(videoItem.value.duration())
           );
           videoFroms.durationNum = videoItem.value.duration();
-          emit('canplay')
+          emit('canplay');
         });
 
         // 视频播放异常
@@ -176,17 +185,23 @@ export default defineComponent({
       }
     });
 
-    watch(() => props.item, (val, oldVal) => {
-      videoItem.value.pause();
-      videoItem.value.currentTime(0)
-      videoItem.value.poster(props.item.coverImg); // 封面
-      videoItem.value.src(item.value.content); // url 播放地址
-      videoFroms.paused = true;
-    })
-    watch(() => props.showModel, () => {
-      // console.log(props.showModel, 'props.showModel')
-      videoFroms.showAction = props.showModel;
-    })
+    watch(
+      () => props.item,
+      (val, oldVal) => {
+        videoItem.value.pause();
+        videoItem.value.currentTime(0);
+        videoItem.value.poster(props.item.coverImg); // 封面
+        videoItem.value.src(item.value.content); // url 播放地址
+        videoFroms.paused = true;
+      }
+    );
+    watch(
+      () => props.showModel,
+      () => {
+        // console.log(props.showModel, 'props.showModel')
+        videoFroms.showAction = props.showModel;
+      }
+    );
     expose({
       onPlay,
       stop,
@@ -201,7 +216,7 @@ export default defineComponent({
           id={videoID.value}
           preload="auto"
           playsinline
-          webkit-playsinline 
+          webkit-playsinline
           x5-video-player-type="h5"></video>
 
         <div

src/views/attend-class/index.tsx

@@ -412,8 +412,9 @@ export default defineComponent({
     const handleStop = () => {
       for (let i = 0; i < data.itemList.length; i++) {
         const activeItem = data.itemList[i];
+        console.log(activeItem.videoEle, ' activeItem.videoEle');
         if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-          // console.log(activeItem.videoEle, ' activeItem.videoEle');
+          console.log(activeItem.videoEle, ' activeItem.videoEle');
           try {
             activeItem.videoEle?.currentTime(0);
             activeItem.videoEle?.pause();
@@ -1356,8 +1357,15 @@ export default defineComponent({
                     item={activeVideoItem.value}
                     showModel={activeData.model}
                     onClose={setModelOpen}
+                    onLoadedmetadata={(videoItem: any) => {
+                      if (data.itemList[popupData.activeIndex]) {
+                        data.itemList[popupData.activeIndex].videoEle =
+                          videoItem;
+                      }
+                    }}
                     onCanplay={() => {
                       data.videoState = 'play';
+                      // activeVideoItem.value.videoEle = videoItem;
                     }}
                     onPause={() => {
                       clearTimeout(activeData.timer);

src/views/attend-class/model/train-type/index.tsx

@@ -294,7 +294,7 @@ export default defineComponent({
             ))}
           </NSpace>
           {props.isDisabled ? null : (
-            <NSpace size={6}>
+            <NSpace size={12}>
               <n-button
                 quaternary
                 disabled={props.isDelete}
@@ -353,7 +353,7 @@ export default defineComponent({
           props.item.trainingType === 'EVALUATION' &&
           props.item?.recordId ? (
             <>
-              <NSpace size={6}>
+              <NSpace size={12}>
                 <n-button
                   quaternary
                   disabled={props.isDelete}