优化首页公告与轮播图

frontend/src/views/mobile/MobileHomeView.css

@@ -5,12 +5,10 @@
   padding-bottom: 58px;
 }
 
-/* ========== Hero 区域：纯色蓝色头部 ========== */
+/* ========== 顶部信息区 ========== */
 .mobile-hero {
-  overflow: hidden;
-  border-radius: 0 0 24px 24px;
-  background: #1479ff;
-  padding: 14px 14px 18px;
+  padding: 14px 14px 8px;
+  background: #f5f7fa;
 }
 
 .mobile-topbar,
@@ -20,22 +18,25 @@
 }
 
 .mobile-topbar {
+  gap: 10px;
   justify-content: space-between;
-  color: #ffffff;
+  color: #17233d;
 }
 
 .mobile-brand {
+  flex: 0 0 auto;
   gap: 10px;
 }
 
 .mobile-logo {
   display: grid;
-  width: 38px;
-  height: 38px;
+  width: 36px;
+  height: 36px;
   place-items: center;
   border-radius: 12px;
   background: #ffffff;
-  color: #1479ff;
+  color: #ff6a00;
+  box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
   font-weight: 900;
 }
 
@@ -46,34 +47,46 @@
 
 .mobile-brand small {
   margin-top: 2px;
-  color: rgba(255, 255, 255, 0.78);
-  font-size: 12px;
+  color: #7b8798;
+  font-size: 11px;
+}
+
+.mobile-brand strong {
+  font-size: 15px;
+  white-space: nowrap;
 }
 
 .mobile-service {
+  flex: 0 0 auto;
   border: 0;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.18);
-  color: #ffffff;
-  padding: 7px 12px;
+  background: #ffffff;
+  color: #1477ff;
+  padding: 7px 10px;
+  box-shadow: 0 6px 16px rgba(23, 35, 61, 0.08);
+  font-size: 13px;
+  font-weight: 800;
 }
 
 /* ========== van-search 覆盖样式 ========== */
 .home-search {
-  margin-top: 12px;
+  flex: 1 1 auto;
+  min-width: 0;
   padding: 0;
   background: transparent;
 }
 
 .home-search :deep(.van-search__content) {
   border-radius: 999px;
+  border: 1px solid #eef1f5;
   background: #ffffff;
-  padding: 8px 14px;
+  padding: 6px 10px;
+  box-shadow: 0 8px 20px rgba(23, 35, 61, 0.06);
 }
 
 .home-search :deep(.van-search__content .van-field__control) {
   color: #17233d;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 /* ========== 防骗提示卡片 ========== */
@@ -83,13 +96,28 @@
   gap: 8px;
   margin-top: 12px;
   border-radius: 12px;
-  background: #ffffff;
+  border: 1px solid #ffe6bd;
+  background: #fffaf0;
   padding: 10px 14px;
   font-size: 12px;
   line-height: 1.45;
   color: #5c3b00;
 }
 
+.announcement-swipe {
+  flex: 1;
+  height: 18px;
+  min-width: 0;
+}
+
+.announcement-swipe span {
+  display: block;
+  overflow: hidden;
+  color: #5c3b00;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .fraud-dot {
   display: inline-block;
   width: 6px;
@@ -101,7 +129,7 @@
 
 /* ========== Content 区 ========== */
 .mobile-content {
-  padding: 14px;
+  padding: 8px 14px 14px;
 }
 
 /* ========== Banner 轮播 ========== */
@@ -123,10 +151,12 @@
 .banner-swipe :deep(.van-swipe__indicator--active) {
   width: 16px;
   border-radius: 999px;
-  background: #1479ff;
+  background: #ff6a00;
 }
 
 .mobile-banner {
+  position: relative;
+  overflow: hidden;
   display: flex;
   justify-content: space-between;
   gap: 14px;
@@ -137,6 +167,34 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
 }
 
+.mobile-banner.has-image {
+  min-height: 132px;
+  align-items: flex-end;
+  background: #17233d;
+  color: #ffffff;
+}
+
+.banner-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mobile-banner.has-image::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(90deg, rgba(10, 18, 32, 0.64), rgba(10, 18, 32, 0.12));
+}
+
+.mobile-banner.has-image > div:not(.banner-badge) {
+  position: relative;
+  z-index: 1;
+  max-width: 78%;
+}
+
 .mobile-banner.tone-green {
   background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
 }
@@ -151,11 +209,17 @@
 }
 
 .mobile-banner p {
-  color: #1479ff;
+  color: #1477ff;
   font-size: 13px;
   font-weight: 800;
 }
 
+.mobile-banner.has-image p,
+.mobile-banner.has-image h1 {
+  color: #ffffff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+}
+
 .mobile-banner h1 {
   margin-top: 6px;
   font-size: 22px;
@@ -174,6 +238,8 @@
 }
 
 .banner-badge {
+  position: relative;
+  z-index: 1;
   align-self: flex-start;
   border-radius: 12px;
   background: #ff6a00;

frontend/src/views/mobile/MobileHomeView.vue

@@ -5,10 +5,15 @@ import { showToast } from "vant";
 
 import {
   defaultListingPublishOptions,
-  fetchListingPublishOptions,
   type ListingPublishOptions,
 } from "@/api/listingOptions";
 import { fetchListings, type Listing } from "@/api/listings";
+import {
+  defaultHomeAnnouncements,
+  defaultHomeBanners,
+  fetchMobileHomeConfig,
+  type HomeBannerSlide,
+} from "@/api/homeConfig";
 import MobileHomeFilterSheet, {
   type FilterSection,
 } from "./MobileHomeFilterSheet.vue";
@@ -45,6 +50,8 @@ const selectedFilters = ref<Record<string, string[]>>({});
 const rangeFilters = ref<Record<string, { min: string; max: string }>>({});
 const refreshing = ref(false);
 const searchValue = ref("");
+const announcements = ref<string[]>(defaultHomeAnnouncements);
+const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners);
 
 const sortOptions = [
   { key: "comprehensive", label: "综合排序" },
@@ -70,30 +77,6 @@ const rangePresets: Record<string, Array<{ label: string; min: string; max: stri
   ],
 };
 
-const bannerSlides = [
-  {
-    eyebrow: "三角洲行动账号专区",
-    title: "高哈夫币 · 安全交接 · 随租随玩",
-    badge: "HOT",
-    pill: "新人领券最高减 20 元",
-    tone: "blue",
-  },
-  {
-    eyebrow: "平台担保交易",
-    title: "交接全程留痕，拒绝私下转账",
-    badge: "SAFE",
-    pill: "租号前先验实名与资料",
-    tone: "green",
-  },
-  {
-    eyebrow: "高效筛选",
-    title: "按区服、段位、哈夫币快速找号",
-    badge: "FAST",
-    pill: "支持扫码号与账密号",
-    tone: "orange",
-  },
-];
-
 const fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
 
 const sourceListings = computed(() =>
@@ -178,7 +161,7 @@ function isNavActive(path: string) {
 
 onMounted(() => {
   loadListings();
-  loadPublishOptions();
+  loadHomeConfig();
 });
 
 async function loadListings() {
@@ -193,10 +176,15 @@ async function loadListings() {
   }
 }
 
-async function loadPublishOptions() {
+async function loadHomeConfig() {
   try {
-    publishOptions.value = await fetchListingPublishOptions();
+    const config = await fetchMobileHomeConfig();
+    announcements.value = config.announcements;
+    bannerSlides.value = config.banners;
+    publishOptions.value = config.publish_options;
   } catch {
+    announcements.value = defaultHomeAnnouncements;
+    bannerSlides.value = defaultHomeBanners;
     publishOptions.value = defaultListingPublishOptions;
   }
 }
@@ -204,12 +192,14 @@ async function loadPublishOptions() {
 async function onRefresh() {
   refreshing.value = true;
   try {
-    const [nextListings, nextOptions] = await Promise.all([
+    const [nextListings, nextHomeConfig] = await Promise.all([
       fetchListings(),
-      fetchListingPublishOptions(),
+      fetchMobileHomeConfig(),
     ]);
     listings.value = nextListings;
-    publishOptions.value = nextOptions;
+    announcements.value = nextHomeConfig.announcements;
+    bannerSlides.value = nextHomeConfig.banners;
+    publishOptions.value = nextHomeConfig.publish_options;
     showToast({ message: "刷新成功", icon: "passed" });
   } catch {
     // 静默处理
@@ -335,7 +325,7 @@ function uniqueOptions(values: string[]) {
 
 <template>
   <main class="mobile-shell">
-    <!-- ========== Hero 区域：纯色蓝色头部 ========== -->
+    <!-- ========== Hero 区域：顶部搜索与公告 ========== -->
     <section class="mobile-hero">
       <div class="mobile-topbar">
         <div class="mobile-brand">
@@ -345,21 +335,30 @@ function uniqueOptions(values: string[]) {
             <small>哈夫币租号</small>
           </div>
         </div>
+        <van-search
+          v-model="searchValue"
+          shape="round"
+          placeholder="搜区服 / 段位"
+          class="home-search"
+        />
         <button class="mobile-service" type="button">客服</button>
       </div>
 
-      <van-search
-        v-model="searchValue"
-        shape="round"
-        placeholder="搜区服 / 段位 / 哈夫币数量"
-        class="home-search"
-      />
-
       <!-- 防骗提示卡片（不用 van-notice-bar） -->
       <div class="fraud-tip">
         <van-icon name="warning-o" :size="16" color="#b8860b" />
         <span class="fraud-dot"></span>
-        <span>平台担保交易，拒绝私下转账/共享验证码，交接全程留痕。</span>
+        <van-swipe
+          class="announcement-swipe"
+          vertical
+          :autoplay="3200"
+          :show-indicators="false"
+          touchable
+        >
+          <van-swipe-item v-for="item in announcements" :key="item">
+            <span>{{ item }}</span>
+          </van-swipe-item>
+        </van-swipe>
       </div>
     </section>
 
@@ -370,15 +369,24 @@ function uniqueOptions(values: string[]) {
         <van-swipe class="banner-swipe" :autoplay="3600" lazy-render>
           <van-swipe-item
             v-for="slide in bannerSlides"
-            :key="slide.title"
+            :key="slide.title || slide.image_url"
           >
-            <div class="mobile-banner" :class="`tone-${slide.tone}`">
+            <div
+              class="mobile-banner"
+              :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
+            >
+              <img
+                v-if="slide.image_url"
+                class="banner-image"
+                :src="slide.image_url"
+                :alt="slide.title || slide.eyebrow || '首页轮播图'"
+              />
               <div>
-                <p>{{ slide.eyebrow }}</p>
-                <h1>{{ slide.title }}</h1>
-                <span>{{ slide.pill }}</span>
+                <p v-if="slide.eyebrow">{{ slide.eyebrow }}</p>
+                <h1 v-if="slide.title">{{ slide.title }}</h1>
+                <span v-if="slide.pill">{{ slide.pill }}</span>
               </div>
-              <div class="banner-badge">{{ slide.badge }}</div>
+              <div v-if="slide.badge" class="banner-badge">{{ slide.badge }}</div>
             </div>
           </van-swipe-item>
         </van-swipe>

frontend/src/views/mobile/MobileProfileView.vue

@@ -127,7 +127,7 @@ const maskedPhone = computed(() =>
             <van-icon
               name="setting-o"
               :size="22"
-              color="rgba(255,255,255,0.85)"
+              color="#64748b"
             />
           </button>
         </div>
@@ -247,19 +247,14 @@ const maskedPhone = computed(() =>
   padding: 0 0 60px;
 }
 
-/* ========== 已登录区 - Hero蓝色横幅 ========== */
+/* ========== 已登录区 - 个人信息卡 ========== */
 .profile-hero {
   position: relative;
-  padding: 28px 20px 40px;
-  border-radius: 0 0 24px 24px;
-  overflow: hidden;
+  padding: 14px 12px 0;
 }
 
 .hero-bg {
-  position: absolute;
-  inset: 0;
-  background: #1479ff;
-  z-index: 0;
+  display: none;
 }
 
 .profile-hero-content {
@@ -268,6 +263,11 @@ const maskedPhone = computed(() =>
   display: flex;
   align-items: center;
   gap: 14px;
+  border: 1px solid #eef1f5;
+  border-radius: 18px;
+  background: #fff;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(23, 35, 61, 0.06);
 }
 
 .avatar-wrap {
@@ -279,9 +279,10 @@ const maskedPhone = computed(() =>
   width: 54px;
   height: 54px;
   place-items: center;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  font-size: 28px;
+  border-radius: 16px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-size: 26px;
 }
 
 .hero-user {
@@ -294,14 +295,14 @@ const maskedPhone = computed(() =>
   margin: 0;
   font-size: 18px;
   font-weight: 800;
-  color: #fff;
+  color: #17233d;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .hero-user p {
   margin: 4px 0 0;
-  color: rgba(255, 255, 255, 0.75);
+  color: #7b8798;
   font-size: 12px;
 }
 
@@ -311,15 +312,15 @@ const maskedPhone = computed(() =>
   height: 36px;
   place-items: center;
   border: none;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 50%;
+  background: #f4f6f8;
+  border-radius: 12px;
   cursor: pointer;
 }
 
 /* ========== 余额卡片 - 白色浮层 ========== */
 .balance-card {
   position: relative;
-  margin: -24px 12px 0;
+  margin: 12px 12px 0;
   padding: 18px 16px 14px;
   border-radius: 16px;
   background: #fff;