<template>
|
<div class="error-page">
|
<img class="error-page__img" src="~static/images/error.png" />
|
<template v-if="error.statusCode === 404">
|
<div class="error-page__title">404</div>
|
<div class="error-page__desc">页面不存在</div>
|
<el-button plain @click="goHome">返回首页</el-button>
|
</template>
|
<template v-if="error.statusCode === 401">
|
<div class="error-page__title">401</div>
|
<div class="error-page__desc">对不起，您没有权限访问</div>
|
<el-button plain @click="goHome">返回首页</el-button>
|
</template>
|
<template v-if="error.statusCode === 500">
|
<div class="error-page__title">500</div>
|
<div class="error-page__desc">服务器内部错误，请稍后访问</div>
|
<el-button plain @click="reloadPage">刷新页面</el-button>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
layout: 'empty',
|
// eslint-disable-next-line
|
props: ['error'],
|
methods: {
|
goHome() {
|
this.$router.replace('/')
|
},
|
reloadPage() {
|
window.location.reload()
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.error-page {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
&__img {
|
width: 300px;
|
}
|
&__title {
|
font-size: 50px;
|
color: $main-title-color;
|
font-weight: bold;
|
margin-top: 20px;
|
}
|
&__desc {
|
font-size: 14px;
|
color: #666;
|
}
|
.el-button {
|
margin-top: 30px;
|
width: 100px;
|
}
|
}
|
</style>
|
