fix(stage-ui): alert design

This commit is contained in:
Neko Ayaka
2025-07-25 03:59:18 +08:00
parent a3afd431cd
commit 10d2c3eccd
@@ -8,9 +8,9 @@ const props = defineProps<{
const containerClass = computed(() => {
switch (props.type) {
case 'error':
return 'border-solid border-2 border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20'
return 'border-solid border-2 border-red-200 bg-red-50 dark:border-red-800/30 dark:bg-red-900/20'
case 'warning':
return 'border-solid border-2 border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20'
return 'border-solid border-2 border-amber-200 bg-amber-50 dark:border-amber-800/30 dark:bg-amber-900/20'
}
return ''
})
@@ -18,21 +18,21 @@ const containerClass = computed(() => {
const iconClass = computed(() => {
switch (props.type) {
case 'error':
return 'i-solar:close-circle-line-duotone text-red-500 dark:text-red-400'
return 'i-solar:close-circle-bold-duotone text-red-500 dark:text-red-400'
case 'warning':
return 'i-solar:danger-circle-line-duotone text-amber-500 dark:text-amber-400'
return 'i-solar:danger-circle-bold-duotone text-amber-500 dark:text-amber-400'
}
return ''
})
</script>
<template>
<div class="flex flex-col gap-3 rounded-lg p-4" :class="containerClass">
<div class="flex items-center gap-1 font-medium">
<div class="flex flex-col gap-3 rounded-xl p-2" :class="containerClass">
<div class="flex items-center gap-2 font-medium">
<div class="text-2xl" :class="iconClass" />
<slot name="title" />
</div>
<div class="text-sm">
<div class="px-1 text-sm">
<slot name="content" />
</div>
</div>