From 1e3df0c0c07efc22b4b7baaa92728eb3ba917b80 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 19 Jun 2026 07:32:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=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/components/ListingCard.vue       | 151 +++++++++++++-----
 1 file changed, 107 insertions(+), 44 deletions(-)

diff --git a/frontend/src/features/listings/components/ListingCard.vue b/frontend/src/features/listings/components/ListingCard.vue
index 2b86b59..196ff83 100644
--- a/frontend/src/features/listings/components/ListingCard.vue
+++ b/frontend/src/features/listings/components/ListingCard.vue
@@ -36,6 +36,12 @@ const skinSummaryText = computed(() =>
 )
 const chipItems = computed(() => getListingChips(props.listing))
 const resourceItems = computed(() => getListingResources(props.listing))
+const resourceSummaryText = computed(() =>
+  resourceItems.value
+    .map(resource => `${resource.label} ${formatResourceQuantity(resource)}`)
+    .join('、')
+)
+const hasDetailLines = computed(() => skinGroups.value.length > 0 || resourceItems.value.length > 0)
 const rentalDuration = computed(() => formatEstimatedRentalDuration(props.listing))
 const accessTags = computed(() =>
   [getServerRegion(props.listing), getLoginMethod(props.listing)]
@@ -75,7 +81,11 @@ function formatStatNumber(value: number) {
 </script>
 
 <template>
-  <RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
+  <RouterLink
+    class="listing-card-v2"
+    :class="{ compact: hasDetailLines, relaxed: !hasDetailLines }"
+    :to="`/listings/${listing.id}`"
+  >
     <div class="card-cover">
       <img
         v-if="coverURL"
@@ -93,7 +103,7 @@ function formatStatNumber(value: number) {
     </div>
 
     <div class="card-details">
-      <h3>{{ getListingTitle(listing) }}</h3>
+      <h3 :title="getListingTitle(listing)">{{ getListingTitle(listing) }}</h3>
 
       <div class="meta-flow">
         <span v-for="badge in metaBadges" :key="badge.label" :class="`tone-${badge.tone}`">
@@ -120,7 +130,7 @@ function formatStatNumber(value: number) {
         <span class="skin-count">{{ skinNames.length }}款</span>
       </div>
 
-      <div v-if="resourceItems.length" class="resource-line">
+      <div v-if="resourceItems.length" class="resource-line" :title="resourceSummaryText">
         <span class="line-title">额外物资</span>
         <div class="resource-chips">
           <span v-for="resource in resourceItems" :key="resource.key" class="resource-chip">
@@ -149,9 +159,10 @@ function formatStatNumber(value: number) {
 <style scoped>
 .listing-card-v2 {
   display: grid;
-  grid-template-columns: 190px minmax(0, 1fr) 168px;
+  grid-template-columns: 190px minmax(0, 1fr) 136px;
   gap: 20px;
-  align-items: stretch;
+  align-items: start;
+  height: 222px;
   padding: 16px;
   border: 1px solid #e7edf6;
   border-radius: 16px;
@@ -173,6 +184,7 @@ function formatStatNumber(value: number) {
 
 .card-cover {
   position: relative;
+  align-self: start;
   width: 100%;
   aspect-ratio: 1;
   border-radius: 12px;
@@ -236,21 +248,33 @@ function formatStatNumber(value: number) {
 .card-details {
   display: grid;
   align-content: start;
-  gap: 10px;
+  gap: 8px;
+  height: 190px;
   min-width: 0;
-  padding: 2px 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.listing-card-v2.relaxed .card-details {
+  align-content: center;
+  gap: 12px;
 }
 
 .card-details h3 {
   margin: 0;
   color: #111827;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 900;
-  line-height: 1.32;
+  line-height: 1.28;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
+}
+
+.listing-card-v2.relaxed .card-details h3 {
+  font-size: 21px;
+  line-height: 1.3;
 }
 
 .meta-flow,
@@ -258,24 +282,33 @@ function formatStatNumber(value: number) {
 .chip-flow,
 .resource-chips {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  flex-wrap: nowrap;
+  gap: 7px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .meta-flow span,
 .access-flow span {
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
   gap: 6px;
-  min-height: 28px;
-  padding: 0 11px;
+  min-height: 26px;
+  padding: 0 10px;
   border-radius: 999px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 900;
   line-height: 1;
 }
 
+.listing-card-v2.relaxed .meta-flow span,
+.listing-card-v2.relaxed .access-flow span {
+  min-height: 30px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
 .meta-flow .tone-code {
   border: 1px solid #dbeafe;
   background: #eff6ff;
@@ -292,10 +325,14 @@ function formatStatNumber(value: number) {
   color: #ea580c;
 }
 
-.access-flow .tone-qq,
 .access-flow .tone-wechat {
+  background: #ecfdf3;
+  color: #07c160;
+}
+
+.access-flow .tone-qq {
   background: #eaf3ff;
-  color: #1677ff;
+  color: #12b7f5;
 }
 
 .access-flow .tone-scan {
@@ -316,15 +353,16 @@ function formatStatNumber(value: number) {
 
 .info-chip {
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
-  max-width: 280px;
-  min-height: 28px;
-  padding: 0 11px;
+  max-width: 180px;
+  min-height: 26px;
+  padding: 0 10px;
   border: 1px solid #fed7aa;
   border-radius: 999px;
   background: #fff7ed;
   color: #c2410c;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 900;
   line-height: 1;
   overflow: hidden;
@@ -332,15 +370,22 @@ function formatStatNumber(value: number) {
   white-space: nowrap;
 }
 
+.listing-card-v2.relaxed .info-chip {
+  max-width: 220px;
+  min-height: 30px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
 .skin-line,
 .resource-line {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  height: 38px;
   min-width: 0;
-  margin-top: 2px;
-  padding: 9px 12px;
-  border-radius: 12px;
+  padding: 8px 10px;
+  border-radius: 10px;
   background: #f8fafc;
 }
 
@@ -353,7 +398,7 @@ function formatStatNumber(value: number) {
 .line-title {
   flex: 0 0 auto;
   color: #94a3b8;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 900;
 }
 
@@ -361,9 +406,9 @@ function formatStatNumber(value: number) {
   min-width: 0;
   overflow: hidden;
   color: #475569;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 900;
-  line-height: 1.25;
+  line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -380,16 +425,17 @@ function formatStatNumber(value: number) {
 
 .resource-chip {
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
   gap: 5px;
-  max-width: 100%;
-  min-height: 28px;
-  padding: 0 11px;
+  max-width: 150px;
+  min-height: 24px;
+  padding: 0 10px;
   border: 1px solid #fed7aa;
   border-radius: 999px;
   background: #fff7ed;
   color: #9a3412;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 900;
 }
 
@@ -415,10 +461,11 @@ function formatStatNumber(value: number) {
 
 .card-price {
   display: grid;
-  align-content: center;
+  align-self: center;
+  align-content: start;
   align-items: flex-end;
-  gap: 12px;
-  padding: 14px 0 14px 18px;
+  gap: 8px;
+  padding: 4px 0 4px 16px;
   border-left: 1px solid #edf2f7;
 }
 
@@ -439,26 +486,26 @@ function formatStatNumber(value: number) {
 
 .price-main strong {
   color: #ff5f00;
-  font-size: 32px;
+  font-size: 28px;
   font-weight: 900;
   line-height: 1;
 }
 
 .price-deposit span {
   color: #64748b;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 900;
 }
 
 .rent-btn {
   width: 100%;
-  min-height: 48px;
-  padding: 0 24px;
+  min-height: 42px;
+  padding: 0 16px;
   border: none;
   border-radius: 10px;
   background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
   color: #ffffff;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 900;
   cursor: pointer;
   transition: all 0.2s;
@@ -471,28 +518,44 @@ function formatStatNumber(value: number) {
 
 @media (max-width: 1280px) {
   .listing-card-v2 {
-    grid-template-columns: 168px minmax(0, 1fr) 156px;
+    grid-template-columns: 168px minmax(0, 1fr) 128px;
     gap: 16px;
+    height: 200px;
+  }
+
+  .card-details {
+    height: 168px;
   }
 
   .card-details h3 {
-    font-size: 18px;
+    font-size: 17px;
+  }
+
+  .listing-card-v2.relaxed .card-details h3 {
+    font-size: 19px;
   }
 
   .meta-flow span,
   .access-flow span,
   .info-chip,
   .resource-chip {
+    font-size: 11px;
+  }
+
+  .listing-card-v2.relaxed .meta-flow span,
+  .listing-card-v2.relaxed .access-flow span,
+  .listing-card-v2.relaxed .info-chip {
+    min-height: 28px;
     font-size: 12px;
   }
 
   .skin-list,
   .line-title {
-    font-size: 12px;
+    font-size: 11px;
   }
 
   .price-main strong {
-    font-size: 28px;
+    font-size: 25px;
   }
 }
 </style>