zhengqingya
3 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> |
||||
<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> |
||||
|
||||
<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> |
||||
<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> |
||||
|
||||
<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