From 9b802c1a5c9b3d7d3a555f3727498967135b9ce7 Mon Sep 17 00:00:00 2001 From: yml Date: Mon, 8 Jun 2026 22:07:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8D=A1=E7=89=87=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 | 207 +++++++++++++++--- .../listings/views/MobileHomeView.vue | 74 ++++++- 2 files changed, 243 insertions(+), 38 deletions(-) diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css index 9ce3773..e432cb7 100644 --- a/frontend/src/features/listings/views/MobileHomeView.css +++ b/frontend/src/features/listings/views/MobileHomeView.css @@ -431,12 +431,16 @@ .mobile-list { display: grid; - gap: 12px; + gap: 10px; } .mobile-card { display: grid; + grid-template-columns: 104px minmax(0, 1fr); + column-gap: 8px; + row-gap: 8px; overflow: hidden; + padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; @@ -446,10 +450,12 @@ .card-cover { position: relative; - aspect-ratio: 16 / 9; display: grid; + width: 104px; + height: 104px; place-items: center; overflow: hidden; + border-radius: 8px; background: #e2e8f0; color: #64748b; font-weight: 800; @@ -463,87 +469,217 @@ .card-cover-labels { position: absolute; - left: 8px; - top: 8px; + left: 6px; + top: 6px; display: flex; gap: 6px; } .card-cover-labels em { - padding: 3px 7px; + padding: 2px 6px; border-radius: 999px; background: rgba(255, 106, 0, 0.92); color: #fff; - font-size: 11px; + font-size: 10px; font-style: normal; font-weight: 800; } .card-main { - padding: 12px; + display: flex; + min-width: 0; + flex-direction: column; + padding: 0; } .card-title-row h2 { margin: 0; + display: -webkit-box; + min-height: 35px; overflow: hidden; color: #0f172a; - font-size: 16px; - text-overflow: ellipsis; - white-space: nowrap; + font-size: 13px; + line-height: 1.34; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; } -.mobile-listing-no { +.card-meta-row { + display: flex; + flex-wrap: wrap; + gap: 4px; + margin-top: 3px; +} + +.mobile-listing-no, +.daily-loss-badge { display: inline-flex; width: fit-content; - margin-top: 6px; - padding: 3px 7px; + align-items: center; + min-height: 17px; + padding: 1px 6px; border-radius: 999px; - background: #fff7ed; - color: #c2410c; - font-size: 11px; + background: #f5f7fa; + color: #64748b; + font-size: 10px; font-weight: 800; + line-height: 1.2; +} + +.daily-loss-badge { + border: none; + background: #f5f7fa; + color: #64748b; } .card-subtitle { - margin: 6px 0 10px; - color: #64748b; - font-size: 13px; - line-height: 1.4; + width: fit-content; + margin: 0; + padding: 1px 6px; + border-radius: 999px; + background: #fff7ed; + color: #ea580c; + font-size: 10px; + font-weight: 900; + line-height: 1.35; +} + +.card-action-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + margin-top: 4px; } .card-badges-row, .card-chip-row { display: flex; flex-wrap: wrap; - gap: 6px; + gap: 4px; } .server-badge, .card-chip-row span { - padding: 3px 7px; + display: inline-flex; + align-items: center; + gap: 3px; + padding: 1px 5px; border-radius: 999px; + border: 1px solid transparent; background: #f1f5f9; color: #475569; - font-size: 11px; + font-size: 10px; + font-weight: 700; + line-height: 1.35; +} + +.server-badge.tone-wechat { + background: #ecfdf5; + color: #16a34a; +} + +.server-badge.tone-qq { + background: #eff6ff; + color: #1683ff; +} + +.server-badge.tone-scan { + background: #fff7ed; + color: #ea580c; +} + +.server-badge.tone-password { + background: #fef2f2; + color: #dc2626; +} + +.server-badge.tone-steam { + background: #eef2ff; + color: #4f46e5; +} + +.card-chip-row span.tone-coin { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-insurance { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-stamina { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-load { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-rank { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-weapon { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-asset { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.card-chip-row span.tone-time { + border-color: #fed7aa; + background: #fff7ed; + color: #c2410c; } .card-footer { - margin-top: 10px; + margin-top: 5px; +} + +.price-col { + display: inline-flex; + width: fit-content; + max-width: 100%; + align-items: baseline; + gap: 6px; } .price-col strong { color: #ef4444; font-size: 20px; + font-weight: 900; + line-height: 1; } .rent-sub { - margin-left: 8px; - color: #64748b; - font-size: 12px; + padding: 1px 6px; + border-radius: 999px; + background: #fff7ed; + color: #9a3412; + font-size: 10px; + font-weight: 700; } .card-chip-row { - padding: 0 12px 12px; + grid-column: 1 / -1; + max-height: 42px; + overflow: hidden; + padding: 0; } .mobile-load-state { @@ -568,4 +704,19 @@ padding: 0 12px; font-size: 14px; } + + .mobile-card { + grid-template-columns: 96px minmax(0, 1fr); + column-gap: 8px; + padding: 8px; + } + + .card-cover { + width: 96px; + height: 96px; + } + + .card-title-row h2 { + font-size: 13px; + } } diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue index 45a83c9..4fb56d9 100644 --- a/frontend/src/features/listings/views/MobileHomeView.vue +++ b/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' +}