Skip to content

Commit 1e90bc5

Browse files
PanJiaChenPanJiaChen
committed
add error page
1 parent 6eca8e4 commit 1e90bc5

File tree

6 files changed

+233
-8
lines changed

6 files changed

+233
-8
lines changed

‎src/assets/404.png‎

95.8 KB
Loading

‎src/assets/404_cloud.png‎

4.65 KB
Loading

‎src/router/index.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import Layout from '../views/layout/Layout';
77
// dashboard
88
// import dashboard from '../views/dashboard/index';
99
const dashboard = resolve => require(['../views/dashboard/index'], resolve);
10-
/* error*/
10+
11+
/* error page*/
1112
const Err404 = resolve => require(['../views/error/404'], resolve);
1213
const Err401 = resolve => require(['../views/error/401'], resolve);
14+
1315
/* login*/
1416
import Login from '../views/login/';
1517
import authRedirect from '../views/login/authredirect';
@@ -37,6 +39,7 @@ const MixChart = resolve => require(['../views/charts/mixchart'], resolve);
3739
const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
3840

3941

42+
4043
/* admin*/
4144
// const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve);
4245
// const QuicklyCreateUser = resolve => require(['../views/admin/quicklycreate'], resolve);
@@ -98,6 +101,17 @@ export default new Router({
98101
{ path: 'mixchart', component: MixChart, name: '混合图表' }
99102
]
100103
},
104+
{
105+
path: '/errorpage',
106+
component: Layout,
107+
redirect: 'noredirect',
108+
name: '错误页面',
109+
icon: 'tubiaoleixingzhengchang',
110+
children: [
111+
{ path: '401', component: Err401, name: '401' },
112+
{ path: '404', component: Err404, name: '404' }
113+
]
114+
},
101115
{
102116
path: '/excel',
103117
component: Layout,

‎src/views/error/401.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<el-row>
55
<el-col :span="12">
66
<h1 class="text-jumbo text-ginormous">Oops!</h1>
7+
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
78
<h2>你没有权限去该页面</h2>
89
<h6>如有不满请联系你领导</h6>
910
<ul class="list-unstyled">

‎src/views/error/404.vue‎

Lines changed: 215 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,217 @@
11
<template>
2-
<div>404</div>
2+
<div style="background:#f0f2f5;margin-top: -20px;">
3+
<div class="wscn-http404">
4+
<div class="pic-404">
5+
<img class="pic-404__parent" src="../../assets/404.png" alt="404">
6+
<img class="pic-404__child left" src="../../assets/404_cloud.png" alt="404">
7+
<img class="pic-404__child mid" src="../../assets/404_cloud.png" alt="404">
8+
<img class="pic-404__child right" src="../../assets/404_cloud.png" alt="404">
9+
</div>
10+
<div class="bullshit">
11+
<div class="bullshit__oops">OOPS!</div>
12+
<div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
13+
<div class="bullshit__headline">{{ message }}</div>
14+
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
15+
<a href="/" class="bullshit__return-home">返回首页</a>
16+
</div>
17+
</div>
18+
</div>
319
</template>
4-
5-
6-
7-
20+
<script>
21+
export default {
22+
computed: {
23+
message() {
24+
return '特朗普说这个页面你不能进......'
25+
}
26+
}
27+
}
28+
</script>
29+
<style rel="stylesheet/scss" lang="scss" scoped>
30+
.wscn-http404 {
31+
position: relative;
32+
width: 1200px;
33+
margin: 20px auto 60px;
34+
padding: 0 100px;
35+
overflow: hidden;
36+
.pic-404 {
37+
position: relative;
38+
float: left;
39+
width: 600px;
40+
padding: 150px 0;
41+
overflow: hidden;
42+
&__parent {
43+
width: 100%;
44+
}
45+
&__child {
46+
position: absolute;
47+
&.left {
48+
width: 80px;
49+
top: 17px;
50+
left: 220px;
51+
opacity: 0;
52+
animation-name: cloudLeft;
53+
animation-duration: 2s;
54+
animation-timing-function: linear;
55+
animation-fill-mode: forwards;
56+
animation-delay: 1s;
57+
}
58+
&.mid {
59+
width: 46px;
60+
top: 10px;
61+
left: 420px;
62+
opacity: 0;
63+
animation-name: cloudMid;
64+
animation-duration: 2s;
65+
animation-timing-function: linear;
66+
animation-fill-mode: forwards;
67+
animation-delay: 1.2s;
68+
}
69+
&.right {
70+
width: 62px;
71+
top: 100px;
72+
left: 500px;
73+
opacity: 0;
74+
animation-name: cloudRight;
75+
animation-duration: 2s;
76+
animation-timing-function: linear;
77+
animation-fill-mode: forwards;
78+
animation-delay: 1s;
79+
}
80+
@keyframes cloudLeft {
81+
0% {
82+
top: 17px;
83+
left: 220px;
84+
opacity: 0;
85+
}
86+
20% {
87+
top: 33px;
88+
left: 188px;
89+
opacity: 1;
90+
}
91+
80% {
92+
top: 81px;
93+
left: 92px;
94+
opacity: 1;
95+
}
96+
100% {
97+
top: 97px;
98+
left: 60px;
99+
opacity: 0;
100+
}
101+
}
102+
@keyframes cloudMid {
103+
0% {
104+
top: 10px;
105+
left: 420px;
106+
opacity: 0;
107+
}
108+
20% {
109+
top: 40px;
110+
left: 360px;
111+
opacity: 1;
112+
}
113+
70% {
114+
top: 130px;
115+
left: 180px;
116+
opacity: 1;
117+
}
118+
100% {
119+
top: 160px;
120+
left: 120px;
121+
opacity: 0;
122+
}
123+
}
124+
@keyframes cloudRight {
125+
0% {
126+
top: 100px;
127+
left: 500px;
128+
opacity: 0;
129+
}
130+
20% {
131+
top: 120px;
132+
left: 460px;
133+
opacity: 1;
134+
}
135+
80% {
136+
top: 180px;
137+
left: 340px;
138+
opacity: 1;
139+
}
140+
100% {
141+
top: 200px;
142+
left: 300px;
143+
opacity: 0;
144+
}
145+
}
146+
}
147+
}
148+
.bullshit {
149+
position: relative;
150+
float: left;
151+
width: 300px;
152+
padding: 150px 0;
153+
overflow: hidden;
154+
&__oops {
155+
font-size: 32px;
156+
font-weight: bold;
157+
line-height: 40px;
158+
color: #1482f0;
159+
opacity: 0;
160+
margin-bottom: 20px;
161+
animation-name: slideUp;
162+
animation-duration: 0.5s;
163+
animation-fill-mode: forwards;
164+
}
165+
&__headline {
166+
font-size: 20px;
167+
line-height: 24px;
168+
color: #1482f0;
169+
opacity: 0;
170+
margin-bottom: 10px;
171+
animation-name: slideUp;
172+
animation-duration: 0.5s;
173+
animation-delay: 0.1s;
174+
animation-fill-mode: forwards;
175+
}
176+
&__info {
177+
font-size: 13px;
178+
line-height: 21px;
179+
color: grey;
180+
opacity: 0;
181+
margin-bottom: 30px;
182+
animation-name: slideUp;
183+
animation-duration: 0.5s;
184+
animation-delay: 0.2s;
185+
animation-fill-mode: forwards;
186+
}
187+
&__return-home {
188+
display: block;
189+
float: left;
190+
width: 110px;
191+
height: 36px;
192+
background: #1482f0;
193+
border-radius: 100px;
194+
text-align: center;
195+
color: #ffffff;
196+
opacity: 0;
197+
font-size: 14px;
198+
line-height: 36px;
199+
cursor: pointer;
200+
animation-name: slideUp;
201+
animation-duration: 0.5s;
202+
animation-delay: 0.3s;
203+
animation-fill-mode: forwards;
204+
}
205+
@keyframes slideUp {
206+
0% {
207+
transform: translateY(60px);
208+
opacity: 0;
209+
}
210+
100% {
211+
transform: translateY(0);
212+
opacity: 1;
213+
}
214+
}
215+
}
216+
}
217+
</style>

‎src/views/layout/Sidebar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{item.name}}
88
</template>
99
<router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden"
10-
class="title-link" :to="item.path+'/'+child.path + '#'+ +new Date()">
10+
class="title-link" :to="item.path+'/'+child.path">
1111
<el-menu-item :index="item.path+'/'+child.path">
1212
{{child.name}}
1313
</el-menu-item>
@@ -16,7 +16,7 @@
1616
<router-link v-if="item.noDropdown&&item.children.length>0" class="title-link"
1717
:to="item.path+'/'+item.children[0].path">
1818
<el-menu-item
19-
:index="item.path+'/'+item.children[0].path +'#'+ +new Date()">
19+
:index="item.path+'/'+item.children[0].path">
2020
<wscn-icon-svg :icon-class="item.icon||'geren1'"/>
2121
{{item.children[0].name}}
2222
</el-menu-item>

0 commit comments

Comments
 (0)