From 7b5dacf723a16d327ad5485a4372522f50af0514 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Thu, 12 Sep 2024 20:29:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0404=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96homeview=E4=BB=A3=E7=A0=81=E5=8F=AF?=
 =?UTF-8?q?=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/router/index.ts    |  5 +++++
 tonecn/src/views/HomeView.vue |  3 +--
 tonecn/src/views/NotFound.vue | 38 +++++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 tonecn/src/views/NotFound.vue

diff --git a/tonecn/src/router/index.ts b/tonecn/src/router/index.ts
index 7a15511..ee937eb 100644
--- a/tonecn/src/router/index.ts
+++ b/tonecn/src/router/index.ts
@@ -45,6 +45,11 @@ const router = createRouter({
           component: () => import('../views/Console/Dashboard.vue')
         }
       ],
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'notFound',
+      component: () => import('../views/NotFound.vue')
     }
   ]
 })
diff --git a/tonecn/src/views/HomeView.vue b/tonecn/src/views/HomeView.vue
index 12aba29..3f180d3 100644
--- a/tonecn/src/views/HomeView.vue
+++ b/tonecn/src/views/HomeView.vue
@@ -8,8 +8,7 @@ onMounted(() => {
   // 界面特效字体
   let nameElement = document.getElementById("my-name");
   if (nameElement == null) {
-    console.error('未找到元素my-name')
-    return;
+    return console.error('未找到元素my-name')
   }
   let colorNum = 66;
   let colorNumReverse = false;
diff --git a/tonecn/src/views/NotFound.vue b/tonecn/src/views/NotFound.vue
new file mode 100644
index 0000000..6fbc547
--- /dev/null
+++ b/tonecn/src/views/NotFound.vue
@@ -0,0 +1,38 @@
+<script setup lang='ts'>
+import { onMounted, onUnmounted, ref } from 'vue';
+const containerHeight = ref('800px');
+onMounted(async () => {
+    document.title = '404 不存在的页面';
+    containerHeight.value = window.innerHeight > 500 ? window.innerHeight -85 + 'px' : '390px';
+})
+onUnmounted(() => {
+    document.title = '特恩(TONE)';
+})
+</script>
+<template>
+    <div class="bcc"></div>
+    <div class="content-container">
+        <el-empty id="404-notfound-el-empty" style="margin-bottom: 200px;" description="404 不存在的页面" />
+    </div>
+</template>
+<style scoped>
+.bcc {
+    position: fixed;
+    z-index: -1;
+    background-color: #f6f8f9;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 600px;
+    margin: 0px auto;
+    padding: 0 20px;
+    height: v-bind(containerHeight);
+}
+</style>
\ No newline at end of file