update: 错误页面

src/components/layout/aside-menu.vue

@@ -46,6 +46,7 @@ export default {
 <style lang="scss" scoped>
 .aside-menu-box {
   flex-shrink: 0;
+  margin-right: 16px;
   padding: 8px 10px;
   width: 190px;
   height: calc(100vh - 60px);

src/router/index.js

@@ -430,11 +430,6 @@ export const constantRouterMap = [
                 },
 
     {
-        path: '/gic-error',
-        name: 'gic跳转失败页',
-        component: _import('errorPage', 'gic-error')
-    },
-    {
         path: '/403',
         name: '无权访问',
         component: errorPage
@@ -450,7 +445,12 @@ export const constantRouterMap = [
         component: errorPage
     }
     ]
-  }
+},
+{
+    path: '/gic-error',
+    name: 'gic跳转失败页',
+    component: _import('errorPage', 'gic-error')
+},
 ];
 export default new Router({
     // mode:'history',

src/views/errorPage/gic-error.vue

-<!--
- * @Descripttion: 当前组件信息
- * @version: 1.0.0
- * @Author: 无尘
- * @Date: 2019-10-28 09:32:04
- * @LastEditors: 无尘
- * @LastEditTime: 2020-07-20 09:49:55
- -->
 <template>
-  <div style="background:#f0f2f5;margin-top: -20px;height:100vh;">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" :src="img_404" alt="404" />
-      </div>
-      <div class="bullshit">
-        <!-- <div class="bullshit__oops">404</div> -->
-        <div class="bullshit__headline">{{ message }}</div>
-        <a :href="gicHost + '/gic-web/#/login?ishb=1'" class="bullshit__return-home" rel="noopener noreferrer">返回好办登录页</a>
-      </div>
-    </div>
+  <div class="error-page">
+    <!-- <img class="error-icon" src="@/assets/gic-error.png" alt="404" />
+    <div class="error-message">{{ message }}</div>
+    <el-button type="primary" @click="toLogin">返回好办登录页</el-button> -->
   </div>
 </template>
 
 <script>
-import img_404 from '@/assets/gic-error.png';
-
 export default {
   name: 'page404',
-  inject: ['layoutVm'],
   data() {
     return {
-      img_404,
       gicHost: '',
       message: ''
     };
   },
-  destroyed() {
-    this.layoutVm.$emit('command', 'showAside');
+  methods: {
+    toLogin() {
+      location.href = this.gicHost + '/gic-web/#/login?ishb=1';
+    }
   },
-  /* eslint-disable */
   mounted() {
-    this.layoutVm.$emit('command', 'hideAside');
-
     const errorCode = this.$route.query.errorCode;
     const message = {
       '1000': '系统异常', //传入的导购id错误、传入的企业微信id错误
@@ -48,8 +28,10 @@ export default {
       '1003': '系统异常，通过手机号查询失败',
       '1004': '企微应用未授权',
       '1005': '登录超时,请重新登录'
-    }
+    };
     this.message = message[errorCode] || '系统异常，请联系达摩管理员';
+    this.$message.error(this.message);
+    setTimeout(this.toLogin, 3000);
 
     const userInfos = JSON.parse(sessionStorage.getItem('userInfos') || '{}');
     this.gicHost = typeof userInfos.gicHost == 'string' ? userInfos.gicHost.replace(/\/$/, '') : '';
@@ -58,200 +40,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  margin: 20px auto 60px;
-  padding: 0 100px;
-  overflow: hidden;
-  .pic-404 {
-    position: relative;
-    width: 100%;
-    padding: 150px 0 0 ;
-    text-align: center;
-    overflow: hidden;
-    &__parent {
-      width: 148px;
-      max-width: 430px;
-    }
-    &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-    }
+.error-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background: #f2f3f5;
+  .error-icon {
+    width: 148px;
+    height: auto;
+    vertical-align: middle;
   }
-  .bullshit {
-    position: relative;
-    width: 100%;
-    padding: 46px 0;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    &__oops {
-      color: #434e59;
-      font-size: 72px;
-      font-weight: 600;
-      line-height: 72px;
-      margin-bottom: 24px;
-      /*animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;*/
-    }
-    &__headline {
-      color: #606266;
-      font-size: 14px;
-      line-height: 28px;
-      margin-bottom: 37px;
-      /*animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;*/
-    }
-
-    &__return-home {
-      display: inline-block;
-      height: 32px;
-      line-height: 32px;
-      font-weight: 400;
-      text-align: center;
-      -ms-touch-action: manipulation;
-      touch-action: manipulation;
-      background-image: none;
-      white-space: nowrap;
-      padding: 0 15px;
-      font-size: 14px;
-      border-radius: 4px;
-      border: 1px solid #2f54eb;
-      color: #fff;
-      background-color: #2f54eb;
-      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
-      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
-      cursor: pointer;
-      /*animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;*/
-      &:hover {
-        color: #fff;
-        background-color: #597ef7;
-        border-color: #597ef7;
-      }
-      &:active {
-        color: #fff;
-        background-color: #597ef7;
-        border-color: #597ef7;
-      }
-    }
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
+  .error-message {
+    margin: 60px 0 37px;
+    color: #606266;
+    font-size: 14px;
+    line-height: 28px;
   }
 }
 </style>