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/rank/components/ChampionList.vue
+7 -7
View File
@@ -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>
apps/web/src/oj/rank/components/ClassBattle.vue
+21 -17
View File
@@ -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>
apps/web/src/oj/rank/components/RankMe.vue
+26 -26
View File
@@ -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");
}
apps/web/src/oj/rank/components/RankPodium.vue
+15 -15
View File
@@ -33,7 +33,7 @@ const steps = computed(() =>
.filter((step): step is { place: number; row: RankRow } => !!step.row),
)
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>
apps/web/src/oj/rank/components/RankTrack.vue
+21 -21
View File
@@ -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;
}
apps/web/src/oj/rank/components/WeekTop.vue
+7 -7
View File
@@ -64,11 +64,11 @@ const scale = computed(() => top.value[0]?.solved || 1)
}
.row {
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>