'新增404页面'

package-lock.json

@@ -1000,38 +1000,6 @@
         "semver": "5.5.0"
       }
     },
-    "babel-preset-es2015": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
-      "integrity": "sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk=",
-      "dev": true,
-      "requires": {
-        "babel-plugin-check-es2015-constants": "6.22.0",
-        "babel-plugin-transform-es2015-arrow-functions": "6.22.0",
-        "babel-plugin-transform-es2015-block-scoped-functions": "6.22.0",
-        "babel-plugin-transform-es2015-block-scoping": "6.26.0",
-        "babel-plugin-transform-es2015-classes": "6.24.1",
-        "babel-plugin-transform-es2015-computed-properties": "6.24.1",
-        "babel-plugin-transform-es2015-destructuring": "6.23.0",
-        "babel-plugin-transform-es2015-duplicate-keys": "6.24.1",
-        "babel-plugin-transform-es2015-for-of": "6.23.0",
-        "babel-plugin-transform-es2015-function-name": "6.24.1",
-        "babel-plugin-transform-es2015-literals": "6.22.0",
-        "babel-plugin-transform-es2015-modules-amd": "6.24.1",
-        "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
-        "babel-plugin-transform-es2015-modules-systemjs": "6.24.1",
-        "babel-plugin-transform-es2015-modules-umd": "6.24.1",
-        "babel-plugin-transform-es2015-object-super": "6.24.1",
-        "babel-plugin-transform-es2015-parameters": "6.24.1",
-        "babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
-        "babel-plugin-transform-es2015-spread": "6.22.0",
-        "babel-plugin-transform-es2015-sticky-regex": "6.24.1",
-        "babel-plugin-transform-es2015-template-literals": "6.22.0",
-        "babel-plugin-transform-es2015-typeof-symbol": "6.23.0",
-        "babel-plugin-transform-es2015-unicode-regex": "6.24.1",
-        "babel-plugin-transform-regenerator": "6.26.0"
-      }
-    },
     "babel-preset-stage-2": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz",

package.json

@@ -30,7 +30,6 @@
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
-    "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",

src/components/page/404.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="error-page">
+      <div class="error-code">4<span>0</span>4</div>
+      <div class="error-desc">啊哦~ 你所访问的页面不存在</div>
+      <div class="error-handle">
+          <router-link to="/">
+            <el-button type="primary" size="large">返回首页</el-button>
+          </router-link>
+          <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+      goBack(){
+          this.$router.go(-1);
+      }
+  }
+}
+</script>
+
+
+<style scoped>
+    .error-page{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        background: #f3f3f3;
+        box-sizing: border-box;
+    }
+    .error-code{
+        line-height: 1;
+        font-size: 250px;
+        font-weight: bolder;
+        color: #2d8cf0;
+    }
+    .error-code span{
+        color: #00a854;
+    }
+    .error-desc{
+        font-size: 30px;
+        color: #777;
+    }
+    .error-handle{
+        margin-top: 30px;
+        padding-bottom: 200px;
+    }
+    .error-btn{
+        margin-left: 100px;
+    }
+</style>

src/router/index.js

@@ -71,5 +71,9 @@ export default new Router({
             path: '/login',
             component: resolve => require(['../components/page/Login.vue'], resolve)
         },
+        {
+            path: '/404',
+            component: resolve => require(['../components/page/404.vue'], resolve)
+        },
     ]
 })

static/css/main.css

@@ -1,96 +1,130 @@
-*{margin:0;padding:0;}
-html,body,#app,.wrapper{
-    width:100%;
-    height:100%;
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }
-body{
-    font-family:'PingFang SC', "Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+
+body {
+    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+}
+
+a {
+    text-decoration: none
 }
-a{text-decoration: none}
-.content-box{
+
+.content-box {
     position: absolute;
     left: 250px;
     right: 0;
     top: 70px;
-    bottom:0;
+    bottom: 0;
     overflow-y: scroll;
-}
-.content{
-    background: none repeat scroll 0 0 #f0f0f0;
-    width: auto;
-    padding:40px;
-    box-sizing: border-box;
     -webkit-transition: left .3s ease-in-out;
     transition: left .3s ease-in-out;
+    background: #f0f0f0;
 }
-.content-collapse{
+
+.content {
+    width: auto;
+    padding: 40px;
+}
+
+.content-collapse {
     left: 65px;
 }
-.container{
+
+.container {
     padding: 30px;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 5px;
 }
-.crumbs{
+
+.crumbs {
     margin-bottom: 20px;
 }
-.pagination{
+
+.pagination {
     margin: 20px 0;
     text-align: right;
 }
-.plugins-tips{
-    padding:20px 10px;
+
+.plugins-tips {
+    padding: 20px 10px;
     margin-bottom: 20px;
 }
+
 .el-button+.el-tooltip {
     margin-left: 10px;
 }
 
-.el-table tr:hover{
+.el-table tr:hover {
     background: #f6faff;
 }
-.mgb20{
+
+.mgb20 {
     margin-bottom: 20px;
 }
 
-.move-enter-active,.move-leave-active{
+.move-enter-active,
+.move-leave-active {
     transition: opacity .5s;
 }
-.move-enter,.move-leave{
+
+.move-enter,
+.move-leave {
     opacity: 0;
 }
+
 /*BaseForm*/
-.form-box{
-    width:600px;
+
+.form-box {
+    width: 600px;
 }
-.form-box .line{
+
+.form-box .line {
     text-align: center;
 }
-.el-time-panel__content::after, .el-time-panel__content::before {
+
+.el-time-panel__content::after,
+.el-time-panel__content::before {
     margin-top: -7px;
 }
-.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){
+
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
     padding-bottom: 0;
 }
+
 /*Readme*/
-.ms-doc .el-checkbox__input.is-disabled+.el-checkbox__label{
+
+.ms-doc .el-checkbox__input.is-disabled+.el-checkbox__label {
     color: #333;
     cursor: pointer;
 }
+
 /*Upload*/
-.pure-button{
-    width:150px;
-    height:40px;
+
+.pure-button {
+    width: 150px;
+    height: 40px;
     line-height: 40px;
     text-align: center;
     color: #fff;
     border-radius: 3px;
 }
-.g-core-image-corp-container .info-aside{
-    height:45px;
+
+.g-core-image-corp-container .info-aside {
+    height: 45px;
 }
+
 .el-upload--text {
     background-color: #fff;
     border: 1px dashed #d9d9d9;
@@ -103,31 +137,40 @@ a{text-decoration: none}
     position: relative;
     overflow: hidden;
 }
+
 .el-upload--text .el-icon-upload {
     font-size: 67px;
     color: #97a8be;
     margin: 40px 0 16px;
     line-height: 50px;
 }
+
 .el-upload--text {
     color: #97a8be;
     font-size: 14px;
     text-align: center;
 }
+
 .el-upload--text em {
     font-style: normal;
 }
+
 /*VueEditor*/
-.ql-container{
+
+.ql-container {
     min-height: 400px;
 }
-.ql-snow .ql-tooltip{
+
+.ql-snow .ql-tooltip {
     transform: translateX(117.5px) translateY(10px) !important;
 }
-.editor-btn{
+
+.editor-btn {
     margin-top: 20px;
 }
+
 /*markdown*/
+
 .v-note-wrapper .v-note-panel {
     min-height: 500px;
-  }
+}