Added exception page

src/router/index.js

@@ -206,7 +206,7 @@ export const asyncRouterMap = [
       {
         path: '/exception/403',
         name: 'Exception403',
-        component: () => import('../views/result/Success'),
+        component: () => import(/* webpackChunkName: "fail" */ '../views/exception/403'),
         meta: { title: '403' }
       },
       {
@@ -215,7 +215,7 @@ export const asyncRouterMap = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "fail" */ '../views/result/Success'),
+        component: () => import(/* webpackChunkName: "fail" */ '../views/exception/404'),
         meta: { title: '404' }
       },
       {
@@ -224,7 +224,7 @@ export const asyncRouterMap = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "fail" */ '../views/result/Success'),
+        component: () => import(/* webpackChunkName: "fail" */ '../views/exception/500'),
         meta: { title: '500' }
       }
     ]

src/views/exception/403.vue

+<template>
+  <exception-page type="403" />
+</template>
+
+<script>
+  import ExceptionPage from './ExceptionPage'
+
+  export default {
+    components: {
+      ExceptionPage
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/exception/404.vue

+<template>
+  <exception-page type="404" />
+</template>
+
+<script>
+  import ExceptionPage from './ExceptionPage'
+
+  export default {
+    components: {
+      ExceptionPage
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/exception/500.vue

+<template>
+  <exception-page type="500" />
+</template>
+
+<script>
+  import ExceptionPage from './ExceptionPage'
+
+  export default {
+    components: {
+      ExceptionPage
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/exception/ExceptionPage.vue

+<template>
+  <div class="exception">
+    <div class="img">
+      <img :src="config[type].img"/>
+    </div>
+    <div class="content">
+      <h1>{{config[type].title}}</h1>
+      <div class="desc">{{config[type].desc}}</div>
+      <div class="action">
+        <a-button type="primary">返回首页</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import types from './type'
+
+  export default {
+    name: "Exception",
+    props: ['type'],
+    data() {
+      return {
+        config: types
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .exception {
+    min-height: 500px;
+    height: 80%;
+    align-items: center;
+    text-align: center;
+    margin-top: 150px;
+    .img {
+      display: inline-block;
+      padding-right: 52px;
+      zoom: 1;
+      img {
+        height: 360px;
+        max-width: 430px;
+      }
+    }
+    .content {
+      display: inline-block;
+      flex: auto;
+      h1 {
+        color: #434e59;
+        font-size: 72px;
+        font-weight: 600;
+        line-height: 72px;
+        margin-bottom: 24px;
+      }
+      .desc {
+        color: rgba(0, 0, 0, .45);
+        font-size: 20px;
+        line-height: 28px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+</style>
\ No newline at end of file

src/views/exception/type.js

+const types = {
+  403: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    title: '403',
+    desc: '抱歉，你无权访问该页面'
+  },
+  404: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    title: '404',
+    desc: '抱歉，你访问的页面不存在或仍在开发中'
+  },
+  500: {
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    title: '500',
+    desc: '抱歉，服务器出错了'
+  }
+}
+
+export default types
\ No newline at end of file