重构动物认领页面和导航菜单，统一使用SVG图标并优化交互体验

website/css/style.css

@@ -74,6 +74,93 @@ body {
     overflow: hidden;
 }
 
+/* 各页面专属背景色 */
+.hero-section.travel-hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.hero-section.animal-hero {
+    background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
+}
+
+.hero-section.flower-hero {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+}
+
+.hero-section.reward-hero {
+    background: linear-gradient(135deg, #f39c12 0%, #d35400 100%);
+}
+
+/* 统一页面头部样式 */
+.page-header {
+    color: white;
+    padding: 120px 0 100px;
+    margin-bottom: 80px;
+    position: relative;
+    overflow: hidden;
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+}
+
+.page-header .container {
+    position: relative;
+    z-index: 2;
+}
+
+.page-header h1 {
+    font-size: var(--font-size-5xl);
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.page-header .lead {
+    font-size: var(--font-size-xl);
+    margin-bottom: 2.5rem;
+    opacity: 0.9;
+}
+
+/* 响应式banner高度调整 */
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 100px 0 80px;
+        min-height: 400px;
+    }
+    
+    .page-header {
+        padding: 100px 0 80px;
+        min-height: 400px;
+    }
+    
+    .page-header h1 {
+        font-size: var(--font-size-4xl);
+    }
+    
+    .page-header .lead {
+        font-size: var(--font-size-lg);
+    }
+}
+
+@media (max-width: 576px) {
+    .hero-section {
+        padding: 80px 0 60px;
+        min-height: 350px;
+    }
+    
+    .page-header {
+        padding: 80px 0 60px;
+        min-height: 350px;
+    }
+    
+    .page-header h1 {
+        font-size: var(--font-size-3xl);
+    }
+    
+    .page-header .lead {
+        font-size: var(--font-size-base);
+    }
+}
+
 .hero-section::before {
     content: "";
     position: absolute;