update

src/components/Header.vue

@@ -1,12 +1,9 @@
 <template>
-  <header class="bg-white py-4 px-6 flex items-center justify-between">
+  <header class="bg-gray-800 py-4 px-6 flex items-center justify-between">
     <div class="flex items-center">
-      <h1 class="text-2xl font-bold">
+      <h1 class="text-2xl font-bold text-white">
         <span class="text-primary">蜂快</span>到家
       </h1>
     </div>
-    <nav class="flex items-center space-x-8">
-      <a href="#" class="text-gray-600 hover:text-primary transition-colors">关于我们</a>
-    </nav>
   </header>
 </template> 

src/components/Home.vue

@@ -1,13 +1,37 @@
 <template>
-  <div>
+  <div class="min-h-screen flex flex-col">
     <Header />
-    <main class="container mx-auto px-4">
+    <main class="container mx-auto px-4 flex-grow">
       <Hero />
     </main>
+    <footer class="w-full bg-gray-800">
+      <div class="container mx-auto px-4 py-6">
+        <div class="flex flex-col items-center space-y-3 text-sm text-gray-400">
+          <div class="flex items-center space-x-4">
+            <router-link to="/about" class="hover:text-white transition-colors">关于我们</router-link>
+            <span>|</span>
+            <router-link to="/agreement" class="hover:text-white transition-colors">用户协议</router-link>
+            <span>|</span>
+            <router-link to="/privacy" class="hover:text-white transition-colors">隐私协议</router-link>
+          </div>
+          <div>
+            <a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-white transition-colors">
+              蜀ICP备2025119863号-2
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script setup>
 import Header from './Header.vue'
 import Hero from './Hero.vue'
-</script> 
+</script>
+
+<style scoped>
+/* div {
+  @apply min-h-screen flex flex-col;
+} */
+</style>