添加拖动和3秒收起

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

@@ -48,10 +48,9 @@
   backdrop-filter: blur(26px);
   height: 80px;
   padding: 0 26px 0 26px !important;
-  transition: all 0.5s;
+  transition: all 0.3s;
   display: flex;
   align-items: center;
-  transition: all .5s;
 
   .time {
     display: flex;
@@ -150,8 +149,9 @@
 }
 
 .sectionAnimate {
-  opacity: 0;
+  // opacity: 0;
   pointer-events: none;
-  transform: translateY(100%);
-  transition: all .5s;
+  margin-bottom: -80px;
+  // transform: translateY(100%);
+  transition: all .3s;
 }

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

@@ -46,7 +46,8 @@ export default defineComponent({
       durationNum: 0,
       duration: '00:00',
       showBar: true,
-      afterMa3: true
+      afterMa3: true,
+      timer: null as any
     });
     const canvas: any = ref();
     const audio: any = ref();
@@ -59,8 +60,13 @@ export default defineComponent({
         onInit(audio.value, canvas.value);
         audio.value.play();
         audioForms.afterMa3 = false;
+
+        setModelOpen();
       } else {
         audio.value.pause();
+
+        clearTimeout(audioForms.timer);
+        audioForms.showBar = true;
       }
       audioForms.paused = audio.value.paused;
     };
@@ -177,8 +183,25 @@ export default defineComponent({
       }
     };
 
+    /** 延迟收起模态框 */
+    const setModelOpen2 = () => {
+      clearTimeout(audioForms.timer);
+      audioForms.showBar = !audioForms.showBar;
+      audioForms.timer = setTimeout(() => {
+        audioForms.showBar = false;
+      }, 3000);
+    };
+    /** 延迟收起模态框 */
+    const setModelOpen = () => {
+      clearTimeout(audioForms.timer);
+      audioForms.showBar = true;
+      audioForms.timer = setTimeout(() => {
+        audioForms.showBar = false;
+      }, 3000);
+    };
+
     return () => (
-      <div class={styles.audioWrap} id={videoId}>
+      <div class={styles.audioWrap} id={videoId} onClick={setModelOpen2}>
         <div class={styles.audioContainer}>
           <audio
             ref={audio}
@@ -187,6 +210,10 @@ export default defineComponent({
             onEnded={() => {
               audioForms.paused = true;
             }}
+            onPause={() => {
+              clearTimeout(audioForms.timer);
+              audioForms.showBar = true;
+            }}
             onTimeupdate={() => {
               audioForms.currentTime = timeFormat(
                 Math.floor(audio.value?.currentTime || 0)
@@ -217,6 +244,7 @@ export default defineComponent({
           ]}
           onClick={(e: MouseEvent) => {
             e.stopPropagation();
+            setModelOpen();
           }}>
           <div class={styles.actions}>
             <div class={styles.actionWrap}>

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

@@ -1,12 +1,12 @@
 /* 全屏模式下的样式 */
-:fullscreen .videoContent,
-:-webkit-full-screen .videoContent,
-:-moz-full-screen .videoContent,
-:-ms-fullscreen .videoContent {
-  width: 100% !important;
-  height: 100% !important;
+// :fullscreen .videoContent,
+// :-webkit-full-screen .videoContent,
+// :-moz-full-screen .videoContent,
+// :-ms-fullscreen .videoContent {
+//   width: 100% !important;
+//   height: 100% !important;
 
-}
+// }
 
 .videoWrap {
   width: 100%;
@@ -30,6 +30,12 @@
     //   width: 100% !important;
     //   height: 100% !important;
     // }
+
+    :global {
+      .video-js .vjs-tech {
+        object-fit: cover;
+      }
+    }
   }
 
 
@@ -44,10 +50,9 @@
     backdrop-filter: blur(26px);
     height: 80px;
     padding: 0 26px 0 26px !important;
-    transition: all 0.5s;
+    transition: all 0.3s;
     display: flex;
     align-items: center;
-    transition: all .5s;
 
     .time {
       display: flex;
@@ -161,10 +166,11 @@
   }
 
   .sectionAnimate {
-    opacity: 0;
+    // opacity: 0;
     pointer-events: none;
-    transform: translateY(100%);
-    transition: all .5s;
+    // transform: translateY(100%);
+    margin-bottom: -80px;
+    transition: all .3s;
   }
 
 }

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

@@ -58,6 +58,7 @@ export default defineComponent({
       durationNum: 0,
       duration: '00:00',
       showBar: true,
+      timer: null as any,
       speedControl: false,
       speedStyle: {
         left: '1px'
@@ -80,7 +81,7 @@ export default defineComponent({
     };
 
     //
-    const toggleHideControl = (isShow: false) => {
+    const toggleHideControl = (isShow = false) => {
       videoFroms.showBar = isShow;
       videoFroms.speedControl = false;
     };
@@ -123,6 +124,15 @@ export default defineComponent({
         });
     };
 
+    /** 延迟收起模态框 */
+    const setModelOpen = (status = true) => {
+      clearTimeout(videoFroms.timer);
+      toggleHideControl(status);
+      videoFroms.timer = setTimeout(() => {
+        toggleHideControl(false);
+      }, 3000);
+    };
+
     const __init = () => {
       if (videoItem.value) {
         videoItem.value.poster(poster.value); // 封面
@@ -154,6 +164,15 @@ export default defineComponent({
           videoFroms.paused = true;
           emit('ended');
         });
+
+        videoItem.value.on('play', () => {
+          setModelOpen();
+        });
+
+        videoItem.value.on('pause', () => {
+          clearTimeout(videoFroms.timer);
+          videoFroms.showBar = true;
+        });
       }
     };
 
@@ -199,7 +218,10 @@ export default defineComponent({
       toggleHideControl
     });
     return () => (
-      <div class={[styles.videoWrap]} id={videoId}>
+      <div
+        class={[styles.videoWrap]}
+        id={videoId}
+        onClick={() => setModelOpen(!videoFroms.showBar)}>
         <div class={[styles.videoContent]}>
           <video
             style={{ width: '100%', height: '100%' }}
@@ -219,6 +241,7 @@ export default defineComponent({
             onClick={(e: MouseEvent) => {
               e.stopPropagation();
               emit('reset');
+              setModelOpen();
             }}>
             <div class={styles.actions}>
               <div class={styles.actionWrap}>

src/views/prepare-lessons/components/directory-main/index.module.less

@@ -196,6 +196,7 @@
   cursor: pointer;
   border-radius: 10px;
   font-size: max(17px, 12Px);
+  font-weight: 600;
   margin-bottom: 8px;
 
   &.childItem:hover {

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -784,80 +784,85 @@ export default defineComponent({
                     </NTooltip>
                   </NSpace>
 
-                  {item.list.length > 0 && (
-                    <Draggable
-                      v-model:modelValue={item.list}
-                      itemKey="id"
-                      componentData={{
-                        itemKey: 'id',
-                        tag: 'div',
-                        animation: 200,
-                        group: 'description',
-                        disabled: false
-                      }}
-                      class={styles.list}>
-                      {{
-                        item: (element: any) => {
-                          const item = element.element;
-                          return (
-                            <div
-                              data-id={item.id}
-                              class={[
-                                styles.itemWrap,
-                                styles.itemBlock,
-                                'row-nav'
-                              ]}>
-                              <div class={styles.itemWrapBox}>
-                                <CardType
-                                  class={[styles.itemContent]}
-                                  isShowCollect={false}
-                                  offShelf={item.removeFlag ? true : false}
-                                  // onOffShelf={() => onRemove(item)}
-                                  item={item}
-                                  disabledMouseHover={false}
-                                  onClick={() => {
-                                    if (item.type === 'IMG') return;
-                                    forms.show = true;
-                                    forms.item = item;
+                  {/* {item.list.length > 0 && ( */}
+                  <Draggable
+                    v-model:modelValue={item.list}
+                    itemKey="id"
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    group="description"
+                    componentData={{
+                      itemKey: 'id',
+                      tag: 'div',
+                      animation: 200,
+                      pull: true,
+                      put: true,
+                      group: 'description'
+                      // disabled: false
+                    }}
+                    class={styles.list}>
+                    {{
+                      item: (element: any) => {
+                        const item = element.element;
+                        return (
+                          <div
+                            data-id={item.id}
+                            class={[
+                              styles.itemWrap,
+                              styles.itemBlock,
+                              'row-nav'
+                            ]}>
+                            <div class={styles.itemWrapBox}>
+                              <CardType
+                                class={[styles.itemContent]}
+                                isShowCollect={false}
+                                offShelf={item.removeFlag ? true : false}
+                                // onOffShelf={() => onRemove(item)}
+                                item={item}
+                                disabledMouseHover={false}
+                                onClick={() => {
+                                  if (item.type === 'IMG') return;
+                                  forms.show = true;
+                                  forms.item = item;
+                                }}
+                              />
+                              <div class={styles.itemOperation}>
+                                <img
+                                  src={iconDelete}
+                                  class={styles.iconDelete}
+                                  onClick={(e: MouseEvent) => {
+                                    e.stopPropagation();
+                                    onDelete(element.index, index);
                                   }}
                                 />
-                                <div class={styles.itemOperation}>
-                                  <img
-                                    src={iconDelete}
-                                    class={styles.iconDelete}
-                                    onClick={(e: MouseEvent) => {
-                                      e.stopPropagation();
-                                      onDelete(element.index, index);
-                                    }}
-                                  />
-                                </div>
                               </div>
                             </div>
-                          );
-                        },
-                        footer: () => (
-                          <div class={styles.itemWrap}>
-                            <div class={styles.itemWrapBox}>
-                              <div
-                                class={[
-                                  styles.itemContent,
-                                  styles.addMusicItem,
-                                  'handle'
-                                ]}
-                                onClick={() => {
-                                  forms.addOtherSource = true;
-                                  forms.addOtherIndex = index;
-                                }}>
-                                <img src={iconAddMusic} />
+                          </div>
+                        );
+                      },
+                      footer: () => (
+                        <div class={styles.itemWrap}>
+                          <div class={styles.itemWrapBox}>
+                            <div
+                              class={[
+                                styles.itemContent,
+                                styles.addMusicItem,
+                                'handle'
+                              ]}
+                              onClick={() => {
+                                forms.addOtherSource = true;
+                                forms.addOtherIndex = index;
+                              }}>
+                              <img src={iconAddMusic} />
 
-                                <p class={styles.addMusicName}>添加资源</p>
-                              </div>
+                              <p class={styles.addMusicName}>添加资源</p>
                             </div>
                           </div>
-                        )
-                      }}
-                    </Draggable>
-                  )}
+                        </div>
+                      )
+                    }}
+                  </Draggable>
+                  {/* )}
                   {item.list <= 0 && (
                     <div class={styles.list}>
                       <div class={styles.itemWrap}>
@@ -879,7 +884,7 @@ export default defineComponent({
                         </div>
                       </div>
                     </div>
-                  )}
+                  )} */}
                 </div>
               ))}