404页面

src/views/global/temp/404.vue

@@ -1,9 +1,94 @@
 <template>
-  <div style="font-size: 200px">404</div>
+  <div class="not-found-container">
+    <div class="content-wrapper">
+      <div class="error-code animate-float">404</div>
+      <h1 class="title">页面迷路了...</h1>
+      <p class="description">您寻找的页面可能已经去度假了</p>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-document.getElementById('loader').style.display = 'none'
+import { onMounted } from 'vue'
+import { useAppStore } from '@/stores'
+
+const AppStore = useAppStore()
+onMounted(() => {
+  AppStore.loadingEnd()
+})
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+$primary-color: #6a8bad;
+$background-color: #f8f9fa;
+$text-color: #2c3e50;
+
+.not-found-container {
+  min-height: 100vh;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.9),
+    $background-color
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+
+  .content-wrapper {
+    text-align: center;
+    max-width: 800px;
+    padding: 2rem;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: $primary-color;
+      margin-bottom: 1rem;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .title {
+      font-size: 2.5rem;
+      color: $text-color;
+      margin-bottom: 1rem;
+    }
+
+    .description {
+      font-size: 1.2rem;
+      color: $text-color;
+      margin-bottom: 2rem;
+    }
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+@media (max-width: 768px) {
+  .not-found-container {
+    .content-wrapper {
+      .error-code {
+        font-size: 6rem;
+      }
+      .title {
+        font-size: 2rem;
+      }
+    }
+  }
+}
+</style>