/* 顶部导航高度：header 高度与录题浮层起点共用同一来源，避免两处各写一份导致错位 */ :root { --hdr-h: 65px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #f2f4f8; color: #26303e; } header { display: flex; align-items: center; gap: 28px; height: var(--hdr-h); padding: 0 28px; background: linear-gradient(135deg, #4b3fe3, #6f6fff); color: #fff; box-shadow: 0 2px 10px rgba(35, 32, 90, .25); } header h1 { font-size: 20px; font-weight: 600; letter-spacing: 1px; } nav { display: flex; gap: 10px; } nav button { border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; padding: 7px 24px; border-radius: 999px; font-size: 15px; cursor: pointer; } nav button.active { background: #fff; color: #4b3fe3; font-weight: 600; } main { padding: 20px 28px; } /* 渲染兜底：脚本版本错配导致整页白屏时显示的提示（由 app.js 的 errorHandler 注入） */ .boot-error { background: #fff; border-radius: 14px; padding: 32px; max-width: 560px; margin: 60px auto; box-shadow: 0 1px 5px rgba(35, 32, 90, .08); } .boot-error h2 { font-size: 19px; color: #39414f; margin-bottom: 12px; } .boot-error p { font-size: 14px; color: #6b7482; line-height: 1.7; margin-bottom: 8px; } .boot-error .boot-err-detail { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: #b4552c; background: #fdf3ee; border-radius: 8px; padding: 8px 10px; word-break: break-all; } .boot-error .boot-reload { margin: 14px 0 4px; } .boot-error .hint { color: #8b95a5; } .card { background: #fff; border-radius: 14px; padding: 22px; box-shadow: 0 1px 5px rgba(35, 32, 90, .08); margin-bottom: 18px; } label { display: block; font-size: 13px; color: #6b7482; margin: 14px 0 6px; } .inline-label { display: inline; margin: 0 6px 0 0; } textarea, input, select { border: 1px solid #d8dee8; border-radius: 8px; padding: 9px 12px; font-size: 15px; font-family: inherit; background: #fff; color: #26303e; } textarea, input { width: 100%; } textarea:focus, input:focus, select:focus { outline: none; border-color: #6f6fff; } button.primary { background: linear-gradient(135deg, #4b3fe3, #6f6fff); color: #fff; border: none; padding: 10px 28px; border-radius: 999px; font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(75, 63, 227, .35); } button.primary:disabled { opacity: .55; cursor: default; } button.plain { background: #fff; color: #4b3fe3; border: 1px solid #c9c3ff; padding: 10px 24px; border-radius: 999px; font-size: 15px; cursor: pointer; } button.plain:disabled { opacity: .45; cursor: default; } button.plain.small { padding: 6px 16px; font-size: 13px; } button.plain.tiny { padding: 2px 9px; font-size: 13px; margin-left: 6px; } button.plain.danger { color: #c0392b; border-color: #f0b9b4; } /* 练习记录的对/错按钮（2026-09-18 统一成「✓ 对 / ✗ 错」）：跟考卷页那对同一套绿/红语义 */ button.plain.ok { color: #1d9e6f; border-color: #b6e2cf; background: #eaf7f1; } button.plain.ok:hover:not(:disabled) { border-color: #1d9e6f; color: #14785a; } button.plain.wrong { color: #d64541; border-color: #f2c0bd; background: #fdeceb; } button.plain.wrong:hover:not(:disabled) { border-color: #d64541; color: #b23330; } .hint { font-size: 13px; color: #6b7482; margin-top: 10px; } .error { color: #d64541; font-size: 14px; margin-top: 10px; } .ok-msg { color: #1d9e6f; font-size: 14px; margin-top: 10px; } .actions { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; align-items: center; } .block-title { font-size: 15px; margin: 18px 0 10px; color: #39414f; } .block-title.sub { margin: 20px 0 6px; font-size: 13px; color: #6b7482; } /* ---------- 录题 ---------- */ /* 录题浮层 = 盖在题库之上的一层工作台，不是全屏遮罩弹窗（D2）： 分界线是「遮罩顶边是否为 0」—— 这里 { top: var(--hdr-h) }，导航与「题库」高亮全程可见可点。 两层结构： ① .rec-mask 只负责压暗题库、吸收误触穿透；刻意不写 handler → 点它不关浮层 （浮层可能躺着「已框未入库」的题，误触一下不能丢工作台；若日后要改成点外关闭，需连同 R6 一起评审） ② .rec-overlay 四边留白 + 圆角 + 投影，让「浮在题库之上」在视觉上成立 */ .rec-mask { position: fixed; top: var(--hdr-h); left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(20, 22, 40, .45); } .rec-overlay { position: fixed; top: calc(var(--hdr-h) + 18px); left: 24px; right: 24px; bottom: 20px; z-index: 60; background: #f2f4f8; border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 22, 40, .32); display: flex; flex-direction: column; overflow: hidden; } /* 只用来让圆角裁掉正文溢出； 两个 .modal-mask 子弹窗是 position:fixed，包含块是视口，不受影响 */ /* 浮层工具条：本次会话累计入库数 + 唯一显式出口（✕，Esc 等价） —— 标题「录入错题」已撤（阶段 0 卡片内居中已有 h2，其余阶段各有步骤条/工具条） max-width 用 calc(1500px + 56px)：抵消浮层正文左右各 28px 内边距， 使 ✕ 的右缘与 1500px 居中卡片的右缘在同一条线上 */ /* 三栏 grid（1fr auto 1fr）而非 flex + margin:auto： 徽标有时不渲染（sessionSavedCount=0），flex 下中栏中心会随左栏宽窄漂移；对称三栏才锁得死居中 */ .rec-ov-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: 100%; max-width: calc(1500px + 56px); margin: 0 auto; padding: 16px 28px 12px; } .rec-ov-bar .rec-saved { grid-column: 1; justify-self: start; font-size: 13.5px; font-weight: 600; color: #1d9e6f; background: #e2f6ee; border: 1px solid #b7e6d0; border-radius: 999px; padding: 5px 14px; } .rec-ov-close { grid-column: 3; justify-self: end; border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: #6b7482; width: 34px; height: 34px; border-radius: 9px; } .rec-ov-close:hover { background: #e6eaf3; color: #26303e; } /* 全局三步进度条（只读）：选图 → 确认方向 → 框题入库 与框题页右侧 .frame-steps 是两个轴，靠形状区分： 这里 = 整卷流程（圆 + 纯数字 1/2/3） 那里 = 单题内部（胶囊 + 圈数字 ①整题 ②题干 ③配图，带「第 N 题」标题） 不可点击：frame 阶段可能有「已框未入库」的题，跳步会丢工作台 */ .rec-steps { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 8px; list-style: none; font-size: 12.5px; color: #98a1b0; } .rec-steps li { display: flex; align-items: center; gap: 7px; white-space: nowrap; } .rec-steps li + li::before { content: ""; width: 26px; height: 1px; background: #d8dee8; } .rec-steps li.done + li::before { background: #a8dfc8; } .rs-no { width: 24px; height: 24px; border-radius: 50%; background: #eef1f6; color: #98a1b0; font-size: 12.5px; font-weight: 700; flex: none; display: flex; align-items: center; justify-content: center; } .rec-steps li.done { color: #1d9e6f; } .rec-steps li.done .rs-no { background: #1d9e6f; color: #fff; } .rec-steps li.on { color: #4b3fe3; font-weight: 600; } .rec-steps li.on .rs-no { background: #4b3fe3; color: #fff; } /* 窄屏折叠：先丢文字，再整条隐藏（顶栏回落成「徽标 … ✕」） */ @media (max-width: 860px) { .rs-tx { display: none; } } @media (max-width: 560px) { .rec-steps { display: none; } } /* 浮层正文：吃掉导航以下全部高度并自行滚动 —— 不套 .modal-paper 的 max-height:74vh（style.css:899），长图才能完整看； overscroll-behavior 防止滚到底后把身后的题库列表一起滚走 纵向 flex + 居中：阶段内容不足一屏时（如选图页 ≈260px）上下均分留白， 而不是上紧下松地把一整块空白堆在底部； 只写 `safe center` 不写裸 center —— 不认 safe 的浏览器整条声明作废、回落到 默认 flex-start（顶部对齐），而裸 center 在内容超高时会把顶部顶出滚动区、再也滚不回来 */ .rec-ov-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 20px; display: flex; flex-direction: column; justify-content: safe center; align-items: center; } /* 各阶段根卡片都自带 max-width，靠 width:100% + align-items:center 吃掉 —— 只写 max-width 时 flex 的 stretch 被上限截断会退化成左对齐； flex: none 顶掉默认 flex-shrink:1，保证 pdfQueue / preview 这类超高卡片 不会被主轴压缩（虽然 min-height:auto 多数情况下也能兜住，显式写更稳）； :last-child 清掉 .card 自带的 margin-bottom:18px，否则居中会上下差 9px （四个阶段根节点目前都写了 margin: 0 auto，属于对未来新增阶段的保险） */ .rec-ov-body > * { width: 100%; flex: none; } .rec-ov-body > *:last-child { margin-bottom: 0; } /* 阶段0：选择录入方式 —— 两张操作卡 + 粘贴提示 */ .upload-card { max-width: 900px; margin: 0 auto; } .up-head { text-align: center; margin: 4px 0 22px; } .up-head h2 { font-size: 20px; font-weight: 600; color: #1f2733; letter-spacing: .5px; } .up-head p { margin-top: 8px; font-size: 14px; color: #6b7482; } .up-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .up-card { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 20px 18px; border-radius: 14px; cursor: pointer; border: 1.5px solid #dfe4ee; background: #fff; color: #26303e; transition: border-color .16s, box-shadow .16s, transform .16s; } .up-card input[type=file] { display: none; } .up-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; } .up-ico svg { width: 24px; height: 24px; } .up-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .up-txt b { font-size: 16px; font-weight: 600; } .up-txt i { font-style: normal; font-size: 12.5px; color: #7c8698; line-height: 1.5; } .up-main { border-color: transparent; color: #fff; background: linear-gradient(135deg, #5b4ce6, #7d7cff); box-shadow: 0 6px 18px rgba(75, 63, 227, .26); } .up-main .up-ico { background: rgba(255,255,255,.2); color: #fff; } .up-main .up-txt i { color: rgba(255,255,255,.85); } .up-main:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(75, 63, 227, .34); } .up-sub .up-ico { background: #fff2e9; color: #e4562d; } .up-sub:hover { transform: translateY(-2px); border-color: #f0bb9f; box-shadow: 0 8px 20px rgba(35, 32, 90, .10); } .up-paste { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 11px 16px; border-radius: 11px; background: #f5f6fb; border: 1px solid #e8ebf3; font-size: 13px; color: #6b7482; } .up-paste-k { font-weight: 600; color: #4a5361; } .kbd { display: inline-block; padding: 1px 7px; margin: 0 2px; border: 1px solid #c6cdda; border-radius: 6px; background: #fff; font-size: 12px; color: #3a4357; } @media (hover: none) { .up-paste { display: none; } } @media (max-width: 700px) { .up-options { grid-template-columns: 1fr; } } /* 本卷来源胶囊按钮：录题的 pdf 队列 / 方向确认 / 框题页共用 */ .src-chip { max-width: 260px; margin: 0; border: 1px solid #dbe2f0; background: #fff; color: #3550d8; border-radius: 999px; padding: 7px 16px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, background .15s; } .src-chip:hover:not(:disabled) { border-color: #b9c6ea; background: #f6f8ff; } /* 已入库相：来源胶囊转为只读展示（保留卷名信息，但不再可点去换来源） */ .src-chip:disabled { color: #9aa3b4; border-color: #e6eaf2; background: #f7f8fb; cursor: default; } .pdf-queue-card { max-width: 900px; margin: 0 auto; } .pdf-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .pq-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .pq-title b { font-size: 17px; font-weight: 600; color: #1f2733; } .pq-count { font-size: 12.5px; color: #4b3fe3; background: #f0efff; border-radius: 999px; padding: 2px 10px; } .pq-msg { margin: 0 0 12px; } .pq-tip { margin: 12px 0 0; } .pq-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .pq-actions .primary { margin-left: auto; } /* 页码缩略图条 */ .thumb-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px; border-bottom: 1px solid #eef1f6; } /* 页数少时整条居中（页数多仍左对齐 + 横向滚动，否则第一页会被滚出视野） */ .thumb-strip.center { justify-content: center; } .thumb { position: relative; flex: 0 0 auto; width: 78px; cursor: pointer; border: 2px solid transparent; border-radius: 10px; padding: 3px; background: #f7f8fd; transition: border-color .15s, background .15s, transform .15s; } .thumb img { display: block; width: 100%; height: 100px; object-fit: contain; border-radius: 6px; } .thumb:hover { transform: translateY(-2px); } .thumb.active { border-color: #4b3fe3; background: #f0efff; } .thumb.done { border-color: #1d9e6f; } .thumb-no { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 6px; } .thumb-badge { display: block; text-align: center; font-size: 11px; color: #6b7482; padding-top: 3px; } .thumb.done .thumb-badge { color: #1d9e6f; font-weight: 600; } /* 预览框收窄成「贴着图片」：块级宽度不再撑满卡片，灰底/描边不留白边 */ .pdf-preview-wrap { width: fit-content; max-width: 100%; margin: 14px auto 0; text-align: center; background: #f7f8fd; border: 1px solid #e3e7ef; border-radius: 12px; padding: 12px; } .pdf-preview-img { max-width: 100%; max-height: 62vh; border-radius: 8px; box-shadow: 0 2px 10px rgba(35, 32, 90, .08); } /* 阶段0.5：确认图片方向 「1 确认方向 / 2 框题入库」两步条已撤：顶栏常驻三步进度条已覆盖这个信息， 页内再放一条同义步骤条只会让同一屏出现两套口径 */ .preview-card { max-width: 760px; margin: 0 auto; } .pv-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .pv-tip { margin: 0 0 12px; font-size: 13px; color: #6b7482; } /* 同上：外框贴着图片收窄，短图不再被一条长灰底包着 */ .preview-wrap { width: fit-content; max-width: 100%; margin: 0 auto; text-align: center; background: #f7f8fd; border: 1px solid #e3e7ef; border-radius: 12px; padding: 12px; } .preview-img { max-width: 100%; max-height: 60vh; border-radius: 8px; box-shadow: 0 2px 10px rgba(35, 32, 90, .08); } .pv-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .pv-rotate { display: flex; gap: 8px; margin-left: auto; } .ico-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #4a5361; border: 1px solid #dfe4ee; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .ico-btn svg { width: 15px; height: 15px; } .ico-btn:hover:not(:disabled) { border-color: #b9c6ea; color: #4b3fe3; background: #f6f8ff; } .ico-btn:disabled { opacity: .45; cursor: default; } button.plain.ghost { border-color: #e3e7f0; color: #6b7482; } button.plain.ghost:hover { border-color: #c9cfdd; color: #39414f; } .actions.center { justify-content: center; } .actions .plain, .actions .primary { margin-right: 0; } .q-preview { font-size: 15px; background: #f7f8fd; border-radius: 8px; padding: 12px 14px; margin-bottom: 6px; } .img-wrap { position: relative; display: inline-block; max-width: 100%; } .img-wrap img { max-width: 100%; display: block; border-radius: 8px; border: 1px solid #d8dee8; } .fig-box { position: absolute; border: 2px solid #ff7043; background: rgba(255, 112, 67, .12); border-radius: 4px; cursor: move; touch-action: none; } .fig-label { position: absolute; top: -24px; left: 0; background: #ff7043; color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 6px 6px 6px 0; white-space: nowrap; } .fig-del { position: absolute; top: -24px; right: 0; background: #d64541; color: #fff; border: none; font-size: 12px; width: 22px; height: 20px; border-radius: 6px 6px 0 6px; cursor: pointer; } .fig-del.big { position: static; width: 28px; height: 28px; font-size: 14px; border-radius: 8px; } .fig-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: #ff7043; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; touch-action: none; } .err-row { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .err-row input, .err-row select { flex: 1; min-width: 120px; width: auto; } .err-row .grow { flex: 1; min-width: 160px; } .err-row .grow input, .err-row .grow select { width: 100%; } /* ---------- 知识点勾选 ---------- */ .kp-check-list { max-height: 260px; overflow-y: auto; border: 1px solid #e3e7ef; border-radius: 8px; padding: 6px 0; margin-top: 8px; } .tag-ai-row { margin-top: 4px; } .suggest-list { max-height: 140px; background: #f7f5ff; border-color: #d9d2ff; } .suggest-list .kp-check { font-weight: 600; } .suggest-list .hint { margin: 0; font-weight: 400; } .kp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #39414f; padding: 5px 8px; cursor: pointer; } .kp-check input { width: auto; } /* 待新建清单里给每条建议就地选思维族（模型归属，不选就进不了知识地图） */ .kp-family-inline { width: auto; max-width: 160px; font-size: 12.5px; padding: 2px 4px; border: 1px solid #d9d2ff; border-radius: 6px; background: #fff; } /* ---------- 题库 ---------- */ /* 题库分区（需求 §3.7）：错题 / 思维模型。用分段控件而非 tab —— 切换的是「看哪一类题」，下面的统计条、工具栏、列表结构都不变 */ .bank-tabs { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; background: #f0f0f6; border-radius: 10px; } .bank-tabs button { border: none; background: none; font-family: inherit; cursor: pointer; padding: 6px 20px; border-radius: 8px; font-size: 14px; color: #6b7482; } .bank-tabs button:hover { color: #4b3fe3; } .bank-tabs button.on { background: #fff; color: #4b3fe3; font-weight: 700; box-shadow: 0 1px 4px rgba(35, 32, 90, .12); } /* 统计概览 + 快捷筛选：点击即可切换视角 */ .bank-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; } /* 模型分区只剩「全部题目 / 待补答案 / 衍生题 / 模型题」四格（待确认、未掌握不显示），列数跟着收 */ .bank-stats.is-model { grid-template-columns: repeat(4, 1fr); } .stat-cell { background: #fff; border: 1px solid #e3e7ef; border-radius: 12px; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 4px rgba(35, 32, 90, .06); transition: border-color .15s, background .15s, box-shadow .15s; } .stat-cell b { font-size: 22px; color: #39414f; line-height: 1.2; } .stat-cell span { font-size: 12px; color: #6b7482; } .stat-cell:hover { border-color: #c9c3ff; } .stat-cell.on { border-color: #4b3fe3; background: #f0efff; box-shadow: 0 2px 8px rgba(75, 63, 227, .18); } .stat-cell.on b, .stat-cell.on span { color: #4b3fe3; } .stat-cell.warn b { color: #d97a1f; } .stat-cell.danger b { color: #d64541; } .stat-cell.warn.on { border-color: #e8a33d; background: #fff6e5; } .stat-cell.warn.on b, .stat-cell.warn.on span { color: #b06a0a; } .stat-cell.danger.on { border-color: #d64541; background: #fdecea; } .stat-cell.danger.on b, .stat-cell.danger.on span { color: #c0392b; } /* 筛选工具栏 */ .bank-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .bank-toolbar input.kw { max-width: 300px; min-width: 180px; flex: 1; } .bank-toolbar select { width: auto; } .bank-toolbar > button { border: 1px solid #c9c3ff; background: #fff; color: #4b3fe3; padding: 9px 20px; border-radius: 999px; font-size: 14px; cursor: pointer; } .bank-toolbar > button:hover { background: #f5f3ff; } .bank-toolbar > button.manage-on { background: #ffe9e7; border-color: #ff8f85; color: #c0392b; } /* 录题唯一入口必须是最显眼的主按钮：本规则选择器权重高于上面的 .bank-toolbar > button，否则会退化成浅紫描边胶囊 */ .bank-toolbar > button.rec-entry { background: linear-gradient(135deg, #4b3fe3, #6f6fff); color: #fff; border: none; font-weight: 600; padding: 10px 22px; box-shadow: 0 2px 8px rgba(75, 63, 227, .35); } .bank-toolbar > button.rec-entry:hover { background: linear-gradient(135deg, #4238cc, #6262ff); } .bank-toolbar .clear-btn { color: #c0392b; border-color: #f0b9b4; padding: 6px 14px; } /* 显示内容开关（错题回顾 / 解答思路）：与筛选控件同排，激活时填充主色 */ .tb-group { display: inline-flex; gap: 8px; align-items: center; padding-left: 10px; border-left: 1px solid #e3e7f0; } .tb-group button { border: 1px solid #dfe3ec; background: #fff; color: #6b7482; padding: 8px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .tb-group button:hover { background: #f5f6fa; border-color: #c9cfdd; } .tb-group button.on { background: #4b3fe3; border-color: #4b3fe3; color: #fff; } .tb-group button.on:hover { background: #4238cc; } /* 题库空态：无数据或无筛选结果时给一条可点的路，别让用户卡在死胡同 */ .bank-empty { text-align: center; padding: 34px 0 38px; } .bank-empty .hint { margin: 0 0 16px; } /* 题目列表行：题干为主体，其余信息按需降噪 */ .q-list { list-style: none; } .q-list .q-row { display: block; padding: 16px 18px; border-bottom: 1px solid #eef1f6; cursor: pointer; transition: background .12s; } .q-list .q-row:hover { background: #f7f8fd; } .q-list .q-row.is-review { box-shadow: inset 3px 0 0 #4b9be0; background: #fbfcff; } .q-list .q-row.is-review:hover { background: #f2f6ff; } .q-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .q-type-tag { flex: none; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 9px; margin-top: 2px; background: #f0efff; color: #4b3fe3; white-space: nowrap; } .q-type-tag.derived { background: #eef1f6; color: #6b7482; } .q-type-tag.practice { background: #fff3e0; color: #d97a1f; } .q-content { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 列表里题干是绝对主角：加重字色与字重，其余元素一律退后 */ .q-list .q-content { color: #23293a; font-weight: 500; } .q-flags { flex: none; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .flag { font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: #eef1f6; color: #6b7482; } .flag.unmastered { background: #fdecea; color: #c0392b; font-weight: 600; } .flag.consolidating { background: #fff3e0; color: #d97a1f; } .flag.mastered { background: #e2f6ee; color: #1d9e6f; } .flag.recorded { background: #fff8e1; color: #b8860b; animation: pulse 1.6s ease-in-out infinite; } .flag.review { background: #e8f0fe; color: #2b6cb0; font-weight: 600; } .flag.solved { background: #e2f6ee; color: #1d9e6f; } .flag.pending { background: #fff8e1; color: #b8860b; } /* 错题回顾：错答 + 错因（错题本的核心信息，一眼看到为什么错） */ .q-errline { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; padding: 7px 12px; background: #fffaf0; border-left: 3px solid #f2c94c; border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5; min-width: 0; } .err-label { flex: none; font-size: 11.5px; color: #a97b1a; font-weight: 600; letter-spacing: 1px; } .err-wrong { flex: none; max-width: 42%; color: #c0392b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .err-reason { flex: 1; min-width: 0; color: #7a5a00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 解答思路：与错题回顾同构的蓝系轻块，但按步骤逐条展开（与详情页一致）。 序号圆点 + 竖向连线沿用详情页 .solution-steps 的观感，尺寸调小以适配列表行。 */ .q-solline { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; padding: 9px 13px; background: #f4f7fe; border-left: 3px solid #8fb1f5; border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6; min-width: 0; } .sol-label { flex: none; font-size: 11.5px; color: #3b6cb0; font-weight: 600; letter-spacing: 1px; padding-top: 2px; } .q-sol-steps { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; counter-reset: qstep; display: flex; flex-direction: column; gap: 5px; } .q-sol-steps li { position: relative; padding-left: 25px; color: #39414f; word-break: break-word; } .q-sol-steps li::before { counter-increment: qstep; content: counter(qstep); position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #e3ebff; color: #3b6cb0; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .q-sol-steps li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: -7px; width: 2px; background: #dfe7f7; border-radius: 1px; } @media (max-width: 640px) { .q-solline { flex-direction: column; gap: 6px; } .sol-label { padding-top: 0; } } /* 题目剖析行：浅紫，与错题回顾（黄）/ 解答思路（蓝）区分。 类名统一走 q-ana- 前缀 —— 详情页已有 .ana-k / .ana-kp、出题页有 .plan-ana-line .ana-k， 直接复用同名类会串味，所以这里另起一套。 */ .q-analine { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; padding: 10px 13px; background: #f8f6ff; border-left: 3px solid #b3a8f7; border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6; min-width: 0; } .q-ana-label { flex: none; font-size: 11.5px; color: #5b4ce6; font-weight: 600; letter-spacing: 1px; padding-top: 2px; } .q-ana-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; } /* 一个知识点一块：核心在前、前置在后；各自的原理与易错全文展示，不做截断 */ .q-ana-kp + .q-ana-kp { padding-top: 10px; border-top: 1px dashed #e4dfff; } .q-ana-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .q-ana-name { font-size: 13.5px; font-weight: 600; color: #3f3563; } .q-ana-role { flex: none; font-size: 11px; line-height: 17px; border-radius: 5px; padding: 0 7px; } .q-ana-role.core { background: #ede9ff; color: #5b4ce6; } .q-ana-role.prereq { background: #eef1f6; color: #77808f; } .q-ana-line { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 13px; color: #4a4658; line-height: 1.65; } .q-ana-line + .q-ana-line { margin-top: 3px; } .q-ana-k { flex: none; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: #7a6fd8; background: #ece8ff; border-radius: 4px; padding: 1px 6px; } .q-ana-line.pit { color: #8a4a28; } .q-ana-line.pit .q-ana-k { color: #b4552c; background: #fdeee6; } @media (max-width: 640px) { .q-analine { flex-direction: column; gap: 6px; } .q-ana-label { padding-top: 0; } } /* 底部元信息行 */ .q-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; min-width: 0; } .q-kps { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; } .q-kps .kp-chip { margin-right: 0; } .q-src { font-size: 12px; color: #d97a1f; background: #fff3e0; border-radius: 999px; padding: 2px 10px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .q-date { color: #98a1b0; font-size: 12px; white-space: nowrap; margin-left: auto; } .q-actions { display: flex; gap: 8px; align-items: center; flex: none; } /* 底部元信息整体降噪：知识点 / 来源统一灰系，彩色只留给状态徽章与操作按钮 */ .q-foot .kp-chip { background: #eef1f6; color: #6b7482; } .q-foot .kp-chip.kp-more { background: transparent; border: 1px dashed #d5dae4; color: #98a1b0; } .q-foot .q-src { background: transparent; color: #98a1b0; padding: 2px 0; max-width: 300px; } /* 衍生题侧栏：右侧滑出，点遮罩 / ✕ / Esc 关闭；详情弹层（z-index 10）盖在其上 */ .dd-wrap { position: fixed; inset: 0; z-index: 9; pointer-events: none; } .dd-mask { position: absolute; inset: 0; background: rgba(20, 22, 40, .45); opacity: 0; transition: opacity .2s ease; } .dd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); background: #fff; border-left: 1px solid #e3e7f0; box-shadow: -8px 0 24px rgba(35, 32, 90, .12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; } .dd-wrap.open { pointer-events: auto; } .dd-wrap.open .dd-mask { opacity: 1; } .dd-wrap.open .dd-panel { transform: none; } .dd-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; background: #f0efff; border-bottom: 1px solid #e3e7f0; } .dd-head-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .dd-title { font-size: 16px; font-weight: 600; color: #1a1759; } .dd-count { font-size: 12px; color: #4b3fe3; } .dd-close { border: none; background: none; color: #6b7482; font-size: 16px; line-height: 1; padding: 5px 9px; border-radius: 8px; cursor: pointer; } .dd-close:hover { background: #e5e2ff; color: #4b3fe3; } .dd-parent { flex: none; display: flex; gap: 8px; align-items: flex-start; margin: 12px 20px 0; padding: 10px 12px; background: #f7f8fd; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #39414f; } .dd-parent-tag { flex: none; font-size: 11.5px; font-weight: 600; color: #6b7482; background: #eef1f6; border-radius: 6px; padding: 1px 8px; margin-top: 1px; white-space: nowrap; } .dd-parent-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dd-body { flex: 1; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; } .dd-item { background: #f4f6fb; border: 1px solid #e8ebf3; border-left: 3px solid #aab2c5; border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: background .12s, border-color .12s; } .dd-item:hover { background: #eef1f8; border-color: #c9c3f6; border-left-color: #4b3fe3; } .dd-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .dd-item-main { display: flex; gap: 10px; align-items: flex-start; } .dd-item-fig { flex: none; width: 72px; height: 72px; object-fit: contain; border: 1px solid #e3e7f0; border-radius: 6px; background: #fff; padding: 2px; } .dd-item-content { font-size: 14px; line-height: 1.6; color: #23293a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dd-item-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .dd-item-foot .q-kps { min-width: 0; } .dd-item-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .dd-date { color: #98a1b0; font-size: 12px; } .dd-foot { flex: none; padding: 12px 20px 16px; border-top: 1px solid #eef1f6; } .dd-gen { width: 100%; border: 1px dashed #c9c3f6; background: #fff; color: #4b3fe3; padding: 10px; border-radius: 999px; font-size: 14px; cursor: pointer; } .dd-gen:hover { background: #f5f3ff; } /* 折叠 / 操作按钮 */ .derive-btn { display: inline-flex; align-items: center; gap: 3px; flex: none; background: #f0efff; color: #4b3fe3; border: 1px solid #c9c3f6; border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: 12px; white-space: nowrap; } .derive-btn:hover { background: #e5e2ff; } .derive-btn.open { background: #4b3fe3; color: #fff; border-color: #4b3fe3; } .db-arrow { display: inline-block; font-size: 10px; line-height: 1; } .q-confirm { background: #e2f6ee; color: #1d9e6f; border: 1px solid #bfe8d5; border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 13px; } .q-confirm:hover { background: #cdeedd; } /* 「看看同族」（需求 §3.4）：题库行的小入口，点到地图定位这题所在思维族。样式近「确认」但用主色 */ .q-family { background: #f2f0ff; color: #4b3fe3; border: 1px solid #d5cffb; border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 13px; } .q-family:hover { background: #e6e1ff; } .q-del { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c2; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; } .pager { display: flex; align-items: center; gap: 16px; justify-content: center; margin-top: 18px; color: #6b7482; } /* 供详情弹层/出题复用的徽章与状态，保留不动 */ .type-badge { font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: #e2f6ee; color: #1d9e6f; } .type-badge.variant { background: #f0efff; color: #4b3fe3; } .type-badge.extended { background: #fff3e0; color: #d97a1f; } .type-badge.err { background: #fdecea; color: #c0392b; margin-left: 6px; } .type-badge.pending { background: #fff8e1; color: #b8860b; } .type-badge.derived { background: #eef1f6; color: #6b7482; } .proc-badge { font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: #fff3e0; color: #d97a1f; } .proc-badge.recorded { background: #fff8e1; color: #b8860b; animation: pulse 1.6s ease-in-out infinite; } .proc-badge.review { background: #e8f0fe; color: #2b6cb0; } .proc-badge.solved { background: #e2f6ee; color: #1d9e6f; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .q-id { color: #98a1b0; font-size: 13px; min-width: 44px; } /* 列表行内的题号不许被长题干挤压换行（题库列表 / 衍生侧栏 / 知识地图挂题清单） */ .q-head .q-id, .dd-parent .q-id, .dd-item-head .q-id, .km-q .q-id { flex: 0 0 auto; } @media (max-width: 900px) { .bank-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .bank-stats { grid-template-columns: repeat(2, 1fr); } .dd-panel { width: 100%; border-left: none; } } @media (prefers-reduced-motion: reduce) { .dd-mask, .dd-panel { transition: none; } } /* ---------- 详情弹层 ---------- */ .detail-mask, .settings-mask { position: fixed; inset: 0; background: rgba(20, 22, 40, .45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 10; } .detail { background: #fff; border-radius: 14px; max-width: 780px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 24px 28px; } .d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .d-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; } .d-head-right { display: flex; align-items: center; gap: 10px; flex: none; } .d-head .fig-del.big { margin-left: auto; } .mastery { font-size: 12px; border-radius: 999px; padding: 2px 10px; background: #eef1f6; color: #6b7482; } .mastery.consolidating { background: #fff3e0; color: #d97a1f; } .mastery.mastered { background: #e2f6ee; color: #1d9e6f; } .d-content { font-size: 17px; line-height: 1.8; } .img-zoom-mask { position: fixed; inset: 0; background: rgba(15, 17, 32, .75); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; } .img-zoom-mask img { max-width: 95%; max-height: 95%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); } /* 配图统一最大显示高度（自然像素尺寸仅作上限），视觉整齐 */ .inline-fig { max-width: 100%; max-height: 150px; width: auto; height: auto; border: 1px solid #e3e7ef; border-radius: 8px; display: block; margin: 0; } /* 放大镜包装：收缩到图片实际宽度，让徽标贴住图片右下角 */ .fig-zoom { position: relative; display: block; width: fit-content; margin: 8px 0; } .fig-append { display: block; margin-top: 6px; } .fig-append .inline-fig { display: inline-block; max-width: 46%; vertical-align: top; } .inline-fig-box { display: inline-block; vertical-align: top; margin: 0 10px 10px 0; } .inline-fig-box .fig-zoom { display: inline-block; margin: 0; width: auto; } .fig-cap { display: block; text-align: center; font-style: normal; font-size: 12.5px; color: #6b7482; margin-top: 3px; } /* SVG 配图固有尺寸缺失（根元素 width="100%" 或无 width）时， 在 width:auto 下会坍缩成 2px； 给明确宽度兜底（PNG 不受影响），窄容器时按 max-width 收缩 */ .inline-fig[src$=".svg"] { width: 320px; max-width: 100%; height: auto; max-height: 150px; } .fig-append .inline-fig[src$=".svg"] { max-width: 46%; } /* 放大镜徽标：图片右下角半透明圆钮，点击放大 */ .zoom-badge { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; background: rgba(30, 34, 46, .5); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; transition: background .15s; } .zoom-badge:hover { background: rgba(30, 34, 46, .75); } .zoom-badge svg { display: block; } /* 图文对应核对（详情内，低置信度配图静默提示） */ .fig-check { border: 1px solid #f2c94c; background: #fffdf5; } .fig-check .sec-title { color: #92600a; } .fig-check-list { display: flex; flex-direction: column; gap: 10px; } .fig-check-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fig-check-row.low .fig-thumb { border-color: #f2c94c; } .fig-thumb { width: 110px; border: 2px solid #e3e7ef; border-radius: 8px; background: #fff; } .fig-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 90px; } .fig-bind { background: #eef1ff; color: #4b3fe3; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; } .fig-low { background: #fff1e6; color: #c05621; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; } .fig-edit { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; } .fig-edit input { flex: 1; font-size: 13.5px; padding: 6px 10px; } .fig-warn { margin: 8px 0 4px; padding: 10px 12px; border-radius: 8px; border: 1px solid #f2c94c; background: #fff8e6; color: #92600a; font-size: 13px; line-height: 1.6; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fig-warn .plain.tiny { margin-left: auto; } .d-meta { margin-top: 14px; font-size: 14px; color: #4a5361; line-height: 1.9; } .d-meta b { color: #1d9e6f; } /* 详情弹窗分区化展示 */ .d-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef1f6; } .sec-title { font-size: 13px; font-weight: 600; color: #6b7482; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sec-title::before { content: ""; width: 3px; height: 14px; background: #6f6fff; border-radius: 2px; flex: none; } .detail-orig { margin: 12px 0 2px; display: flex; flex-direction: column; align-items: flex-start; } .detail-orig .fig-zoom { display: inline-block; margin: 0; width: auto; } .detail-orig.clickable { cursor: pointer; border: 1px dashed #dcd8ff; border-radius: 8px; padding: 10px 12px; transition: background .15s, border-color .15s; } .detail-orig.clickable:hover { background: #f7f8fd; border-color: #b3a9ff; } .detail-orig img { max-width: 100%; max-height: 200px; border: 1px solid #e3e7ef; border-radius: 8px; display: block; pointer-events: none; -webkit-user-drag: none; } /* 题干视图切换：文本+配图 与 原题照片 互斥，点击各自大按钮来回切换 */ .d-content.clickable { cursor: pointer; border-radius: 8px; transition: background .15s, border-color .15s; } .d-content.clickable:hover { background: #f7f8fd; } .d-content.clickable.hasOrig { border: 1px dashed #dcd8ff; padding: 10px 12px; } .d-content.clickable.hasOrig:hover { border-color: #b3a9ff; } /* 错题回顾：核心信息面板 */ .review-panel { background: #fffaf0; border: 1px solid #f2dfb5; border-left: 3px solid #f2c94c; border-radius: 10px; padding: 10px 14px; } .review-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 14px; line-height: 1.7; } .review-k { flex: none; font-size: 12px; font-weight: 600; color: #a97b1a; background: #fdf0d5; border-radius: 6px; padding: 1px 8px; } .review-v { flex: 1; min-width: 0; color: #7a5a00; } .review-v.wrong { color: #c0392b; font-weight: 600; } .review-row .type-badge.err { margin-left: 0; flex: none; } /* 解答：多问答案各一张绿色卡片，一眼看全 */ .answer-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .answer-tag { flex: none; font-size: 12px; font-weight: 600; color: #14855d; background: #d8f3e6; border-radius: 6px; padding: 1px 9px; } .answer-chip { background: #f0faf5; border: 1px solid #c9ecda; border-left: 3px solid #1d9e6f; border-radius: 8px; padding: 3px 12px; font-size: 15px; font-weight: 600; color: #14855d; word-break: break-word; } /* 解题思路分步：左侧序号圆点 + 竖向连接线，与 sec-title 紫色点缀同风格 */ .solution-steps { list-style: none; margin: 12px 0 0; counter-reset: step; display: flex; flex-direction: column; gap: 7px; } .solution-steps li { position: relative; padding-left: 34px; font-size: 14px; color: #4a5361; line-height: 1.8; word-break: break-word; } .solution-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #eef1ff; color: #4b3fe3; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .solution-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 27px; bottom: -10px; width: 2px; background: #e4e7f2; border-radius: 1px; } /* 题目信息行 */ .meta-list { display: flex; flex-direction: column; gap: 9px; } .meta-line { display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; } .meta-k { flex: none; width: 64px; font-size: 12.5px; color: #98a1b0; } .meta-v { flex: 1; min-width: 0; color: #39414f; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .meta-v .kp-chip { margin-right: 0; } .mastery-select { width: auto; padding: 4px 10px; font-size: 13px; border-radius: 6px; border: 1px solid #c9c3ff; color: #4b3fe3; background: #f0efff; cursor: pointer; } /* 练习记录（2026-09-18 可逆改造）：每张卷一行，行内判题。 原来那对没有卷上下文的大按钮已删掉 —— 练习记录挂在卷上。 */ .practice-list { list-style: none; margin-top: 10px; } .practice-list li { display: flex; gap: 14px; font-size: 13px; color: #4a5361; padding: 4px 0; align-items: center; } .practice-list .ok-msg, .practice-list .error { margin: 0; } .practice-list .practice-paper { font-weight: 600; color: #2c3444; } .practice-list .practice-row-actions { margin-left: auto; display: flex; gap: 6px; } .practice-list button.plain.tiny { margin-left: 0; } .practice-list button.ok { color: #1d9e6f; background: #eaf7f1; border-color: #b6e2cf; } .practice-list button.ok:hover { border-color: #1d9e6f; color: #14785a; } .practice-list button.wrong { color: #d64541; background: #fdeceb; border-color: #f2c0bd; } .practice-list button.wrong:hover { border-color: #d64541; color: #b23330; } .practice-list button.ok.is-done { background: #1d9e6f; border-color: #1d9e6f; color: #fff; } .practice-list button.wrong.is-done { background: #d64541; border-color: #d64541; color: #fff; } /* 操作区分组：主操作 / AI 辅助 */ .d-actions { border-top: 1px solid #eef1f6; padding-top: 16px; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .da-left, .da-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .da-hint { margin: 10px 0 0; } /* 标签编辑 / 编辑模式与查看模式间距 */ .tag-edit { border-top: 1px solid #eef1f6; margin-top: 18px; padding-top: 12px; } .tag-edit .sec-title { margin-top: 0; } .kp-chip { font-size: 12px; color: #4b3fe3; background: #f0efff; border-radius: 999px; padding: 2px 10px; margin-right: 6px; } /* ---------- 出题 ---------- */ .run-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; margin-bottom: 16px; cursor: pointer; user-select: none; } .run-banner:hover { background: #e0e7ff; } .run-dot { width: 9px; height: 9px; border-radius: 50%; background: #4f46e5; flex: none; animation: run-pulse 1.6s ease-in-out infinite; } @keyframes run-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .run-dot { animation: none; } } .run-text { font-size: 14px; color: #3730a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .run-link { font-size: 13px; color: #4f46e5; white-space: nowrap; margin-left: auto; } .q-src { font-size: 12px; color: #d97a1f; background: #fff3e0; border-radius: 999px; padding: 2px 10px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } /* 出题页两级结构 —— 真 tab（出题 / 出题历史）+ 出题内的分步进度指示。 注意 .gt-tab 三步 tab 已废弃（改用分步向导），互不影响 */ .gen-nav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #eceafd; } .gn-tab { position: relative; border: none; background: none; padding: 10px 18px 12px; color: #98a1b0; font-size: 15px; cursor: pointer; user-select: none; font-family: inherit; } .gn-tab:hover { color: #6a60e8; } .gn-tab.on { color: #4b3fe3; font-weight: 700; } .gn-tab.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 3px; border-radius: 2px 2px 0 0; background: #4b3fe3; } /* 「来自：模型名 ✕」来源提示条（按模型出题）：出题页顶部常显， ✕ 摘掉筛选回到「从题库选原题」（退上下文，不是向导回退） */ .gen-from { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 14px; background: #f2f0ff; border: 1px solid #ddd8ff; border-radius: 8px; } .gen-from-tag { flex: none; font-size: 12px; font-weight: 700; color: #6a60e8; letter-spacing: 1px; } /* 模型号徽章：与题号 模61-2 里那个数同源（需求 §8.2） */ .gen-from-no { flex: none; font-size: 12px; font-weight: 700; color: #4b3fe3; background: #fff; border: 1px solid #ddd8ff; border-radius: 5px; padding: 1px 7px; } .gen-from-name { flex: none; max-width: 320px; font-size: 14px; font-weight: 700; color: #4b3fe3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gen-from-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #8b90a0; } .gen-from .plain.tiny { flex: none; margin-left: 0; } /* 分栏摊平出题（2026-09-16 第二轮）：左栏出题方案 + 右栏衍生题，两池全部常显不折叠。 类名前缀 pool-，避开详情页占用的 .ana-*（硬约定 4） */ .pool-head { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; margin-bottom: 14px; background: #f7f8fd; border: 1px solid #e3e7ef; border-radius: 10px; } .pool-head-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pool-head-content { font-size: 14px; color: #3d4351; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pool-head-kp { font-size: 12px; color: #6b7280; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pool-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .pool-sec-head .block-title { margin-bottom: 0; } .pool-empty { background: #fafaff; border: 1px dashed #dcd8ff; border-radius: 8px; padding: 12px 14px; color: #6b7280; margin-bottom: 10px; } .pool-hash-tip { flex: none; font-size: 11px; color: #b97f16; background: #fdf4e0; border-radius: 999px; padding: 1px 8px; white-space: nowrap; } /* sticky 操作区：弹窗底部常驻，出题按钮与已选计数始终可见 */ .pool-actions { position: sticky; bottom: 12px; margin-top: 14px; padding: 10px 12px; background: #fff; border: 1px solid #e3e7ef; border-radius: 10px; box-shadow: 0 4px 18px rgba(61, 67, 81, 0.12); } .pool-actions input { width: 100%; margin-bottom: 8px; box-sizing: border-box; } .pool-actions-row { display: flex; align-items: center; gap: 10px; } .pool-picked { font-size: 13px; font-weight: 600; color: #1c3966; } .pool-actions-fill { flex: 1; } .pool-actions-row .primary { flex: none; white-space: nowrap; } /* 衍生题任务组：当前选中批次的内容卡 */ .pool-group { border: 1px solid #e3e7ef; border-radius: 10px; margin-bottom: 12px; background: #fff; } .pool-group.running { border-color: #c9d4f8; } .pool-group-body { padding: 12px 14px 14px; } /* —— 题卡：每道题一张卡，摘要 + 审题编辑同卡，题与题靠卡边界区分 —— */ .q-batch-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin-bottom: 10px; background: #f5f4fd; border: 1px dashed #d8d5f7; border-radius: 10px; } .q-batch-count { font-size: 13px; font-weight: 600; color: #4b3fe3; flex: 1; } .q-item { border: 1px solid #dfe3ec; border-top: 3px solid #d9dee8; border-radius: 12px; margin-bottom: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(47, 53, 66, .04); } .q-item.q-tbasic { border-top-color: #15803d; } .q-item.q-tvariant { border-top-color: #3b82f6; } .q-item.q-tadvanced { border-top-color: #c026d3; } .q-item-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #f8f9fc; border-bottom: 1px solid #eef1f6; flex-wrap: wrap; } .q-item-title { flex: 1; min-width: 160px; font-size: 14.5px; font-weight: 600; color: #2f3542; } .q-item-title .t-factor { color: #6b7280; font-weight: 400; } .q-item-fill { flex: 1; } /* 知识点：轻量 meta 行，降级不抢正文 */ .q-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 16px 0; font-size: 12px; } .q-item-meta .meta-k { width: auto; font-size: 12px; color: #a2aab8; } .q-item-meta .kp-chip { margin-right: 0; font-size: 11.5px; color: #6b7482; background: #f2f4f8; } .q-item-meta .kp-chip.new { background: #e2f6ee; color: #1d9e6f; } /* —— 攻击式验证探针（需求《出题方案攻击式验证探针》§6 / §8） —— 两处 UI：弹窗底部开关行 + 题卡头上的提示 chip 与明细。 chip 用黄色（#b97f16 系）而不是失败红：探针判坏在低风险档不打回、 题照常入库，它只是「值得看一眼」的提示，用红色会误导成失败。 */ .probe-switch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: #5a6478; cursor: pointer; user-select: none; } /* .pool-actions input 是给补充要求输入框的（width:100%），复选框要退回自身尺寸 */ .probe-switch-row input.probe-switch { width: auto; margin: 0; flex: none; cursor: pointer; } .probe-switch-text { font-weight: 600; color: #3d4457; } .probe-reason { font-size: 12px; color: #98a1b0; } .probe-level { flex: none; font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #6b7280; background: #f1f3f9; border: 1px solid #e3e7ef; white-space: nowrap; } .probe-level.high { color: #b97f16; background: #fdf4e0; border-color: #f0dcae; } .probe-chip { flex: none; font-size: 12px; padding: 2px 9px; border-radius: 999px; color: #b97f16; background: #fdf4e0; border: 1px solid #f0dcae; cursor: pointer; user-select: none; white-space: nowrap; } .probe-chip:hover { background: #fbecd0; } .probe-chip.open { background: #f7e2b6; border-color: #e6c98a; } .probe-chip.tiny { font-size: 11px; padding: 1px 7px; } .probe-detail { padding: 10px 16px 12px; background: #fffdf6; border-bottom: 1px solid #f2e9d4; } .probe-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; } .probe-detail-head .probe-k { font-size: 12px; font-weight: 700; color: #8a92a6; letter-spacing: .08em; } .probe-hint { font-size: 12px; color: #a2aab8; } .probe-q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .probe-q-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #5a6478; } .probe-q-name { flex: none; font-weight: 600; color: #3d4457; min-width: 48px; } .probe-q-verdict { flex: none; font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #1d9e6f; background: #e2f6ee; } .probe-q-item.bad .probe-q-verdict { color: #b97f16; background: #fdf4e0; } .probe-q-detail { flex: 1; min-width: 200px; color: #6b7482; line-height: 1.6; } .q-item-body { padding: 14px 16px 16px; } /* 分区小标题：题干 / 解题步骤 / 答案 */ .q-item-body .sec-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #8a92a6; letter-spacing: .08em; margin: 0 0 6px; } .q-item-body .sec-label::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: #d8d4f8; } .q-item-body .sec-label:not(:first-child) { margin-top: 16px; } .q-item-body textarea, .q-item-body input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #e8ebf2; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fbfcfe; transition: border-color .12s, background .12s; } .q-item-body textarea:focus, .q-item-body input:focus { outline: none; border-color: #b9b2f2; background: #fff; } /* 审题主体一条线（竖向）：题干 → 配图(若有) → 解题步骤 → 答案(高亮收尾) */ .stem { font-size: 14.5px; line-height: 1.85; color: #2f3542; margin: 0; white-space: pre-wrap; word-break: break-word; } .steps { font-size: 13.5px; line-height: 1.8; color: #464d5c; margin: 0; white-space: pre-line; word-break: break-word; } .q-item-body .answer-box { display: inline-block; background: #f0efff; border: 1px solid #dcd8ff; border-radius: 8px; padding: 7px 14px; font-size: 14px; font-weight: 700; color: #3730a3; max-width: 100%; box-sizing: border-box; white-space: pre-wrap; word-break: break-word; } /* 只读态：多行答案完整折行，不裁切 */ .q-item-body .answer-box.editing { display: block; max-width: 640px; } .q-item-body .answer-box.editing textarea { width: 100%; font-weight: 600; color: #3730a3; border-color: #d8d2f8; background: #fff; font-size: 14px; line-height: 1.6; font-family: inherit; min-height: 38px; } /* 编辑态：随内容自动增高（v-auto-resize） */ /* 配图：题干的附件，紧随题干下方；图形回述降级为图注小灰字 */ .fig-wrap { margin: 10px 0 2px; } .fig-wrap img { display: block; width: auto; max-width: 300px; max-height: 200px; border: 1px solid #e5e9f2; border-radius: 8px; background: #fff; } .fig-note { font-size: 11.5px; color: #a2aab8; line-height: 1.6; margin: 5px 2px 0; } .fig-note .fn-k { font-weight: 600; color: #96a0b0; } .fig-pending { margin: 8px 0 0; font-size: 12px; color: #b97f16; } .q-item-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .q-item-actions .primary { margin-left: auto; } /* —— 横向版本 tab（题目池一批一个 / 方案池一版一个） —— */ .vtab-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; } .vtab-row::-webkit-scrollbar { height: 6px; } .vtab-row::-webkit-scrollbar-thumb { background: #d5d9e3; border-radius: 3px; } .vtab { flex: none; display: flex; align-items: center; gap: 6px; border: 1.5px solid #e3e7ef; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; color: #5a6172; white-space: nowrap; transition: border-color .12s, background .12s; } .vtab:hover { border-color: #b9c0ce; } .vtab.active { border-color: #4b3fe3; background: #f5f4fd; color: #4b3fe3; font-weight: 600; } .vtab.spot { animation: vtab-spot 2s ease-out 1; border-color: #4b3fe3; } @keyframes vtab-spot { 0% { box-shadow: 0 0 0 4px rgba(75, 63, 227, 0.5); } 100% { box-shadow: 0 0 0 4px rgba(75, 63, 227, 0); } } @media (prefers-reduced-motion: reduce) { .vtab.spot { animation: none; } } .vtab .vtab-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .vtab .vtab-dot.run { background: #e0633f; } .vtab .vtab-dot.ok { background: #1e7a44; } .vtab .vtab-dot.warn { background: #e3a23c; } .vtab .vtab-date { flex: none; } .vtab .vtab-cnt { color: #98a1b0; font-weight: 400; } .vtab.active .vtab-cnt { color: #7a72d6; } .vtab.add { border-style: dashed; color: #4b3fe3; background: #faf9ff; } .vtab.add:hover { border-color: #4b3fe3; } .vtab-loading { flex: none; font-size: 12px; color: #e0633f; display: flex; align-items: center; gap: 6px; } .spin { display: inline-block; width: 12px; height: 12px; border: 2px solid #e3e7ef; border-top-color: #e0633f; border-radius: 50%; animation: rot .8s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } } /* 出题弹窗：方案池（一版一个 tab） */ .modal-mask.plan-mask { align-items: flex-start; overflow-y: auto; padding: 5vh 20px; } .modal.modal-plan { max-width: 860px; width: 100%; padding: 18px 22px; } .modal.modal-plan .modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .modal.modal-plan .modal-head h3 { margin-bottom: 0; flex: 1; } .plan-modal-body { max-height: 62vh; overflow-y: auto; margin-top: 8px; padding-right: 6px; } /* 全局轻提示 toast（入库完成等瞬时反馈） */ .app-toast { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%); background: #23262e; color: #fff; font-size: 14px; padding: 10px 22px; border-radius: 999px; box-shadow: 0 6px 24px rgba(35, 38, 46, 0.35); z-index: 999; animation: toast-in 0.25s ease; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .app-toast { animation: none; } } /* 选原题：列表（池化后点击行即进入该题上下文，不再就地展开手风琴） */ .gp-search { margin-bottom: 10px; } .gp-list { list-style: none; border: 1px solid #e3e7ef; border-radius: 10px; overflow: hidden; } .gp-list + .gp-list, .gp-recent { margin-top: 8px; } .gp-recent > li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; } .gp-recent .q-content { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-recent .q-date, .gp-recent .ok-msg { flex: none; } .gp-list > li { cursor: pointer; border-bottom: 1px solid #f2f4f8; } .gp-list > li:last-child { border-bottom: none; } .gp-list > li:hover { background: #f7f8fd; } .gp-list > li.open { background: #fafaff; } .gp-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; } .gp-row .q-content { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-row .q-date { flex: none; font-size: 12px; color: #98a1b0; } .gp-row .q-id { flex: none; } .gp-empty { margin-top: 14px; } /* 出题历史：类型分段筛选 + 行内类型徽章（错题衍生 / 按模型出题 同列一条时间线） */ .dh-seg { display: inline-flex; gap: 4px; padding: 3px; margin: 2px 0 10px; background: #f1f3f9; border-radius: 9px; } .dh-seg-btn { border: none; background: transparent; cursor: pointer; padding: 5px 12px; border-radius: 7px; font-size: 13px; color: #5a6478; font-family: inherit; } .dh-seg-btn:hover { color: #3d4457; } .dh-seg-btn.on { background: #fff; color: #3b3fd8; font-weight: 600; box-shadow: 0 1px 3px rgba(60, 63, 120, .14); } .dh-badge { flex: none; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; } .dh-badge-wrong { color: #6b7280; background: #f1f3f9; border-color: #e3e7ef; } .dh-badge-model { color: #3b3fd8; background: #eef0ff; border-color: #d9ddff; } /* 按模型出题：选择器信息增强（族说明三行 + 模型行两行 + 只看有错题的开关） */ .mp-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .mp-tools .gp-search { flex: 1; min-width: 220px; margin-bottom: 10px; } .mp-only-wrong { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-bottom: 10px; font-size: 13px; color: #5a6478; cursor: pointer; user-select: none; white-space: nowrap; } .mp-only-wrong input { cursor: pointer; margin: 0; } .mp-only-wrong:hover { color: #3d4457; } /* 族标题下两行小字：action 是「这一族在做什么」，content 是「管哪些内容」 */ .mp-fam-action { margin: -4px 0 2px; font-size: 13px; color: #5a6478; line-height: 1.5; } .mp-fam-content { margin: 0 0 8px; font-size: 12px; color: #98a1b0; line-height: 1.5; } /* 模型行改成两行：首行 = 徽章 + 名字 + 状态 chip，次行 = 定义全文（不截断，自然折行） */ .gp-row.mp-row { display: block; padding: 11px 14px; } /* 窄屏时状态 chip 折到下一行，而不是隐藏 —— 它是「该不该从这出题」的唯一判据，不能丢 */ .mp-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mp-row-head .q-content { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-def { margin: 6px 0 0; font-size: 13px; color: #6b7482; line-height: 1.6; overflow-wrap: anywhere; } .mp-verdict { flex: none; font-size: 12px; padding: 2px 8px; border-radius: 999px; color: #98a1b0; background: transparent; border: 1px solid transparent; white-space: nowrap; } .mp-verdict.mp-hot { color: #3b3fd8; background: #eef0ff; border-color: #d9ddff; } @media (max-width: 900px) { .mp-only-wrong { white-space: normal; } } /* 按模型出题：域粗筛 + 族折叠（需求《按模型出题列表导航与折叠》§3.1 / §3.2） */ /* 域 tab 行：左分段控件（复用 .dh-seg）+ 右「展开本域全部」 */ .mp-domain-tabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; } .mp-domain-tabs .dh-seg { margin: 0; } /* 域多时（4 个域 + 全部，窄屏放不下）允许换行，而不是横向溢出 */ .mp-domain-seg { flex-wrap: wrap; } /* 域为 0 时置灰：点进去只会看到空列表，不如直接拦在门口 */ .mp-domain-tabs .dh-seg-btn:disabled { color: #c2c8d4; cursor: not-allowed; } .mp-domain-tabs .dh-seg-btn:disabled:hover { color: #c2c8d4; } .mp-expand-all { border: 1px solid #e3e7ef; background: #fff; cursor: pointer; padding: 5px 12px; border-radius: 7px; font-size: 13px; color: #5a6478; font-family: inherit; } .mp-expand-all:hover { color: #3d4457; border-color: #cfd6e4; background: #f7f8fd; } /* 搜索时跨全量搜的轻提示（§3.3）：只提示范围变了，不改变任何过滤行为 */ .mp-search-scope { margin: 2px 0 6px; font-size: 12px; } /* 族头（§3.2）：整行可点，收起态 1 行 —— 25 个族头一屏看完就是「定位」问题的解法。 吸顶对齐 .paper-group-head 的做法：展开族内模型后往下滚，族头一直钉在顶部。 选择器带上 .block-title.sub 是为了压过既有的 .block-title.sub（它写了 margin/字号）， 否则族头间距还是原来那套 20px，折叠后 25 行会松散得白折叠 */ .block-title.sub.mp-fam-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 1; background: #fbfbfe; border-bottom: 1px solid #eef1f6; } .block-title.sub.mp-fam-head:hover { background: #f4f5fc; } /* 展开态用底色区分：收起的一行行族名里，能一眼看出哪族是打开的 */ .block-title.sub.mp-fam-head.mp-fam-open { background: #f4f5fc; } .mp-fam-caret { flex: none; color: #98a1b0; font-size: 12px; } .mp-fam-name { font-weight: 600; color: #39414f; } /* 域标签：只在「全部」tab 或搜索（跨域）时出现，补回原来「域 · 族名」前缀承载的信息 */ .mp-fam-domain { flex: none; font-size: 12px; color: #98a1b0; } .mp-fam-meta { margin-left: auto; flex: none; font-size: 12px; color: #98a1b0; } .mp-fam-hot { color: #3b3fd8; font-weight: 600; } @media (max-width: 900px) { .mp-fam-meta { margin-left: 0; } } /* 生成进度：进度条 + 任务状态徽章 */ .gen-progress { height: 8px; background: #eef1f6; border-radius: 999px; overflow: hidden; margin: 10px 0 14px; } .gen-progress-bar { height: 100%; background: linear-gradient(90deg, #6f6fff, #4b3fe3); border-radius: 999px; transition: width .4s ease; min-width: 2px; } .job-st { font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; flex: none; } .job-st.pending { background: #eef1f6; color: #6b7482; } .job-st.running { background: #e0e7ff; color: #3730a3; animation: pulse 1.6s ease-in-out infinite; } .job-st.ok { background: #e2f6ee; color: #1d9e6f; } .job-st.failed { background: #fdecec; color: #c0392b; } .job-st.ok .plain.tiny { margin-left: 6px; } .job-reason { font-size: 13px; color: #c0392b; margin: 0; } .plan-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #e3e7ef; border-left-width: 4px; border-radius: 10px; margin-top: 10px; cursor: pointer; transition: border-color .15s, background .15s; } .plan-card.q-tbasic { border-left-color: #15803d; } .plan-card.q-tvariant { border-left-color: #3b82f6; } .plan-card.q-tadvanced { border-left-color: #c026d3; } .plan-card:hover { background: #f7f8fd; } .plan-card.checked { border-color: #4b3fe3; background: #f0efff; } .plan-body { flex: 1; min-width: 0; } .plan-head { display: flex; align-items: center; gap: 10px; } .plan-factor { font-size: 13px; font-weight: 600; color: #4b3fe3; background: #f0efff; border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .plan-card.checked .plan-factor { background: #fff; } /* 已生成方案：不再禁选（决策 5），只降透明度 + 徽章提示 */ .plan-card.used { opacity: .68; } .plan-card.used:hover { border-color: #e3e7f0; } .used-chip { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 10px; background: #eef1f6; color: #8a92a6; font-size: 12px; } /* 方案设计进度视图（indeterminate 流动条 + 阶段文案） */ .design-box { text-align: center; padding: 48px 24px; border: 1px dashed #d5dbe6; border-radius: 12px; background: #fafbfd; } .design-bar { height: 8px; border-radius: 999px; background: #e8ecf4; overflow: hidden; margin: 0 auto 24px; max-width: 420px; } .design-bar-inner { height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, #4a6cf7, #6a8bff); animation: design-slide 1.6s ease-in-out infinite; } @keyframes design-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } .design-phrase { font-size: 16px; font-weight: 600; color: #2f3b52; margin: 0 0 10px; min-height: 24px; } .dir-chip { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 10px; background: #fdf0f5; color: #c026d3; font-size: 12px; } /* 配图徽章：方案层的 figure.mode。on=要配图，off=方案层判定不用图（鼠标悬停看理由） */ .fig-chip { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 10px; font-size: 12px; cursor: help; background: #e9f3ff; color: #1a6fc4; border: 1px solid #cbe2fa; } .fig-chip.off { background: #f1f3f7; color: #8a92a6; border-color: #e3e7f0; } .plan-diff { font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: #e2f6ee; color: #1d9e6f; } .plan-change { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: #232a36; } .plan-tests { margin: 4px 0 0; font-size: 13px; color: #6b7482; line-height: 1.6; } .kp-chip.new { background: #e2f6ee; color: #1d9e6f; border: 1px dashed #bfe8d5; } .paper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .paper-grid { grid-template-columns: 1fr; } } /* ---------- 考卷：我的考卷列表 ---------- */ .paper-saved-head { display: flex; align-items: center; justify-content: space-between; } .paper-saved-list { list-style: none; max-height: 240px; overflow-y: auto; margin-top: 8px; } .paper-saved-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; } .paper-saved-list li:hover { background: #f7f8fd; } .paper-saved-list li.picked { background: #f0efff; } .paper-saved-list .q-content { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paper-saved-list .hint { margin: 0; white-space: nowrap; } .paper-saved-list .fig-del.big { flex: 0 0 auto; } .paper-saved-list li:focus-visible { outline: 2px solid #4b3fe3; outline-offset: -2px; } .paper-saved-list li.picked { box-shadow: inset 3px 0 0 #4b3fe3; } /* ---------- 考卷页：列表下方的只读预览区 ---------- */ .paper-view-card { margin-top: 16px; } .paper-view-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .paper-view-name { font-weight: 600; font-size: 15px; color: #232a36; } .paper-view-meta { font-size: 12.5px; color: #6b7482; white-space: nowrap; } .paper-view-flag { font-size: 12px; border-radius: 999px; padding: 2px 10px; background: #fff3e0; color: #d97a1f; white-space: nowrap; } .paper-view-spacer { flex: 1; } .paper-view-tabs { display: flex; gap: 4px; } .paper-view-tabs button { border: 1px solid #d5dae6; background: #fff; border-radius: 6px; padding: 4px 16px; font-size: 13px; color: #5a6272; cursor: pointer; } .paper-view-tabs button.active { background: #4b3fe3; border-color: #4b3fe3; color: #fff; } .paper-view-hint { margin: 10px 0 0; } /* ===== 考卷 2.0：考卷库 + 组卷弹窗 ===== */ .modal.modal-paper { width: 1200px; max-width: 96vw; } .modal.modal-paper .modal-head { display: flex; align-items: center; gap: 12px; } .modal.modal-paper .modal-head h3 { margin: 0; flex: none; } .paper-title-input { flex: 1; max-width: 360px; } .modal-paper .modal-body { max-height: 74vh; overflow-y: auto; } .paper-modal-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; } .paper-compose-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .paper-compose-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .paper-preview-head { display: flex; align-items: center; gap: 10px; } .paper-preview-label { font-weight: 600; font-size: 13.5px; } .paper-preview-tabs { display: flex; gap: 4px; } .paper-preview-tabs button { border: 1px solid #d5dae6; background: #fff; border-radius: 6px; padding: 3px 14px; font-size: 12.5px; color: #5a6272; cursor: pointer; } .paper-preview-tabs button.active { background: #4b3fe3; border-color: #4b3fe3; color: #fff; } .paper-preview-body { flex: 1; overflow-y: auto; max-height: calc(74vh - 90px); border: 1px solid #e3e6ef; border-radius: 10px; background: #f6f7fb; padding: 16px; } .paper-preview-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 260px; color: #9aa2b0; font-size: 13px; } .paper-preview-sheet { background: #fff; border-radius: 8px; padding: 20px 22px; box-shadow: 0 1px 4px rgba(30,40,90,.08); min-height: 300px; } .paper-preview-sheet .paper-q-content { font-size: 14px; line-height: 1.7; } .paper-preview-sheet.two-col { columns: 2; column-gap: 28px; } .paper-preview-sheet.two-col .paper-q { break-inside: avoid; } .paper-preview-sheet .paper-space { display: block; } @media (max-width: 1000px) { .paper-modal-body { grid-template-columns: 1fr; } .paper-compose-right { position: static; max-height: 50vh; } } .paper-sec { display: flex; flex-direction: column; gap: 10px; } .paper-sec-head { font-size: 13.5px; font-weight: 600; color: #3d4351; padding-bottom: 6px; border-bottom: 1px solid #eef1f6; } .paper-sec-toggle { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } .paper-sec-arrow { font-size: 12px; color: #9aa2b0; font-weight: 400; } .paper-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .paper-filters input[type=text], .paper-filters select { max-width: 170px; } .paper-pool { max-height: 30vh; overflow-y: auto; border: 1px solid #e3e6ef; border-radius: 10px; padding: 6px; background: #fbfbfe; } .paper-qcard { border-radius: 8px; padding: 8px 10px; } .paper-qcard:hover { background: #f7f8fd; } .paper-qcard.picked { background: #f0efff; } .paper-qcard-head { display: flex; align-items: center; gap: 10px; } .paper-qcard-head input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; } .paper-qcard-head .q-content { flex: 1; min-width: 0; } .paper-qcard-preview { margin: 8px 0 4px 26px; padding: 10px 12px; background: #fff; border: 1px dashed #cfd4e4; border-radius: 8px; } .paper-preview-content { font-size: 14px; line-height: 1.7; } .paper-preview-content .inline-fig { max-width: 70%; } .paper-settings { display: grid; grid-template-columns: 72px 1fr; gap: 10px 12px; align-items: center; } .paper-settings label { text-align: right; color: #6b7482; font-size: 13px; } .paper-header-input { max-width: 110px; } .paper-preview-count { color: #6b7482; font-size: 12.5px; } .paper-preview-clear { margin-left: auto; } .paper-preview-q { display: flex; gap: 6px; } .paper-preview-q-rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; } /* 竖栏里 ↑↓✕ 三个操作按钮仍旧悬停才现身（免得预览面被按钮占满）， 但下面那对「✓ 对 / ✗ 错」要一直看得见 —— 老板反馈过「不明显」。 */ .paper-preview-q-rail > button:not(.rail-practice) { opacity: 0; transition: opacity .12s; } .paper-preview-q:hover .paper-preview-q-rail > button:not(.rail-practice) { opacity: 1; } /* 逐题回填（需求 §3.6）：操作栏宽度有限，按钮比考卷页那对更紧，行为完全一致。 2026-09-18：同样按「对的绿、错的红」上底色，免得藏在右栏里看不见 */ .paper-preview-q-rail .rail-practice { font-family: inherit; font-size: 11.5px; line-height: 1; color: #5a6272; background: #fff; border: 1px solid #d5dae6; border-radius: 6px; padding: 4px 5px; cursor: pointer; } .paper-preview-q-rail .rail-practice:hover:not(:disabled) { border-color: #4b3fe3; color: #4b3fe3; } .paper-preview-q-rail .rail-practice:disabled { cursor: default; opacity: .5; } .paper-preview-q-rail .rail-practice.ok { color: #1d9e6f; background: #eaf7f1; border-color: #b6e2cf; } .paper-preview-q-rail .rail-practice.ok:hover:not(:disabled) { border-color: #1d9e6f; color: #14785a; } .paper-preview-q-rail .rail-practice.wrong { color: #d64541; background: #fdeceb; border-color: #f2c0bd; } .paper-preview-q-rail .rail-practice.wrong:hover:not(:disabled) { border-color: #d64541; color: #b23330; } .paper-preview-q-rail .rail-practice.ok.is-done { background: #1d9e6f; border-color: #1d9e6f; color: #fff; font-weight: 600; opacity: 1; } .paper-preview-q-rail .rail-practice.wrong.is-done { background: #d64541; border-color: #d64541; color: #fff; font-weight: 600; opacity: 1; } .paper-preview-q-main { flex: 1; min-width: 0; } .paper-foot-spacer { flex: 1; } /* ===== 考卷 2.0 选题区：密列表 / 分组 / 批量 / 已选清单（需求 2026-09-18） ===== */ /* 统计头：几百道题时先让人知道「池子有多大、看全了没有」 */ .paper-sec-head { display: flex; align-items: center; gap: 8px; } .paper-sec-stat { margin-left: auto; font-size: 12.5px; font-weight: 400; color: #98a1b0; } .paper-sec-count { font-size: 12.5px; font-weight: 400; color: #98a1b0; } .paper-sec-toggle:hover { color: #4b3fe3; } /* 更多筛选：折叠出来的那一排，用浅底虚线框与主筛选行区分 */ .paper-filters.more { padding: 8px 10px; background: #fbfbfe; border: 1px dashed #e3e6ef; border-radius: 8px; } /* 列表 / 分组切换 */ .paper-view-switch { display: flex; gap: 4px; } .paper-view-switch button { border: 1px solid #d5dae6; background: #fff; border-radius: 6px; padding: 4px 12px; font-size: 12.5px; color: #5a6272; cursor: pointer; } .paper-view-switch button.active { background: #4b3fe3; border-color: #4b3fe3; color: #fff; } /* 批量条：全选 / 反选 / 清空，直接入卷，纠错交给下面的撤销条 */ .paper-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; background: #f7f8fd; border-radius: 8px; } .paper-bulk-count { font-size: 12.5px; font-weight: 600; color: #4b3fe3; } .paper-bulk-tip { margin-left: auto; font-size: 12px; color: #98a1b0; } /* 撤销条（需求 §5.14）：只对上一步批量动作负责，逐题勾选会清掉它 */ .paper-undo { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #fff8e8; border: 1px solid #ffe3ad; border-radius: 8px; font-size: 12.5px; color: #8a6520; } /* 分组视图组头（需求 §5.7）：吸顶，滚动时始终知道当前在哪个知识点下 */ .paper-group-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin-top: 4px; background: #fbfbfe; border-bottom: 1px solid #eef1f6; } .paper-group-name { font-size: 13px; font-weight: 600; color: #3d4351; } .paper-group-meta { margin-left: auto; font-size: 12.5px; color: #98a1b0; } /* 密列表题行（需求 §5.2）：一屏尽量多装，题干单行截断 */ .paper-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 5px 10px; border-radius: 8px; } .paper-row:hover { background: #f7f8fd; } .paper-row.picked { background: #f0efff; } /* 键盘光标（需求 §5.16）：与勾选态分开，避免「移动到哪」和「选中了哪」混淆 */ .paper-row.cursor { box-shadow: inset 0 0 0 2px #c9c3ff; } .paper-row input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; } .paper-row .q-id { flex: none; min-width: 56px; } .paper-row .q-content { font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 1; } .paper-row button.plain.tiny { flex: none; } /* 出卷次数徽章（需求 §5.3）：0 次弱化成灰虚线，没出过卷的题一眼能扫出来 */ .paper-badge { flex: none; font-size: 12px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; background: #eef1f6; color: #6b7482; } .paper-badge.count.zero { background: #fbfbfe; color: #b9c0cc; border: 1px dashed #e3e6ef; } /* 练习情况（需求 §5.4）：又错过要标红，这是重练选题的第一信号 */ .paper-badge.practice.has-wrong { background: #fdecea; color: #c0392b; font-weight: 600; } .paper-mastery { flex: none; font-size: 12px; border-radius: 999px; padding: 2px 9px; background: #eef1f6; color: #6b7482; } .paper-mastery.unmastered { background: #fdecea; color: #c0392b; font-weight: 600; } .paper-mastery.consolidating { background: #fff3e0; color: #d97a1f; } .paper-mastery.mastered { background: #e2f6ee; color: #1d9e6f; } /* 列表容器是键盘流的焦点宿主（tabindex=0），不要显示默认焦点框 */ .paper-pool:focus { outline: none; } .paper-pool-foot { display: flex; align-items: center; justify-content: center; gap: 10px; } /* 已选清单（需求 §5.15）：先看知识点覆盖够不够，再逐题核对、拖拽调序 */ .paper-selected-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .paper-sum-label { font-size: 12.5px; color: #6b7482; } .paper-sum-chip { font-size: 12px; border-radius: 999px; padding: 2px 9px; background: #f0efff; color: #4b3fe3; white-space: nowrap; } .paper-selected-list { display: flex; flex-direction: column; gap: 2px; max-height: 26vh; overflow-y: auto; border: 1px solid #e3e6ef; border-radius: 10px; padding: 6px; background: #fbfbfe; } .paper-selected-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; } .paper-selected-row:hover { background: #f7f8fd; } .paper-selected-row .q-id { flex: none; min-width: 56px; } .paper-selected-row .q-content { font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 1; } .paper-selected-row button.plain.tiny { flex: none; } .paper-drag-handle { flex: none; cursor: grab; user-select: none; font-size: 13px; color: #b9c0cc; } .paper-drag-handle:active { cursor: grabbing; } .paper-selected-foot { display: flex; align-items: center; gap: 10px; } .paper-selected-foot .hint { margin-top: 0; } .modal-foot { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:14px; margin-top:4px; border-top:1px solid #e6e9f2; } /* ---------- 设置 ---------- */ .gear-btn { margin-left: auto; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; cursor: pointer; line-height: 1; } .gear-btn:hover { background: rgba(255,255,255,.15); } .settings { background: #fff; border-radius: 14px; max-width: 620px; width: 100%; max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden; padding: 0; } /* 头部 / 底部固定，中间滚动 */ .set-head { display: flex; align-items: center; padding: 18px 24px 12px; } .set-head h2 { font-size: 17px; margin: 0; } .set-close { margin-left: auto; border: none; background: #f2f3f8; color: #4a5361; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; } .set-close:hover { background: #e6e8f2; color: #22242e; } .set-body { flex: 1; overflow-y: auto; padding: 0 24px 4px; } /* 分组卡片 */ .set-card { border: 1px solid #e6e8f2; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; background: #fcfcff; } .set-card.is-bad { border-color: #f3c9c7; background: #fffafa; } /* 密钥区的两个视图，用标签页切换。 上一版是拆成两张卡上下并列，老板仍觉得"混在一起" —— 因为两组都叫"密钥"， 同屏出现就必然被当成一件事。标签页让同一时刻只存在一个，从物理上分开。 */ .set-tabs { display: flex; align-items: flex-end; gap: 2px; margin: 12px 0 0; border-bottom: 1px solid #e6e8f2; } .set-tab { border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; color: #6b7482; padding: 7px 12px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .set-tab:hover { color: #4b3fe3; } .set-tab.is-on { color: #4b3fe3; font-weight: 600; border-bottom-color: #4b3fe3; } .set-tab-n { font-size: 11.5px; background: #eef0f5; color: #6b7482; border-radius: 999px; padding: 0 6px; line-height: 17px; } .set-tab.is-on .set-tab-n { background: #4b3fe3; color: #fff; } /* 「添加」靠右放：它和左边那个不是同类动作，留一段空白，别让人误以为是一组 */ .set-tab-add { margin-left: auto; } .set-pane { padding-top: 10px; } .set-card-head { display: flex; align-items: center; gap: 8px; } .set-card-head h3 { font-size: 14px; margin: 0; color: #22242e; } /* 每张卡的副标题：紧贴标题下方，一句话讲清"这张卡是干什么的"。 把「管理」和「新增」两张卡的角色用文字钉死，配合序号 + 配色， 三重信号让人不可能再把它们当成一张卡 */ .set-card-sub { font-size: 12.5px; color: #6b7482; margin: 6px 0 12px; line-height: 1.65; } .set-card-sub b { color: #4a5361; font-weight: 600; } .set-tag { margin-left: auto; font-size: 12px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .tag-ok { background: #e2f6ee; color: #1d9e6f; } .tag-bad { background: #fdecec; color: #d64541; } /* 「模型名称」类：有显式 label 的表单区。 以前是「输入框 + 占位提示 + 拉取按钮 + 应用按钮」横排， 看起来像下拉选择器，让人以为只能选 —— 实际输入框是自由输入。 加显式 label 后"模型名称"四个字钉死语义，placeholder 只剩补充提示 */ .set-field { margin-top: 4px; } .set-field-label { display: block; font-size: 13px; font-weight: 600; color: #22242e; margin-bottom: 6px; } .set-field-sub { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e6e8f2; } .set-field-sub .set-field-label { color: #6b7482; font-weight: 500; font-size: 12.5px; } /* 提示条 */ .set-alert { font-size: 13px; color: #b4392f; background: #fdecec; border-radius: 8px; padding: 9px 11px; margin: 10px 0 0; line-height: 1.65; } .set-ok { font-size: 13px; color: #1d9e6f; background: #e2f6ee; border-radius: 8px; padding: 9px 11px; margin: 10px 0 0; line-height: 1.65; } .set-alert.tight, .set-ok.tight { margin-top: 8px; } /* 密钥列表。 以前一行里硬塞「开关 / 掩码 / 来源 / 状态 / 排序 / 删除」六种信息，互相挤压。 改成两行网格：第一行「这是什么 + 能对它做什么」，第二行缩进放「当前状态」。 用显式 grid-row/column 而不是靠 DOM 顺序 —— 免得以后调换标签顺序就错位。 */ .set-keylist { list-style: none; margin: 10px 0 0; padding: 0; } .set-keylist li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3px 9px; padding: 8px 0; border-bottom: 1px solid #f0f1f7; font-size: 13px; } .set-keylist li:last-child { border-bottom: none; } .set-keylist li > .set-switch { grid-column: 1; grid-row: 1; } .set-key-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } /* 第一行「这是什么」= 服务商 · 模型名。原来这行位置只有 sk-****aB3x， 一串掩码谁也读不出信息量；掩码降级到第二行的小灰块里，只做核对用 */ .set-key-name { font-size: 13px; font-weight: 600; color: #22242e; line-height: 1.4; } .set-key-name.is-dim { color: #b4392f; } /* 还没设模型 → 这行是残缺的，标红 */ .set-key-sub { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } /* 列表里就地改名：输入框顶掉第一行，回车 / 失焦保存，Esc 取消 */ .set-label-edit { width: 100%; } .set-label-edit input { font-size: 13px; padding: 2px 8px; } /* 「改名」是轻量文字按钮 —— 别抢了掩码和状态的注意力 */ .set-rename { border: none; background: transparent; color: #9aa2b1; font-size: 12px; cursor: pointer; padding: 1px 4px; border-radius: 6px; } .set-rename:hover:not(:disabled) { color: #4b3fe3; background: #f0efff; } .set-rename:disabled { opacity: .5; cursor: default; } .set-key-ops { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 4px; } .set-keylist .set-res { grid-column: 2 / -1; grid-row: 2; } .set-key { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: #333c4a; background: #f2f3f8; border-radius: 6px; padding: 2px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-keylist li.is-bad .set-key { color: #b4392f; background: #fdecec; } /* 已停用：整行压暗，一眼能看出"它在，但不参与调度" */ .set-keylist li.is-off { opacity: .55; } .set-keylist li.is-off .set-key { color: #8a92a3; } .set-res { font-size: 12.5px; color: #6b7482; line-height: 1.5; } .set-res em { font-style: normal; color: #1d9e6f; margin-left: 4px; } .res-ok { color: #1d9e6f; } .res-invalid, .res-format, .res-bad_model { color: #d64541; } .res-no_balance, .res-network { color: #c98a20; } /* 软提示（如"不是 sk- 开头"）：看着不像，但**不拦人**，所以用黄色小字而不是红色。 整行也不会标红 —— 能不能用由「测试连接」的真实请求说了算。 */ .res-hint { color: #b07d1a; } /* 排序与删除同处第一行右侧那一格，靠右排列 */ .set-ord { display: flex; gap: 2px; } .set-move { border: 1px solid #e2e5ee; background: #fff; color: #6b7482; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; } .set-move:hover:not(:disabled) { border-color: #c3cad9; color: #333c4a; background: #f7f8fc; } .set-move:disabled { opacity: .35; cursor: default; } .set-del { border: none; background: transparent; color: #9aa2b1; font-size: 12.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px; } .set-del:hover { color: #d64541; background: #fdecec; } .set-del:disabled { opacity: .5; cursor: default; } .set-src { font-size: 11.5px; color: #4b3fe3; background: #f0efff; border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .set-src.src-off { color: #6b7482; background: #eef0f5; } .set-src.src-on { color: #1d9e6f; background: #e2f6ee; } .set-del-fixed { color: #c3c8d4; font-size: 12.5px; white-space: nowrap; } /* 多服务商并存：服务商组卡片列表 */ .set-group-list { list-style: none; margin: 10px 0 0; padding: 0; } .set-group-list li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #e6e8f2; border-radius: 10px; margin-bottom: 8px; background: #fbfbfe; } .set-group-list li.is-active { border-color: #b6ecd8; background: #f0fbf6; } .set-group-main { flex: 1 1 auto; min-width: 0; display: block; } .set-group-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #23283a; } .set-group-url { display: block; color: #8a92a3; font-size: 11.5px; margin-top: 3px; word-break: break-all; } .set-group-sub { display: block; color: #6b7482; font-size: 12px; margin-top: 2px; } /* 启用 / 停用开关。⚠️ label 有全局 margin，必须显式清掉，否则会把密钥行撑高 */ .set-switch { position: relative; flex: 0 0 auto; width: 30px; height: 17px; margin: 0; cursor: pointer; } .set-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .set-switch-track { position: absolute; inset: 0; background: #cfd4e0; border-radius: 999px; transition: background .15s; pointer-events: none; } .set-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: transform .15s; } .set-switch input:checked + .set-switch-track { background: #1d9e6f; } .set-switch input:checked + .set-switch-track::after { transform: translateX(13px); } .set-switch input:disabled + .set-switch-track { opacity: .45; cursor: default; } /* 密钥调度方式。 ⚠️ 这里刻意**不用 flex**：实测在 label 上做 flex 行布局时，中文长文本的 span 会被压到 0~25px（挤成一列竖排），改用「块 + 左内边距 + 绝对定位的单选框」最稳。 */ .set-dispatch { margin-top: 10px; background: #f7f8fc; border-radius: 8px; padding: 9px 11px; } .set-radio { display: block; position: relative; padding-left: 22px; margin: 0 0 6px; font-size: 12.5px; color: #4a5361; cursor: pointer; line-height: 1.55; } .set-radio:last-child { margin-bottom: 0; } /* ⚠️ 必须显式给宽高：全局 input 规则会把它拉成 100% 宽，圆点就画到行中间压住文字了 */ .set-radio input { position: absolute; left: 0; top: 3px; margin: 0; width: 13px; height: 13px; } .set-radio b { color: #333c4a; } .set-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .set-summary { font-size: 12.5px; color: #4a5361; } /* 输入行与提示 */ .set-add { display: flex; gap: 8px; margin-top: 10px; } .set-add input { flex: 1; min-width: 0; } .set-hint { font-size: 12.5px; color: #6b7482; margin: 8px 0 0; line-height: 1.6; } .set-hint code { background: #f2f3f8; padding: 1px 5px; border-radius: 4px; font-size: 12px; font-family: ui-monospace, Consolas, monospace; } .set-add button { white-space: nowrap; } /* 服务商下拉 */ .set-select { width: 100%; margin-top: 10px; } .tag-alt { background: #f0efff; color: #4b3fe3; } /* 拉取到的模型候选：视觉模型靠前并带标记，点击即应用 */ .set-models { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 168px; overflow-y: auto; padding: 2px; } .set-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #dfe3ee; background: #fff; color: #4a5361; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; line-height: 1.5; font-family: ui-monospace, Consolas, monospace; } .set-chip:hover { border-color: #4b3fe3; color: #4b3fe3; } .set-chip.is-vision { border-color: #cfe6dc; background: #f6fbf9; } .set-chip.is-on { background: #4b3fe3; border-color: #4b3fe3; color: #fff; } .set-chip:disabled { opacity: .55; cursor: default; } .set-chip-eye { font-size: 11px; } .set-fold { margin-top: 10px; } .set-fold > summary { font-size: 12.5px; color: #4b3fe3; cursor: pointer; } .set-fold textarea { margin-top: 8px; } .set-fold-card > summary { font-size: 13px; color: #4b3fe3; cursor: pointer; font-weight: 500; } .set-range { width: 100%; margin-top: 12px; accent-color: #4b3fe3; } .set-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px 16px; border-top: 1px solid #f0f1f7; } .set-foot .set-hint { margin: 0; } .set-msg { font-size: 13px; color: #1d9e6f; } .set-msg.is-bad { color: #d64541; } .set-foot button.primary { margin-left: auto; } /* ---------- 设置弹窗 · AI 用量统计 ---------- */ .usage-box { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e2e6ee; } .usage-box h3 { font-size: 14px; margin: 0 0 6px; color: #333c4a; } .usage-total { font-size: 13px; color: #4a5361; margin: 0 0 8px; } .usage-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .usage-table th, .usage-table td { padding: 5px 6px; text-align: right; } .usage-table th { color: #6b7482; font-weight: 500; border-bottom: 1px solid #e2e6ee; } .usage-table th:first-child, .usage-table td:first-child { text-align: left; } .usage-table td { color: #333c4a; border-bottom: 1px solid #f0f2f6; } .usage-table tr:last-child td { border-bottom: none; } /* ---------- 练习卷（屏幕预览 + 打印） ---------- */ .paper-sheet { background: #fff; width: 210mm; max-width: 100%; margin: 0 auto 30px; padding: 15mm; box-shadow: 0 2px 14px rgba(35, 32, 90, .15); border-radius: 4px; } .paper-title { text-align: center; font-size: 22px; letter-spacing: 4px; } .paper-sub { text-align: center; color: #6b7482; font-size: 13px; margin: 6px 0 18px; } .paper-q { break-inside: avoid; page-break-inside: avoid; } /* 逐题回填按钮（需求 §3.6）：题面右上角，只在屏幕上出现。用浮动而不是绝对定位， 是因为这块 DOM 屏幕与打印共用 —— display:none 一关，打印时的题面排版与原来一字不差 */ .paper-q-actions { float: right; display: flex; gap: 6px; margin: 2px 0 6px 12px; } .paper-q-actions button { font-family: inherit; font-size: 12px; color: #5a6272; background: #fff; border: 1px solid #d5dae6; border-radius: 999px; padding: 3px 12px; cursor: pointer; white-space: nowrap; } .paper-q-actions button:hover:not(:disabled) { border-color: #4b3fe3; color: #4b3fe3; } .paper-q-actions button:disabled { cursor: default; opacity: .5; } /* 对错用底色区分（2026-09-18 老板要求「对的变绿、错的变红」）： 常态就上浅底，题面右侧一眼能扫到；点过之后转实心，表示这一笔已经落库。 绿色 #1d9e6f / 红色 #d64541 直接复用项目既有的 .ok-msg / .error 语义色，不新造色。 */ .paper-q-actions button.ok { color: #1d9e6f; background: #eaf7f1; border-color: #b6e2cf; } .paper-q-actions button.ok:hover:not(:disabled) { border-color: #1d9e6f; color: #14785a; } .paper-q-actions button.wrong { color: #d64541; background: #fdeceb; border-color: #f2c0bd; } .paper-q-actions button.wrong:hover:not(:disabled) { border-color: #d64541; color: #b23330; } .paper-q-actions button.ok.is-done { background: #1d9e6f; border-color: #1d9e6f; color: #fff; font-weight: 600; opacity: 1; } .paper-q-actions button.wrong.is-done { background: #d64541; border-color: #d64541; color: #fff; font-weight: 600; opacity: 1; } .paper-q-content { font-size: 15px; line-height: 1.8; } .paper-q-content .inline-fig { max-width: 70%; } .paper-space { height: 70px; } .paper-header-row { display: flex; gap: 28px; font-size: 14px; margin: 6px 0 14px; } .paper-sheet.two-col { columns: 2; column-gap: 28px; } .paper-sheet.two-col .paper-q { break-inside: avoid; } .paper-answer { background: #fff; width: 210mm; max-width: 100%; margin: 0 auto 30px; padding: 24px 28px; border-radius: 10px; box-shadow: 0 2px 10px rgba(30,40,90,.06); } .paper-answer { page-break-before: always; break-before: page; } .paper-answer-row { font-size: 14px; line-height: 2; } .paper-solution { color: #4b3fe3; } .paper-step { display: block; line-height: 1.9; } /* 屏幕上「试卷 / 答案」按页签互斥显示； 打印时由 @media print 里的 display:block !important 覆盖，保证两页齐全 */ .paper-sheet.is-hidden, .paper-answer.is-hidden { display: none; } /* 屏幕专用控件的两条隐藏路径（需求 §3.6）：这块 DOM 屏幕与打印共用，而导出长图 又绕过 @media print 直接对 .paper-sheet 截图，所以两个都要管。 打印那条在文件末的 @media print 里；长图这条靠 exportPaperImage 截图前挂的 .capturing —— html2canvas 克隆节点时带上了类名与 CSS，规则在导出图里同样生效。 */ .paper-sheet.capturing .capture-hide { display: none !important; } /* PDF 生成专用：off-screen 渲染容器，html2canvas 可抓取、不出现在屏幕与打印 */ .pdf-target { position: absolute; left: -10000px; top: 0; width: 190mm; background: #fff; padding: 14mm; box-sizing: border-box; } .pdf-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 10px; } .pdf-header { font-size: 14px; margin-bottom: 16px; } .pdf-q { font-size: 15px; line-height: 1.8; } .pdf-q .inline-fig { max-width: 70%; } .pdf-space { display: block; } .pdf-answer-row { font-size: 14px; line-height: 2; } .pdf-solution { font-size: 13px; color: #4b3fe3; } .pdf-step { display: block; line-height: 1.9; } .pdf-solution.dim { color: #9aa2b0; } /* 批量入库确认弹窗 */ .modal-mask { position: fixed; inset: 0; background: rgba(20, 22, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; } .modal-mask.z-hi { z-index: 80; } /* 从录题浮层里弹出的子弹窗：与浮层同起点，不盖住导航 */ .modal-mask.below-hdr { top: var(--hdr-h); } .modal { background: #fff; border-radius: 14px; max-width: 440px; width: 100%; padding: 26px 28px; box-shadow: 0 12px 40px rgba(20, 22, 40, .2); } .modal h3 { font-size: 16px; margin-bottom: 10px; } .modal p { font-size: 14px; color: #4a5361; line-height: 1.7; } .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; } .modal-actions .plain { padding: 9px 20px; } /* 本卷来源设置弹窗表单 */ .modal-src .src-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .modal-src .src-form label { font-size: 13px; color: #6a7283; margin-top: 6px; } .modal-src .src-form select, .modal-src .src-form input { padding: 8px 10px; border: 1px solid #e3e7f0; border-radius: 8px; font-size: 14px; box-sizing: border-box; } /* 最近使用集合快捷按钮栏 */ .recent-src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .recent-src .hint { font-size: 12.5px; color: #98a1b3; } .recent-src button { border: 1px solid #e0e6f0; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: #4a5361; } .recent-src button:hover { border-color: #6b5ce7; color: #6b5ce7; } .recent-src button.cur { background: #f0ecff; border-color: #6b5ce7; color: #6b5ce7; font-weight: 600; } /* 场景标签：输入框 + 可收起建议面板 */ .src-tag { position: relative; } .src-tag input { width: 100%; padding-right: 34px; } .src-tag-arrow { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #98a1b3; font-size: 12px; cursor: pointer; padding: 4px; } .src-tag-arrow.open { transform: translateY(-50%) rotate(180deg); } .src-tag-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #e3e7f0; border-radius: 8px; z-index: 5; box-shadow: 0 6px 18px rgba(20,30,60,.12); max-height: 200px; overflow: auto; padding: 4px; } .src-tag-panel button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 10px; font-size: 13.5px; color: #4a5361; border-radius: 6px; cursor: pointer; } .src-tag-panel button:hover { background: #f3f0ff; color: #6b5ce7; } .src-tag-panel button.cur { background: #f0ecff; color: #6b5ce7; font-weight: 600; } .src-tag-panel .hint { display: block; padding: 8px 10px; color: #98a1b3; font-size: 13px; } .src-readonly { padding: 8px 10px; background: #f6f8fb; border: 1px dashed #d5dbe6; border-radius: 8px; color: #6a7283; font-size: 13.5px; margin-bottom: 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .src-readonly .src-cat { font-weight: 600; color: #2f54eb; } /* 危险操作按钮（删除分类等） */ button.danger { color: #d64545 !important; box-shadow: inset 0 0 0 1px #f2c9c9 !important; } /* 来源集合管理弹窗 */ .col-mgr-add { display: flex; gap: 10px; margin-bottom: 8px; } .col-mgr-add input { flex: 1; padding: 8px 10px; border: 1px solid #e3e7f0; border-radius: 8px; } .col-mgr-list { list-style: none; margin: 12px 0 4px; padding: 0; max-height: 260px; overflow: auto; } .col-mgr-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f0f2f6; } .col-mgr-list .col-name { font-weight: 600; flex: 0 0 auto; } .col-mgr-list .hint { flex: 1; } .col-mgr-list input { flex: 1; padding: 6px 8px; border: 1px solid #e3e7f0; border-radius: 6px; } /* 题库编辑表单：来源三级 */ .edit-src-row { display: flex; gap: 8px; margin-top: 6px; } .edit-src-row input { flex: 1; } /* 图例与辅助提示收敛 */ .legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 18px; } .legend li { font-size: 12.5px; color: #7c8698; display: flex; align-items: baseline; gap: 7px; } .legend li b { flex: none; font-size: 11.5px; font-weight: 600; color: #4b3fe3; background: #f0efff; border-radius: 5px; padding: 1px 7px; } .small-hint { font-size: 12.5px; color: #9aa2b0; margin-top: 6px; margin-bottom: 8px; } .req { } .req span { color: #d64541; } @media print { @page { size: A4; margin: 12mm; } body { background: #fff; } header, main, .detail-mask, .settings-mask { display: none !important; } .zoom-badge { display: none !important; } /* 屏幕专用控件（逐题回填按钮等）不进纸面（需求 §3.6） */ .capture-hide { display: none !important; } .paper-sheet, .paper-answer { display: block !important; box-shadow: none; width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; } .pdf-target { display: none !important; } } @media (max-width: 760px) { main { padding: 14px; } header { padding: 12px 14px; gap: 14px; flex-wrap: wrap; } } /* ===== 人工框题流程 ===== */ /* 新处理状态徽标 */ .flag.text_reading { background: #eef2ff; color: #5b6ee0; animation: pulse 1.6s ease-in-out infinite; } .flag.text_review { background: #f0e8ff; color: #7c4ddb; font-weight: 600; } .proc-badge.text_reading { background: #eef2ff; color: #5b6ee0; animation: pulse 1.6s ease-in-out infinite; } .proc-badge.text_review { background: #f0e8ff; color: #7c4ddb; } .q-list .q-row.is-text { box-shadow: inset 3px 0 0 #9b6fdb; background: #fbfaff; } .q-list .q-row.is-text:hover { background: #f5eefc; } /* 框题页骨架 */ .frame-page { max-width: 1500px; margin: 0 auto; } .frame-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .frame-tip { flex: 1; min-width: 200px; font-size: 13px; color: #6b7482; } .frame-grid { display: grid; grid-template-columns: minmax(320px, 62%) 1fr; gap: 18px; align-items: start; } /* 右侧只读步骤进度：题号标题 + 三段进度轨（随框选自动推进，不可点击） */ .frame-steps { margin-bottom: 12px; } .frame-steps .fs-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; } .frame-steps .fs-title { font-size: 15px; font-weight: 600; color: #1f2733; } .frame-steps .fs-sub { font-size: 12px; color: #9aa2b0; } .frame-steps .fs-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .frame-steps .fs { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border-radius: 9px; font-size: 12.5px; background: #f6f7fb; border: 1px solid #eaedf4; color: #9aa3b2; } .frame-steps .fs i { font-style: normal; font-size: 11px; opacity: .8; } .frame-steps .fs.done { background: #eaf8f1; border-color: #bfe8d8; color: #1d9e6f; } .frame-steps .fs.done i { opacity: 1; } .frame-steps .fs.cur { border-color: #4b3fe3; background: #4b3fe3; color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(75, 63, 227, .28); } .frame-steps .fs.cur i { opacity: 1; } .frame-steps .fs.adjust { border-color: #efaa17; background: #fef7e8; color: #9a6b00; font-weight: 600; padding: 9px 12px; font-size: 13px; } /* touch-action 必须同时加在 img 与所有交互框上：触摸设备上阻止滚动手势劫持 pointer 流 */ .frame-img-wrap { touch-action: none; user-select: none; -webkit-user-select: none; } .frame-img-wrap img { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; } .frame-q-box, .frame-b-box, .frame-c-box { touch-action: none; user-select: none; -webkit-user-select: none; } /* 已入库封存相：图面只读 —— 十字光标收回，框体与标签整体压暗，表示"这一批已经交上去了" */ .frame-img-wrap.sealed { cursor: default; } .frame-img-wrap.sealed img { cursor: default; } .frame-img-wrap.sealed .frame-q-box, .frame-img-wrap.sealed .frame-b-box, .frame-img-wrap.sealed .frame-c-box { opacity: .55; border-style: solid; } .frame-img-wrap.sealed .frame-done { opacity: .55; } /* a 整题框（蓝） */ .frame-q-box { position: absolute; border: 2px solid #3b82f6; background: rgba(59, 130, 246, .08); border-radius: 4px; z-index: 2; cursor: crosshair; } .frame-q-box.active { border-width: 3px; background: rgba(59, 130, 246, .14); z-index: 3; } .frame-q-box.done { border-style: solid; } .frame-label { position: absolute; top: -22px; left: 0; background: #3b82f6; color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 4px 4px 4px 0; cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; } /* 完成勾 */ .frame-done { position: absolute; top: -22px; right: 0; background: #1d9e6f; color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 4px 4px 0 4px; } .frame-q-box.done .frame-label { background: #1d9e6f; } /* b 题干框（绿） */ .frame-b-box { position: absolute; border: 2px dashed #1d9e6f; background: rgba(29, 158, 111, .12); border-radius: 4px; z-index: 4; cursor: move; } .frame-b-label { position: absolute; top: -20px; left: 0; background: #1d9e6f; color: #fff; font-size: 11px; padding: 0 7px; border-radius: 4px 4px 4px 0; } /* c 配图框（橙，复用 fig-box 视觉） */ .frame-c-box { position: absolute; border: 2px solid #ff7043; background: rgba(255, 112, 67, .12); border-radius: 4px; z-index: 4; cursor: move; } .frame-c-label { position: absolute; top: -20px; left: 0; background: #ff7043; color: #fff; font-size: 11px; padding: 0 7px; border-radius: 4px 4px 4px 0; } /* 绘制中的临时框 */ .frame-draw-box { position: absolute; border: 2px dashed #4b3fe3; background: rgba(75, 63, 227, .1); border-radius: 4px; z-index: 5; pointer-events: none; } /* 右侧题目清单 */ .frame-side-col { background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 5px rgba(35, 32, 90, .06); } .frame-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .frame-side-head .hint { margin: 0; font-weight: 600; color: #39414f; font-size: 13.5px; } .frame-q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .frame-q-list li { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #e6eaf2; border-radius: 10px; cursor: pointer; font-size: 13.5px; background: #fff; transition: border-color .14s, background .14s, box-shadow .14s; } .frame-q-list li:hover { border-color: #cdd4e4; } .frame-q-list li.done { background: #f6fbf9; border-color: #d7eee3; } .frame-q-list li.active { border-color: #4b3fe3; background: #f4f2ff; box-shadow: 0 2px 8px rgba(75, 63, 227, .14); } .frame-q-list li.active.done { border-color: #1d9e6f; background: #eef9f3; } .frame-q-list .q-no { flex: none; min-width: 30px; height: 24px; border-radius: 7px; background: #eef1f7; color: #5b6474; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .frame-q-list li.active .q-no { background: #4b3fe3; color: #fff; } .frame-q-list li.done .q-no { background: #d8f0e5; color: #14855d; } .frame-q-list li.active.done .q-no { background: #1d9e6f; color: #fff; } /* 已入库相：清单行降为只读回执 —— 去 hover 高亮、去手型，行内不再可点选/可删除 */ .frame-q-list li.saved { cursor: default; background: #f6fbf9; border-color: #dbeae3; } .frame-q-list li.saved:hover { border-color: #dbeae3; } .frame-q-list li.saved .q-no { background: #d8f0e5; color: #14855d; } .frame-q-list li.saved .read-sel { background: #f7f8fb; color: #8b93a3; } .frame-tags { display: flex; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; } .mini-tag { font-size: 11px; border-radius: 5px; padding: 1px 6px; white-space: nowrap; } .mini-tag.b { background: #e2f6ee; color: #1d9e6f; } .mini-tag.c { background: #fff0e8; color: #d95d2b; } .mini-tag.done { background: #1d9e6f; color: #fff; } .mini-tag.cur { background: #f0efff; color: #4b3fe3; } .mini-tag.pre { background: #eef3ff; color: #3b6fd4; } .mini-tag.pre.ok { background: #3b6fd4; color: #fff; } .read-sel { flex: 0 0 122px; min-width: 0; border: 1px solid #e3e7f0; border-radius: 7px; padding: 5px 6px; font-size: 12.5px; background: #fff; color: #39414f; } /* 清单行的删除按钮必须留在文档流内：原样式沿用图片框上的绝对定位，会飘出视口点不到 */ .frame-q-list .fig-del { position: static; flex: none; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; line-height: 1; } .frame-empty { text-align: center; padding: 20px 0; } .frame-actions { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f2f7; } .frame-actions .primary { flex: 1; } /* 题干确认弹窗 */ .modal-tc { max-width: 860px; } .tc-grid { display: grid; grid-template-columns: minmax(280px, 46%) 1fr; gap: 18px; align-items: stretch; } .tc-img img { max-width: 100%; border-radius: 8px; border: 1px solid #d8dee8; display: block; } .tc-orig-thumb { margin-top: 8px; max-height: 110px; object-fit: contain; } .tc-form label { font-size: 13px; color: #6a7283; margin-top: 6px; display: block; } .tc-form textarea { width: 100%; border: 1px solid #d8dee8; border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; } .tc-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .tc-left { display: flex; gap: 8px; } .tc-right { display: flex; gap: 10px; margin-left: auto; } /* 详情弹窗内的待核题干提示条 */ .tc-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f6f0ff; border: 1px solid #d9c8f5; color: #6b3fa0; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; } /* 入库完成卡：入库成功后原位接管底部按钮行（框题中的「← 返回 / 入库」整条不渲染）， 故 margin-top 与 .frame-actions 对齐，位置与视觉都落在同一处，不再"贴在按钮上方" */ .post-save-bar { background: #eefbf5; border: 1px solid #b7e6d0; border-radius: 12px; padding: 14px 16px; margin-top: 16px; animation: psb-in .18s ease-out; } @keyframes psb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .psb-title { font-size: 14.5px; font-weight: 600; color: #1d9e6f; } .psb-title b { font-size: 16px; } .psb-ok { margin-right: 4px; } .psb-hint { font-size: 12.5px; color: #6b7482; margin-top: 6px; line-height: 1.6; } .psb-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .psb-actions .primary { flex: 1; min-width: 120px; } .psb-actions .plain { flex: 0 0 auto; } @media (max-width: 560px) { .psb-actions { flex-direction: column; } .psb-actions .primary, .psb-actions .plain { flex: 1; width: 100%; } } @media (max-width: 900px) { .frame-grid { grid-template-columns: 1fr; } .tc-grid { grid-template-columns: 1fr; } } /* ===== 题目剖析 ===== */ /* 标题行：竖条+文字作为一个整体靠左（与其他标题一致），重新剖析按钮靠右。 若竖条仍挂在 .sec-title 上，space-between 会把「竖条/文字/按钮」三项拉开，文字被挤到中间 */ .ana-section .sec-title { display: flex; justify-content: space-between; align-items: center; } .ana-section .sec-title::before { display: none; } .ana-section .sec-title .st-txt { display: flex; align-items: center; gap: 8px; } .ana-section .sec-title .st-txt::before { content: ""; width: 3px; height: 14px; background: #6f6fff; border-radius: 2px; flex: none; } .ana-summary { display: flex; gap: 8px; padding: 8px 12px; margin-bottom: 8px; background: #f5f7fa; border-radius: 8px; align-items: baseline; } .ana-k { flex: none; font-size: 12px; color: #8a94a6; } .ana-v { font-size: 14px; font-weight: 600; } .ana-kp { padding: 8px 12px; border: 1px solid #e6eaf0; border-radius: 8px; margin-bottom: 6px; } .ana-kp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ana-role { font-size: 11px; padding: 1px 8px; border-radius: 10px; } .ana-role.core { background: #fff3e6; color: #d97706; } .ana-role.prereq { background: #eef4ff; color: #3b82f6; } .ana-line { font-size: 13px; color: #4b5563; margin: 2px 0; line-height: 1.55; } .ana-line .ana-k { margin-right: 6px; } .ana-line.pit { color: #b45309; } /* ===== 三层题组 ===== */ .plan-ana { padding: 8px 12px; background: #f5f7fa; border-radius: 8px; margin-bottom: 10px; } .plan-ana-line { font-size: 13px; color: #4b5563; line-height: 1.6; } .plan-ana-line .ana-k { margin-right: 6px; font-size: 12px; color: #8a94a6; } .tier-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; } .tier-hint { font-size: 12px; color: #8a94a6; } .tier-badge { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 600; } .tier-badge.basic { background: #e8f7ee; color: #15803d; } .tier-badge.variant { background: #eef4ff; color: #3b82f6; } .tier-badge.advanced { background: #fdf0f5; color: #c026d3; } .tier-badge.sm { font-size: 11px; padding: 1px 8px; } /* 衍生侧栏分组头：基础/变式/升阶徽章行 */ .dd-group-head { padding: 6px 0 2px; margin-top: 6px; } /* ---------- 知识地图（思维树双视图） ---------- */ .km-msg { color: #6b7482; font-size: 14px; } .km-msg.err { color: #d64541; } .km-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .km-top h2 { font-size: 19px; color: #26303e; margin-bottom: 6px; } .km-sub { font-size: 13px; color: #6b7482; line-height: 1.6; } .km-top-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .km-num { text-align: center; } .km-num b { display: block; font-size: 22px; color: #4b3fe3; line-height: 1.15; } .km-num b.red { color: #c0392b; } .km-num i { font-style: normal; font-size: 12px; color: #8a94a6; } .km-lit-sub { display: block; font-size: 11px; color: #a0a9b8; margin-top: 3px; white-space: nowrap; } .km-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; } .km-left { padding: 16px 14px; } .km-right { padding: 20px 22px; min-height: 260px; } .km-fam { margin-bottom: 16px; } .km-fam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 6px; border-bottom: 1px solid #eceff5; } .km-fam-name { font-size: 13.5px; font-weight: 600; color: #39414f; } .km-cnt { font-size: 12px; color: #8a94a6; white-space: nowrap; } .km-fam-exp { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #4b3fe3; background: #efedff; vertical-align: 1px; } .km-mod { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-top: 6px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; } .km-mod:hover { background: #f7f8fc; } .km-mod.sel { background: #f1efff; border-color: #c9c3ff; } .km-mod.unlit { opacity: .62; } .km-mod.unlit:hover { opacity: .9; background: #fbfbfd; } .km-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .km-dot.worst { background: #c0392b; } .km-dot.bad { background: #e8a33d; } .km-dot.gen { background: #1d9e6f; } .km-dot.unlit { background: #c3cad8; } .km-mod-name { font-size: 14px; color: #26303e; } .km-mod-meta { margin-left: auto; font-size: 12px; color: #8a94a6; white-space: nowrap; } .km-crumb { font-size: 12.5px; color: #8a94a6; margin-bottom: 8px; } .km-crumb b { color: #4b3fe3; } .km-sep { margin: 0 4px; color: #c3cad8; } .km-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .km-title-row h3 { font-size: 18px; color: #26303e; } .km-flag { font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; } .km-flag.unmastered { background: #fdeceb; color: #c0392b; } .km-flag.consolidating { background: #fdf5e6; color: #b7791f; } .km-flag.mastered { background: #e8f7ee; color: #15803d; } .km-flag.idle { background: #f0f2f7; color: #8a94a6; } .km-def { font-size: 14px; color: #4b5563; line-height: 1.7; } .km-block { margin-top: 18px; } .km-block-title { font-size: 13px; color: #8a94a6; margin-bottom: 8px; } /* 右栏第一段「他卡在这」：点级 + 模型名 + 一句人话结论 + 定义 */ .km-stuck { margin-top: 4px; } .km-stuck .km-title-row { margin-bottom: 8px; } .km-verdict { font-size: 14.5px; line-height: 1.7; color: #26303e; background: #fdf7ef; border-left: 3px solid #e8a33d; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } /* 「挂在这里的题」收进 details，默认折叠 */ .km-details > summary { font-size: 13px; color: #8a94a6; cursor: pointer; list-style: none; padding: 2px 0; } .km-details > summary::-webkit-details-marker { display: none; } .km-details > summary::before { content: "▸ "; color: #c3cad8; } .km-details[open] > summary::before { content: "▾ "; } .km-details > summary:hover { color: #4b3fe3; } .km-details .km-qs { margin-top: 10px; } /* 右栏底部主行动 */ .km-actions { margin-top: 22px; padding-top: 16px; border-top: 1px solid #eceff5; } .km-actions .primary { width: 100%; } .km-qs { display: flex; flex-direction: column; gap: 6px; } .km-q { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; background: #f7f8fc; border: 1px solid #eceff5; border-radius: 9px; padding: 8px 10px; cursor: pointer; font-family: inherit; font-size: 13px; } .km-q:hover { border-color: #c9c3ff; background: #f1efff; } .km-q-tag { flex: 0 0 auto; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; } .km-q-tag.original { background: #fdeceb; color: #c0392b; } .km-q-tag.derived { background: #eef4ff; color: #3b82f6; } .km-q-txt { color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .km-ex { border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #f7f8fc; border-left: 3px solid #c9c3ff; } .km-ex-tag { font-size: 11.5px; color: #8a94a6; display: block; margin-bottom: 4px; } .km-ex-q { font-size: 14px; color: #26303e; line-height: 1.6; } .km-ex-a { font-size: 13px; color: #6b7482; line-height: 1.6; margin-top: 4px; } .km-chips { display: flex; flex-wrap: wrap; gap: 8px; } .km-chip { font-family: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; background: #f0f2f7; color: #98a1b0; } .km-chip:hover { border-color: #c9c3ff; color: #4b3fe3; } .km-chip.on { background: #e8f7ee; color: #15803d; } .km-chip.on:hover { border-color: #b5e3cc; } .km-note { font-size: 12.5px; color: #8a94a6; line-height: 1.7; margin-top: 10px; } .km-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #6b7482; } .km-lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .km-lg.lit { background: #1d9e6f; } .km-lg.unlit { background: #dfe3ec; } /* 全貌版两分区（走过的 / 还没碰过的）—— 只报「走过几个」，不做分母、不打分 */ .km-part { margin-bottom: 26px; } .km-part-head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #26303e; padding-bottom: 8px; border-bottom: 2px solid #eceff5; margin-bottom: 8px; } .km-part-head .km-cnt { font-size: 12.5px; font-weight: 600; color: #4b3fe3; background: #efedff; border-radius: 999px; padding: 2px 10px; } .km-part-sub { font-size: 12.5px; color: #8a94a6; margin-bottom: 14px; } .km-walk { display: flex; flex-direction: column; gap: 8px; } .km-walk-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit; font-size: 14px; cursor: pointer; background: #f7f8fc; border: 1px solid #eceff5; border-radius: 10px; padding: 10px 12px; } .km-walk-row:hover { border-color: #c9c3ff; background: #f1efff; } .km-walk-row .km-dot { margin-right: 2px; } .km-walk-name { color: #26303e; } .km-walk-fam { font-size: 12px; color: #8a94a6; } .km-walk-meta { margin-left: auto; display: flex; gap: 10px; font-size: 12px; color: #8a94a6; white-space: nowrap; } /* 分段控件（视图切换 / 展开级别） */ .km-seg { display: inline-flex; background: #f0f2f7; border-radius: 10px; padding: 3px; gap: 2px; } .km-seg button { font-family: inherit; font-size: 13px; padding: 6px 14px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: #6b7482; } .km-seg button:hover { color: #39414f; } .km-seg button.on { background: #fff; color: #4b3fe3; font-weight: 600; box-shadow: 0 1px 3px rgba(24, 28, 40, .12); } .km-mind-ctrl { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; } .km-mind-ctrl-label { font-size: 13px; color: #8a94a6; } /* 思维导图画布 */ .km-mind { overflow-x: auto; margin-top: 4px; padding-bottom: 4px; } /* 不拉伸：宽高按布局算出的像素走；容器更宽时整体居中 */ .km-mind svg { display: block; margin: 0 auto; max-width: none; flex: none; } .km-mind-edge { fill: none; stroke: #d3d9e6; stroke-width: 1.6; } .km-mind-node { cursor: pointer; } .km-mind-node rect { fill: #f0f2f7; stroke: #d8dde8; stroke-width: 1; } .km-mind-node:hover rect { stroke: #b9bfd0; } .km-mind-node.root rect { fill: #4b3fe3; stroke: #4b3fe3; } .km-mind-node.domain rect { fill: #efeefd; stroke: #c9c3ff; } .km-mind-node.domain:hover rect { stroke: #a99fff; } .km-mind-node.family rect { fill: #f7f9fc; } .km-mind-node.model rect { fill: #ffffff; } .km-mind-node.model.lit rect { fill: #e8f7ee; stroke: #b5e3cc; } .km-mind-label { font-size: 13px; fill: #26303e; pointer-events: none; } .km-mind-node.root .km-mind-label { fill: #ffffff; font-weight: 700; } .km-mind-node.domain .km-mind-label { font-weight: 600; fill: #4b3fe3; } .km-mind-fold { font-size: 14px; font-weight: 700; fill: #98a1b0; pointer-events: none; } .km-mind-fold.off { fill: #c9cfdd; } .km-mind-badge { fill: #c0392b; } .km-mind-badge-txt { font-size: 10px; font-weight: 700; fill: #fff; } .km-domain { margin-bottom: 22px; } .km-domain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; color: #26303e; border-bottom: 2px solid #eceff5; padding-bottom: 6px; margin-bottom: 12px; } .km-ov-fam { margin-bottom: 12px; } .km-ov-fam-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .km-ov-fam-head b { font-size: 13.5px; color: #39414f; } .km-ov-content { font-size: 12px; color: #8a94a6; } .km-ov-mods { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; } .km-ov-mod { font-family: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer; background: #f0f2f7; color: #98a1b0; border: 1px solid transparent; } .km-ov-mod:hover { border-color: #c9c3ff; } .km-ov-mod.lit { background: #e8f7ee; color: #15803d; font-weight: 600; } .km-overlay { position: fixed; inset: 0; background: rgba(24, 28, 40, .45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; } .km-overlay-card { position: relative; background: #fff; border-radius: 16px; padding: 24px 26px; width: 100%; max-width: 620px; max-height: 80vh; overflow-y: auto; } .km-overlay-x { position: absolute; top: 10px; right: 14px; border: none; background: transparent; font-size: 22px; line-height: 1; color: #98a1b0; cursor: pointer; } /* ---------- 账号（多账号改造 · 段三） ---------- */ /* 设置弹层最顶部那张卡：回答「我是谁」，视觉上比下面的密钥卡更轻， 靠底色区分而不是靠边框加粗 —— 免得被当成又一个配置项 */ .set-card-acct { background: #f7f7ff; border-color: #e2e0fb; } .set-acct-line { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .set-acct-line .set-acct-name { flex: 1; min-width: 0; } .set-acct-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; color: #22242e; line-height: 1.4; } .set-acct-id { font-size: 12px; color: #8b95a5; font-weight: 400; } /* 账号管理列表：与密钥列表同一套「两行网格」思路， 第一行「是谁 + 什么身份」，第二行「最近登录」，右侧放操作 */ .set-acct-list { list-style: none; margin: 10px 0 0; padding: 0; } .set-acct-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f1f7; font-size: 13px; } .set-acct-list li:last-child { border-bottom: none; } /* 停用的账号整行压暗：一眼能看出"这个号现在进不来" */ .set-acct-list li.is-off { opacity: .55; } .set-acct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .set-acct-sub { font-size: 12px; color: #8b95a5; } .set-acct-ops { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .set-acct-pwd { width: 170px; font-size: 13px; padding: 5px 9px; } /* 新建账号：三个输入框 + 创建按钮一行排开。 用户名/初始密码/显示名 都是短文本，各占一份宽度即可 */ .set-acct-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .set-acct-new input { flex: 1 1 150px; min-width: 120px; font-size: 13px; padding: 7px 10px; } .set-acct-new button { flex: 0 0 auto; } /* 改密码默认收起：平时用不到，摊开会把下面的密钥配置挤到屏幕外 */ .set-pwd-fold { margin-top: 10px; border-top: 1px dashed #e6e8f2; padding-top: 4px; } .set-pwd-fold summary { font-size: 13px; color: #4b3fe3; cursor: pointer; padding: 8px 0 2px; list-style: none; } .set-pwd-fold summary::-webkit-details-marker { display: none; } .set-pwd-fold summary::before { content: "▸ "; font-size: 11px; } .set-pwd-fold[open] summary::before { content: "▾ "; } .set-pwd-fold .set-field { margin-top: 10px; } .set-pwd-fold .set-field-label { font-weight: 500; font-size: 12.5px; color: #6b7482; } /* ---------- 登录页 ---------- */ /* 独立页面，不套用主界面的 header/main 布局。 居中一张卡，背景用与主界面同一族但更淡的渐变，观感上是同一个软件 */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(150deg, #eef0fb, #f7f8fc 45%, #eef1f9); } .login-wrap { width: 100%; max-width: 380px; } .login-card { background: #fff; border-radius: 16px; padding: 30px 28px 26px; box-shadow: 0 8px 30px rgba(35, 32, 90, .12); display: flex; flex-direction: column; } .login-title { font-size: 21px; font-weight: 600; color: #22242e; text-align: center; margin: 0 0 6px; letter-spacing: 1px; } .login-sub { font-size: 13px; color: #6b7482; text-align: center; line-height: 1.7; margin: 0 0 18px; } .login-label { display: block; font-size: 13px; color: #6b7482; margin: 0 0 6px; } .login-card input { width: 100%; margin-bottom: 14px; } .login-error { font-size: 13px; color: #d64541; background: #fdecec; border-radius: 8px; padding: 9px 11px; margin: 0 0 14px; line-height: 1.6; } .login-submit { width: 100%; margin-top: 2px; } /* 「换一个账号登录」是次要动作：文字按钮，别跟主按钮抢注意力 */ .login-back { width: 100%; margin-top: 10px; border: none; background: transparent; color: #8b95a5; font-size: 13px; cursor: pointer; padding: 6px; } .login-back:hover:not(:disabled) { color: #4b3fe3; } .login-back:disabled { opacity: .5; cursor: default; } @media (max-width: 900px) { .km-grid { grid-template-columns: 1fr; } .km-overlay { padding: 12px; } .km-overlay-card { max-height: 88vh; } /* 窄屏下账号行的操作按钮换行到下一行，别把名字挤成两字一断 */ .set-acct-list li { flex-wrap: wrap; } .set-acct-ops { width: 100%; justify-content: flex-start; padding-left: 2px; } .set-acct-new input { flex: 1 1 100%; } }