添加弹窗

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

@@ -81,3 +81,40 @@
   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,6 +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 { NButton, NModal, NSpace } from 'naive-ui';
 
 export default defineComponent({
   name: 'pen-page',
@@ -20,6 +21,13 @@ 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/'
@@ -44,7 +52,7 @@ export default defineComponent({
           onLoad={() => {
             firstRender.value = false;
           }}></iframe>
-        <div class={styles.rightItem} onClick={() => props.close()}>
+        <div class={styles.rightItem} onClick={() => (modal.status = true)}>
           <svg
             width="28px"
             height="28px"
@@ -77,6 +85,42 @@ export default defineComponent({
             </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>
     );
   }