mirror of
https://github.com/ZeroCatDev/ClassworksKVAdmin.git
synced 2025-10-22 12:03:10 +00:00
79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<script setup>
|
||
import { onMounted } from 'vue'
|
||
import { useRoute, RouterLink } from 'vue-router'
|
||
import { Button } from '@/components/ui/button'
|
||
import {
|
||
Card,
|
||
CardHeader,
|
||
CardTitle,
|
||
CardDescription,
|
||
CardContent,
|
||
CardFooter,
|
||
} from '@/components/ui/card'
|
||
import { AlertCircle, Home, ArrowLeft } from 'lucide-vue-next'
|
||
|
||
const route = useRoute()
|
||
|
||
const goBack = () => {
|
||
if (history.length > 1) history.back()
|
||
else window.location.assign('/')
|
||
}
|
||
|
||
onMounted(() => {
|
||
document.title = '404 - 页面未找到'
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<main
|
||
class="relative min-h-dvh grid place-items-center px-6 py-16 bg-gradient-to-b from-background to-muted/40"
|
||
>
|
||
<!-- 背景点缀 -->
|
||
<div
|
||
aria-hidden="true"
|
||
class="pointer-events-none absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-primary/10 to-transparent blur-2xl"
|
||
/>
|
||
|
||
<Card class="w-full max-w-xl">
|
||
<CardHeader class="text-center">
|
||
<div
|
||
class="mx-auto flex size-14 items-center justify-center rounded-full border bg-background/60 shadow-sm"
|
||
>
|
||
<AlertCircle class="size-7 text-primary" />
|
||
</div>
|
||
<CardTitle class="mt-3 text-2xl">页面未找到</CardTitle>
|
||
<CardDescription>
|
||
抱歉，您访问的地址不存在或已被移动。
|
||
</CardDescription>
|
||
</CardHeader>
|
||
|
||
<CardContent class="text-center text-sm text-muted-foreground break-words">
|
||
<p>
|
||
请求路径：
|
||
<span class="font-medium text-foreground/80">{{ route.fullPath }}</span>
|
||
</p>
|
||
</CardContent>
|
||
|
||
<CardFooter class="flex items-center justify-center gap-3">
|
||
<RouterLink to="/">
|
||
<Button size="lg">
|
||
<Home class="size-4" />
|
||
返回首页
|
||
</Button>
|
||
</RouterLink>
|
||
<Button variant="outline" size="lg" @click="goBack">
|
||
<ArrowLeft class="size-4" />
|
||
返回上一页
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
<p class="mt-6 text-center text-xs text-muted-foreground/80 select-none">
|
||
错误代码：404
|
||
</p>
|
||
</main>
|
||
</template>
|
||
|
||
<style scoped>
|
||
</style>
|