404

src/views/global/temp/404.vue

@@ -1,12 +1,13 @@
 <template>
-  <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>
-      <a-button type="primary" @click="$router.push({ name: 'root' })"
-        >返回首页</a-button
-      >
+  <div class="flex size-full flex-col items-center justify-center gap-8">
+    <img src="@/assets/images/global/404.png" />
+    <div class="text-4xl font-bold text-[#2E3238]">页面迷路了...</div>
+    <div class="text-[2rem] text-[#687383]">您寻找的页面可能已经去度假了</div>
+    <div
+      class="__hover text-4xl font-bold text-[var(--czr-main-color)]"
+      @click="$router.push({ name: 'root' })"
+    >
+      返回主页
     </div>
   </div>
 </template>
@@ -21,77 +22,4 @@ onMounted(() => {
 })
 </script>
 
-<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>
+<style lang="scss"></style>