新增错误页面401和404，以及其相关组件

Author: baimingxuan

src/assets/img/error-images/401.png

@@ -0,0 +1,91 @@
+.error-wrapper {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  .error-content {
+    .pic-error {
+      float: left;
+      width: 120%;
+      overflow: hidden;
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 30px 0;
+      overflow: hidden;
+      &-oops {
+        margin-bottom: 20px;
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: #409eff;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+      &-headline {
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #222;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+      &-info {
+        margin-bottom: 30px;
+        font-size: 13px;
+        line-height: 21px;
+        color: rgba(0, 0, 0, 0.65);
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.2s;
+        animation-fill-mode: forwards;
+      }
+      &-return-home {
+        display: block;
+        float: left;
+        width: 110px;
+        height: 36px;
+        font-size: 14px;
+        line-height: 36px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        background: #409eff;
+        border-radius: 100px;
+        opacity: 0;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+    }
+    @keyframes slideUp {
+      0% {
+        opacity: 0;
+        transform: translateY(60px);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+}

src/assets/img/error-images/404.png

@@ -21,8 +21,9 @@ export default new Router({
       hidden: true
     },
     {
-      path: '/404',
-      component: () => import('../views/404'),
+      path: 'page-404',
+      name: 'Page404',
+      component: () => import('../views/error-page/404'),
       hidden: true
     },
     {
@@ -260,6 +261,34 @@ export default new Router({
           }
         }
       ]
+    },
+    {
+      path: '/error-page',
+      name: 'ErrorPage',
+      component: Layout,
+      redirect: '/error-page/page-401',
+      meta: {
+        title: '错误页面',
+        icon: 'vue-sys-icon-excel'
+      },
+      children: [
+        {
+          path: 'page-401',
+          name: 'Page401',
+          component: () => import('../views/error-page/401'),
+          meta: {
+            title: '401页面'
+          }
+        },
+        {
+          path: 'page-404',
+          name: 'Page404',
+          component: () => import('../views/error-page/404'),
+          meta: {
+            title: '404页面'
+          }
+        }
+      ]
     }
   ]
 })