2071 lines
39 KiB
CSS
2071 lines
39 KiB
CSS
:root {
|
||
--brand: #5b5ce2;
|
||
--sider-top: #20224a;
|
||
--sider-bottom: #15162e;
|
||
--content-bg: #f5f6fb;
|
||
--text-secondary: #6f7080;
|
||
--border-soft: #ececf5;
|
||
/* 中性面：与 theme.ts 的 palette 一一对应 */
|
||
--surface: #ffffff;
|
||
--surface-2: #fafaff;
|
||
--surface-hover: #f6f6fd;
|
||
--tab-rail: #f2f3fa;
|
||
--text-strong: #1f2033;
|
||
--text-muted: #b9bacb;
|
||
--header-bg: rgba(255, 255, 255, 0.88);
|
||
--scrollbar: #c9cae6;
|
||
--track: #f1f2f6;
|
||
--track-raised: #ffffff;
|
||
--brand-soft: rgba(91, 92, 226, 0.08);
|
||
--success-soft: #f0fdf4;
|
||
--success-soft-border: #bbf7d0;
|
||
--danger-soft: #fef2f2;
|
||
--danger-soft-border: #fecaca;
|
||
--warning-soft: #fffbeb;
|
||
/* 内容页布局尺度：顶栏高度、内容列左右留白、内容列最大宽度 */
|
||
--layout-header-h: 56px;
|
||
--content-pad: 14px;
|
||
/* 底部留白单独一个变量：.app-content 的下边距比四周略大一点，
|
||
阅读器高度等「满屏高度」计算时统一引用它，避免出现几像素的竖直滚动条。 */
|
||
--content-pad-end: calc(var(--content-pad) + 4px);
|
||
--content-max: 1680px;
|
||
}
|
||
|
||
/* 深色模式：只换中性色，品牌色与语义色保持不变 */
|
||
:root[data-theme="dark"] {
|
||
--content-bg: #12141f;
|
||
--text-secondary: #9b9db4;
|
||
--border-soft: #2a2c40;
|
||
--surface: #1a1c2a;
|
||
--surface-2: #1f2132;
|
||
--surface-hover: #22243a;
|
||
--tab-rail: #16182a;
|
||
--text-strong: #e9eaf3;
|
||
--text-muted: #5d5f78;
|
||
--header-bg: rgba(26, 28, 42, 0.88);
|
||
--scrollbar: #3a3c55;
|
||
--track: #24263c;
|
||
--track-raised: #3a3e5c;
|
||
--brand-soft: rgba(91, 92, 226, 0.22);
|
||
--success-soft: rgba(22, 163, 74, 0.14);
|
||
--success-soft-border: rgba(22, 163, 74, 0.4);
|
||
--danger-soft: rgba(220, 38, 38, 0.14);
|
||
--danger-soft-border: rgba(220, 38, 38, 0.4);
|
||
--warning-soft: rgba(212, 136, 6, 0.14);
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--content-bg);
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||
"Microsoft YaHei", sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
#root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--scrollbar);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
/* ---------------- 侧边栏外壳 ---------------- */
|
||
|
||
.app-sider {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sider {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, var(--sider-top) 0%, var(--sider-bottom) 100%);
|
||
}
|
||
|
||
.sider-brand {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
height: 56px;
|
||
padding: 0 10px 0 12px;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
color: #fff;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||
transition: padding 0.2s ease;
|
||
}
|
||
|
||
/* 收拢时只留 logo，并且要保证 logo 居中 */
|
||
.sider--collapsed .sider-brand {
|
||
justify-content: center;
|
||
padding: 0;
|
||
}
|
||
|
||
.sider-brand-mark {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
flex-shrink: 0;
|
||
border-radius: 9px;
|
||
background: var(--brand);
|
||
color: #fff;
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
box-shadow: 0 4px 12px rgba(91, 92, 226, 0.45);
|
||
transition:
|
||
transform 0.18s ease,
|
||
opacity 0.16s ease;
|
||
}
|
||
|
||
.sider-brand-text {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 菜单头部的收拢按钮：与平台名同一行，靠右 */
|
||
.sider-brand-collapse {
|
||
margin-inline-start: auto;
|
||
flex-shrink: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
padding: 0;
|
||
color: rgba(255, 255, 255, 0.66);
|
||
}
|
||
|
||
/* 收拢态：logo 与展开按钮叠在同一位置，hover / 聚焦时原地换人 */
|
||
.sider-brand-logo {
|
||
position: relative;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.sider-brand-toggle {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
padding: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sider-brand-logo .sider-brand-toggle {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.sider-brand-logo:hover .sider-brand-mark,
|
||
.sider-brand-logo:focus-within .sider-brand-mark {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.sider-brand-logo:hover .sider-brand-toggle,
|
||
.sider-brand-logo:focus-within .sider-brand-toggle {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.sider-brand .sider-brand-toggle:not(:disabled):hover {
|
||
color: #fff;
|
||
background: rgba(255, 255, 255, 0.14);
|
||
}
|
||
|
||
.sider-scroll {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
padding: 10px 0 12px;
|
||
}
|
||
|
||
.sider-scroll::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.sider-scroll::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.16);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.sider-menu.ant-menu-dark .ant-menu-item-group-title,
|
||
.sider-scroll .ant-menu-dark .ant-menu-item-group-title {
|
||
padding-inline: 22px;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
|
||
/* 收拢态下的分组分隔线与弹出子菜单 */
|
||
.sider-scroll .ant-menu-dark .ant-menu-item-divider {
|
||
margin-inline: 16px;
|
||
border-color: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.sider-footer {
|
||
flex-shrink: 0;
|
||
padding: 10px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.sider-user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 7px 8px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
background: rgba(255, 255, 255, 0.07);
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.sider-user:hover {
|
||
background: rgba(255, 255, 255, 0.14);
|
||
}
|
||
|
||
.sider-user--collapsed {
|
||
justify-content: center;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
.sider-user-name {
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.sider-user-role {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 11px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 移动端抽屉中的侧栏：去掉 antd 默认留白 */
|
||
.app-sider-drawer .ant-drawer-body {
|
||
background: linear-gradient(180deg, var(--sider-top) 0%, var(--sider-bottom) 100%);
|
||
}
|
||
|
||
/* ---------------- 顶栏（移动端在此唤出菜单抽屉） ---------------- */
|
||
|
||
.app-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
/* 与 .app-content-inner 同一条基线：内容列被 max-width 收窄时，
|
||
顶栏控件同步内收（推导：内容列左偏移 = pad + (100% - 2*pad - 上限)/2
|
||
= (100% - 上限)/2，未被夹住时就是 pad，故取两者较大值）。 */
|
||
padding-inline: max(
|
||
var(--content-pad),
|
||
calc((100% - var(--content-max)) / 2)
|
||
) !important;
|
||
background: var(--header-bg);
|
||
border-bottom: 1px solid var(--border-soft);
|
||
backdrop-filter: saturate(180%) blur(8px);
|
||
}
|
||
|
||
/* 移动端的菜单入口：带描边的小方块，避免被当成正文里的返回按钮 */
|
||
.header-toggle {
|
||
flex-shrink: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 38px;
|
||
height: 32px;
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 10px;
|
||
background: var(--surface-2);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.header-toggle:hover {
|
||
color: var(--brand);
|
||
border-color: rgba(91, 92, 226, 0.35);
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
/* 状态切换时图标轻微横向位移，强化「推走 / 拉回」的方向感 */
|
||
.header-toggle-icon {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
animation: header-toggle-in 0.2s ease;
|
||
}
|
||
|
||
.header-toggle-glyph {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes header-toggle-in {
|
||
from {
|
||
transform: translateX(-3px);
|
||
opacity: 0.35;
|
||
}
|
||
to {
|
||
transform: none;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.header-toggle-icon {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* 平台名只在侧栏文字被收拢掉时出现，避免与侧栏品牌行重复 */
|
||
.app-header-brand {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.header-divider {
|
||
flex-shrink: 0;
|
||
width: 1px;
|
||
height: 22px;
|
||
margin-inline: -3px;
|
||
background: var(--border-soft);
|
||
}
|
||
|
||
/* 功能页面 header：与下方模块面板同款面板（同底色、同描边、同圆角），
|
||
标题 + 描述在左，该功能的主操作按钮在右 */
|
||
.page-header {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px 16px;
|
||
min-height: 54px;
|
||
margin-bottom: 16px;
|
||
padding: 10px 20px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.page-header-heading {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.page-header .page-header-title {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.page-header .page-header-desc {
|
||
display: block;
|
||
margin-top: 1px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.page-header-dot {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* 功能页头右侧的主操作：由 HeaderActions portal 进来，空的时候不占位 */
|
||
.page-header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.page-header-actions:empty {
|
||
display: none;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-inline-start: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.header-control {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
min-width: 38px;
|
||
height: 38px;
|
||
padding-inline: 8px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 明暗模式：圆角方块 + 轨道底色，图标本身表示当前可执行的动作 */
|
||
.mode-toggle {
|
||
width: 38px;
|
||
font-size: 18px;
|
||
color: var(--text-strong);
|
||
background: var(--track);
|
||
}
|
||
|
||
.mode-toggle:hover {
|
||
color: var(--brand);
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
/* 语言切换：分段控件，选中项抬起成同圆角的小方块（与明暗按钮同高） */
|
||
.header-actions .lang-switch.ant-segmented {
|
||
padding: 3px;
|
||
border-radius: 12px;
|
||
background: var(--track);
|
||
}
|
||
|
||
.header-actions .lang-switch .ant-segmented-item {
|
||
border-radius: 9px;
|
||
color: var(--text-secondary);
|
||
transition: color 0.18s ease;
|
||
}
|
||
|
||
.header-actions .lang-switch .ant-segmented-item-label {
|
||
min-width: 36px;
|
||
height: 32px;
|
||
padding-inline: 10px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
line-height: 32px;
|
||
}
|
||
|
||
.header-actions .lang-switch .ant-segmented-item:hover:not(.ant-segmented-item-selected) {
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.header-actions .lang-switch .ant-segmented-item-selected,
|
||
.header-actions .lang-switch .ant-segmented-thumb {
|
||
background: var(--track-raised);
|
||
box-shadow: 0 1px 2px rgba(15, 17, 45, 0.14);
|
||
}
|
||
|
||
.header-actions .lang-switch .ant-segmented-item-selected {
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
/* 内容页边距：留白随视口变宽略微加大，但宽度优先给内容，
|
||
避免高分辨屏上「中间一条窄柱、两侧大片空白」。 */
|
||
@media (min-width: 900px) {
|
||
:root {
|
||
--content-pad: 20px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1600px) {
|
||
:root {
|
||
--content-pad: 24px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 2200px) {
|
||
:root {
|
||
--content-pad: 28px;
|
||
}
|
||
}
|
||
|
||
.app-content {
|
||
padding: var(--content-pad);
|
||
padding-block-end: var(--content-pad-end);
|
||
}
|
||
|
||
.app-content-inner {
|
||
max-width: min(100%, var(--content-max));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 页面切换淡入 */
|
||
.view-fade {
|
||
animation: view-fade 0.24s ease both;
|
||
}
|
||
|
||
@keyframes view-fade {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(6px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
/* ---------------- 登录页 ---------------- */
|
||
|
||
.login-bg {
|
||
min-height: 100vh;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 16px;
|
||
background: linear-gradient(135deg, #5b5ce2 0%, #312e81 60%, #1e1b4b 100%);
|
||
}
|
||
|
||
/* 登录页右上角的语言 / 明暗切换：渐变背景上用浅色控件 */
|
||
.login-bg > .header-actions {
|
||
position: fixed;
|
||
inset-block-start: 18px;
|
||
inset-inline-end: 20px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.login-bg .mode-toggle,
|
||
.login-bg .lang-switch.ant-segmented {
|
||
--track: rgba(255, 255, 255, 0.18);
|
||
--track-raised: #ffffff;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.login-bg .mode-toggle {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.login-bg .mode-toggle:hover {
|
||
--track: rgba(255, 255, 255, 0.3);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.login-bg .lang-switch .ant-segmented-item {
|
||
color: rgba(255, 255, 255, 0.72);
|
||
}
|
||
|
||
.login-bg .lang-switch .ant-segmented-item:hover:not(.ant-segmented-item-selected) {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.login-bg .lang-switch .ant-segmented-item-selected,
|
||
.login-bg .lang-switch .ant-segmented-thumb {
|
||
background: #ffffff;
|
||
color: #312e81;
|
||
}
|
||
|
||
.login-card {
|
||
width: 400px;
|
||
max-width: 100%;
|
||
border-radius: 16px;
|
||
box-shadow: 0 24px 64px rgba(15, 16, 46, 0.35);
|
||
}
|
||
|
||
.login-brand-mark {
|
||
display: inline-grid;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 15px;
|
||
font-size: 27px;
|
||
}
|
||
|
||
/* ---------------- 通用页面块 ---------------- */
|
||
|
||
.page-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.panel-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin: 0 0 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
/* 指标卡：可选图标 + 数值 */
|
||
.metric-card .ant-statistic-title {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.metric-icon {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 42px;
|
||
height: 42px;
|
||
flex-shrink: 0;
|
||
border-radius: 12px;
|
||
background: rgba(91, 92, 226, 0.1);
|
||
color: var(--brand);
|
||
font-size: 19px;
|
||
}
|
||
|
||
.metric-icon--success {
|
||
background: rgba(22, 163, 74, 0.1);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.metric-icon--warning {
|
||
background: rgba(212, 136, 6, 0.12);
|
||
color: #d48806;
|
||
}
|
||
|
||
/* 掌握度概览：一条分布条看完四档，段宽按知识点数量占比；图例可点进知识地图 */
|
||
.mastery-distribution {
|
||
flex: 1;
|
||
min-width: 240px;
|
||
}
|
||
|
||
.mastery-band {
|
||
display: flex;
|
||
height: 10px;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
/* 轻量列表：抽屉章节 / 结果回看 / 推荐步骤统一节奏 */
|
||
.data-rows {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.data-row {
|
||
padding: 12px 2px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.data-row:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 2px;
|
||
}
|
||
|
||
.data-row--clickable {
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.data-row--clickable:hover {
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
/* 加载态：整页 / 局部两种高度 */
|
||
.async-state {
|
||
padding: 48px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.async-state--compact {
|
||
padding: 24px 0;
|
||
}
|
||
|
||
.async-skeleton {
|
||
padding: 8px 2px 12px;
|
||
}
|
||
|
||
/* 表格里的纯文本次要信息 */
|
||
.cell-sub {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 次要说明常是整句话，限制一行，否则整列会被撑得比屏幕还宽 */
|
||
.ant-table-cell .cell-sub {
|
||
max-width: 360px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 选项字母前缀，错题本 / 练习记录 / 答题共用 */
|
||
.option-letter {
|
||
display: inline-block;
|
||
width: 26px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 答题选项行 */
|
||
.option-row {
|
||
height: auto !important;
|
||
min-height: 44px;
|
||
padding: 10px 16px !important;
|
||
text-align: left !important;
|
||
justify-content: flex-start !important;
|
||
white-space: normal !important;
|
||
}
|
||
|
||
.option-row-letter {
|
||
display: inline-block;
|
||
width: 24px;
|
||
color: inherit;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 答题题干：练习流程统一排版 */
|
||
.question-stem {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
line-height: 1.7;
|
||
margin: 20px 0 14px;
|
||
}
|
||
|
||
/* 回看选项行（错题本 / 练习记录 / 题库预览），与答题行同一套排版语义 */
|
||
.option-review {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
padding: 8px 12px;
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 8px;
|
||
background: var(--surface);
|
||
line-height: 1.7;
|
||
transition: background 0.2s, border-color 0.2s;
|
||
}
|
||
|
||
.option-review--correct {
|
||
background: var(--success-soft);
|
||
border-color: var(--success-soft-border);
|
||
}
|
||
|
||
.option-review--wrong {
|
||
background: var(--danger-soft);
|
||
border-color: var(--danger-soft-border);
|
||
}
|
||
|
||
.option-review-icon {
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 知识图谱管理：左侧结构树 + 右侧详情 */
|
||
.graph-main {
|
||
flex: 1 1 620px;
|
||
min-width: min(520px, 100%);
|
||
}
|
||
|
||
.graph-detail {
|
||
width: 380px;
|
||
max-width: 100%;
|
||
position: sticky;
|
||
top: 76px;
|
||
}
|
||
|
||
.tree-box {
|
||
max-height: 620px;
|
||
overflow: auto;
|
||
padding: 12px;
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 10px;
|
||
background: var(--surface);
|
||
}
|
||
|
||
/* ---------------- 教材 / 课程：竖向 Tab + 等高卡片 + 分页 ---------------- */
|
||
|
||
/*
|
||
* Tab 与内容必须读起来是一块东西：外壳是一张卡，导航条是嵌在卡内的分段面板，
|
||
* 选中项抬成与内容区同底色的白色小块 —— 看到高亮就知道右边显示的是它的内容。
|
||
*/
|
||
.resource-tabs.ant-tabs-left,
|
||
.resource-tabs.ant-tabs-top {
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-content {
|
||
padding: 0;
|
||
}
|
||
|
||
/* 竖向：只有 2 个标签，不需要 antd 的滚动裁剪 */
|
||
.resource-tabs.ant-tabs-left > .ant-tabs-nav,
|
||
.resource-tabs.ant-tabs-left .ant-tabs-nav-wrap {
|
||
overflow: visible;
|
||
}
|
||
|
||
/* 导航条浮在卡片内侧：四边留白，不再和内容区抢那条分隔线 */
|
||
.resource-tabs.ant-tabs-left > .ant-tabs-nav {
|
||
flex: 0 0 186px;
|
||
width: 186px;
|
||
align-self: stretch;
|
||
position: static;
|
||
margin: 10px 0 10px 10px;
|
||
padding: 8px;
|
||
border-radius: 12px;
|
||
background: var(--tab-rail);
|
||
}
|
||
|
||
.resource-tabs.ant-tabs-left > .ant-tabs-body-holder {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 18px 20px 20px 22px;
|
||
}
|
||
|
||
/* antd 给左侧形态的内容区留了 24px，改由 body-holder 统一控制 */
|
||
.resource-tabs.ant-tabs-left > .ant-tabs-body-holder > .ant-tabs-content {
|
||
padding: 0;
|
||
}
|
||
|
||
/* 窄屏：同一条分段面板改卧在卡片顶部 */
|
||
.resource-tabs.ant-tabs-top > .ant-tabs-nav {
|
||
margin: 10px 10px 0;
|
||
padding: 6px;
|
||
border-radius: 12px;
|
||
background: var(--tab-rail);
|
||
}
|
||
|
||
.resource-tabs.ant-tabs-top > .ant-tabs-body-holder {
|
||
padding: 16px 18px 18px;
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-nav-list {
|
||
width: 100%;
|
||
}
|
||
|
||
/* antd 自带的导航分隔线由卡片描边代替，留着会再多切一刀 */
|
||
.resource-tabs .ant-tabs-nav::before {
|
||
display: none;
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-tab {
|
||
justify-content: flex-start;
|
||
align-self: stretch;
|
||
height: 40px;
|
||
margin: 0 0 2px !important;
|
||
padding: 0 12px !important;
|
||
border-radius: 9px;
|
||
/* 标签只有名称，禁止折行 */
|
||
white-space: nowrap;
|
||
color: var(--text-secondary);
|
||
transition:
|
||
background 0.18s ease,
|
||
box-shadow 0.18s ease,
|
||
color 0.18s ease;
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-tab:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-tab:hover {
|
||
color: var(--text-strong);
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-tab .ant-tabs-tab-btn {
|
||
width: 100%;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 选中项：白底小块浮在面板上，底色与右侧内容一致 */
|
||
.resource-tabs .ant-tabs-tab-active,
|
||
.resource-tabs .ant-tabs-tab-active:hover {
|
||
background: var(--surface);
|
||
box-shadow: 0 1px 3px rgba(15, 17, 45, 0.14);
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-tab-active .ant-tabs-tab-btn,
|
||
.resource-tabs .ant-tabs-tab-active .ant-tabs-tab-btn .anticon {
|
||
color: var(--brand);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 顶部形态：两项均分宽度 */
|
||
.resource-tabs.ant-tabs-top .ant-tabs-tab {
|
||
flex: 1 1 0;
|
||
margin-inline-end: 0 !important;
|
||
}
|
||
|
||
.resource-tabs .ant-tabs-ink-bar {
|
||
display: none;
|
||
}
|
||
|
||
.resource-tab-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 内容区是实底卡片，内层卡片靠描边和淡投影保持层次 */
|
||
.resource-tabs .equal-card {
|
||
box-shadow: 0 1px 3px rgba(15, 17, 45, 0.05);
|
||
}
|
||
|
||
/* 卡片等高：栅格列与卡片一起撑满，内容多少不再影响高度 */
|
||
.card-grid {
|
||
--card-h: 352px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.card-grid > .ant-col {
|
||
display: flex;
|
||
}
|
||
|
||
.card-grid .equal-card {
|
||
width: 100%;
|
||
height: var(--card-h);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-grid .equal-card .ant-card-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 断点与 Col 的 xl 对齐：单列时没有对齐压力，固定高度只会撑出一片空白 */
|
||
@media (max-width: 1199px) {
|
||
.card-grid .equal-card {
|
||
height: auto;
|
||
min-height: 260px;
|
||
}
|
||
}
|
||
|
||
/* 弹性留白：把页脚和操作区顶到卡片底部，不同内容量的卡片同一条基线 */
|
||
.card-fill {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* 页脚不参与拉伸，章节目录单行显示，剩下的并入 +N */
|
||
.card-foot {
|
||
flex: none;
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.card-tags .ant-tag {
|
||
max-width: 150px;
|
||
margin-inline-end: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.card-pin {
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.card-clamp {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
/* flex-basis 取的是未裁剪的整段文字高度，允许压缩时会把第二行切半，这里锁定两行高 */
|
||
flex: none;
|
||
}
|
||
|
||
.card-pager {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* 数学公式 */
|
||
.math-inline {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.math-block {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
padding: 4px 2px;
|
||
}
|
||
|
||
.katex-display {
|
||
margin: 0.25em 0;
|
||
}
|
||
|
||
/* ---------------- 电子书阅读器 ---------------- */
|
||
|
||
.ebook-reader {
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 顶栏 + 内容区上下留白之外的全部空间，保证页面本身不产生竖直滚动 */
|
||
height: calc(
|
||
100vh - var(--layout-header-h) - var(--content-pad) - var(--content-pad-end)
|
||
);
|
||
min-height: 480px;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.ebook-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
min-height: 52px;
|
||
padding: 8px 16px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.ebook-bar-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ebook-name {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.ebook-bar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ebook-body {
|
||
position: relative;
|
||
display: flex;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* PDF：虚拟滚动容器，页面绝对定位在占位轨道上 */
|
||
.ebook-pdf {
|
||
flex: 1;
|
||
overflow: auto;
|
||
padding: 24px 0;
|
||
}
|
||
|
||
.ebook-pdf-strip {
|
||
position: relative;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.ebook-pdf-page {
|
||
position: absolute;
|
||
background: #ffffff;
|
||
border-radius: 2px;
|
||
box-shadow: 0 1px 6px rgba(15, 17, 45, 0.12);
|
||
}
|
||
|
||
.ebook-pdf-canvas {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* EPUB：epub.js 往这里塞 iframe，尺寸交给它自己算 */
|
||
.ebook-epub {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ebook-epub iframe {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0;
|
||
}
|
||
|
||
.ebook-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: color-mix(in srgb, var(--surface) 82%, transparent);
|
||
}
|
||
|
||
.ebook-overlay-inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.ebook-overlay-text {
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.ebook-foot {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
padding: 8px 16px;
|
||
border-top: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.ebook-caption {
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ebook-progress {
|
||
flex: 1;
|
||
margin: 0;
|
||
}
|
||
|
||
.ebook-keys-hint {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.ebook-counter {
|
||
min-width: 92px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.ebook-font-btn {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.ebook-toc-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.ebook-toc-item {
|
||
width: 100%;
|
||
text-align: start;
|
||
overflow: hidden;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
:root {
|
||
--content-pad-end: calc(var(--content-pad) + 2px);
|
||
}
|
||
|
||
.app-content {
|
||
padding: var(--content-pad);
|
||
padding-block-end: var(--content-pad-end);
|
||
}
|
||
|
||
.ebook-reader {
|
||
min-height: 420px;
|
||
}
|
||
|
||
.ebook-counter {
|
||
min-width: 0;
|
||
}
|
||
|
||
.ebook-keys-hint {
|
||
display: none;
|
||
}
|
||
|
||
.app-header {
|
||
gap: 8px;
|
||
padding-inline: 12px !important;
|
||
}
|
||
|
||
/* 窄屏放不下按钮文字：主操作只留图标，文案保留给读屏与无障碍名称 */
|
||
.page-header {
|
||
margin-bottom: 12px;
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.page-header-actions .ant-btn > span:not(.anticon):not(.ant-btn-icon) {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page-header-actions .ant-btn {
|
||
min-width: 34px;
|
||
padding-inline: 0;
|
||
}
|
||
}
|
||
|
||
/* ---------------- 今日任务：自评卡片与结算区 ---------------- */
|
||
|
||
/* 掌握度自评三档：图标 + 标签 + 说明，选中态给品牌色描边与浅底 */
|
||
.daily-rates {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.daily-rate {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px 14px;
|
||
text-align: start;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition:
|
||
background 0.2s,
|
||
border-color 0.2s;
|
||
}
|
||
|
||
.daily-rate:hover:not(:disabled) {
|
||
background: var(--surface-hover);
|
||
border-color: var(--brand);
|
||
}
|
||
|
||
.daily-rate:disabled {
|
||
opacity: 0.65;
|
||
cursor: default;
|
||
}
|
||
|
||
.daily-rate--active {
|
||
background: var(--brand-soft);
|
||
border-color: var(--brand);
|
||
box-shadow: inset 0 0 0 1px var(--brand);
|
||
}
|
||
|
||
.daily-rate-icon {
|
||
color: var(--brand);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.daily-rate-text {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.daily-rate-label {
|
||
color: var(--text-strong);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.daily-rate-desc {
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.daily-rate-check {
|
||
color: var(--brand);
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* 完成态结算块：章节、自评、完成时刻、连续天数一次看完 */
|
||
.daily-done {
|
||
display: flex;
|
||
gap: 14px;
|
||
padding: 14px 16px;
|
||
background: var(--success-soft);
|
||
border: 1px solid var(--success-soft-border);
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.daily-done-icon {
|
||
color: #16a34a;
|
||
font-size: 26px;
|
||
}
|
||
|
||
/* 结算区：主按钮独占一行，提示语跟在按钮下面 */
|
||
.daily-foot {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 确认框里的章节名可能很长：限宽换行，避免气泡顶出内容区 */
|
||
.daily-confirm-desc {
|
||
max-width: 260px;
|
||
}
|
||
|
||
/* 重点按钮：今日任务的唯一主操作，尺寸要压过页面其余按钮 */
|
||
.daily-submit.ant-btn {
|
||
min-height: 52px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 22px rgba(91, 92, 226, 0.26);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.daily-submit.ant-btn:disabled {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ---------------- 分屏工作台（题库 / 记录 / 错题 / 答题） ---------------- */
|
||
|
||
.split-view {
|
||
display: flex;
|
||
align-items: stretch;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 14px;
|
||
box-shadow: 0 1px 2px rgba(31, 32, 51, 0.04);
|
||
}
|
||
|
||
.split-aside {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.split-view--left .split-aside {
|
||
border-inline-end: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.split-view--right .split-aside {
|
||
border-inline-start: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.split-main {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 窄屏：左右分屏退回上下堆叠，清单只占一小段高度 */
|
||
.split-view--stack {
|
||
flex-direction: column;
|
||
height: auto !important;
|
||
}
|
||
|
||
.split-view--stack .split-aside {
|
||
border-inline-end: 0;
|
||
border-inline-start: 0;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
width: 100% !important;
|
||
max-height: 40vh;
|
||
}
|
||
|
||
.split-view--stack .split-main {
|
||
min-height: 60vh;
|
||
}
|
||
|
||
.split-resizer {
|
||
flex: 0 0 7px;
|
||
cursor: col-resize;
|
||
position: relative;
|
||
background: transparent;
|
||
touch-action: none;
|
||
}
|
||
|
||
.split-resizer::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0 3px;
|
||
border-radius: 3px;
|
||
background: var(--border-soft);
|
||
transition: background 0.16s ease;
|
||
}
|
||
|
||
.split-resizer:hover::after,
|
||
.split-resizer--active::after {
|
||
background: var(--brand);
|
||
}
|
||
|
||
body.split-dragging {
|
||
cursor: col-resize;
|
||
user-select: none;
|
||
}
|
||
|
||
/* 分屏里的一栏 */
|
||
.pane {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
.pane-head {
|
||
flex: 0 0 auto;
|
||
padding: 12px 14px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.split-aside > .pane > .pane-head {
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.pane-head-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.pane-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
min-width: 0;
|
||
}
|
||
|
||
.pane-extra {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pane-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.pane-toolbar:empty {
|
||
display: none;
|
||
}
|
||
|
||
/* 题库侧栏的三个筛选下拉尽量等分一行；栏太窄时整体换行，
|
||
而不是把「难度不限」压成「难度…」；
|
||
菜单宽度靠 popupMatchSelectWidth={false} 单独放开，长选项不会被裁。 */
|
||
.bank-filter-select {
|
||
flex: 1 1 92px;
|
||
min-width: 92px;
|
||
}
|
||
|
||
.pane-body {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
padding: 10px 12px 18px;
|
||
}
|
||
|
||
.pane--flat .pane-body {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
display: flex;
|
||
}
|
||
|
||
.pane-foot {
|
||
flex: 0 0 auto;
|
||
padding: 10px 14px;
|
||
border-top: 1px solid var(--border-soft);
|
||
background: var(--surface);
|
||
}
|
||
|
||
/* 清单条目 */
|
||
.master-item {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: start;
|
||
padding: 10px 12px;
|
||
margin-bottom: 6px;
|
||
border: 1px solid transparent;
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
transition: background 0.16s ease, border-color 0.16s ease;
|
||
}
|
||
|
||
.master-item:hover {
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
.master-item--active {
|
||
background: var(--brand-soft);
|
||
border-color: rgba(91, 92, 226, 0.35);
|
||
}
|
||
|
||
.master-item-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-weight: 600;
|
||
color: var(--text-strong);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.master-item-sub {
|
||
margin-top: 3px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.master-group {
|
||
margin: 6px 0 4px;
|
||
padding: 0 4px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* 得分环 / 计数的数字都用等宽数字，纵向对比才整齐 */
|
||
.tabular {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ---------------- 试卷排版 ---------------- */
|
||
|
||
.paper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.paper-head {
|
||
flex: 0 0 auto;
|
||
padding: 14px 20px 10px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.paper-head-main {
|
||
min-width: 0;
|
||
}
|
||
|
||
.paper-title {
|
||
font-size: 16px;
|
||
font-weight: 650;
|
||
color: var(--text-strong);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.paper-meta {
|
||
margin-top: 2px;
|
||
font-size: 12.5px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.paper-head-side {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.paper-score {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
padding: 0 12px;
|
||
border-inline-start: 1px solid var(--border-soft);
|
||
}
|
||
|
||
.paper-score-value {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
color: var(--brand);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.paper-score-total {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.paper-score-label {
|
||
font-size: 11.5px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.paper-head-tools {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.paper-body {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
padding: 14px 18px 24px;
|
||
}
|
||
|
||
/* 一道题 */
|
||
.paper-question {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 14px 10px 16px;
|
||
border-radius: 12px;
|
||
transition: background 0.16s ease, box-shadow 0.16s ease;
|
||
}
|
||
|
||
.paper-question + .paper-question {
|
||
border-top: 1px dashed var(--border-soft);
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.paper-question--active {
|
||
background: var(--surface-2);
|
||
box-shadow: inset 3px 0 0 var(--brand);
|
||
}
|
||
|
||
.paper-question-rail {
|
||
flex: 0 0 auto;
|
||
padding-top: 1px;
|
||
}
|
||
|
||
.paper-question-no {
|
||
display: inline-grid;
|
||
place-items: center;
|
||
min-width: 28px;
|
||
height: 28px;
|
||
padding: 0 6px;
|
||
border-radius: 50%;
|
||
background: var(--track);
|
||
color: var(--text-strong);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.paper-question--correct .paper-question-no {
|
||
background: var(--success-soft);
|
||
color: var(--success-soft-border);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.paper-question--wrong .paper-question-no {
|
||
background: var(--danger-soft);
|
||
color: #dc2626;
|
||
}
|
||
|
||
.paper-question-main {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.paper-question-head {
|
||
min-height: 24px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.paper-question-actions {
|
||
margin-inline-start: auto;
|
||
}
|
||
|
||
.paper-stem {
|
||
font-size: 15.5px;
|
||
font-weight: 600;
|
||
line-height: 1.85;
|
||
color: var(--text-strong);
|
||
margin: 6px 0 12px;
|
||
}
|
||
|
||
.paper-options {
|
||
max-width: 760px;
|
||
}
|
||
|
||
.paper-answer {
|
||
margin-top: 12px;
|
||
padding: 10px 12px;
|
||
border-radius: 10px;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--border-soft);
|
||
max-width: 760px;
|
||
}
|
||
|
||
.paper-explain-body {
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px dashed var(--border-soft);
|
||
line-height: 1.85;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
.paper-explain-toggle {
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
color: var(--brand);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 答题卡 */
|
||
.answer-sheet {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.answer-sheet-chips {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.answer-chip {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
min-width: 32px;
|
||
height: 30px;
|
||
padding: 0 8px;
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 9px;
|
||
background: var(--surface);
|
||
color: var(--text-strong);
|
||
font-size: 13px;
|
||
font-variant-numeric: tabular-nums;
|
||
cursor: pointer;
|
||
transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
|
||
}
|
||
|
||
.answer-chip:hover {
|
||
transform: translateY(-1px);
|
||
border-color: var(--brand);
|
||
}
|
||
|
||
.answer-chip--active {
|
||
border-color: var(--brand);
|
||
box-shadow: 0 0 0 2px var(--brand-soft);
|
||
}
|
||
|
||
.answer-chip-icon {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.answer-chip--correct {
|
||
background: var(--success-soft);
|
||
border-color: var(--success-soft-border);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.answer-chip--wrong {
|
||
background: var(--danger-soft);
|
||
border-color: var(--danger-soft-border);
|
||
color: #dc2626;
|
||
}
|
||
|
||
.answer-chip--done {
|
||
border-color: rgba(91, 92, 226, 0.45);
|
||
color: var(--brand);
|
||
}
|
||
|
||
.answer-chip--pending {
|
||
border-style: dashed;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.answer-sheet-legend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.answer-sheet-legend-toggle {
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
text-decoration: underline dotted;
|
||
}
|
||
|
||
.answer-sheet-legend-items {
|
||
display: flex;
|
||
}
|
||
|
||
.answer-sheet-legend-items span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.answer-dot {
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 3px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.answer-dot--correct {
|
||
background: var(--success-soft);
|
||
border: 1px solid #16a34a;
|
||
}
|
||
|
||
.answer-dot--wrong {
|
||
background: var(--danger-soft);
|
||
border: 1px solid #dc2626;
|
||
}
|
||
|
||
.answer-dot--done {
|
||
background: var(--brand-soft);
|
||
border: 1px solid var(--brand);
|
||
}
|
||
|
||
.answer-dot--pending {
|
||
background: transparent;
|
||
border: 1px dashed var(--text-muted);
|
||
}
|
||
|
||
.answer-sheet-summary {
|
||
margin-inline-start: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 12.5px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 答题中的提交条 */
|
||
.paper-submit {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 题库卡片里的章节导航 */
|
||
.chapter-nav-count {
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
/* 试卷头部：标题与视图切换并排 */
|
||
.paper-head-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 题干下方的主体（选项 / 作答控件） */
|
||
.paper-body-slot {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 可折叠解析 */
|
||
.paper-explain {
|
||
margin-top: 12px;
|
||
max-width: 760px;
|
||
}
|
||
|
||
.paper-explain-caret {
|
||
margin-inline-start: 6px;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* 我的作答 / 正确答案 对照 */
|
||
.answer-compare {
|
||
align-items: center;
|
||
row-gap: 4px;
|
||
}
|
||
|
||
.answer-chip-no {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* 清单里的可点分组（教材名）与更紧凑的子项（章节） */
|
||
.master-group-button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
width: 100%;
|
||
padding: 5px 8px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: var(--text-strong);
|
||
font: inherit;
|
||
text-align: start;
|
||
cursor: pointer;
|
||
transition: background 0.16s ease, color 0.16s ease;
|
||
}
|
||
|
||
.master-group-button:hover {
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
.master-group-button--active {
|
||
color: var(--brand);
|
||
}
|
||
|
||
.master-item--tight {
|
||
padding: 7px 10px;
|
||
margin-bottom: 2px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.master-item--tight .master-item-title {
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 侧栏底部的小字提示 */
|
||
.aside-hint {
|
||
margin-top: 14px;
|
||
padding: 10px 4px 0;
|
||
border-top: 1px dashed var(--border-soft);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 生成任务进度条（挂在分屏上方，高度变化由 ResizeObserver 收敛） */
|
||
.bank-task {
|
||
margin-bottom: 12px;
|
||
padding: 12px 16px 4px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* 成绩单摘要 */
|
||
.result-score {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.result-score-value {
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
color: var(--brand);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.result-score-total {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.result-score-label {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.result-knowledge {
|
||
margin-top: 14px;
|
||
padding-top: 4px;
|
||
border-top: 1px dashed var(--border-soft);
|
||
}
|
||
|
||
.result-knowledge-row {
|
||
gap: 8px;
|
||
padding: 4px 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.result-knowledge-name {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
|
||
/* 章节测试：组卷条件收成上方一条窄栏，高度留给答题工作台 */
|
||
.test-launcher {
|
||
padding: 12px 14px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 14px;
|
||
box-shadow: 0 1px 2px rgba(31, 32, 51, 0.04);
|
||
}
|
||
|
||
.test-launcher-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.test-launcher-select {
|
||
width: 260px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.test-launcher-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px dashed var(--border-soft);
|
||
}
|
||
|
||
.test-launcher-tags {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
.test-launcher-note {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.paper-head {
|
||
padding: 12px 14px 8px;
|
||
}
|
||
|
||
.paper-body {
|
||
padding: 14px 12px 26px;
|
||
}
|
||
|
||
.paper-question {
|
||
padding: 16px 6px 18px;
|
||
}
|
||
}
|