Skip to content

M
marketing
Commit f3c0f334 by zhangmeng
Options

增加错误页面

parent fb0a7011
Showing with 844 additions and 56 deletions
dist/index.html
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=./static/img/favicon.ico><title>GIC后台</title><link rel=stylesheet type=text/css href=static/css/iconfont.css><link rel=stylesheet type=text/css href=static/css/common.css><link href=/marketing/static/css/app.39949cedc5b9321df77dd5c5b5387904.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/marketing/static/js/manifest.0a85049e489e85ac5f0a.js></script><script type=text/javascript src=/marketing/static/js/vendor.da716d11024428d6687c.js></script><script type=text/javascript src=/marketing/static/js/app.bcb64cf18c8e84da29b7.js></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=./static/img/favicon.ico><title>GIC后台</title><link rel=stylesheet type=text/css href=static/css/iconfont.css><link rel=stylesheet type=text/css href=static/css/common.css><link href=/marketing/static/css/app.caedf67985e9c730a9b2ae33e3b5a953.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/marketing/static/js/manifest.0a85049e489e85ac5f0a.js></script><script type=text/javascript src=/marketing/static/js/vendor.da716d11024428d6687c.js></script><script type=text/javascript src=/marketing/static/js/app.4d5612a16bd51659e0e9.js></script></body></html>
\ No newline at end of file
dist/static/js/app.4d5612a16bd51659e0e9.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.bcb64cf18c8e84da29b7.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/img/error_403.svg 0 → 100755
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 335" style="enable-background:new 0 0 400 335;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FAFCFF;}
.st1{fill:#DBE5F1;}
.st2{fill:#DEE7F4;}
.st3{fill:#B9C7DB;}
.st4{fill:#FFFFFF;}
.st5{fill:none;stroke:#B9C7DB;stroke-width:4;stroke-miterlimit:10;}
.st6{fill:none;stroke:#B6C7D8;stroke-miterlimit:10;}
</style>
<path class="st5" d="M274.5,241.3c-5.3-5.3-4.4,4.4-6.7,6.7c-3.1,3.1-6.3,6-9.7,8.6H125.2c-3.4-2.7-6.6-5.6-9.7-8.7
c-28.4-28.5-38.6-70.5-26.6-109l-10.5-10.6c-5.3-5.3-5.3-13.8,0-19.2c5.2-5.3,13.7-5.3,19-0.1c0,0,0,0,0.1,0.1l6.6,6.8
c3.1,3.2,8.2,3.2,11.4,0l0,0c3.2-3.2,3.2-8.3,0-11.5L103.1,92c-3.2-3.2-3.2-8.3,0-11.5c3.1-3.2,8.2-3.2,11.4,0l0,0l17.2,17.2
c-0.9,3.7,0.9,7.6,4.4,9.3c3.5,1.7,7.7,0.6,9.9-2.5c2.3-3.1,2.1-7.4-0.5-10.3c-3.3-3.8-6.5-7.2-6.5-7.2l-7.3-7.4
c34.8-21.3,82.6-21.7,117.2,0c34.5,21.7,53.9,61.2,50,101.9l15.4,15.6c3.2,3.2,3.2,8.3,0,11.5c-3.1,3.2-8.2,3.2-11.4,0l0,0
l-15.1-15.3c-3.1-3.2-8.2-3.2-11.4,0l0,0c-3.2,3.2-3.2,8.3,0,11.5l17.1,17.2c5.2,5.3,5.2,13.8,0,19.1
C288.4,246.6,279.9,246.6,274.5,241.3C274.6,241.3,274.6,241.3,274.5,241.3L274.5,241.3z"/>
<path class="st3" d="M86.6,71.4c0,4.7,3.8,8.5,8.5,8.5c1.5,0,3-0.4,4.3-1.1c4.1-2.3,5.5-7.5,3.1-11.6c-1.5-2.6-4.3-4.3-7.4-4.3
C90.4,62.9,86.6,66.7,86.6,71.4"/>
<path class="st3" d="M216.4,145.4h24.3l-7.4,17.9c2.6,1.8,4.5,3.8,5.8,6c1.2,2.2,1.9,4.8,1.9,7.8c0,4.6-1.6,8.4-4.8,11.2
c-3.2,2.9-7.3,4.3-12.3,4.3c-2.5,0-5.1-0.4-7.5-1.1v-13.1c2,0.9,3.9,1.4,5.5,1.4s2.9-0.5,3.7-1.4c0.9-1,1.3-2.3,1.3-4.1
c0-1.9-0.8-3.4-2.4-4.6c-1.6-1.2-3.7-1.7-6.4-1.7l3.4-9.1h-5.1V145.4L216.4,145.4z M207.5,181.6c0,1.5-0.3,3-0.8,4.3
s-1.3,2.5-2.3,3.5s-2.2,1.8-3.4,2.3c-1.3,0.6-2.8,0.9-4.3,0.9h-9.6c-1.5,0-2.9-0.3-4.3-0.9c-1.3-0.6-2.5-1.3-3.4-2.3
c-0.4-0.4-0.8-0.9-1.2-1.4l11.7-17.3v6c0,0.6,0.2,1.1,0.6,1.4c0.4,0.4,0.8,0.6,1.4,0.6c1.1,0,2-0.8,2-1.9v-0.1v-11.9l10.9-16.1
c1.8,2,2.8,4.6,2.7,7.3L207.5,181.6L207.5,181.6L207.5,181.6z M177.1,185.9c-0.6-1.4-0.9-2.8-0.8-4.3V156c0-1.5,0.3-3,0.8-4.3
s1.3-2.5,2.3-3.5s2.2-1.8,3.4-2.3c1.3-0.6,2.8-0.9,4.3-0.9h9.6c1.5,0,2.9,0.3,4.3,0.9c1.3,0.5,2.4,1.3,3.4,2.3l-10.5,15.4v-2.7
c0-0.5-0.2-1.1-0.6-1.4c-0.4-0.4-0.9-0.6-1.4-0.6c-1.1,0-2,0.8-2,1.9v0.1v8.6l-12.1,17.9C177.5,186.9,177.3,186.4,177.1,185.9
L177.1,185.9z M243.8,192.7c3.5-7.4,5.3-15.5,5.3-23.7c0-30.5-24.4-55.2-54.6-55.2s-54.6,24.7-54.6,55.2c0,0.4,0,0.8,0,1.1
l19.6-24.6h11.4L154,171.3h5.5v-6.5l11.7-18.5v46.8h-11.7v-9.8h-17.8c5.1,19.2,20.1,34.3,39.2,39.2c-1.2,3.1-4.8,10.7-10.7,12
c-7.3,1.7,19.9,0.4,39.4-12.5c14.9-4.4,27.2-15,33.9-28.9L243.8,192.7L243.8,192.7z"/>
<path class="st4" d="M238.9,154.3l-24.4,35.4l0.5,0.3l24.4-35.4L238.9,154.3z"/>
<path class="st3" d="M266.2,66.6h8c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.4-0.1,0.7-0.4,1c-0.2,0.3-0.6,0.4-0.9,0.4h-8
c-0.4,0-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.4,0-1.9C265.5,66.7,265.8,66.6,266.2,66.6 M116.5,201.9c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
s8-3.6,8-8.1S120.9,201.9,116.5,201.9L116.5,201.9z M121.4,212.1c-0.8,2-2.8,3.3-4.9,3.3c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.1,3.3-5
c2-0.8,4.3-0.4,5.8,1.2C121.8,207.7,122.2,210,121.4,212.1L121.4,212.1z M191.3,78.7c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
c2.1,0,4.2-0.9,5.7-2.4s2.3-3.6,2.3-5.7C199.3,82.4,195.7,78.7,191.3,78.7z M196.3,88.9c-0.8,2-2.8,3.3-4.9,3.3
c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2C196.6,84.6,197.1,86.9,196.3,88.9L196.3,88.9z M270.2,162.6
c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1s8-3.6,8-8.1C278.2,166.3,274.6,162.6,270.2,162.6z M275.1,172.8c-0.8,2-2.8,3.3-4.9,3.3
c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2S275.9,170.8,275.1,172.8z M230.1,31.4c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
c2.1,0,4.2-0.9,5.7-2.4s2.3-3.6,2.3-5.7C238.1,35,234.5,31.4,230.1,31.4z M235,41.6c-0.8,2-2.8,3.3-4.9,3.3c-3,0-5.3-2.4-5.3-5.4
c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2C235.4,37.2,235.8,39.5,235,41.6z"/>
<path class="st3" d="M163.2,45.9h8.2c0.4,0,0.7,0.1,1,0.4c0.5,0.5,0.5,1.3,0,1.9l0,0c-0.3,0.3-0.6,0.4-1,0.4h-8.2
c-0.4,0-0.7-0.1-1-0.4c-0.5-0.5-0.5-1.3,0-1.9l0,0C162.4,46.1,162.8,45.9,163.2,45.9 M271.7,63.5v8c0,0.4-0.1,0.7-0.4,0.9
c-0.3,0.3-0.6,0.4-1,0.4c-0.7,0-1.4-0.6-1.4-1.3l0,0v-8c0-0.4,0.1-0.7,0.4-0.9c0.5-0.5,1.4-0.5,1.9,0
C271.6,62.8,271.7,63.2,271.7,63.5"/>
<path class="st3" d="M107.4,154.8h8.2c0.4,0,0.7,0.1,1,0.4c0.3,0.2,0.4,0.6,0.4,0.9c0,0.7-0.6,1.3-1.4,1.3h-8.2
c-0.5,0-0.9-0.3-1.2-0.7c-0.2-0.4-0.2-0.9,0-1.3C106.4,155.1,106.9,154.8,107.4,154.8 M169,42.7v8c0,0.4-0.1,0.7-0.4,0.9
c-0.5,0.5-1.4,0.5-2,0c-0.2-0.2-0.4-0.6-0.4-0.9v-8c0-0.4,0.1-0.7,0.4-0.9c0.5-0.5,1.4-0.5,1.9,0C168.8,42,169,42.3,169,42.7"/>
<path class="st3" d="M230.9,110.3h8.1c0.7,0,1.3,0.6,1.3,1.4c0,0.7-0.6,1.3-1.3,1.4h-8.1c-0.8,0-1.4-0.6-1.4-1.4
c0-0.4,0.1-0.7,0.4-1C230.2,110.4,230.6,110.3,230.9,110.3"/>
<path class="st3" d="M114.6,163.8v8.2c0,0.4-0.1,0.7-0.4,1c-0.5,0.5-1.4,0.5-1.9,0c-0.3-0.3-0.4-0.6-0.4-1v-8.2c0-0.4,0.1-0.7,0.4-1
c0.5-0.5,1.4-0.5,1.9,0l0,0C114.4,163.1,114.6,163.4,114.6,163.8"/>
<path class="st1" d="M126,272.7h60.4c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.4H126c-0.7,0-1.3-0.6-1.3-1.3
C124.7,273.3,125.3,272.7,126,272.7"/>
<path class="st1" d="M218.6,272.7h34.9c0.7,0,1.3,0.6,1.3,1.3c0,0.7-0.6,1.3-1.3,1.3h-34.9c-0.7,0-1.3-0.6-1.4-1.3
c0-0.4,0.1-0.7,0.4-1C217.9,272.9,218.2,272.7,218.6,272.7"/>
<path class="st1" d="M158.2,282.2h131.5c0.7,0,1.3,0.6,1.4,1.3c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H158.2
c-0.7,0-1.3-0.6-1.3-1.3l0,0C156.9,282.8,157.5,282.2,158.2,282.2"/>
<path class="st1" d="M93.8,282.2h34.9c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.4l0,0H93.8c-0.7,0-1.3-0.6-1.4-1.3
c0-0.4,0.1-0.7,0.4-1C93.1,282.3,93.5,282.2,93.8,282.2"/>
<path class="st1" d="M197.1,272.7h8.1c0.7,0,1.3,0.6,1.3,1.3c0,0.7-0.6,1.3-1.3,1.3h-8.1c-0.7,0.1-1.4-0.5-1.4-1.3
c-0.1-0.7,0.5-1.4,1.3-1.4C197,272.7,197.1,272.7,197.1,272.7"/>
<path class="st1" d="M284.4,264.6h8.1c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.3h-8.1c-0.7,0-1.3-0.6-1.3-1.3
C283,265.3,283.6,264.6,284.4,264.6"/>
<path class="st1" d="M99.2,264.6h171.7c0.4,0,0.7,0.1,0.9,0.4c0.4,0.4,0.5,1,0.3,1.5c-0.2,0.5-0.7,0.8-1.2,0.8H99.1
c-0.7,0-1.3-0.6-1.3-1.3C97.8,265.3,98.4,264.6,99.2,264.6"/>
<path class="st3" d="M235,95.8v8.1c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3v-8.1c0-0.7,0.6-1.3,1.3-1.4C234.4,94.4,235,95,235,95.8"
/>
</svg>
src/router/routes.js
import Layout from '@/components/layout'
import page401 from '@/views/error/401'
import page403 from '@/views/error/403'
import page404 from '@/views/error/404'
import page500 from '@/views/error/500'
import test from '@/test/storeInput'
//微信营销
......@@ -43,6 +47,21 @@ export default [
]
},
{
path: '/401',
name: '未授权',
component: page401
},
{
path: '/403',
name: '禁止访问',
component: page403
},
{
path: '/500',
name: '系统错误',
component: page500
},
{
path: '*',
name: '未知领域',
component: page404
......
src/service/api/index.js
......@@ -3,7 +3,9 @@ import axios from 'axios'
import config from '@/config'
import { log } from '@/utils'
import qs from 'qs'
import Router from 'vue-router'
const router = new Router();
// 加载最小时间
const MINI_TIME = 300
......@@ -53,6 +55,7 @@ function handlerErr(code,message = '请求错误') {
switch (code) {
case 404:
message = '404,错误请求'
router.push('/404')
break
case 401:
window.location.href = config.api+'/gic-web/#/'
......@@ -60,12 +63,14 @@ function handlerErr(code,message = '请求错误') {
break
case 403:
message = '禁止访问'
router.push('/403')
break
case 408:
message = '请求超时'
break
case 500:
message = '服务器内部错误'
router.push('/500')
break
case 501:
message = '功能未实现'
......
src/views/error/401.vue
......@@ -10,9 +10,9 @@
<ul class="list-unstyled">
<li>或者你可以去:</li>
<li class="link-type">
<router-link to="/index">回首页</router-link>
<router-link to="/report/#/memberSummary">回首页</router-link>
</li>
<li class="link-type"><router-link to="/index">回首页</router-link></li>
<li class="link-type"><router-link to="/report/#/memberSummary">回首页</router-link></li>
<li><a @click.prevent="dialogVisible=true" href="#">点我看图</a></li>
</ul>
</el-col>
......@@ -27,7 +27,7 @@
</template>
<script>
import errGif from '@/assets/401_images/401.gif'
import errGif from '@/assets/img/401.gif'
export default {
name: 'page401',
......
src/views/error/403.vue 0 → 100755
<template>
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="img_403" alt="403">
</div>
<div class="bullshit">
<!-- <div class="bullshit__oops">403</div> -->
<div class="bullshit__headline">{{ message }}</div>
<a href="/report/#/memberSummary" class="bullshit__return-home">返回首页</a>
</div>
</div>
</div>
</template>
<script>
import img_403 from '@/assets/img/error_403.svg'
export default {
name: 'page403',
data() {
return {
img_403
}
},
computed: {
message() {
return '抱歉，你无权访问该页面'
}
}
}
</script>
<style 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 152px 150px 0;
text-align: right;
overflow: hidden;
&__parent {
width: 100%;
max-width: 430px;
}
&__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: 150px 0;
overflow: hidden;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
height: 360px;
&__oops {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;*/
}
&__return-home {
display: inline-block;
height: 32px;
line-height: 32px;
font-weight: 400;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
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>
src/views/error/404.vue 100644 → 100755
......@@ -3,17 +3,10 @@
<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__oops">404</div> -->
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
<a href="/report/#/memberSummary" class="bullshit__return-home">返回首页</a>
</div>
</div>
......@@ -21,26 +14,27 @@
</template>
<script>
import img_404 from '@/assets/img/404.png'
import img_404_cloud from '@/assets/img/404_cloud.png'
import img_404 from '@/assets/img/error_404.svg'
export default {
name: 'page404',
data() {
return {
img_404,
img_404_cloud
img_404
}
},
computed: {
message() {
return '访问错误......'
return '抱歉，你访问的页面不存在'
}
},
mounted(){
console.log(this.$route.path)
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
<style lang="scss" scoped>
.wscn-http404 {
position: relative;
width: 1200px;
......@@ -51,10 +45,12 @@ export default {
position: relative;
float: left;
width: 600px;
padding: 150px 0;
padding: 150px 152px 150px 0;
text-align: right;
overflow: hidden;
&__parent {
width: 100%;
max-width: 430px;
}
&__child {
position: absolute;
......@@ -165,56 +161,56 @@ export default {
width: 300px;
padding: 150px 0;
overflow: hidden;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
height: 360px;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
font-size: 20px;
line-height: 24px;
color: #1482f0;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
line-height: 28px;
margin-bottom: 16px;
/*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;
animation-fill-mode: forwards;*/
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
display: inline-block;
height: 32px;
line-height: 32px;
font-weight: 400;
text-align: center;
color: #ffffff;
opacity: 0;
-ms-touch-action: manipulation;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 0 15px;
font-size: 14px;
line-height: 36px;
border-radius: 4px;
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
cursor: pointer;
animation-name: slideUp;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-fill-mode: forwards;*/
}
@keyframes slideUp {
0% {
......
src/views/error/500.vue 0 → 100755
<template>
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="img_500" alt="500">
</div>
<div class="bullshit">
<!-- <div class="bullshit__oops">500</div> -->
<div class="bullshit__headline">{{ message }}</div>
<a href="/report/#/memberSummary" class="bullshit__return-home">返回首页</a>
</div>
</div>
</div>
</template>
<script>
import img_500 from '@/assets/img/error_500.svg'
export default {
name: 'page500',
data() {
return {
img_500
}
},
computed: {
message() {
return '抱歉，服务器出错了'
}
}
}
</script>
<style 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 152px 150px 0;
text-align: right;
overflow: hidden;
&__parent {
width: 100%;
max-width: 430px;
}
&__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: 150px 0;
overflow: hidden;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
height: 360px;
&__oops {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;*/
}
&__return-home {
display: inline-block;
height: 32px;
line-height: 32px;
font-weight: 400;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
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>
src/views/error/index.vue 0 → 100755
<template>
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="imgSrc" alt="404">
</div>
<div class="bullshit">
<!-- <div class="bullshit__oops">404</div> -->
<div class="bullshit__headline">{{ message }}</div>
<a href="report/#/memberSummary" class="bullshit__return-home">返回首页</a>
</div>
</div>
</div>
</template>
<script>
import img_403 from '@/assets/403_images/error_403.svg';
import img_404 from '@/assets/404_images/error_404.svg';
import img_500 from '@/assets/500_images/error_500.svg'
export default {
name: 'errpage',
data() {
return {
imgSrc: '',
message: '',
srcList: {
403: img_403,
404: img_404,
500: img_500
},
msgList: {
403: '抱歉，你无权访问该页面',
404: '抱歉，你访问的页面不存在',
500: '抱歉，服务器出错了'
}
}
},
mounted(){
var that = this;
var path = that.$route.path.split('/')[1];
that.imgSrc = that.srcList[path];
that.message = that.msgList[path];
}
}
</script>
<style 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 152px 150px 0;
text-align: right;
overflow: hidden;
&__parent {
width: 100%;
max-width: 430px;
}
&__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: 150px 0;
overflow: hidden;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
height: 360px;
&__oops {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;*/
}
&__return-home {
display: inline-block;
height: 32px;
line-height: 32px;
font-weight: 400;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
cursor: pointer;
/*animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;*/
&:hover {
color: #fff;
background-color: #40a9ff;
border-color: #40a9ff;
}
&:active {
background: #096dd9;
border-color: #096dd9;
color: #fff;
}
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment