From 3b4cd76e425d176385c9bcb47d01d3ed399304fe Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 13 Jun 2026 18:45:49 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=A7=9F=E6=9C=9F=20=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listings/views/MobileHomeView.css         | 10 ++++++++--
 .../listings/views/MobileHomeView.vue         | 19 ++++++++++++++++---
 .../views/MobileListingDetailView.vue         | 18 ++++++++++++++----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css
index 5fff751..04ccb98 100644
--- a/frontend/src/features/listings/views/MobileHomeView.css
+++ b/frontend/src/features/listings/views/MobileHomeView.css
@@ -520,7 +520,7 @@
 }
 
 .mobile-listing-no,
-.daily-loss-badge {
+.rental-meta-badge {
   display: inline-flex;
   width: fit-content;
   align-items: center;
@@ -534,10 +534,16 @@
   line-height: 1.2;
 }
 
-.daily-loss-badge {
+.rental-meta-badge {
+  gap: 2px;
   border: none;
   background: #f5f7fa;
   color: #64748b;
+  white-space: nowrap;
+}
+
+.meta-separator {
+  color: #cbd5e1;
 }
 
 .card-subtitle {
diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
index ba72c3f..97a83c3 100644
--- a/frontend/src/features/listings/views/MobileHomeView.vue
+++ b/frontend/src/features/listings/views/MobileHomeView.vue
@@ -43,6 +43,7 @@ import {
   getDailyLoss,
   getRatioValue,
   formatListingCode,
+  formatEstimatedRentalDuration,
   getLoginMethod,
   getServerRegion,
   assetRegions,
@@ -754,9 +755,21 @@ syncMobileHomeQuery()
                 <h2>{{ getListingTitle(item) }}</h2>
               </div>
               <div class="card-meta-row">
-                <div class="mobile-listing-no">编号 {{ formatListingCode(item) }}</div>
-                <div v-if="getDailyLoss(item)" class="daily-loss-badge">
-                  消耗 {{ getDailyLoss(item) }}/天
+                <div class="mobile-listing-no">{{ formatListingCode(item) }}</div>
+                <div
+                  v-if="getDailyLoss(item) || formatEstimatedRentalDuration(item) !== '--'"
+                  class="rental-meta-badge"
+                >
+                  <span v-if="getDailyLoss(item)">消耗 {{ getDailyLoss(item) }}/天</span>
+                  <span
+                    v-if="getDailyLoss(item) && formatEstimatedRentalDuration(item) !== '--'"
+                    class="meta-separator"
+                  >
+                    ·
+                  </span>
+                  <span v-if="formatEstimatedRentalDuration(item) !== '--'">
+                    租期 {{ formatEstimatedRentalDuration(item) }}
+                  </span>
                 </div>
               </div>
               <div class="card-action-row">
diff --git a/frontend/src/features/listings/views/MobileListingDetailView.vue b/frontend/src/features/listings/views/MobileListingDetailView.vue
index aa06415..686a073 100644
--- a/frontend/src/features/listings/views/MobileListingDetailView.vue
+++ b/frontend/src/features/listings/views/MobileListingDetailView.vue
@@ -17,6 +17,7 @@ import { formatCent, formatMoney } from '@/shared/utils/money'
 import {
   assetRegions,
   formatAssetNumber,
+  formatEstimatedRentalDuration,
   formatHafCoinM,
   formatListingCode,
   formatRatio,
@@ -108,6 +109,11 @@ const detailMetrics = computed(() => {
       value: dailyLoss ? `${dailyLoss}/天` : '--',
       tone: 'coin',
     },
+    {
+      label: '预计可租',
+      value: formatEstimatedRentalDuration(listing.value),
+      tone: 'coin',
+    },
     {
       label: '价格',
       value: `¥${formatMoney(getListingDisplayPrice(listing.value))}`,
@@ -269,7 +275,6 @@ function updateAgreementReadState(type: 'virtual' | 'renter') {
   }
 }
 
-
 async function copyListingCode() {
   if (!listing.value) return
   try {
@@ -295,7 +300,12 @@ function handleToggleFavorite() {
         <van-icon name="arrow-left" :size="20" />
       </button>
       <h1>账号详情</h1>
-      <button v-if="listing" class="favorite-header-btn" type="button" @click="handleToggleFavorite">
+      <button
+        v-if="listing"
+        class="favorite-header-btn"
+        type="button"
+        @click="handleToggleFavorite"
+      >
         <van-icon :name="listingFavorited ? 'star' : 'star-o'" :size="20" />
       </button>
     </header>
@@ -340,7 +350,7 @@ function handleToggleFavorite() {
           <van-tag v-if="listing.rank_level" plain size="medium">{{ listing.rank_level }}</van-tag>
         </div>
         <button class="mobile-code-chip" type="button" @click="copyListingCode">
-          编号 {{ formatListingCode(listing) }}
+          {{ formatListingCode(listing) }}
         </button>
         <button class="mobile-favorite-chip" type="button" @click="handleToggleFavorite">
           <van-icon :name="listingFavorited ? 'star' : 'star-o'" :size="15" />
@@ -697,7 +707,7 @@ function handleToggleFavorite() {
 /* ========== 资产指标 ========== */
 .metric-row {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
   padding: 0 12px;
 }