From 41109402a34829c1b17b62076e7c104976345ca5 Mon Sep 17 00:00:00 2001
From: shangfangjian <shangfangjian@bilidili.cn>
Date: Sun, 20 Sep 2026 22:04:46 +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=E9=98=9F=E4=BC=8D=E5=92=8C=E6=AF=94?=
 =?UTF-8?q?=E5=88=86=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移动端原布局:主队/比分/客队垂直堆叠,比分区域仅 12px 宽,导致不居中。
改为:flex 单行居中布局,gap-3 均匀间距,主队右对齐 + 客队左对齐 + 比分居中。
桌面端保持原有 grid 布局不变。

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

diff --git a/frontend/src/pages/Matches.tsx b/frontend/src/pages/Matches.tsx
index 6674eb7..b826585 100644
--- a/frontend/src/pages/Matches.tsx
+++ b/frontend/src/pages/Matches.tsx
@@ -578,33 +578,36 @@ export default function Matches() {
                       <span className={`text-2xs sm:hidden ${st.cls}`}>{st.label}</span>
                     </div>
 
-                    {/* 主队(右对齐) */}
-                    <span className="flex min-w-0 flex-1 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>
+                    {/* 主队 + 比分 + 客队:移动端单行居中,桌面端 grid 分列 */}
+                    <div className="flex items-center justify-center gap-3">
+                      {/* 主队(右对齐) */}
+                      <span className="flex min-w-0 flex-1 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-12 flex-shrink-0 flex-col items-center sm:w-auto">
-                      {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}
-                        </span>
-                      ) : (
-                        <span className="text-xs tracking-[0.2em] text-ink-400">VS</span>
-                      )}
-                      {m.home_xg !== null && m.away_xg !== null && (
-                        <span className="mt-0.5 text-2xs tabular-nums text-ink-400">
-                          xG {m.home_xg.toFixed(1)}–{m.away_xg.toFixed(1)}
-                        </span>
-                      )}
-                    </span>
+                      {/* 比分 / VS */}
+                      <span className="flex w-14 flex-shrink-0 flex-col items-center sm:w-auto">
+                        {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}
+                          </span>
+                        ) : (
+                          <span className="text-xs tracking-[0.2em] text-ink-400">VS</span>
+                        )}
+                        {m.home_xg !== null && m.away_xg !== null && (
+                          <span className="mt-0.5 text-2xs tabular-nums text-ink-400">
+                            xG {m.home_xg.toFixed(1)}–{m.away_xg.toFixed(1)}
+                          </span>
+                        )}
+                      </span>
 
-                    {/* 客队(左对齐) */}
-                    <span className="flex min-w-0 flex-1 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>
+                      {/* 客队(左对齐) */}
+                      <span className="flex min-w-0 flex-1 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>
+                    </div>
 
                     {/* 状态标签:小屏隐藏(已有);桌面用徽标样式 */}
                     <span className="hidden text-right sm:block">