添案例接口添多数据情况批量标记弹窗封装新增查答卷查投票抽屉考勤面管添在线注释及清空考和测管内容判断

src/components/drawers/AllStuOver.vue

@@ -0,0 +1,161 @@
+<template>
+    <a-modal
+        :visible="ASOvervisible"
+        :closable="closable"
+        centered="true"
+        :footer="null"
+        wrapClassName="AllStuOverModel"
+        @cancel="closeModal"
+    >
+        <div class="head">
+            <div class="inhead">
+                <div class="left">
+                    <div class="gan"></div>
+                    <div class="tis">提示</div>
+                </div>
+                <div class="right" @click="closeModal"></div>
+            </div>
+        </div>
+        <div class="main">确定将所选学员标记完成吗</div>
+        <div class="butn">
+            <button class="btn btn1" @click="closeModal">取消</button>
+            <button class="btn btn2" @click="check">确定</button>
+        </div>
+    </a-modal>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+props: {
+    ASOvervisible:{
+        type:Boolean,
+        default:false
+    }
+},
+setup(props,ctx){
+    const state = reactive({
+        closable:false,
+    });
+    const closeModal = () => {
+        ctx.emit("update:ASOvervisible", false);
+    };
+    const check = () => {
+      closeModal();
+    };
+    return{
+        ...toRefs(state),
+        closeModal,
+        check,
+    }
+}
+};
+</script>
+<style lang="scss">
+.AllStuOverModel {
+  .ant-modal {
+    width: 424px;
+    height: 258px;
+
+    .ant-modal-content {
+      width: 424px;
+      height: 258px;
+
+      .ant-modal-body {
+        width: 424px;
+        height: 258px;
+        padding: 0px;
+
+        .head {
+          width: 424px;
+          height: 68px;
+          // position: absolute;
+          // left: 0;
+          // top: 0;
+          background: linear-gradient(
+            180deg,
+            rgba(78, 166, 255, 0.2) 0%,
+            rgba(78, 166, 255, 0) 100%
+          );
+          display: flex;
+
+          justify-content: center;
+
+          .inhead {
+            width: 90%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .left {
+              display: flex;
+              align-items: center;
+
+              .gan {
+                width: 16px;
+                height: 16px;
+                background-image: url(../../assets/images/taskpage/gan.png);
+              }
+
+              .tis {
+                margin-left: 5px;
+                width: 32px;
+                font-size: 16px;
+                font-weight: 600;
+                color: #333333;
+              }
+            }
+
+            .right {
+              width: 22px;
+              height: 22px;
+              background-image: url(../../assets/images/basicinfo/close.png);
+              background-size: 100% 100%;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .main {
+          margin-top: 20px;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: #333333;
+        }
+
+        .butn {
+          width: 100%;
+          display: flex;
+          margin-top: 60px;
+          justify-content: center;
+
+          .btn {
+            width: 100px;
+            height: 40px;
+            border-radius: 4px;
+            cursor: pointer;
+          }
+
+          .btn1 {
+            color: #387df7;
+
+            background: #ffffff;
+            border: 1px solid #387df7;
+          }
+
+          .btn2 {
+            background: #409eff;
+            color: #fff;
+            border: 0;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>