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

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

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

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

No files matched your search

apps/web/src/oj/contest/pages/class.vue
+49 -48
View File
@@ -320,9 +320,9 @@ const success = computed(() => tone("success"))
const danger = computed(() => tone("error"))
const 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;
}