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)` +})