fanfpy
deaba87362
- 新增Pinia状态管理用于用户认证和全局状态 - 实现JWT认证工具类和API服务封装 - 添加路由权限控制和全局错误处理 - 重构项目结构，新增layouts目录和组件 - 完善工具函数库和常量定义 - 新增404页面和API接口模块 - 优化移动端导航和响应式布局 - 更新依赖并添加开发工具支持
50 lines
948 B
Vue
50 lines
948 B
Vue
<template>
|
||
<div class="not-found-container">
|
||
<div class="error-code">404</div>
|
||
<h1 class="error-message">页面未找到</h1>
|
||
<p class="error-description">抱歉，您访问的页面不存在或已被移除</p>
|
||
<el-button type="primary" @click="goToHome">返回首页</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
|
||
const goToHome = () => {
|
||
router.push('/');
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.not-found-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 80vh;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.error-code {
|
||
font-size: 8rem;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.error-message {
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
color: #303133;
|
||
}
|
||
|
||
.error-description {
|
||
font-size: 1.2rem;
|
||
color: #606266;
|
||
margin-bottom: 2rem;
|
||
max-width: 500px;
|
||
}
|
||
</style> |