From 8e3283d951b1c44b9bb306b6faff383b41634de4 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 6 Sep 2026 18:57:13 +0800
Subject: [PATCH] =?UTF-8?q?style(home):=20=E5=85=A8=E9=9D=A2=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84PC=E9=A6=96=E9=A1=B5UI=E8=A7=86=E8=A7=89=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=E4=B8=8E=E5=95=86=E5=93=81=E5=8D=A1=E7=89=87=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构商品卡片为双栏分翼展台，消灭宽屏中间大面积空白
- 去除大粗冗余标题行，以核心资产微卡（哈夫币/保险/币比）作为视觉中心
- 过滤规格胶囊中的重复项（如AWM），与右侧仓库物资展台明确职责分工
- 优化核心资产文字与数字垂直居中对齐，统一沉稳灰阶底色与品牌点睛色
- 调整轮播图Banner高度与业务入口条呼吸感，提升首屏空间利用率与可读性
---
 .../listings/components/HomeBanner.vue        |   92 +-
 .../listings/components/HomeZones.vue         |  141 +--
 .../listings/components/ListingCard.vue       | 1069 +++++++++++------
 .../src/features/listings/views/HomeView.vue  |  195 +--
 4 files changed, 922 insertions(+), 575 deletions(-)

diff --git a/frontend/src/features/listings/components/HomeBanner.vue b/frontend/src/features/listings/components/HomeBanner.vue
index 890e6c7..308009c 100644
--- a/frontend/src/features/listings/components/HomeBanner.vue
+++ b/frontend/src/features/listings/components/HomeBanner.vue
@@ -10,8 +10,15 @@ interface HomeBannerSlide {
   image_url?: string
 }
 
+interface StatItem {
+  label: string
+  value: string
+  hint?: string
+}
+
 interface Props {
   banners: HomeBannerSlide[]
+  stats?: StatItem[]
 }
 
 const props = defineProps<Props>()
@@ -45,7 +52,7 @@ function hasSlideCopy(slide: HomeBannerSlide) {
 
 <template>
   <section class="hero-board">
-    <el-carousel height="240px" indicator-position="outside" :interval="3600">
+    <el-carousel height="200px" :interval="3600">
       <el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
         <div
           class="hero-slide"
@@ -74,6 +81,14 @@ function hasSlideCopy(slide: HomeBannerSlide) {
       </el-carousel-item>
     </el-carousel>
 
+    <!-- 右下角半透明悬浮统计标签 -->
+    <div v-if="stats && stats.length" class="banner-stat-chips">
+      <div v-for="st in stats" :key="st.label" class="stat-pill" :title="st.hint">
+        <strong class="stat-pill-val">{{ st.value }}</strong>
+        <span class="stat-pill-lbl">{{ st.label }}</span>
+      </div>
+    </div>
+
     <el-image-viewer
       v-if="previewVisible"
       :url-list="previewUrls"
@@ -87,8 +102,10 @@ function hasSlideCopy(slide: HomeBannerSlide) {
 
 <style scoped>
 .hero-board {
+  position: relative;
   min-width: 0;
-  border-radius: 16px;
+  width: 100%;
+  border-radius: 14px;
   overflow: hidden;
   background: #ffffff;
 }
@@ -98,7 +115,7 @@ function hasSlideCopy(slide: HomeBannerSlide) {
 }
 
 .hero-board :deep(.el-carousel__container) {
-  height: 240px;
+  height: 200px;
   overflow: hidden;
 }
 
@@ -111,7 +128,7 @@ function hasSlideCopy(slide: HomeBannerSlide) {
   height: 100%;
   display: flex;
   align-items: center;
-  padding: 40px;
+  padding: 24px 36px;
   overflow: hidden;
   color: #17233d;
   background: linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #fff7ed 100%);
@@ -160,8 +177,8 @@ function hasSlideCopy(slide: HomeBannerSlide) {
 
 .hero-copy span {
   color: #ff6a00;
-  font-size: 13px;
-  font-weight: 900;
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .hero-slide.has-image .hero-copy {
@@ -173,35 +190,76 @@ function hasSlideCopy(slide: HomeBannerSlide) {
 }
 
 .hero-copy h1 {
-  margin: 12px 0;
-  font-size: 32px;
-  font-weight: 900;
+  margin: 6px 0;
+  font-size: 22px;
+  font-weight: 800;
   line-height: 1.2;
 }
 
 .hero-copy p {
   display: inline-block;
   margin: 0;
-  padding: 6px 12px;
+  padding: 3px 10px;
   border-radius: 999px;
   color: #1e293b;
   background: rgba(255, 255, 255, 0.72);
   backdrop-filter: blur(4px);
-  font-size: 14px;
-  font-weight: 800;
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .hero-slide em {
   position: absolute;
-  top: 22px;
-  right: 24px;
+  top: 14px;
+  right: 18px;
   z-index: 1;
-  padding: 6px 10px;
+  padding: 4px 9px;
   border-radius: 999px;
   color: #ffffff;
   background: #ff6a00;
-  font-size: 12px;
+  font-size: 11px;
   font-style: normal;
-  font-weight: 900;
+  font-weight: 700;
+}
+
+/* 悬浮微型统计标签栏 */
+.banner-stat-chips {
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 3;
+}
+
+.stat-pill {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.65);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  font-size: 12px;
+}
+
+.stat-pill-val {
+  font-size: 14px;
+  font-weight: 700;
+  color: #fb923c;
+}
+
+.stat-pill-lbl {
+  font-size: 11px;
+  color: #cbd5e1;
+}
+
+@media (max-width: 768px) {
+  .banner-stat-chips {
+    display: none;
+  }
 }
 </style>
diff --git a/frontend/src/features/listings/components/HomeZones.vue b/frontend/src/features/listings/components/HomeZones.vue
index 09254d2..49ee55e 100644
--- a/frontend/src/features/listings/components/HomeZones.vue
+++ b/frontend/src/features/listings/components/HomeZones.vue
@@ -35,134 +35,79 @@ function selectZone(key: string) {
 </script>
 
 <template>
-  <div class="zone-tabs">
+  <div class="zone-pill-group">
     <button
       v-for="zone in zones"
       :key="zone.key"
       type="button"
-      class="zone-tab"
+      class="zone-pill-item"
       :class="{ active: activeZone === zone.key }"
+      :title="zone.hint"
       @click="selectZone(zone.key)"
     >
-      <span class="zone-icon" aria-hidden="true">
-        <el-icon><component :is="zoneIcons[zone.key] || Grid" /></el-icon>
-      </span>
-      <span class="zone-title">
-        <strong>{{ zone.label }}</strong>
-        <span class="zone-count" :class="{ 'is-empty': zone.count === 0 }">{{ zone.count }}</span>
-      </span>
-      <small>{{ zone.hint }}</small>
+      <el-icon class="zone-pill-icon"><component :is="zoneIcons[zone.key] || Grid" /></el-icon>
+      <span class="zone-pill-label">{{ zone.label }}</span>
+      <span class="zone-pill-badge" :class="{ 'is-zero': zone.count === 0 }">{{ zone.count }}</span>
     </button>
   </div>
 </template>
 
 <style scoped>
-.zone-tabs {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 12px;
-  min-width: 0;
-}
-
-.zone-tab {
+.zone-pill-group {
   display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 0;
-  padding: 14px;
-  border: 1px solid #eef1f5;
-  border-radius: 14px;
-  background: #ffffff;
-  cursor: pointer;
-  text-align: left;
-  transition:
-    border-color 0.18s ease,
-    background-color 0.18s ease,
-    box-shadow 0.18s ease,
-    transform 0.18s ease;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-.zone-tab:hover {
-  border-color: #ffd4b0;
-  background: #fffaf5;
-  transform: translateY(-1px);
-  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.08);
-}
-
-.zone-tab.active {
-  border-color: #ff6a00;
-  background: #fff7ed;
-  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.1);
-}
-
-.zone-icon {
+.zone-pill-item {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 9px;
-  background: #f3f5f9;
-  color: #94a3b8;
-  font-size: 18px;
-  transition:
-    background-color 0.18s ease,
-    color 0.18s ease;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.18s ease;
 }
 
-.zone-tab:hover .zone-icon,
-.zone-tab.active .zone-icon {
-  background: #ffe6d2;
+.zone-pill-item:hover {
+  border-color: #ffd4b0;
   color: #ff6a00;
+  background: #fffaf5;
 }
 
-.zone-title {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  min-width: 0;
+.zone-pill-item.active {
+  border-color: #ff6a00;
+  background: #ff6a00;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.25);
 }
 
-.zone-title strong {
-  overflow: hidden;
-  font-size: 15px;
-  font-weight: 700;
-  color: #17233d;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.zone-pill-icon {
+  font-size: 14px;
 }
 
-.zone-count {
-  flex-shrink: 0;
-  font-size: 15px;
-  font-weight: 800;
-  color: #ff6a00;
-  font-variant-numeric: tabular-nums;
-}
-
-.zone-count.is-empty {
-  color: #c0c8d4;
+.zone-pill-badge {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 11px;
   font-weight: 700;
 }
 
-.zone-tab small {
-  overflow: hidden;
-  font-size: 12px;
-  color: #7b8798;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.zone-pill-item.active .zone-pill-badge {
+  background: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
 }
 
-@media (max-width: 900px) {
-  .zone-tabs {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 560px) {
-  .zone-tabs {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.zone-pill-badge.is-zero {
+  opacity: 0.6;
 }
 </style>
diff --git a/frontend/src/features/listings/components/ListingCard.vue b/frontend/src/features/listings/components/ListingCard.vue
index 776ce19..435a45e 100644
--- a/frontend/src/features/listings/components/ListingCard.vue
+++ b/frontend/src/features/listings/components/ListingCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import type { Listing } from '@/features/listings'
 import { formatCent, formatMoney } from '@/shared/utils/money'
@@ -18,6 +18,9 @@ import {
   hasAcceleratedSaleRatio,
   hasGiftResources,
   getRatioValue,
+  getCoinWan,
+  formatHafCoinM,
+  readAssetString,
   type ListingDisplayResource,
 } from '@/shared/utils/listingDisplay'
 
@@ -27,36 +30,82 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const coverURL = computed(() => props.listing.cover_url || props.listing.screenshot_urls?.[0] || '')
+// 多图悬浮轮播（Hover Carousel）
+const activeImageIndex = ref(0)
+const screenshotList = computed(() => {
+  const urls = props.listing.screenshot_urls
+  if (Array.isArray(urls) && urls.length > 0) {
+    return urls.filter(Boolean)
+  }
+  if (props.listing.cover_url) {
+    return [props.listing.cover_url]
+  }
+  return []
+})
+
+const activeCoverURL = computed(() => {
+  if (screenshotList.value.length === 0) return ''
+  return screenshotList.value[activeImageIndex.value] || screenshotList.value[0] || ''
+})
+
+function handleCoverMouseMove(e: MouseEvent) {
+  const total = screenshotList.value.length
+  if (total <= 1) return
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const offsetX = Math.max(0, Math.min(e.clientX - rect.left, rect.width))
+  const ratio = offsetX / rect.width
+  const nextIdx = Math.min(total - 1, Math.floor(ratio * total))
+  activeImageIndex.value = nextIdx
+}
+
+function handleCoverMouseLeave() {
+  activeImageIndex.value = 0
+}
+
+// 基础元信息
+const listingCode = computed(() => formatListingCode(props.listing))
 const dailyLoss = computed(() => getDailyLoss(props.listing))
-const skinNames = computed(() => getSkinNames(props.listing))
-const skinGroups = computed(() => getListingSkinGroups(props.listing))
-const skinSummaryText = computed(() =>
-  skinGroups.value.map(group => `${group.title}: ${group.options.join(' / ')}`).join(' ｜ ')
-)
-const chipItems = computed(() => getListingChips(props.listing))
-const resourceItems = computed(() => getListingResources(props.listing))
-const resourceSummaryText = computed(() =>
-  resourceItems.value
-    .map(resource => `${resource.label} ${formatResourceQuantity(resource)}`)
-    .join('、')
-)
-const hasDetailLines = computed(() => skinGroups.value.length > 0 || resourceItems.value.length > 0)
 const rentalDuration = computed(() => formatEstimatedRentalDuration(props.listing))
+const ratioValue = computed(() => getRatioValue(props.listing))
+
+// 核心三大指标（突出买家最关心的资产）
+const hafCoinDisplay = computed(() => formatHafCoinM(getCoinWan(props.listing)))
+const insuranceSlot = computed(() => readAssetString(props.listing, 'season_insurance') || '--')
+const ratioDisplay = computed(() => {
+  if (ratioValue.value <= 0) return null
+  return `1元 = ${ratioValue.value.toFixed(0)}w`
+})
+
+// 平台/区服标签
 const accessTags = computed(() =>
   [getServerRegion(props.listing), getLoginMethod(props.listing)]
     .filter(Boolean)
     .map(item => accessBadgeMeta(item))
 )
-const metaBadges = computed(() =>
-  [
-    { label: formatListingCode(props.listing), tone: 'code' },
-    dailyLoss.value ? { label: `消耗 ${dailyLoss.value}/天`, tone: 'muted' } : null,
-    rentalDuration.value !== '--' ? { label: `租期 ${rentalDuration.value}`, tone: 'muted' } : null,
-    getRatioValue(props.listing) > 0
-      ? { label: `1元=${getRatioValue(props.listing).toFixed(0)}w哈夫币`, tone: 'ratio' }
-      : null,
-  ].filter((item): item is { label: string; tone: string } => Boolean(item))
+
+// 次要属性胶囊（过滤掉已在核心资产栏呈现的哈夫币、保险，以及已在右侧仓库展台呈现的 AWM 等物资）
+const allChips = computed(() => getListingChips(props.listing))
+const secondaryChips = computed(() => {
+  return allChips.value.filter(
+    chip =>
+      chip.label !== '哈夫币' &&
+      chip.label !== '保险格数' &&
+      chip.label !== 'AWM'
+  )
+})
+
+// 皮肤与物资
+const skinNames = computed(() => getSkinNames(props.listing))
+const skinGroups = computed(() => getListingSkinGroups(props.listing))
+const fullSkinSummary = computed(() =>
+  skinGroups.value.map(group => `${group.title}：${group.options.join(' / ')}`).join('\n')
+)
+
+const resourceItems = computed(() => getListingResources(props.listing))
+const fullResourceSummary = computed(() =>
+  resourceItems.value
+    .map(resource => `${resource.label} ${formatResourceQuantity(resource)}`)
+    .join('、')
 )
 
 function formatResourceQuantity(resource: ListingDisplayResource) {
@@ -81,489 +130,771 @@ function formatStatNumber(value: number) {
 </script>
 
 <template>
-  <RouterLink
-    class="listing-card-v2"
-    :class="{ compact: hasDetailLines, relaxed: !hasDetailLines }"
-    :to="`/listings/${listing.id}`"
-  >
-    <div class="card-cover">
+  <RouterLink class="hfb-listing-card" :to="`/listings/${listing.id}`">
+    <!-- 左侧：4:3 黄金比例封面 + 悬浮多图轮播 -->
+    <div
+      class="card-media"
+      @mousemove="handleCoverMouseMove"
+      @mouseleave="handleCoverMouseLeave"
+    >
       <img
-        v-if="coverURL"
-        :src="coverURL"
+        v-if="activeCoverURL"
+        :src="activeCoverURL"
         :alt="getListingTitle(listing)"
         loading="lazy"
         decoding="async"
       />
-      <div v-else class="empty-cover">HFB</div>
-      <div class="cover-badges">
+      <div v-else class="media-empty">HFB</div>
+
+      <!-- 状态浮标 -->
+      <div class="media-badges">
         <span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
         <span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
       </div>
-      <div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
+
+      <!-- 左下角黑金比例浮层 -->
+      <div v-if="ratioValue > 0" class="media-ratio">
+        比例 1:{{ ratioValue.toFixed(1) }}
+      </div>
+
+      <!-- 多图小圆点指示器 -->
+      <div v-if="screenshotList.length > 1" class="media-indicators">
+        <span
+          v-for="(_, index) in screenshotList"
+          :key="index"
+          class="indicator-dot"
+          :class="{ active: index === activeImageIndex }"
+          @mouseenter.stop="activeImageIndex = index"
+        />
+      </div>
     </div>
 
-    <div class="card-details">
-      <h3 :title="getListingTitle(listing)">{{ getListingTitle(listing) }}</h3>
-
-      <div class="meta-flow">
-        <span v-for="badge in metaBadges" :key="badge.label" :class="`tone-${badge.tone}`">
-          {{ badge.label }}
-        </span>
-        <span v-for="tag in accessTags" :key="tag.label" :class="`tone-${tag.tone}`">
-          <van-icon :name="tag.icon" :size="16" />
-          {{ tag.label }}
-        </span>
-      </div>
-
-      <div class="chip-flow">
-        <span v-for="chip in chipItems" :key="chip.label" class="info-chip">
-          {{ chip.label }}:{{ chip.value }}
-        </span>
-      </div>
-
-      <div v-if="skinGroups.length" class="skin-line" :title="skinNames.join('、')">
-        <span class="line-title">皮肤</span>
-        <span class="skin-list">{{ skinSummaryText }}</span>
-        <span class="skin-count">{{ skinNames.length }}款</span>
-      </div>
-
-      <div v-if="resourceItems.length" class="resource-line" :title="resourceSummaryText">
-        <span class="line-title">额外物资</span>
-        <div class="resource-chips">
-          <span v-for="resource in resourceItems" :key="resource.key" class="resource-chip">
-            <em>{{ resource.label }}</em>
-            <strong>{{ formatResourceQuantity(resource) }}</strong>
-            <small v-if="resource.mode === '赠送'">赠送</small>
+    <!-- 中间：双栏结构化信息区（左基础指标 + 右高光装备物资展台） -->
+    <div class="card-content-grid">
+      <!-- 中左栏：基础底子与三大核心资产 -->
+      <div class="content-primary">
+        <div class="header-row">
+          <span class="code-badge">{{ listingCode }}</span>
+          <span v-for="tag in accessTags" :key="tag.label" class="platform-badge" :class="tag.tone">
+            <van-icon :name="tag.icon" :size="13" />
+            <span>{{ tag.label }}</span>
           </span>
+          <span v-if="rentalDuration && rentalDuration !== '--'" class="aux-badge rental-badge">
+            <span class="aux-label">租期</span>
+            <strong class="aux-val">{{ rentalDuration }}</strong>
+          </span>
+          <span v-if="dailyLoss" class="aux-badge loss-badge">
+            <span class="aux-label">消耗</span>
+            <strong class="aux-val">{{ dailyLoss }}/天</strong>
+          </span>
+        </div>
+
+        <div class="key-assets-strip">
+          <div class="asset-card coin-card">
+            <span class="asset-label">哈夫币</span>
+            <strong class="asset-value highlight-orange">{{ hafCoinDisplay }}</strong>
+          </div>
+          <div class="asset-card slot-card">
+            <span class="asset-label">保险格数</span>
+            <strong class="asset-value highlight-blue">{{ insuranceSlot }}</strong>
+          </div>
+          <div v-if="ratioDisplay" class="asset-card ratio-card">
+            <span class="asset-label">折算币比</span>
+            <strong class="asset-value highlight-amber">{{ ratioDisplay }}</strong>
+          </div>
+        </div>
+
+        <div v-if="secondaryChips.length > 0" class="specs-flow">
+          <span v-for="chip in secondaryChips" :key="chip.label" class="spec-tag">
+            <span class="spec-key">{{ chip.label }}</span>
+            <span class="spec-val">{{ chip.value }}</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- 中右栏：高光皮肤展台 & 仓库物资专区（填满横向空白，一目了然） -->
+      <div class="content-showcase">
+        <!-- 皮肤专区展台 -->
+        <div v-if="skinGroups.length > 0" class="showcase-block skin-showcase">
+          <div class="showcase-header">
+            <span class="showcase-title">精选皮肤</span>
+            <el-tooltip
+              v-if="skinNames.length > 4"
+              effect="dark"
+              placement="top"
+              popper-class="hfb-skin-popover"
+            >
+              <template #content>
+                <div class="skin-tooltip-content">
+                  <p v-for="(line, idx) in fullSkinSummary.split('\n')" :key="idx">{{ line }}</p>
+                </div>
+              </template>
+              <span class="showcase-count-badge">共 {{ skinNames.length }} 款 ▾</span>
+            </el-tooltip>
+            <span v-else class="showcase-count-badge">{{ skinNames.length }} 款</span>
+          </div>
+
+          <div class="showcase-chips">
+            <template v-for="group in skinGroups" :key="group.key">
+              <span
+                v-for="opt in group.options.slice(0, 4)"
+                :key="opt"
+                class="skin-pill"
+                :class="`skin-type-${group.key}`"
+              >
+                <i class="quality-dot" />
+                <span>{{ opt }}</span>
+              </span>
+            </template>
+          </div>
+        </div>
+
+        <!-- 贵重物资专区 -->
+        <div v-if="resourceItems.length > 0" class="showcase-block res-showcase" :title="fullResourceSummary">
+          <div class="showcase-header">
+            <span class="showcase-title">仓库物资</span>
+            <span class="showcase-count-badge">{{ resourceItems.length }} 种</span>
+          </div>
+          <div class="showcase-chips">
+            <span v-for="res in resourceItems.slice(0, 6)" :key="res.key" class="res-pill">
+              <span class="res-pill-name">{{ res.label }}</span>
+              <strong class="res-pill-qty">{{ formatResourceQuantity(res) }}</strong>
+              <span v-if="res.mode === '赠送'" class="res-gift-tag">送</span>
+            </span>
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="card-price">
-      <div class="price-main">
-        <small>总租金</small>
-        <strong>¥{{ formatMoney(getListingDisplayPrice(listing)) }}</strong>
+    <!-- 右侧：现代价格与结算行动区 -->
+    <div class="card-action">
+      <div class="price-box">
+        <span class="price-caption">总租金</span>
+        <div class="price-num">
+          <small>¥</small>
+          <strong>{{ formatMoney(getListingDisplayPrice(listing)) }}</strong>
+        </div>
       </div>
-      <div class="price-deposit">
-        <small>押金</small>
-        <span>¥{{ formatCent(listing.deposit_amount_cent) }}</span>
+
+      <div class="deposit-box">
+        <span class="deposit-label">押金</span>
+        <span class="deposit-num">
+          {{ listing.deposit_amount_cent > 0 ? `¥${formatCent(listing.deposit_amount_cent)}` : '免押金' }}
+        </span>
       </div>
-      <button class="rent-btn">立即租用</button>
+
+      <button type="button" class="btn-rent">
+        <span>立即租用</span>
+        <van-icon name="arrow" :size="13" />
+      </button>
     </div>
   </RouterLink>
 </template>
 
 <style scoped>
-.listing-card-v2 {
+.hfb-listing-card {
   display: grid;
-  grid-template-columns: 196px minmax(0, 1fr) 140px;
-  gap: 20px;
-  align-items: start;
-  height: 228px;
-  padding: 16px;
-  border: 1px solid #e7edf6;
-  border-radius: 16px;
+  grid-template-columns: 210px minmax(0, 1fr) 146px;
+  gap: 18px;
+  align-items: center;
+  min-height: 168px;
+  padding: 12px 16px;
+  border: 1px solid #e8edf5;
+  border-radius: 14px;
   background: #ffffff;
-  box-shadow: 0 8px 22px rgba(23, 35, 61, 0.04);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
   text-decoration: none;
   color: inherit;
   transition:
-    border-color 0.2s,
-    box-shadow 0.2s,
-    transform 0.2s;
+    border-color 0.22s ease,
+    box-shadow 0.22s ease,
+    transform 0.22s ease;
 }
 
-.listing-card-v2:hover {
-  border-color: #ff6a00;
-  box-shadow: 0 14px 34px rgba(255, 106, 0, 0.13);
+.hfb-listing-card:hover {
+  border-color: #ff8533;
+  box-shadow: 0 12px 30px rgba(255, 106, 0, 0.12);
   transform: translateY(-2px);
 }
 
-.card-cover {
+/* ========== 左侧封面与多图悬停 ========== */
+.card-media {
   position: relative;
-  align-self: start;
-  width: 100%;
-  aspect-ratio: 1;
+  width: 210px;
+  height: 158px;
   border-radius: 12px;
   overflow: hidden;
-  background: #f3f6fb;
+  background: #f1f5f9;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
-.card-cover img {
+.card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
+  transition: transform 0.25s ease;
 }
 
-.empty-cover {
+.hfb-listing-card:hover .card-media img {
+  transform: scale(1.03);
+}
+
+.media-empty {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  font-size: 24px;
-  font-weight: 900;
+  font-size: 26px;
+  font-weight: 700;
   color: #cbd5e1;
 }
 
-.cover-badges {
+.media-badges {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 8px;
+  left: 8px;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  gap: 5px;
+  z-index: 2;
 }
 
 .badge {
-  padding: 4px 8px;
+  padding: 3px 8px;
   border-radius: 6px;
   font-size: 11px;
-  font-weight: 800;
+  font-weight: 600;
   color: #ffffff;
+  letter-spacing: 0.3px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 .badge.sale {
-  background: #ef4444;
-}
-.badge.gift {
-  background: #10b981;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
 }
 
-.ratio-tag {
+.badge.gift {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.media-ratio {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 8px 10px;
-  background: rgba(33, 28, 24, 0.76);
-  color: #fbbf24;
-  font-size: 13px;
-  font-weight: 900;
+  padding: 6px 10px;
+  background: linear-gradient(to top, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.45));
+  color: #fcd34d;
+  font-size: 12px;
+  font-weight: 700;
   text-align: center;
+  backdrop-filter: blur(2px);
+  z-index: 2;
 }
 
-.card-details {
-  display: grid;
-  align-content: start;
-  gap: 10px;
-  height: 196px;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0;
-}
-
-.listing-card-v2.compact .card-details {
-  gap: 7px;
-}
-
-.listing-card-v2.relaxed .card-details {
-  align-content: center;
-  gap: 14px;
-}
-
-.card-details h3 {
-  margin: 0;
-  color: #111827;
-  font-size: 18px;
-  font-weight: 900;
-  line-height: 1.28;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-.listing-card-v2.relaxed .card-details h3 {
-  font-size: 21px;
-  line-height: 1.3;
-}
-
-.meta-flow,
-.chip-flow,
-.resource-chips {
+.media-indicators {
+  position: absolute;
+  top: 8px;
+  right: 8px;
   display: flex;
-  flex-wrap: nowrap;
+  gap: 4px;
+  padding: 4px 6px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 3;
+}
+
+.indicator-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.4);
+  transition: all 0.2s;
+}
+
+.indicator-dot.active {
+  width: 14px;
+  background: #ffffff;
+}
+
+/* ========== 中部双栏信息流 ========== */
+.card-content-grid {
+  display: grid;
+  grid-template-columns: minmax(360px, 1.15fr) minmax(320px, 1fr);
+  gap: 16px;
+  align-items: center;
+  min-width: 0;
+}
+
+.content-primary {
+  display: flex;
+  flex-direction: column;
   gap: 8px;
   min-width: 0;
-  overflow: hidden;
 }
 
-.meta-flow span {
-  display: inline-flex;
-  flex: 0 0 auto;
+.content-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding-left: 16px;
+  border-left: 1px dashed #e8edf5;
+}
+
+.header-row {
+  display: flex;
   align-items: center;
-  gap: 6px;
-  min-height: 28px;
-  padding: 0 11px;
-  border-radius: 999px;
-  font-size: 13px;
-  font-weight: 900;
-  line-height: 1;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-.listing-card-v2.relaxed .meta-flow span {
-  min-height: 32px;
-  padding: 0 12px;
-  font-size: 14px;
-}
-
-.meta-flow .tone-code {
-  border: 1px solid #dbeafe;
+.code-badge {
+  padding: 2px 8px;
+  border-radius: 6px;
   background: #eff6ff;
   color: #2563eb;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
 }
 
-.meta-flow .tone-muted {
-  background: #eef2f7;
-  color: #64748b;
+.platform-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.meta-flow .tone-ratio {
-  background: #fff7ed;
-  color: #ea580c;
+.platform-badge.wechat {
+  background: #ecfdf5;
+  color: #059669;
 }
 
-.meta-flow .tone-wechat {
-  background: #ecfdf3;
-  color: #07c160;
+.platform-badge.qq {
+  background: #eff6ff;
+  color: #0284c7;
 }
 
-.meta-flow .tone-qq {
-  background: #eaf3ff;
-  color: #12b7f5;
-}
-
-.meta-flow .tone-scan {
-  background: #fff7ed;
-  color: #f97316;
-}
-
-.meta-flow .tone-steam {
-  background: #eef2ff;
-  color: #4f46e5;
-}
-
-.meta-flow .tone-password,
-.meta-flow .tone-default {
+.platform-badge.password,
+.platform-badge.default {
   background: #f1f5f9;
   color: #475569;
 }
 
-.info-chip {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  max-width: 200px;
-  min-height: 28px;
-  padding: 0 11px;
-  border: 1px solid #fed7aa;
-  border-radius: 999px;
+.platform-badge.scan {
   background: #fff7ed;
-  color: #c2410c;
-  font-size: 13px;
-  font-weight: 900;
-  line-height: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.listing-card-v2.relaxed .info-chip {
-  max-width: 240px;
-  min-height: 32px;
-  padding: 0 12px;
-  font-size: 14px;
-}
-
-.skin-line,
-.resource-line {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 36px;
-  min-width: 0;
-  padding: 6px 10px;
-  border-radius: 10px;
-  background: #f8fafc;
-}
-
-.listing-card-v2.compact .skin-line,
-.listing-card-v2.compact .resource-line {
-  height: 32px;
-  padding: 4px 8px;
-  border-radius: 8px;
-}
-
-.skin-line {
-  overflow: hidden;
-  border: 1px solid #edf2f7;
-  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
-}
-
-.line-title {
-  flex: 0 0 auto;
-  color: #94a3b8;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.skin-list {
-  min-width: 0;
-  overflow: hidden;
-  color: #475569;
-  font-size: 13px;
-  font-weight: 900;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.skin-count {
-  flex: 0 0 auto;
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: #e0f2fe;
-  color: #0369a1;
-  font-size: 12px;
-  font-weight: 900;
-}
-
-.resource-chip {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 5px;
-  max-width: 165px;
-  min-height: 26px;
-  padding: 0 11px;
-  border: 1px solid #fed7aa;
-  border-radius: 999px;
-  background: #fff7ed;
-  color: #9a3412;
-  font-size: 13px;
-  font-weight: 900;
-}
-
-.listing-card-v2.compact .resource-chip {
-  min-height: 24px;
-  padding: 0 9px;
-}
-
-.resource-chip em {
-  overflow: hidden;
-  font-style: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.resource-chip strong {
   color: #ea580c;
 }
 
-.resource-chip small {
-  padding: 1px 5px;
-  border-radius: 999px;
-  background: #dcfce7;
+.platform-badge.steam {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.aux-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  border: 1px solid transparent;
+}
+
+.aux-badge .aux-label {
+  font-size: 11px;
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.aux-badge .aux-val {
+  font-weight: 700;
+}
+
+/* 租期：青绿/翡翠色系，突出可租时长保障 */
+.rental-badge {
+  background: #f0fdf4;
+  border-color: #dcfce7;
   color: #15803d;
-  font-size: 10px;
-  font-weight: 800;
 }
 
-.card-price {
-  display: grid;
-  align-self: center;
-  align-content: start;
-  align-items: flex-end;
+.rental-badge .aux-label {
+  color: #16a34a;
+}
+
+.rental-badge .aux-val {
+  color: #15803d;
+}
+
+/* 消耗：温暖柔和琥珀/日落橙色系，突出日损耗提醒 */
+.loss-badge {
+  background: #fffbeb;
+  border-color: #fef3c7;
+  color: #b45309;
+}
+
+.loss-badge .aux-label {
+  color: #d97706;
+}
+
+.loss-badge .aux-val {
+  color: #b45309;
+}
+
+/* 核心资产三大卡片（统一家底灰阶底色，品牌橙为主高光，整体干净高级） */
+.key-assets-strip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 4px 0;
+}
+
+.asset-card {
+  display: inline-flex;
+  align-items: center;
   gap: 8px;
-  padding: 4px 0 4px 16px;
-  border-left: 1px solid #edf2f7;
+  min-height: 38px;
+  padding: 0 16px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  box-sizing: border-box;
 }
 
-.price-main,
-.price-deposit {
+.coin-card {
+  background: #fff9f5;
+  border-color: #fed7aa;
+}
+
+.slot-card {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+.ratio-card {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+.asset-label {
+  font-size: 12px;
+  line-height: 1;
+  color: #64748b;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.asset-value {
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 800;
+  letter-spacing: 0.3px;
+  color: #0f172a;
+  white-space: nowrap;
+}
+
+.highlight-orange {
+  color: #ea580c;
+}
+
+.highlight-blue {
+  color: #0f172a;
+}
+
+.highlight-amber {
+  color: #475569;
+}
+
+/* 次要规格 */
+.specs-flow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.spec-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  font-size: 12px;
+  color: #475569;
+}
+
+.spec-key {
+  color: #94a3b8;
+}
+
+.spec-val {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+/* 右翼：高光展台区块 */
+.showcase-block {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.showcase-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.showcase-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #64748b;
+  letter-spacing: 0.2px;
+}
+
+.showcase-count-badge {
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.showcase-count-badge:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.showcase-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.skin-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  background: #f8fafc;
+  color: #334155;
+}
+
+.quality-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+}
+
+.skin-type-melee {
+  background: #faf5ff;
+  color: #7e22ce;
+}
+.skin-type-melee .quality-dot {
+  background: #a855f7;
+}
+
+.skin-type-operatorGold,
+.skin-type-weaponGold {
+  background: #fffbeb;
+  color: #b45309;
+}
+.skin-type-operatorGold .quality-dot,
+.skin-type-weaponGold .quality-dot {
+  background: #f59e0b;
+}
+
+.skin-type-operatorRed {
+  background: #fff1f2;
+  color: #be123c;
+}
+.skin-type-operatorRed .quality-dot {
+  background: #f43f5e;
+}
+
+.res-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  font-size: 12px;
+  color: #334155;
+}
+
+.res-pill-name {
+  color: #475569;
+  font-weight: 500;
+}
+
+.res-pill-qty {
+  font-weight: 700;
+  color: #ea580c;
+}
+
+.res-gift-tag {
+  padding: 0 4px;
+  border-radius: 3px;
+  background: #10b981;
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+/* ========== 右侧价格与结算区 ========== */
+.card-action {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 4px;
+  justify-content: center;
+  gap: 10px;
+  padding-left: 14px;
+  border-left: 1px solid #f1f5f9;
+  height: 100%;
 }
 
-.price-main small,
-.price-deposit small {
+.price-box {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.price-caption {
   font-size: 12px;
   color: #94a3b8;
-  font-weight: 900;
+  font-weight: 500;
 }
 
-.price-main strong {
-  color: #ff5f00;
-  font-size: 28px;
-  font-weight: 900;
+.price-num {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  color: #ff5500;
+}
+
+.price-num small {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.price-num strong {
+  font-size: 26px;
+  font-weight: 800;
   line-height: 1;
+  letter-spacing: -0.5px;
 }
 
-.price-deposit span {
+.deposit-box {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
   color: #64748b;
-  font-size: 14px;
-  font-weight: 900;
 }
 
-.rent-btn {
+.deposit-label {
+  color: #94a3b8;
+}
+
+.deposit-num {
+  font-weight: 600;
+}
+
+.btn-rent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
   width: 100%;
-  min-height: 42px;
+  min-height: 38px;
   padding: 0 16px;
   border: none;
-  border-radius: 10px;
+  border-radius: 999px;
   background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
   color: #ffffff;
-  font-size: 15px;
-  font-weight: 900;
+  font-size: 14px;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.25);
+  transition: all 0.2s ease;
 }
 
-.rent-btn:hover {
+.btn-rent:hover {
   background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
+  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.35);
   transform: translateY(-1px);
 }
 
-@media (max-width: 1280px) {
-  .listing-card-v2 {
-    grid-template-columns: 176px minmax(0, 1fr) 132px;
-    gap: 16px;
-    height: 208px;
+/* ========== 响应式断点 ========== */
+@media (max-width: 1440px) {
+  .card-content-grid {
+    grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 1fr);
+    gap: 12px;
+  }
+}
+
+@media (max-width: 1240px) {
+  .hfb-listing-card {
+    grid-template-columns: 180px minmax(0, 1fr) 136px;
+    gap: 14px;
+    padding: 12px;
   }
 
-  .card-details {
-    height: 176px;
+  .card-media {
+    width: 180px;
+    height: 135px;
   }
 
-  .card-details h3 {
-    font-size: 17px;
+  .card-content-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
   }
 
-  .listing-card-v2.relaxed .card-details h3 {
-    font-size: 19px;
+  .content-showcase {
+    padding-left: 0;
+    border-left: none;
+    border-top: 1px dashed #e8edf5;
+    padding-top: 6px;
   }
 
-  .meta-flow span,
-  .info-chip,
-  .resource-chip {
-    font-size: 12px;
+  .card-title {
+    font-size: 14px;
   }
 
-  .listing-card-v2.relaxed .meta-flow span,
-  .listing-card-v2.relaxed .info-chip {
-    min-height: 28px;
-    font-size: 12px;
-  }
-
-  .skin-list,
-  .line-title {
-    font-size: 12px;
-  }
-
-  .price-main strong {
-    font-size: 25px;
+  .price-num strong {
+    font-size: 22px;
   }
 }
 </style>
+
+<style>
+.skin-tooltip-content {
+  font-size: 12px;
+  line-height: 1.6;
+  max-width: 320px;
+}
+.skin-tooltip-content p {
+  margin: 2px 0;
+}
+</style>
diff --git a/frontend/src/features/listings/views/HomeView.vue b/frontend/src/features/listings/views/HomeView.vue
index 8856452..dd16c2c 100644
--- a/frontend/src/features/listings/views/HomeView.vue
+++ b/frontend/src/features/listings/views/HomeView.vue
@@ -36,7 +36,6 @@ import {
 import { useListingQuery } from '@/features/listings/composables/useListingQuery'
 import HomeAnnouncement from '../components/HomeAnnouncement.vue'
 import HomeBanner from '../components/HomeBanner.vue'
-import HomeStats from '../components/HomeStats.vue'
 import HomeFilters from '../components/HomeFilters.vue'
 import HomeZones from '../components/HomeZones.vue'
 import ListingCard from '../components/ListingCard.vue'
@@ -358,18 +357,23 @@ loadHome()
 
     <main class="home-content">
       <div class="hero-section">
-        <HomeBanner :banners="banners" />
-        <HomeStats :stats="statCards" />
+        <HomeBanner :banners="banners" :stats="statCards" />
       </div>
 
       <div class="biz-entry-grid" aria-label="业务入口">
         <RouterLink class="biz-entry" to="/">
-          <strong>租号大厅</strong>
-          <small>高哈夫币 · 安全交接 · 随租随玩</small>
+          <div class="biz-title-row">
+            <strong>租号大厅</strong>
+            <small>安全交接 · 随租随玩</small>
+          </div>
+          <van-icon name="arrow" :size="12" class="biz-arrow" />
         </RouterLink>
         <RouterLink class="biz-entry crash" to="/crash">
-          <strong>撞车 <em>NEW</em></strong>
-          <small>选购商品 · 支付后进群联系客服</small>
+          <div class="biz-title-row">
+            <strong>撞车 <em>NEW</em></strong>
+            <small>选购商品 · 进群交接</small>
+          </div>
+          <van-icon name="arrow" :size="12" class="biz-arrow" />
         </RouterLink>
         <button
           v-if="awRecycle.enabled"
@@ -377,8 +381,11 @@ loadHome()
           class="biz-entry aw-recycle"
           @click="openAWRecycle"
         >
-          <strong>{{ awRecycle.title }}</strong>
-          <small>{{ awRecycle.subtitle }}</small>
+          <div class="biz-title-row">
+            <strong>{{ awRecycle.title }}</strong>
+            <small>{{ awRecycle.subtitle }}</small>
+          </div>
+          <van-icon name="arrow" :size="12" class="biz-arrow" />
         </button>
         <button
           v-if="cooperationFeedback.enabled"
@@ -386,8 +393,11 @@ loadHome()
           class="biz-entry cooperation-feedback"
           @click="openCooperationFeedback"
         >
-          <strong>{{ cooperationFeedback.title }}</strong>
-          <small>{{ cooperationFeedback.subtitle }}</small>
+          <div class="biz-title-row">
+            <strong>{{ cooperationFeedback.title }}</strong>
+            <small>{{ cooperationFeedback.subtitle }}</small>
+          </div>
+          <van-icon name="arrow" :size="12" class="biz-arrow" />
         </button>
       </div>
 
@@ -444,11 +454,13 @@ loadHome()
         @reset="handleResetFilters"
       />
 
-      <div class="list-head">
-        <div class="zone-head">
-          <p class="eyebrow">Account Zone</p>
-          <h2>账号专区</h2>
-        </div>
+      <!-- 专区与排序合并为同一行极简操作条 -->
+      <div class="list-control-bar">
+        <HomeZones
+          :zones="zoneOptions"
+          :active-zone="activeZone"
+          @update:active-zone="activeZone = $event"
+        />
         <div class="list-actions sort-bar" role="group" aria-label="排序方式">
           <button
             v-for="item in sortOptions"
@@ -463,12 +475,6 @@ loadHome()
         </div>
       </div>
 
-      <HomeZones
-        :zones="zoneOptions"
-        :active-zone="activeZone"
-        @update:active-zone="activeZone = $event"
-      />
-
       <div v-if="!loading && listings.length === 0" class="home-empty-state">
         <strong>没有符合条件的账号</strong>
         <span>可以放宽筛选条件或切回全部专区。</span>
@@ -489,7 +495,7 @@ loadHome()
 <style scoped>
 .pc-home-redesign {
   display: grid;
-  gap: 20px;
+  gap: 12px;
   width: 100%;
   max-width: 1720px;
   min-width: 0;
@@ -499,7 +505,12 @@ loadHome()
 
 .home-content {
   display: grid;
-  gap: 20px;
+  gap: 12px;
+  min-width: 0;
+}
+
+.hero-section {
+  width: 100%;
   min-width: 0;
 }
 
@@ -511,54 +522,83 @@ loadHome()
 
 .biz-entry {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 16px 18px;
-  border-radius: 14px;
-  border: 1px solid #eef1f5;
-  background: #fff;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 52px;
+  padding: 12px 18px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
   text-decoration: none;
-  text-align: left;
   cursor: pointer;
   font: inherit;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
   transition:
-    border-color 0.18s ease,
-    box-shadow 0.18s ease;
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 .biz-entry:hover {
-  border-color: #ffd4b0;
+  border-color: #ffbe98;
   box-shadow: 0 6px 16px rgba(255, 106, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.biz-title-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
 }
 
 .biz-entry strong {
-  color: #17233d;
-  font-size: 16px;
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
 }
 
 .biz-entry small {
-  color: #7b8798;
-  font-size: 13px;
+  color: #64748b;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.biz-arrow {
+  color: #94a3b8;
+  flex-shrink: 0;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.biz-entry:hover .biz-arrow {
+  color: #ff6a00;
+  transform: translateX(2px);
 }
 
 .biz-entry.crash strong em {
   margin-left: 6px;
-  padding: 1px 6px;
+  padding: 2px 6px;
   border-radius: 999px;
   background: #ff6a00;
   color: #fff;
-  font-size: 11px;
+  font-size: 10px;
   font-style: normal;
+  font-weight: 700;
 }
 
 .biz-entry.aw-recycle {
-  border-color: #e8edff;
-  background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%);
+  border-color: #e0e7ff;
+  background: linear-gradient(135deg, #ffffff 0%, #f6f8fe 100%);
 }
 
 .biz-entry.cooperation-feedback {
-  border-color: #d9f0e5;
-  background: linear-gradient(135deg, #ffffff 0%, #f1fbf6 100%);
+  border-color: #ccfbf1;
+  background: linear-gradient(135deg, #ffffff 0%, #f0fdf9 100%);
 }
 
 :deep(.aw-recycle-image) {
@@ -572,74 +612,47 @@ loadHome()
 
 @media (max-width: 960px) {
   .biz-entry-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 .infinite-load-state {
-  padding: 6px 0 18px;
+  padding: 12px 0 24px;
   color: #94a3b8;
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 600;
   text-align: center;
 }
 
-.hero-section {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 20px;
-  min-width: 0;
-}
-
-.list-head {
+/* 专区与排序单行交互条 */
+.list-control-bar {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
-  gap: 16px;
+  align-items: center;
+  gap: 12px;
   flex-wrap: wrap;
-}
-
-.zone-head {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.eyebrow {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: #ff6a00;
-}
-
-.zone-head h2 {
-  margin: 0;
-  font-size: 28px;
-  font-weight: 900;
-  color: #17233d;
+  padding: 2px 0;
 }
 
 .sort-bar {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
-  padding: 4px;
-  border-radius: 12px;
-  background: #f3f5f9;
+  padding: 3px;
+  border-radius: 10px;
+  background: #f1f5f9;
 }
 
 .sort-chip {
-  min-height: 32px;
-  padding: 0 14px;
+  min-height: 28px;
+  padding: 0 12px;
   border: none;
-  border-radius: 9px;
+  border-radius: 8px;
   background: transparent;
   color: #64748b;
-  font-size: 13px;
-  font-weight: 700;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
   transition:
     background 0.15s ease,
@@ -648,14 +661,14 @@ loadHome()
 }
 
 .sort-chip:hover {
-  color: #334155;
-  background: rgba(255, 255, 255, 0.7);
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.8);
 }
 
 .sort-chip.active {
   background: #ffffff;
   color: #ff6a00;
-  box-shadow: 0 1px 4px rgba(23, 35, 61, 0.08);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
 }
 
 .enhanced-desktop-list {