xuyueandClaude Opus 5.5
02e2fa7d9b
- 侧栏手机上不再占一列图标，顶栏左边 ☰ 拉出整张菜单，按返回键先关菜单 - 题目、比赛、用户、公告、题单列表手机上一项一张卡：名字一行、小字一行、按钮一行， 「学生看得到」开关单独一列靠右 - 卡点分析、AI 报告手机上点开一项整屏看，返回键关掉；年度趋势、自学情况、首页改成上下排 - 出题页、教程编辑、题单编辑、标签、设置手机上排成一列；测试数据「删掉」手机上常驻 - 弹框一律收进屏幕宽度 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
58 lines
2.0 KiB
CSS
58 lines
2.0 KiB
CSS
body {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* 前台页面的尺寸表。2026-10 整体放大了一档（原来行高 38～40、正文 14、页标题 20、
|
|
列表铺满 2000px 宽，用户嫌「太紧凑、不够大气」）。各页的 scoped 样式引用这里，
|
|
别再各写各的 px —— 上一轮就是二十几个页面各自定数，才会整体偏小还不一致。
|
|
|
|
机房屏 1366×768 的可用高度只有 640 左右，行高 48 是和用户商量过的：题目列表在
|
|
这个高度还能看到 8 行。题目详情页（编辑器）不吃这张表，它按 640 高逐像素排过。 */
|
|
:root {
|
|
--oj-page-width: 1200px; /* 阅读型页面（比赛、题单、公告……）的限宽，居中 */
|
|
--oj-fs-title: 24px; /* 页标题 */
|
|
--oj-fs-h2: 17px; /* 区块标题 */
|
|
--oj-fs-body: 15px; /* 列表主文字：题目名、比赛名 */
|
|
--oj-fs-sec: 14px; /* 次要列：日期、知识点、人数 */
|
|
--oj-fs-meta: 13px; /* 表头、角注 */
|
|
--oj-row-h: 48px; /* 天天用的长列表：题目、提交 */
|
|
--oj-row-h-roomy: 56px; /* 条数少的列表：比赛、公告 */
|
|
--oj-head-h: 40px; /* 表头 */
|
|
--oj-ctrl-h: 34px; /* 筛选条里的自制按钮，和 Naive 的 medium 输入框等高 */
|
|
--oj-pad-x: 24px; /* 列表单元格左右留白 */
|
|
--oj-gap: 20px; /* 区块之间 */
|
|
--oj-radius: 10px;
|
|
}
|
|
|
|
/* 阅读型页面的外壳：限宽居中，上面多留一点 */
|
|
.oj-page {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: var(--oj-page-width);
|
|
margin: 0 auto;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.oj-mermaid-surface {
|
|
box-sizing: border-box;
|
|
padding: 18px;
|
|
overflow: auto;
|
|
border: 1px solid rgba(148, 163, 184, 0.24);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.oj-mermaid-surface > svg {
|
|
max-width: 100%;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
/* 弹框各写各的定宽（420～820px），手机上一律收进屏幕里，左右各留 16px */
|
|
.n-modal {
|
|
max-width: calc(100vw - 32px);
|
|
}
|