fe-manage/src/components/common/CommonAlert.vue

<template>
  <a-modal
    :visible="true"
    :footer="null"
    :title="null"
    :centere="true"
    :closable="false"
    style="margin-top: 400px"
    :zIndex="9999"
    @cancel="close"
  >
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="del-icons">
            <img :src="types[type]" alt=""/>
          </div>
          <span>提示</span>
          <div class="close_exit" @click="close"></div>
        </div>
        <div class="body">
          <div><span>{{ content }}</span></div>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn2" @click="close" v-if="cancel">
            <div class="btnText">取消</div>
          </div>
          <div class="del_btn btn2" @click="handleConfirm">
            <div class="btnText">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import notide from "@/assets/images/coursewareManage/notice.png";
import infoPng from "@/assets/images/coursewareManage/QR.png";
import {defineProps, onMounted, ref} from "vue";

const props = defineProps({
  close: {
    type: Function,
    default: () => ({})
  },
  ok: {
    type: Function,
    default: () => ({})
  },
  content: String,
  title: {
    type: String,
    default: "提示"
  },
  cancel: {
    type: Boolean,
    default: true
  },
  duration: {
    type: Number,
    default: 0
  },
  type: {
    type: Number,
    default: 1
  }
});
const types = {
  1: infoPng,
  2: notide
};
const type = ref(1);

onMounted(() => {
 props.duration && setTimeout(() => props.close(), props.duration)
});

function handleConfirm() {
  props.ok();
  props.close();
}
</script>
<style lang="scss" scoped>
.delete {
  min-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-icons {
        width: 16px;
        height: 16px;
        position: relative;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          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%;
      padding: 0 30px;
      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>
<style lang="scss">
.ant-modal-body {
  padding: 0 !important;
}
</style>