init

src/views/error-page/401.vue

@@ -0,0 +1,19 @@
+<template>
+  <error-content code="401" desc="Oh~~您没有浏览这个页面的权限~" :src="src"/>
+</template>
+
+<script>
+import error401 from '@/assets/images/error-page/error-401.svg'
+import errorContent from './error-content.vue'
+export default {
+  name: 'error_401',
+  components: {
+    errorContent
+  },
+  data() {
+    return {
+      src: error401
+    }
+  }
+}
+</script>

src/views/error-page/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <error-content code="404" desc="Oh~~您的页面好像飞走了~" :src="src"/>
+</template>
+
+<script>
+import error404 from '@/assets/images/error-page/error-404.svg'
+import errorContent from './error-content.vue'
+export default {
+  name: 'error_404',
+  components: {
+    errorContent
+  },
+  data() {
+    return {
+      src: error404
+    }
+  }
+}
+</script>

src/views/error-page/500.vue

@@ -0,0 +1,19 @@
+<template>
+  <error-content code="500" desc="Oh~~鬼知道服务器经历了什么~" :src="src"/>
+</template>
+
+<script>
+import error404 from '@/assets/images/error-page/error-500.svg'
+import errorContent from './error-content.vue'
+export default {
+  name: 'error_500',
+  components: {
+    errorContent
+  },
+  data() {
+    return {
+      src: error404
+    }
+  }
+}
+</script>

src/views/error-page/back-btn-group.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Button size="large" type="text" @click="backHome">返回首页</Button>
+    <!-- <Button size="large" type="text" @click="backPrev">返回上一页({{ second }}s)</Button> -->
+  </div>
+</template>
+
+<script>
+import './error.less'
+export default {
+  name: 'backBtnGroup',
+  data() {
+    return {
+      second: 5,
+      timer: null
+    }
+  },
+  methods: {
+    backHome() {
+      this.$router.replace({
+        name: this.$config.homeName
+      })
+    },
+    backPrev() {
+      this.$router.go(-1)
+    }
+  },
+  mounted() {
+    // this.timer = setInterval(() => {
+    //   if (this.second === 0) this.backPrev()
+    //   else this.second--
+    // }, 1000)
+  },
+  beforeDestroy() {
+    // clearInterval(this.timer)
+  }
+}
+</script>

src/views/error-page/error-content.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="error-page">
+    <div class="content-con">
+      <img :src="src" :alt="code">
+      <div class="text-con">
+        <h4>{{ code }}</h4>
+        <h5>{{ desc }}</h5>
+      </div>
+      <back-btn-group class="back-btn-group"></back-btn-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import './error.less'
+import backBtnGroup from './back-btn-group.vue'
+export default {
+  name: 'error_content',
+  components: {
+    backBtnGroup
+  },
+  props: {
+    code: String,
+    desc: String,
+    src: String
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

src/views/error-page/error.less

@@ -0,0 +1,46 @@
+.error-page{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f9;
+  .content-con{
+    width: 700px;
+    height: 600px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    img{
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .text-con{
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      h4{
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        font-size: 80px;
+        font-weight: 700;
+        color: #348EED;
+      }
+      h5{
+        position: absolute;
+        width: 700px;
+        left: 0px;
+        top: 100px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #67647D;
+      }
+    }
+    .back-btn-group{
+      position: absolute;
+      right: 0px;
+      bottom: 20px;
+    }
+  }
+}