feat: 添加404页面

layouts/default.vue

@@ -9,7 +9,9 @@
   <div class="layout">
     <BsLogin :visible.sync="loginVisible" />
     <Header :is-sticky="isSticky" />
-    <Nuxt />
+    <div class="layout-content">
+      <Nuxt />
+    </div>
     <Footer />
   </div>
 </template>
@@ -50,3 +52,10 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.layout {
+  .layout-content {
+    min-height: calc(100vh - 400px);
+  }
+}
+</style>

layouts/error.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="error-page flex flex-middle flex-center">
+    <img class="error-page-cover" src="~/assets/img/layout/error.png" />
+    <div class="error-page-content">
+      <div>此页面不存在或找不到</div>
+      <div class="error-page-content__tip">
+        <p>检查您的网址是否拼写正确</p>
+        <p>检查您是否使用了错误的网址转接</p>
+      </div>
+      <UiButton :radius="true" type="yellow_gradual" @click="onJumpHomePage"
+        >回到首页</UiButton
+      >
+    </div>
+  </div>
+</template>
+<script>
+import UiButton from "@/components/UiButton";
+export default {
+  name: "ErrorPage",
+  components: { UiButton },
+  methods: {
+    onJumpHomePage() {
+      this.$router.replace("/");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.error-page {
+  height: calc(100vh - 400px);
+  .error-page-cover {
+    width: 286px;
+    height: 254px;
+    margin-right: 109px;
+  }
+  .error-page-content {
+    font-size: 20px;
+    color: #666666;
+  }
+  .error-page-content__tip {
+    font-size: 14px;
+    line-height: 20px;
+    color: #999999;
+    margin: 30px 0;
+  }
+  /deep/.ui-button {
+    width: 121px;
+    height: 30px;
+  }
+}
+</style>