peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 多样化错误界面

Browse Source
This commit is contained in:
x ronger 2020-08-12 23:30:07 +08:00
parent a267fc3ec1
commit d559d04d3d
1 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
layouts/error.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="error"> <div class="error">
<div class="error-content"> <div class="error-content">
<h1 class="error-code">{{ error.statusCode }}</h1> <div>
<el-image class="error-image" :src="image"></el-image>
<div class="error-code">{{ error.statusCode }}</div>
</div>
<div class="error-wrapper-message"> <div class="error-wrapper-message">
<h2 class="error-message">{{ error.message || notFound }}</h2> <h2 class="error-message">{{ error.message || notFound }}</h2>
</div> </div>
@ -19,10 +22,22 @@
props: { props: {
error: Object error: Object
}, },
computed: {
image() {
return this.images[Math.floor(Math.random()*5)];
}
},
data() { data() {
return { return {
notFound: '未找到你访问的界面', notFound: '未找到你访问的界面',
backToHomePage: '返回主页' backToHomePage: '返回主页',
images: [
'https://static.rymcu.com/article/1597244306764.png',
'https://static.rymcu.com/article/1597244962475.png',
'https://static.rymcu.com/article/1597245053282.png',
'https://static.rymcu.com/article/1597245075248.png',
'https://static.rymcu.com/article/1597246071981.png'
]
} }
} }
} }
@ -50,7 +65,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: $module-bg; background-color: $white;
@keyframes error-item { @keyframes error-item {
0% { 0% {
@ -69,6 +84,7 @@
> .error-wrapper-message { > .error-wrapper-message {
color: $black-light; color: $black-light;
animation: error-item ease-out both .6s $transition-time-slow; animation: error-item ease-out both .6s $transition-time-slow;
text-shadow: 5px 5px 5px #616161;
} }
.link { .link {
@ -89,8 +105,26 @@
font-family: 'webfont-bolder', DINRegular; font-family: 'webfont-bolder', DINRegular;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
text-shadow: 5px 5px 5px #616161;
} }
} }
} }
} }
.error-image {
width: 28rem;
animation: error-item ease-out both .6s $transition-time-slow;
}
.error-code {
text-transform: uppercase;
animation: error-item ease-out both .6s $transition-time-slow;
color: #616161;
font-size: 5em;
text-shadow: 5px 5px 5px #616161;
}
.link {
color: $black-light;
}
</style> </style>