更新

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

@@ -41,4 +41,14 @@
   .instrumentGroup {
     height: 82vh;
   }
-}
+}
+.classCard{
+  width: 1200px;
+  .musicPreview {
+    height: 70vh;
+
+  }
+  .instrumentGroup {
+    height: 70vh;
+  }
+}

src/components/card-preview/index.tsx

@@ -10,6 +10,9 @@ import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument
 import TheoryDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';
 import MusicDetail from '/src/views/prepare-lessons/model/source-music/detail';
 import ListenModal from './listen-modal';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 
 export default defineComponent({
   name: 'card-preview',
@@ -30,6 +33,11 @@ export default defineComponent({
     isDownload: {
       type: Boolean,
       default: false
+    },
+    /** 从哪里使用 */
+    from: {
+      type: String,
+      default: ''
     }
   },
   emit: ['update:show'],
@@ -51,9 +59,28 @@ export default defineComponent({
         item.value = props.item;
       }
     );
+    // 拖动
+    let cardPreviewBoxDragData: any;
+    let cardPreviewBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      cardPreviewBoxClass = 'cardPreviewBoxClass_drag';
+      cardPreviewBoxDragData = useDrag(
+        [
+          `${cardPreviewBoxClass}>.n-card-header`,
+          `${cardPreviewBoxClass} .bom_drag`
+        ],
+        cardPreviewBoxClass,
+        show,
+        users.info.id
+      );
+    }
     return () => (
       <>
         <NModal
+          style={
+            props.from === 'class' ? cardPreviewBoxDragData.styleDrag.value : {}
+          }
           v-model:show={show.value}
           onUpdate:show={() => {
             emit('update:show', show.value);
@@ -65,6 +92,8 @@ export default defineComponent({
           showIcon={false}
           class={[
             'modalTitle background',
+            cardPreviewBoxClass,
+            props.from === 'class' && styles.classCard,
             styles.cardPreview,
             item.value.type === 'PPT' && styles.maxCard,
             props.size === 'large' && styles.cardLarge
@@ -159,6 +188,7 @@ export default defineComponent({
             'MUSIC_WIKI',
             'LISTEN'
           ].includes(item.value.type) && <TheEmpty />}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
       </>
     );

src/views/attend-class/component/tools/pen.tsx

@@ -59,9 +59,10 @@ export default defineComponent({
     }
     // 拖动
     let penBoxDragData: any;
-    const penBoxClass = 'penBoxClass_drag';
+    let penBoxClass: string;
     if (props.isDrag) {
       const users = useUserStore();
+      penBoxClass = 'penBoxClass_drag';
       penBoxDragData = useDrag(
         [`${penBoxClass}>.n-card-header`, `${penBoxClass} .bom_drag`],
         penBoxClass,
@@ -131,81 +132,43 @@ export default defineComponent({
         )}
 
         {/* 布置作业 */}
-        {props.isDrag ? (
-          <NModal
-            style={penBoxDragData.styleDrag.value}
-            z-index={3000}
-            transformOrigin="center"
-            v-model:show={modal.status}
-            preset="card"
-            // class={styles.attendClassModal}
-            title={modal.title}
-            class={['modalTitle', styles.removeVisiable, penBoxClass]}>
-            <div class={styles.studentRemove}>
-              <p>{modal.content}</p>
-              {/* <div class={styles.modelAttendContent}>
+        <NModal
+          style={props.isDrag ? penBoxDragData.styleDrag.value : {}}
+          z-index={3000}
+          transformOrigin="center"
+          v-model:show={modal.status}
+          preset="card"
+          // class={styles.attendClassModal}
+          title={modal.title}
+          class={['modalTitle', styles.removeVisiable, penBoxClass]}>
+          <div class={styles.studentRemove}>
+            <p>{modal.content}</p>
+            {/* <div class={styles.modelAttendContent}>
               {data.modalAttendMessage}
             </div> */}
-              <NSpace class={styles.btnGroupModal} justify="center">
-                <NButton
-                  type="default"
-                  round
-                  onClick={() => {
-                    modal.status = false;
-                  }}>
-                  取消
-                </NButton>
-                <NButton
-                  type="primary"
-                  round
-                  onClick={() => {
-                    // data.modelTrainStatus = true;
-                    modal.status = false;
-                    props.close();
-                  }}>
-                  确认
-                </NButton>
-              </NSpace>
-              <Dragbom></Dragbom>
-            </div>
-          </NModal>
-        ) : (
-          <NModal
-            z-index={3000}
-            transformOrigin="center"
-            v-model:show={modal.status}
-            preset="card"
-            // class={styles.attendClassModal}
-            title={modal.title}
-            class={['modalTitle', styles.removeVisiable]}>
-            <div class={styles.studentRemove}>
-              <p>{modal.content}</p>
-              {/* <div class={styles.modelAttendContent}>
-              {data.modalAttendMessage}
-            </div> */}
-              <NSpace class={styles.btnGroupModal} justify="center">
-                <NButton
-                  type="default"
-                  round
-                  onClick={() => {
-                    modal.status = false;
-                  }}>
-                  取消
-                </NButton>
-                <NButton
-                  type="primary"
-                  round
-                  onClick={() => {
-                    // data.modelTrainStatus = true;
-                    modal.status = false;
-                    props.close();
-                  }}>
-                  确认
-                </NButton>
-              </NSpace>
-            </div>
-          </NModal>
-        )}
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                type="default"
+                round
+                onClick={() => {
+                  modal.status = false;
+                }}>
+                取消
+              </NButton>
+              <NButton
+                type="primary"
+                round
+                onClick={() => {
+                  // data.modelTrainStatus = true;
+                  modal.status = false;
+                  props.close();
+                }}>
+                确认
+              </NButton>
+            </NSpace>
+            {props.isDrag && <Dragbom></Dragbom>}
+          </div>
+        </NModal>
       </div>
     );
   }

src/views/attend-class/index.module.less

@@ -526,7 +526,11 @@
     }
   }
 }
-
+.dragbom{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 .removeVisiable {
   width: 432px;
   position: relative;

src/views/attend-class/index.tsx

@@ -1509,6 +1509,28 @@ export default defineComponent({
       toRef(popupData, 'open'),
       users.info.id
     );
+    // 计时器
+    const timerMeterConBoxClass = 'timerMeterConBoxClass_drag';
+    const timerMeterConDragData = useDrag(
+      [
+        `${timerMeterConBoxClass}>.n-card-header`,
+        `${timerMeterConBoxClass} .bom_drag`
+      ],
+      timerMeterConBoxClass,
+      showModalTime,
+      users.info.id
+    );
+    // 节拍器
+    const metronomeConBoxClass = 'metronomeConBoxClass_drag';
+    const metronomeConBoxDragData = useDrag(
+      [
+        `${metronomeConBoxClass}>.n-card-header`,
+        `${metronomeConBoxClass} .bom_drag`
+      ],
+      metronomeConBoxClass,
+      showModalBeat,
+      users.info.id
+    );
     return () => (
       <div id="playContent" class={[styles.playContent, 'wrap']}>
         <div
@@ -2155,11 +2177,14 @@ export default defineComponent({
 
         <NModal
           transformOrigin="center"
-          class={['modalTitle background']}
+          class={['modalTitle background', metronomeConBoxClass]}
           title={'节拍器'}
           preset="card"
           v-model:show={showModalBeat.value}
-          style={{ width: '687px' }}>
+          style={{
+            width: '687px',
+            ...metronomeConBoxDragData.styleDrag.value
+          }}>
           <div class={styles.modeWrap}>
             <iframe
               src={`${vaildUrl()}/metronome/?id=${new Date().getTime()}`}
@@ -2170,6 +2195,7 @@ export default defineComponent({
                 iframeDislableKeyboard(val.target);
               }}
               height={'650px'}></iframe>
+            <Dragbom class={styles.dragbom}></Dragbom>
           </div>
         </NModal>
 
@@ -2187,12 +2213,16 @@ export default defineComponent({
         <NModal
           transformOrigin="center"
           v-model:show={showModalTime.value}
-          class={['modalTitle background']}
+          class={['modalTitle background', timerMeterConBoxClass]}
           title={'计时器'}
           preset="card"
-          style={{ width: px2vw(772) }}>
+          style={{
+            width: px2vw(772),
+            ...timerMeterConDragData.styleDrag.value
+          }}>
           <div>
             <TimerMeter></TimerMeter>
+            <Dragbom class={styles.dragbom}></Dragbom>
           </div>
         </NModal>
 

src/views/attend-class/model/source-list/index.module.less

@@ -4,13 +4,16 @@
 }
 .treeBox{
   width: 100%;
-  height: calc(100% - 42px);
+  height: 100%;
   display: flex;
   .listSectionLeft{
     width: 30%;
     border-right: 1px solid  #F0F0F0;
     .leftscrollBar{
       :global{
+        .n-scrollbar-container{
+          height: calc(100% - 42px);
+        }
         .n-scrollbar-content{
           padding: 6px 32px 0 18px;
         }

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -250,6 +250,7 @@ export default defineComponent({
         <CardPreview
           size={props.from === 'class' ? 'large' : 'default'}
           v-model:show={state.show}
+          from={props.from}
           item={state.item}
         />
       </div>