更新优化

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

@@ -31,16 +31,31 @@
 }
 
 .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;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
 }
 
 .img {

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

@@ -1,6 +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';
 
 export default defineComponent({
   name: 'pen-page',
@@ -21,9 +23,10 @@ export default defineComponent({
   setup(props) {
     const { show, type } = toRefs(props);
     const firstRender = ref(true);
-    const src = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn/whiteboard-noCollab'
-      : `https://test.lexiaoya.cn/whiteboard-noCollab`;
+    const origin = /(localhost|192)/.test(location.host)
+      ? 'https://test.lexiaoya.cn/'
+      : location.origin;
+    const src = `${origin}/classroom-whiteboard?type=${props.type}`;
 
     return () => (
       <div
@@ -43,12 +46,7 @@ export default defineComponent({
             firstRender.value = false;
           }}></iframe>
         <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>
+          <img src={props.type === 'pen' ? exit2 : exit1} />
         </div>
       </div>
     );

src/views/attend-class/index.tsx

@@ -34,7 +34,7 @@ import AudioPay from './component/audio-pay';
 import TrainSettings from './model/train-settings';
 import { useRoute } from 'vue-router';
 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';
 export type ToolType = 'init' | 'pen' | 'whiteboard';
 export type ToolItem = {
   type: ToolType;
@@ -100,7 +100,7 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const getDetail = async () => {
       try {
         const res = await queryCourseware({
@@ -137,9 +137,9 @@ export default defineComponent({
             isRender: false // 是否渲染了
           };
         });
-        setTimeout(()=>{
+        setTimeout(() => {
           showGuide.value = true;
-        },500)
+        }, 500);
       } catch {
         //
       }
@@ -424,7 +424,8 @@ export default defineComponent({
     /** 教学数据 */
     const studyData = reactive({
       type: '' as ToolType,
-      penShow: false
+      penShow: false,
+      whiteboardShow: false
     });
 
     /** 打开教学工具 */
@@ -452,7 +453,7 @@ export default defineComponent({
           studyData.penShow = true;
           break;
         case 'whiteboard':
-          studyData.penShow = true;
+          studyData.whiteboardShow = true;
       }
     };
 
@@ -615,7 +616,7 @@ export default defineComponent({
             <Transition name="right">
               {activeData.model && (
                 <div
-                id='attent-0'
+                  id="attent-0"
                   class={styles.rightFixedBtns}
                   onClick={(e: Event) => {
                     e.stopPropagation();
@@ -671,7 +672,7 @@ export default defineComponent({
         </div> */}
         {/* 布置作业按钮 */}
         <div
-         id='attent-3'
+          id="attent-3"
           class={[
             styles.assignHomework,
             activeData.model ? '' : styles.sectionAnimateUp
@@ -708,7 +709,7 @@ export default defineComponent({
             {{
               trigger: () => (
                 <div
-                id='attent-1'
+                  id="attent-1"
                   class={styles.displayBtn}
                   onClick={() =>
                     openStudyTool({
@@ -727,7 +728,7 @@ export default defineComponent({
             {{
               trigger: () => (
                 <div
-                id='attent-2'
+                  id="attent-2"
                   class={styles.displayBtn}
                   onClick={() =>
                     openStudyTool({
@@ -769,7 +770,15 @@ export default defineComponent({
         {/* 批注 */}
         {studyData.penShow && (
           <Pen
-            show={studyData.type === 'pen' || studyData.type === 'whiteboard'}
+            show={studyData.type === 'pen'}
+            type={studyData.type}
+            close={() => closeStudyTool()}
+          />
+        )}
+
+        {studyData.whiteboardShow && (
+          <Pen
+            show={studyData.type === 'whiteboard'}
             type={studyData.type}
             close={() => closeStudyTool()}
           />
@@ -836,7 +845,7 @@ export default defineComponent({
             <p>倒</p>
           </div>
         </NModal> */}
-        {showGuide.value?<Attentguide></Attentguide>:null}
+        {showGuide.value ? <Attentguide></Attentguide> : null}
       </div>
     );
   }