61 lines
1.1 KiB
Vue
61 lines
1.1 KiB
Vue
<template>
|
||
<div class="not-found-container">
|
||
<div class="not-found-content">
|
||
<img src="../assets/404.svg" alt="404" class="not-found-image" />
|
||
<h1 class="not-found-title">404</h1>
|
||
<h2 class="not-found-subtitle">抱歉，您访问的页面不存在</h2>
|
||
<p class="not-found-desc">可能是链接错误或者该页面已被删除</p>
|
||
<el-button type="primary" @click="backHome">返回首页</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
|
||
const backHome = () => {
|
||
router.push('/dashboard')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.not-found-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
background-color: #f0f2f5;
|
||
}
|
||
|
||
.not-found-content {
|
||
text-align: center;
|
||
padding: 30px;
|
||
}
|
||
|
||
.not-found-image {
|
||
width: 250px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.not-found-title {
|
||
font-size: 72px;
|
||
font-weight: bold;
|
||
color: #1890ff;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.not-found-subtitle {
|
||
font-size: 24px;
|
||
color: #333;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.not-found-desc {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin: 20px 0 30px;
|
||
}
|
||
</style> |