u

code/link56/link56-frontend-new/src/views/error/404.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function toHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-wrapper">
+    <img src="/404.svg" class="illustration">
+
+    <h1>404</h1>
+
+    <h4>您访问的页面不存在</h4>
+
+    <p>可能是输入的地址有误，或者页面已经被移除。</p>
+
+    <el-button size="large" type="primary" @click="toHome">
+      返回首页
+    </el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  text-align: center;
+
+  .illustration {
+    width: 60%;
+    max-width: 520px;
+    margin-bottom: 32px;
+  }
+
+  h1 {
+    font-size: 100px;
+    color: #3b82f6;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  h4 {
+    font-size: 26px;
+    color: #3b82f6;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 16px;
+    color: #374151;
+    margin-bottom: 28px;
+    max-width: 480px;
+  }
+}
+</style>

code/link56/link56-frontend-new/src/views/error/500.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function toHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-wrapper">
+    <img src="/500.svg" class="illustration">
+
+    <h1>500</h1>
+    <h4>抱歉，服务器出了一点问题</h4>
+
+    <p>
+      我们的团队已经收到该问题的报告。请稍后重试。
+    </p>
+    <el-button size="large" type="primary" @click="toHome">
+      返回首页
+    </el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-wrapper {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  text-align: center;
+
+  .illustration {
+    width: 60%;
+    max-width: 520px;
+    margin-bottom: 32px;
+  }
+
+  h1 {
+    font-size: 100px;
+    color: #3b82f6;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  h4 {
+    font-size: 26px;
+    color: #3b82f6;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 16px;
+    color: #374151;
+    margin-bottom: 28px;
+    max-width: 480px;
+  }
+}
+</style>