修改

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

@@ -31,42 +31,41 @@
 }
 
 .rightItem {
+  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;
 
   // 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 +76,4 @@
   width: 100%;
   height: 100%;
   display: block;
-}
+}

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

@@ -1,8 +1,8 @@
 import { defineComponent, toRefs, ref, PropType } 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 exit1 from '../../image/exit1.png';
+// import exit2 from '../../image/exit2.png';
 
 export default defineComponent({
   name: 'pen-page',
@@ -45,8 +45,16 @@ export default defineComponent({
           onLoad={() => {
             firstRender.value = false;
           }}></iframe>
-        <div class={styles.rightItem} onClick={() => props.close()}>
+        {/* <div class={styles.rightItem} onClick={() => props.close()}>
           <img src={props.type === 'pen' ? exit2 : exit1} />
+        </div> */}
+        <div class={styles.rightItem} onClick={() => props.close()}>
+          <svg width="22px" height="20px" viewBox="0 0 22 20">
+            <path
+              transform="translate(-1.000000, -2.000000)"
+              fill="#FFFFFF"
+              d="M13,2 C13.5522847,2 14,2.44771525 14,3 C14,3.51283584 13.6139598,3.93550716 13.1166211,3.99327227 L13,4 L3,4 L3,20 L13,20 C13.5128358,20 13.9355072,20.3860402 13.9932723,20.8833789 L14,21 C14,21.5128358 13.6139598,21.9355072 13.1166211,21.9932723 L13,22 L2,22 C1.48716416,22 1.06449284,21.6139598 1.00672773,21.1166211 L1,21 L1,3 C1,2.48716416 1.38604019,2.06449284 1.88337887,2.00672773 L2,2 L13,2 Z M17.7071068,7.05025253 L21.9497475,11.2928932 L21.9497475,11.2928932 C22.3402718,11.6834175 22.3402718,12.3165825 21.9497475,12.7071068 L17.7071068,16.9497475 C17.3165825,17.3402718 16.6834175,17.3402718 16.2928932,16.9497475 C15.9023689,16.5592232 15.9023689,15.9260582 16.2928932,15.5355339 L18.828,12.999 L9.29368112,13 C8.74139637,13 8.29368112,12.5522847 8.29368112,12 C8.29368112,11.4871642 8.67972131,11.0644928 9.17706,11.0067277 L9.29368112,11 L18.827,10.999 L16.2928932,8.46446609 C15.9023689,8.0739418 15.9023689,7.44077682 16.2928932,7.05025253 C16.6834175,6.65972824 17.3165825,6.65972824 17.7071068,7.05025253 Z"></path>
+          </svg>
         </div>
       </div>
     );

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

@@ -75,12 +75,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 {
@@ -353,25 +354,48 @@
 
 .switchDisplaySection {
   position: absolute;
-  right: 30px;
-  bottom: 30px;
+  right: 0px;
+  bottom: 0px;
   z-index: 199;
   transition: all 0.5s;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 30px;
+  height: 126px;
+  background-color: rgba(0, 0, 0, 0.7);
+
+  .switchSpace {
+    gap: 0 48px !important;
+  }
+
 
-  .displayBtn {
-    width: 90px;
-    height: 90px;
+  .btnItem {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
     cursor: pointer;
 
+    &.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;
     }
+
+
   }
 }
 
@@ -598,4 +622,4 @@
       }
     }
   }
-}
+}

src/views/attend-class/index.tsx

@@ -46,7 +46,7 @@ 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';
@@ -117,35 +117,25 @@ export default defineComponent({
     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({
@@ -182,7 +172,6 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const showGuide = ref(false);
     const getDetail = async () => {
       try {
         const res = await queryCourseware({
@@ -220,160 +209,14 @@ 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) => {
       if (ev.data?.api === 'headerTogge') {
@@ -397,132 +240,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');
-    //       }
-    //     }
-    //   });
-    // };
-    // 这里是旋转
-    // 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');
@@ -1041,60 +763,6 @@ export default defineComponent({
                   ) : null;
                 })}
               </div>
-              {/* <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,
-                        popupData.activeIndex === 0 ? styles.btnsDisabled : ''
-                      ]}
-                      onClick={() => {
-                        if (popupData.activeIndex === 0) 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,
-                          popupData.activeIndex === data.itemList.length - 1
-                            ? styles.btnsDisabled
-                            : ''
-                        ]}
-                        onClick={() => {
-                          if (
-                            popupData.activeIndex ===
-                            data.itemList.length - 1
-                          )
-                            return;
-                          handlePreAndNext('down');
-                        }}>
-                        <img src={iconDown} />
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </Transition> */}
             </div>
           </div>
         ) : (
@@ -1109,153 +777,127 @@ export default defineComponent({
         </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>
-        </div> */}
-
         <div
           class={[
             styles.switchDisplaySection,
             activeData.model ? '' : styles.sectionAnimate
           ]}>
-          <NSpace>
-            <div class={styles.btnItem}>
+          <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>结束课程</p>
-            </div>
-            <div class={styles.btnItem}>
-              <img src={iconWork} />
-              <p>布置作业</p>
+              <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}>
+            <div
+              class={styles.btnItem}
+              onClick={() =>
+                openStudyTool({
+                  type: 'pen',
+                  icon: iconNote,
+                  name: '批注'
+                })
+              }>
               <img src={iconNote} />
               <p>批注</p>
             </div>
-            <div class={styles.btnItem}>
+            <div
+              class={styles.btnItem}
+              onClick={() =>
+                openStudyTool({
+                  type: 'whiteboard',
+                  icon: iconWhite,
+                  name: '白板'
+                })
+              }>
               <img src={iconWhite} />
               <p>白板</p>
             </div>
-            <div class={styles.btnItem}>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('beatIcon')}>
               <img src={iconToneIcon} />
               <p>节拍器</p>
             </div>
-            <div class={styles.btnItem}>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('toneIcon')}>
               <img src={iconSetTime} />
               <p>调音器</p>
             </div>
-            <div class={styles.btnItem}>
+            <div
+              class={styles.btnItem}
+              onClick={() => startShowModal('setTimeIcon')}>
               <img src={iconBeatIcon} />
               <p>计时器</p>
             </div>
           </NSpace>
-          <NSpace>
-            <div class={styles.btnItem}>
+          <NSpace class={styles.switchSpace}>
+            <div
+              class={styles.btnItem}
+              onClick={() => (popupData.chapterOpen = true)}>
               <img src={iconChange} />
               <p>切换章节</p>
             </div>
-            <div class={styles.btnItem}>
+            <div class={styles.btnItem} onClick={() => (popupData.open = true)}>
               <img src={iconMenu} />
               <p>资源列表</p>
             </div>
-            <div class={styles.btnItem}>
+            <div
+              class={[
+                styles.btnItem,
+                popupData.activeIndex === 0 ? styles.btnsDisabled : ''
+              ]}
+              onClick={() => {
+                if (popupData.activeIndex === 0) return;
+                handlePreAndNext('up');
+              }}>
               <img src={iconUp} />
               <p>上一个</p>
             </div>
-            <div class={styles.btnItem}>
+            <div
+              class={[
+                styles.btnItem,
+                popupData.activeIndex === data.itemList.length - 1
+                  ? styles.btnsDisabled
+                  : ''
+              ]}
+              onClick={() => {
+                if (popupData.activeIndex === data.itemList.length - 1) return;
+                handlePreAndNext('down');
+              }}>
               <img src={iconDown} />
               <p>下一个</p>
             </div>
@@ -1403,58 +1045,6 @@ export default defineComponent({
           />
         </NModal>
 
-        {showGuide.value ? <Attentguide></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>
-        </NPopover> */}
-
         <NModal
           transformOrigin="center"
           class={['modalTitle background']}