101 lines
2.1 KiB
Vue
101 lines
2.1 KiB
Vue
<template>
|
||
<div class="not-found-page">
|
||
<div class="not-found-content">
|
||
<div class="error-illustration">
|
||
<div class="error-code">404</div>
|
||
<div class="error-icon">
|
||
<FrownOutlined />
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="error-title">页面未找到</h1>
|
||
<p class="error-description">
|
||
抱歉，您访问的页面不存在或已被移动。
|
||
</p>
|
||
|
||
<div class="error-actions">
|
||
<a-button type="primary" @click="$router.push('/')" size="large">
|
||
<HomeOutlined />
|
||
返回首页
|
||
</a-button>
|
||
<a-button @click="$router.back()" size="large">
|
||
<ArrowLeftOutlined />
|
||
返回上页
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { FrownOutlined, HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@use "@/assets/styles/variables.scss" as *;
|
||
.not-found-page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, $light-gray 0%, white 100%);
|
||
padding: $spacing-lg;
|
||
}
|
||
|
||
.not-found-content {
|
||
text-align: center;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.error-illustration {
|
||
position: relative;
|
||
margin-bottom: $spacing-xxl;
|
||
}
|
||
|
||
.error-code {
|
||
font-size: 8rem;
|
||
font-weight: $font-weight-bold;
|
||
color: $tech-blue;
|
||
opacity: 0.1;
|
||
line-height: 1;
|
||
|
||
@media (min-width: $breakpoint-md) {
|
||
font-size: 12rem;
|
||
}
|
||
}
|
||
|
||
.error-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 4rem;
|
||
color: $text-medium;
|
||
}
|
||
|
||
.error-title {
|
||
font-size: 2rem;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-dark;
|
||
margin-bottom: $spacing-md;
|
||
|
||
@media (min-width: $breakpoint-md) {
|
||
font-size: 2.5rem;
|
||
}
|
||
}
|
||
|
||
.error-description {
|
||
font-size: $font-size-lg;
|
||
color: $text-medium;
|
||
margin-bottom: $spacing-xxl;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.error-actions {
|
||
display: flex;
|
||
gap: $spacing-md;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
</style>
|