初次提交

src/views/NotFound.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="not-found-page">
+    <div class="not-found-container">
+      <div class="error-illustration">
+        <div class="error-code">404</div>
+        <div class="error-message">页面不存在</div>
+      </div>
+      
+      <div class="error-description">
+        <p>抱歉，您访问的页面不存在或已被删除。</p>
+        <p>请检查网址是否正确，或返回首页继续浏览。</p>
+      </div>
+      
+      <div class="error-actions">
+        <el-button type="primary" @click="goHome">
+          <el-icon><House /></el-icon>
+          返回首页
+        </el-button>
+        <el-button @click="goBack">
+          <el-icon><ArrowLeft /></el-icon>
+          返回上页
+        </el-button>
+      </div>
+      
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { 
+  House, 
+  ArrowLeft
+} from '@element-plus/icons-vue'
+
+const router = useRouter()
+
+// 方法
+const goHome = () => {
+  router.push('/transfers')
+}
+
+const goBack = () => {
+  if (window.history.length > 1) {
+    router.go(-1)
+  } else {
+    router.push('/transfers')
+  }
+}
+
+
+</script>
+
+<style scoped>
+.not-found-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.not-found-container {
+  background: white;
+  border-radius: 16px;
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.error-illustration {
+  margin-bottom: 30px;
+}
+
+.error-code {
+  font-size: 120px;
+  font-weight: bold;
+  color: #667eea;
+  line-height: 1;
+  margin-bottom: 10px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.error-message {
+  font-size: 24px;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+
+.error-description {
+  margin-bottom: 30px;
+}
+
+.error-description p {
+  color: #666;
+  font-size: 16px;
+  line-height: 1.6;
+  margin: 8px 0;
+}
+
+.error-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .not-found-page {
+    padding: 10px;
+  }
+  
+  .not-found-container {
+    padding: 30px 20px;
+  }
+  
+  .error-code {
+    font-size: 80px;
+  }
+  
+  .error-message {
+    font-size: 20px;
+  }
+  
+  .error-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .error-actions .el-button {
+    width: 200px;
+  }
+  
+
+}
+
+@media (max-width: 480px) {
+  .error-code {
+    font-size: 60px;
+  }
+  
+  .error-message {
+    font-size: 18px;
+  }
+  
+  .error-description p {
+    font-size: 14px;
+  }
+}
+</style>