- 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
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user