Update 401 Error Page

src/lang/en.js

@@ -73,6 +73,12 @@ export default {
     mediaProxyCache: 'MediaProxy Cache',
     'emoji-packs': 'Emoji packs'
   },
+  errLog: {
+    error401: 'Oops! 401 Error',
+    unauth: 'Unauthorized',
+    back: 'Back',
+    login: 'Login'
+  },
   navbar: {
     logOut: 'Log Out',
     dashboard: 'Dashboard',

src/styles/index.scss

@@ -22,8 +22,16 @@ label {
 html {
   height: 100%;
   box-sizing: border-box;
+  font-size: 62.5%;
 }
 
+h1 {
+  font-size: 3.2em;
+}
+
+h2 {
+  font-size: 2.4em;
+}
 #app {
   height: 100%;
 }
@@ -171,32 +179,3 @@ code {
     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;
-}

src/views/errorPage/401.vue

@@ -1,91 +1,57 @@
 <template>
-  <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
-    <el-row>
-      <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
-        gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
-        <h2>你没有权限去该页面</h2>
-        <h6>如有不满请联系你领导</h6>
-        <ul class="list-unstyled">
-          <li>或者你可以去:</li>
-          <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 class="error-page-container">
+    <div class="error-page">
+      <i class="el-icon-warning"/>
+      <h1 class="error-title">{{ $t('errLog.error401') }}</h1>
+      <h2 class="error-title">{{ $t('errLog.unauth') }}</h2>
+      <div class="buttons-group">
+        <el-button @click="back">{{ $t('errLog.back') }}</el-button>
+        <el-button type="primary" @click="login">{{ $t('errLog.login') }}</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import errGif from '@/assets/401_images/401.gif'
-
 export default {
   name: 'Page401',
-  data: function() {
-    return {
-      errGif: errGif + '?' + +new Date(),
-      ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
-      dialogVisible: false
-    }
-  },
   methods: {
     back() {
       if (this.$route.query.noGoBack) {
-        this.$router.push({ path: '/dashboard' })
+        this.$router.push({ path: '/login' })
       } else {
         this.$router.go(-1)
       }
+    },
+    login() {
+      this.$router.push({ path: '/login' })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .errPage-container {
-    width: 800px;
-    max-width: 100%;
-    margin: 100px auto;
-    .pan-back-btn {
-      background: #008489;
-      color: #fff;
-      border: none!important;
+  .error-page-container {
+    min-height: 100%;
+    width: 100%;
+    background-color: #2d3a4b;
+    overflow: hidden;
+    .buttons-group {
+      margin-top: 4em;
     }
-    .pan-gif {
+    .el-icon-warning {
+      font-size: 4.2em;
+      color: #eee;
       margin: 0 auto;
-      display: block;
     }
-    .pan-img {
-      display: block;
-      margin: 0 auto;
-      width: 100%;
+    .error-page {
+      width: 45rem;
+      max-width: 100%;
+      margin: 16rem auto;
+      text-align: center;
     }
-    .text-jumbo {
-      font-size: 60px;
-      font-weight: 700;
-      color: #484848;
-    }
-    .list-unstyled {
-      font-size: 14px;
-      li {
-        padding-bottom: 5px;
-      }
-      a {
-        color: #008489;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
+    .error-title {
+      color: #eee;
     }
   }
 </style>