fe-manage/src/components/windows/DelWins.vue

<template>
    <!--删除弹窗 -->
    <a-modal
      v-model:visible="delete_hs"
      :footer="null"
      :closable="closableQR"
      wrapClassName="DelModal"
      style="margin-top: 400px"
    >
      <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
        <div class="del_header"></div>
        <div class="del_main">
          <div class="header">
            <div class="del-icon"></div>
            <span>提示</span>
            <div class="close_exit" @click="delete_exit"></div>
          </div>
          <div class="body">
            <span>您确定要删除此课程吗</span>
          </div>
          <div class="del_btnbox">
            <div class="del_btn btn1">
              <div class="btnText" @click="delete_exit">取消</div>
            </div>
            <div class="del_btn btn2">
              <div class="btnText" @click="delete_exit">确定</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!--删除弹窗 -->
</template>

<script>
import { toRefs, reactive, defineComponent } from "vue";
export default defineComponent({
    name: "DelWins",
      props: {
    delete_hs: {
      type: Boolean,
      default: false,
    },
  },
    setup() {
        const state = reactive({
            delete_hs: false,
            closableQR: false,
        })
        const delete_exit = () => {
            state.delete_hs = false;
        }
        return {
            ...toRefs(state),
            delete_exit,
        };
    },
})
</script>
<style lang="scss" scope>
.DelModal {
  .ant-modal {
    .ant-modal-content {
      width: 424px !important;
      .ant-modal-body {
        .delete {
          z-index: 999;
          width: 424px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .del_main {
            width: 100%;
            position: relative;
            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .del-icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/notice.png);
                background-size: 100% 100%;
              }
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>