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