<template>
|
<div class="error-page">
|
<div class="error-container">
|
<div class="error-content">
|
<div class="error-code">404</div>
|
<div class="error-message">页面未找到</div>
|
<div class="error-description">抱歉，您访问的页面不存在或已被移除</div>
|
<div class="error-actions">
|
<el-button @click="goBack" size="large">
|
<Icon icon="icon-park-solid:return" width="16" height="16" class="mr-1" />
|
返回首页
|
</el-button>
|
</div>
|
</div>
|
<div class="error-illustration">
|
<Icon icon="icon-park-solid:file-search" width="200" height="200" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
methods: {
|
goHome() {
|
this.$router.push('/')
|
},
|
goBack() {
|
if (window.history.length > 1) {
|
this.$router.go(-1)
|
} else {
|
this.$router.push('/')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.error-page {
|
height: 100vh;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
}
|
|
.error-container {
|
display: flex;
|
align-items: center;
|
gap: 60px;
|
max-width: 1000px;
|
padding: 40px;
|
}
|
|
.error-content {
|
flex: 1;
|
text-align: left;
|
}
|
|
.error-code {
|
font-size: 120px;
|
font-weight: bold;
|
color: #667eea;
|
line-height: 1;
|
margin-bottom: 20px;
|
}
|
|
.error-message {
|
font-size: 32px;
|
font-weight: 600;
|
color: #333333;
|
margin-bottom: 16px;
|
}
|
|
.error-description {
|
font-size: 18px;
|
color: #666666;
|
margin-bottom: 40px;
|
line-height: 1.6;
|
}
|
|
.error-actions {
|
display: flex;
|
gap: 16px;
|
flex-wrap: wrap;
|
}
|
|
.error-illustration {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.error-illustration .iconify {
|
color: #667eea;
|
animation: float 3s ease-in-out infinite;
|
}
|
|
@keyframes float {
|
0%, 100% {
|
transform: translateY(0px);
|
}
|
50% {
|
transform: translateY(-20px);
|
}
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.error-container {
|
flex-direction: column;
|
text-align: center;
|
gap: 40px;
|
padding: 20px;
|
}
|
|
.error-code {
|
font-size: 80px;
|
}
|
|
.error-message {
|
font-size: 24px;
|
}
|
|
.error-description {
|
font-size: 16px;
|
}
|
|
.error-actions {
|
justify-content: center;
|
}
|
|
.error-illustration .iconify {
|
width: 120px !important;
|
height: 120px !important;
|
}
|
}
|
|
@media (max-width: 480px) {
|
.error-code {
|
font-size: 60px;
|
}
|
|
.error-message {
|
font-size: 20px;
|
}
|
|
.error-actions {
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.error-actions .el-button {
|
width: 200px;
|
}
|
}
|
</style>
|
