64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
import { HomeIcon, ArrowLeftIcon } from 'lucide-vue-next'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
|
||
const router = useRouter()
|
||
|
||
// 返回首页
|
||
const goHome = () => {
|
||
router.push('/')
|
||
}
|
||
|
||
// 返回上一页
|
||
const goBack = () => {
|
||
router.go(-1)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<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 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-foreground">页面未找到</CardTitle>
|
||
<CardDescription class="text-muted-foreground">
|
||
抱歉，您访问的页面不存在或已被移除
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent class="space-y-4">
|
||
<p class="text-sm text-muted-foreground">
|
||
请检查URL是否正确，或者使用下面的按钮返回
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-3 justify-center">
|
||
<Button @click="goHome" class="flex items-center gap-2">
|
||
<HomeIcon class="w-4 h-4" />
|
||
返回首页
|
||
</Button>
|
||
<Button @click="goBack" variant="outline" class="flex items-center gap-2">
|
||
<ArrowLeftIcon class="w-4 h-4" />
|
||
返回上页
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 可以添加一些动画效果 */
|
||
.card-enter-active,
|
||
.card-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.card-enter-from,
|
||
.card-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
</style>
|