Hooke / muse-ui-test

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

add 手机端错误判断

Inline Side-by-side
Showing 3 changed files with 245 additions and 9 deletions
1 +// 判断访问终端
2 +function versions () {
3 + var u = navigator.userAgent;
4 + var android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
5 + var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
6 + return {
7 + android,
8 + ios
9 + }
10 +}
11 +
12 +export default {
13 + versions
14 +}
1 <template> 1 <template>
2 <!-- <div class="errPage-container"> --> 2 <!-- <div class="errPage-container"> -->
3 <mu-container> 3 <mu-container>
4 - <div class="errPage-container"> 4 + <div v-if="!show" 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> 5 <mu-row>
10 <mu-col span="6"> 6 <mu-col span="6">
11 <h1 class="text-jumbo text-ginormous">Oops!</h1> 7 <h1 class="text-jumbo text-ginormous">Oops!</h1>
...@@ -21,6 +17,19 @@ ...@@ -21,6 +17,19 @@
21 </mu-col> 17 </mu-col>
22 </mu-row> 18 </mu-row>
23 </div> 19 </div>
20 + <div v-else class="errPage-container" style="text-align: center;">
21 + <!-- <mu-button @click="back" color="primary">
22 + <mu-icon left value="chevron_left"></mu-icon>
23 + 返回
24 + </mu-button> -->
25 + <h1 class="text-jumbo text-ginormous">Oops!</h1>
26 + <h2>你没有权限去该页面</h2>
27 + <h6>如有不满请联系你领导</h6>
28 + <div class="">
29 + <p>或者你可以去: </p>
30 + <mu-button @click="goHome" color="primary">重新登陆</mu-button>
31 + </div>
32 + </div>
24 33
25 </mu-container> 34 </mu-container>
26 35
...@@ -31,17 +40,25 @@ ...@@ -31,17 +40,25 @@
31 </template> 40 </template>
32 <script> 41 <script>
33 import errGif from '../../assets/images/401.gif'; 42 import errGif from '../../assets/images/401.gif';
43 +import util from '../../assets/js/util';
44 +
34 export default { 45 export default {
35 name: 'Error401Page', 46 name: 'Error401Page',
36 data () { 47 data () {
37 return { 48 return {
38 errGif: errGif + '?' + +new Date(), 49 errGif: errGif + '?' + +new Date(),
39 ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646', 50 ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
40 - dialogVisible: false 51 + dialogVisible: false,
52 + show: false
41 } 53 }
42 }, 54 },
43 mounted () { 55 mounted () {
44 - $('body').css('background', '#FFFFFF') 56 + $('body').css('background', '#FFFFFF');
57 + if (util.versions().android || util.versions().ios) {
58 + this.show = true
59 + } else {
60 + this.show = false
61 + }
45 }, 62 },
46 methods: { 63 methods: {
47 back () { 64 back () {
......
1 <template> 1 <template>
2 <mu-container> 2 <mu-container>
3 - <div class="wscn-http404"> 3 + <div v-if="!show" class="wscn-http404">
4 <div class="pic-404"> 4 <div class="pic-404">
5 <img class="pic-404__parent" src="../../assets/images/404.png" alt="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"> 6 <img class="pic-404__child left" src="../../assets/images/404_cloud.png" alt="404">
...@@ -9,7 +9,14 @@ ...@@ -9,7 +9,14 @@
9 </div> 9 </div>
10 <div class="bullshit"> 10 <div class="bullshit">
11 <div class="bullshit__oops">OOPS!</div> 11 <div class="bullshit__oops">OOPS!</div>
12 - <!-- <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div> --> 12 + <div class="bullshit__headline">{{ message }}</div>
13 + <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
14 + <a @click="goHome()" class="bullshit__return-home">返回首页</a>
15 + </div>
16 + </div>
17 + <div v-else class="wscn-http4041">
18 + <div class="bullshit">
19 + <div class="bullshit__oops">OOPS!</div>
13 <div class="bullshit__headline">{{ message }}</div> 20 <div class="bullshit__headline">{{ message }}</div>
14 <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div> 21 <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
15 <a @click="goHome()" class="bullshit__return-home">返回首页</a> 22 <a @click="goHome()" class="bullshit__return-home">返回首页</a>
...@@ -19,10 +26,21 @@ ...@@ -19,10 +26,21 @@
19 26
20 </template> 27 </template>
21 <script> 28 <script>
29 +import util from '../../assets/js/util';
22 export default { 30 export default {
23 name: 'Error404Page', 31 name: 'Error404Page',
32 + data () {
33 + return {
34 + show: false
35 + }
36 + },
24 mounted () { 37 mounted () {
25 $('body').css('background', 'rgb(240, 242, 245)') 38 $('body').css('background', 'rgb(240, 242, 245)')
39 + if (util.versions().android || util.versions().ios) {
40 + this.show = true
41 + } else {
42 + this.show = false
43 + }
26 }, 44 },
27 computed: { 45 computed: {
28 message () { 46 message () {
...@@ -224,4 +242,191 @@ export default { ...@@ -224,4 +242,191 @@ export default {
224 } 242 }
225 } 243 }
226 } 244 }
245 + .wscn-http4041 {
246 + position: relative;
247 + // width: 1200px;
248 + margin: 20px auto 60px;
249 + padding: 0 30px;
250 + overflow: hidden;
251 + .pic-404 {
252 + position: relative;
253 + float: left;
254 + width: 600px;
255 + padding: 150px 0;
256 + overflow: hidden;
257 + &__parent {
258 + width: 100%;
259 + }
260 + &__child {
261 + position: absolute;
262 + &.left {
263 + width: 80px;
264 + top: 17px;
265 + left: 220px;
266 + opacity: 0;
267 + animation-name: cloudLeft;
268 + animation-duration: 2s;
269 + animation-timing-function: linear;
270 + animation-fill-mode: forwards;
271 + animation-delay: 1s;
272 + }
273 + &.mid {
274 + width: 46px;
275 + top: 10px;
276 + left: 420px;
277 + opacity: 0;
278 + animation-name: cloudMid;
279 + animation-duration: 2s;
280 + animation-timing-function: linear;
281 + animation-fill-mode: forwards;
282 + animation-delay: 1.2s;
283 + }
284 + &.right {
285 + width: 62px;
286 + top: 100px;
287 + left: 500px;
288 + opacity: 0;
289 + animation-name: cloudRight;
290 + animation-duration: 2s;
291 + animation-timing-function: linear;
292 + animation-fill-mode: forwards;
293 + animation-delay: 1s;
294 + }
295 + @keyframes cloudLeft {
296 + 0% {
297 + top: 17px;
298 + left: 220px;
299 + opacity: 0;
300 + }
301 + 20% {
302 + top: 33px;
303 + left: 188px;
304 + opacity: 1;
305 + }
306 + 80% {
307 + top: 81px;
308 + left: 92px;
309 + opacity: 1;
310 + }
311 + 100% {
312 + top: 97px;
313 + left: 60px;
314 + opacity: 0;
315 + }
316 + }
317 + @keyframes cloudMid {
318 + 0% {
319 + top: 10px;
320 + left: 420px;
321 + opacity: 0;
322 + }
323 + 20% {
324 + top: 40px;
325 + left: 360px;
326 + opacity: 1;
327 + }
328 + 70% {
329 + top: 130px;
330 + left: 180px;
331 + opacity: 1;
332 + }
333 + 100% {
334 + top: 160px;
335 + left: 120px;
336 + opacity: 0;
337 + }
338 + }
339 + @keyframes cloudRight {
340 + 0% {
341 + top: 100px;
342 + left: 500px;
343 + opacity: 0;
344 + }
345 + 20% {
346 + top: 120px;
347 + left: 460px;
348 + opacity: 1;
349 + }
350 + 80% {
351 + top: 180px;
352 + left: 340px;
353 + opacity: 1;
354 + }
355 + 100% {
356 + top: 200px;
357 + left: 300px;
358 + opacity: 0;
359 + }
360 + }
361 + }
362 + }
363 + .bullshit {
364 + position: relative;
365 + float: left;
366 + width: 300px;
367 + padding: 150px 0;
368 + overflow: hidden;
369 + &__oops {
370 + font-size: 32px;
371 + font-weight: bold;
372 + line-height: 40px;
373 + color: #1482f0;
374 + opacity: 0;
375 + margin-bottom: 20px;
376 + animation-name: slideUp;
377 + animation-duration: 0.5s;
378 + animation-fill-mode: forwards;
379 + }
380 + &__headline {
381 + font-size: 20px;
382 + line-height: 24px;
383 + color: #1482f0;
384 + opacity: 0;
385 + margin-bottom: 10px;
386 + animation-name: slideUp;
387 + animation-duration: 0.5s;
388 + animation-delay: 0.1s;
389 + animation-fill-mode: forwards;
390 + }
391 + &__info {
392 + font-size: 13px;
393 + line-height: 21px;
394 + color: grey;
395 + opacity: 0;
396 + margin-bottom: 30px;
397 + animation-name: slideUp;
398 + animation-duration: 0.5s;
399 + animation-delay: 0.2s;
400 + animation-fill-mode: forwards;
401 + }
402 + &__return-home {
403 + display: block;
404 + float: left;
405 + width: 110px;
406 + height: 36px;
407 + background: #1482f0;
408 + border-radius: 100px;
409 + text-align: center;
410 + color: #ffffff;
411 + opacity: 0;
412 + font-size: 14px;
413 + line-height: 36px;
414 + cursor: pointer;
415 + animation-name: slideUp;
416 + animation-duration: 0.5s;
417 + animation-delay: 0.3s;
418 + animation-fill-mode: forwards;
419 + }
420 + @keyframes slideUp {
421 + 0% {
422 + transform: translateY(60px);
423 + opacity: 0;
424 + }
425 + 100% {
426 + transform: translateY(0);
427 + opacity: 1;
428 + }
429 + }
430 + }
431 + }
227 </style> 432 </style>
......