From 3ef87a07e33b1d52ce6bb63f98af75d629b611e2 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Thu, 22 May 2025 19:59:54 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=A1=B5=E8=84=9A=E5=85=88?=
 =?UTF-8?q?=E5=87=BA=E7=8E=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 50 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c026b47..461a1f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,38 @@
 <script setup>
-import Footer from './components/Footer.vue'
-import Toolbar from './components/Toolbar.vue'
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Footer from './components/Footer.vue';
+import Toolbar from './components/Toolbar.vue';
+
+const router = useRouter();
+const isContentLoaded = ref(false);
+
+// 等待路由完全就绪（所有初始导航和异步组件加载完毕）
+router.isReady().then(() => {
+  isContentLoaded.value = true;
+});
 </script>
 
 <template>
-<div id="contentPane">
-  <Toolbar></Toolbar>
-  <div v-if="$route.path === '/ContactUs'">
-    <router-view/>
-  </div>
-  <div v-else id="defaultcontainer">
-    <div id="content"><router-view/></div>
-    <div id="footer">
-      <Footer></Footer>
+  <div id="contentPane">
+    <Toolbar></Toolbar>
+    <div v-if="$route.path === '/ContactUs'">
+      <router-view/>
+      <!-- 如果 ContactUs 页面也需要Footer并同样逻辑加载，则也加上 v-if -->
+      <!--
+      <div id="footer" v-if="isContentLoaded">
+        <Footer></Footer>
+      </div>
+      -->
+    </div>
+    <div v-else id="defaultcontainer">
+      <div id="content"><router-view/></div>
+      <!-- 仅当 isContentLoaded 为 true 时渲染 Footer -->
+      <div id="footer" v-if="isContentLoaded">
+        <Footer></Footer>
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <style scoped lang="scss">
@@ -31,18 +48,19 @@ import Toolbar from './components/Toolbar.vue'
 #defaultcontainer{
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 100vh; /* 确保在内容不足时，Footer也能被推到底部 */
 }
 #content{
   display: flex;
   position: relative;
-  flex:1;
+  flex:1; /* 关键：让内容区占据所有可用空间，将Footer推到底部 */
   width: 100%;
-  min-height: 100%;
+  /* min-height: 100%; 这行可能不再需要，因为父容器已经是flex并且此元素flex:1 */
 }
 
 #footer{
-  margin-top: 0px;
+  margin-top: 0px; /* 或者 auto，取决于具体设计 */
+  /* flex-shrink: 0; // 防止Footer在空间不足时被压缩，如果需要的话 */
 }
 
 @include media-breakpoint-between(xs, md) {