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

<template>
  <a-modal modal-class="delete-modal" body-class="body" cancel-text="返回" ok-text="确定删除" v-bind="$attrs">
    <h2 class="delete-modal-title flex item-center">
      <img src="@/assets/warning.svg" alt="" />
      {{ $attrs.title }}
    </h2>
    <slot></slot>
  </a-modal>
</template>
<script setup lang="ts"></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;
    }
  }
  .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>