Hooke / muse-ui-test

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8ffb6076 1 parent f7270881

add 错误处理页

Inline Side-by-side
Showing 10 changed files with 389 additions and 6 deletions
...@@ -30,12 +30,9 @@ axios.interceptors.response.use( ...@@ -30,12 +30,9 @@ axios.interceptors.response.use(
30 if (error.response) { 30 if (error.response) {
31 switch (error.response.status) { 31 switch (error.response.status) {
32 case 401: 32 case 401:
33 - if (window.location.hostname === 'localhost') { 33 + router.replace({
34 - window.location.href = '../login.html'; 34 + path: '/error401'
35 - } else { 35 + })
36 - let h = window.location.origin + '/' + _.split(window.location.pathname, '/', 2)[1] + '/login.html';
37 - window.location.href = error.response.data.hasOwnProperty('content') ? error.response.data.content : h;
38 - }
39 break; 36 break;
40 case 404: 37 case 404:
41 router.replace({ 38 router.replace({
......
...@@ -20,6 +20,20 @@ export default new Router({ ...@@ -20,6 +20,20 @@ export default new Router({
20 } 20 }
21 }, 21 },
22 { 22 {
23 + path: '/error',
24 + component: r => {
25 + require(['./views/error/404'], r)
26 + },
27 + name: '错误页面404'
28 + },
29 + {
30 + path: '/error401',
31 + component: r => {
32 + require(['./views/error/401'], r)
33 + },
34 + name: '错误页面401'
35 + },
36 + {
23 path: '/', 37 path: '/',
24 component: r => { 38 component: r => {
25 require(['./views/Home'], r) 39 require(['./views/Home'], r)
......
...@@ -35,6 +35,16 @@ ...@@ -35,6 +35,16 @@
35 <p v-if="side_show" style="margin-left: 10px;">牛讲师</p> 35 <p v-if="side_show" style="margin-left: 10px;">牛讲师</p>
36 </mu-button> 36 </mu-button>
37 <mu-list slot="content"> 37 <mu-list slot="content">
38 + <mu-list-item button @click="menuClick('404')">
39 + <mu-list-item-content>
40 + <mu-list-item-title>404</mu-list-item-title>
41 + </mu-list-item-content>
42 + </mu-list-item>
43 + <mu-list-item button @click="menuClick('401')">
44 + <mu-list-item-content>
45 + <mu-list-item-title>401</mu-list-item-title>
46 + </mu-list-item-content>
47 + </mu-list-item>
38 <mu-list-item button @click="menuClick('exit')"> 48 <mu-list-item button @click="menuClick('exit')">
39 <mu-list-item-content> 49 <mu-list-item-content>
40 <mu-list-item-title>退出</mu-list-item-title> 50 <mu-list-item-title>退出</mu-list-item-title>
...@@ -121,6 +131,12 @@ export default { ...@@ -121,6 +131,12 @@ export default {
121 menuClick (v) { 131 menuClick (v) {
122 // 下拉菜单项选中 132 // 下拉菜单项选中
123 this.menu_open = false; 133 this.menu_open = false;
134 + if (v === '404') {
135 + this.$router.push('/error')
136 + }
137 + if (v === '401') {
138 + this.$router.push('/error401')
139 + }
124 if (v === 'exit') { 140 if (v === 'exit') {
125 this.$router.push('/login') 141 this.$router.push('/login')
126 } 142 }
......
1 +<template>
2 + <!-- <div class="errPage-container"> -->
3 + <mu-container>
4 + <div class="errPage-container">
5 + <mu-button @click="back" color="primary">
6 + <mu-icon left value="chevron_left"></mu-icon>
7 + 返回
8 + </mu-button>
9 + <mu-row>
10 + <mu-col span="6">
11 + <h1 class="text-jumbo text-ginormous">Oops!</h1>
12 + <h2>你没有权限去该页面</h2>
13 + <h6>如有不满请联系你领导</h6>
14 + <div class="">
15 + <p>或者你可以去: </p>
16 + <mu-button @click="goHome" color="primary">重新登陆</mu-button>
17 + </div>
18 + </mu-col>
19 + <mu-col span="6">
20 + <img :src="errGif" width="313" height="428" alt="">
21 + </mu-col>
22 + </mu-row>
23 + </div>
24 +
25 + </mu-container>
26 +
27 + <!-- <el-dialog title="随便看" v-model="dialogVisible" size="large">
28 + <img class="pan-img" :src="ewizardClap">
29 + </el-dialog> -->
30 + <!-- </div> -->
31 +</template>
32 +<script>
33 +import errGif from '../../assets/images/401.gif';
34 +export default {
35 + name: 'Error401Page',
36 + data () {
37 + return {
38 + errGif: errGif + '?' + +new Date(),
39 + ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
40 + dialogVisible: false
41 + }
42 + },
43 + mounted () {
44 + $('body').css('background', '#FFFFFF')
45 + },
46 + methods: {
47 + back () {
48 + this.$router.go(-1)
49 + },
50 + goHome () {
51 + location.href = './#/login'
52 + }
53 + }
54 +};
55 +</script>
56 +
57 +<style lang="less">
58 + body {
59 + background: #ffffff;
60 + }
61 + .errPage-container {
62 + margin: 100px auto;
63 + background-color: white;
64 + .pan-back-btn {
65 + background: #20a0ff;
66 + color: #fff;
67 + }
68 + .pan-gif {
69 + margin: 0 auto;
70 + display: block;
71 + }
72 + .pan-img{
73 + display: block;
74 + margin: 0 auto;
75 + }
76 + .text-jumbo {
77 + font-size: 60px;
78 + font-weight: 700;
79 + color: #484848;
80 + }
81 + .list-unstyled {
82 + font-size: 14px;
83 + li {
84 + padding-bottom: 5px;
85 + list-style: none;
86 + }
87 + }
88 + }
89 +</style>
1 +<template>
2 + <mu-container>
3 + <div class="wscn-http404">
4 + <div class="pic-404">
5 + <img class="pic-404__parent" src="../../assets/images/404.png" alt="404">
6 + <img class="pic-404__child left" src="../../assets/images/404_cloud.png" alt="404">
7 + <img class="pic-404__child mid" src="../../assets/images/404_cloud.png" alt="404">
8 + <img class="pic-404__child right" src="../../assets/images/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 @click="goHome()" class="bullshit__return-home">返回首页</a>
16 + </div>
17 + </div>
18 + </mu-container>
19 +
20 +</template>
21 +<script>
22 +export default {
23 + name: 'Error404Page',
24 + mounted () {
25 + $('body').css('background', 'rgb(240, 242, 245)')
26 + },
27 + computed: {
28 + message () {
29 + return '这个页面你不能进......'
30 + }
31 + },
32 + methods: {
33 + goHome () {
34 + location.href = '/'
35 + }
36 + }
37 +}
38 +</script>
39 +<style lang="less" scoped>
40 + .wscn-http404 {
41 + position: relative;
42 + width: 1200px;
43 + margin: 20px auto 60px;
44 + padding: 0 100px;
45 + overflow: hidden;
46 + .pic-404 {
47 + position: relative;
48 + float: left;
49 + width: 600px;
50 + padding: 150px 0;
51 + overflow: hidden;
52 + &__parent {
53 + width: 100%;
54 + }
55 + &__child {
56 + position: absolute;
57 + &.left {
58 + width: 80px;
59 + top: 17px;
60 + left: 220px;
61 + opacity: 0;
62 + animation-name: cloudLeft;
63 + animation-duration: 2s;
64 + animation-timing-function: linear;
65 + animation-fill-mode: forwards;
66 + animation-delay: 1s;
67 + }
68 + &.mid {
69 + width: 46px;
70 + top: 10px;
71 + left: 420px;
72 + opacity: 0;
73 + animation-name: cloudMid;
74 + animation-duration: 2s;
75 + animation-timing-function: linear;
76 + animation-fill-mode: forwards;
77 + animation-delay: 1.2s;
78 + }
79 + &.right {
80 + width: 62px;
81 + top: 100px;
82 + left: 500px;
83 + opacity: 0;
84 + animation-name: cloudRight;
85 + animation-duration: 2s;
86 + animation-timing-function: linear;
87 + animation-fill-mode: forwards;
88 + animation-delay: 1s;
89 + }
90 + @keyframes cloudLeft {
91 + 0% {
92 + top: 17px;
93 + left: 220px;
94 + opacity: 0;
95 + }
96 + 20% {
97 + top: 33px;
98 + left: 188px;
99 + opacity: 1;
100 + }
101 + 80% {
102 + top: 81px;
103 + left: 92px;
104 + opacity: 1;
105 + }
106 + 100% {
107 + top: 97px;
108 + left: 60px;
109 + opacity: 0;
110 + }
111 + }
112 + @keyframes cloudMid {
113 + 0% {
114 + top: 10px;
115 + left: 420px;
116 + opacity: 0;
117 + }
118 + 20% {
119 + top: 40px;
120 + left: 360px;
121 + opacity: 1;
122 + }
123 + 70% {
124 + top: 130px;
125 + left: 180px;
126 + opacity: 1;
127 + }
128 + 100% {
129 + top: 160px;
130 + left: 120px;
131 + opacity: 0;
132 + }
133 + }
134 + @keyframes cloudRight {
135 + 0% {
136 + top: 100px;
137 + left: 500px;
138 + opacity: 0;
139 + }
140 + 20% {
141 + top: 120px;
142 + left: 460px;
143 + opacity: 1;
144 + }
145 + 80% {
146 + top: 180px;
147 + left: 340px;
148 + opacity: 1;
149 + }
150 + 100% {
151 + top: 200px;
152 + left: 300px;
153 + opacity: 0;
154 + }
155 + }
156 + }
157 + }
158 + .bullshit {
159 + position: relative;
160 + float: left;
161 + width: 300px;
162 + padding: 150px 0;
163 + overflow: hidden;
164 + &__oops {
165 + font-size: 32px;
166 + font-weight: bold;
167 + line-height: 40px;
168 + color: #1482f0;
169 + opacity: 0;
170 + margin-bottom: 20px;
171 + animation-name: slideUp;
172 + animation-duration: 0.5s;
173 + animation-fill-mode: forwards;
174 + }
175 + &__headline {
176 + font-size: 20px;
177 + line-height: 24px;
178 + color: #1482f0;
179 + opacity: 0;
180 + margin-bottom: 10px;
181 + animation-name: slideUp;
182 + animation-duration: 0.5s;
183 + animation-delay: 0.1s;
184 + animation-fill-mode: forwards;
185 + }
186 + &__info {
187 + font-size: 13px;
188 + line-height: 21px;
189 + color: grey;
190 + opacity: 0;
191 + margin-bottom: 30px;
192 + animation-name: slideUp;
193 + animation-duration: 0.5s;
194 + animation-delay: 0.2s;
195 + animation-fill-mode: forwards;
196 + }
197 + &__return-home {
198 + display: block;
199 + float: left;
200 + width: 110px;
201 + height: 36px;
202 + background: #1482f0;
203 + border-radius: 100px;
204 + text-align: center;
205 + color: #ffffff;
206 + opacity: 0;
207 + font-size: 14px;
208 + line-height: 36px;
209 + cursor: pointer;
210 + animation-name: slideUp;
211 + animation-duration: 0.5s;
212 + animation-delay: 0.3s;
213 + animation-fill-mode: forwards;
214 + }
215 + @keyframes slideUp {
216 + 0% {
217 + transform: translateY(60px);
218 + opacity: 0;
219 + }
220 + 100% {
221 + transform: translateY(0);
222 + opacity: 1;
223 + }
224 + }
225 + }
226 + }
227 +</style>
1 +<template lang="html">
2 + <div class="Absolute-Center" style="color: gray;">
3 + <img :src="bgImg" alt="">
4 + <div style="margin-top: 20px;">
5 + <span style="margin-right: 10px;">抱歉 ! 您访问的页面出错了</span>
6 + <router-link to="/">返回首页</router-link>
7 + </div>
8 + </div>
9 +</template>
10 +
11 +<script>
12 +export default {
13 + name: 'ErrorPage',
14 + data () {
15 + return {
16 + bgImg: require('../../assets/images/404_1.png')
17 + }
18 + }
19 +}
20 +</script>
21 +
22 +<style>
23 + body {
24 + background-color: white;
25 + }
26 +
27 + .Center-Container {
28 + position: relative;
29 + }
30 +
31 + .Absolute-Center {
32 + width: 50%;
33 + height: 50%;
34 + overflow: auto;
35 + margin: auto;
36 + position: absolute;
37 + top: 0; left: 0; bottom: 0; right: 0;
38 + text-align: center;
39 + }
40 +</style>