chore:优化了路由写法,修改了错误页面的展示,新增未发布提示页面

This commit is contained in:
奔跑的面条
2022-06-01 22:20:05 +08:00
parent bc44584698
commit 2641e70c78
10 changed files with 92 additions and 34 deletions
+1 -1
View File
@@ -4,7 +4,7 @@
<img src="~@/assets/images/exception/403.svg" alt="" />
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉你无权访问该页面</h1>
<h1>抱歉你无权访问该页面</h1>
</div>
<n-button type="primary" @click="goHome">回到首页</n-button>
</div>
+1 -1
View File
@@ -4,7 +4,7 @@
<img src="~@/assets/images/exception/404.svg" alt="" />
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉你访问的页面不存在</h1>
<h1>抱歉你访问的页面不存在</h1>
</div>
<n-button type="primary" @click="goHome">回到首页</n-button>
</div>
+1 -1
View File
@@ -4,7 +4,7 @@
<img src="~@/assets/images/exception/500.svg" alt="" />
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉服务器出错了</h1>
<h1>抱歉服务器出错了</h1>
</div>
<n-button type="primary" secondary @click="goHome">回到首页</n-button>
</div>
+35
View File
@@ -0,0 +1,35 @@
<template>
<div class="go-redirect-un-publish">
<div class="text-center">
<img src="~@/assets/images/exception/nodata.svg" alt="" />
</div>
<div class="text-center">
<h1>当前项目暂未发布</h1>
</div>
</div>
</template>
<style lang="scss" scoped>
@include go(redirect-un-publish) {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
padding: 100px 0;
@include background-image('background-image');
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>
+20 -5
View File
@@ -1,9 +1,11 @@
<template>
<n-empty description="你什么也找不到">
<template #extra>
<n-button size="small" @click="goHome">看看别的</n-button>
</template>
</n-empty>
<div class="go-redirect">
<n-empty description="你什么也找不到">
<template #extra>
<n-button size="small" @click="goHome">看看别的</n-button>
</template>
</n-empty>
</div>
</template>
<script lang="ts" setup>
import { onBeforeMount } from 'vue'
@@ -14,3 +16,16 @@ const goHome = () => {
router.replace({ path: '/' })
}
</script>
<style lang="scss" scoped>
@include go(redirect) {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
padding: 100px 0;
@include background-image('background-image');
}
</style>