122 lines
2.3 KiB
Vue
122 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<div class="not-found-page">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="error-content">
|
|||
|
|
<div class="error-visual">
|
|||
|
|
<div class="error-number">
|
|||
|
|
404
|
|||
|
|
</div>
|
|||
|
|
<div class="error-icon">
|
|||
|
|
<n-icon size="120">
|
|||
|
|
<Search />
|
|||
|
|
</n-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="error-text">
|
|||
|
|
<h1>页面未找到</h1>
|
|||
|
|
<p>抱歉，您访问的页面不存在或已被移除。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="error-actions">
|
|||
|
|
<n-button
|
|||
|
|
type="primary"
|
|||
|
|
size="large"
|
|||
|
|
@click="router.push('/')"
|
|||
|
|
>
|
|||
|
|
返回首页
|
|||
|
|
</n-button>
|
|||
|
|
<n-button
|
|||
|
|
size="large"
|
|||
|
|
@click="router.back()"
|
|||
|
|
>
|
|||
|
|
返回上一页
|
|||
|
|
</n-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import { Search } from '@vicons/ionicons5'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.not-found-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 深色主题下背景 */
|
|||
|
|
[data-theme="dark"] .not-found-page {
|
|||
|
|
background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-content {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
max-width: 600px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-visual {
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: var(--spacing-xl);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-number {
|
|||
|
|
font-size: 12rem;
|
|||
|
|
font-weight: var(--font-weight-bold);
|
|||
|
|
opacity: 0.1;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-text {
|
|||
|
|
margin-bottom: var(--spacing-2xl);
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: var(--font-size-3xl);
|
|||
|
|
font-weight: var(--font-weight-bold);
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: var(--font-size-lg);
|
|||
|
|
opacity: 0.9;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.error-number {
|
|||
|
|
font-size: 8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-actions {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|