yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化了首页账号展示-2

Browse Source
This commit is contained in:
yml2213
2026-06-19 07:43:23 +08:00
parent 1e3df0c0c0
commit 9489273bcb
1 changed files with 38 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/listings/components/ListingCard.vue
+38 -46
View File
@@ -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 {