404页面修改

twalanfans · Nov 22, 2018 · 964f66d · 964f66d
1 parent 2e5753a
commit 964f66d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 216 deletions.
diff --git a/src/assets/images/gif_404.gif b/src/assets/images/gif_404.gif
diff --git a/src/views/404.vue b/src/views/404.vue
@@ -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>