- 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
@@ -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");
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user