add error page

src/router/index.js

@@ -7,9 +7,11 @@ import Layout from '../views/layout/Layout';
 // dashboard
 // import dashboard from '../views/dashboard/index';
 const dashboard = resolve => require(['../views/dashboard/index'], resolve);
-/* error*/
+
+/* error page*/
 const Err404 = resolve => require(['../views/error/404'], resolve);
 const Err401 = resolve => require(['../views/error/401'], resolve);
+
 /* login*/
 import Login from '../views/login/';
 import authRedirect from '../views/login/authredirect';
@@ -37,6 +39,7 @@ const MixChart = resolve => require(['../views/charts/mixchart'], resolve);
 const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
 
 
+
 /* admin*/
 // const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve);
 // const QuicklyCreateUser = resolve => require(['../views/admin/quicklycreate'], resolve);
@@ -98,6 +101,17 @@ export default new Router({
         { path: 'mixchart', component: MixChart, name: '混合图表' }
       ]
     },
+    {
+      path: '/errorpage',
+      component: Layout,
+      redirect: 'noredirect',
+      name: '错误页面',
+      icon: 'tubiaoleixingzhengchang',
+      children: [
+        { path: '401', component: Err401, name: '401' },
+        { path: '404', component: Err404, name: '404' }
+      ]
+    },
     {
       path: '/excel',
       component: Layout,

src/views/error/401.vue

@@ -4,6 +4,7 @@
     <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">

src/views/error/404.vue

@@ -1,7 +1,217 @@
 <template>
-    <div>404</div>
+  <div style="background:#f0f2f5;margin-top: -20px;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="../../assets/404.png" alt="404">
+        <img class="pic-404__child left" src="../../assets/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="../../assets/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="../../assets/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+         <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <a href="/" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
 </template>
-
+<script>
-
+  export default {
-
+    computed: {
-
+      message() {
+        return '特朗普说这个页面你不能进......'
+      }
+    }
+  }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .wscn-http404 {
+    position: relative;
+    width: 1200px;
+    margin: 20px auto 60px;
+    padding: 0 100px;
+    overflow: hidden;
+    .pic-404 {
+      position: relative;
+      float: left;
+      width: 600px;
+      padding: 150px 0;
+      overflow: hidden;
+      &__parent {
+        width: 100%;
+      }
+      &__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;
+          }
+        }
+      }
+    }
+    .bullshit {
+      position: relative;
+      float: left;
+      width: 300px;
+      padding: 150px 0;
+      overflow: hidden;
+      &__oops {
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 40px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 20px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-fill-mode: forwards;
+      }
+      &__headline {
+        font-size: 20px;
+        line-height: 24px;
+        color: #1482f0;
+        opacity: 0;
+        margin-bottom: 10px;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.1s;
+        animation-fill-mode: forwards;
+      }
+      &__info {
+        font-size: 13px;
+        line-height: 21px;
+        color: grey;
+        opacity: 0;
+        margin-bottom: 30px;
+        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;
+        background: #1482f0;
+        border-radius: 100px;
+        text-align: center;
+        color: #ffffff;
+        opacity: 0;
+        font-size: 14px;
+        line-height: 36px;
+        cursor: pointer;
+        animation-name: slideUp;
+        animation-duration: 0.5s;
+        animation-delay: 0.3s;
+        animation-fill-mode: forwards;
+      }
+      @keyframes slideUp {
+        0% {
+          transform: translateY(60px);
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>

src/views/layout/Sidebar.vue

@@ -7,7 +7,7 @@
                     {{item.name}}
                 </template>
                 <router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden"
-                             class="title-link" :to="item.path+'/'+child.path + '#'+ +new Date()">
+                             class="title-link" :to="item.path+'/'+child.path">
                     <el-menu-item :index="item.path+'/'+child.path">
                         {{child.name}}
                     </el-menu-item>
@@ -16,7 +16,7 @@
             <router-link v-if="item.noDropdown&&item.children.length>0" class="title-link"
                          :to="item.path+'/'+item.children[0].path">
                 <el-menu-item
-                        :index="item.path+'/'+item.children[0].path +'#'+ +new Date()">
+                        :index="item.path+'/'+item.children[0].path">
                     <wscn-icon-svg :icon-class="item.icon||'geren1'"/>
                     {{item.children[0].name}}
                 </el-menu-item>