量标智学
量标智学双端 UI 设计规范
将教师工作台和学生学习首页已实现的视觉语言整理为可查看、可对照的开发参考。共同规则与页面特例分开标注，未在两页出现的组件不作推定。
色彩系统
蓝青色页面环境、白色工作区、紫色操作焦点
#172b3a共同 · --ink#594cff共同 · --blue#4e43e8共同 · 主按钮 hover#536778学生 · --body#607283共同 · --muted#e1e8ed共同 · 内容分界#ffffff共同 · 主工作区#f8fafc共同 · 背景底层语义浅面
#f0eeff选中 / 紫色统计#e8f7f2绿色统计#e9f4fc蓝色统计#fcf5e7橙 / 琥珀统计#fceeee学生概览 / 紧急状态#f5f7f8仅教师工作台顶部环境色
#bdeafa → #c8e9fa → #bfdcf9 → #c5e3fa页面背景在两页使用相同的四层渐变，尺寸为 100% 1120px 且不重复。该处理只用于页面背景，不是按钮或卡片的通用样式。
字体与层级
同一字体栈，区分入口、内容标题、卡片与辅助信息
Inter, "PingFang SC", "Microsoft YaHei", sans-serif。两页最终正文基线均为 16px / 1.55。32px / 1.3移动端 24px28px / 1.3移动端 23px23px / 1.35移动端 20px31px教师 /1.15，学生 /1.218px移动端 16px14px常用说明字号12px时间 / 备注 / 标签19px移动端 17px形状与间距
以白色工作区承载章节，以浅色块或白色条目承载重复信息
主工作区 · 22px
白底、1px #e1e8ed 边线、极轻阴影
统计项 · 13px
浅色填充，无边框和卡片阴影
主按钮 · 8px
纯色品牌紫，无静态阴影
已实现的尺寸
1580px双端水平居中；桌面左右 32px，≤1100px 为 23px，≤700px 为 14px教师 28/32/34学生 29/32/36；≤1100px 均为 24px#edf0f2章节之间使用细线和上下间距，不叠加浮动卡12px教师概况/业务入口与学生概览的桌面网格间距13px radius16px 内边距；白底、浅边线14px radius19px 22px 内边距；#f2f0ff 浅紫底这些是两页的实际组件值。源码没有建立完整的 4/8px 间距变量阶梯，后续页面不要将它描述为既有 token 系统。
基础组件
对照已实现的按钮、选择器、分段切换与状态
radius 8pxborder #d9e1e8border #cbdde7 · radius 10px外框 10px · 选中项 7px学生学习搜索
今天想学什么？
从一个问题出发，开启你的学习路径
760px、桌面最小高度 64px 与聚焦边框。推荐项点击后填入输入框；此文档中的“开始学习”不提交任务。页面模式
展示两端的指标、入口和任务卡如何组合
教师端 · 教学概况
此处仅演示颜色与数字层级，说明文字经过压缩；原教师页面的指标曲线已被隐藏。
教师端 · 业务入口
学情管理
全班知识点掌握透视、章节达标率与学生卡点画像。
实训学情看板
标准文本编写实操、评分分布、高频错误诊断与返修跟进。
教学任务包
沉淀案例、课件、视频、课堂活动、实训与评价配置。
入口使用白底、浅边框、13px 圆角。源码中的旧图标样式没有出现在当前业务入口 DOM 中。
学生端 · 学习任务
国家标准1.1范围章节编写方法：掌握范围章节的写作要点
暂无详细描述信息。
任务卡最大列宽 500px，浅紫底、14px 圆角；真实页面还包含元信息标签、时间和操作按钮。
响应式规则
按源码最终层叠结果记录列数与布局变化
| 视口 | 教师工作台 | 学生学习首页 |
|---|---|---|
| 桌面 | 概况 5 列，业务入口 6 列；欢迎区三组并排 | 概览 5 列；任务列宽上限 500px |
| ≤1100px | 概况与业务入口均 3 列；主面板内边距 24px | 概览 3 列；主面板内边距 24px |
| ≤900px | 欢迎区换行，筛选组可水平滚动 | 无 900px 专用断点 |
| ≤700px | 概况与业务入口 2 列；顶部账号只保留头像 | 概览 2 列；搜索框最小高度 55px，推荐项换行 |
| ≤430px | 业务入口 1 列；概况仍为 2 列 | 无 430px 专用布局 |
| 极窄屏 | ≤365px 的早期一列概况声明被后续两列规则覆盖 | ≤380px 隐藏搜索图标与副标题两侧短线 |
教师概况块最小高度为 134px，业务入口为 210px；≤1450px 业务入口为 220px，≤430px 为 178px。学生概览项最小高度为 126px，≤700px 为 122px；任务卡随内容增长。卡片最终高度仍由实际内容决定。
交互与状态
从两页已实现的行为中提取，不扩展为未出现的流程
scroll-padding-top: 80px滚动超过 12px 后加浅阴影role="tablist" 与 aria-selected；学生页还将标签关联到对应面板。aria-invalid；非空提交只触发本页 toast。prefers-reduced-motion: reduce禁用平滑滚动与过渡。开发落地边界
复用已实现的规则，同时保留新组件的设计空间
- 01先复用共同的色彩、字体、顶栏和白色工作区，再选择教师或学生端特例。欢迎区与搜索入口不是所有页面都需要的模块。
- 02优先以标题、细分隔线和间距组织内容；重复的指标与业务项才使用浅色统计块或白色条目卡。
- 03主按钮、次按钮、选择器、分段切换和状态标签沿用本页所示的已实现状态。表格、分页、图表和抽屉没有从这两页确立统一规则。
- 04新页面落地时检查最终 CSS 层叠、不同断点、焦点状态与缩减动态效果。两份源文件含多轮覆盖声明，不应只复制其中一段。
.tile-icon、.metric-icon、.spark 不是当前业务入口或指标的可见展示规则。源码定位：教师端共享视觉覆盖约在第 60–176 行、结构在第 199–239 行；学生端共享视觉覆盖约在第 42–176 行、结构在第 192–221 行。具体取值需按 CSS 权重、声明顺序和视口宽度判断。
验证边界：本规范基于两份 HTML 的源码与最终 CSS 声明整理。页面中的示例是可视化参考，不代表已完成浏览器计算样式或截图验收；若运行环境加入外部 CSS、缩放或不同字体，应重新核对。