feat: button组件替换

src/components/delete-modal.vue

@@ -1,13 +1,31 @@
 <template>
-  <a-modal modal-class="delete-modal" body-class="body" cancel-text="返回" ok-text="确定删除" v-bind="$attrs">
+  <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.title }}
+      {{ $attrs.content }}
     </h2>
-    <slot></slot>
-  </a-modal>
+    <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"></script>
+<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;
@@ -18,7 +36,7 @@
     display: none;
   }
   .delete-modal-title {
-    margin-top: 24px;
+    // margin-top: 24px;
     font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
@@ -29,6 +47,14 @@
       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 {
@@ -53,5 +79,6 @@
 }
 .body {
   padding: 0 24px;
+  
 }
 </style>