zhengqingya
2 years ago
parent
345ec09be5
commit
2ef1f22555
14 changed files with 393 additions and 60 deletions
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
@ -1,4 +1,30 @@ |
|||||||
\ |
|
||||||
<template> |
<template> |
||||||
<h1>401</h1> |
<base-wraper class="container"> |
||||||
|
<div> |
||||||
|
<h1 class="text-jumbo text-ginormous">401错误!</h1> |
||||||
|
<h1>对不起，您没有访问权限，请不要进行非法操作！</h1> |
||||||
|
<h1>您可以返回 <router-link to="/" class="index"> 首页 </router-link></h1> |
||||||
|
</div> |
||||||
|
</base-wraper> |
||||||
</template> |
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Page401', |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
methods: {}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.index { |
||||||
|
color: blue; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -1,3 +1,228 @@ |
|||||||
<template> |
<template> |
||||||
<h1>404</h1> |
<div class="wscn-http404-container"> |
||||||
|
<div class="wscn-http404"> |
||||||
|
<div class="pic-404"> |
||||||
|
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" /> |
||||||
|
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" /> |
||||||
|
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" /> |
||||||
|
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" /> |
||||||
|
</div> |
||||||
|
<div class="bullshit"> |
||||||
|
<div class="bullshit__oops">404错误!</div> |
||||||
|
<div class="bullshit__headline"> |
||||||
|
{{ message }} |
||||||
|
</div> |
||||||
|
<div class="bullshit__info"> |
||||||
|
对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。 |
||||||
|
</div> |
||||||
|
<router-link to="/" class="bullshit__return-home"> 返回首页 </router-link> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'Page404', |
||||||
|
computed: { |
||||||
|
message() { |
||||||
|
return '找不到网页！' |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<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 { |
||||||
|
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; |
||||||
|
} |
||||||
|
@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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.bullshit { |
||||||
|
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: #ffffff; |
||||||
|
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; |
||||||
|
} |
||||||
|
@keyframes slideUp { |
||||||
|
0% { |
||||||
|
transform: translateY(60px); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translateY(0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
Loading…
Reference in new issue