From 53b638d2823d10f77ca84f2e105e1d83da54d0e3 Mon Sep 17 00:00:00 2001
From: shangfangjian <shangfangjian@bilidili.cn>
Date: Sun, 20 Sep 2026 22:06:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=AF=94=E8=B5=9B=E8=A1=8C=E6=AF=94=E5=88=86=E4=B8=A5=E6=A0=BC?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
---
 frontend/src/pages/Matches.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Matches.tsx b/frontend/src/pages/Matches.tsx
index b826585..a53a518 100644
--- a/frontend/src/pages/Matches.tsx
+++ b/frontend/src/pages/Matches.tsx
@@ -578,16 +578,16 @@ export default function Matches() {
                       <span className={`text-2xs sm:hidden ${st.cls}`}>{st.label}</span>
                     </div>
 
-                    {/* 主队 + 比分 + 客队:移动端单行居中,桌面端 grid 分列 */}
-                    <div className="flex items-center justify-center gap-3">
+                    {/* 主队 + 比分 + 客队:移动端 grid 三列(严格居中),桌面端 grid 分列 */}
+                    <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" />
                         <span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{homeName}</span>
                       </span>
 
-                      {/* 比分 / VS */}
-                      <span className="flex w-14 flex-shrink-0 flex-col items-center sm:w-auto">
+                      {/* 比分 / VS(严格居中) */}
+                      <span className="flex flex-col items-center justify-center">
                         {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">
                             {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 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" />
                         <span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{awayName}</span>
                       </span>