fe-manage/src/components/drawers/AllStuOver.vue

<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: #4ea6ff;
            color: #fff;
            border: 0;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>