添加图片

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';
@@ -49,15 +49,28 @@ import {
 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 beatIcon from '/src/components/layout/images/beatIcon.png';
-import toneIcon from '/src/components/layout/images/toneIcon.png';
+// 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 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;
@@ -121,18 +134,18 @@ export default defineComponent({
       // setContainer();
     };
     handleInit();
-    const boxBoundaryInfo = reactive({
-      isBoundary: false,
-      isBoundaryType: '' as any,
-      mainWidth: '' as any,
-      mainHeight: '' as any,
-      subWidth: '' as any,
-      subHeight: '' as any
-    });
+    // 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);
+      // window.removeEventListener('resize', resetSize);
     });
 
     const data = reactive({
@@ -215,152 +228,152 @@ export default defineComponent({
       }
     };
 
-    const directionType = ref('left');
+    // 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);
-              }
-            }
-          );
-      }
-    };
+    // 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) => {
       if (ev.data?.api === 'headerTogge') {
@@ -374,7 +387,7 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      initMoveable();
+      // initMoveable();
       const query = route.query;
       // 先取参数，
       data.type = props.type || (query.type as any);
@@ -384,151 +397,132 @@ 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);
+      // const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
+      // initBoundaryWrap(subdEl, boxBoundaryInfo);
+      // initBoxRectInfo(subdEl, boxBoundaryInfo);
 
       window.addEventListener('message', iframeHandle);
       getDetail();
       getLessonCoursewareDetail();
-      window.addEventListener('resize', resetSize);
+      // window.addEventListener('resize', resetSize);
     });
 
-    const resetSize = () => {
-      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
-      subdEl.style.display = 'none';
+    // 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);
-      }
+    //   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);
-    };
+    //   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 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');
+    //       }
+    //     }
+    //   });
+    // };
     // 这里是旋转
-    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;
+    // const rate = (target: any, rate: any) => {
+    //   target.style.transform = ' rotate(' + rate + ')';
+    // };
 
-        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 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 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');
@@ -1047,7 +1041,7 @@ export default defineComponent({
                   ) : null;
                 })}
               </div>
-              <Transition name="right">
+              {/* <Transition name="right">
                 {activeData.model && (
                   <div
                     class={styles.rightFixedBtns}
@@ -1100,27 +1094,22 @@ export default defineComponent({
                     </div>
                   </div>
                 )}
-              </Transition>
+              </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' ? (
+        {/* {data.type !== 'preview' ? (
           <div
             class={[
               styles.assignHomeworkClose,
@@ -1169,10 +1158,10 @@ export default defineComponent({
           <img
             src={data.type === 'preview' ? iconOverPreivew : iconAssignHomework}
           />
-        </div>
+        </div> */}
 
         {/* 白板 批注 */}
-        <div
+        {/* <div
           class={[
             styles.switchDisplaySection,
             activeData.model ? '' : styles.sectionAnimate
@@ -1215,6 +1204,62 @@ export default defineComponent({
               default: () => '白板'
             }}
           </NTooltip>
+        </div> */}
+
+        <div
+          class={[
+            styles.switchDisplaySection,
+            activeData.model ? '' : styles.sectionAnimate
+          ]}>
+          <NSpace>
+            <div class={styles.btnItem}>
+              <img src={iconOverClass} />
+              <p>结束课程</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconWork} />
+              <p>布置作业</p>
+            </div>
+
+            <div class={styles.btnItem}>
+              <img src={iconNote} />
+              <p>批注</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconWhite} />
+              <p>白板</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconToneIcon} />
+              <p>节拍器</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconSetTime} />
+              <p>调音器</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconBeatIcon} />
+              <p>计时器</p>
+            </div>
+          </NSpace>
+          <NSpace>
+            <div class={styles.btnItem}>
+              <img src={iconChange} />
+              <p>切换章节</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconMenu} />
+              <p>资源列表</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconUp} />
+              <p>上一个</p>
+            </div>
+            <div class={styles.btnItem}>
+              <img src={iconDown} />
+              <p>下一个</p>
+            </div>
+          </NSpace>
         </div>
 
         {/* 显示列表 */}
@@ -1358,21 +1403,9 @@ 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></Attentguide> : null}
 
-        <NPopover
+        {/* <NPopover
           raw
           trigger="click"
           show-arrow={false}
@@ -1420,7 +1453,7 @@ export default defineComponent({
               计时器
             </div>
           </div>
-        </NPopover>
+        </NPopover> */}
 
         <NModal
           transformOrigin="center"