fix: 404 page dark style

This commit is contained in:
engigu
2025-09-30 22:45:31 +08:00
parent 7c079d11e3
commit da69dd7de1
2 changed files with 11 additions and 11 deletions
+6 -6
View File
@@ -18,19 +18,19 @@ const goBack = () => {
</script>
<template>
<div class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
<div class="min-h-screen bg-background flex items-center justify-center px-4">
<Card class="w-full max-w-md text-center">
<CardHeader>
<div class="mx-auto mb-4 w-24 h-24 bg-red-100 rounded-full flex items-center justify-center">
<span class="text-4xl font-bold text-red-600">404</span>
<div class="mx-auto mb-4 w-24 h-24 bg-red-100 dark:bg-red-400/20 border border-border rounded-full flex items-center justify-center">
<span class="text-4xl font-bold text-red-600 dark:text-red-400">404</span>
</div>
<CardTitle class="text-2xl font-bold text-gray-900">页面未找到</CardTitle>
<CardDescription class="text-gray-600">
<CardTitle class="text-2xl font-bold text-foreground">页面未找到</CardTitle>
<CardDescription class="text-muted-foreground">
抱歉您访问的页面不存在或已被移除
</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<p class="text-sm text-gray-500">
<p class="text-sm text-muted-foreground">
请检查URL是否正确或者使用下面的按钮返回
</p>
<div class="flex flex-col sm:flex-row gap-3 justify-center">
+5 -5
View File
@@ -1,15 +1,15 @@
<template>
<div class="flex flex-col items-center justify-center space-y-3">
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
<div class="w-16 h-16 bg-muted border border-border rounded-full flex items-center justify-center">
<slot name="icon">
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13h2m13-8V4a1 1 0 00-1-1H6a1 1 0 00-1 1v1m16 0V4a1 1 0 00-1-1H6a1 1 0 00-1 1v1"></path>
</svg>
</slot>
</div>
<div class="text-gray-500 text-center">
<p class="text-lg font-medium">{{ title }}</p>
<p class="text-sm">{{ description }}</p>
<div class="text-center">
<p class="text-lg font-medium text-foreground">{{ title }}</p>
<p class="text-sm text-muted-foreground">{{ description }}</p>
</div>
</div>
</template>