lingji-work-fe/src/components/delete-modal.vue

<template>
  <Modal wrapClassName="delete-modal" body-class="body" v-bind="$attrs" centered title="删除账号">
    <h2 class="delete-modal-title flex item-center">
      <img src="@/assets/warning.svg" alt="" />
      {{ $attrs.content }}
    </h2>
    <p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p>
    <template #footer>
      <div style="text-align: right">
        <Button @click="close">返回</Button>
        <Button type="primary" danger @click="onSubmit">确定删除</Button>
      </div>
    </template>
  </Modal>
</template>
<script setup lang="ts">
import { Modal, Button } from 'ant-design-vue';

const emit = defineEmits(['close', 'ok']);

const close = () => {
  emit('close');
};

const onSubmit = () => {
  emit('ok');
};
</script>
<style lang="scss">
:deep(.arco-btn-status-danger) {
  background-color: red !important;
  width: 1000px !important;
}
.delete-modal {
  .arco-modal-header {
    display: none;
  }
  .delete-modal-title {
    // margin-top: 24px;
    font-family: $font-family-medium;
    font-weight: 400;
    font-size: 14px;
    color: var(--Text-1, rgba(33, 31, 36, 1));
    img {
      width: 20px;
      height: 20px;
      margin-right: 12px;
    }
  }
  .delete-modal-content {
    margin-left: 34px;
    margin-top: 16px;
    font-family: $font-family-medium;
    font-weight: 400;
    font-size: 12px;
    color: var(--Text-2, rgba(60, 64, 67, 1));
  }
  .arco-modal-footer {
    border-top: none;
    :first-child {
      border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
      border-radius: 4px;
      padding: 7px 20px;
      font-family: $font-family-medium;
      font-weight: 400;
      font-size: 14px;
    }
    :last-child {
      border-radius: 4px;
      padding: 7px 20px;
      font-family: $font-family-medium;
      font-weight: 400;
      font-size: 14px;
      margin-left: 16px;
      border-color: var(--Functional-Danger-6, rgba(246, 75, 49, 1)) !important;
      background-color: var(--Functional-Danger-6, rgba(246, 75, 49, 1)) !important;
    }
  }
}
.body {
  padding: 0 24px;
  
}
</style>