修改

src/assets/css/base.css

@@ -57,9 +57,11 @@
   margin: 0;
   font-weight: normal;
 }
-
+html{
+  height: 100%;
+}
 body {
-  height: 100vh;
+  height: 100%;
   /* min-height: 100vh; */
   color: var(--color-text);
   background: var(--color-background);

src/layouts/index.vue

@@ -1,43 +1,58 @@
 <template>
-    <div class="layout">
+  <div class="layout">
-        <Header />
+    <Header />
-        <div class="layoutContent">
+    <div class="layoutContent">
-            <Content />
+      <Content />
-            <Footer v-if="isFooter" />
+      <Footer v-if="isFooter" />
-        </div>
     </div>
+  </div>
+  <!-- <div class="h-full flex flex-col">
+    <div class="h-90px w-full"></div>
+    <div class="fixed h-90px w-full z-99">
+      <Header />
+    </div>
+    <div class="relative min-h-[calc(100vh-90px)]">
+        <Content />
+    </div>
+    <div class="w-full">
+        <Footer v-if="isFooter" />
+    </div>
+  </div> -->
 </template>
 
 <script setup>
-import Header from './Header.vue';
+import Header from './Header.vue'
-import Content from './Content.vue';
+import Content from './Content.vue'
-import Footer from './Footer.vue';
+import Footer from './Footer.vue'
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
-import { watch,ref } from 'vue'
+import { watch, ref } from 'vue'
-const router = useRouter();
+const router = useRouter()
-
-const isFooter = ref(true);
-watch(router.currentRoute, (to) => {
-    isFooter.value = to.meta?.footer ?? true;
-},{
-    immediate: true
-})
 
+const isFooter = ref(true)
+watch(
+  router.currentRoute,
+  (to) => {
+    isFooter.value = to.meta?.footer ?? true
+  },
+  {
+    immediate: true,
+  }
+)
 </script>
 
 <style lang="scss" scoped>
-.layout{
+.layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .layoutContent {
+    flex: 1;
     width: 100%;
-    height: 100%;
+    overflow-y: auto;
-    display: flex;
+    position: relative;
-    flex-direction: column;
+    z-index: 1;
-    overflow: hidden;
+  }
-    .layoutContent{
-        flex: 1;
-        width: 100%;
-        overflow-y: auto;
-        position: relative;
-        z-index: 1;
-    }
 }
 </style>

src/views/home/components/layout.vue

@@ -10,6 +10,7 @@
         立即体验
       </div>
     </div>
+    <!-- <div class="h-200px w-full"></div> -->
   </div>
 </template>
 <script setup>

src/views/home/index.vue

@@ -31,7 +31,7 @@
           >
             <component :is="item.component" />
           </swiper-slide>
-          <swiper-slide class="!h-690px">
+          <swiper-slide>
             <Footer></Footer>
           </swiper-slide>
         </swiper>