initHeader

frontend/src/components/ErrorMessage/403.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/403.png" class="not-img" alt="403" />
+    <div class="not-detail">
+      <h2>403</h2>
+      <h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/ErrorMessage/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/404.png" class="not-img" alt="404" />
+    <div class="not-detail">
+      <h2>404</h2>
+      <h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="404">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/ErrorMessage/500.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/500.png" class="not-img" alt="500" />
+    <div class="not-detail">
+      <h2>500</h2>
+      <h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="500">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/ErrorMessage/index.scss

@@ -0,0 +1,32 @@
+.not-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .not-img {
+    margin-right: 120px;
+  }
+  .not-detail {
+    display: flex;
+    flex-direction: column;
+    h2,
+    h4 {
+      padding: 0;
+      margin: 0;
+    }
+    h2 {
+      font-size: 60px;
+      color: var(--el-text-color-primary);
+    }
+    h4 {
+      margin: 30px 0 20px;
+      font-size: 19px;
+      font-weight: normal;
+      color: var(--el-text-color-regular);
+    }
+    .el-button {
+      width: 100px;
+    }
+  }
+}