优化移动端首页卡片展示

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

@@ -24,8 +24,9 @@ import MobileHomeFilterSheet, { type FilterSection } from './MobileHomeFilterShe
 import {
   getListingChips,
   getListingDisplayPrice,
-  getListingSubtitle,
   getListingTitle,
+  getDailyLoss,
+  getRatioValue,
   formatListingCode,
   getLoginMethod,
   getServerRegion,
@@ -462,6 +463,35 @@ function zoneCount(key: string) {
   if (key === 'all') return zoneCounts.value.all ?? totalListings.value
   return zoneCounts.value[key] ?? 0
 }
+
+function getAccessBadgeMeta(value: string) {
+  const text = value.trim()
+  if (text.includes('微信')) return { icon: 'wechat', tone: 'wechat' }
+  if (text.toUpperCase().includes('QQ')) return { icon: 'qq', tone: 'qq' }
+  if (text.includes('扫码')) return { icon: 'scan', tone: 'scan' }
+  if (text.includes('账号') || text.includes('密码')) return { icon: 'lock', tone: 'password' }
+  if (text.includes('Steam')) return { icon: 'desktop-o', tone: 'steam' }
+  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 chipTone(label: string) {
+  if (label.includes('哈夫币')) return 'coin'
+  if (label.includes('保险')) return 'insurance'
+  if (label.includes('体力')) return 'stamina'
+  if (label.includes('负重')) return 'load'
+  if (label.includes('段位')) return 'rank'
+  if (label.includes('AWM')) return 'weapon'
+  if (label.includes('总资产')) return 'asset'
+  if (label.includes('方便')) return 'time'
+  return 'default'
+}
 </script>
 
 <template>
@@ -628,23 +658,47 @@ function zoneCount(key: string) {
               <div class="card-title-row">
                 <h2>{{ getListingTitle(item) }}</h2>
               </div>
-              <div class="mobile-listing-no">编号 {{ formatListingCode(item) }}</div>
-              <p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
-              <div class="card-badges-row">
-                <span class="server-badge">{{ getServerRegion(item) }}</span>
-                <span v-if="getLoginMethod(item)" class="server-badge">
-                  {{ getLoginMethod(item) }}
-                </span>
+              <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>
+              </div>
+              <div class="card-action-row">
+                <p v-if="getMobileRatioText(item)" class="card-subtitle">
+                  {{ getMobileRatioText(item) }}
+                </p>
+                <div class="card-badges-row">
+                  <span
+                    class="server-badge"
+                    :class="`tone-${getAccessBadgeMeta(getServerRegion(item)).tone}`"
+                  >
+                    <van-icon :name="getAccessBadgeMeta(getServerRegion(item)).icon" :size="13" />
+                    {{ getServerRegion(item) }}
+                  </span>
+                  <span
+                    v-if="getLoginMethod(item)"
+                    class="server-badge"
+                    :class="`tone-${getAccessBadgeMeta(getLoginMethod(item)).tone}`"
+                  >
+                    <van-icon :name="getAccessBadgeMeta(getLoginMethod(item)).icon" :size="13" />
+                    {{ getLoginMethod(item) }}
+                  </span>
+                </div>
               </div>
               <div class="card-footer">
                 <div class="price-col">
                   <strong>¥{{ getListingDisplayPrice(item) }}</strong>
-                  <span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
+                  <span class="rent-sub">押金 ¥{{ item.deposit_amount }}</span>
                 </div>
               </div>
             </div>
             <div class="card-chip-row">
-              <span v-for="chip in getListingChips(item)" :key="`${item.id}-${chip.label}`">
+              <span
+                v-for="chip in getListingChips(item)"
+                :key="`${item.id}-${chip.label}`"
+                :class="`tone-${chipTone(chip.label)}`"
+              >
                 {{ chip.label }}:{{ chip.value }}
               </span>
             </div>