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

修复移动端比赛行队伍和比分居中

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

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
This commit is contained in:
shangfangjian
2026-09-20 22:04:46 +08:00
co-authored by new-provider/LongCat-2.0 <
parent aaf9d38056
commit 41109402a3
1 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Matches.tsx
+28 -25
View File
@@ -578,33 +578,36 @@ 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 分列 */}
<span className="flex min-w-0 flex-1 items-center justify-end gap-1.5 sm:gap-2"> <div className="flex items-center justify-center gap-3">
<TeamSideTag side="home" /> {/* 主队(右对齐) */}
<span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{homeName}</span> <span className="flex min-w-0 flex-1 items-center justify-end gap-1.5 sm:gap-2">
</span> <TeamSideTag side="home" />
<span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{homeName}</span>
</span>
{/* 比分 / VS:桌面上更突出 */} {/* 比分 / VS */}
<span className="flex w-12 flex-shrink-0 flex-col items-center sm:w-auto"> <span className="flex w-14 flex-shrink-0 flex-col items-center sm:w-auto">
{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}
</span> </span>
) : ( ) : (
<span className="text-xs tracking-[0.2em] text-ink-400">VS</span> <span className="text-xs tracking-[0.2em] text-ink-400">VS</span>
)} )}
{m.home_xg !== null && m.away_xg !== null && ( {m.home_xg !== null && m.away_xg !== null && (
<span className="mt-0.5 text-2xs tabular-nums text-ink-400"> <span className="mt-0.5 text-2xs tabular-nums text-ink-400">
xG {m.home_xg.toFixed(1)}–{m.away_xg.toFixed(1)} xG {m.home_xg.toFixed(1)}–{m.away_xg.toFixed(1)}
</span> </span>
)} )}
</span> </span>
{/* 客队(左对齐) */} {/* 客队(左对齐) */}
<span className="flex min-w-0 flex-1 items-center gap-1.5 sm:gap-2"> <span className="flex min-w-0 flex-1 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>
</div>
{/* 状态标签:小屏隐藏(已有);桌面用徽标样式 */} {/* 状态标签:小屏隐藏(已有);桌面用徽标样式 */}
<span className="hidden text-right sm:block"> <span className="hidden text-right sm:block">