重构前端公共布局与基础样式

src/App.vue

@@ -1,50 +1,96 @@
 <script setup lang="ts">
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 </script>
 
 <template>
-  <div class="login">
-    <el-container class="common-layout">
-      <el-header class="header">
+  <div class="app-shell">
+    <div class="bg-orb bg-orb-left"></div>
+    <div class="bg-orb bg-orb-right"></div>
+    <el-container class="shell-container">
+      <el-header class="shell-header">
         <MyHead />
       </el-header>
-      <el-main class="main-content">
-          <RouterView />
+      <el-main class="shell-main">
+        <Transition name="fade-up" mode="out-in">
+          <RouterView :key="route.fullPath" />
+        </Transition>
       </el-main>
-      <el-footer class="footer">
-        <MyFooter/>
+      <el-footer class="shell-footer">
+        <MyFooter />
       </el-footer>
     </el-container>
   </div>
 </template>
 
 <style scoped>
-#app {
-  margin: 0px 0px;
-}
-
-*{
-  padding:0px
-}
-
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-size: cover;
-}
-
-.common-layout {
-  min-width: 100vw;
+.app-shell {
+  position: relative;
   min-height: 100vh;
+  overflow: hidden;
 }
 
-.main-content {
+.shell-container {
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+.shell-header {
+  height: auto;
+  padding: 18px 20px 0;
+}
+
+.shell-main {
+  max-width: 1240px;
+  width: 100%;
   margin: 0 auto;
-  display: flex;
-  flex-direction: column;
+  padding: 18px 20px 24px;
 }
 
+.shell-footer {
+  height: auto;
+  padding: 0 20px 18px;
+}
+
+.bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(1px);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-orb-left {
+  width: 300px;
+  height: 300px;
+  top: -120px;
+  left: -90px;
+  background: radial-gradient(circle at center, rgba(47, 143, 104, 0.35), transparent 70%);
+}
+
+.bg-orb-right {
+  width: 360px;
+  height: 360px;
+  right: -130px;
+  bottom: -170px;
+  background: radial-gradient(circle at center, rgba(67, 168, 121, 0.3), transparent 70%);
+}
+
+@media (max-width: 768px) {
+  .shell-header {
+    padding: 12px 12px 0;
+  }
+
+  .shell-main {
+    padding: 12px 12px 18px;
+  }
+
+  .shell-footer {
+    padding: 0 12px 12px;
+  }
+}
 </style>