ACS

src/views/NotFound.vue

@@ -1,34 +1,61 @@
 <template>
-  <div class="not-found">
-    <h1>404</h1>
-    <p>抱歉，页面不存在</p>
-    <router-link to="/">返回首页</router-link>
+  <div class="not-found-container">
+    <div class="not-found-content">
+      <img src="../assets/404.svg" alt="404" class="not-found-image" />
+      <h1 class="not-found-title">404</h1>
+      <h2 class="not-found-subtitle">抱歉，您访问的页面不存在</h2>
+      <p class="not-found-desc">可能是链接错误或者该页面已被删除</p>
+      <el-button type="primary" @click="backHome">返回首页</el-button>
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'NotFound'
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const backHome = () => {
+  router.push('/dashboard')
 }
 </script>
 
 <style scoped>
-.not-found {
-  padding: 40px;
+.not-found-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #f0f2f5;
+}
+
+.not-found-content {
   text-align: center;
+  padding: 30px;
 }
 
-h1 {
+.not-found-image {
+  width: 250px;
+  margin-bottom: 20px;
+}
+
+.not-found-title {
   font-size: 72px;
+  font-weight: bold;
+  color: #1890ff;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.not-found-subtitle {
+  font-size: 24px;
+  color: #333;
+  margin: 10px 0;
+}
+
+.not-found-desc {
+  font-size: 16px;
   color: #666;
-}
-
-a {
-  color: #42b983;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
+  margin: 20px 0 30px;
 }
 </style>