Merge branch 'temp-register' into jenkins

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

@@ -8,6 +8,28 @@
   }
 }
 
+.card-section-content {
+  border-radius: 14px;
+  background: linear-gradient(270deg, #DBF1FF 0%, #E7F9FF 100%) !important;
+
+  // 图片禁止拖动
+  img {
+    -moz-user-select: none;
+    /* 火狐浏览器 */
+    -webkit-user-drag: none;
+    /* 谷歌、Safari和Opera浏览器 */
+    -webkit-user-select: none;
+    /* 谷歌、Safari和Opera浏览器 */
+    -ms-user-select: none;
+    /* IE10+浏览器 */
+    user-select: none;
+    /* 通用 */
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+  }
+
+}
+
 .card-section {
   position: relative;
   box-sizing: border-box;
@@ -18,6 +40,16 @@
   display: inline-flex;
   transition: all .3s ease-in-out;
 
+  &.cardDrag {
+    cursor: move;
+
+    :global {
+      .n-image:not(.n-image--preview-disabled) {
+        cursor: move !important;
+      }
+    }
+  }
+
   &.course {
     cursor: pointer;
   }
@@ -45,7 +77,7 @@
   // 封面样式
   .cover {
     width: 100%;
-    height: 170px;
+    height: 100%;
     background-color: #fff;
     border-radius: 14px 14px 0 0;
     overflow: hidden;
@@ -63,7 +95,8 @@
     }
 
     .n-card-cover {
-      height: 170px;
+      // height: 170px;
+      flex: 1 auto;
     }
   }
 
@@ -156,6 +189,7 @@
       --n-border-pressed: 1px solid #fff !important;
       --n-border-focus: 1px solid #fff !important;
       --n-border-disabled: 1px solid #fff !important;
+      --n-opacity-disabled: 1 !important;
     }
   }
 
@@ -188,4 +222,4 @@
       min-width: 124px;
     }
   }
-}
+}

src/components/card-type/index.tsx

@@ -30,6 +30,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    /** 是否可以拖拽 */
+    draggable: {
+      type: Boolean,
+      default: false
+    },
     // 是否可以收藏
     isCollect: {
       type: Boolean,
@@ -101,12 +106,21 @@ export default defineComponent({
     return () => (
       <div
         onClick={() => emit('click', props.item)}
-        class={[styles['card-section']]}
+        draggable={!props.draggable ? false : props.item.exist ? false : true}
+        class={[
+          styles['card-section'],
+          'card-section-container',
+          !props.draggable ? '' : props.item.exist ? '' : styles.cardDrag
+        ]}
         onMouseenter={() => {
           isAnimation.value = true;
         }}
         onMouseleave={() => {
           isAnimation.value = false;
+        }}
+        onDragstart={(e: any) => {
+          console.log(e, 'dragstart');
+          e.dataTransfer.setData('text', JSON.stringify(props.item));
         }}>
         {/* 判断是否下架 */}
         {props.offShelf && (
@@ -125,7 +139,7 @@ export default defineComponent({
         )}
         <NCard
           class={[
-            styles['card-section'],
+            styles['card-section-content'],
             props.isShowAdd ? '' : styles.course,
             props.isActive ? styles.isActive : '',
             props.item.exist ? styles.showAddBtn : '' // 是否已添加

src/components/layout/index.module.less

@@ -225,6 +225,8 @@
       }
 
       .optons {
+        margin-top: 18px;
+        margin-bottom: 14px;
         width: 32px;
         height: 32px;
         margin-right: 24px;
@@ -501,4 +503,4 @@
     }
   }
 
-}
+}

src/components/layout/index.tsx

@@ -5,7 +5,8 @@ import {
   ref,
   reactive,
   onUnmounted,
-  watch
+  watch,
+  computed
 } from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
@@ -347,6 +348,27 @@ export default defineComponent({
         }
       }
     );
+
+    // 帮助指引状态
+    const helpNoteList = reactive({
+      baseListTab: ''
+    });
+    const helpNoteStatus = computed(() => {
+      const routePath = route.path;
+      const hidePath = [
+        '/classDetail',
+        '/classStudentDetail',
+        '/notation',
+        '/xiaoku-ai'
+      ];
+      // 单独判断个人信息页面[学校设置]有引导
+      if (route.path === '/setting') {
+        return helpNoteList.baseListTab === 'school' ? true : false;
+      } else {
+        return hidePath.includes(routePath) ? false : true;
+      }
+    });
+
     onMounted(() => {
       initMoveable();
       // // initMoveableClass();
@@ -360,6 +382,10 @@ export default defineComponent({
       initBoxRectInfo(subdEl, boxBoundaryInfo);
       // // initBoundaryWrap(classEl, classBoundaryInfo);
       window.addEventListener('resize', resetSize);
+
+      eventGlobal.on('base-setting-emit', (val: string) => {
+        helpNoteList.baseListTab = val;
+      });
     });
 
     const resetSize = () => {
@@ -674,12 +700,15 @@ export default defineComponent({
               </div>
             </div>
             <div>
-              <div
-                class={styles.booxToolItem}
-                onClick={() => startShowModal('iconNote')}>
-                <img src={iconNote} alt="" />
-                帮助指引
-              </div>
+              {helpNoteStatus.value && (
+                <div
+                  class={styles.booxToolItem}
+                  onClick={() => startShowModal('iconNote')}>
+                  <img src={iconNote} alt="" />
+                  帮助指引
+                </div>
+              )}
+
               <div
                 class={styles.booxToolItem}
                 onClick={() => startShowModal('iconPen')}>

src/components/layout/layoutTop.tsx

@@ -11,11 +11,11 @@ import personIcon from './images/personIcon.png';
 import { useUserStore } from '@/store/modules/users';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import opinionIcon from './images/opinionIcon.png'
+import opinionIcon from './images/opinionIcon.png';
 import 'animate.css';
 import ForgotPassword from '/src/views/setting/modal/forgotPassword';
 import ImGroup from './imGroup';
-import SuggestionOption from './modals/suggestion-option'
+import SuggestionOption from './modals/suggestion-option';
 export default defineComponent({
   name: 'layoutTop',
   setup() {
@@ -24,7 +24,7 @@ export default defineComponent({
     const showHeadFlag = ref(false);
     const showImGroup = ref(false);
     const showImGroupLoading = ref(true);
-    const showSuggestionViseble = ref(false)
+    const showSuggestionViseble = ref(false);
     const users = useUserStore();
     const showWord = ref(false);
     const { info } = storeToRefs(users);
@@ -86,9 +86,19 @@ export default defineComponent({
             </p>
           </div>
           <div class={styles.layoutRight}>
-            <div class={styles.optons} onClick={()=>showSuggestionViseble.value = true}>
-                <NImage src={opinionIcon} previewDisabled></NImage>
-            </div>
+            <NTooltip>
+              {{
+                trigger: () => (
+                  <div
+                    class={styles.optons}
+                    onClick={() => (showSuggestionViseble.value = true)}>
+                    <img src={opinionIcon}></img>
+                  </div>
+                ),
+                default: '意见反馈'
+              }}
+            </NTooltip>
+
             <div onClick={() => (showImGroup.value = true)}>
               <NBadge
                 value={noReadCount.value}
@@ -234,7 +244,6 @@ export default defineComponent({
             <ImGroup />
           </NModal>
 
-
           <NModal
             class={['modalTitle', 'background']}
             style={{ width: '910px' }}
@@ -242,7 +251,10 @@ export default defineComponent({
             preset="card"
             showIcon={false}
             title="意见反馈">
-              <SuggestionOption onClose={()=>showSuggestionViseble.value = false}></SuggestionOption>
+            <SuggestionOption
+              onClose={() =>
+                (showSuggestionViseble.value = false)
+              }></SuggestionOption>
           </NModal>
         </div>
       </>

src/components/timerMeter/components/countdown.tsx

@@ -159,9 +159,9 @@ export default defineComponent({
       count.value = 0;
       soundVIdeo.currentTime = 0;
       soundVIdeo.pause();
-      setTimeout(()=>{
+      setTimeout(() => {
         init();
-      },600)
+      }, 600);
     };
     onMounted(() => {
       nextTick(() => {
@@ -202,33 +202,29 @@ export default defineComponent({
     };
 
     const updateMin = () => {
-
-        console.log(mine.value, count.value);
-        const lastStr = getSecond(count.value);
-        count.value = mine.value * 60 + second.value;
-        const str = getSecond(count.value);
-        console.log(str, lastStr);
-        for (let i = 0; i < flipObjs.value.length; i++) {
-          if (lastStr[i] === str[i]) {
-            continue;
-          }
-          flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
+      console.log(mine.value, count.value);
+      const lastStr = getSecond(count.value);
+      count.value = mine.value * 60 + second.value;
+      const str = getSecond(count.value);
+      console.log(str, lastStr);
+      for (let i = 0; i < flipObjs.value.length; i++) {
+        if (lastStr[i] === str[i]) {
+          continue;
         }
-
+        flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
+      }
     };
     const updateSecond = () => {
-
-        console.log(mine.value);
-        const lastStr = getSecond(count.value);
-        count.value = mine.value * 60 + second.value;
-        const str = getSecond(count.value);
-        for (let i = 0; i < flipObjs.value.length; i++) {
-          if (lastStr[i] === str[i]) {
-            continue;
-          }
-          flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
+      console.log(mine.value);
+      const lastStr = getSecond(count.value);
+      count.value = mine.value * 60 + second.value;
+      const str = getSecond(count.value);
+      for (let i = 0; i < flipObjs.value.length; i++) {
+        if (lastStr[i] === str[i]) {
+          continue;
         }
-
+        flipObjs.value[i].value.flipUp(lastStr[i], str[i]);
+      }
     };
 
     watch(
@@ -253,7 +249,6 @@ export default defineComponent({
                   </div>
 
                   <div
-
                     class={[
                       styles.chioseWrap,
                       isPlaying.value ? styles.chioseHidden : ''

src/components/timerMeter/components/positive.tsx

@@ -2,41 +2,46 @@ import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
 import styles from '../index.module.less';
 import { NTabs, NTabPane, NSpace, NButton, NImage } from 'naive-ui';
 import { useRoute } from 'vue-router';
-import Flipper from '../modals/flipper.vue'
+import Flipper from '../modals/flipper.vue';
 import { stringify } from 'crypto-js/enc-utf8';
 import dayjs from 'dayjs';
-import playIcon from '../images/playing.png'
-import suspend from '../images/suspend.png'
-import { getSecond } from '@/utils/index'
+import playIcon from '../images/playing.png';
+import suspend from '../images/suspend.png';
+import { getSecond } from '@/utils/index';
 export default defineComponent({
   name: 'timer-positive',
   setup() {
-    const activeTab = ref('positive');  //countdown
+    const activeTab = ref('positive'); //countdown
     const route = useRoute();
     // const flipperHour1 = ref()
     // const flipperHour2 = ref()
-    const flipperMinute1 = ref()
-    const flipperMinute2 = ref()
-    const flipperSecond1 = ref()
-    const flipperSecond2 = ref()
-    const timer = ref(null as any)
-    const nowTimer = ref(null) as any
-    const nowDate = ref(new Date) as any
+    const flipperMinute1 = ref();
+    const flipperMinute2 = ref();
+    const flipperSecond1 = ref();
+    const flipperSecond2 = ref();
+    const timer = ref(null as any);
+    const nowTimer = ref(null) as any;
+    const nowDate = ref(new Date()) as any;
     nowTimer.value = setInterval(() => {
-      nowDate.value = new Date()
-    }, 1000)
-    const count = ref(0)
-    const isPlaying = ref(false)
+      nowDate.value = new Date();
+    }, 1000);
+    const count = ref(0);
+    const isPlaying = ref(false);
     // flipperHour1, flipperHour2,
-    const flipObjs = ref([flipperMinute1, flipperMinute2, flipperSecond1, flipperSecond2]) as any
+    const flipObjs = ref([
+      flipperMinute1,
+      flipperMinute2,
+      flipperSecond1,
+      flipperSecond2
+    ]) as any;
     const init = () => {
-      const now = new Date()
-      const nowTimeStr = '0000'
+      const now = new Date();
+      const nowTimeStr = '0000';
 
       for (let i = 0; i < flipObjs.value.length; i++) {
-        flipObjs.value[i].value.setFront(nowTimeStr[i])
+        flipObjs.value[i].value.setFront(nowTimeStr[i]);
       }
-    }
+    };
 
     const formatDate = (date: Date, dateFormat: string) => {
       /* 单独格式化年份，根据y的字符数量输出年份
@@ -48,7 +53,7 @@ export default defineComponent({
         dateFormat = dateFormat.replace(
           RegExp.$1,
           (date.getFullYear() + '').substr(4 - RegExp.$1.length)
-        )
+        );
       }
       // 格式化月、日、时、分、秒
       const o = {
@@ -57,11 +62,11 @@ export default defineComponent({
         'h+': date.getHours(),
         'i+': date.getMinutes(),
         's+': date.getSeconds()
-      } as any
+      } as any;
       for (const k in o) {
         if (new RegExp(`(${k})`).test(dateFormat)) {
           // 取出对应的值
-          const str = o[k] + ''
+          const str = o[k] + '';
           /* 根据设置的格式，输出对应的字符
            * 例如: 早上8时，hh => 08，h => 8
            * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
@@ -70,75 +75,68 @@ export default defineComponent({
           dateFormat = dateFormat.replace(
             RegExp.$1,
             RegExp.$1.length === 1 ? str : padLeftZero(str)
-          )
+          );
         }
       }
-      return dateFormat
-    }
+      return dateFormat;
+    };
     const padLeftZero = (str: string) => {
-      return ('00' + str).substr(str.length)
-    }
+      return ('00' + str).substr(str.length);
+    };
 
     const run = () => {
       timer.value = setInterval(() => {
         // 获取当前时间
-        const now = new Date()
-        const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'iiss')
-        const nextTimeStr = formatDate(now, 'iiss')
-        console.log(nowTimeStr, nextTimeStr)
+        const now = new Date();
+        const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'iiss');
+        const nextTimeStr = formatDate(now, 'iiss');
+        console.log(nowTimeStr, nextTimeStr);
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (nowTimeStr[i] === nextTimeStr[i]) {
-            continue
+            continue;
           }
-          flipObjs.value[i].value.flipDown(
-            nowTimeStr[i],
-            nextTimeStr[i]
-          )
+          flipObjs.value[i].value.flipDown(nowTimeStr[i], nextTimeStr[i]);
         }
-      }, 1000)
-
-    }
+      }, 1000);
+    };
     const startTimer = () => {
       isPlaying.value = true;
       timer.value = setInterval(() => {
         // 获取当前时间
-        const lastStr = getSecond(count.value)
-        count.value++
+        const lastStr = getSecond(count.value);
+        count.value++;
 
-        const str = getSecond(count.value)
+        const str = getSecond(count.value);
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (lastStr[i] === str[i]) {
-            continue
+            continue;
           }
-          flipObjs.value[i].value.flipDown(lastStr[i], str[i])
+          flipObjs.value[i].value.flipDown(lastStr[i], str[i]);
         }
-      }, 1000)
-    }
+      }, 1000);
+    };
 
     const suspendNum = () => {
       isPlaying.value = false;
       if (timer.value) {
-        clearInterval(timer.value)
-        timer.value = null
+        clearInterval(timer.value);
+        timer.value = null;
       }
-    }
+    };
     const onReset = () => {
-
-      suspendNum()
+      suspendNum();
       count.value = 0;
       setTimeout(() => {
         //   console.log('初始化')
-        init()
-      }, 600)
-
-    }
+        init();
+      }, 600);
+    };
     onMounted(() => {
       nextTick(() => {
-        init()
+        init();
         // run()
-      })
-
-    })
+      });
+    });
 
     return () => (
       <div class={styles.timerItemWrap}>
@@ -159,7 +157,6 @@ export default defineComponent({
                 <h4 class={styles.dotTop}></h4>
                 <div class={styles.dot}></div>
                 <div class={styles.dot}></div>
-
               </div>
               <div class={styles.timerItemTopCore}>
                 <h4> 秒</h4>
@@ -176,24 +173,43 @@ export default defineComponent({
               {dayjs(nowDate.value).format('YYYY年MM月DD日 HH:mm:ss')}
             </div>
           </div>
-
         </div>
 
         <NSpace class={styles.btnGroupModal} justify="center">
           <NButton round onClick={() => onReset()}>
             重置
           </NButton>
-          {isPlaying.value ? <NButton round type="primary" icon-placement="right" onClick={() => suspendNum()} v-slots={{
-            default: () => <p class={styles.playText}>暂停</p>,
-            icon: () => <NImage previewDisabled class={styles.palyIcon} src={suspend}></NImage>
-          }}>
-
-          </NButton> : <NButton round type="primary" icon-placement="right" onClick={() => startTimer()} v-slots={{
-            default: () => <p class={styles.playText}>开始</p>,
-            icon: () => <NImage previewDisabled class={styles.palyIcon} src={playIcon}></NImage>
-          }}>
-          </NButton>}
-
+          {isPlaying.value ? (
+            <NButton
+              round
+              type="primary"
+              icon-placement="right"
+              onClick={() => suspendNum()}
+              v-slots={{
+                default: () => <p class={styles.playText}>暂停</p>,
+                icon: () => (
+                  <NImage
+                    previewDisabled
+                    class={styles.palyIcon}
+                    src={suspend}></NImage>
+                )
+              }}></NButton>
+          ) : (
+            <NButton
+              round
+              type="primary"
+              icon-placement="right"
+              onClick={() => startTimer()}
+              v-slots={{
+                default: () => <p class={styles.playText}>开始</p>,
+                icon: () => (
+                  <NImage
+                    previewDisabled
+                    class={styles.palyIcon}
+                    src={playIcon}></NImage>
+                )
+              }}></NButton>
+          )}
         </NSpace>
       </div>
     );

src/custom-plugins/guide-page/teacher-guide.tsx

@@ -133,9 +133,9 @@ export default defineComponent({
       try {
         if (name !== 'base-setting') return;
         if (!guideInfo.value) {
-          guideInfo.value = { classGuide: false };
+          guideInfo.value = { teacherGuide: false };
         } else {
-          guideInfo.value.classGuide = false;
+          guideInfo.value.teacherGuide = false;
         }
         try {
           await setGuidance({

src/store/modules/prepareLessons.ts

@@ -18,7 +18,8 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     isAddResource: false, // 是否添加资源
     isEditResource: false, // 是否编辑资源
     iseditTrain: false, // 是否编辑训练,
-    isAddTrain: false // 是否添加训练,
+    isAddTrain: false, // 是否添加训练,
+    classGroupId: null as any // 班级编号
   }),
   getters: {
     /** 获取资源状态 */
@@ -84,6 +85,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     /** 获取声部列表 */
     getSubjectList(): any {
       return this.subjectList;
+    },
+    /** 获取班级编号 */
+    getClassGroupId(): string | number {
+      return this.classGroupId;
     }
   },
   actions: {
@@ -150,6 +155,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     /** 设置声部列表 */
     setSubjectList(subjects: any): any {
       this.subjectList = subjects;
+    },
+    /** 设置班级编号 */
+    setClassGroupId(id: string | number): any {
+      this.classGroupId = id;
     }
   }
 });

src/views/attend-class/component/audio-pay.tsx

@@ -37,7 +37,8 @@ export default defineComponent({
     let vudio: any = null;
 
     // 切换音频播放
-    const onToggleAudio = (e?: MouseEvent) => {
+    const onToggleAudio = (e?: any) => {
+      console.log(e, 'e', e);
       e?.stopPropagation();
       if (audio.value.paused) {
         onInit(audio.value, canvas.value);
@@ -47,7 +48,7 @@ export default defineComponent({
         audio.value?.pause();
       }
       audioForms.paused = audio.value?.paused;
-
+      e.target?.focus();
       emit('togglePlay', audioForms.paused);
     };
 
@@ -182,13 +183,13 @@ export default defineComponent({
           }}>
           <div class={styles.actions}>
             <div class={styles.actionWrap}>
-              <button class={styles.actionBtn} onClick={onToggleAudio}>
+              <div class={styles.actionBtn} onClick={onToggleAudio}>
                 {audioForms.paused ? (
                   <img class={styles.playIcon} src={iconplay} />
                 ) : (
                   <img class={styles.playIcon} src={iconpause} />
                 )}
-              </button>
+              </div>
             </div>
             <div class={styles.time}>
               <div

src/views/attend-class/component/audio.module.less

@@ -37,20 +37,26 @@
   }
 }
 
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(126px);
+  transition: all .2s;
+}
+
 .controls {
   position: absolute;
-  bottom: 0;
+  bottom: 126px;
   left: 0;
   right: 0;
   width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(26px);
-  height: 150px;
-  padding: 0 250px 0 40px !important;
-  transition: all 0.5s;
+  background-color: rgba(0, 0, 0, 0.7);
+  // backdrop-filter: blur(26px);
+  height: 86px;
+  padding: 10px 40px 0 !important;
+  transition: all 0.301s;
   display: flex;
   align-items: center;
-  transition: all .5s;
 
   .time {
     display: flex;
@@ -94,10 +100,11 @@
 
   .actionBtn {
     display: flex;
-    width: 82px;
-    height: 82px;
+    width: 60px;
+    height: 60px;
     padding: 4px 0;
     background: transparent;
+    cursor: pointer;
 
     &>img {
       width: 100%;
@@ -107,8 +114,8 @@
 
 
   .iconReplay {
-    width: 43px;
-    height: 42px;
+    width: 40px;
+    height: 39px;
     background-color: transparent;
 
     &>img {
@@ -129,11 +136,4 @@
       transition: all .2s;
     }
   }
-}
-
-.sectionAnimate {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(100%);
-  transition: all .5s;
-}
+}

src/views/attend-class/component/musicScore.module.less

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   -webkit-overflow-scrolling: touch;
-  overflow: scroll;
+  // overflow: scroll;
   // padding-top: 30px;
 
 
@@ -93,4 +93,4 @@
       }
     }
   }
-}
+}

src/views/attend-class/component/musicScore.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 import { NSkeleton } from 'naive-ui';
 import styles from './musicScore.module.less';
 import { usePageVisibility } from '@vant/use';
@@ -13,6 +13,10 @@ export default defineComponent({
     },
     activeModel: {
       type: Boolean
+    },
+    /** 当前是否为选中状态 */
+    activeStatus: {
+      type: Boolean
     }
   },
   emits: ['setIframe'],
@@ -32,9 +36,10 @@ export default defineComponent({
     const renderError = ref(false);
     const renderSuccess = ref(false);
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn'
-      : location.origin;
-    const src = `${origin}/instrument?showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
+      ? 'https://test.lexiaoya.cn/instrument'
+      : // 'http://localhost:3000/instrument.html'
+        location.origin + '/instrument';
+    const src = `${origin}?showGuide=true&platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
     const checkView = () => {
       fetch(src)
         .then(() => {
@@ -45,13 +50,16 @@ export default defineComponent({
           renderError.value = true;
         });
     };
-    watch(props.music, () => {
-      if (renderSuccess.value) return;
-      renderError.value = false;
-      if (props.music.display) {
-        checkView();
+    watch(
+      () => props.music,
+      () => {
+        if (renderSuccess.value) return;
+        renderError.value = false;
+        if (props.music.display) {
+          checkView();
+        }
       }
-    });
+    );
 
     // 去云教练完整版
     // const gotoAccomany = () => {
@@ -83,6 +91,26 @@ export default defineComponent({
     //   );
     // };
 
+    watch(
+      () => props.activeModel,
+      () => {
+        if (iframeRef.value.contentWindow && props.activeStatus) {
+          // console.log(
+          //   iframeRef.value.contentWindow,
+          //   props.activeModel,
+          //   'iframeRef'
+          // );
+          iframeRef.value.contentWindow.postMessage(
+            {
+              api: 'attendClassBarStatus',
+              hideMenu: !props.activeModel
+            },
+            '*'
+          );
+        }
+      }
+    );
+
     return () => (
       <div class={styles.musicScore}>
         <iframe

src/views/attend-class/component/tools/pen.module.less

@@ -31,42 +31,45 @@
 }
 
 .rightItem {
+  position: absolute;
+  right: 30px;
+  bottom: 0;
+  bottom: constant(safe-area-inset-bottom);
+  bottom: env(safe-area-inset-bottom);
+  height: 78Px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 28Px;
+    height: 28Px;
+  }
 
   // position: absolute;
-  // right: 15px;
-  // bottom: 0;
-  // bottom: constant(safe-area-inset-bottom);
-  // bottom: env(safe-area-inset-bottom);
-  // width: 50px;
-  // height: 54px;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
+  // top: 40px;
+  // left: 40px;
+  // width: 187px;
+  // height: 65px;
+  // cursor: pointer;
+  // transition: all 0.5s;
 
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  width: 187px;
-  height: 65px;
-  cursor: pointer;
-  transition: all 0.5s;
-
-  img {
-    width: 100%;
-    height: 100%;
-    -moz-user-select: none;
-    /* 火狐浏览器 */
-    -webkit-user-drag: none;
-    /* 谷歌、Safari和Opera浏览器 */
-    -webkit-user-select: none;
-    /* 谷歌、Safari和Opera浏览器 */
-    -ms-user-select: none;
-    /* IE10+浏览器 */
-    user-select: none;
-    /* 通用 */
-    -webkit-touch-callout: none;
-    /* iOS Safari */
-  }
+  // img {
+  //   width: 100%;
+  //   height: 100%;
+  //   -moz-user-select: none;
+  //   /* 火狐浏览器 */
+  //   -webkit-user-drag: none;
+  //   /* 谷歌、Safari和Opera浏览器 */
+  //   -webkit-user-select: none;
+  //   /* 谷歌、Safari和Opera浏览器 */
+  //   -ms-user-select: none;
+  //   /* IE10+浏览器 */
+  //   user-select: none;
+  //   /* 通用 */
+  //   -webkit-touch-callout: none;
+  //   /* iOS Safari */
+  // }
 
 }
 
@@ -77,4 +80,41 @@
   width: 100%;
   height: 100%;
   display: block;
-}
+}
+
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

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

@@ -1,8 +1,7 @@
-import { defineComponent, toRefs, ref, PropType } from 'vue';
+import { defineComponent, toRefs, ref, PropType, reactive } from 'vue';
 import styles from './pen.module.less';
 import { ToolType } from '../../index';
-import exit1 from '../../image/exit1.png';
-import exit2 from '../../image/exit2.png';
+import { NButton, NModal, NSpace } from 'naive-ui';
 
 export default defineComponent({
   name: 'pen-page',
@@ -22,11 +21,19 @@ export default defineComponent({
   },
   setup(props) {
     const { show, type } = toRefs(props);
+    // const modelAttendStatus = ref(false);
+    const modal = reactive({
+      status: false,
+      title: type.value === 'pen' ? '退出批注' : '退出白板',
+      content:
+        type.value === 'pen' ? '确认是否退出批注？' : '确认是否退出白板？'
+    });
     const firstRender = ref(true);
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://test.lexiaoya.cn/'
-      : location.origin;
-    const src = `${origin}/classroom-whiteboard?type=${props.type}`;
+      : // 'http://localhost:3000/'
+        location.origin;
+    const src = `${origin}/classroom-whiteboard?t=${+new Date()}`;
 
     return () => (
       <div
@@ -45,9 +52,75 @@ export default defineComponent({
           onLoad={() => {
             firstRender.value = false;
           }}></iframe>
-        <div class={styles.rightItem} onClick={() => props.close()}>
-          <img src={props.type === 'pen' ? exit2 : exit1} />
+        <div class={styles.rightItem} onClick={() => (modal.status = true)}>
+          <svg
+            width="28px"
+            height="28px"
+            viewBox="0 0 34 34"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g
+                transform="translate(-1842.000000, -1016.000000)"
+                stroke="#FFFFFF">
+                <g transform="translate(980.000000, 1006.000000)">
+                  <g transform="translate(862.000000, 10.000000)">
+                    <g transform="translate(4.000000, 5.000000)">
+                      <g
+                        transform="translate(8.058241, 5.009812)"
+                        fill="#FFFFFF"
+                        fill-rule="nonzero"
+                        stroke-width="0.3">
+                        <path d="M11.6084252,-0.15 C11.9880433,-0.15 12.3676614,-0.00518057514 12.6573002,0.284458275 L12.6573002,0.284458275 L18.3141545,5.94131252 C18.6037933,6.23095137 18.7486128,6.61056948 18.7486128,6.99018758 C18.7486128,7.36980569 18.6037933,7.74942379 18.3141545,8.03906264 L18.3141545,8.03906264 L12.6573002,13.6959169 C12.3676614,13.9855557 11.9880433,14.1303752 11.6084252,14.1303752 C11.2288071,14.1303752 10.849189,13.9855557 10.5595501,13.6959169 C10.2699113,13.406278 10.1250918,13.0266599 10.1250918,12.6470418 C10.1250918,12.2674237 10.2699113,11.8878056 10.5595368,11.5981801 L10.5595368,11.5981801 L13.6839174,8.47301484 L1.33333333,8.47352092 C0.923722144,8.47352092 0.552888811,8.30749318 0.284458275,8.03906264 C0.0160277386,7.77063211 -0.15,7.39979877 -0.15,6.99018758 C-0.15,6.61194961 -0.00841906355,6.26678575 0.224608408,6.00476938 C0.462154637,5.73767211 0.794779811,5.55707713 1.16932931,5.51583101 L1.16932931,5.51583101 L13.6841044,5.50627626 L10.5595501,2.38220839 C10.2699113,2.09256954 10.1250918,1.71295144 10.1250918,1.33333333 C10.1250918,0.953715229 10.2699113,0.574097124 10.5595501,0.284458275 C10.849189,-0.00518057514 11.2288071,-0.15 11.6084252,-0.15 Z"></path>
+                      </g>
+                      <path
+                        d="M15,24 L3,24 C1.34314575,24 -1.1293615e-15,22.6568542 0,21 L0,3 C-2.02906125e-16,1.34314575 1.34314575,3.04359188e-16 3,0 L15,0 L15,0"
+                        stroke-width="3.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
         </div>
+
+        {/* 布置作业 */}
+        <NModal
+          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}>
+              <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>
       </div>
     );
   }

src/views/attend-class/component/video.module.less

@@ -2,21 +2,26 @@
   width: 100%;
   height: 100%;
 
+  .sectionAnimate {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(126px);
+    transition: all .2s;
+  }
 
   .controls {
     position: absolute;
-    bottom: 0;
+    bottom: 126px;
     left: 0;
     right: 0;
     width: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(26px);
-    height: 150px;
-    padding: 0 250px 0 40px !important;
-    transition: all 0.5s;
+    background-color: rgba(0, 0, 0, 0.7);
+    // backdrop-filter: blur(26px);
+    height: 86px;
+    padding: 10px 40px 0 !important;
     display: flex;
     align-items: center;
-    transition: all .5s;
+    transition: all 0.301s;
 
     .time {
       display: flex;
@@ -60,8 +65,8 @@
 
     .actionBtn {
       display: flex;
-      width: 82px;
-      height: 82px;
+      width: 60px;
+      height: 60px;
       padding: 4px 0;
       background: transparent;
 
@@ -73,8 +78,8 @@
 
 
     .iconReplay {
-      width: 43px;
-      height: 42px;
+      width: 40px;
+      height: 39px;
       background-color: transparent;
 
       &>img {
@@ -97,12 +102,7 @@
     }
   }
 
-  .sectionAnimate {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
-    transition: all .5s;
-  }
+
 }
 
 
@@ -254,4 +254,4 @@
 //       }
 //     }
 //   }
-// }
+// }

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

@@ -23,31 +23,7 @@
   }
 }
 
-.assignHomework {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  width: 187px;
-  height: 65px;
-  cursor: pointer;
-  transition: all 0.5s;
-
-  &.isClose {
-    left: 124px;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
 
-.sectionAnimateUp {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-100%);
-  transition: all 0.5s;
-}
 
 .coursewarePlay {
   position: relative;
@@ -75,12 +51,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 50px;
-  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  height: 46px;
+  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  background-color: rgba(0, 0, 0, 0.5);
   transition: transform 0.5s;
   box-sizing: border-box;
-  font-size: 24px;
+  font-size: max(16px, 14Px);
+  color: #fff;
   pointer-events: none;
 
   div {
@@ -351,27 +328,59 @@
   transition: all 0.5s;
 }
 
+.sectionAnimateUp {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-100%);
+  transition: all 0.3s;
+}
+
 .switchDisplaySection {
   position: absolute;
-  right: 30px;
-  bottom: 30px;
+  right: 0px;
+  bottom: 0px;
   z-index: 199;
-  transition: all 0.5s;
+  transition: all 0.3s;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 40px;
+  height: 126px;
+  background-color: rgba(0, 0, 0, 0.7);
+  pointer-events: none;
+
+  .switchSpace {
+    gap: 0 48px !important;
+  }
+
 
-  .displayBtn {
-    width: 90px;
-    height: 90px;
+  .btnItem {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
     cursor: pointer;
+    pointer-events: auto;
+
+    &.btnsDisabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
 
     img {
-      width: inherit;
-      height: inherit;
+      width: 56px;
+      height: 56px;
     }
 
-    &+.displayBtn {
-      margin-left: 20px;
+    p {
+      padding-top: 6px;
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 25px;
+      text-align: center;
     }
+
+
   }
 }
 

src/views/attend-class/index.tsx

@@ -11,18 +11,18 @@ import {
 import styles from './index.module.less';
 import 'plyr/dist/plyr.css';
 import MusicScore from './component/musicScore';
-import iconChange from './image/icon-change.png';
-import iconMenu from './image/icon-menu.png';
-import iconUp from './image/icon-up.png';
-import iconDown from './image/icon-down.png';
-import iconNote from './image/icon-note.png';
-import iconWhiteboard from './image/icon-whiteboard.png';
-import iconAssignHomework from './image/icon-assignHomework.png';
-import iconClose from './image/icon-close.png';
-import iconOverPreivew from './image/icon-over-preview.png';
+// import iconChange from './image/icon-change.png';
+// import iconMenu from './image/icon-menu.png';
+// import iconUp from './image/icon-up.png';
+// import iconDown from './image/icon-down.png';
+// import iconNote from './image/icon-note.png';
+// import iconWhiteboard from './image/icon-whiteboard.png';
+// import iconAssignHomework from './image/icon-assignHomework.png';
+// import iconClose from './image/icon-close.png';
+// import iconOverPreivew from './image/icon-over-preview.png';
 import { Vue3Lottie } from 'vue3-lottie';
 import playLoadData from './datas/data.json';
-import Moveable from 'moveable';
+// import Moveable from 'moveable';
 import VideoPlay from './component/video-play';
 import {
   useMessage,
@@ -30,10 +30,10 @@ import {
   NDrawerContent,
   NModal,
   NSpace,
-  NButton,
-  NTooltip,
-  NPopover,
-  NImage
+  NButton
+  // NTooltip,
+  // NPopover,
+  // NImage
 } from 'naive-ui';
 import CardType from '@/components/card-type';
 import Pen from './component/tools/pen';
@@ -46,19 +46,33 @@ import {
   lessonPreTrainingPage,
   queryCourseware
 } from '../prepare-lessons/api';
-import Attentguide from '@/custom-plugins/guide-page/attent-guide';
+// import Attentguide from '@/custom-plugins/guide-page/attent-guide';
 import { vaildUrl } from '/src/utils/urlUtils';
 import TimerMeter from '/src/components/timerMeter';
-import toneImage from '/src/components/layout/images/toneImage.png';
-import toolbox from '/src/components/layout/images/toolbox.png';
-import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
-import iconNote2 from '/src/components/layout/images/icon-note.png';
-import beatIcon from '/src/components/layout/images/beatIcon.png';
-import toneIcon from '/src/components/layout/images/toneIcon.png';
-import { eventGlobal, px2vw } from '/src/utils';
+// import toneImage from '/src/components/layout/images/toneImage.png';
+// import toolbox from '/src/components/layout/images/toolbox.png';
+// import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
+// import beatIcon from '/src/components/layout/images/beatIcon.png';
+// import toneIcon from '/src/components/layout/images/toneIcon.png';
+import { px2vw } from '/src/utils';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
 import { state as globalState } from '/src/state';
 import Chapter from './model/chapter';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/store/modules/users';
+
+import iconBeatIcon from './new-image/icon-beatIcon.png';
+import iconChange from './new-image/icon-change.png';
+import iconDown from './new-image/icon-down.png';
+import iconMenu from './new-image/icon-menu.png';
+import iconNote from './new-image/icon-note.png';
+import iconOverClass from './new-image/icon-overclass.png';
+import iconSetTime from './new-image/icon-setTime.png';
+import iconToneIcon from './new-image/icon-toneIcon.png';
+import iconUp from './new-image/icon-up.png';
+import iconWhite from './new-image/icon-white.png';
+import iconWork from './new-image/icon-work.png';
+
 export type ToolType = 'init' | 'pen' | 'whiteboard';
 export type ToolItem = {
   type: ToolType;
@@ -101,39 +115,31 @@ export default defineComponent({
   setup(props, { emit }) {
     const message = useMessage();
     const route = useRoute();
+    const router = useRouter();
+    const users = useUserStore();
     /** 设置播放容器 16:9 */
     const parentContainer = reactive({
       width: '100vw'
     });
-    const NPopoverRef = ref();
-    const setContainer = () => {
-      const min = Math.min(screen.width, screen.height);
-      const max = Math.max(screen.width, screen.height);
-      const width = min * (16 / 9);
-      if (width > max) {
-        parentContainer.width = '100vw';
-        return;
-      } else {
-        parentContainer.width = width + 'px';
-      }
-    };
+    // const NPopoverRef = ref();
+    // const setContainer = () => {
+    //   const min = Math.min(screen.width, screen.height);
+    //   const max = Math.max(screen.width, screen.height);
+    //   const width = min * (16 / 9);
+    //   if (width > max) {
+    //     parentContainer.width = '100vw';
+    //     return;
+    //   } else {
+    //     parentContainer.width = width + 'px';
+    //   }
+    // };
     const handleInit = (type = 0) => {
       //设置容器16:9
       // setContainer();
     };
     handleInit();
-    const boxBoundaryInfo = reactive({
-      isBoundary: false,
-      isBoundaryType: '' as any,
-      mainWidth: '' as any,
-      mainHeight: '' as any,
-      subWidth: '' as any,
-      subHeight: '' as any
-    });
-
     onUnmounted(() => {
       handleInit(1);
-      window.removeEventListener('resize', resetSize);
     });
 
     const data = reactive({
@@ -171,7 +177,6 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const showGuide = ref(false);
     const getDetail = async () => {
       try {
         const res = await queryCourseware({
@@ -209,174 +214,60 @@ export default defineComponent({
             isRender: false // 是否渲染了
           };
         });
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
       } catch {
         //
       }
     };
 
-    const directionType = ref('left');
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
-    const isDragIng = ref(false);
-    const initMoveable = async () => {
-      if (document.querySelector('.wrap')) {
-        const moveable = new Moveable(document.querySelector('.wrap') as any, {
-          target: document.querySelector('#moveNPopoverA') as any,
-          // If the container is null, the position is fixed. (default: parentElement(document.body))
-          container: document.querySelector('.wrap') as any,
-          // snappable: true,
-          // bounds: {"left":100,"top":100,"right":100,"bottom":100},
-          draggable: true,
-          resizable: false,
-          scalable: false,
-          rotatable: false,
-          warpable: false,
-          pinchable: false, // ["resizable", "scalable", "rotatable"]
-          origin: false,
-          keepRatio: false,
-          // Resize, Scale Events at edges.
-          edge: false,
-          throttleDrag: 0,
-          throttleResize: 0,
-          throttleScale: 0,
-          throttleRotate: 0
-        });
-        console.log('initMoveable完毕', moveable);
-        moveable
-          .on('dragStart', ({ target, clientX, clientY }) => {
-            console.log('dragStart');
-          })
-          .on(
-            'drag',
-            ({
-              target,
-              // transform,
-              left,
-              top,
-              right,
-              bottom
-              // beforeDelta,
-              // beforeDist,
-              // delta,
-              // dist,
-              // clientX,
-              // clientY
-            }) => {
-              isDragIng.value = true;
-              if (NPopoverRef.value) {
-                NPopoverRef.value.setShow(false);
-              }
-
-              const subdEl = document.getElementById(
-                `moveNPopoverA`
-              ) as HTMLDivElement;
-              // console.log(subdEl, "subdEl", "drag");
-              const subdElStyle = getComputedStyle(subdEl, null);
-              const RectInfo = {
-                left: Number(subdElStyle.left.replace('px', '')),
-                top: Number(subdElStyle.top.replace('px', '')),
-                width: Number(subdElStyle.width.replace('px', '')),
-                height: Number(subdElStyle.height.replace('px', ''))
-              };
-              // target.style.transition = ''
-              const mainWidth =
-                parseInt(
-                  window.getComputedStyle(
-                    document.querySelector('.wrap') as Element
-                  ).width
-                ) - RectInfo.width;
-
-              const mainHeight =
-                parseInt(
-                  window.getComputedStyle(
-                    document.querySelector('.wrap') as Element
-                  ).height
-                ) - RectInfo.height;
-              subdEl.style.transition = '';
-              boxBoundaryInfo.isBoundary = false;
-              boxBoundaryInfo.isBoundaryType = '';
-              boxBoundaryInfo.mainHeight = mainHeight;
-              boxBoundaryInfo.mainWidth = mainWidth;
-              boxBoundaryInfo.subWidth = RectInfo.width;
-              boxBoundaryInfo.subHeight = RectInfo.height;
-              if (left < 0) {
-                left = 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'left';
-              }
-              if (top < 0) {
-                top = 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'top';
-              }
-              if (right < 0) {
-                right = 2;
-              }
-              if (bottom < 0) {
-                bottom = 2;
-              }
-              if (left > mainWidth - 2) {
-                left = mainWidth - 2;
-                // top = 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'right';
-              }
-              if (top > mainHeight - 2) {
-                top = mainHeight - 2;
-                boxBoundaryInfo.isBoundary = true;
-                boxBoundaryInfo.isBoundaryType = 'bottom';
-              }
-
-              target!.style.left = `${left}px`;
-              target!.style.top = `${top}px`;
-            }
-          )
-          .on(
-            'dragEnd',
-            async ({
-              target,
-              // isDrag,
-              clientX
-              // clientY
-            }) => {
-              if (document.body.clientWidth / 2 - clientX > 0) {
-                // 往左出
-                directionType.value = 'right';
-              } else {
-                // 往又出
-                directionType.value = 'left';
-              }
-              console.log(target.style.left);
-              isDragIng.value = false;
-              // 在这里进行动画
-              if (boxBoundaryInfo.isBoundary) {
-                // 这里说明贴边了
-
-                target.style.transition = '.3s';
-                actionEnd(target, boxBoundaryInfo.isBoundaryType);
-              }
-            }
-          );
-      }
-    };
     // ifram事件处理
     const iframeHandle = (ev: MessageEvent) => {
+      console.log(ev.data?.api, ev.data, 'ev.data');
       if (ev.data?.api === 'headerTogge') {
         activeData.model =
           ev.data.show || (ev.data.playState == 'play' ? false : true);
       }
+
+      //
+      if (ev.data?.api === 'onAttendToggleMenu') {
+        activeData.model = !activeData.model;
+      }
+
       if (ev.data?.api === 'api_fingerPreView') {
         clearInterval(activeData.timer);
         activeData.model = !ev.data.state;
       }
+      //
+      if (ev.data?.api === 'documentBodyKeyup') {
+        if (ev.data?.code === 'ArrowLeft') {
+          setModalOpen();
+          handlePreAndNext('up');
+        }
+
+        if (ev.data?.code === 'ArrowRight') {
+          setModalOpen();
+          handlePreAndNext('down');
+        }
+      }
+
+      if (ev.data?.api === 'onLogin') {
+        const documentDom: any = document;
+        documentDom.exitFullscreen
+          ? documentDom.exitFullscreen()
+          : documentDom.mozCancelFullScreen
+          ? documentDom.mozCancelFullScreen()
+          : documentDom.webkitExitFullscreen
+          ? documentDom.webkitExitFullscreen()
+          : '';
+        users.logout();
+        router.replace('/login');
+      }
     };
 
     onMounted(() => {
-      initMoveable();
+      // initMoveable();
       const query = route.query;
       // 先取参数，
       data.type = props.type || (query.type as any);
@@ -386,151 +277,11 @@ export default defineComponent({
       data.classGroupId = props.classGroupId || query.classGroupId;
       data.classId = props.classId || query.classId;
 
-      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      initBoundaryWrap(subdEl, boxBoundaryInfo);
-      initBoxRectInfo(subdEl, boxBoundaryInfo);
-
       window.addEventListener('message', iframeHandle);
       getDetail();
       getLessonCoursewareDetail();
-      window.addEventListener('resize', resetSize);
     });
 
-    const resetSize = () => {
-      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      subdEl.style.display = 'none';
-
-      boxBoundaryInfo.isBoundary = true;
-      boxBoundaryInfo.isBoundaryType = 'right';
-      if (NPopoverRef.value) {
-        NPopoverRef.value.setShow(false);
-      }
-
-      setTimeout(() => {
-        subdEl.style.transition = '';
-        initBoxRectInfo(subdEl, boxBoundaryInfo);
-        initBoundaryWrap(subdEl, boxBoundaryInfo);
-        subdEl.style.display = 'block';
-      }, 100);
-    };
-
-    const initBoundaryWrap = (target: any, wrapInfo: any) => {
-      target.addEventListener('mouseenter', () => {
-        if (wrapInfo.isBoundary) {
-          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
-          if (wrapInfo.isBoundaryType == 'left') {
-            target.style.left = '2px';
-          } else if (wrapInfo.isBoundaryType == 'right') {
-            target.style.left = `${wrapInfo.mainWidth - 2}px`;
-          } else if (wrapInfo.isBoundaryType == 'top') {
-            target.style.top = `${2}px`;
-          } else if (wrapInfo.isBoundaryType == 'bottom') {
-            target.style.top = `${wrapInfo.mainHeight - 2}px`;
-          }
-        }
-        rate(target, 0);
-      });
-      target.addEventListener('mouseleave', () => {
-        console.log('mouseleave', wrapInfo.isBoundary);
-        if (wrapInfo.isBoundary) {
-          // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
-          if (wrapInfo.isBoundaryType == 'left') {
-            actionEnd(target, 'left');
-          } else if (wrapInfo.isBoundaryType == 'right') {
-            actionEnd(target, 'right');
-          } else if (wrapInfo.isBoundaryType == 'top') {
-            actionEnd(target, 'top');
-          } else if (wrapInfo.isBoundaryType == 'bottom') {
-            actionEnd(target, 'bottom');
-          }
-        }
-        // rate(target, 0)
-      });
-      // target.addEventListener('contextmenu', (event: any) => {
-      //   event.preventDefault();
-      //   dialog.warning({
-      //     title: '提示',
-      //     content: '是否收入托盘',
-      //     positiveText: '确定',
-      //     negativeText: '取消',
-      //     onPositiveClick: () => {
-      //       console.log('确定')
-      //     },
-      //     onNegativeClick: () => {
-      //       console.log('取消')
-      //     }
-      //   })
-
-      // });
-
-      // actionEnd(target, 'right');
-    };
-    // 这里是旋转
-    const rate = (target: any, rate: any) => {
-      target.style.transform = ' rotate(' + rate + ')';
-    };
-
-    //  这里是选装的方式
-    const actionEnd = (target: any, type: any) => {
-      switch (type) {
-        case 'left':
-          rate(target, '90deg');
-          target!.style.left = `${2 - boxBoundaryInfo.subWidth / 2}px`;
-          target!.style.top = `${top}px`;
-          break;
-        case 'right':
-          rate(target, '-90deg');
-          target!.style.left = `${
-            boxBoundaryInfo.mainWidth - 2 + boxBoundaryInfo.subWidth / 2
-          }px`;
-          target!.style.top = `${top}px`;
-          break;
-
-        case 'top':
-          target!.style.top = `${2 - boxBoundaryInfo.subHeight / 2}px`;
-          rate(target, '-180deg');
-          break;
-        case 'bottom':
-          target!.style.top = `${
-            boxBoundaryInfo.mainHeight - 2 + boxBoundaryInfo.subHeight / 2
-          }px`;
-          break;
-        default:
-          rate(target, '-0');
-          break;
-      }
-    };
-
-    const initBoxRectInfo = (target: any, wrapInfo: any) => {
-      // const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      // console.log(subdEl, "subdEl", "drag");
-      const subdElStyle = getComputedStyle(target, null);
-      const RectInfo = {
-        left: Number(subdElStyle.left.replace('px', '')),
-        top: Number(subdElStyle.top.replace('px', '')),
-        width: Number(subdElStyle.width.replace('px', '')),
-        height: Number(subdElStyle.height.replace('px', ''))
-      };
-      // target.style.transition = ''
-      const mainWidth =
-        parseInt(
-          window.getComputedStyle(document.querySelector('.wrap') as Element)
-            .width
-        ) - RectInfo.width;
-
-      const mainHeight =
-        parseInt(
-          window.getComputedStyle(document.querySelector('.wrap') as Element)
-            .height
-        ) - RectInfo.height;
-      // boxBoundaryInfo.isBoundary = false;
-      // boxBoundaryInfo.isBoundaryType = '';
-      wrapInfo.mainHeight = mainHeight;
-      wrapInfo.mainWidth = mainWidth;
-      wrapInfo.subWidth = RectInfo.width;
-      wrapInfo.subHeight = RectInfo.height;
-      target.style.transition = '.3s';
-    };
     const onFullScreen = () => {
       if (data.type === 'preview') {
         const el: any = document.querySelector('#app');
@@ -596,14 +347,26 @@ export default defineComponent({
           lessonCoursewareKnowledgeDetailId: data.detailId,
           id: data.classId
         });
-      } catch {}
+      } catch {
+        //
+      }
     };
 
     const activeName = computed(() => {
       let name = '';
-      data.knowledgePointList.forEach((item: any, index: number) => {
-        if (popupData.activeIndex === index) {
-          name = item.title;
+      // data.knowledgePointList.forEach((item: any, index: number) => {
+      //   if (popupData.activeIndex === index) {
+      //     name = item.title;
+      //   }
+      // });
+      popupData.chapterDetails.forEach((chapter: any) => {
+        if (chapter.id === data.lessonCoursewareDetailId) {
+          name = chapter.name;
+          chapter.knowledgeList?.forEach((know: any) => {
+            if (know.id === data.detailId) {
+              name += ' - ' + know.name;
+            }
+          });
         }
       });
       return name;
@@ -789,20 +552,14 @@ export default defineComponent({
               message.destroyAll();
               nextTick(() => {
                 if (item.error) {
-                  console.log(item, 'item error');
+                  // console.log(item, 'item error');
                   item.videoEle?.src(item.content);
                   item.error = false;
                   //   item.videoEle?.onPlay();
                 }
               });
-              // item.autoPlay = false;
             }
           }
-          //   requestAnimationFrame(() => {
-          //     const _effectIndex = effectIndex.value + 1;
-          //     effectIndex.value =
-          //       _effectIndex >= effects.length - 1 ? 0 : _effectIndex;
-          //   });
         },
         activeData.isAnimation ? 800 : 0
       );
@@ -1030,11 +787,11 @@ export default defineComponent({
     // 监听页面键盘事件 - 上下切换
     document.body.addEventListener('keyup', (e: KeyboardEvent) => {
       // console.log(e, 'e');
-      if (e.code === 'ArrowUp') {
+      if (e.code === 'ArrowLeft') {
         // if (popupData.activeIndex === 0) return;
         setModalOpen();
         handlePreAndNext('up');
-      } else if (e.code === 'ArrowDown') {
+      } else if (e.code === 'ArrowRight') {
         // if (popupData.activeIndex === data.itemList.length - 1) return;
         setModalOpen();
         handlePreAndNext('down');
@@ -1106,12 +863,12 @@ export default defineComponent({
       if (val == 'toneIcon') {
         showModalTone.value = true;
       }
-      if (val == 'iconNote2') {
-        if (NPopoverRef.value) {
-          NPopoverRef.value.setShow(false);
-        }
-        eventGlobal.emit('teacher-guideInfo-attend-class', 'attend-class');
-      }
+      // if (val == 'iconNote2') {
+      //   if (NPopoverRef.value) {
+      //     NPopoverRef.value.setShow(false);
+      //   }
+      //   eventGlobal.emit('teacher-guideInfo-attend-class', 'attend-class');
+      // }
     };
 
     // 是否允许上一页
@@ -1386,6 +1143,7 @@ export default defineComponent({
                       ) : (
                         <MusicScore
                           activeModel={activeData.model}
+                          activeStatus={popupData.activeIndex === mIndex}
                           data-vid={m.id}
                           music={m}
                           onSetIframe={(el: any) => {
@@ -1400,165 +1158,140 @@ export default defineComponent({
             ) : (
               ''
             )}
-            <Transition name="right">
-              {activeData.model && (
-                <div
-                  class={styles.rightFixedBtns}
-                  onClick={(e: Event) => {
-                    e.stopPropagation();
-                    clearTimeout(activeData.timer);
-                  }}>
-                  <div
-                    class={[styles.fullBtn]}
-                    onClick={() => (popupData.chapterOpen = true)}>
-                    <img src={iconChange} />
-                  </div>
-                  <div
-                    class={[
-                      styles.fullBtn,
-                      styles.iconUp,
-                      !isUpArrow.value ? styles.btnsDisabled : ''
-                    ]}
-                    onClick={() => {
-                      if (!isUpArrow.value) return;
-                      handlePreAndNext('up');
-                    }}>
-                    <img src={iconUp} />
-                  </div>
-                  <div id="attent-0">
-                    <div
-                      class={[styles.fullBtn, styles.point]}
-                      onClick={() => (popupData.open = true)}>
-                      <img src={iconMenu} />
-                    </div>
-
-                    <div
-                      class={[
-                        styles.fullBtn,
-                        styles.iconDown,
-                        !isDownArrow.value ? styles.btnsDisabled : ''
-                      ]}
-                      onClick={() => {
-                        if (!isDownArrow.value) return;
-                        handlePreAndNext('down');
-                      }}>
-                      <img src={iconDown} />
-                    </div>
-                  </div>
-                </div>
-              )}
-            </Transition>
           </div>
         </div>
 
+        {/* 头部样式 */}
         <div
           style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
-          class={styles.headerContainer}
-          // ref={headeRef}
-        >
-          {/* <div class={styles.backBtn} onClick={() => goback()}>
-            <Icon name={iconBack} />
-            返回
-          </div> */}
+          class={styles.headerContainer}>
           <div class={styles.menu}>{activeName.value}</div>
         </div>
         {/* 布置作业按钮 */}
 
-        {data.type !== 'preview' ? (
-          <div
-            class={[
-              styles.assignHomeworkClose,
-              activeData.model ? '' : styles.sectionAnimateUp
-            ]}
-            onClick={async () => {
-              data.removeVisiable = true;
-              data.removeTitle = '结束课程';
-              data.removeContent = '请确认是否结束课程？';
-            }}>
-            <img src={iconClose} />
-          </div>
-        ) : (
-          ''
-        )}
-        <div
-          id="attent-3"
-          class={[
-            styles.assignHomework,
-            data.type !== 'preview' ? styles.isClose : '',
-            activeData.model ? '' : styles.sectionAnimateUp
-          ]}
-          onClick={async () => {
-            if (data.type === 'preview') {
-              handleStop();
-
-              data.removeVisiable = true;
-              data.removeTitle = '结束预览';
-              data.removeContent = '请确认是否结束预览？';
-
-              // onFullScreen();
-            } else {
-              const res = await lessonPreTrainingPage({
-                coursewareKnowledgeDetailId: data.detailId,
-                subjectId: data.subjectId,
-                page: 1,
-                rows: 99
-              });
-              console.log(res, 'res');
-              if (res.data.rows && res.data.rows.length) {
-                data.modalAttendMessage = '本节课已设置课后训练，是否布置？';
-              }
-              data.modelAttendStatus = true;
-            }
-          }}>
-          <img
-            src={data.type === 'preview' ? iconOverPreivew : iconAssignHomework}
-          />
-        </div>
-
-        {/* 白板 批注 */}
         <div
           class={[
             styles.switchDisplaySection,
             activeData.model ? '' : styles.sectionAnimate
           ]}>
-          <NTooltip trigger="hover">
-            {{
-              trigger: () => (
-                <div
-                  id="attent-1"
-                  class={styles.displayBtn}
-                  onClick={() =>
-                    openStudyTool({
-                      type: 'pen',
-                      icon: iconNote,
-                      name: '批注'
-                    })
-                  }>
-                  <img src={iconNote} />
-                </div>
-              ),
-              default: () => '批注'
-            }}
-          </NTooltip>
-          <NTooltip trigger="hover">
-            {{
-              trigger: () => (
-                <div
-                  id="attent-2"
-                  class={styles.displayBtn}
-                  onClick={() =>
-                    openStudyTool({
-                      type: 'whiteboard',
-                      icon: iconWhiteboard,
-                      name: '白板'
-                    })
-                  }>
-                  <img src={iconWhiteboard} />
-                </div>
-              ),
-              default: () => '白板'
-            }}
-          </NTooltip>
+          <NSpace class={styles.switchSpace}>
+            <div
+              class={styles.btnItem}
+              onClick={async () => {
+                if (data.type === 'preview') {
+                  handleStop();
+                  data.removeVisiable = true;
+                  data.removeTitle = '结束预览';
+                  data.removeContent = '请确认是否结束预览？';
+                } else {
+                  data.removeVisiable = true;
+                  data.removeTitle = '结束课程';
+                  data.removeContent = '请确认是否结束课程？';
+                }
+              }}>
+              <img src={iconOverClass} />
+              <p>{data.type !== 'preview' ? '结束课程' : '结束预览'}</p>
+            </div>
+            {data.type !== 'preview' && (
+              <div
+                class={styles.btnItem}
+                onClick={async () => {
+                  const res = await lessonPreTrainingPage({
+                    coursewareKnowledgeDetailId: data.detailId,
+                    subjectId: data.subjectId,
+                    page: 1,
+                    rows: 99
+                  });
+                  if (res.data.rows && res.data.rows.length) {
+                    data.modalAttendMessage =
+                      '本节课已设置课后训练，是否布置？';
+                  }
+                  data.modelAttendStatus = true;
+                }}>
+                <img src={iconWork} />
+                <p>布置作业</p>
+              </div>
+            )}
+
+            <div
+              class={styles.btnItem}
+              onClick={() =>
+                openStudyTool({
+                  type: 'pen',
+                  icon: iconNote,
+                  name: '批注'
+                })
+              }>
+              <img src={iconNote} />
+              <p>批注</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() =>
+                openStudyTool({
+                  type: 'whiteboard',
+                  icon: iconWhite,
+                  name: '白板'
+                })
+              }>
+              <img src={iconWhite} />
+              <p>白板</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('beatIcon')}>
+              <img src={iconToneIcon} />
+              <p>节拍器</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('toneIcon')}>
+              <img src={iconSetTime} />
+              <p>调音器</p>
+            </div>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('setTimeIcon')}>
+              <img src={iconBeatIcon} />
+              <p>计时器</p>
+            </div>
+          </NSpace>
+          <NSpace class={styles.switchSpace}>
+            <div
+              class={styles.btnItem}
+              onClick={() => (popupData.chapterOpen = true)}>
+              <img src={iconChange} />
+              <p>切换章节</p>
+            </div>
+            <div class={styles.btnItem} onClick={() => (popupData.open = true)}>
+              <img src={iconMenu} />
+              <p>资源列表</p>
+            </div>
+            <div
+              class={[
+                styles.btnItem,
+                !isUpArrow.value ? styles.btnsDisabled : ''
+              ]}
+              onClick={() => {
+                if (!isUpArrow.value) return;
+                handlePreAndNext('up');
+              }}>
+              <img src={iconUp} />
+              <p>上一个</p>
+            </div>
+            <div
+              class={[
+                styles.btnItem,
+                !isDownArrow.value ? styles.btnsDisabled : ''
+              ]}
+              onClick={() => {
+                if (!isDownArrow.value) return;
+                handlePreAndNext('down');
+              }}>
+              <img src={iconDown} />
+              <p>下一个</p>
+            </div>
+          </NSpace>
         </div>
 
         {/* 显示列表 */}
@@ -1708,76 +1441,6 @@ export default defineComponent({
           />
         </NModal>
 
-        {/* <NModal transformOrigin='center'
-          v-model:show={data.homeworkStatus}
-          preset="card"
-          class={[styles.attendClassModal]}
-          closable={false}
-          maskClosable={false}
-          title={' '}>
-          <div class={styles.workContainer}>
-            <h2>作业布置成功</h2>
-            <p>倒</p>
-          </div>
-        </NModal> */}
-        {showGuide.value ? <Attentguide type={data.type}></Attentguide> : null}
-
-        <NPopover
-          raw
-          trigger="click"
-          show-arrow={false}
-          ref={NPopoverRef}
-          style="--n-box-shadow: none;"
-          placement={directionType.value as 'left' | 'right'}
-          v-slots={{
-            trigger: () => (
-              // 首页不显示工具箱
-              <img
-                // src={isDragIng.value ? dragingBoxIcon : toolbox}
-                src={toolbox}
-                id="moveNPopoverA"
-                style={{
-                  display: ['/', '/home'].includes(route.path)
-                    ? 'none'
-                    : 'block'
-                }}
-                class={[
-                  styles.toolboxImg,
-                  'moveNPopoverA',
-                  isDragIng.value ? styles.isDragIng : ''
-                ]}
-                alt=""
-              />
-            )
-          }}>
-          <div class={styles.booxToolWrap}>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('beatIcon')}>
-              <img src={beatIcon} alt="" />
-              节拍器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('toneIcon')}>
-              <img src={toneIcon} alt="" />
-              调音器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('setTimeIcon')}>
-              <img src={setTimeIcon} alt="" />
-              计时器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('iconNote2')}>
-              <img src={iconNote2} alt="" />
-              帮助指引
-            </div>
-          </div>
-        </NPopover>
-
         <NModal
           transformOrigin="center"
           class={['modalTitle background']}

src/views/login/components/pwdLogin.tsx

@@ -60,7 +60,7 @@ export default defineComponent({
           const params: FormState = {
             username,
             password,
-            loginType:'PASSWORD',
+            loginType: 'PASSWORD',
             grant_type: 'password',
             client_id: 'cooleshow-teacher',
             client_secret: 'cooleshow-teacher'
@@ -78,9 +78,9 @@ export default defineComponent({
 
             // route.query?.redirect ||
             const toPath = decodeURIComponent('/' as string);
-            console.log(toPath,'toPath')
+            console.log(toPath, 'toPath');
             message.success('登录成功，即将进入系统');
-            router.replace(toPath)
+            router.replace(toPath);
             // if (route.name === LOGIN_NAME) {
             //   router.replace('/');
             // } else router.replace(toPath);
@@ -130,7 +130,7 @@ export default defineComponent({
               inputProps={{ autocomplete: 'off' }}
               class={[showPwd.value ? '' : styles['no-pwd']]}
               onKeydown={(e: KeyboardEvent) => {
-                console.log(e.code)
+                console.log(e.code);
                 if (e.code === 'Enter' || e.code === 'NumpadEnter') {
                   handleSubmit();
                 }

src/views/natural-resources/components/my-collect/index.module.less

@@ -3,8 +3,32 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
   min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .searchGroup {

src/views/natural-resources/components/my-collect/index.tsx

@@ -116,18 +116,22 @@ export default defineComponent({
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list} id="myColloge-0">
             {state.tableList.map((item: any) => (
-              <CardType
-                item={item}
-                offShelf={item.enableFlag ? false : true}
-                onOffShelf={() => onRemove(item)}
-                disabledMouseHover={false}
-                onClick={(val: any) => {
-                  if (val.type === 'IMG' || !item.enableFlag) return;
-                  state.show = true;
-                  state.item = val;
-                }}
-                onCollect={(item: any) => onCollect(item)}
-              />
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => onRemove(item)}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                </div>
+              </div>
             ))}
 
             {!state.loading && state.tableList.length <= 0 && (

src/views/natural-resources/components/my-resources/index.module.less

@@ -3,7 +3,9 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
+  margin-left: -12px;
+  margin-right: -12px;
 }
 
 .searchGroup {
@@ -147,15 +149,37 @@
   }
 }
 
-.itemSection {
+
+
+.itemWrap {
+  width: calc(100% / 5);
+  padding-bottom: calc(100% / 5 * 0.73333);
   position: relative;
 
-  .itemBg {
+  .itemWrapBox {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
+    padding: 0 12px;
+  }
+
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .itemBg {
+    position: absolute;
+    left: 12px;
+    top: 0;
+    width: calc(100% - 24px);
+    height: 100%;
     z-index: 99;
     border-radius: 14px;
 
@@ -238,4 +262,4 @@
       }
     }
   }
-}
+}

src/views/natural-resources/components/my-resources/index.tsx

@@ -207,51 +207,53 @@ export default defineComponent({
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list}>
             {state.tableList.map((item: any) => (
-              <div class={styles.itemSection}>
-                <CardType
-                  item={item}
-                  disabledMouseHover={false}
-                  offShelf={item.enableFlag ? false : true}
-                  onOffShelf={() => {
-                    state.type = 'remove';
-                    state.removeContent = '该资源已下架，是否删除？';
-                    state.removeVisiable = true;
-                    state.removeItem = item;
-                  }} // 下架
-                  onClick={(val: any) => {
-                    if (val.type === 'IMG' || !item.enableFlag) return;
-                    state.show = true;
-                    state.item = val;
-                  }}
-                  onCollect={(item: any) => onCollect(item)}
-                />
-                {/* 编辑模式 */}
-                {state.editStatus && (
-                  <div
-                    class={[
-                      styles.itemBg,
-                      state.editIds.includes(item.id)
-                        ? styles.itemBgChecked
-                        : ''
-                    ]}
-                    onClick={() => {
-                      const index = state.editIds.indexOf(item.id);
-                      if (index > -1) {
-                        state.editIds.splice(index, 1);
-                      } else {
-                        state.editIds.push(item.id);
-                      }
-                    }}>
-                    <img
-                      src={
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    disabledMouseHover={false}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => {
+                      state.type = 'remove';
+                      state.removeContent = '该资源已下架，是否删除？';
+                      state.removeVisiable = true;
+                      state.removeItem = item;
+                    }} // 下架
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                  {/* 编辑模式 */}
+                  {state.editStatus && (
+                    <div
+                      class={[
+                        styles.itemBg,
                         state.editIds.includes(item.id)
-                          ? resourceChecked
-                          : resourceDefault
-                      }
-                      class={styles.resourceDefault}
-                    />
-                  </div>
-                )}
+                          ? styles.itemBgChecked
+                          : ''
+                      ]}
+                      onClick={() => {
+                        const index = state.editIds.indexOf(item.id);
+                        if (index > -1) {
+                          state.editIds.splice(index, 1);
+                        } else {
+                          state.editIds.push(item.id);
+                        }
+                      }}>
+                      <img
+                        src={
+                          state.editIds.includes(item.id)
+                            ? resourceChecked
+                            : resourceDefault
+                        }
+                        class={styles.resourceDefault}
+                      />
+                    </div>
+                  )}
+                </div>
               </div>
             ))}
 
@@ -305,7 +307,7 @@ export default defineComponent({
               list.forEach((item: any) => {
                 temp.push({
                   subjectIds: null,
-                  openFlag: true,
+                  openFlag: false,
                   coverImg: item.coverImg,
                   title: item.name || '',
                   type: formatUrlType(item.content),

src/views/natural-resources/components/my-resources/search-group-resources.tsx

@@ -60,6 +60,11 @@ export default defineComponent({
                 size="small"
                 focusable={false}
                 onClick={() => {
+                  if (forms.type !== item.value) {
+                    state.isEdit = false;
+                    state.isSelectAll = false;
+                    emit('edit', state.isEdit);
+                  }
                   forms.type = item.value;
                   onSearch();
                 }}>
@@ -161,6 +166,11 @@ export default defineComponent({
                   focusable={false}
                   type={forms.subjectId === subject.id ? 'primary' : 'default'}
                   onClick={() => {
+                    if (forms.subjectId !== subject.id) {
+                      state.isEdit = false;
+                      state.isSelectAll = false;
+                      emit('edit', state.isEdit);
+                    }
                     forms.subjectId = subject.id;
                     onSearch();
                   }}>

src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -199,7 +199,7 @@ export default defineComponent({
                     />
 
                     <div class={styles.commonType}>
-                      公开资源：
+                      是否公开：
                       <NSwitch
                         size="small"
                         v-model:value={item.openFlag}

src/views/natural-resources/components/share-resources/index.module.less

@@ -3,8 +3,32 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 22px;
+  gap: 22px 0;
   min-height: 220px;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 5);
+    padding-bottom: calc(100% / 5 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .searchGroup {
@@ -128,8 +152,6 @@
 }
 
 
-
-
 .collapseWrap {
   width: 98%;
   display: flex;

src/views/natural-resources/components/share-resources/index.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       item: {} as any
     });
     const showGuide = ref(false);
-    const SearchGroupResourcesRef = ref()
+    const SearchGroupResourcesRef = ref();
     const getList = async () => {
       try {
         state.loading = true;
@@ -92,39 +92,41 @@ export default defineComponent({
     return () => (
       <>
         <SearchGroupResources
-        ref={SearchGroupResourcesRef}
+          ref={SearchGroupResourcesRef}
           onSearch={(item: any) => onSearch(item)}
           onAdd={() => (state.teachingStatus = true)}
         />
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
           <div class={styles.list}>
             {state.tableList.map((item: any, index: number) => (
-              <>
-                {index == 0 ? (
-                  <CardType
-                    {...{ id: 'shareResources-1' }}
-                    item={item}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG') return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                ) : (
-                  <CardType
-                    item={item}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG') return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                )}
-              </>
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  {index == 0 ? (
+                    <CardType
+                      {...{ id: 'shareResources-1' }}
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  ) : (
+                    <CardType
+                      item={item}
+                      disabledMouseHover={false}
+                      onClick={(val: any) => {
+                        if (val.type === 'IMG') return;
+                        state.show = true;
+                        state.item = val;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  )}
+                </div>
+              </div>
             ))}
 
             {!state.loading && state.tableList.length <= 0 && (

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

@@ -177,11 +177,37 @@
 }
 
 .list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+
   padding: 12px 22px 12px;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 20px;
+  gap: 20px 0;
+
+  .itemWrap {
+    width: calc(100% / 3);
+    padding-bottom: calc(100% / 3 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 10px;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 .attendClassModal {
@@ -288,8 +314,8 @@
 .addMusicItem {
   position: relative;
   box-sizing: border-box;
-  width: 300px;
-  height: 220px;
+  width: 100%;
+  height: 100%;
   border-radius: 14px;
   background: #F9FAFD;
   display: inline-flex;
@@ -323,4 +349,4 @@
 
 .subjectSyncModal {
   width: 920px;
-}
+}

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

@@ -298,7 +298,7 @@ export default defineComponent({
         );
         const subjectId =
           forms.subjectId || localStorageSubjectId
-            ? Number(localStorageSubjectId)
+            ? Number(forms.subjectId || localStorageSubjectId)
             : null;
         // 判断浏览器上面是否有
         const index = subjectList.findIndex(
@@ -328,6 +328,7 @@ export default defineComponent({
         forms.subjectId = route.query.subjectId
           ? Number(route.query.subjectId)
           : null;
+        prepareStore.setClassGroupId(forms.classGroupId as any);
 
         checkSubjectIds();
         await getList();
@@ -335,6 +336,7 @@ export default defineComponent({
     );
 
     onMounted(async () => {
+      prepareStore.setClassGroupId(route.query.classGroupId as any);
       // 获取教材分类列表
       checkSubjectIds();
 
@@ -342,6 +344,7 @@ export default defineComponent({
 
       // 动态添加数据
       eventGlobal.on('onPrepareAddItem', (item: any) => {
+        forms.drag = true;
         forms.coursewareList.push(item);
         prepareStore.setCoursewareList(forms.coursewareList);
 
@@ -460,7 +463,30 @@ export default defineComponent({
                 // !forms.loadingStatus && forms.coursewareList.length <= 0
                 //   ? styles.emptySection
                 //   : ''
-              ]}>
+              ]}
+              onDragenter={(e: any) => {
+                e.preventDefault();
+              }}
+              onDragover={(e: any) => {
+                e.preventDefault();
+              }}
+              onDrop={(e: any) => {
+                let dropItem = e.dataTransfer.getData('text');
+                dropItem = dropItem ? JSON.parse(dropItem) : {};
+                // 判断是否有数据
+                if (dropItem.id) {
+                  eventGlobal.emit('onPrepareAddItem', {
+                    materialId: dropItem.id,
+                    coverImg: dropItem.coverImg,
+                    type: dropItem.type,
+                    title: dropItem.title,
+                    isCollect: dropItem.isCollect,
+                    isSelected: dropItem.isSelected,
+                    content: dropItem.content,
+                    removeFlag: false
+                  });
+                }
+              }}>
               {forms.coursewareList.length > 0 && (
                 <>
                   {forms.drag ? (
@@ -481,23 +507,29 @@ export default defineComponent({
                           return (
                             <div
                               data-id={item.id}
-                              class={[styles.itemBlock, 'row-nav']}>
-                              <CardType
-                                class={[styles.itemContent]}
-                                isShowCollect={false}
-                                offShelf={item.removeFlag ? true : false}
-                                onOffShelf={() => onRemove(item)}
-                                item={item}
-                              />
-                              <div class={styles.itemOperation}>
-                                <img
-                                  src={iconDelete}
-                                  class={styles.iconDelete}
-                                  onClick={(e: MouseEvent) => {
-                                    e.stopPropagation();
-                                    onDelete(item);
-                                  }}
+                              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}
                                 />
+                                <div class={styles.itemOperation}>
+                                  <img
+                                    src={iconDelete}
+                                    class={styles.iconDelete}
+                                    onClick={(e: MouseEvent) => {
+                                      e.stopPropagation();
+                                      onDelete(item);
+                                    }}
+                                  />
+                                </div>
                               </div>
                             </div>
                           );
@@ -507,20 +539,58 @@ export default defineComponent({
                   ) : (
                     <div class={styles.list}>
                       {forms.coursewareList.map((item: any) => (
-                        <CardType
-                          class={[styles.itemContent, 'handle']}
-                          isShowCollect={false}
-                          item={item}
-                          offShelf={item.removeFlag ? true : false}
-                          onOffShelf={() => onRemove(item)}
-                          disabledMouseHover={false}
-                          onClick={() => {
-                            if (item.type === 'IMG') return;
-                            forms.show = true;
-                            forms.item = item;
-                          }}
-                        />
+                        <div class={styles.itemWrap}>
+                          <div class={styles.itemWrapBox}>
+                            <CardType
+                              class={[styles.itemContent, 'handle']}
+                              isShowCollect={false}
+                              item={item}
+                              offShelf={item.removeFlag ? true : false}
+                              onOffShelf={() => onRemove(item)}
+                              disabledMouseHover={false}
+                              onClick={() => {
+                                if (item.type === 'IMG') return;
+                                forms.show = true;
+                                forms.item = item;
+                              }}
+                            />
+                          </div>
+                        </div>
                       ))}
+                      <div class={styles.itemWrap}>
+                        <div class={styles.itemWrapBox}>
+                          <div
+                            class={[
+                              styles.itemContent,
+                              styles.addMusicItem,
+                              'handle'
+                            ]}
+                            onClick={() => {
+                              // 直接跳转到制谱页面 (临时存储数据)
+                              sessionStorage.setItem(
+                                'notation-open-create',
+                                '1'
+                              );
+                              router.push('/notation');
+                            }}>
+                            <img src={iconAddMusic} />
+
+                            <p class={styles.addMusicName}>开始制谱</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
+                <TheEmpty description="暂无课件" />
+              )} */}
+              {forms.coursewareList.length <= 0 && (
+                <div class={styles.list}>
+                  <div class={styles.itemWrap}>
+                    <div class={styles.itemWrapBox}>
                       <div
                         class={[
                           styles.itemContent,
@@ -537,25 +607,6 @@ export default defineComponent({
                         <p class={styles.addMusicName}>开始制谱</p>
                       </div>
                     </div>
-                  )}
-                </>
-              )}
-
-              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
-                <TheEmpty description="暂无课件" />
-              )} */}
-              {forms.coursewareList.length <= 0 && (
-                <div class={styles.list}>
-                  <div
-                    class={[styles.itemContent, styles.addMusicItem, 'handle']}
-                    onClick={() => {
-                      // 直接跳转到制谱页面 (临时存储数据)
-                      sessionStorage.setItem('notation-open-create', '1');
-                      router.push('/notation');
-                    }}>
-                    <img src={iconAddMusic} />
-
-                    <p class={styles.addMusicName}>开始制谱</p>
                   </div>
                 </div>
               )}
@@ -672,6 +723,8 @@ export default defineComponent({
                 forms.subjectId = item.subjectId;
                 forms.showAttendClass = false;
 
+                prepareStore.setClassGroupId(item.classGroupId);
+
                 checkSubjectIds();
                 // 声部切换时
                 eventGlobal.emit('onChangeClass', {

src/views/prepare-lessons/components/lesson-main/index.tsx

@@ -20,6 +20,10 @@ export default defineComponent({
           value={prepareStore.getTabType}
           onUpdate:value={(val: string) => {
             prepareStore.setTabType(val);
+
+            // 重置编辑状态
+            prepareStore.setIsEditResource(false);
+            prepareStore.setIsEditTrain(false);
           }}>
           <NTabPane name="courseware" tab="课件" displayDirective="show">
             <Courseware />

src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx

@@ -14,6 +14,7 @@ import { classGroupPage, lessonTrainingAdd } from '../../../api';
 import dayjs from 'dayjs';
 import { classGroupList } from '/src/views/home/api';
 import { gradeToCN } from '/src/utils/contants';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
 
 export default defineComponent({
   name: 'assign-homework',
@@ -27,7 +28,7 @@ export default defineComponent({
   emits: ['close', 'confirm'],
   setup(props, { emit }) {
     const message = useMessage();
-
+    const prepareStore = usePrepareStore();
     const forms = reactive({
       currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
       id: null as any,
@@ -43,10 +44,12 @@ export default defineComponent({
     // 获取年级班级
     const getClassGroupList = async () => {
       try {
+        const defaultSelectClassGroupId = prepareStore.getClassGroupId;
+        console.log('defaultSelectClassGroupId:', defaultSelectClassGroupId);
         const { data } = await classGroupList({ removeZeroClass: true });
         const cList = data || [];
         const gradeList: any = [];
-        cList.forEach((item: any, index: number) => {
+        cList.forEach((item: any) => {
           const classList: any = [];
           item.classGroupList.forEach((i: any) => {
             classList.push({
@@ -54,6 +57,12 @@ export default defineComponent({
               value: i.id,
               lastStudy: i.lastStudy
             });
+
+            if (i.id === defaultSelectClassGroupId) {
+              console.log('id: ', defaultSelectClassGroupId);
+              forms.currentGradeNum = i.currentGradeNum;
+              forms.classGroupId = i.id;
+            }
           });
 
           gradeList.push({
@@ -63,6 +72,10 @@ export default defineComponent({
           });
         });
         forms.gradeList = gradeList;
+
+        if (forms.currentGradeNum) {
+          getClassList();
+        }
       } catch {
         //
       }
@@ -79,6 +92,7 @@ export default defineComponent({
         //
       }
     };
+
     const onSubmit = async () => {
       formsRef.value?.validate(async (err: any) => {
         if (err) {

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

@@ -72,7 +72,7 @@
     }
 
     .n-base-selection-input {
-      padding-left: 8px;
+      padding-left: 8px !important;
     }
 
     .n-base-selection .n-base-selection-overlay {
@@ -116,7 +116,17 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 20px;
+  gap: 20px 2%;
+
+  &>div {
+    width: 49% !important;
+  }
+
+  .itemBlock {
+    &>div {
+      width: 100% !important;
+    }
+  }
 }
 
 .trainEditModal {
@@ -214,4 +224,4 @@
       }
     }
   }
-}
+}

src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -363,7 +363,7 @@ export default defineComponent({
                           offShelf={item.removeFlag ? true : false}
                           onOffShelf={() => onRemove(item)}
                           onEdit={(child: any) => {
-                            console.log('edit', child);
+                            // console.log('edit', child);
                             const { trainingConfigJson, id, musicId, ...res } =
                               child;
                             forms.editItem = {

src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -256,6 +256,7 @@ export default defineComponent({
                       isShowAdd
                       item={item}
                       isShowCollect={true}
+                      draggable
                       disabledMouseHover={false}
                       onClick={() => {
                         if (item.type === 'IMG') return;
@@ -263,7 +264,7 @@ export default defineComponent({
                         state.item = item;
                       }}
                       onCollect={(item: any) => onCollect(item)}
-                      isShowAddDisabled={!prepareStore.getIsEditResource}
+                      // isShowAddDisabled={!prepareStore.getIsEditResource}
                       onAdd={(item: any) => onAdd(item)}
                     />
                   ))}

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

@@ -18,7 +18,32 @@
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-start;
-    gap: 22px;
+    gap: 22px 0;
+    margin-left: -12px;
+    margin-right: -12px;
+
+
+    .itemWrap {
+      width: calc(100% / 4);
+      padding-bottom: calc(100% / 4 * 0.73333);
+      position: relative;
+
+      .itemWrapBox {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0 10px;
+      }
+    }
+
+    :global {
+      .card-section-container {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .list {

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

@@ -257,20 +257,24 @@ export default defineComponent({
               {state.tableList.length > 0 && (
                 <div class={styles.list}>
                   {state.tableList.map((item: any) => (
-                    <CardType
-                      isShowAdd
-                      item={item}
-                      isShowCollect={true}
-                      isShowAddDisabled={!prepareStore.getIsEditResource}
-                      onAdd={(item: any) => onAdd(item)}
-                      disabledMouseHover={false}
-                      onCollect={(item: any) => onCollect(item)}
-                      onClick={() => {
-                        if (item.type === 'IMG') return;
-                        state.show = true;
-                        state.item = item;
-                      }}
-                    />
+                    <div class={styles.itemWrap}>
+                      <div class={styles.itemWrapBox}>
+                        <CardType
+                          isShowAdd
+                          item={item}
+                          isShowCollect={true}
+                          isShowAddDisabled={!prepareStore.getIsEditResource}
+                          onAdd={(item: any) => onAdd(item)}
+                          disabledMouseHover={false}
+                          onCollect={(item: any) => onCollect(item)}
+                          onClick={() => {
+                            if (item.type === 'IMG') return;
+                            state.show = true;
+                            state.item = item;
+                          }}
+                        />
+                      </div>
+                    </div>
                   ))}
                 </div>
               )}

src/views/prepare-lessons/model/subject-sync/index.module.less

@@ -35,17 +35,18 @@
 .subjectItem {
   .imgSection {
     position: relative;
-    padding: 7px;
+    // padding: 7px;
     border: 3px solid transparent;
     border-radius: 24px;
     line-height: 0;
+    overflow: hidden;
   }
 
   img {
     overflow: hidden;
     border-radius: 18px;
-    width: 120px;
-    height: 120px;
+    width: 127px;
+    height: 127px;
     object-fit: contain;
   }
 
@@ -73,4 +74,4 @@
     font-weight: 600;
     color: #198CFE;
   }
-}
+}

src/views/setting/index.tsx

@@ -5,6 +5,7 @@ import PersonInfo from './components/personInfo';
 import SchoolInfo from './components/schoolInfo/index';
 import { useUserStore } from '/src/store/modules/users';
 import { useRoute } from 'vue-router';
+import { eventGlobal } from '/src/utils';
 export default defineComponent({
   name: 'base-setting',
   setup(props, { emit, attrs }) {
@@ -13,11 +14,13 @@ export default defineComponent({
     const route = useRoute();
     if (route.query.activeTab) {
       activeTab.value = route.query.activeTab;
+      eventGlobal.emit('base-setting-emit', activeTab.value);
     }
     watch(
       () => route.query.activeTab,
       val => {
         activeTab.value = val;
+        eventGlobal.emit('base-setting-emit', val);
       }
     );
     return () => (
@@ -26,9 +29,12 @@ export default defineComponent({
           class={styles.customTabs}
           v-model:value={activeTab.value}
           size="large"
-          animated
+          // animated
           pane-wrapper-style="margin: 0 -4px"
-          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+          onUpdate:value={(val: any) => {
+            eventGlobal.emit('base-setting-emit', val);
+          }}>
           <NTabPane name="person" tab="个人信息">
             <PersonInfo></PersonInfo>
           </NTabPane>

src/views/xiaoku-ai/index.module.less

@@ -61,14 +61,41 @@
 
 .content {
   flex: 1;
-  padding: 20px 36px 36px 36px;
+  // padding: 20px 36px 36px 36px;
+  padding: 0 6px 36px;
 
   &.loadingContent {
     min-height: 50vh;
   }
+
+  gap: 50px 0;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 6);
+    padding-bottom: calc(100% / 6 * 0.909923);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
 }
 
+// 214px
+// 223px  + 38
+
 .item {
+  margin: 0 auto;
   position: relative;
   width: 214px;
   cursor: pointer;
@@ -166,6 +193,7 @@
   .itemName {
     margin-top: 16px;
     font-size: 16px;
+    line-height: 22px;
     font-weight: 500;
     color: #333;
     text-align: center;

src/views/xiaoku-ai/index.tsx

@@ -267,48 +267,48 @@ export default defineComponent({
         <NSpin show={data.loading}>
           <div
             class={[styles.content, data.loading ? styles.loadingContent : '']}>
-            {data.list.length > 0 ? (
-              <NSpace size={[50, 40]}>
-                {data.list.map((item: any, index: number) => {
+            {data.list.length > 0
+              ? data.list.map((item: any, index: number) => {
                   return (
-                    <div
-                      class={styles.item}
-                      key={`item-${index}`}
-                      onClick={() => {
-                        sessionStorage.setItem(
-                          'musicSubjectList',
-                          JSON.stringify(item.subjects)
-                        );
-                        router.push({
-                          path: '/xiaoku-music',
-                          query: {
-                            id: item.id,
-                            name: item.name
-                          }
-                        });
-                      }}>
-                      <div class={styles.cover}>
-                        <div class={styles.itemImg}>
-                          <div class={styles.itemBg}></div>
-                          <NImage
-                            objectFit="cover"
-                            src={item.coverImg}
-                            lazy
-                            previewDisabled={true}
-                            onLoad={e => {
-                              (e.target as any).dataset.loaded = 'true';
-                            }}
-                          />
+                    <div class={styles.itemWrap}>
+                      <div class={styles.itemWrapBox}>
+                        <div
+                          class={styles.item}
+                          key={`item-${index}`}
+                          onClick={() => {
+                            sessionStorage.setItem(
+                              'musicSubjectList',
+                              JSON.stringify(item.subjects)
+                            );
+                            router.push({
+                              path: '/xiaoku-music',
+                              query: {
+                                id: item.id,
+                                name: item.name
+                              }
+                            });
+                          }}>
+                          <div class={styles.cover}>
+                            <div class={styles.itemImg}>
+                              <div class={styles.itemBg}></div>
+                              <NImage
+                                objectFit="cover"
+                                src={item.coverImg}
+                                lazy
+                                previewDisabled={true}
+                                onLoad={e => {
+                                  (e.target as any).dataset.loaded = 'true';
+                                }}
+                              />
+                            </div>
+                          </div>
+                          <div class={styles.itemName}>{item.name}</div>
                         </div>
                       </div>
-                      <div class={styles.itemName}>{item.name}</div>
                     </div>
                   );
-                })}
-              </NSpace>
-            ) : (
-              ''
-            )}
+                })
+              : ''}
             {!data.loading && data.list.length <= 0 && <TheEmpty></TheEmpty>}
           </div>
         </NSpin>

src/views/xiaoku-music/index.module.less

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  // height: 100%;
+  height: 100%;
 
   .iconBack {
     width: 36px;
@@ -68,7 +68,7 @@
   height: 100%;
   background: #DDF2FF;
   border-radius: 20px;
-  max-height: 90vh;
+  // max-height: 90vh;
 }
 
 .tools {
@@ -95,51 +95,80 @@
   display: flex;
   padding: 0 20px 20px;
   overflow: hidden;
+  gap: 0 32px;
 }
 
 .musicList {
+  // width: 512px;
+  // display: flex;
+  // // height: 100%;
+  // overflow-x: hidden;
+  // overflow-y: auto;
+  // // min-width: 330px;
+  // // max-height: 100vh;
+  // min-height: 71vh;
+  // margin-right: 32px;
+  background-color: #fff;
+  border-radius: 16px;
+
   width: 512px;
-  display: flex;
-  // height: 100%;
+  min-width: 294px;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  // min-width: 330px;
-  // max-height: 100vh;
-  min-height: 71vh;
-  margin-right: 32px;
-  background-color: #fff;
-  border-radius: 16px;
+  min-width: 330Px;
+  // position: relative;
+  // z-index: 1;
+
+  // &::before {
+  //   content: ' ';
+  //   position: absolute;
+  //   z-index: 0;
+  //   left: 0;
+  //   top: 0;
+  //   width: 512px;
+  //   min-width: 294px;
+  //   height: var(--xiaoku-music-height);
+  //   background-color: #fff;
+  //   border-radius: 16px;
+  // }
 
   &::-webkit-scrollbar {
     width: 0;
     display: none;
   }
 
+
+
   .wrapList {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    // width: 512px;
-    // min-width: 294px;
-    // min-height: 100%;
+    // display: flex;
+    // flex-direction: column;
+    // width: 100%;
+
+    // position: relative;
+    // z-index: 1;
+    width: 512px;
+    min-width: 294px;
+    min-height: 100%;
     // background: #fff;
-    // border-radius: 16px;
+    border-radius: 16px;
+
   }
 
   .empty {
     display: flex;
     align-items: center;
     justify-content: center;
-    // height: 50vh;
-    height: 100%;
+    height: 50vh;
+    // height: 100%;
   }
 }
 
 .itemContainer {
   width: 100%;
-  // border-radius: 16px;
+  border-radius: 16px;
   padding: 4px 8px;
-  background-color: #fff;
+  // background-color: #fff;
 
   &:first-child {
     padding-top: 8px;
@@ -289,18 +318,17 @@
   }
 
   .goBtn {
-    position: fixed;
-    left: 65%;
-    // bottom: 46px;
+    position: absolute;
+    left: 50%;
     bottom: 46px;
     transform: translateX(-50%);
     height: 70px;
     cursor: pointer;
     transition: all .2s ease-in;
 
-    &.goBtnBottom {
-      bottom: 154px;
-    }
+    // &.goBtnBottom {
+    //   bottom: 154px;
+    // }
   }
 
   .favitor {
@@ -378,4 +406,4 @@
     background-color: #fff;
     border-radius: 16px;
   }
-}
+}

src/views/xiaoku-music/index.tsx

@@ -46,6 +46,7 @@ import { useUserStore } from '/src/store/modules/users';
 import Musicguide from '@/custom-plugins/guide-page/music-guide';
 import TheEmpty from '/src/components/TheEmpty';
 import { state } from '/src/state';
+import { useResizeObserver } from '@vueuse/core';
 export default defineComponent({
   name: 'XiaokuMusic',
   setup() {
@@ -139,6 +140,20 @@ export default defineComponent({
     };
 
     onMounted(async () => {
+      // musicList-container
+      useResizeObserver(
+        document.querySelector('.musicList-container') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          console.log(height, 'height - 11');
+          document.documentElement.style.setProperty(
+            '--xiaoku-music-height',
+            height + 'px'
+          );
+        }
+      );
+
       getSubjects();
       await getList();
       const obv = new IntersectionObserver(entries => {
@@ -299,7 +314,7 @@ export default defineComponent({
             </div>
 
             <div class={styles.contentWrap}>
-              <div class={styles.musicList}>
+              <div class={[styles.musicList, 'musicList-container']}>
                 <div class={styles.wrapList}>
                   {data.list.map((item: IMusicItem, index) => {
                     return (
@@ -407,10 +422,7 @@ export default defineComponent({
                   style={{
                     display: activeItem.value.id ? '' : 'none'
                   }}
-                  class={[
-                    styles.goBtn,
-                    data.showPlayer ? styles.goBtnBottom : ''
-                  ]}
+                  class={[styles.goBtn]}
                   src={icon_goXiaoku}
                   onClick={() => {
                     handleChangeAudio('pause');