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

移动端比赛行布局放宽,保持比分绝对居中

Browse Source 
- 水平内边距 px-1 → px-4
- 垂直内边距 py-3.5 → py-5
- 行间距 gap-2 → gap-3
- 主客队列间距 gap-2 → gap-4
- 队名字号 13px → text-sm, VS 字号 xs → text-sm
- 比分字号 lg → xl,更醒目
- 网格 grid-cols-[1fr_auto_1fr] 确保比分绝对居中

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
This commit is contained in:
shangfangjian
2026-09-20 22:12:16 +08:00
parent 53b638d282
commit 9a65e81ab0
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Matches.tsx
+12 -12
View File
@@ -561,7 +561,7 @@ export default function Matches() {
<div key={m.id}>
{/* 行:可点击展开 */}
<div
className={`border-b border-ink-200 px-1 py-3.5 transition-colors hover:bg-paper-100/70 cursor-pointer sm:py-4 ${
className={`border-b border-ink-200 px-4 py-5 transition-colors hover:bg-paper-100/70 cursor-pointer sm:px-1 sm:py-4 ${
expanded ? 'bg-paper-100/60' : ''
}`}
onClick={toggleExpand}
@@ -571,29 +571,29 @@ export default function Matches() {
aria-expanded={expanded}
>
{/* 桌面 grid: 日期 | 主队 | 比分 | 客队 | 状态 | 按钮 */}
<div className="flex flex-col gap-2 sm:grid sm:grid-cols-[96px_minmax(0,1fr)_72px_minmax(0,1fr)_64px_88px] sm:items-center sm:gap-x-4 sm:gap-y-0">
<div className="flex flex-col gap-3 sm:grid sm:grid-cols-[96px_minmax(0,1fr)_72px_minmax(0,1fr)_64px_88px] sm:items-center sm:gap-x-4 sm:gap-y-0">
{/* 日期 + 状态:小屏同行;桌面 date 单独一列 */}
<div className="flex items-center justify-between sm:contents">
<span className="text-2xs tabular-nums text-ink-400 sm:text-xs">{fmtTime(m.match_date)}</span>
<span className={`text-2xs sm:hidden ${st.cls}`}>{st.label}</span>
<div className="flex items-center justify-between text-xs sm:contents">
<span className="tabular-nums text-ink-500 sm:text-xs">{fmtTime(m.match_date)}</span>
<span className={`sm:hidden ${st.cls}`}>{st.label}</span>
</div>
{/* 主队 + 比分 + 客队:移动端 grid 三列(严格居中),桌面端 grid 分列 */}
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:contents">
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-4 sm:contents">
{/* 主队(右对齐) */}
<span className="flex min-w-0 items-center justify-end gap-1.5 sm:gap-2">
<span className="flex min-w-0 items-center justify-end gap-2">
<TeamSideTag side="home" />
<span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{homeName}</span>
<span className="truncate text-sm font-medium text-ink-900">{homeName}</span>
</span>
{/* 比分 / 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">
<span className="font-serif text-xl 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>
<span className="text-sm tracking-[0.2em] text-ink-500">VS</span>
)}
{m.home_xg !== null && m.away_xg !== null && (
<span className="mt-0.5 text-2xs tabular-nums text-ink-400">
@@ -603,9 +603,9 @@ export default function Matches() {
</span>
{/* 客队(左对齐) */}
<span className="flex min-w-0 items-center gap-1.5 sm:gap-2">
<span className="flex min-w-0 items-center gap-2">
<TeamSideTag side="away" />
<span className="truncate text-[13px] font-medium text-ink-900 sm:text-sm">{awayName}</span>
<span className="truncate text-sm font-medium text-ink-900">{awayName}</span>
</span>
</div>