File size: 2,131 Bytes
69b897d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<template>
<Teleport to="body">
<div v-if="show" class="modal fixed inset-0 z-50 flex items-center justify-center p-4">
<div
class="modal-content mx-auto w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-800"
>
<div class="mb-6 flex items-start gap-4">
<div
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-yellow-500"
>
<i class="fas fa-exclamation text-xl text-white" />
</div>
<div class="flex-1">
<h3 class="mb-2 text-lg font-bold text-gray-900 dark:text-white">
{{ title }}
</h3>
<p class="whitespace-pre-line text-sm leading-relaxed text-gray-700 dark:text-gray-300">
{{ message }}
</p>
</div>
</div>
<div class="flex gap-3">
<button
class="flex-1 rounded-xl bg-gray-100 px-4 py-2.5 font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
@click="$emit('cancel')"
>
{{ cancelText }}
</button>
<button
class="flex-1 rounded-xl bg-gradient-to-r from-yellow-500 to-orange-500 px-4 py-2.5 font-medium text-white shadow-sm transition-colors hover:from-yellow-600 hover:to-orange-600"
@click="$emit('confirm')"
>
{{ confirmText }}
</button>
</div>
</div>
</div>
</Teleport>
</template>
<script setup>
defineProps({
show: {
type: Boolean,
required: true
},
title: {
type: String,
default: ''
},
message: {
type: String,
default: ''
},
confirmText: {
type: String,
default: '继续'
},
cancelText: {
type: String,
default: '取消'
}
})
defineEmits(['confirm', 'cancel'])
</script>
<style scoped>
.modal {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
}
:global(.dark) .modal {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
</style>
|