From cea2c7f10242ca5404846ba8ed529837fa4db3ac Mon Sep 17 00:00:00 2001 From: yuetsh <517252939@qq.com> Date: Thu, 15 Oct 2026 12:44:57 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E6=89=8B=E6=9C=BA):=20=E6=AF=94=E8=B5=9B?= =?UTF-8?q?=E6=8E=92=E5=90=8D=E8=A1=A8=E7=9C=8B=E4=B8=8D=E5=87=BA=E8=83=BD?= =?UTF-8?q?=E5=BE=80=E5=8F=B3=E6=BB=91=EF=BC=9B=E7=8F=AD=E7=BA=A7=20PK=20?= =?UTF-8?q?=E6=AF=8F=E5=91=A8=E5=9B=BE=E6=97=A5=E6=9C=9F=E5=AD=97=E5=A4=AA?= =?UTF-8?q?=E5=B0=8F=EF=BC=9B=E5=90=8E=E5=8F=B0=E9=A2=98=E7=9B=AE=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E3=80=8C=E8=97=8F=E7=9D=80=E7=9A=84=E3=80=8D=E8=A2=AB?= =?UTF-8?q?=E5=88=87=E6=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 比赛排名：手机上名字、做对、用时就占满一屏，每题的格子全在屏幕外。列收窄，前一两道题的格子露出来 - 班级 PK：每周人均横轴在手机上是 10px 的「10月12日」，改成 12px 的「10/12」 - 后台题目列表：手机上「全部 / 学生看得到 / 藏着的」换小号按钮，放不下就横着滑 Co-Authored-By: Claude Opus 5.5 --- apps/web/src/admin/problem/list.vue | 10 +++++++++- apps/web/src/oj/class/components/PkDuel.vue | 5 +++-- apps/web/src/oj/contest/pages/rank.vue | 14 ++++++++++---- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/apps/web/src/admin/problem/list.vue b/apps/web/src/admin/problem/list.vue index 6291c87..3a9bb4d 100644 --- a/apps/web/src/admin/problem/list.vue +++ b/apps/web/src/admin/problem/list.vue @@ -96,6 +96,8 @@ const { query, clearQuery } = usePagination({ }) const counts = ref<{ all: number; visible: number; hidden: number } | null>(null) +// 手机上后台左边还有一列图标，三个按钮放不下、「藏着的」被切掉：换小号，再不够就横着滑 +const narrow = useMediaQuery("(max-width: 640px)") const visibleTabs = computed(() => [ { value: "" as const, label: "全部", count: counts.value?.all }, { value: "1" as const, label: "学生看得到", count: counts.value?.visible }, @@ -324,10 +326,11 @@ watch(() => [query.page, query.limit, query.author, query.kind, query.visible], 出题人 - + [query.page, query.limit, query.author, query.kind, query.visible], flex: 1 1 auto; } +.visible-tabs { + max-width: 100%; + overflow-x: auto; +} + .tab-count { margin-left: 6px; font-variant-numeric: tabular-nums; diff --git a/apps/web/src/oj/class/components/PkDuel.vue b/apps/web/src/oj/class/components/PkDuel.vue index dc42d4c..54454aa 100644 --- a/apps/web/src/oj/class/components/PkDuel.vue +++ b/apps/web/src/oj/class/components/PkDuel.vue @@ -80,7 +80,8 @@ const shownRows = computed(() => const weeks = computed(() => { const from = Math.max(0, props.pk.weeks.length - 8) const list = props.pk.weeks.slice(from).map((week, k) => ({ - label: parseTime(week, "M月D日"), + // 手机上八根柱挤在一行，「10月12日」只能用 10px 才放得下，太小；改短写法换大一号字 + label: parseTime(week, props.compact ? "M/D" : "M月D日"), values: [left.value.weekly[from + k] ?? 0, right.value.weekly[from + k] ?? 0], })) const max = Math.max(1, ...list.flatMap((week) => week.values)) @@ -779,6 +780,6 @@ const tab = ref<"weekly" | "dist">("weekly") } .compact .axis { - font-size: 10px; + font-size: 12px; } diff --git a/apps/web/src/oj/contest/pages/rank.vue b/apps/web/src/oj/contest/pages/rank.vue index c1a16aa..5e37280 100644 --- a/apps/web/src/oj/contest/pages/rank.vue +++ b/apps/web/src/oj/contest/pages/rank.vue @@ -97,10 +97,16 @@ const meBackground = computed( `linear-gradient(${success.value.background}, ${success.value.background}), ${theme.value.cardColor}`, ) const danger = computed(() => tone("error")) -const columns = computed( - () => - `40px ${running.value ? "36px " : ""}170px 48px 80px repeat(${problems.value.length}, 64px)`, -) +// 手机上照桌面的列宽，名字 + 做对 + 用时就占满一屏，每题的格子全在屏幕外，看不出能往右滑。 +// 收窄到第一两道题的格子露出半截 +const narrow = useMediaQuery("(max-width: 640px)") +const columns = computed(() => { + const move = running.value ? "36px " : "" + const count = problems.value.length + return narrow.value + ? `28px ${move}112px 36px 70px repeat(${count}, 52px)` + : `40px ${move}170px 48px 80px repeat(${count}, 64px)` +})