shangfangjian/Profeto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复移动端比赛行比分严格居中

Browse Source 
从 flex + flex-1 改为 grid grid-cols-[1fr_auto_1fr]:
- 主队/客队各占 1fr,比分 auto 宽度居中
- 无论队名长短,比分始终在视觉中心
- 桌面端 sm:contents 恢复 grid 分列布局

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
This commit is contained in:
shangfangjian
2026-09-20 22:06:45 +08:00
parent 41109402a3
commit 53b638d282
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Matches.tsx
+6 -6
View File
@@ -578,16 +578,16 @@ export default function Matches() {
<span className={`text-2xs sm:hidden ${st.cls}`}>{st.label}</span> <span className={`text-2xs sm:hidden ${st.cls}`}>{st.label}</span>
</div> </div>
{/* 主队 + 比分 + 客队:移动端单行居中,桌面端 grid 分列 */} {/* 主队 + 比分 + 客队:移动端 grid 三列(严格居中),桌面端 grid 分列 */}
<div className="flex items-center justify-center gap-3"> <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:contents">
{/* 主队(右对齐) */} {/* 主队(右对齐) */}
<span className="flex min-w-0 flex-1 items-center justify-end gap-1.5 sm:gap-2"> <span className="flex min-w-0 items-center justify-end gap-1.5 sm:gap-2">
<TeamSideTag side="home" /> <TeamSideTag side="home" />
<span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{homeName}</span> <span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{homeName}</span>
</span> </span>
{/* 比分 / VS */} {/* 比分 / VS(严格居中) */}
<span className="flex w-14 flex-shrink-0 flex-col items-center sm:w-auto"> <span className="flex flex-col items-center justify-center">
{m.home_goals !== null && m.away_goals !== null ? ( {m.home_goals !== null && m.away_goals !== null ? (
<span className="font-serif text-lg font-bold tabular-nums leading-none text-ink-900 sm:text-xl"> <span className="font-serif text-lg font-bold tabular-nums leading-none text-ink-900 sm:text-xl">
{m.home_goals}<span className="mx-1 font-normal text-ink-300">:</span>{m.away_goals} {m.home_goals}<span className="mx-1 font-normal text-ink-300">:</span>{m.away_goals}
@@ -603,7 +603,7 @@ export default function Matches() {
</span> </span>
{/* 客队(左对齐) */} {/* 客队(左对齐) */}
<span className="flex min-w-0 flex-1 items-center gap-1.5 sm:gap-2"> <span className="flex min-w-0 items-center gap-1.5 sm:gap-2">
<TeamSideTag side="away" /> <TeamSideTag side="away" />
<span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{awayName}</span> <span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{awayName}</span>
</span> </span>