Adjust: 城市名称移至头部图片

src/views/CityIntroductionView.vue

@@ -8,10 +8,16 @@
     <div class="main-content">
       <div class="city-banner">
         <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&h=400&fit=crop" alt="城市风景" class="banner-image" />
-        <div class="banner-overlay">
+      </div>
+
+      <div class="city-header-section">
+        <div class="city-header-image">
+          <img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1200&h=300&fit=crop" alt="城市风景" class="header-image" />
+          <div class="header-overlay">
             <h1 class="city-name">{{ cityName }}</h1>
           </div>
         </div>
+      </div>
 
       <div class="city-info-section">
         <h2 class="section-title">城市介绍</h2>
@@ -378,6 +384,33 @@ const sendMessage = (user) => {
   margin-bottom: 24px;
 }
 
+.city-header-section {
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+  border-radius: 12px;
+  margin-bottom: 24px;
+  position: relative;
+}
+
+.city-header-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.header-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
+  padding: 24px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
 .banner-image {
   width: 100%;
   height: 100%;