From 9ed63e9aecd65dc3f2d217111bea54c09c23e456 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sun, 6 Sep 2026 19:51:55 +0800
Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E6=89=A7=E8=A1=8C=20prettie?=
 =?UTF-8?q?r=20=E8=A7=84=E8=8C=83=E6=A0=BC=E5=BC=8F=E5=8C=96=E5=B9=B6?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=9C=AA=E4=BD=BF=E7=94=A8=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listings/components/ListingCard.vue       | 30 +++++------
 .../src/features/listings/views/HomeView.vue  |  4 +-
 .../listings/views/ListingDetailView.vue      | 53 +++++++++++++------
 .../listings/views/MobileHomeView.css         |  5 +-
 .../listings/views/MobileHomeView.vue         | 18 +++----
 .../views/MobileListingDetailView.vue         | 42 +++++++++------
 frontend/src/shared/utils/listingDisplay.ts   |  5 +-
 7 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/frontend/src/features/listings/components/ListingCard.vue b/frontend/src/features/listings/components/ListingCard.vue
index 84cd862..713fe7c 100644
--- a/frontend/src/features/listings/components/ListingCard.vue
+++ b/frontend/src/features/listings/components/ListingCard.vue
@@ -88,10 +88,7 @@ const accessTags = computed(() =>
 const allChips = computed(() => getListingChips(props.listing))
 const secondaryChips = computed(() => {
   return allChips.value.filter(
-    chip =>
-      chip.label !== '哈夫币' &&
-      chip.label !== '保险格数' &&
-      chip.label !== 'AWM'
+    chip => chip.label !== '哈夫币' && chip.label !== '保险格数' && chip.label !== 'AWM'
   )
 })
 
@@ -133,11 +130,7 @@ function formatStatNumber(value: number) {
 <template>
   <RouterLink class="hfb-listing-card" :to="`/listings/${listing.id}`">
     <!-- 左侧：4:3 黄金比例封面 + 悬浮多图轮播 -->
-    <div
-      class="card-media"
-      @mousemove="handleCoverMouseMove"
-      @mouseleave="handleCoverMouseLeave"
-    >
+    <div class="card-media" @mousemove="handleCoverMouseMove" @mouseleave="handleCoverMouseLeave">
       <img
         v-if="activeCoverURL"
         :src="activeCoverURL"
@@ -154,9 +147,7 @@ function formatStatNumber(value: number) {
       </div>
 
       <!-- 左下角黑金比例浮层 -->
-      <div v-if="ratioValue > 0" class="media-ratio">
-        比例 1:{{ ratioValue.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">
@@ -203,7 +194,8 @@ function formatStatNumber(value: number) {
             <strong
               class="asset-value"
               :class="isTopTierInsurance(insuranceSlot) ? 'highlight-orange' : 'highlight-blue'"
-            >{{ insuranceSlot }}</strong>
+              >{{ insuranceSlot }}</strong
+            >
           </div>
           <div v-if="ratioDisplay" class="asset-card ratio-card">
             <span class="asset-label">折算币比</span>
@@ -257,7 +249,11 @@ function formatStatNumber(value: number) {
         </div>
 
         <!-- 贵重物资专区 -->
-        <div v-if="resourceItems.length > 0" class="showcase-block res-showcase" :title="fullResourceSummary">
+        <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>
@@ -286,7 +282,11 @@ function formatStatNumber(value: number) {
       <div class="deposit-box">
         <span class="deposit-label">押金</span>
         <span class="deposit-num">
-          {{ listing.deposit_amount_cent > 0 ? `¥${formatCent(listing.deposit_amount_cent)}` : '免押金' }}
+          {{
+            listing.deposit_amount_cent > 0
+              ? `¥${formatCent(listing.deposit_amount_cent)}`
+              : '免押金'
+          }}
         </span>
       </div>
 
diff --git a/frontend/src/features/listings/views/HomeView.vue b/frontend/src/features/listings/views/HomeView.vue
index dd16c2c..7db1d46 100644
--- a/frontend/src/features/listings/views/HomeView.vue
+++ b/frontend/src/features/listings/views/HomeView.vue
@@ -572,7 +572,9 @@ loadHome()
 .biz-arrow {
   color: #94a3b8;
   flex-shrink: 0;
-  transition: transform 0.2s ease, color 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    color 0.2s ease;
 }
 
 .biz-entry:hover .biz-arrow {
diff --git a/frontend/src/features/listings/views/ListingDetailView.vue b/frontend/src/features/listings/views/ListingDetailView.vue
index dfdb9ee..2845a24 100644
--- a/frontend/src/features/listings/views/ListingDetailView.vue
+++ b/frontend/src/features/listings/views/ListingDetailView.vue
@@ -230,10 +230,7 @@ const totalSkinCount = computed(() => {
 const secondaryChips = computed(() => {
   if (!listing.value) return []
   return getListingChips(listing.value).filter(
-    chip =>
-      chip.label !== '哈夫币' &&
-      chip.label !== '保险格数' &&
-      chip.label !== 'AWM'
+    chip => chip.label !== '哈夫币' && chip.label !== '保险格数' && chip.label !== 'AWM'
   )
 })
 
@@ -267,7 +264,9 @@ const resourceItems = computed(() => {
 
 function formatResourceQuantity(resource: ListingDisplayResource) {
   const suffix = resource.key === 'awmAmmo' ? '发' : ''
-  const val = Number.isInteger(resource.quantity) ? String(resource.quantity) : resource.quantity.toFixed(1)
+  const val = Number.isInteger(resource.quantity)
+    ? String(resource.quantity)
+    : resource.quantity.toFixed(1)
   return `${val}${suffix}`
 }
 
@@ -419,7 +418,9 @@ function goBack() {
 
       <div class="safe-notice-strip">
         <van-icon name="shield-o" class="safe-icon" :size="16" />
-        <span class="safe-text">平台官方担保：下单后请严格按照平台交付流程确认收号与归还，切勿脱离平台私下交易。</span>
+        <span class="safe-text"
+          >平台官方担保：下单后请严格按照平台交付流程确认收号与归还，切勿脱离平台私下交易。</span
+        >
       </div>
     </div>
 
@@ -431,12 +432,22 @@ function goBack() {
         <section class="detail-card header-card">
           <div class="header-meta-row">
             <div class="meta-tags-wrap">
-              <button class="code-badge-btn" type="button" @click="copyListingCode" title="点击复制商品编号">
+              <button
+                class="code-badge-btn"
+                type="button"
+                @click="copyListingCode"
+                title="点击复制商品编号"
+              >
                 <span>{{ formatListingCode(listing) }}</span>
                 <el-icon :size="12"><DocumentCopy /></el-icon>
               </button>
 
-              <span v-for="tag in accessTags" :key="tag.label" class="platform-pill" :class="tag.tone">
+              <span
+                v-for="tag in accessTags"
+                :key="tag.label"
+                class="platform-pill"
+                :class="tag.tone"
+              >
                 <van-icon :name="tag.icon" :size="13" />
                 <span>{{ tag.label }}</span>
               </span>
@@ -482,15 +493,13 @@ function goBack() {
             </div>
 
             <!-- 保险格数 -->
-            <div
-              class="asset-tile slot-tile"
-              :class="{ 'top-insurance': isTopTierInsuranceSlot }"
-            >
+            <div class="asset-tile slot-tile" :class="{ 'top-insurance': isTopTierInsuranceSlot }">
               <span class="tile-label">安全箱格数</span>
               <strong
                 class="tile-value"
                 :class="isTopTierInsuranceSlot ? 'text-orange' : 'text-slate'"
-              >{{ insuranceSlot }}</strong>
+                >{{ insuranceSlot }}</strong
+              >
             </div>
 
             <!-- 折算币比 -->
@@ -573,7 +582,9 @@ function goBack() {
           <div class="section-title-bar">
             <div class="title-left">
               <h2>账号核心档案</h2>
-              <span class="title-tip">{{ formatGameName(listing.game_name, '三角洲行动') }} 资产详细规格</span>
+              <span class="title-tip"
+                >{{ formatGameName(listing.game_name, '三角洲行动') }} 资产详细规格</span
+              >
             </div>
           </div>
 
@@ -661,7 +672,9 @@ function goBack() {
           </div>
           <div class="seller-note-box">
             <van-icon name="chat-o" :size="18" class="note-quote-icon" />
-            <p class="note-content">{{ listing.description || '号主暂未填写特殊交接要求，可正常直接下单租用。' }}</p>
+            <p class="note-content">
+              {{ listing.description || '号主暂未填写特殊交接要求，可正常直接下单租用。' }}
+            </p>
           </div>
         </section>
 
@@ -762,7 +775,11 @@ function goBack() {
                 <small class="dep-sub">归还验收无损自动原路退还</small>
               </div>
               <strong class="dep-val">
-                {{ listing.deposit_amount_cent > 0 ? `¥${formatCent(listing.deposit_amount_cent)}` : '免押金' }}
+                {{
+                  listing.deposit_amount_cent > 0
+                    ? `¥${formatCent(listing.deposit_amount_cent)}`
+                    : '免押金'
+                }}
               </strong>
             </div>
           </div>
@@ -771,7 +788,9 @@ function goBack() {
           <div class="order-quick-summary">
             <div class="summary-item">
               <span class="s-label">区服方式</span>
-              <strong class="s-val">{{ getServerRegion(listing) }} · {{ getLoginMethod(listing) }}</strong>
+              <strong class="s-val"
+                >{{ getServerRegion(listing) }} · {{ getLoginMethod(listing) }}</strong
+              >
             </div>
             <div class="summary-item">
               <span class="s-label">预计可租</span>
diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css
index 33e1df3..2282614 100644
--- a/frontend/src/features/listings/views/MobileHomeView.css
+++ b/frontend/src/features/listings/views/MobileHomeView.css
@@ -599,7 +599,10 @@
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
   text-decoration: none;
   color: inherit;
-  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+  transition:
+    transform 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
 .mobile-card:active {
diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
index 25c9412..7579491 100644
--- a/frontend/src/features/listings/views/MobileHomeView.vue
+++ b/frontend/src/features/listings/views/MobileHomeView.vue
@@ -43,7 +43,6 @@ import {
 import {
   getListingChips,
   getListingDisplayPrice,
-  getListingTitle,
   getDailyLoss,
   getRatioValue,
   formatListingCode,
@@ -774,13 +773,6 @@ function getAccessBadgeMeta(value: string) {
   return { icon: 'bookmark-o', tone: 'default' }
 }
 
-function getMobileRatioText(item: Listing) {
-  const ratio = getRatioValue(item)
-  if (ratio <= 0) return ''
-  const formatted = Number.isInteger(ratio) ? String(ratio) : ratio.toFixed(1)
-  return `1元=${formatted}w哈夫币`
-}
-
 function getItemHafCoin(item: Listing) {
   return formatHafCoinM(getCoinWan(item))
 }
@@ -1091,7 +1083,8 @@ syncMobileHomeQuery()
                       <strong
                         class="c-val"
                         :class="isTopTierInsurance(getItemInsurance(item)) ? 'orange' : 'slate'"
-                      >{{ getItemInsurance(item) }}</strong>
+                        >{{ getItemInsurance(item) }}</strong
+                      >
                     </div>
                     <div v-if="getItemRatioText(item)" class="core-asset-card ratio-card">
                       <span class="c-label">币比</span>
@@ -1132,7 +1125,12 @@ syncMobileHomeQuery()
                         <strong>{{ formatMoney(getListingDisplayPrice(item)) }}</strong>
                       </div>
                       <span class="deposit-text">
-                        押金 {{ item.deposit_amount_cent > 0 ? `¥${formatCent(item.deposit_amount_cent)}` : '免押' }}
+                        押金
+                        {{
+                          item.deposit_amount_cent > 0
+                            ? `¥${formatCent(item.deposit_amount_cent)}`
+                            : '免押'
+                        }}
                       </span>
                     </div>
 
diff --git a/frontend/src/features/listings/views/MobileListingDetailView.vue b/frontend/src/features/listings/views/MobileListingDetailView.vue
index 5f29c0e..b00ad78 100644
--- a/frontend/src/features/listings/views/MobileListingDetailView.vue
+++ b/frontend/src/features/listings/views/MobileListingDetailView.vue
@@ -229,10 +229,7 @@ const totalSkinCount = computed(() => {
 const secondaryChips = computed(() => {
   if (!listing.value) return []
   return getListingChips(listing.value).filter(
-    chip =>
-      chip.label !== '哈夫币' &&
-      chip.label !== '保险格数' &&
-      chip.label !== 'AWM'
+    chip => chip.label !== '哈夫币' && chip.label !== '保险格数' && chip.label !== 'AWM'
   )
 })
 
@@ -266,7 +263,9 @@ const resourceItems = computed(() => {
 
 function formatResourceQuantity(resource: any) {
   const suffix = resource.key === 'awmAmmo' ? '发' : ''
-  const val = Number.isInteger(resource.quantity) ? String(resource.quantity) : resource.quantity.toFixed(1)
+  const val = Number.isInteger(resource.quantity)
+    ? String(resource.quantity)
+    : resource.quantity.toFixed(1)
   return `${val}${suffix}`
 }
 
@@ -422,7 +421,12 @@ function handleToggleFavorite() {
               <span>{{ formatListingCode(listing) }}</span>
               <van-icon name="notes-o" :size="12" />
             </button>
-            <span v-for="tag in accessTags" :key="tag.label" class="platform-pill" :class="tag.tone">
+            <span
+              v-for="tag in accessTags"
+              :key="tag.label"
+              class="platform-pill"
+              :class="tag.tone"
+            >
               <van-icon :name="tag.icon" :size="12" />
               <span>{{ tag.label }}</span>
             </span>
@@ -448,7 +452,9 @@ function handleToggleFavorite() {
         </div>
 
         <h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
-        <p v-if="getListingSubtitle(listing)" class="detail-desc">{{ getListingSubtitle(listing) }}</p>
+        <p v-if="getListingSubtitle(listing)" class="detail-desc">
+          {{ getListingSubtitle(listing) }}
+        </p>
 
         <!-- 核心资产四大微卡（完全对标 PC 详情页与首页标准） -->
         <div class="core-assets-bar">
@@ -459,15 +465,13 @@ function handleToggleFavorite() {
           </div>
 
           <!-- 安全箱格数 -->
-          <div
-            class="asset-tile slot-tile"
-            :class="{ 'top-insurance': isTopTierInsuranceSlot }"
-          >
+          <div class="asset-tile slot-tile" :class="{ 'top-insurance': isTopTierInsuranceSlot }">
             <span class="tile-label">安全箱格数</span>
             <strong
               class="tile-value"
               :class="isTopTierInsuranceSlot ? 'text-orange' : 'text-slate'"
-            >{{ insuranceSlot }}</strong>
+              >{{ insuranceSlot }}</strong
+            >
           </div>
 
           <!-- 折算币比 -->
@@ -635,7 +639,9 @@ function handleToggleFavorite() {
         </div>
         <div class="seller-note-box">
           <van-icon name="chat-o" :size="18" class="note-quote-icon" />
-          <p class="note-content">{{ listing.description || '号主暂未填写特殊交接要求，可正常直接下单租用。' }}</p>
+          <p class="note-content">
+            {{ listing.description || '号主暂未填写特殊交接要求，可正常直接下单租用。' }}
+          </p>
         </div>
       </div>
 
@@ -705,9 +711,15 @@ function handleToggleFavorite() {
             </div>
           </div>
           <div class="order-price-detail">
-            <span v-if="orderPriceBreakdown.consumable > 0">含物资¥{{ formatMoney(orderPriceBreakdown.consumable) }}</span>
+            <span v-if="orderPriceBreakdown.consumable > 0"
+              >含物资¥{{ formatMoney(orderPriceBreakdown.consumable) }}</span
+            >
             <span class="deposit-tag">
-              {{ listing.deposit_amount_cent > 0 ? `押金¥${formatCent(listing.deposit_amount_cent)}(退)` : '免押金' }}
+              {{
+                listing.deposit_amount_cent > 0
+                  ? `押金¥${formatCent(listing.deposit_amount_cent)}(退)`
+                  : '免押金'
+              }}
             </span>
           </div>
         </div>
diff --git a/frontend/src/shared/utils/listingDisplay.ts b/frontend/src/shared/utils/listingDisplay.ts
index 3792658..fe440c5 100644
--- a/frontend/src/shared/utils/listingDisplay.ts
+++ b/frontend/src/shared/utils/listingDisplay.ts
@@ -405,6 +405,7 @@ function formatCompactNumber(value: number) {
 export function isTopTierInsurance(value: string | undefined | null): boolean {
   if (!value) return false
   const s = String(value).trim().toLowerCase()
-  return s.includes('3*3') || s.includes('3x3') || s.includes('3×3') || s === '9格' || s.includes('9格')
+  return (
+    s.includes('3*3') || s.includes('3x3') || s.includes('3×3') || s === '9格' || s.includes('9格')
+  )
 }
-