xuyue/OJ2
1
0 Fork 0
Code Issues Pull Requests Actions 1 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/class/components/PkDuel.vue
+22 -22
View File
@@ -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;
}
apps/web/src/oj/class/components/PkGrid.vue
+37 -27
View File
@@ -159,7 +159,9 @@ const medal = (index: number) => palette.value.medal[index]
<path d="M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z" />
</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;
}
apps/web/src/oj/class/components/PkRace.vue
+2 -1
View File
@@ -15,7 +15,8 @@ const props = withDefaults(defineProps<{ pk: ClassPk; width?: number; height?: n
const theme = useThemeVars()
const 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) => {
apps/web/src/oj/class/pk.vue
+28 -26
View File
@@ -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>