feat(listings): 订单和账号详情展示可租时长与每日消耗

租客在订单列表和详情标题能看到每个号的租期、消耗。账号详情把这两项拆成独立格子。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/features/listings/views/ListingDetailView.css

@@ -284,14 +284,18 @@
   color: #64748b;
 }
 
-/* 核心资产四大微卡 */
+/* 核心资产：有币比时五个并排，没有币比时四个并排 */
 .core-assets-bar {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px;
   margin-top: 18px;
 }
 
+.core-assets-bar.has-ratio {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
 .asset-tile {
   display: flex;
   flex-direction: column;
@@ -312,6 +316,16 @@
   border-color: #fed7aa;
 }
 
+.rental-tile {
+  background: #f0fdf4;
+  border-color: #86efac;
+}
+
+.loss-tile {
+  background: #fff7ed;
+  border-color: #fdba74;
+}
+
 .tile-label {
   font-size: 12px;
   font-weight: 500;
@@ -325,6 +339,10 @@
   letter-spacing: -0.02em;
 }
 
+.core-assets-bar.has-ratio .tile-value {
+  font-size: 20px;
+}
+
 .text-orange {
   color: #ea580c;
 }
@@ -337,32 +355,12 @@
   color: #475569;
 }
 
-.tile-subvalues {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.val-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 8px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.val-pill.green {
-  background: #f0fdf4;
-  border: 1px solid #dcfce7;
+.text-green {
   color: #15803d;
 }
 
-.val-pill.warm {
-  background: #fffbeb;
-  border: 1px solid #fef3c7;
-  color: #b45309;
+.text-warm {
+  color: #c2410c;
 }
 
 /* ---------- 2. 验号图片展台 (Gallery Card) ---------- */
@@ -1179,8 +1177,22 @@
     align-items: flex-start;
   }
 
-  .core-assets-bar {
-    grid-template-columns: repeat(2, 1fr);
+  .core-assets-bar,
+  .core-assets-bar.has-ratio {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .core-assets-bar .asset-tile {
+    grid-column: span 3;
+  }
+
+  .core-assets-bar.has-ratio .asset-tile {
+    grid-column: span 2;
+  }
+
+  .core-assets-bar.has-ratio .rental-tile,
+  .core-assets-bar.has-ratio .loss-tile {
+    grid-column: span 3;
   }
 
   .specs-grid {

frontend/src/features/listings/views/ListingDetailView.vue

@@ -489,8 +489,8 @@ function goBack() {
             </p>
           </div>
 
-          <!-- 核心资产四大微卡（完全对齐首页） -->
-          <div class="core-assets-bar">
+          <!-- 核心资产：哈夫币、安全箱、币比、可租、消耗 -->
+          <div class="core-assets-bar" :class="{ 'has-ratio': ratioDisplay }">
             <!-- 哈夫币 -->
             <div class="asset-tile coin-tile">
               <span class="tile-label">哈夫币资产</span>
@@ -513,13 +513,16 @@ function goBack() {
               <strong class="tile-value text-amber">{{ ratioDisplay }}</strong>
             </div>
 
-            <!-- 租期与日耗 -->
             <div class="asset-tile rental-tile">
-              <span class="tile-label">租用与损耗</span>
-              <div class="tile-subvalues">
-                <span class="val-pill green">可租 {{ rentalDuration }}</span>
-                <span v-if="dailyLoss" class="val-pill warm">消耗 {{ dailyLoss }}/天</span>
-              </div>
+              <span class="tile-label">可租</span>
+              <strong class="tile-value text-green">{{ rentalDuration }}</strong>
+            </div>
+
+            <div class="asset-tile loss-tile">
+              <span class="tile-label">消耗</span>
+              <strong class="tile-value text-warm">{{
+                dailyLoss ? `${dailyLoss}/天` : '--'
+              }}</strong>
             </div>
           </div>
         </section>

frontend/src/features/listings/views/MobileListingDetailView.css

@@ -262,14 +262,27 @@
   line-height: 1.5;
 }
 
-/* 核心资产四大微卡 (2x2 网格对齐移动端体验) */
+/* 核心资产：有币比时上三下二，没有币比时两列 */
 .core-assets-bar {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   margin-top: 10px;
 }
 
+.core-assets-bar.has-ratio {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.core-assets-bar.has-ratio .asset-tile {
+  grid-column: span 2;
+}
+
+.core-assets-bar.has-ratio .rental-tile,
+.core-assets-bar.has-ratio .loss-tile {
+  grid-column: span 3;
+}
+
 .asset-tile {
   display: flex;
   flex-direction: column;
@@ -290,6 +303,16 @@
   border-color: #fed7aa;
 }
 
+.rental-tile {
+  background: #f0fdf4;
+  border-color: #86efac;
+}
+
+.loss-tile {
+  background: #fff7ed;
+  border-color: #fdba74;
+}
+
 .tile-label {
   font-size: 11px;
   font-weight: 500;
@@ -303,6 +326,10 @@
   letter-spacing: -0.02em;
 }
 
+.core-assets-bar.has-ratio .tile-value {
+  font-size: 16px;
+}
+
 .text-orange {
   color: #ea580c;
 }
@@ -311,32 +338,12 @@
   color: #0f172a;
 }
 
-.tile-subvalues {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: center;
-}
-
-.val-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.val-pill.green {
-  background: #f0fdf4;
-  border: 1px solid #dcfce7;
+.text-green {
   color: #15803d;
 }
 
-.val-pill.warm {
-  background: #fffbeb;
-  border: 1px solid #fef3c7;
-  color: #b45309;
+.text-warm {
+  color: #c2410c;
 }
 
 /* ========== 2. 验号多图互动展台 (Gallery Stage) ========== */

frontend/src/features/listings/views/MobileListingDetailView.vue

@@ -466,8 +466,8 @@ function goBack() {
           {{ getListingSubtitle(listing) }}
         </p>
 
-        <!-- 核心资产四大微卡（完全对标 PC 详情页与首页标准） -->
-        <div class="core-assets-bar">
+        <!-- 核心资产：哈夫币、安全箱、币比、可租、消耗 -->
+        <div class="core-assets-bar" :class="{ 'has-ratio': ratioDisplay }">
           <!-- 哈夫币 -->
           <div class="asset-tile coin-tile">
             <span class="tile-label">哈夫币资产</span>
@@ -490,13 +490,14 @@ function goBack() {
             <strong class="tile-value text-slate">{{ ratioDisplay }}</strong>
           </div>
 
-          <!-- 租用与损耗 -->
           <div class="asset-tile rental-tile">
-            <span class="tile-label">租用与损耗</span>
-            <div class="tile-subvalues">
-              <span class="val-pill green">可租 {{ rentalDuration }}</span>
-              <span v-if="dailyLoss" class="val-pill warm">消耗 {{ dailyLoss }}/天</span>
-            </div>
+            <span class="tile-label">可租</span>
+            <strong class="tile-value text-green">{{ rentalDuration }}</strong>
+          </div>
+
+          <div class="asset-tile loss-tile">
+            <span class="tile-label">消耗</span>
+            <strong class="tile-value text-warm">{{ dailyLoss ? `${dailyLoss}/天` : '--' }}</strong>
           </div>
         </div>
       </div>