xiaoxian521
3 years ago
13 changed files with 56 additions and 323 deletions
-
BINsrc/assets/401.gif
-
BINsrc/assets/404.png
-
BINsrc/assets/404_cloud.png
-
1src/assets/status/403.svg
-
1src/assets/status/404.svg
-
1src/assets/status/500.svg
-
3src/plugins/i18n/en/menus.ts
-
3src/plugins/i18n/zh-CN/menus.ts
-
19src/router/modules/error.ts
-
73src/views/error/401.vue
-
14src/views/error/403.vue
-
250src/views/error/404.vue
-
14src/views/error/500.vue
Before Width: 313 | Height: 428 | Size: 680 KiB |
Before Width: 1014 | Height: 556 | Size: 96 KiB |
Before Width: 152 | Height: 138 | Size: 4.7 KiB |
1
src/assets/status/403.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/status/404.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/status/500.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,73 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
import imgs from "/@/assets/401.gif"; |
|
||||
import { ref } from "vue"; |
|
||||
|
|
||||
const img = ref(`${imgs}?${new Date()}`); |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div class="errPage-container"> |
|
||||
<el-row> |
|
||||
<el-col :span="12"> |
|
||||
<h1 class="text-jumbo text-ginormous">Pure Admin</h1> |
|
||||
<h2>你没有权限去该页面</h2> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<img |
|
||||
:src="img" |
|
||||
width="313" |
|
||||
height="428" |
|
||||
alt="Girl has dropped her ice cream." |
|
||||
/> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.errPage-container { |
|
||||
width: 800px; |
|
||||
max-width: 100%; |
|
||||
margin: 100px auto; |
|
||||
|
|
||||
.pan-back-btn { |
|
||||
background: #008489; |
|
||||
color: #fff; |
|
||||
border: none !important; |
|
||||
} |
|
||||
|
|
||||
.pan-gif { |
|
||||
margin: 0 auto; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
.pan-img { |
|
||||
display: block; |
|
||||
margin: 0 auto; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.text-jumbo { |
|
||||
font-size: 60px; |
|
||||
font-weight: 700; |
|
||||
color: #484848; |
|
||||
} |
|
||||
|
|
||||
.list-unstyled { |
|
||||
font-size: 14px; |
|
||||
|
|
||||
li { |
|
||||
padding-bottom: 5px; |
|
||||
} |
|
||||
|
|
||||
a { |
|
||||
color: #008489; |
|
||||
text-decoration: none; |
|
||||
|
|
||||
&:hover { |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -0,0 +1,14 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import noAccess from "/@/assets/status/403.svg?component"; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="flex justify-center items-center h-screen-sm"> |
||||
|
<noAccess /> |
||||
|
<div class="ml-12"> |
||||
|
<p class="font-medium text-4xl mb-4">403</p> |
||||
|
<p class="mb-4 text-gray-500">抱歉,你无权访问该页面</p> |
||||
|
<el-button type="primary" @click="$router.push('/')">返回首页</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
@ -1,250 +1,14 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { computed } from "vue"; |
|
||||
import four from "/@/assets/404.png"; |
|
||||
import four_cloud from "/@/assets/404_cloud.png"; |
|
||||
|
|
||||
const message = computed(() => { |
|
||||
return "The webmaster said that you can not enter this page..."; |
|
||||
}); |
|
||||
|
import noExist from "/@/assets/status/404.svg?component"; |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div class="wscn-http404-container"> |
|
||||
<div class="wscn-http404"> |
|
||||
<div class="pic-404"> |
|
||||
<img class="pic-404__parent" :src="four" alt="404" /> |
|
||||
<img class="pic-404__child left" :src="four_cloud" alt="404" /> |
|
||||
<img class="pic-404__child mid" :src="four_cloud" alt="404" /> |
|
||||
<img class="pic-404__child right" :src="four_cloud" alt="404" /> |
|
||||
</div> |
|
||||
<div class="bullshit"> |
|
||||
<div class="bullshit__oops">Pure Admin</div> |
|
||||
<div class="bullshit__headline">{{ message }}</div> |
|
||||
<div class="bullshit__info"> |
|
||||
Please check that the URL you entered is correct, or click the button |
|
||||
below to return to the homepage. |
|
||||
</div> |
|
||||
<a href="" class="bullshit__return-home">Back to home</a> |
|
||||
</div> |
|
||||
|
<div class="flex justify-center items-center h-screen-sm"> |
||||
|
<noExist /> |
||||
|
<div class="ml-12"> |
||||
|
<p class="font-medium text-4xl mb-4">404</p> |
||||
|
<p class="mb-4 text-gray-500">抱歉,你访问的页面不存在</p> |
||||
|
<el-button type="primary" @click="$router.push('/')">返回首页</el-button> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.wscn-http404-container { |
|
||||
transform: translate(-50%, -50%); |
|
||||
position: absolute; |
|
||||
top: 40%; |
|
||||
left: 50%; |
|
||||
} |
|
||||
|
|
||||
.wscn-http404 { |
|
||||
position: relative; |
|
||||
width: 1200px; |
|
||||
padding: 0 50px; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.pic-404 { |
|
||||
position: relative; |
|
||||
float: left; |
|
||||
width: 600px; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
&__parent { |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
&__child { |
|
||||
@keyframes cloudLeft { |
|
||||
0% { |
|
||||
top: 17px; |
|
||||
left: 220px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
20% { |
|
||||
top: 33px; |
|
||||
left: 188px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
80% { |
|
||||
top: 81px; |
|
||||
left: 92px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
top: 97px; |
|
||||
left: 60px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
@keyframes cloudMid { |
|
||||
0% { |
|
||||
top: 10px; |
|
||||
left: 420px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
20% { |
|
||||
top: 40px; |
|
||||
left: 360px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
70% { |
|
||||
top: 130px; |
|
||||
left: 180px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
top: 160px; |
|
||||
left: 120px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
@keyframes cloudRight { |
|
||||
0% { |
|
||||
top: 100px; |
|
||||
left: 500px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
20% { |
|
||||
top: 120px; |
|
||||
left: 460px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
80% { |
|
||||
top: 180px; |
|
||||
left: 340px; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
top: 200px; |
|
||||
left: 300px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
position: absolute; |
|
||||
|
|
||||
&.left { |
|
||||
width: 80px; |
|
||||
top: 17px; |
|
||||
left: 220px; |
|
||||
opacity: 0; |
|
||||
animation-name: cloudLeft; |
|
||||
animation-duration: 2s; |
|
||||
animation-timing-function: linear; |
|
||||
animation-fill-mode: forwards; |
|
||||
animation-delay: 1s; |
|
||||
} |
|
||||
|
|
||||
&.mid { |
|
||||
width: 46px; |
|
||||
top: 10px; |
|
||||
left: 420px; |
|
||||
opacity: 0; |
|
||||
animation-name: cloudMid; |
|
||||
animation-duration: 2s; |
|
||||
animation-timing-function: linear; |
|
||||
animation-fill-mode: forwards; |
|
||||
animation-delay: 1.2s; |
|
||||
} |
|
||||
|
|
||||
&.right { |
|
||||
width: 62px; |
|
||||
top: 100px; |
|
||||
left: 500px; |
|
||||
opacity: 0; |
|
||||
animation-name: cloudRight; |
|
||||
animation-duration: 2s; |
|
||||
animation-timing-function: linear; |
|
||||
animation-fill-mode: forwards; |
|
||||
animation-delay: 1s; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.bullshit { |
|
||||
@keyframes slideUp { |
|
||||
0% { |
|
||||
transform: translateY(60px); |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
transform: translateY(0); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
position: relative; |
|
||||
float: left; |
|
||||
width: 300px; |
|
||||
padding: 30px 0; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
&__oops { |
|
||||
font-size: 32px; |
|
||||
font-weight: bold; |
|
||||
line-height: 40px; |
|
||||
color: #1482f0; |
|
||||
opacity: 0; |
|
||||
margin-bottom: 20px; |
|
||||
animation-name: slideUp; |
|
||||
animation-duration: 0.5s; |
|
||||
animation-fill-mode: forwards; |
|
||||
} |
|
||||
|
|
||||
&__headline { |
|
||||
font-size: 20px; |
|
||||
line-height: 24px; |
|
||||
color: #222; |
|
||||
font-weight: bold; |
|
||||
opacity: 0; |
|
||||
margin-bottom: 10px; |
|
||||
animation-name: slideUp; |
|
||||
animation-duration: 0.5s; |
|
||||
animation-delay: 0.1s; |
|
||||
animation-fill-mode: forwards; |
|
||||
} |
|
||||
|
|
||||
&__info { |
|
||||
font-size: 13px; |
|
||||
line-height: 21px; |
|
||||
color: grey; |
|
||||
opacity: 0; |
|
||||
margin-bottom: 30px; |
|
||||
animation-name: slideUp; |
|
||||
animation-duration: 0.5s; |
|
||||
animation-delay: 0.2s; |
|
||||
animation-fill-mode: forwards; |
|
||||
} |
|
||||
|
|
||||
&__return-home { |
|
||||
display: block; |
|
||||
float: left; |
|
||||
width: 110px; |
|
||||
height: 36px; |
|
||||
background: #1482f0; |
|
||||
border-radius: 100px; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
opacity: 0; |
|
||||
font-size: 14px; |
|
||||
line-height: 36px; |
|
||||
cursor: pointer; |
|
||||
animation-name: slideUp; |
|
||||
animation-duration: 0.5s; |
|
||||
animation-delay: 0.3s; |
|
||||
animation-fill-mode: forwards; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -0,0 +1,14 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import noServer from "/@/assets/status/500.svg?component"; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="flex justify-center items-center h-screen-sm"> |
||||
|
<noServer /> |
||||
|
<div class="ml-12"> |
||||
|
<p class="font-medium text-4xl mb-4">403</p> |
||||
|
<p class="mb-4 text-gray-500">抱歉,服务器出错了</p> |
||||
|
<el-button type="primary" @click="$router.push('/')">返回首页</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue