forked from macrozheng/mall-admin-web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhh
committed
Nov 22, 2018
1 parent
2e5753a
commit 964f66d
Showing
2 changed files
with
36 additions
and
216 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,229 +1,49 @@ | ||
<template> | ||
<div style="background:#f0f2f5;margin-top: -20px;"> | ||
<div class="wscn-http404"> | ||
<div class="pic-404"> | ||
<img class="pic-404__parent" :src="img_404" alt="404"> | ||
<img class="pic-404__child left" :src="img_404_cloud" alt="404"> | ||
<img class="pic-404__child mid" :src="img_404_cloud" alt="404"> | ||
<img class="pic-404__child right" :src="img_404_cloud" alt="404"> | ||
</div> | ||
<div class="bullshit"> | ||
<div class="bullshit__oops">OOPS!</div> | ||
<div class="bullshit__info">版权所有<a class="link-type" href="https://wallstreetcn.com" target='_blank'>华尔街见闻</a></div> | ||
<div class="bullshit__headline">{{ message }}</div> | ||
<div class="bullshit__info">请检查您输入的网址是否正确,请点击以下按钮返回主页或者发送错误报告</div> | ||
<a href="/" class="bullshit__return-home">返回首页</a> | ||
</div> | ||
<div> | ||
<div class="app-container"> | ||
<el-col :span="12"> | ||
<img :src="img_404" alt="404" class="img-style"> | ||
</el-col> | ||
<el-col :span="12"> | ||
<div style="margin-left: 100px;margin-top: 60px"> | ||
<h1 class="color-main">OOPS!</h1> | ||
<h2 style="color: #606266">很抱歉,页面它不小心迷路了!</h2> | ||
<div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确,请点击以下按钮返回主页或者发送错误报告</div> | ||
<el-button style="margin-top: 20px" type="primary" round @click="handleGoMain">返回首页</el-button> | ||
</div> | ||
</el-col> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import img_404 from '@/assets/images/404.png' | ||
import img_404_cloud from '@/assets/images/404_cloud.png' | ||
import img_404 from '@/assets/images/gif_404.gif'; | ||
export default { | ||
data() { | ||
return { | ||
img_404, | ||
img_404_cloud | ||
} | ||
}, | ||
computed: { | ||
message() { | ||
return '特朗普说这个页面你不能进......' | ||
} | ||
export default { | ||
name: 'wrongPage', | ||
data() { | ||
return { | ||
img_404 | ||
} | ||
}, | ||
methods: { | ||
handleGoMain() { | ||
this.$router.push({path: '/'}) | ||
} | ||
}, | ||
} | ||
} | ||
</script> | ||
|
||
<style rel="stylesheet/scss" lang="scss" scoped> | ||
.wscn-http404 { | ||
position: relative; | ||
width: 1200px; | ||
margin: 20px auto 60px; | ||
padding: 0 100px; | ||
overflow: hidden; | ||
.pic-404 { | ||
position: relative; | ||
float: left; | ||
width: 600px; | ||
padding: 150px 0; | ||
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; | ||
} | ||
} | ||
} | ||
<style scoped> | ||
.app-container { | ||
width: 80%; | ||
margin: 120px auto; | ||
} | ||
.bullshit { | ||
position: relative; | ||
float: left; | ||
width: 300px; | ||
padding: 150px 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: #1482f0; | ||
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; | ||
} | ||
} | ||
} | ||
} | ||
.img-style { | ||
width: auto; | ||
height: auto; | ||
max-width: 100%; | ||
max-height: 100%; | ||
} | ||
</style> |