From 9489273bcb5e2b4fc15f6290790ced9a83f0f318 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 19 Jun 2026 07:43:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E5=B1=95=E7=A4=BA-2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listings/components/ListingCard.vue       | 84 +++++++++----------
 1 file changed, 38 insertions(+), 46 deletions(-)

diff --git a/frontend/src/features/listings/components/ListingCard.vue b/frontend/src/features/listings/components/ListingCard.vue
index 196ff83..28868ad 100644
--- a/frontend/src/features/listings/components/ListingCard.vue
+++ b/frontend/src/features/listings/components/ListingCard.vue
@@ -109,9 +109,6 @@ function formatStatNumber(value: number) {
         <span v-for="badge in metaBadges" :key="badge.label" :class="`tone-${badge.tone}`">
           {{ badge.label }}
         </span>
-      </div>
-
-      <div class="access-flow">
         <span v-for="tag in accessTags" :key="tag.label" :class="`tone-${tag.tone}`">
           <van-icon :name="tag.icon" :size="16" />
           {{ tag.label }}
@@ -159,10 +156,10 @@ function formatStatNumber(value: number) {
 <style scoped>
 .listing-card-v2 {
   display: grid;
-  grid-template-columns: 190px minmax(0, 1fr) 136px;
+  grid-template-columns: 196px minmax(0, 1fr) 140px;
   gap: 20px;
   align-items: start;
-  height: 222px;
+  height: 228px;
   padding: 16px;
   border: 1px solid #e7edf6;
   border-radius: 16px;
@@ -248,8 +245,8 @@ function formatStatNumber(value: number) {
 .card-details {
   display: grid;
   align-content: start;
-  gap: 8px;
-  height: 190px;
+  gap: 10px;
+  height: 196px;
   min-width: 0;
   overflow: hidden;
   padding: 0;
@@ -257,7 +254,7 @@ function formatStatNumber(value: number) {
 
 .listing-card-v2.relaxed .card-details {
   align-content: center;
-  gap: 12px;
+  gap: 14px;
 }
 
 .card-details h3 {
@@ -278,35 +275,32 @@ function formatStatNumber(value: number) {
 }
 
 .meta-flow,
-.access-flow,
 .chip-flow,
 .resource-chips {
   display: flex;
   flex-wrap: nowrap;
-  gap: 7px;
+  gap: 8px;
   min-width: 0;
   overflow: hidden;
 }
 
-.meta-flow span,
-.access-flow span {
+.meta-flow span {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   gap: 6px;
-  min-height: 26px;
-  padding: 0 10px;
+  min-height: 28px;
+  padding: 0 11px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 900;
   line-height: 1;
 }
 
-.listing-card-v2.relaxed .meta-flow span,
-.listing-card-v2.relaxed .access-flow span {
-  min-height: 30px;
+.listing-card-v2.relaxed .meta-flow span {
+  min-height: 32px;
   padding: 0 12px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .meta-flow .tone-code {
@@ -325,28 +319,28 @@ function formatStatNumber(value: number) {
   color: #ea580c;
 }
 
-.access-flow .tone-wechat {
+.meta-flow .tone-wechat {
   background: #ecfdf3;
   color: #07c160;
 }
 
-.access-flow .tone-qq {
+.meta-flow .tone-qq {
   background: #eaf3ff;
   color: #12b7f5;
 }
 
-.access-flow .tone-scan {
+.meta-flow .tone-scan {
   background: #fff7ed;
   color: #f97316;
 }
 
-.access-flow .tone-steam {
+.meta-flow .tone-steam {
   background: #eef2ff;
   color: #4f46e5;
 }
 
-.access-flow .tone-password,
-.access-flow .tone-default {
+.meta-flow .tone-password,
+.meta-flow .tone-default {
   background: #f1f5f9;
   color: #475569;
 }
@@ -355,14 +349,14 @@ function formatStatNumber(value: number) {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
-  max-width: 180px;
-  min-height: 26px;
-  padding: 0 10px;
+  max-width: 200px;
+  min-height: 28px;
+  padding: 0 11px;
   border: 1px solid #fed7aa;
   border-radius: 999px;
   background: #fff7ed;
   color: #c2410c;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 900;
   line-height: 1;
   overflow: hidden;
@@ -371,10 +365,10 @@ function formatStatNumber(value: number) {
 }
 
 .listing-card-v2.relaxed .info-chip {
-  max-width: 220px;
-  min-height: 30px;
+  max-width: 240px;
+  min-height: 32px;
   padding: 0 12px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .skin-line,
@@ -382,7 +376,7 @@ function formatStatNumber(value: number) {
   display: flex;
   align-items: center;
   gap: 8px;
-  height: 38px;
+  height: 40px;
   min-width: 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -398,7 +392,7 @@ function formatStatNumber(value: number) {
 .line-title {
   flex: 0 0 auto;
   color: #94a3b8;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 900;
 }
 
@@ -406,7 +400,7 @@ function formatStatNumber(value: number) {
   min-width: 0;
   overflow: hidden;
   color: #475569;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 900;
   line-height: 1.2;
   text-overflow: ellipsis;
@@ -428,14 +422,14 @@ function formatStatNumber(value: number) {
   flex: 0 0 auto;
   align-items: center;
   gap: 5px;
-  max-width: 150px;
-  min-height: 24px;
-  padding: 0 10px;
+  max-width: 165px;
+  min-height: 26px;
+  padding: 0 11px;
   border: 1px solid #fed7aa;
   border-radius: 999px;
   background: #fff7ed;
   color: #9a3412;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 900;
 }
 
@@ -518,13 +512,13 @@ function formatStatNumber(value: number) {
 
 @media (max-width: 1280px) {
   .listing-card-v2 {
-    grid-template-columns: 168px minmax(0, 1fr) 128px;
+    grid-template-columns: 176px minmax(0, 1fr) 132px;
     gap: 16px;
-    height: 200px;
+    height: 208px;
   }
 
   .card-details {
-    height: 168px;
+    height: 176px;
   }
 
   .card-details h3 {
@@ -536,14 +530,12 @@ function formatStatNumber(value: number) {
   }
 
   .meta-flow span,
-  .access-flow span,
   .info-chip,
   .resource-chip {
-    font-size: 11px;
+    font-size: 12px;
   }
 
   .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;
@@ -551,7 +543,7 @@ function formatStatNumber(value: number) {
 
   .skin-list,
   .line-title {
-    font-size: 11px;
+    font-size: 12px;
   }
 
   .price-main strong {