feat: 404

This commit is contained in:
wangdan-fit2cloud 2023-12-12 17:34:05 +08:00
parent bfa39ef17e
commit 5c226a6ba8
2 changed files with 37 additions and 38 deletions

View File

@ -47,10 +47,14 @@ instance.interceptors.response.use(
return response return response
}, },
(err: any) => { (err: any) => {
console.log(err)
if (err.code === 'ECONNABORTED') { if (err.code === 'ECONNABORTED') {
MsgError(err.message) MsgError(err.message)
console.error(err) console.error(err)
} }
if (err.response?.status === 404) {
router.push('/404 ')
}
if (err.response?.status === 401) { if (err.response?.status === 401) {
router.push({ name: 'login' }) router.push({ name: 'login' })
} }

View File

@ -1,49 +1,44 @@
<template > <template>
<el-row class="not-found-container"> <el-row class="not-found-container">
<el-col class="img" :span="12"> <el-col class="img" :span="12"> </el-col>
<el-col class="message-container" :span="12">
</el-col> <div class="title">404</div>
<el-col class="message-container" :span="12"> <div class="message">很抱歉无法访问应用</div>
<div class="title">404</div> <!-- <div class="operate"><el-button type="primary" @click="router.push('/')">返回首页</el-button></div> -->
<div class="message">很抱歉您要访问的页面地址有误,或者该页面不存在</div> </el-col>
<div class="operate"><el-button type="primary" @click="router.push('/')">返回首页</el-button></div> </el-row>
</el-col>
</el-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.not-found-container { .not-found-container {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.img { .img {
background-image: url('@/assets/404.png'); background-image: url('@/assets/404.png');
background-size: 100% 100%; background-size: 100% 100%;
width: 50%; width: 50%;
height: 100%; height: 100%;
}
.message-container {
color: var(--app-text-color);
.title {
font-size: 50px;
font-weight: 500;
} }
.message-container { .message {
color: var(--app-text-color); font-size: 20px;
margin: 30px 0 20px 0;
.title {
font-size: 50px;
font-weight: 500;
}
.message {
font-size: 20px;
margin: 50px 0 20px 0;
}
} }
}
} }
</style> </style>