添加404页面

src/router/index.js

@@ -8,6 +8,7 @@ import StatusMonitoring from "@/views/StatusMonitoring.vue";
 import SpecialSituationMonitoring from "@/views/SpecialSituationMonitoring.vue";
 import DataAnalysis from "@/views/DataAnalysis.vue";
 import TrunkCoordination from "@/views/TrunkCoordination.vue";
+import NotFound from "@/views/NotFound.vue";
 
 Vue.use(Router);
 
@@ -22,5 +23,6 @@ export default new Router({
     { path: "/surve", component: StatusMonitoring },
     { path: "/security", component: SpecialSituationMonitoring },
     { path: "/trunk", component: TrunkCoordination },
+    { path: "*", component: NotFound },
   ]
 });

src/views/NotFound.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="not-found">
+    <div class="content">
+      <div class="code">
+        <span class="digit">4</span>
+        <span class="digit zero">0</span>
+        <span class="digit">4</span>
+      </div>
+      <div class="divider"></div>
+      <p class="message">页面未找到</p>
+      <p class="hint">您访问的页面不存在或已被移除</p>
+      <button class="btn-back" @click="goBack">返回首页</button>
+    </div>
+    <div class="grid-bg"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound',
+  methods: {
+    goBack() {
+      this.$router.push('/login');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.not-found {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(ellipse at 50% 40%, #0a1628 0%, #050d1a 100%);
+  overflow: hidden;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+}
+
+.grid-bg {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
+  background-size: 60px 60px;
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.code {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.digit {
+  font-size: 120px;
+  font-weight: 800;
+  line-height: 1;
+  color: transparent;
+  background: linear-gradient(180deg, #3b82f6 0%, #1e3a6e 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  text-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
+  user-select: none;
+}
+
+.digit.zero {
+  animation: pulse 2.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.divider {
+  width: 80px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+  border-radius: 1px;
+}
+
+.message {
+  font-size: 22px;
+  font-weight: 600;
+  color: #e0e6f1;
+  margin: 0;
+  letter-spacing: 4px;
+}
+
+.hint {
+  font-size: 14px;
+  color: #758599;
+  margin: 0;
+}
+
+.btn-back {
+  margin-top: 12px;
+  padding: 10px 36px;
+  font-size: 14px;
+  color: #ffffff;
+  background: rgba(59, 130, 246, 0.15);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.25s;
+  letter-spacing: 2px;
+}
+
+.btn-back:hover {
+  background: rgba(59, 130, 246, 0.3);
+  border-color: rgba(59, 130, 246, 0.7);
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
+}
+
+.btn-back:active {
+  transform: translateY(1px);
+}
+</style>