xuyue/OJ2
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(前台): 页面整体放大一档，列表不再挤成一团；宽屏上内容居中，不再铺满到两边
Deploy / deploy (push) Canceled after 0s
Details

Browse Source 
- index.css 加一张 --oj-* 尺寸表和 .oj-page 外壳，二十几个前台页面改成引用它：
  正文 14→15、页标题 20→24、题目/提交列表行高 40→48、比赛/公告 56、筛选控件 28→34
- 阅读型页面限宽 1200 居中；题目/提交列表 1600、比赛详情 1400、排名 1280、班级 PK 1440
- 1280 宽的筛选条放大后放不下，题目/提交列表在 1366 以下退回 13px 的字
- 班级 PK 五个班起格子里不写「一次 x%」（只剩「一次 8…」）；赛跑图线尾的数字不再被截掉
- 手机上比赛列表的「没参加」挪到比赛名下面；题单里「以前做对过 · 旧代码先藏着」缩成「做对过」
- 题目详情页（编辑器）和后台不在这一轮

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed 2026-10-10 12:43:12 +08:00
1 parent 45d79ed366
commit 1e441411a5
43 files changed
+983 -719
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/index.css
+31
View File
@@ -2,6 +2,37 @@ body {
height: 100vh; height: 100vh;
} }
/* 前台页面的尺寸表。2026-10 整体放大了一档（原来行高 38～40、正文 14、页标题 20、
列表铺满 2000px 宽，用户嫌「太紧凑、不够大气」）。各页的 scoped 样式引用这里，
别再各写各的 px —— 上一轮就是二十几个页面各自定数，才会整体偏小还不一致。
机房屏 1366×768 的可用高度只有 640 左右，行高 48 是和用户商量过的：题目列表在
这个高度还能看到 8 行。题目详情页（编辑器）不吃这张表，它按 640 高逐像素排过。 */
:root {
--oj-page-width: 1200px; /* 阅读型页面（比赛、题单、公告……）的限宽，居中 */
--oj-fs-title: 24px; /* 页标题 */
--oj-fs-h2: 17px; /* 区块标题 */
--oj-fs-body: 15px; /* 列表主文字：题目名、比赛名 */
--oj-fs-sec: 14px; /* 次要列：日期、知识点、人数 */
--oj-fs-meta: 13px; /* 表头、角注 */
--oj-row-h: 48px; /* 天天用的长列表：题目、提交 */
--oj-row-h-roomy: 56px; /* 条数少的列表：比赛、公告 */
--oj-head-h: 40px; /* 表头 */
--oj-ctrl-h: 34px; /* 筛选条里的自制按钮，和 Naive 的 medium 输入框等高 */
--oj-pad-x: 24px; /* 列表单元格左右留白 */
--oj-gap: 20px; /* 区块之间 */
--oj-radius: 10px;
}
/* 阅读型页面的外壳：限宽居中，上面多留一点 */
.oj-page {
box-sizing: border-box;
width: 100%;
max-width: var(--oj-page-width);
margin: 0 auto;
padding-top: 8px;
}
.md-editor-dark { .md-editor-dark {
--md-bk-color: var(--n-body-color) !important; --md-bk-color: var(--n-body-color) !important;
} }
apps/web/src/oj/achievement/components/AchievementCard.vue
+7 -2
View File
@@ -53,13 +53,13 @@ const unlockDate = computed(() => {
<template> <template>
<n-card <n-card
size="small" class="card"
:class="{ locked: !achievement.unlocked, rare: isRare }" :class="{ locked: !achievement.unlocked, rare: isRare }"
:style="{ borderColor: RARITY_COLOR[achievement.rarity] }" :style="{ borderColor: RARITY_COLOR[achievement.rarity] }"
> >
<n-thing> <n-thing>
<template #avatar> <template #avatar>
<AchievementIcon :icon="achievement.icon" :size="32" /> <AchievementIcon :icon="achievement.icon" :size="40" />
</template> </template>
<template #header> <template #header>
@@ -114,6 +114,11 @@ const unlockDate = computed(() => {
</template> </template>
<style scoped> <style scoped>
.card {
height: 100%;
border-radius: var(--oj-radius);
}
.nowrap { .nowrap {
white-space: nowrap; white-space: nowrap;
} }
apps/web/src/oj/achievement/index.vue
+19 -10
View File
@@ -58,10 +58,11 @@ watch(name, load)
</script> </script>
<template> <template>
<div class="hall"> <div class="hall oj-page">
<h2 class="title">成就</h2>
<!-- delay 50ms：缓存命中时数据几乎立刻回来，不闪一下转圈 --> <!-- delay 50ms：缓存命中时数据几乎立刻回来，不闪一下转圈 -->
<n-spin :show="loading" :delay="50" style="min-height: 240px"> <n-spin :show="loading" :delay="50" style="min-height: 240px">
<n-card v-if="summary"> <n-card v-if="summary" class="summary">
<n-flex align="center" :wrap="false" :size="isDesktop ? 32 : 16"> <n-flex align="center" :wrap="false" :size="isDesktop ? 32 : 16">
<n-flex vertical align="center" :size="6"> <n-flex vertical align="center" :size="6">
<n-progress type="circle" :percentage="summary.percent" :stroke-width="8"> <n-progress type="circle" :percentage="summary.percent" :stroke-width="8">
@@ -103,7 +104,7 @@ watch(name, load)
</n-tabs> </n-tabs>
<template v-if="tab !== 'badges'"> <template v-if="tab !== 'badges'">
<n-grid v-if="filtered.length" responsive="screen" cols="1 s:2 l:3" :x-gap="12" :y-gap="12"> <n-grid v-if="filtered.length" responsive="screen" cols="1 s:2 l:3" :x-gap="16" :y-gap="16">
<n-gi v-for="a in filtered" :key="a.id"> <n-gi v-for="a in filtered" :key="a.id">
<AchievementCard :achievement="a" /> <AchievementCard :achievement="a" />
</n-gi> </n-gi>
@@ -113,9 +114,9 @@ watch(name, load)
</template> </template>
<template v-else> <template v-else>
<n-grid v-if="badges.length" responsive="screen" cols="1 s:2 l:3" :x-gap="12" :y-gap="12"> <n-grid v-if="badges.length" responsive="screen" cols="1 s:2 l:3" :x-gap="16" :y-gap="16">
<n-gi v-for="b in badges" :key="b.id"> <n-gi v-for="b in badges" :key="b.id">
<n-card size="small"> <n-card class="badge-card">
<n-thing :title="b.badge?.name" :description="b.badge?.description"> <n-thing :title="b.badge?.name" :description="b.badge?.description">
<template #avatar v-if="b.badge?.icon"> <template #avatar v-if="b.badge?.icon">
<n-avatar <n-avatar
@@ -147,10 +148,18 @@ watch(name, load)
</template> </template>
<style scoped> <style scoped>
.hall { .title {
max-width: 1100px; margin: 0 0 var(--oj-gap);
margin: 0 auto; font-size: var(--oj-fs-title);
padding: 16px; }
.summary,
.badge-card {
border-radius: var(--oj-radius);
}
.badge-card {
height: 100%;
} }
.rarity { .rarity {
flex: 1; flex: 1;
@@ -160,7 +169,7 @@ watch(name, load)
white-space: nowrap; white-space: nowrap;
} }
.tabs { .tabs {
margin: 16px 0; margin: var(--oj-gap) 0;
} }
.source { .source {
display: block; display: block;
apps/web/src/oj/ai/analysis.vue
+8 -3
View File
@@ -1,8 +1,8 @@
<template> <template>
<n-spin :show="aiStore.loading.fetching" :delay="50"> <n-spin class="oj-page" :show="aiStore.loading.fetching" :delay="50">
<n-flex vertical size="large"> <n-flex vertical :size="20">
<n-flex align="center" justify="space-between"> <n-flex align="center" justify="space-between">
<n-h3 style="margin: 0">请选择时间范围，智能分析学习情况</n-h3> <h2 class="title">请选择时间范围，智能分析学习情况</h2>
<n-flex align="center"> <n-flex align="center">
<n-input <n-input
v-if="userStore.isTeacherOrAbove" v-if="userStore.isTeacherOrAbove"
@@ -96,6 +96,11 @@ watch(
) )
</script> </script>
<style scoped> <style scoped>
.title {
margin: 0;
font-size: var(--oj-fs-title);
}
.pair > :deep(.n-card) { .pair > :deep(.n-card) {
flex: 1 1 320px; flex: 1 1 320px;
} }
apps/web/src/oj/announcement/components/TitleWithTag.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<n-flex align="center"> <n-flex align="center" :size="8" :wrap="false">
<n-tag type="error" v-if="top">置顶</n-tag> <n-tag type="error" size="small" v-if="top">置顶</n-tag>
<span>{{ title }}</span> <span>{{ title }}</span>
</n-flex> </n-flex>
</template> </template>
apps/web/src/oj/announcement/list.vue
+106 -34
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { NTag } from "naive-ui" import { useThemeVars } from "naive-ui"
import { getAnnouncement, getAnnouncementList } from "oj/api" import { getAnnouncement, getAnnouncementList } from "oj/api"
import Pagination from "shared/components/Pagination.vue" import Pagination from "shared/components/Pagination.vue"
import { useBreakpoints } from "shared/composables/breakpoints" import { useBreakpoints } from "shared/composables/breakpoints"
@@ -13,43 +13,12 @@ const title = ref("")
const [show, toggleShow] = useToggle(false) const [show, toggleShow] = useToggle(false)
const { isDesktop } = useBreakpoints() const { isDesktop } = useBreakpoints()
const theme = useThemeVars()
const query = reactive({ const query = reactive({
limit: 10, limit: 10,
page: 1, page: 1,
}) })
const columns: DataTableColumn<AnnouncementListItem>[] = [
{
key: "title",
title: "公告标题",
render: (row) => h(TitleWithTag, { title: row.title, top: row.top }),
minWidth: 300,
},
{
key: "tag",
title: "标签",
width: 100,
render: (row) => h(NTag, () => row.tag || "公告"),
},
{
key: "createTime",
title: "发布时间",
render: (row) => parseTime(row.createTime),
width: 180,
},
{
key: "username",
title: "发布人",
render: (row) => row.createdBy.username,
width: 120,
},
]
function rowProps(row: AnnouncementListItem) {
return {
style: "cursor: pointer",
onclick: () => showContent(row),
}
}
async function showContent(announcement: AnnouncementListItem) { async function showContent(announcement: AnnouncementListItem) {
const res = await getAnnouncement(announcement.id) const res = await getAnnouncement(announcement.id)
@@ -58,20 +27,49 @@ async function showContent(announcement: AnnouncementListItem) {
content.value = res.content content.value = res.content
} }
const announcements = ref<AnnouncementListItem[]>([]) const announcements = ref<AnnouncementListItem[]>([])
const loaded = ref(false)
async function listAnnouncements() { async function listAnnouncements() {
const offset = (query.page - 1) * query.limit const offset = (query.page - 1) * query.limit
const res = await getAnnouncementList(offset, query.limit) const res = await getAnnouncementList(offset, query.limit)
total.value = res.total total.value = res.total
announcements.value = res.results announcements.value = res.results
loaded.value = true
} }
onMounted(listAnnouncements) onMounted(listAnnouncements)
watch(query, listAnnouncements, { deep: true }) watch(query, listAnnouncements, { deep: true })
</script> </script>
<template> <template>
<n-data-table :bordered="false" :data="announcements" :columns="columns" :row-props="rowProps" /> <div class="page oj-page">
<h2>公告</h2>
<div class="table">
<div class="tr th">
<span>公告标题</span>
<span>标签</span>
<span>发布时间</span>
<span>发布人</span>
</div>
<div
v-for="row in announcements"
:key="row.id"
class="tr"
role="link"
tabindex="0"
@click="showContent(row)"
@keyup.enter="showContent(row)"
>
<TitleWithTag :title="row.title" :top="row.top" />
<span
><n-tag size="small">{{ row.tag || "公告" }}</n-tag></span
>
<span class="muted num">{{ parseTime(row.createTime) }}</span>
<span class="muted">{{ row.createdBy.username }}</span>
</div>
<div v-if="loaded && !announcements.length" class="empty muted">还没有公告</div>
</div>
<Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" /> <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
</div>
<n-modal <n-modal
v-model:show="show" v-model:show="show"
preset="card" preset="card"
@@ -82,3 +80,77 @@ watch(query, listAnnouncements, { deep: true })
<div v-html="content"></div> <div v-html="content"></div>
</n-modal> </n-modal>
</template> </template>
<style scoped>
.page {
display: flex;
flex-direction: column;
gap: var(--oj-gap);
}
h2 {
margin: 0;
font-size: var(--oj-fs-title);
}
.muted {
color: v-bind("theme.textColor3");
}
.num {
font-variant-numeric: tabular-nums;
}
.table {
border: 1px solid v-bind("theme.borderColor");
border-radius: var(--oj-radius);
overflow: hidden;
}
.tr {
display: grid;
grid-template-columns: minmax(200px, 1fr) 80px 170px 120px;
align-items: center;
gap: 14px;
min-height: var(--oj-row-h-roomy);
padding: 0 var(--oj-pad-x);
font-size: var(--oj-fs-body);
border-bottom: 1px solid v-bind("theme.dividerColor");
cursor: pointer;
}
.tr > .muted {
font-size: var(--oj-fs-sec);
}
.tr:last-child {
border-bottom: 0;
}
.tr:not(.th):hover {
background: v-bind("theme.hoverColor");
}
.th {
min-height: var(--oj-head-h);
font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor");
cursor: default;
}
.empty {
padding: 32px var(--oj-pad-x);
}
@media (max-width: 760px) {
.tr {
grid-template-columns: 1fr auto;
}
.tr > :nth-child(2),
.tr > :nth-child(4) {
display: none;
}
}
</style>
apps/web/src/oj/class/components/PkDuel.vue
+22 -22
View File
@@ -331,13 +331,13 @@ const tab = ref<"weekly" | "dist">("weekly")
.duel { .duel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: var(--oj-gap);
} }
.score { .score {
padding: 18px 28px; padding: 24px 32px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center; align-items: center;
@@ -418,21 +418,21 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.muted { .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 400; font-weight: 400;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.card { .card {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
padding: 12px 16px 4px; padding: 16px var(--oj-pad-x) 6px;
min-width: 0; min-width: 0;
} }
.card.pad { .card.pad {
padding: 12px 16px; padding: 16px var(--oj-pad-x);
} }
.card-head { .card-head {
@@ -440,7 +440,7 @@ const tab = ref<"weekly" | "dist">("weekly")
align-items: baseline; align-items: baseline;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px 8px; gap: 4px 8px;
padding-bottom: 6px; padding-bottom: 10px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
} }
@@ -456,7 +456,7 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.row { .row {
min-height: 44px; min-height: 52px;
display: grid; display: grid;
grid-template-columns: 168px minmax(0, 1fr) 210px minmax(0, 1fr) 168px; grid-template-columns: 168px minmax(0, 1fr) 210px minmax(0, 1fr) 168px;
align-items: center; align-items: center;
@@ -481,7 +481,7 @@ const tab = ref<"weekly" | "dist">("weekly")
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
font-size: 14px; font-size: var(--oj-fs-body);
font-weight: 700; font-weight: 700;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
@@ -492,7 +492,7 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.sub { .sub {
font-size: 11px; font-size: 12px;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@@ -534,7 +534,7 @@ const tab = ref<"weekly" | "dist">("weekly")
.title a, .title a,
.m-title a { .m-title a {
max-width: 100%; max-width: 100%;
font-size: 13px; font-size: var(--oj-fs-sec);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
text-decoration: none; text-decoration: none;
@@ -555,21 +555,21 @@ const tab = ref<"weekly" | "dist">("weekly")
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 11px; font-size: 12px;
} }
.tags .muted { .tags .muted {
font-size: 11px; font-size: 12px;
} }
.most { .most {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #b54708; color: #b54708;
} }
.tie { .tie {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
@@ -584,7 +584,7 @@ const tab = ref<"weekly" | "dist">("weekly")
.bottom { .bottom {
display: flex; display: flex;
gap: 16px; gap: var(--oj-gap);
} }
.bottom > .card { .bottom > .card {
@@ -607,7 +607,7 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.pair { .pair {
height: 130px; height: 140px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 4px; gap: 4px;
@@ -621,7 +621,7 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.v { .v {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@@ -632,7 +632,7 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.axis { .axis {
font-size: 11px; font-size: 12px;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
} }
@@ -650,7 +650,7 @@ const tab = ref<"weekly" | "dist">("weekly")
} }
.dist-name { .dist-name {
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
} }
@@ -752,7 +752,7 @@ const tab = ref<"weekly" | "dist">("weekly")
border: 0; border: 0;
background: none; background: none;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
cursor: pointer; cursor: pointer;
} }
apps/web/src/oj/class/components/PkGrid.vue
+37 -27
View File
@@ -159,7 +159,9 @@ const medal = (index: number) => palette.value.medal[index]
<path d="M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z" /> <path d="M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z" />
</svg> </svg>
<b>{{ cell.percent }}{{ compact ? "" : "%" }}</b> <b>{{ cell.percent }}{{ compact ? "" : "%" }}</b>
<span v-if="!compact" class="first">一次 {{ cell.firstPercent }}%</span> <span v-if="!compact && pk.classes.length < 5" class="first"
>一次 {{ cell.firstPercent }}%</span
>
</span> </span>
</template> </template>
</div> </div>
@@ -226,7 +228,7 @@ const medal = (index: number) => palette.value.medal[index]
<style scoped> <style scoped>
.grid-pk { .grid-pk {
display: flex; display: flex;
gap: 16px; gap: var(--oj-gap);
align-items: flex-start; align-items: flex-start;
} }
@@ -238,21 +240,21 @@ const medal = (index: number) => palette.value.medal[index]
.card { .card {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
min-width: 0; min-width: 0;
} }
.table { .table {
flex: 1.75; flex: 1.75;
padding: 12px 16px; padding: 16px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
} }
.pad { .pad {
padding: 12px 16px; padding: 16px 20px;
} }
.card-title { .card-title {
@@ -263,7 +265,7 @@ const medal = (index: number) => palette.value.medal[index]
} }
.muted { .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 400; font-weight: 400;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -272,7 +274,7 @@ const medal = (index: number) => palette.value.medal[index]
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
min-height: 40px; min-height: 46px;
} }
.line.heads { .line.heads {
@@ -280,7 +282,7 @@ const medal = (index: number) => palette.value.medal[index]
} }
.name { .name {
width: 290px; width: 250px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
@@ -294,7 +296,7 @@ const medal = (index: number) => palette.value.medal[index]
} }
.name a { .name a {
font-size: 13px; font-size: var(--oj-fs-sec);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
text-decoration: none; text-decoration: none;
@@ -307,7 +309,7 @@ const medal = (index: number) => palette.value.medal[index]
.id { .id {
flex-shrink: 0; flex-shrink: 0;
font-size: 11px; font-size: 12px;
} }
.ell { .ell {
@@ -346,7 +348,7 @@ const medal = (index: number) => palette.value.medal[index]
} }
.per { .per {
font-size: 11px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
} }
@@ -356,12 +358,12 @@ const medal = (index: number) => palette.value.medal[index]
} }
.mine-tag { .mine-tag {
font-size: 11px; font-size: 12px;
background: rgba(24, 160, 88, 0.12); background: rgba(24, 160, 88, 0.12);
color: #18a058; color: #18a058;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 6px;
height: 16px; height: 18px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-weight: 600; font-weight: 600;
@@ -382,11 +384,13 @@ const medal = (index: number) => palette.value.medal[index]
.cell { .cell {
min-width: 0; min-width: 0;
height: 34px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 4px;
padding: 0 4px;
overflow: hidden;
border-radius: 4px; border-radius: 4px;
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -401,16 +405,22 @@ const medal = (index: number) => palette.value.medal[index]
} }
.cell b { .cell b {
font-size: 14px; font-size: var(--oj-fs-body);
} }
/* 五个班起整个不显示（1280 宽只剩「一次 8…」，截了等于没写，鼠标悬停的提示里有）；
四个班在 1280 下刚好放得下，这里的截断只是兜底，别折行、别溢出格子 */
.first { .first {
font-size: 11px; min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
opacity: 0.85; opacity: 0.85;
} }
.cell.none { .cell.none {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColorDisabled"); color: v-bind("theme.textColorDisabled");
background: repeating-linear-gradient( background: repeating-linear-gradient(
135deg, 135deg,
@@ -436,7 +446,7 @@ const medal = (index: number) => palette.value.medal[index]
.tie { .tie {
flex-shrink: 0; flex-shrink: 0;
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
@@ -458,11 +468,11 @@ const medal = (index: number) => palette.value.medal[index]
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: var(--oj-gap);
} }
.lead-row { .lead-row {
height: 34px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -483,7 +493,7 @@ const medal = (index: number) => palette.value.medal[index]
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: var(--oj-fs-sec);
flex-shrink: 0; flex-shrink: 0;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -502,10 +512,10 @@ const medal = (index: number) => palette.value.medal[index]
} }
.insight { .insight {
margin-top: 8px; margin-top: 10px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
padding: 8px 10px; padding: 10px 12px;
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
border-radius: 6px; border-radius: 6px;
} }
@@ -523,7 +533,7 @@ const medal = (index: number) => palette.value.medal[index]
border: 0; border: 0;
background: none; background: none;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
cursor: pointer; cursor: pointer;
} }
apps/web/src/oj/class/components/PkRace.vue
+2 -1
View File
@@ -15,7 +15,8 @@ const props = withDefaults(defineProps<{ pk: ClassPk; width?: number; height?: n
const theme = useThemeVars() const theme = useThemeVars()
const PAD = { left: 34, right: 92, top: 10, bottom: 26 } // 右边留给线尾的「26计算机0班 19.3」：12px 粗体量下来 105 左右，原来的 92 会把小数截掉
const PAD = { left: 34, right: 112, top: 10, bottom: 26 }
const series = computed(() => const series = computed(() =>
props.pk.classes.map((item) => { props.pk.classes.map((item) => {
apps/web/src/oj/class/pk.vue
+28 -26
View File
@@ -156,7 +156,7 @@ async function analyze() {
</script> </script>
<template> <template>
<div class="pk-page" :class="{ compact: !isDesktop }"> <div class="pk-page oj-page" :class="{ compact: !isDesktop }">
<div class="toolbar"> <div class="toolbar">
<div class="title-line"> <div class="title-line">
<router-link to="/rank" class="back">‹ 排名</router-link> <router-link to="/rank" class="back">‹ 排名</router-link>
@@ -317,16 +317,18 @@ async function analyze() {
</template> </template>
<style scoped> <style scoped>
/* 比别的阅读型页面宽：三个班以上是一张「题 × 班」的对照格，班多了格子会挤 */
.pk-page { .pk-page {
max-width: 1440px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: var(--oj-gap);
} }
.toolbar { .toolbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 14px;
} }
.title-line { .title-line {
@@ -338,11 +340,11 @@ async function analyze() {
.title-line h2 { .title-line h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: var(--oj-fs-title);
} }
.back { .back {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
text-decoration: none; text-decoration: none;
} }
@@ -352,26 +354,26 @@ async function analyze() {
} }
.muted { .muted {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.seg { .seg {
display: inline-flex; display: inline-flex;
height: 30px; height: var(--oj-ctrl-h);
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.seg button { .seg button {
padding: 0 12px; padding: 0 14px;
border: 0; border: 0;
border-left: 1px solid v-bind("theme.borderColor"); border-left: 1px solid v-bind("theme.borderColor");
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
@@ -398,15 +400,15 @@ async function analyze() {
} }
.chip { .chip {
height: 28px; height: var(--oj-ctrl-h);
box-sizing: border-box; box-sizing: border-box;
padding: 0 8px 0 10px; padding: 0 10px 0 12px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 14px; border-radius: 17px;
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
font-weight: 600; font-weight: 600;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -422,7 +424,7 @@ async function analyze() {
} }
.chip.add { .chip.add {
padding: 0 10px; padding: 0 14px;
border-style: dashed; border-style: dashed;
font-weight: 400; font-weight: 400;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
@@ -463,18 +465,18 @@ button.chip {
.vs { .vs {
font-weight: 800; font-weight: 800;
font-size: 15px; font-size: 16px;
font-style: italic; font-style: italic;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.mine-tag { .mine-tag {
font-size: 11px; font-size: 12px;
background: rgba(24, 160, 88, 0.12); background: rgba(24, 160, 88, 0.12);
color: #18a058; color: #18a058;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 6px;
height: 16px; height: 18px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-weight: 600; font-weight: 600;
@@ -482,13 +484,13 @@ button.chip {
.card { .card {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
} }
.empty { .empty {
min-height: 160px; min-height: 200px;
padding: 24px; padding: 32px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -503,9 +505,9 @@ button.chip {
} }
.ai { .ai {
margin-top: 14px; margin-top: 16px;
padding: 12px 16px; padding: 16px 20px;
border-radius: 8px; border-radius: var(--oj-radius);
border: 1px solid rgba(47, 111, 208, 0.3); border: 1px solid rgba(47, 111, 208, 0.3);
background: rgba(47, 111, 208, 0.05); background: rgba(47, 111, 208, 0.05);
display: flex; display: flex;
@@ -526,7 +528,7 @@ button.chip {
} }
.ai-head .muted { .ai-head .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.report { .report {
@@ -538,6 +540,6 @@ button.chip {
} }
.compact .chip { .compact .chip {
font-size: 12px; font-size: var(--oj-fs-meta);
} }
</style> </style>
apps/web/src/oj/classroom/board.vue
+18 -15
View File
@@ -368,7 +368,7 @@ function submissionsHref(
<template v-else-if="board"> <template v-else-if="board">
<!-- 布置题目：投影时收起来 --> <!-- 布置题目：投影时收起来 -->
<n-card v-if="!projector" size="small" class="section"> <n-card v-if="!projector" class="section">
<n-flex align="center" :wrap="false"> <n-flex align="center" :wrap="false">
<n-text strong style="flex-shrink: 0">这节课的题</n-text> <n-text strong style="flex-shrink: 0">这节课的题</n-text>
<n-select <n-select
@@ -429,7 +429,7 @@ function submissionsHref(
status="success" status="success"
:percentage="problem.total ? Math.round((problem.done / problem.total) * 100) : 0" :percentage="problem.total ? Math.round((problem.done / problem.total) * 100) : 0"
:show-indicator="false" :show-indicator="false"
:height="projector ? 28 : 10" :height="projector ? 28 : 12"
/> />
<div class="summary-count">{{ problem.done }} / {{ problem.total }} 人做完</div> <div class="summary-count">{{ problem.done }} / {{ problem.total }} 人做完</div>
</div> </div>
@@ -654,40 +654,42 @@ function submissionsHref(
} }
.toolbar { .toolbar {
margin-bottom: 16px; margin: 8px 0 var(--oj-gap);
} }
.title { .title {
margin: 0; margin: 0 4px 0 0;
font-size: 20px; font-size: var(--oj-fs-title);
} }
.section { .section {
margin-bottom: 16px; margin-bottom: var(--oj-gap);
} }
.meta { .meta {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.summary { .summary {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px 24px; gap: 20px 32px;
margin-bottom: 16px; margin-bottom: 24px;
} }
.summary-title { .summary-title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-bottom: 4px; margin-bottom: 6px;
font-size: var(--oj-fs-body);
font-weight: 600;
} }
.summary-count { .summary-count {
font-size: 13px; font-size: var(--oj-fs-sec);
opacity: 0.75; opacity: 0.75;
margin-top: 2px; margin-top: 4px;
} }
.projector .summary { .projector .summary {
@@ -702,24 +704,25 @@ function submissionsHref(
.table-wrap { .table-wrap {
overflow-x: auto; overflow-x: auto;
margin-top: 8px; margin-top: 12px;
} }
.grid { .grid {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
font-size: 14px; font-size: var(--oj-fs-body);
} }
.grid th, .grid th,
.grid td { .grid td {
padding: 6px 10px; padding: 10px 12px;
border-bottom: 1px solid rgba(128, 128, 128, 0.15); border-bottom: 1px solid rgba(128, 128, 128, 0.15);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
.grid th { .grid th {
font-size: var(--oj-fs-sec);
font-weight: 500; font-weight: 500;
opacity: 0.8; opacity: 0.8;
} }
apps/web/src/oj/contest/components/RankMini.vue
+6 -5
View File
@@ -58,13 +58,14 @@ function move(row: ContestScoreRow) {
} }
.line { .line {
height: 30px; height: 36px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 12px; padding: 0 14px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
border-radius: 4px; border-radius: 6px;
font-size: var(--oj-fs-sec);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
} }
@@ -86,7 +87,7 @@ function move(row: ContestScoreRow) {
.move { .move {
width: 28px; width: 28px;
font-size: 11px; font-size: 12px;
} }
.up { .up {
@@ -112,7 +113,7 @@ function move(row: ContestScoreRow) {
.time { .time {
width: 62px; width: 62px;
text-align: right; text-align: right;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
apps/web/src/oj/contest/detail.vue
+17 -9
View File
@@ -165,7 +165,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
</span> </span>
<span v-if="untilStart" class="gate-count">{{ untilStart }}</span> <span v-if="untilStart" class="gate-count">{{ untilStart }}</span>
</div> </div>
<router-view v-else></router-view> <div v-else class="body"><router-view></router-view></div>
</div> </div>
</template> </template>
@@ -176,10 +176,18 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
margin: -16px -16px 0; margin: -16px -16px 0;
} }
.body {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
/* 1920 的屏上铺满的话，领奖台在最左、「你的成绩」在最右，榜单只占左半边。
内容限宽 1400 居中；顶栏的分隔线照旧通栏，所以限宽用内边距做而不是 max-width */
.bar { .bar {
min-height: 60px; min-height: 68px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px; padding: 12px max(var(--oj-pad-x), calc((100% - 1400px) / 2 + var(--oj-pad-x)));
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@@ -189,7 +197,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
.title { .title {
margin: 0; margin: 0;
font-size: 18px; font-size: 22px;
font-weight: 700; font-weight: 700;
min-width: 0; min-width: 0;
} }
@@ -206,7 +214,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
} }
.countdown-label { .countdown-label {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.countdown-num { .countdown-num {
@@ -220,7 +228,7 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
} }
.range { .range {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -239,11 +247,11 @@ const to = (name: string) => ({ name, params: { contestID: props.contestID } })
} }
.tab { .tab {
height: 32px; height: var(--oj-ctrl-h);
padding: 0 14px; padding: 0 16px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
text-decoration: none; text-decoration: none;
} }
apps/web/src/oj/contest/list.vue
+39 -23
View File
@@ -130,7 +130,7 @@ const warning = computed(() => tone("warning"))
</script> </script>
<template> <template>
<div class="page"> <div class="page oj-page">
<div class="top"> <div class="top">
<h2>比赛</h2> <h2>比赛</h2>
<div class="spacer"></div> <div class="spacer"></div>
@@ -263,15 +263,15 @@ const warning = computed(() => tone("warning"))
{{ query.scope === "joined" ? "你还没参加过比赛" : "没有符合的比赛" }} {{ query.scope === "joined" ? "你还没参加过比赛" : "没有符合的比赛" }}
</div> </div>
</div> </div>
</div>
<Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" /> <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
</div>
</template> </template>
<style scoped> <style scoped>
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: var(--oj-gap);
} }
.top { .top {
@@ -283,7 +283,7 @@ const warning = computed(() => tone("warning"))
.top h2 { .top h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: var(--oj-fs-title);
} }
.spacer { .spacer {
@@ -304,7 +304,7 @@ const warning = computed(() => tone("warning"))
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.num { .num {
@@ -320,13 +320,13 @@ const warning = computed(() => tone("warning"))
} }
.chip { .chip {
height: 28px; height: var(--oj-ctrl-h);
padding: 0 12px; padding: 0 16px;
border-radius: 14px; border-radius: 17px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
} }
@@ -339,12 +339,12 @@ const warning = computed(() => tone("warning"))
} }
.running { .running {
padding: 16px 20px; padding: 20px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px 20px; gap: 16px 20px;
border-radius: 6px; border-radius: var(--oj-radius);
border: 1px solid v-bind("theme.successColor"); border: 1px solid v-bind("theme.successColor");
background: v-bind("success.background"); background: v-bind("success.background");
cursor: pointer; cursor: pointer;
@@ -361,7 +361,7 @@ const warning = computed(() => tone("warning"))
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 20px; font-size: 22px;
font-weight: 700; font-weight: 700;
} }
@@ -382,34 +382,35 @@ const warning = computed(() => tone("warning"))
} }
.upcoming { .upcoming {
padding: 12px 20px; padding: 16px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px 16px; gap: 12px 16px;
border-radius: 6px; border-radius: var(--oj-radius);
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
cursor: pointer; cursor: pointer;
} }
.upcoming-title { .upcoming-title {
font-size: 15px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.table { .table {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
overflow: hidden; overflow: hidden;
} }
.tr { .tr {
display: grid; display: grid;
grid-template-columns: minmax(200px, 1fr) 70px 110px 130px minmax(160px, 260px); grid-template-columns: minmax(200px, 1fr) 70px 110px 130px minmax(160px, 240px);
align-items: center; align-items: center;
gap: 14px; gap: 14px;
min-height: 38px; min-height: var(--oj-row-h-roomy);
padding: 0 20px; padding: 0 var(--oj-pad-x);
font-size: var(--oj-fs-body);
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
cursor: pointer; cursor: pointer;
} }
@@ -423,8 +424,8 @@ const warning = computed(() => tone("warning"))
} }
.th { .th {
min-height: 32px; min-height: var(--oj-head-h);
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
cursor: default; cursor: default;
@@ -453,16 +454,31 @@ const warning = computed(() => tone("warning"))
} }
.empty { .empty {
padding: 24px 20px; padding: 32px var(--oj-pad-x);
} }
/* 手机：只剩比赛名、类型、「我」三列。「我」放到比赛名下面一行当副标题，
不然它会按网格掉到下一行的第一格，看着像一行没对齐的新数据 */
@media (max-width: 760px) { @media (max-width: 760px) {
.tr { .tr {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
row-gap: 2px;
padding-top: 10px;
padding-bottom: 10px;
} }
.tr > span:nth-child(3), .tr > span:nth-child(3),
.tr > span:nth-child(4) { .tr > span:nth-child(4),
.th > span:nth-child(5) {
display: none;
}
.tr > .mine {
grid-column: 1 / -1;
font-size: var(--oj-fs-meta);
}
.tr > .mine:empty {
display: none; display: none;
} }
} }
apps/web/src/oj/contest/pages/class.vue
+49 -48
View File
@@ -320,9 +320,9 @@ const success = computed(() => tone("success"))
const danger = computed(() => tone("error")) const danger = computed(() => tone("error"))
const warning = computed(() => tone("warning")) const warning = computed(() => tone("warning"))
const liveColumns = computed( const liveColumns = computed(
() => `116px 44px repeat(${problems.value.length}, minmax(64px, 92px)) 82px 1fr`, () => `130px 48px repeat(${problems.value.length}, minmax(70px, 96px)) 90px 1fr`,
) )
const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.value.length}, 46px)`) const gradeColumns = computed(() => `24px 124px 40px 36px repeat(${problems.value.length}, 50px)`)
</script> </script>
<template> <template>
@@ -622,11 +622,11 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.tiny { .tiny {
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.spacer { .spacer {
@@ -645,9 +645,9 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.summary { .summary {
min-height: 70px; min-height: 80px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px; padding: 12px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@@ -662,13 +662,13 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.stat b { .stat b {
font-size: 22px; font-size: 26px;
line-height: 1.1; line-height: 1.1;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.stat span { .stat span {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -693,15 +693,16 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
align-items: center; align-items: center;
column-gap: 6px; column-gap: 6px;
min-width: max-content; min-width: max-content;
min-height: 38px; min-height: 46px;
padding: 0 20px; padding: 0 var(--oj-pad-x);
font-size: var(--oj-fs-body);
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
} }
.th { .th {
min-height: 46px; min-height: 50px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
} }
@@ -722,7 +723,7 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.ph span { .ph span {
font-size: 11px; font-size: 12px;
} }
.solved { .solved {
@@ -736,18 +737,18 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
.cell { .cell {
width: 100%; width: 100%;
height: 24px; height: 30px;
border-radius: 3px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 2px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.cell small { .cell small {
font-size: 10px; font-size: 11px;
opacity: 0.8; opacity: 0.8;
} }
@@ -775,11 +776,11 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.group { .group {
height: 26px; height: 32px;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
@@ -797,10 +798,10 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.flag { .flag {
height: 22px; height: 24px;
padding: 0 8px; padding: 0 9px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
@@ -829,9 +830,9 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
/* ---------- 成绩 ---------- */ /* ---------- 成绩 ---------- */
.grade-bar { .grade-bar {
min-height: 64px; min-height: 72px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px; padding: 12px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@@ -858,7 +859,7 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px 14px; gap: 4px 14px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -886,8 +887,8 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.sort { .sort {
height: 40px; height: 48px;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@@ -895,13 +896,13 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.chip { .chip {
height: 24px; height: 30px;
padding: 0 10px; padding: 0 12px;
border-radius: 12px; border-radius: 15px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
} }
@@ -914,20 +915,20 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.sheet-scroll { .sheet-scroll {
max-height: calc(100vh - 260px); max-height: calc(100vh - 284px);
overflow: auto; overflow: auto;
} }
.sheet .tr { .sheet .tr {
min-height: 34px; min-height: 40px;
padding: 0 16px 0 20px; padding: 0 16px 0 var(--oj-pad-x);
} }
.sheet .th { .sheet .th {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
min-height: 40px; min-height: 46px;
} }
.tr.picked { .tr.picked {
@@ -936,12 +937,12 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
.gc { .gc {
position: relative; position: relative;
height: 24px; height: 28px;
border: 0; border: 0;
border-radius: 3px; border-radius: 4px;
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
cursor: pointer; cursor: pointer;
} }
@@ -974,10 +975,10 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
flex: 1 1 480px; flex: 1 1 480px;
min-width: 0; min-width: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 14px 20px 12px; padding: 16px var(--oj-pad-x) 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 12px;
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
} }
@@ -989,10 +990,10 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
} }
.pill { .pill {
height: 22px; height: 24px;
padding: 0 8px; padding: 0 9px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -1011,11 +1012,11 @@ const gradeColumns = computed(() => `22px 110px 36px 34px repeat(${problems.valu
.code-box { .code-box {
flex-grow: 1; flex-grow: 1;
min-height: 300px; min-height: 300px;
max-height: calc(100vh - 340px); max-height: calc(100vh - 360px);
overflow: auto; overflow: auto;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid v-bind("theme.dividerColor"); border: 1px solid v-bind("theme.dividerColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
font-size: 15px; font-size: 15px;
} }
apps/web/src/oj/contest/pages/problems.vue
+31 -29
View File
@@ -266,7 +266,7 @@ const warning = computed(() => tone("warning"))
.layout { .layout {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
min-height: calc(100vh - 140px); min-height: calc(100vh - 148px);
} }
.problems { .problems {
@@ -279,10 +279,10 @@ const warning = computed(() => tone("warning"))
flex: 1 1 400px; flex: 1 1 400px;
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 16px 20px; padding: 20px var(--oj-pad-x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: 16px;
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
} }
@@ -293,9 +293,10 @@ const warning = computed(() => tone("warning"))
} }
.head { .head {
height: 40px; height: var(--oj-head-h);
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px; padding: 0 var(--oj-pad-x);
font-size: var(--oj-fs-sec);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -316,16 +317,17 @@ const warning = computed(() => tone("warning"))
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-meta);
} }
.row { .row {
min-height: 34px; min-height: var(--oj-row-h);
box-sizing: border-box; box-sizing: border-box;
padding: 4px 16px; padding: 4px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 14px;
font-size: var(--oj-fs-body);
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
text-decoration: none; text-decoration: none;
@@ -336,8 +338,8 @@ const warning = computed(() => tone("warning"))
} }
.dot { .dot {
width: 20px; width: 24px;
height: 20px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
@@ -365,7 +367,7 @@ const warning = computed(() => tone("warning"))
width: 22px; width: 22px;
text-align: right; text-align: right;
flex-shrink: 0; flex-shrink: 0;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@@ -380,7 +382,7 @@ const warning = computed(() => tone("warning"))
.mine { .mine {
flex-shrink: 0; flex-shrink: 0;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -389,7 +391,7 @@ const warning = computed(() => tone("warning"))
} }
.count { .count {
width: 150px; width: 160px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -411,15 +413,15 @@ const warning = computed(() => tone("warning"))
} }
.count-num { .count-num {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.first { .first {
width: 180px; width: 190px;
flex-shrink: 0; flex-shrink: 0;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -427,12 +429,12 @@ const warning = computed(() => tone("warning"))
} }
.card { .card {
padding: 14px 16px; padding: 18px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 10px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
} }
@@ -452,10 +454,10 @@ const warning = computed(() => tone("warning"))
.move { .move {
align-self: center; align-self: center;
height: 22px; height: 24px;
padding: 0 8px; padding: 0 10px;
border-radius: 11px; border-radius: 12px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -472,9 +474,9 @@ const warning = computed(() => tone("warning"))
} }
.nudge { .nudge {
padding: 8px 10px; padding: 10px 12px;
border-radius: 4px; border-radius: 6px;
font-size: 13px; font-size: var(--oj-fs-sec);
background: v-bind("warning.background"); background: v-bind("warning.background");
color: v-bind("warning.color"); color: v-bind("warning.color");
} }
@@ -522,7 +524,7 @@ const warning = computed(() => tone("warning"))
} }
.link { .link {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
text-decoration: none; text-decoration: none;
} }
@@ -533,7 +535,7 @@ const warning = computed(() => tone("warning"))
.rule { .rule {
line-height: 1.6; line-height: 1.6;
font-size: 12px; font-size: var(--oj-fs-meta);
} }
/* 手机：题目名要留得下，人数和「最先」只在右边的排名里看 */ /* 手机：题目名要留得下，人数和「最先」只在右边的排名里看 */
apps/web/src/oj/contest/pages/rank.vue
+38 -37
View File
@@ -99,7 +99,7 @@ const meBackground = computed(
const danger = computed(() => tone("error")) const danger = computed(() => tone("error"))
const columns = computed( const columns = computed(
() => () =>
`34px ${running.value ? "34px " : ""}150px 40px 70px repeat(${problems.value.length}, 58px)`, `40px ${running.value ? "36px " : ""}170px 48px 80px repeat(${problems.value.length}, 64px)`,
) )
</script> </script>
@@ -272,7 +272,7 @@ const columns = computed(
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.spacer { .spacer {
@@ -280,11 +280,11 @@ const columns = computed(
} }
.podium-row { .podium-row {
padding: 12px 20px 0; padding: 20px var(--oj-pad-x) 0;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 24px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
} }
@@ -303,12 +303,12 @@ const columns = computed(
} }
.podium-name { .podium-name {
font-size: 15px; font-size: 16px;
max-width: 200px; max-width: 200px;
} }
.p1 .podium-name { .p1 .podium-name {
font-size: 17px; font-size: 18px;
} }
.block { .block {
@@ -352,14 +352,14 @@ const columns = computed(
} }
.mine { .mine {
width: 330px; width: 340px;
margin-bottom: 16px; margin-bottom: 20px;
padding: 14px 16px; padding: 18px 20px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 8px;
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("success.background"); background: v-bind("success.background");
} }
@@ -370,31 +370,31 @@ const columns = computed(
} }
.mine-big { .mine-big {
font-size: 28px; font-size: 30px;
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
color: v-bind("success.color"); color: v-bind("success.color");
} }
.tools { .tools {
min-height: 48px; min-height: 56px;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 20px; padding: 10px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 8px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
} }
.chip { .chip {
height: 26px; height: 32px;
padding: 0 10px; padding: 0 14px;
border-radius: 13px; border-radius: 16px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -408,7 +408,7 @@ const columns = computed(
} }
.table { .table {
max-height: calc(100vh - 230px); max-height: calc(100vh - 246px);
overflow: auto; overflow: auto;
} }
@@ -417,8 +417,9 @@ const columns = computed(
align-items: center; align-items: center;
column-gap: 6px; column-gap: 6px;
min-width: max-content; min-width: max-content;
height: 32px; height: 42px;
padding: 0 20px; padding: 0 var(--oj-pad-x);
font-size: var(--oj-fs-body);
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
} }
@@ -427,8 +428,8 @@ const columns = computed(
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
height: 44px; height: 48px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
} }
@@ -436,7 +437,7 @@ const columns = computed(
.tr.me { .tr.me {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
top: 44px; top: 48px;
z-index: 1; z-index: 1;
/* 浅绿是半透明的，钉住时底下的行会透上来，垫一层卡片底色 */ /* 浅绿是半透明的，钉住时底下的行会透上来，垫一层卡片底色 */
background: v-bind("meBackground"); background: v-bind("meBackground");
@@ -462,13 +463,13 @@ const columns = computed(
} }
.time { .time {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
padding-right: 8px; padding-right: 8px;
} }
.move { .move {
font-size: 11px; font-size: 12px;
} }
.up { .up {
@@ -493,12 +494,12 @@ const columns = computed(
} }
.ph b { .ph b {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
.ph span { .ph span {
font-size: 11px; font-size: 12px;
} }
.cell-wrap { .cell-wrap {
@@ -507,18 +508,18 @@ const columns = computed(
.cell { .cell {
width: 100%; width: 100%;
height: 26px; height: 30px;
border-radius: 3px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 2px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.cell small { .cell small {
font-size: 10px; font-size: 11px;
opacity: 0.8; opacity: 0.8;
} }
@@ -539,18 +540,18 @@ const columns = computed(
} }
.empty { .empty {
padding: 24px 20px; padding: 32px var(--oj-pad-x);
} }
.legend { .legend {
min-height: 34px; min-height: 42px;
padding: 6px 20px; padding: 8px var(--oj-pad-x);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 16px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
border-top: 1px solid v-bind("theme.dividerColor"); border-top: 1px solid v-bind("theme.dividerColor");
} }
apps/web/src/oj/home/dashboard.vue
+38 -28
View File
@@ -352,7 +352,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
<div class="column"> <div class="column">
<!-- 「上次来」：上次登录到这次登录之间交过题才有。班里今天在做的时候让位给班里卡， <!-- 「上次来」：上次登录到这次登录之间交过题才有。班里今天在做的时候让位给班里卡，
只在那张卡底下留一句没做对的 --> 只在那张卡底下留一句没做对的 -->
<n-card v-if="visit && !classToday" size="small" :bordered="false" class="card"> <n-card v-if="visit && !classToday" :bordered="false" class="card">
<template #header>上次来 · {{ visitText(lastVisit!.previousLogin!) }}</template> <template #header>上次来 · {{ visitText(lastVisit!.previousLogin!) }}</template>
<template #header-extra> <template #header-extra>
<n-text depth="3" class="row-meta"> <n-text depth="3" class="row-meta">
@@ -392,7 +392,6 @@ async function openAnnouncement(item: AnnouncementListItem) {
<n-card <n-card
v-if="classActivity?.problems.length && !visitCoversClass" v-if="classActivity?.problems.length && !visitCoversClass"
:title="classActivityTitle" :title="classActivityTitle"
size="small"
:bordered="false" :bordered="false"
class="card" class="card"
> >
@@ -427,7 +426,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
</div> </div>
</n-card> </n-card>
<n-card title="继续学习" size="small" :bordered="false" class="card"> <n-card title="继续学习" :bordered="false" class="card">
<n-flex vertical :size="12"> <n-flex vertical :size="12">
<router-link <router-link
v-for="track in tracks" v-for="track in tracks"
@@ -462,7 +461,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
</n-flex> </n-flex>
</n-card> </n-card>
<n-card title="最近提交" size="small" :bordered="false" class="card"> <n-card title="最近提交" :bordered="false" class="card">
<template #header-extra> <template #header-extra>
<router-link to="/submission?myself=1" class="more">全部</router-link> <router-link to="/submission?myself=1" class="more">全部</router-link>
</template> </template>
@@ -485,7 +484,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
</div> </div>
<div class="column"> <div class="column">
<n-card title="比赛" size="small" :bordered="false" class="card"> <n-card title="比赛" :bordered="false" class="card">
<template #header-extra> <template #header-extra>
<router-link to="/contest" class="more">全部</router-link> <router-link to="/contest" class="more">全部</router-link>
</template> </template>
@@ -508,7 +507,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
</n-text> </n-text>
</n-card> </n-card>
<n-card title="公告" size="small" :bordered="false" class="card"> <n-card title="公告" :bordered="false" class="card">
<template #header-extra> <template #header-extra>
<router-link to="/announcement" class="more">全部</router-link> <router-link to="/announcement" class="more">全部</router-link>
</template> </template>
@@ -524,7 +523,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
</div> </div>
</n-card> </n-card>
<n-card size="small" :bordered="false" class="card"> <n-card :bordered="false" class="card">
<n-flex :size="8" class="shortcuts"> <n-flex :size="8" class="shortcuts">
<n-button secondary @click="router.push('/problem')"> <n-button secondary @click="router.push('/problem')">
<template #icon><Icon icon="fluent-emoji:memo" /></template> <template #icon><Icon icon="fluent-emoji:memo" /></template>
@@ -561,7 +560,7 @@ async function openAnnouncement(item: AnnouncementListItem) {
<style scoped> <style scoped>
.home { .home {
max-width: 1200px; max-width: var(--oj-page-width);
margin: 0 auto; margin: 0 auto;
} }
@@ -571,13 +570,13 @@ async function openAnnouncement(item: AnnouncementListItem) {
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
flex-wrap: wrap; flex-wrap: wrap;
margin: 8px 0 20px; margin: 16px 0 28px;
} }
.hello { .hello {
font-size: 24px; font-size: 28px;
font-weight: 600; font-weight: 600;
margin: 0 0 6px; margin: 0 0 8px;
} }
.knowledge-line { .knowledge-line {
@@ -596,14 +595,14 @@ async function openAnnouncement(item: AnnouncementListItem) {
} }
.search { .search {
width: 320px; width: 340px;
max-width: 100%; max-width: 100%;
} }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 16px; gap: var(--oj-gap);
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -615,21 +614,29 @@ async function openAnnouncement(item: AnnouncementListItem) {
.column { .column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: var(--oj-gap);
min-width: 0; min-width: 0;
} }
.card { .card {
border-radius: 8px; border-radius: var(--oj-radius);
background-color: var(--n-color-embedded, rgba(128, 128, 128, 0.06)); background-color: var(--n-color-embedded, rgba(128, 128, 128, 0.06));
} }
/* 卡片用回 Naive 默认的 medium（左右 24），手机上太费地方，收回 16 */
@media (max-width: 600px) {
.card {
--n-padding-left: 16px !important;
--n-padding-right: 16px !important;
}
}
.track { .track {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 20px;
padding: 12px; padding: 16px 18px;
border-radius: 6px; border-radius: 8px;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
background-color: rgba(128, 128, 128, 0.06); background-color: rgba(128, 128, 128, 0.06);
@@ -645,17 +652,17 @@ async function openAnnouncement(item: AnnouncementListItem) {
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 6px;
} }
.track-label, .track-label,
.track-meta, .track-meta,
.row-meta { .row-meta {
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.track-title { .track-title {
font-size: 16px; font-size: 17px;
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -665,8 +672,11 @@ async function openAnnouncement(item: AnnouncementListItem) {
.row { .row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
padding: 8px 4px; min-height: 46px;
box-sizing: border-box;
padding: 8px 6px;
font-size: var(--oj-fs-body);
border-radius: 4px; border-radius: 4px;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@@ -709,9 +719,9 @@ a.row:hover {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 10px 12px; padding: 12px 16px;
margin-bottom: 8px; margin-bottom: 10px;
border-radius: 6px; border-radius: 8px;
border: 1px solid rgba(128, 128, 128, 0.18); border: 1px solid rgba(128, 128, 128, 0.18);
background-color: var(--n-color, #fff); background-color: var(--n-color, #fff);
color: inherit; color: inherit;
@@ -737,7 +747,7 @@ a.row:hover {
margin-top: 4px; margin-top: 4px;
padding: 10px 4px 2px; padding: 10px 4px 2px;
border-top: 1px solid rgba(128, 128, 128, 0.12); border-top: 1px solid rgba(128, 128, 128, 0.12);
font-size: 13px; font-size: var(--oj-fs-sec);
opacity: 0.75; opacity: 0.75;
} }
@@ -767,7 +777,7 @@ a.row:hover {
} }
.more { .more {
font-size: 13px; font-size: var(--oj-fs-sec);
opacity: 0.7; opacity: 0.7;
} }
apps/web/src/oj/problem/components/TagNav.vue
+8 -8
View File
@@ -115,17 +115,17 @@ function percent(tag: Tag) {
.switch { .switch {
flex: none; flex: none;
padding: 14px 14px 8px; padding: 16px 14px 10px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.switch button { .switch button {
height: 28px; height: 32px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -161,12 +161,12 @@ function percent(tag: Tag) {
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 6px 10px 7px; padding: 9px 10px 9px;
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 14px; font-size: var(--oj-fs-body);
text-align: left; text-align: left;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
display: flex; display: flex;
@@ -176,7 +176,7 @@ function percent(tag: Tag) {
} }
.item.flat { .item.flat {
padding: 7px 10px; padding: 10px 10px;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
@@ -217,7 +217,7 @@ function percent(tag: Tag) {
.count { .count {
flex: none; flex: none;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@@ -232,7 +232,7 @@ function percent(tag: Tag) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 3px; gap: 3px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
color: v-bind("tone('success').color"); color: v-bind("tone('success').color");
} }
apps/web/src/oj/problem/list.vue
+47 -30
View File
@@ -391,8 +391,8 @@ watch(
const gridColumns = computed(() => const gridColumns = computed(() =>
showStatus.value showStatus.value
? "40px 64px minmax(0, 1fr) 190px 64px 128px" ? "40px 72px minmax(0, 1fr) 190px 72px 136px"
: "64px minmax(0, 1fr) 190px 64px 128px", : "72px minmax(0, 1fr) 190px 72px 136px",
) )
</script> </script>
@@ -436,7 +436,6 @@ const gridColumns = computed(() =>
<n-input <n-input
v-model:value="query.keyword" v-model:value="query.keyword"
class="w-search" class="w-search"
size="small"
clearable clearable
placeholder="题号或标题" placeholder="题号或标题"
> >
@@ -503,7 +502,6 @@ const gridColumns = computed(() =>
<n-select <n-select
:value="query.author || null" :value="query.author || null"
class="w-author" class="w-author"
size="small"
placeholder="出题者" placeholder="出题者"
clearable clearable
filterable filterable
@@ -515,7 +513,6 @@ const gridColumns = computed(() =>
<n-select <n-select
v-model:value="query.sort" v-model:value="query.sort"
class="w-sort" class="w-sort"
size="small"
:consistent-menu-width="false" :consistent-menu-width="false"
:options="sortOptions" :options="sortOptions"
/> />
@@ -730,9 +727,13 @@ const gridColumns = computed(() =>
height: auto; height: auto;
} }
/* 1920 的屏上不限宽的话，题目名在最左、人数在最右，中间一大片空 */
.split { .split {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
width: 100%;
max-width: 1600px;
margin: 0 auto;
display: flex; display: flex;
} }
@@ -783,10 +784,10 @@ const gridColumns = computed(() =>
/* 1280 宽（机房 1280×1024）也要一行放下：左栏 224 之后只剩 1008，控件宽度是按它掐的， /* 1280 宽（机房 1280×1024）也要一行放下：左栏 224 之后只剩 1008，控件宽度是按它掐的，
加东西之前先在 1280 下看一眼「只看没做完」还在不在 */ 加东西之前先在 1280 下看一眼「只看没做完」还在不在 */
.titlebar { .titlebar {
height: 56px; height: 68px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@@ -794,13 +795,13 @@ const gridColumns = computed(() =>
} }
.titlebar h1 { .titlebar h1 {
margin: 0; margin: 0 2px 0 0;
font-size: 18px; font-size: 22px;
font-weight: 700; font-weight: 700;
} }
.count { .count {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -814,16 +815,16 @@ const gridColumns = computed(() =>
} }
.random { .random {
height: 28px; height: var(--oj-ctrl-h);
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
margin-left: 4px; margin-left: 4px;
padding: 0 9px 0 7px; padding: 0 12px 0 10px;
border: 1px solid v-bind("theme.primaryColorSuppl"); border: 1px solid v-bind("theme.primaryColorSuppl");
border-radius: 14px; border-radius: 17px;
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("tone('success').color"); color: v-bind("tone('success').color");
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -861,13 +862,13 @@ const gridColumns = computed(() =>
} }
.segmented button { .segmented button {
height: 28px; height: var(--oj-ctrl-h);
padding: 0 10px; padding: 0 10px;
margin-left: -1px; margin-left: -1px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -890,8 +891,8 @@ const gridColumns = computed(() =>
} }
.select { .select {
width: 96px; width: 100px;
height: 28px; height: var(--oj-ctrl-h);
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 8px 0 10px; padding: 0 8px 0 10px;
@@ -899,7 +900,7 @@ const gridColumns = computed(() =>
border-radius: 3px; border-radius: 3px;
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1014,7 +1015,7 @@ const gridColumns = computed(() =>
align-items: center; align-items: center;
gap: 6px; gap: 6px;
flex: none; flex: none;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -1035,16 +1036,16 @@ const gridColumns = computed(() =>
.thead, .thead,
.row { .row {
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px; padding: 0 var(--oj-pad-x);
display: grid; display: grid;
column-gap: 16px; column-gap: 16px;
align-items: center; align-items: center;
} }
.thead { .thead {
height: 36px; height: var(--oj-head-h);
flex: none; flex: none;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.tableHeaderColor"); background: v-bind("theme.tableHeaderColor");
@@ -1058,7 +1059,8 @@ const gridColumns = computed(() =>
} }
.row { .row {
height: 40px; height: var(--oj-row-h);
font-size: var(--oj-fs-body);
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
text-decoration: none; text-decoration: none;
@@ -1106,7 +1108,7 @@ const gridColumns = computed(() =>
} }
.knowledge { .knowledge {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -1114,16 +1116,16 @@ const gridColumns = computed(() =>
} }
.difficulty { .difficulty {
height: 22px; height: 24px;
padding: 0 7px; padding: 0 8px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.people { .people {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
white-space: nowrap; white-space: nowrap;
@@ -1181,6 +1183,21 @@ const gridColumns = computed(() =>
margin-top: 6px; margin-top: 6px;
} }
/* 1280 宽：控件放大一档以后一行差几十像素，筛选条这几样退回 13px 的字 */
@media (max-width: 1365px) {
.count,
.random,
.segmented button,
.select,
.undone {
font-size: 13px;
}
.select {
width: 92px;
}
}
/* ---------- 手机 ---------- */ /* ---------- 手机 ---------- */
.m-progress { .m-progress {
padding: 12px 16px 0; padding: 12px 16px 0;
apps/web/src/oj/problemset/components/ClassView.vue
+17 -17
View File
@@ -166,7 +166,7 @@ const error = computed(() => tone("error"))
<style scoped> <style scoped>
.card { .card {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
overflow: hidden; overflow: hidden;
} }
@@ -177,14 +177,14 @@ const error = computed(() => tone("error"))
} }
.summary { .summary {
min-height: 52px; min-height: 60px;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 16px; padding: 10px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px 20px; gap: 8px 20px;
font-size: 13px; font-size: var(--oj-fs-sec);
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
} }
@@ -193,7 +193,7 @@ const error = computed(() => tone("error"))
} }
.big { .big {
font-size: 18px; font-size: 20px;
} }
.absent { .absent {
@@ -219,17 +219,17 @@ const error = computed(() => tone("error"))
.grid { .grid {
display: grid; display: grid;
column-gap: 6px; column-gap: 6px;
padding: 0 16px 8px; padding: 0 20px 10px;
} }
.head { .head {
position: sticky; position: sticky;
top: 0; top: 0;
height: 44px; height: 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -255,10 +255,10 @@ const error = computed(() => tone("error"))
} }
.cell { .cell {
height: 32px; height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: var(--oj-fs-body);
min-width: 0; min-width: 0;
} }
@@ -268,14 +268,14 @@ const error = computed(() => tone("error"))
.box { .box {
position: relative; position: relative;
height: 26px; height: 30px;
margin: 3px 0; margin: 4px 0;
border-radius: 3px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 3px; gap: 3px;
font-size: 12px; font-size: var(--oj-fs-meta);
text-decoration: none; text-decoration: none;
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
@@ -306,14 +306,14 @@ const error = computed(() => tone("error"))
} }
.foot { .foot {
min-height: 30px; min-height: 36px;
box-sizing: border-box; box-sizing: border-box;
padding: 6px 16px; padding: 8px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px 16px; gap: 4px 16px;
font-size: 12px; font-size: var(--oj-fs-meta);
border-top: 1px solid v-bind("theme.dividerColor"); border-top: 1px solid v-bind("theme.dividerColor");
} }
apps/web/src/oj/problemset/detail.vue
+69 -42
View File
@@ -144,7 +144,7 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
</template> </template>
</n-result> </n-result>
<div v-else-if="set" class="page"> <div v-else-if="set" class="page oj-page">
<section class="band" :class="{ done: progress?.isCompleted }"> <section class="band" :class="{ done: progress?.isCompleted }">
<span v-if="progress?.isCompleted" class="done-mark" aria-hidden="true">✓</span> <span v-if="progress?.isCompleted" class="done-mark" aria-hidden="true">✓</span>
<div class="head"> <div class="head">
@@ -251,7 +251,11 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
<span class="muted num idx">{{ indexOf(item) }}</span> <span class="muted num idx">{{ indexOf(item) }}</span>
<span class="ell ptitle">{{ item.problem.title }}</span> <span class="ell ptitle">{{ item.problem.title }}</span>
<span v-if="!item.isRequired" class="opt">选做</span> <span v-if="!item.isRequired" class="opt">选做</span>
<span v-if="item.oldCodeHidden" class="old" :style="purple" <span
v-if="item.oldCodeHidden"
class="old"
:style="purple"
title="以前做对过，旧代码在布置期内先藏着"
><svg ><svg
class="lock" class="lock"
width="12" width="12"
@@ -266,7 +270,8 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
> >
<rect x="5" y="11" width="14" height="9" rx="2" /> <rect x="5" y="11" width="14" height="9" rx="2" />
<path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg <path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg
>以前做对过 · 旧代码先藏着</span ><span class="old-long">以前做对过 · 旧代码先藏着</span
><span class="old-short">做对过</span></span
> >
<div class="spacer"></div> <div class="spacer"></div>
<span v-if="item.isCompleted && item.solvedTime" class="muted num tiny" <span v-if="item.isCompleted && item.solvedTime" class="muted num tiny"
@@ -289,18 +294,18 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: var(--oj-gap);
} }
.band { .band {
box-sizing: border-box; box-sizing: border-box;
padding: 14px 20px 12px; padding: 22px 24px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px 24px; gap: 16px 20px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
} }
@@ -324,22 +329,22 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
} }
.done-text { .done-text {
font-size: 14px; font-size: var(--oj-fs-body);
color: v-bind("success.color"); color: v-bind("success.color");
} }
.head { .head {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 8px;
width: 380px; width: 360px;
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
} }
.head h2 { .head h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: var(--oj-fs-title);
} }
.desc { .desc {
@@ -360,12 +365,12 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
.back { .back {
flex-shrink: 0; flex-shrink: 0;
font-size: 13px; font-size: var(--oj-fs-sec);
text-decoration: none; text-decoration: none;
} }
.count { .count {
font-size: 24px; font-size: 28px;
font-weight: 700; font-weight: 700;
} }
@@ -415,11 +420,16 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
margin-right: 3px; margin-right: 3px;
} }
/* 手机上长文案会把题目名挤得只剩一两个字，换成短的；锁的图标还在，全文在悬停提示里 */
.old-short {
display: none;
}
.notice { .notice {
box-sizing: border-box; box-sizing: border-box;
padding: 10px 14px; padding: 12px 18px;
border-radius: 6px; border-radius: var(--oj-radius);
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.tabs { .tabs {
@@ -428,12 +438,12 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
} }
.seg { .seg {
height: 30px; height: var(--oj-ctrl-h);
padding: 0 14px; padding: 0 16px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
} }
@@ -456,13 +466,13 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
.cols { .cols {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 12px; gap: 16px;
align-items: start; align-items: start;
} }
.card { .card {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
overflow: hidden; overflow: hidden;
} }
@@ -473,10 +483,10 @@ const purple = { color: "#5b3fa8", background: "rgba(122, 95, 208, 0.12)" }
} }
.prow { .prow {
height: 40px; height: var(--oj-row-h);
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px; padding: 0 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -498,8 +508,8 @@ a.prow:hover {
} }
.dot { .dot {
width: 22px; width: 24px;
height: 22px; height: 24px;
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
@@ -527,19 +537,19 @@ a.prow:hover {
.idx { .idx {
width: 20px; width: 20px;
text-align: right; text-align: right;
font-size: 13px; font-size: var(--oj-fs-sec);
flex-shrink: 0; flex-shrink: 0;
} }
.ptitle { .ptitle {
font-size: 14px; font-size: var(--oj-fs-body);
} }
.opt { .opt {
height: 20px; height: 22px;
padding: 0 6px; padding: 0 7px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
display: inline-flex; display: inline-flex;
@@ -548,10 +558,10 @@ a.prow:hover {
} }
.old { .old {
height: 20px; height: 22px;
padding: 0 6px; padding: 0 7px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
@@ -563,7 +573,7 @@ a.prow:hover {
} }
.go { .go {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
flex-shrink: 0; flex-shrink: 0;
} }
@@ -573,10 +583,10 @@ a.prow:hover {
} }
.pill { .pill {
height: 22px; height: 24px;
padding: 0 8px; padding: 0 9px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
@@ -601,11 +611,11 @@ a.prow:hover {
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.tiny { .tiny {
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.num { .num {
@@ -624,6 +634,15 @@ a.prow:hover {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
.band {
padding: 16px;
}
.prow {
padding: 0 12px;
gap: 10px;
}
.head { .head {
width: 100%; width: 100%;
} }
@@ -636,5 +655,13 @@ a.prow:hover {
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
} }
.old-long {
display: none;
}
.old-short {
display: inline;
}
} }
</style> </style>
apps/web/src/oj/problemset/list.vue
+33 -27
View File
@@ -84,7 +84,7 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
</script> </script>
<template> <template>
<div class="page"> <div class="page oj-page">
<div class="top"> <div class="top">
<h2>题单</h2> <h2>题单</h2>
<div class="spacer"></div> <div class="spacer"></div>
@@ -195,7 +195,7 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: var(--oj-gap);
} }
.top { .top {
@@ -206,7 +206,7 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
.top h2 { .top h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: var(--oj-fs-title);
} }
.search { .search {
@@ -221,12 +221,14 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; margin-bottom: -6px;
font-size: var(--oj-fs-h2);
font-weight: 700; font-weight: 700;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor1");
} }
.sect .muted { .sect .muted {
font-size: var(--oj-fs-sec);
font-weight: 400; font-weight: 400;
} }
@@ -239,11 +241,13 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-sec);
white-space: nowrap;
} }
.tiny { .tiny {
font-size: 12px; font-size: var(--oj-fs-meta);
white-space: nowrap;
} }
.num { .num {
@@ -268,23 +272,25 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
align-items: baseline; align-items: baseline;
} }
/* 1200 限宽下布置中是一行三张、其他题单一行四张；原来一行四张的大卡只有 280 宽，
「还没加入 · 9 道」和「另有 1 道选做」都被挤成两行 */
.big-grid { .big-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 12px; gap: 16px;
} }
.small-grid { .small-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 10px; gap: 14px;
} }
.card { .card {
box-sizing: border-box; box-sizing: border-box;
min-width: 0; min-width: 0;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
text-decoration: none; text-decoration: none;
@@ -303,32 +309,32 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
} }
.big { .big {
padding: 14px 16px; padding: 20px 22px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 10px;
} }
.title { .title {
flex-grow: 1; flex-grow: 1;
font-size: 16px; font-size: 18px;
} }
.desc { .desc {
height: 17px; height: 20px;
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.count { .count {
font-size: 22px; font-size: 26px;
font-weight: 700; font-weight: 700;
} }
.pill { .pill {
height: 22px; height: 24px;
padding: 0 8px; padding: 0 9px;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: var(--oj-fs-meta);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
@@ -359,8 +365,8 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
} }
.hint { .hint {
height: 20px; height: 22px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -391,14 +397,14 @@ const doneBackground = computed(() => rgba(theme.value.successColor, 0.05))
} }
.small-card { .small-card {
height: 74px; height: 88px;
padding: 10px 14px; padding: 14px 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.small-card b { .small-card b {
font-size: 14px; font-size: var(--oj-fs-body);
} }
</style> </style>
apps/web/src/oj/rank/components/ChampionList.vue
+7 -7
View File
@@ -73,20 +73,20 @@ function weekLabel(start: string) {
} }
.row { .row {
height: 26px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.muted { .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.week { .week {
width: 78px; width: 86px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -113,13 +113,13 @@ function weekLabel(start: string) {
} }
.hot-tag { .hot-tag {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
background: #c76a12; background: #c76a12;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 6px;
line-height: 16px; line-height: 18px;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>
apps/web/src/oj/rank/components/ClassBattle.vue
+21 -17
View File
@@ -92,12 +92,12 @@ function shortLabel(className: string) {
<style scoped> <style scoped>
.battle { .battle {
padding: 12px 16px; padding: 18px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 2px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
} }
@@ -111,20 +111,24 @@ function shortLabel(className: string) {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 8px; gap: 8px;
margin-bottom: 4px; margin-bottom: 8px;
}
.title b {
font-size: var(--oj-fs-h2);
} }
.muted { .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.row { .row {
height: 22px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.row.mine { .row.mine {
@@ -135,14 +139,14 @@ function shortLabel(className: string) {
} }
.rank { .rank {
width: 14px; width: 16px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.name { .name {
width: 86px; width: 96px;
padding: 0; padding: 0;
border: 0; border: 0;
background: none; background: none;
@@ -160,7 +164,7 @@ function shortLabel(className: string) {
.pk { .pk {
margin-left: auto; margin-left: auto;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
@@ -173,7 +177,7 @@ function shortLabel(className: string) {
.bar-box { .bar-box {
flex-grow: 1; flex-grow: 1;
height: 10px; height: 12px;
position: relative; position: relative;
} }
@@ -186,22 +190,22 @@ function shortLabel(className: string) {
} }
.value { .value {
width: 32px; width: 36px;
text-align: right; text-align: right;
font-weight: 700; font-weight: 700;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.gain { .gain {
width: 34px; width: 36px;
font-size: 11px; font-size: 12px;
color: #18a058; color: #18a058;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.summary { .summary {
margin-top: 6px; margin-top: 8px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: #18a058; color: #18a058;
} }
</style> </style>
apps/web/src/oj/rank/components/RankMe.vue
+26 -26
View File
@@ -260,12 +260,12 @@ function threatNote(me: RankRow, behind: RankRow) {
<style scoped> <style scoped>
.me-card { .me-card {
padding: 14px 16px; padding: 18px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 12px;
border: 1px solid rgba(24, 160, 88, 0.45); border: 1px solid rgba(24, 160, 88, 0.45);
border-radius: 6px; border-radius: var(--oj-radius);
background: rgba(24, 160, 88, 0.07); background: rgba(24, 160, 88, 0.07);
} }
@@ -281,7 +281,7 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.label { .label {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -305,7 +305,7 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.total { .total {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
margin-left: 2px; margin-left: 2px;
} }
@@ -325,19 +325,19 @@ function threatNote(me: RankRow, behind: RankRow) {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 10px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
border: 1px dashed rgba(24, 160, 88, 0.6); border: 1px dashed rgba(24, 160, 88, 0.6);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: #18a058; color: #18a058;
font-size: 14px; font-size: var(--oj-fs-body);
} }
.rival { .rival {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
font-size: 13px; font-size: var(--oj-fs-sec);
min-width: 0; min-width: 0;
} }
@@ -371,7 +371,7 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.rival-mood { .rival-mood {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -383,13 +383,13 @@ function threatNote(me: RankRow, behind: RankRow) {
align-items: flex-start; align-items: flex-start;
gap: 6px; gap: 6px;
width: 100%; width: 100%;
padding: 8px 10px; padding: 10px 12px;
border: 1px solid rgba(24, 160, 88, 0.3); border: 1px solid rgba(24, 160, 88, 0.3);
border-radius: 6px; border-radius: 6px;
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
line-height: 1.45; line-height: 1.45;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@@ -423,7 +423,7 @@ function threatNote(me: RankRow, behind: RankRow) {
align-items: center; align-items: center;
gap: 3px; gap: 3px;
padding-top: 1px; padding-top: 1px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: #18a058; color: #18a058;
white-space: nowrap; white-space: nowrap;
} }
@@ -435,12 +435,12 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.mood-label { .mood-label {
font-size: 13px; font-size: var(--oj-fs-sec);
font-weight: 600; font-weight: 600;
} }
.mood-hint { .mood-hint {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -456,7 +456,7 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.note { .note {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -464,11 +464,11 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.tag { .tag {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 6px;
line-height: 16px; line-height: 18px;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -487,9 +487,9 @@ function threatNote(me: RankRow, behind: RankRow) {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding-top: 8px; padding-top: 10px;
border-top: 1px solid rgba(24, 160, 88, 0.3); border-top: 1px solid rgba(24, 160, 88, 0.3);
font-size: 13px; font-size: var(--oj-fs-sec);
color: #2f6fd0; color: #2f6fd0;
text-decoration: none; text-decoration: none;
} }
@@ -509,10 +509,10 @@ function threatNote(me: RankRow, behind: RankRow) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 1px; gap: 2px;
padding: 6px 10px; padding: 8px 12px;
border: 0; border: 0;
border-radius: 4px; border-radius: 6px;
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
font: inherit; font: inherit;
@@ -524,18 +524,18 @@ function threatNote(me: RankRow, behind: RankRow) {
} }
.mini-label { .mini-label {
font-size: 11px; font-size: 12px;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
} }
.mini b { .mini b {
font-size: 14px; font-size: var(--oj-fs-body);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.mini small { .mini small {
font-size: 11px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
apps/web/src/oj/rank/components/RankPodium.vue
+15 -15
View File
@@ -33,7 +33,7 @@ const steps = computed(() =>
.filter((step): step is { place: number; row: RankRow } => !!step.row), .filter((step): step is { place: number; row: RankRow } => !!step.row),
) )
const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 } const HEIGHTS: Record<number, number> = { 1: 56, 2: 44, 3: 34 }
</script> </script>
<template> <template>
@@ -121,8 +121,8 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
gap: 6px; gap: 8px;
margin: 0 16px; margin: 4px 24px 0;
border-bottom: 2px solid v-bind("theme.dividerColor"); border-bottom: 2px solid v-bind("theme.dividerColor");
min-height: 60px; min-height: 60px;
} }
@@ -174,12 +174,12 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
.bubble { .bubble {
position: relative; position: relative;
padding: 3px 9px; padding: 4px 10px;
border: 1px solid v-bind("theme.dividerColor"); border: 1px solid v-bind("theme.dividerColor");
border-radius: 8px; border-radius: 8px;
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
font-size: 12px; font-size: var(--oj-fs-meta);
line-height: 16px; line-height: 18px;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
word-break: break-all; word-break: break-all;
} }
@@ -271,11 +271,11 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
} }
.tag { .tag {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 6px;
line-height: 16px; line-height: 18px;
white-space: nowrap; white-space: nowrap;
} }
@@ -300,7 +300,7 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
border: 0; border: 0;
background: none; background: none;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
min-width: 0; min-width: 0;
@@ -318,7 +318,7 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
} }
.place { .place {
font-size: 22px; font-size: 24px;
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
} }
@@ -328,18 +328,18 @@ const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
} }
.solved b { .solved b {
font-size: 16px; font-size: 18px;
} }
.solved small { .solved small {
font-size: 11px; font-size: 12px;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
margin-left: 1px; margin-left: 1px;
} }
.empty { .empty {
padding: 18px 0; padding: 24px 0;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-size: 13px; font-size: var(--oj-fs-sec);
} }
</style> </style>
apps/web/src/oj/rank/components/RankTrack.vue
+21 -21
View File
@@ -291,8 +291,8 @@ function onMenu(key: string, row: RankRow) {
.track { .track {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0 36px; gap: 0 40px;
padding: 10px 24px 14px; padding: 12px 24px 20px;
} }
.track.single { .track.single {
@@ -308,11 +308,11 @@ function onMenu(key: string, row: RankRow) {
} }
.lane { .lane {
height: 28px; height: 34px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 14px; font-size: var(--oj-fs-body);
} }
.single .column { .single .column {
@@ -321,14 +321,14 @@ function onMenu(key: string, row: RankRow) {
.prow { .prow {
position: relative; position: relative;
height: 32px; height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 0 8px 0 4px; padding: 0 8px 0 4px;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: var(--oj-fs-body);
} }
.prow > :not(.fill) { .prow > :not(.fill) {
@@ -360,7 +360,7 @@ function onMenu(key: string, row: RankRow) {
.mood { .mood {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -376,11 +376,11 @@ function onMenu(key: string, row: RankRow) {
} }
.single .gap { .single .gap {
height: 34px; height: 38px;
margin: 2px 0 0; margin: 2px 0 0;
border: 1px dashed v-bind("theme.borderColor"); border: 1px dashed v-bind("theme.borderColor");
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: #0c7a43; color: #0c7a43;
} }
@@ -398,7 +398,7 @@ function onMenu(key: string, row: RankRow) {
.rank { .rank {
width: 28px; width: 28px;
text-align: right; text-align: right;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
flex-shrink: 0; flex-shrink: 0;
@@ -410,7 +410,7 @@ function onMenu(key: string, row: RankRow) {
} }
.who { .who {
width: 116px; width: 126px;
flex-shrink: 0; flex-shrink: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@@ -431,7 +431,7 @@ function onMenu(key: string, row: RankRow) {
.bar-box { .bar-box {
flex-grow: 1; flex-grow: 1;
height: 14px; height: 16px;
position: relative; position: relative;
min-width: 40px; min-width: 40px;
} }
@@ -445,7 +445,7 @@ function onMenu(key: string, row: RankRow) {
} }
.solved { .solved {
width: 30px; width: 34px;
text-align: right; text-align: right;
font-weight: 700; font-weight: 700;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -453,8 +453,8 @@ function onMenu(key: string, row: RankRow) {
} }
.change { .change {
width: 34px; width: 36px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -479,11 +479,11 @@ function onMenu(key: string, row: RankRow) {
} }
.tag { .tag {
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 6px;
line-height: 16px; line-height: 18px;
white-space: nowrap; white-space: nowrap;
} }
@@ -513,14 +513,14 @@ function onMenu(key: string, row: RankRow) {
} }
.gap { .gap {
height: 30px; height: 36px;
margin: 4px 0; margin: 6px 0;
border: 0; border: 0;
border-top: 1px dashed v-bind("theme.borderColor"); border-top: 1px dashed v-bind("theme.borderColor");
border-bottom: 1px dashed v-bind("theme.borderColor"); border-bottom: 1px dashed v-bind("theme.borderColor");
background: none; background: none;
font: inherit; font: inherit;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
cursor: pointer; cursor: pointer;
} }
apps/web/src/oj/rank/components/WeekTop.vue
+7 -7
View File
@@ -64,11 +64,11 @@ const scale = computed(() => top.value[0]?.solved || 1)
} }
.row { .row {
height: 26px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.row.me { .row.me {
@@ -79,8 +79,8 @@ const scale = computed(() => top.value[0]?.solved || 1)
} }
.medal { .medal {
width: 22px; width: 24px;
height: 22px; height: 24px;
border-radius: 11px; border-radius: 11px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -92,7 +92,7 @@ const scale = computed(() => top.value[0]?.solved || 1)
} }
.who { .who {
width: 110px; width: 120px;
flex-shrink: 0; flex-shrink: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@@ -105,7 +105,7 @@ const scale = computed(() => top.value[0]?.solved || 1)
.bar-box { .bar-box {
flex-grow: 1; flex-grow: 1;
height: 9px; height: 10px;
position: relative; position: relative;
} }
@@ -122,7 +122,7 @@ const scale = computed(() => top.value[0]?.solved || 1)
} }
.muted { .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
</style> </style>
apps/web/src/oj/rank/list.vue
+44 -40
View File
@@ -387,7 +387,7 @@ async function restore(userId: number) {
</script> </script>
<template> <template>
<div class="rank-page"> <div class="rank-page oj-page">
<div class="toolbar" :class="{ single: !isDesktop }"> <div class="toolbar" :class="{ single: !isDesktop }">
<div class="title"> <div class="title">
<h2>排名</h2> <h2>排名</h2>
@@ -419,7 +419,6 @@ async function restore(userId: number) {
v-if="teacher" v-if="teacher"
v-model:value="pickedClass" v-model:value="pickedClass"
class="class-select" class="class-select"
size="small"
filterable filterable
placeholder="选班" placeholder="选班"
:options="teacherClassOptions" :options="teacherClassOptions"
@@ -513,17 +512,10 @@ async function restore(userId: number) {
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<n-button <n-button v-if="classContext" secondary type="info" @click="openDetail(classContext)">
v-if="classContext"
size="small"
secondary
type="info"
@click="openDetail(classContext)"
>
班级详情 · AI 分析 班级详情 · AI 分析
</n-button> </n-button>
<n-button <n-button
size="small"
secondary secondary
@click=" @click="
router.push({ router.push({
@@ -539,7 +531,7 @@ async function restore(userId: number) {
<template v-if="board.scope === 'class'"> <template v-if="board.scope === 'class'">
<div v-for="user in board.hiddenUsers" :key="user.id" class="hidden-row"> <div v-for="user in board.hiddenUsers" :key="user.id" class="hidden-row">
<UserName :username="user.username" /> <UserName :username="user.username" />
<n-button size="tiny" secondary @click="restore(user.id)">恢复</n-button> <n-button size="small" secondary @click="restore(user.id)">恢复</n-button>
</div> </div>
<span v-if="!board.hiddenUsers.length" class="muted"> <span v-if="!board.hiddenUsers.length" class="muted">
还没有。怀疑抄代码的，在名单上点「⋯」拿掉。 还没有。怀疑抄代码的，在名单上点「⋯」拿掉。
@@ -644,10 +636,12 @@ async function restore(userId: number) {
</template> </template>
<style scoped> <style scoped>
/* 比别的阅读型页面宽一点：右栏 400 固定，左边赛道要排两列名字 */
.rank-page { .rank-page {
max-width: 1280px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: var(--oj-gap);
} }
.toolbar { .toolbar {
@@ -659,25 +653,25 @@ async function restore(userId: number) {
.toolbar h2 { .toolbar h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: var(--oj-fs-title);
} }
.seg { .seg {
display: inline-flex; display: inline-flex;
height: 30px; height: var(--oj-ctrl-h);
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.seg button { .seg button {
padding: 0 12px; padding: 0 14px;
border: 0; border: 0;
border-left: 1px solid v-bind("theme.borderColor"); border-left: 1px solid v-bind("theme.borderColor");
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
@@ -707,14 +701,14 @@ async function restore(userId: number) {
.rule, .rule,
.muted { .muted {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.main { .main {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 400px; grid-template-columns: minmax(0, 1fr) 400px;
gap: 16px; gap: var(--oj-gap);
align-items: start; align-items: start;
} }
@@ -731,7 +725,7 @@ async function restore(userId: number) {
.card, .card,
.note-card { .note-card {
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 6px; border-radius: var(--oj-radius);
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
min-width: 0; min-width: 0;
} }
@@ -741,25 +735,25 @@ async function restore(userId: number) {
} }
.card-head { .card-head {
min-height: 36px; min-height: 52px;
box-sizing: border-box; box-sizing: border-box;
padding: 6px 16px; padding: 10px 24px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px 10px; gap: 4px 10px;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.card-head b { .card-head b {
font-size: 14px; font-size: var(--oj-fs-h2);
} }
.legend { .legend {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -784,15 +778,20 @@ async function restore(userId: number) {
.side { .side {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: var(--oj-gap);
min-width: 0; min-width: 0;
} }
.note-card { .note-card {
padding: 14px 16px; padding: 18px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 10px;
font-size: var(--oj-fs-sec);
}
.note-card > b {
font-size: var(--oj-fs-h2);
} }
.stats { .stats {
@@ -811,12 +810,12 @@ async function restore(userId: number) {
} }
.stats span { .stats span {
font-size: 11px; font-size: 12px;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
.stats b { .stats b {
font-size: 18px; font-size: 20px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@@ -834,7 +833,7 @@ async function restore(userId: number) {
} }
.hidden-title { .hidden-title {
font-size: 13px; font-size: var(--oj-fs-sec);
font-weight: 600; font-weight: 600;
} }
@@ -843,28 +842,33 @@ async function restore(userId: number) {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.below { .below {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px; gap: var(--oj-gap);
align-items: start; align-items: start;
} }
.card { .card {
padding: 12px 16px; padding: 18px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 8px;
} }
.card-title { .card-title {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 8px; flex-wrap: wrap;
margin-bottom: 2px; gap: 2px 8px;
margin-bottom: 4px;
}
.card-title b {
font-size: var(--oj-fs-h2);
} }
.tabs-card { .tabs-card {
@@ -880,12 +884,12 @@ async function restore(userId: number) {
.tabs button { .tabs button {
flex: 1; flex: 1;
height: 38px; height: 44px;
border: 0; border: 0;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
background: none; background: none;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
} }
@@ -897,7 +901,7 @@ async function restore(userId: number) {
} }
.tab-body { .tab-body {
padding: 10px 12px 12px; padding: 12px 14px 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
@@ -918,7 +922,7 @@ async function restore(userId: number) {
.toolbar.single .seg { .toolbar.single .seg {
display: flex; display: flex;
height: 34px; height: 36px;
} }
.toolbar.single .seg button { .toolbar.single .seg button {
apps/web/src/oj/statistics/components/CodeStats.vue
+25 -25
View File
@@ -467,7 +467,7 @@ function pct(done: number, total: number) {
} }
.problems { .problems {
width: 380px; width: 404px; /* 380 + 放大一档后多出的留白和字宽，「求两门课程成绩总分(1)」在 1280 下要放得下 */
flex: none; flex: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -476,13 +476,13 @@ function pct(done: number, total: number) {
} }
.col-head { .col-head {
height: 36px; height: 40px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px 0 20px; padding: 0 16px 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -496,9 +496,9 @@ function pct(done: number, total: number) {
.problem { .problem {
width: 100%; width: 100%;
height: 50px; height: 56px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px 0 20px; padding: 0 16px 0 var(--oj-pad-x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -550,7 +550,7 @@ function pct(done: number, total: number) {
.muted { .muted {
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.spacer { .spacer {
@@ -566,10 +566,10 @@ function pct(done: number, total: number) {
} }
.s-head { .s-head {
height: 44px; height: 52px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -578,17 +578,17 @@ function pct(done: number, total: number) {
} }
.s-title { .s-title {
font-size: 15px; font-size: var(--oj-fs-h2);
} }
.chip { .chip {
height: 28px; height: 32px;
padding: 0 12px; padding: 0 14px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 14px; border-radius: 16px;
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
cursor: pointer; cursor: pointer;
} }
@@ -606,14 +606,14 @@ function pct(done: number, total: number) {
} }
.cols { .cols {
height: 32px; height: 40px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -626,9 +626,9 @@ function pct(done: number, total: number) {
} }
.row { .row {
min-height: 38px; min-height: 46px;
box-sizing: border-box; box-sizing: border-box;
padding: 6px 20px; padding: 8px var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@@ -695,7 +695,7 @@ function pct(done: number, total: number) {
} }
.none { .none {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.cells { .cells {
@@ -707,9 +707,9 @@ function pct(done: number, total: number) {
.cell { .cell {
width: 30px; width: 30px;
height: 18px; height: 20px;
border-radius: 4px; border-radius: 4px;
font-size: 11px; font-size: 12px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -739,7 +739,7 @@ function pct(done: number, total: number) {
.d-state { .d-state {
width: 100px; width: 100px;
flex: none; flex: none;
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.empty { .empty {
@@ -749,8 +749,8 @@ function pct(done: number, total: number) {
} }
.truncated { .truncated {
padding: 8px 20px; padding: 10px var(--oj-pad-x);
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("tone('warning').color"); color: v-bind("tone('warning').color");
border-top: 1px solid v-bind("theme.dividerColor"); border-top: 1px solid v-bind("theme.dividerColor");
} }
apps/web/src/oj/statistics/components/FlowStats.vue
+12 -12
View File
@@ -311,13 +311,13 @@ function gradeStyle(grade: string | null) {
} }
.summary { .summary {
height: 72px; height: 84px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 36px; gap: 40px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
} }
@@ -333,7 +333,7 @@ function gradeStyle(grade: string | null) {
} }
.ring-label { .ring-label {
font-size: 12px; font-size: var(--oj-fs-meta);
line-height: 1.5; line-height: 1.5;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -343,7 +343,7 @@ function gradeStyle(grade: string | null) {
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
padding: 16px 20px; padding: 20px var(--oj-pad-x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: 14px;
@@ -365,7 +365,7 @@ function gradeStyle(grade: string | null) {
border: 1px solid v-bind("theme.dividerColor"); border: 1px solid v-bind("theme.dividerColor");
border-radius: 8px; border-radius: 8px;
background: v-bind("theme.cardColor"); background: v-bind("theme.cardColor");
padding: 12px 14px; padding: 14px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@@ -392,7 +392,7 @@ function gradeStyle(grade: string | null) {
} }
.card-title { .card-title {
font-size: 13px; font-size: var(--oj-fs-sec);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -411,12 +411,12 @@ function gradeStyle(grade: string | null) {
} }
.person { .person {
height: 34px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.p-name { .p-name {
@@ -427,9 +427,9 @@ function gradeStyle(grade: string | null) {
.grade-pill { .grade-pill {
width: 100px; width: 100px;
flex: none; flex: none;
height: 22px; height: 24px;
border-radius: 11px; border-radius: 11px;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 700; font-weight: 700;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -438,7 +438,7 @@ function gradeStyle(grade: string | null) {
.muted { .muted {
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-size: 12px; font-size: var(--oj-fs-meta);
} }
.empty { .empty {
apps/web/src/oj/statistics/components/Lessons.vue
+18 -18
View File
@@ -292,7 +292,7 @@ function percent(value: number, total: number) {
min-height: 0; min-height: 0;
overflow: auto; overflow: auto;
padding-bottom: 20px; padding-bottom: 20px;
font-size: 14px; font-size: var(--oj-fs-body);
} }
.live { .live {
@@ -323,8 +323,8 @@ function percent(value: number, total: number) {
} }
.note { .note {
padding: 16px 20px 4px; padding: 20px var(--oj-pad-x) 6px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -332,11 +332,11 @@ function percent(value: number, total: number) {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
height: 28px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 var(--oj-pad-x);
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
@@ -344,10 +344,10 @@ function percent(value: number, total: number) {
} }
.row { .row {
height: 44px; height: 52px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 var(--oj-pad-x);
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
color: v-bind("theme.textColor1"); color: v-bind("theme.textColor1");
text-decoration: none; text-decoration: none;
@@ -396,7 +396,7 @@ function percent(value: number, total: number) {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.pid { .pid {
@@ -409,7 +409,7 @@ function percent(value: number, total: number) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 2px; gap: 2px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.primaryColor"); color: v-bind("theme.primaryColor");
} }
@@ -439,7 +439,7 @@ function percent(value: number, total: number) {
.axis-row { .axis-row {
display: flex; display: flex;
padding: 0 20px; padding: 0 var(--oj-pad-x);
height: 20px; height: 20px;
} }
@@ -452,7 +452,7 @@ function percent(value: number, total: number) {
top: 3px; top: 3px;
transform: translateX(-50%); transform: translateX(-50%);
white-space: nowrap; white-space: nowrap;
font-size: 11px; font-size: 12px;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -464,8 +464,8 @@ function percent(value: number, total: number) {
} }
.scattered { .scattered {
padding: 7px 20px; padding: 8px var(--oj-pad-x);
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
} }
@@ -481,25 +481,25 @@ function percent(value: number, total: number) {
} }
.more { .more {
padding: 12px 20px 0; padding: 14px var(--oj-pad-x) 0;
} }
.section-title { .section-title {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 10px; gap: 10px;
padding: 18px 20px 6px; padding: 22px var(--oj-pad-x) 8px;
} }
.small { .small {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.hard { .hard {
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 0 20px; margin: 0 20px;
border-collapse: collapse; border-collapse: collapse;
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.hard th { .hard th {
apps/web/src/oj/statistics/components/StatItem.vue
+2 -2
View File
@@ -37,7 +37,7 @@ const color = computed(() => (props.tone ? toneOf(props.tone).color : theme.valu
.label, .label,
.unit { .unit {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -48,7 +48,7 @@ const color = computed(() => (props.tone ? toneOf(props.tone).color : theme.valu
} }
.value { .value {
font-size: 22px; font-size: 26px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
</style> </style>
apps/web/src/oj/statistics/components/StatisticsView.vue
+12 -12
View File
@@ -524,10 +524,10 @@ function resultWidth(value: number) {
} }
.filters { .filters {
height: 52px; height: 60px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -536,18 +536,18 @@ function resultWidth(value: number) {
} }
.title { .title {
font-size: 17px; font-size: 20px;
font-weight: 700; font-weight: 700;
margin-right: 6px; margin-right: 8px;
} }
.back { .back {
height: 28px; height: 32px;
padding: 0 10px 0 6px; padding: 0 10px 0 6px;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 2px; gap: 2px;
@@ -578,7 +578,7 @@ function resultWidth(value: number) {
.result-legend { .result-legend {
display: flex; display: flex;
gap: 10px; gap: 10px;
font-size: 12px; font-size: var(--oj-fs-meta);
white-space: nowrap; white-space: nowrap;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
@@ -622,7 +622,7 @@ function resultWidth(value: number) {
} }
.range { .range {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -649,13 +649,13 @@ function resultWidth(value: number) {
} }
.summary { .summary {
height: 72px; height: 84px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 36px; gap: 40px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
} }
@@ -667,7 +667,7 @@ function resultWidth(value: number) {
} }
.ring-label { .ring-label {
font-size: 12px; font-size: var(--oj-fs-meta);
line-height: 1.5; line-height: 1.5;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
apps/web/src/oj/submission/components/FlowchartPane.vue
+4 -4
View File
@@ -278,10 +278,10 @@ const canRetry = computed(
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 14px 20px 12px; padding: 18px var(--oj-pad-x) 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 12px;
background: v-bind("theme.bodyColor"); background: v-bind("theme.bodyColor");
} }
@@ -290,7 +290,7 @@ const canRetry = computed(
align-items: center; align-items: center;
gap: 8px; gap: 8px;
white-space: nowrap; white-space: nowrap;
font-size: 15px; font-size: 16px;
min-width: 0; min-width: 0;
} }
@@ -398,7 +398,7 @@ const canRetry = computed(
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
apps/web/src/oj/submission/components/SubmissionPane.vue
+4 -4
View File
@@ -451,10 +451,10 @@ function openStandalone() {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 14px 20px 12px; padding: 18px var(--oj-pad-x) 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 12px;
background: v-bind("theme.bodyColor"); background: v-bind("theme.bodyColor");
} }
@@ -463,7 +463,7 @@ function openStandalone() {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
white-space: nowrap; white-space: nowrap;
font-size: 15px; font-size: 16px;
min-width: 0; min-width: 0;
} }
@@ -588,7 +588,7 @@ function openStandalone() {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
flex-wrap: wrap; flex-wrap: wrap;
apps/web/src/oj/submission/detail.vue
+1 -1
View File
@@ -77,7 +77,7 @@ onMounted(init)
</script> </script>
<template> <template>
<n-flex vertical v-if="submission" :size="24"> <n-flex vertical v-if="submission" class="oj-page" :size="24">
<n-flex :vertical="isMobile" justify="space-between"> <n-flex :vertical="isMobile" justify="space-between">
<n-alert <n-alert
style="flex: 1" style="flex: 1"
apps/web/src/oj/submission/list.vue
+48 -40
View File
@@ -697,13 +697,13 @@ function dayBreak(index: number) {
<div v-if="isDesktop" class="filters"> <div v-if="isDesktop" class="filters">
<!-- 流程图列表要登录才能看（GET /flowcharts 是 requireAuth），没登录就不给这个切换 --> <!-- 流程图列表要登录才能看（GET /flowcharts 是 requireAuth），没登录就不给这个切换 -->
<template v-if="!inContest && userStore.isAuthed"> <template v-if="!inContest && userStore.isAuthed">
<n-radio-group v-model:value="mode" size="small"> <n-radio-group v-model:value="mode">
<n-radio-button value="code">代码</n-radio-button> <n-radio-button value="code">代码</n-radio-button>
<n-radio-button value="flow">流程图</n-radio-button> <n-radio-button value="flow">流程图</n-radio-button>
</n-radio-group> </n-radio-group>
</template> </template>
<!-- 老师也有：从个人菜单「我的提交」进来的，原来只能靠「清空」退出去 --> <!-- 老师也有：从个人菜单「我的提交」进来的，原来只能靠「清空」退出去 -->
<n-radio-group v-if="userStore.isAuthed" v-model:value="scope" size="small"> <n-radio-group v-if="userStore.isAuthed" v-model:value="scope">
<n-radio-button value="all">全部</n-radio-button> <n-radio-button value="all">全部</n-radio-button>
<n-radio-button value="mine">我的</n-radio-button> <n-radio-button value="mine">我的</n-radio-button>
</n-radio-group> </n-radio-group>
@@ -741,7 +741,6 @@ function dayBreak(index: number) {
v-if="!lessonActive" v-if="!lessonActive"
:value="query.className || null" :value="query.className || null"
class="w-class" class="w-class"
size="small"
:options="classOptions" :options="classOptions"
placeholder="全部班级" placeholder="全部班级"
clearable clearable
@@ -766,7 +765,6 @@ function dayBreak(index: number) {
v-else-if="!mine" v-else-if="!mine"
v-model:value="query.username" v-model:value="query.username"
class="w-user" class="w-user"
size="small"
clearable clearable
:placeholder="teacher ? '学生' : '用户'" :placeholder="teacher ? '学生' : '用户'"
> >
@@ -776,14 +774,12 @@ function dayBreak(index: number) {
v-if="inContest" v-if="inContest"
v-model:value="query.problem" v-model:value="query.problem"
class="w-problem-select" class="w-problem-select"
size="small"
:options="contestProblemOptions" :options="contestProblemOptions"
/> />
<n-input <n-input
v-else-if="!lessonActive" v-else-if="!lessonActive"
v-model:value="query.problem" v-model:value="query.problem"
class="w-problem" class="w-problem"
size="small"
clearable clearable
placeholder="题号" placeholder="题号"
:status="unknownProblems.length ? 'warning' : undefined" :status="unknownProblems.length ? 'warning' : undefined"
@@ -793,14 +789,12 @@ function dayBreak(index: number) {
<n-select <n-select
v-model:value="query.result" v-model:value="query.result"
class="w-result" class="w-result"
size="small"
:options="flowMode ? gradeOptions : resultOptions" :options="flowMode ? gradeOptions : resultOptions"
/> />
<n-select <n-select
v-if="!inContest && !flowMode" v-if="!inContest && !flowMode"
v-model:value="query.language" v-model:value="query.language"
class="w-lang" class="w-lang"
size="small"
:options="languageOptions" :options="languageOptions"
/> />
<button <button
@@ -811,13 +805,12 @@ function dayBreak(index: number) {
> >
<Icon v-if="today" icon="ph:check-bold" :width="12" />今天 <Icon v-if="today" icon="ph:check-bold" :width="12" />今天
</button> </button>
<n-button size="small" quaternary @click="clear">清空</n-button> <n-button quaternary @click="clear">清空</n-button>
<div class="spacer"></div> <div class="spacer"></div>
<!-- 老师只有「统计」（今日统计并进去了）；学生看不到统计，仍是「今日统计」 --> <!-- 老师只有「统计」（今日统计并进去了）；学生看不到统计，仍是「今日统计」 -->
<n-button <n-button
v-if="teacher && route.name === 'submissions'" v-if="teacher && route.name === 'submissions'"
size="small"
quaternary quaternary
title="统计：这节课、今天，或者回头看以前的课" title="统计：这节课、今天，或者回头看以前的课"
@click="openStatistics()" @click="openStatistics()"
@@ -827,7 +820,6 @@ function dayBreak(index: number) {
</n-button> </n-button>
<n-button <n-button
v-else-if="route.name === 'submissions' && !flowMode" v-else-if="route.name === 'submissions' && !flowMode"
size="small"
quaternary quaternary
:title="`今日统计：今天全站 ${todayCount} 条`" :title="`今日统计：今天全站 ${todayCount} 条`"
@click="toggleTodayPanel(true)" @click="toggleTodayPanel(true)"
@@ -1171,10 +1163,10 @@ function dayBreak(index: number) {
} }
.filters { .filters {
height: 52px; height: 60px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -1221,14 +1213,22 @@ function dayBreak(index: number) {
width: 104px; width: 104px;
} }
/* 机房 1280 的屏上老师那排只剩几像素：学生、语言两个框各收一点，别让班级框被挤扁 */ /* 机房 1280 的屏上老师那排只剩几像素：学生、语言两个框各收一点，别让班级框被挤扁；
控件放大到 34 高以后再把两头留白和标签的字收回一点 */
@media (max-width: 1365px) { @media (max-width: 1365px) {
.filters {
padding: 0 16px;
}
.w-user { .w-user {
width: 108px; width: 108px;
} }
.w-lang { .w-lang {
width: 96px; width: 96px;
} }
.chip,
.lesson {
font-size: 13px;
}
} }
.spacer { .spacer {
@@ -1242,13 +1242,13 @@ function dayBreak(index: number) {
.chip, .chip,
.lesson { .lesson {
height: 28px; height: var(--oj-ctrl-h);
padding: 0 12px; padding: 0 14px;
border: 1px solid v-bind("theme.borderColor"); border: 1px solid v-bind("theme.borderColor");
border-radius: 14px; border-radius: 17px;
background: transparent; background: transparent;
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -1274,7 +1274,7 @@ function dayBreak(index: number) {
} }
.chip.person .person-name { .chip.person .person-name {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.lesson b { .lesson b {
@@ -1292,6 +1292,14 @@ function dayBreak(index: number) {
display: flex; display: flex;
} }
/* 1920 的屏上和题目列表一样限宽 1600 居中，代码区不至于拉到两千像素宽 */
.page:not(.contest):not(.mobile) > .filters,
.page:not(.contest):not(.mobile) > .split {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
/* 列表比代码区窄一点（46 : 54，用户看过定的）：原来列表固定 560、代码占满，右边空一大片； /* 列表比代码区窄一点（46 : 54，用户看过定的）：原来列表固定 560、代码占满，右边空一大片；
改成 56% 又嫌列表太宽。46% 在 1280 的屏上题目列约 215px，九成题目名放得下，长的看 title。 改成 56% 又嫌列表太宽。46% 在 1280 的屏上题目列约 215px，九成题目名放得下，长的看 title。
大屏上列表最宽 900 */ 大屏上列表最宽 900 */
@@ -1313,13 +1321,13 @@ function dayBreak(index: number) {
} }
.new-bar { .new-bar {
height: 32px; height: 36px;
flex: none; flex: none;
border: 0; border: 0;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
background: v-bind("tone('success').background"); background: v-bind("tone('success').background");
font: inherit; font: inherit;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("tone('success').color"); color: v-bind("tone('success').color");
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1329,14 +1337,14 @@ function dayBreak(index: number) {
} }
.unknown-bar { .unknown-bar {
height: 32px; height: 36px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("tone('warning').color"); color: v-bind("tone('warning').color");
background: v-bind("tone('warning').background"); background: v-bind("tone('warning').background");
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
@@ -1360,20 +1368,20 @@ function dayBreak(index: number) {
} }
.row { .row {
height: 40px; height: var(--oj-row-h);
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px 0 20px; padding: 0 16px 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
border-bottom: 1px solid v-bind("theme.dividerColor"); border-bottom: 1px solid v-bind("theme.dividerColor");
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: var(--oj-fs-body);
} }
/* 往上翻时选中那一行别被吸顶的日期行挡住 */ /* 往上翻时选中那一行别被吸顶的日期行挡住 */
.row { .row {
scroll-margin-top: 28px; scroll-margin-top: 34px;
} }
.row:hover { .row:hover {
@@ -1401,7 +1409,7 @@ function dayBreak(index: number) {
} }
.m-line.sub { .m-line.sub {
font-size: 12px; font-size: var(--oj-fs-meta);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -1413,9 +1421,9 @@ function dayBreak(index: number) {
/* 「23:59:59」8 个等宽数字 */ /* 「23:59:59」8 个等宽数字 */
.c-time { .c-time {
width: 60px; width: 64px;
flex: none; flex: none;
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
white-space: nowrap; white-space: nowrap;
@@ -1426,12 +1434,12 @@ function dayBreak(index: number) {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
height: 26px; height: 32px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: var(--oj-fs-meta);
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
background: v-bind("theme.actionColor"); background: v-bind("theme.actionColor");
@@ -1477,10 +1485,10 @@ function dayBreak(index: number) {
} }
.c-lang { .c-lang {
width: 48px; width: 50px;
flex: none; flex: none;
text-align: right; text-align: right;
font-size: 12px; font-size: var(--oj-fs-meta);
white-space: nowrap; white-space: nowrap;
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
} }
@@ -1514,16 +1522,16 @@ function dayBreak(index: number) {
} }
.empty-title { .empty-title {
font-size: 15px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: v-bind("theme.textColor2"); color: v-bind("theme.textColor2");
} }
.list-foot { .list-foot {
height: 44px; height: 52px;
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px 0 20px; padding: 0 16px 0 var(--oj-pad-x);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -1531,7 +1539,7 @@ function dayBreak(index: number) {
} }
.total { .total {
font-size: 13px; font-size: var(--oj-fs-sec);
color: v-bind("theme.textColor3"); color: v-bind("theme.textColor3");
white-space: nowrap; white-space: nowrap;
} }
apps/web/src/oj/user/components/KnowledgeMap.vue
+4 -4
View File
@@ -85,8 +85,8 @@ function hint(tag: KnowledgeLevel) {
<style scoped> <style scoped>
.knowledge { .knowledge {
max-width: 610px; max-width: 760px;
margin: 16px auto 0; margin: var(--oj-gap) auto 0;
} }
.row { .row {
@@ -125,11 +125,11 @@ function hint(tag: KnowledgeLevel) {
} }
.level { .level {
font-size: 13px; font-size: var(--oj-fs-sec);
color: #18a058; color: #18a058;
} }
.meta { .meta {
font-size: 12px; font-size: var(--oj-fs-meta);
} }
</style> </style>
apps/web/src/oj/user/index.vue
+17 -14
View File
@@ -151,8 +151,8 @@ onMounted(() => {
<template> <template>
<n-flex class="wrapper" vertical justify="center" align="center" v-if="!loading && profile"> <n-flex class="wrapper" vertical justify="center" align="center" v-if="!loading && profile">
<n-image <n-image
:width="96" :width="112"
:height="96" :height="112"
:src="profile.avatar" :src="profile.avatar"
:preview-disabled="isDefaultAvatar" :preview-disabled="isDefaultAvatar"
object-fit="cover" object-fit="cover"
@@ -257,14 +257,14 @@ onMounted(() => {
</template> </template>
<style scoped> <style scoped>
.wrapper { .wrapper {
max-width: 610px; max-width: 760px;
margin: 16px auto 0; margin: var(--oj-gap) auto 0;
} }
.stats { .stats {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px; gap: 16px;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@@ -277,43 +277,46 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
padding: 14px 8px; padding: 20px 12px;
border-radius: 8px; border-radius: var(--oj-radius);
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid rgba(128, 128, 128, 0.2);
} }
.stat-value { .stat-value {
font-size: 22px; font-size: 26px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
} }
.stat-label { .stat-label {
font-size: 13px; font-size: var(--oj-fs-sec);
} }
.stat-value.date { .stat-value.date {
font-size: 16px; font-size: 18px;
padding: 3px 0; padding: 3px 0;
white-space: nowrap; white-space: nowrap;
} }
h2 { h2 {
margin: 0; margin: 4px 0 0;
font-weight: normal; font-weight: 600;
font-size: var(--oj-fs-title);
} }
.desc { .desc {
margin: 0 auto; margin: 0 auto;
word-wrap: break-word; word-wrap: break-word;
max-width: 100%; max-width: 100%;
font-size: var(--oj-fs-body);
} }
.achievement-title { .achievement-title {
font-weight: 600; font-weight: 600;
font-size: var(--oj-fs-h2);
} }
.achievement-recent { .achievement-recent {
margin-top: 10px; margin-top: 14px;
} }
.achievement-icon { .achievement-icon {
display: inline-flex; display: inline-flex;
apps/web/src/oj/user/message.vue
+16 -1
View File
@@ -1,4 +1,6 @@
<template> <template>
<div class="oj-page message-page">
<h2>消息</h2>
<n-list v-if="messages.length"> <n-list v-if="messages.length">
<n-list-item :style="{ overflow: 'auto' }" v-for="(item, index) in messages" :key="index"> <n-list-item :style="{ overflow: 'auto' }" v-for="(item, index) in messages" :key="index">
<n-flex size="large" vertical> <n-flex size="large" vertical>
@@ -31,8 +33,9 @@
</n-flex> </n-flex>
</n-list-item> </n-list-item>
</n-list> </n-list>
<n-empty v-else description="没有消息"></n-empty> <n-empty v-else description="没有消息" style="margin: 48px 0"></n-empty>
<Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" /> <Pagination v-model:limit="query.limit" v-model:page="query.page" :total="total" />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getMessageList } from "oj/api" import { getMessageList } from "oj/api"
@@ -61,3 +64,15 @@ async function listMessages() {
onMounted(listMessages) onMounted(listMessages)
watch(query, listMessages, { deep: true }) watch(query, listMessages, { deep: true })
</script> </script>
<style scoped>
.message-page h2 {
margin: 0 0 8px;
font-size: var(--oj-fs-title);
}
.message-page :deep(.n-list-item) {
padding: 20px 0;
font-size: var(--oj-fs-sec);
}
</style>
apps/web/src/oj/user/setting.vue
+7 -4
View File
@@ -45,7 +45,7 @@ async function saveProfile() {
</script> </script>
<template> <template>
<n-flex class="container" vertical v-if="userStore.profile"> <n-flex class="container" vertical v-if="userStore.profile">
<h3>个人信息设置</h3> <h2>个人信息设置</h2>
<n-form> <n-form>
<n-avatar round :size="120" :src="userStore.profile.avatar" alt="头像" /> <n-avatar round :size="120" :src="userStore.profile.avatar" alt="头像" />
<n-form-item label=""> <n-form-item label="">
@@ -75,11 +75,14 @@ async function saveProfile() {
</template> </template>
<style scoped> <style scoped>
.container { .container {
max-width: 600px; max-width: 640px;
margin: 0 auto; margin: 0 auto;
padding-top: 8px;
gap: var(--oj-gap);
} }
h3 { h2 {
font-weight: normal; margin: 0;
font-size: var(--oj-fs-title);
} }
</style> </style>