Update 401 Error Page
This commit is contained in:
Angelina Filippova
parent
0087e95141
commit
14cf2a460c
3 changed files with 45 additions and 94 deletions
|
|
@ -73,6 +73,12 @@ export default {
|
||||||
mediaProxyCache: 'MediaProxy Cache',
|
mediaProxyCache: 'MediaProxy Cache',
|
||||||
'emoji-packs': 'Emoji packs'
|
'emoji-packs': 'Emoji packs'
|
||||||
},
|
},
|
||||||
|
errLog: {
|
||||||
|
error401: 'Oops! 401 Error',
|
||||||
|
unauth: 'Unauthorized',
|
||||||
|
back: 'Back',
|
||||||
|
login: 'Login'
|
||||||
|
},
|
||||||
navbar: {
|
navbar: {
|
||||||
logOut: 'Log Out',
|
logOut: 'Log Out',
|
||||||
dashboard: 'Dashboard',
|
dashboard: 'Dashboard',
|
||||||
|
|
|
||||||
|
|
@ -22,8 +22,16 @@ label {
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-size: 62.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.4em;
|
||||||
|
}
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -171,32 +179,3 @@ code {
|
||||||
background: #d0d0d0;
|
background: #d0d0d0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-type,
|
|
||||||
.link-type:focus {
|
|
||||||
color: #337ab7;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: rgb(32, 160, 255);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-container {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//refine vue-multiselect plugin
|
|
||||||
.multiselect {
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multiselect--active {
|
|
||||||
z-index: 1000 !important;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,91 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="errPage-container">
|
<div class="error-page-container">
|
||||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
|
<div class="error-page">
|
||||||
<el-row>
|
<i class="el-icon-warning"/>
|
||||||
<el-col :span="12">
|
<h1 class="error-title">{{ $t('errLog.error401') }}</h1>
|
||||||
<h1 class="text-jumbo text-ginormous">Oops!</h1>
|
<h2 class="error-title">{{ $t('errLog.unauth') }}</h2>
|
||||||
gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
|
<div class="buttons-group">
|
||||||
<h2>你没有权限去该页面</h2>
|
<el-button @click="back">{{ $t('errLog.back') }}</el-button>
|
||||||
<h6>如有不满请联系你领导</h6>
|
<el-button type="primary" @click="login">{{ $t('errLog.login') }}</el-button>
|
||||||
<ul class="list-unstyled">
|
</div>
|
||||||
<li>或者你可以去:</li>
|
</div>
|
||||||
<li class="link-type">
|
|
||||||
<router-link to="/dashboard">回首页</router-link>
|
|
||||||
</li>
|
|
||||||
<li class="link-type"><a href="https://www.taobao.com/">随便看看</a></li>
|
|
||||||
<li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
|
|
||||||
</ul>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-dialog :visible.sync="dialogVisible" title="随便看">
|
|
||||||
<img :src="ewizardClap" class="pan-img">
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import errGif from '@/assets/401_images/401.gif'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Page401',
|
name: 'Page401',
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
errGif: errGif + '?' + +new Date(),
|
|
||||||
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
|
|
||||||
dialogVisible: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
back() {
|
back() {
|
||||||
if (this.$route.query.noGoBack) {
|
if (this.$route.query.noGoBack) {
|
||||||
this.$router.push({ path: '/dashboard' })
|
this.$router.push({ path: '/login' })
|
||||||
} else {
|
} else {
|
||||||
this.$router.go(-1)
|
this.$router.go(-1)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
login() {
|
||||||
|
this.$router.push({ path: '/login' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.errPage-container {
|
.error-page-container {
|
||||||
width: 800px;
|
min-height: 100%;
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
margin: 100px auto;
|
background-color: #2d3a4b;
|
||||||
.pan-back-btn {
|
overflow: hidden;
|
||||||
background: #008489;
|
.buttons-group {
|
||||||
color: #fff;
|
margin-top: 4em;
|
||||||
border: none!important;
|
|
||||||
}
|
}
|
||||||
.pan-gif {
|
.el-icon-warning {
|
||||||
|
font-size: 4.2em;
|
||||||
|
color: #eee;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
.pan-img {
|
.error-page {
|
||||||
display: block;
|
width: 45rem;
|
||||||
margin: 0 auto;
|
max-width: 100%;
|
||||||
width: 100%;
|
margin: 16rem auto;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.text-jumbo {
|
.error-title {
|
||||||
font-size: 60px;
|
color: #eee;
|
||||||
font-weight: 700;
|
|
||||||
color: #484848;
|
|
||||||
}
|
|
||||||
.list-unstyled {
|
|
||||||
font-size: 14px;
|
|
||||||
li {
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #008489;
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue