|
|
/* =============================================================
|
|
|
* 教师端 · 极简 SaaS 教育风 统一适配
|
|
|
* 作用范围：
|
|
|
* 1) 页面内 scoped 暗色样式 -> 用 #app .teacherLayout 前缀提权覆盖
|
|
|
* 2) teleport 到 body 的弹层 -> 用 body.teacher-light-mode 覆盖
|
|
|
* 色板：教育蓝单主色 + 中性灰
|
|
|
* 主按钮 outline：透明底 + #3b82f6 蓝描边（hover 蓝色半透明）/ 浅底 #eff6ff
|
|
|
* 主文字 #1f2937 / 次文字 #6b7280 / 辅助 #9ca3af
|
|
|
* 卡片 #ffffff / 描边 #e5e7eb / 行 hover #f9fafb
|
|
|
* 控件统一：按钮、输入框 36px 高 · 8px 圆角 · 12px 字号
|
|
|
* ============================================================= */
|
|
|
|
|
|
/* ---------- 1. 页面根容器与基础文字 ---------- */
|
|
|
#app .teacherLayout {
|
|
|
.teacher-page,
|
|
|
.student-page,
|
|
|
.class-page,
|
|
|
.training-task-page,
|
|
|
.grade-center,
|
|
|
.task,
|
|
|
.default-task-page,
|
|
|
.school-admin-workbench,
|
|
|
.task-review {
|
|
|
color: #1f2937;
|
|
|
}
|
|
|
|
|
|
// 通用文字层级：白色文字在亮色背景下不可见，统一改深色
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5 {
|
|
|
color: #1f2937;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
p,
|
|
|
span,
|
|
|
div,
|
|
|
li,
|
|
|
label {
|
|
|
// 仅覆盖原本偏白的文字，避免误伤 Element 组件内部状态色
|
|
|
}
|
|
|
|
|
|
/* ---------- 2. 页面头部卡片（两种变体统一） ---------- */
|
|
|
.page-header {
|
|
|
background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%) !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.18) !important;
|
|
|
box-shadow:
|
|
|
0 6px 20px rgba(30, 60, 100, 0.08),
|
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
|
|
|
|
|
|
&::before {
|
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.45), transparent) !important;
|
|
|
}
|
|
|
|
|
|
.header-content h1,
|
|
|
.header-text .page-title,
|
|
|
.header-text .header-title {
|
|
|
color: #1f2937 !important;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.header-content p,
|
|
|
.header-text .page-subtitle,
|
|
|
.header-text .header-subtitle {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
// 纯青色图标块：保留蓝色渐变，降低发光
|
|
|
.header-icon {
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
// 玻璃质感图标框
|
|
|
.header-icon-wrap {
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.3) !important;
|
|
|
|
|
|
.header-icon-svg {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.decoration-dot {
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 成绩中心 hero 大卡
|
|
|
.admin-hero {
|
|
|
background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.22) !important;
|
|
|
box-shadow: 0 8px 24px rgba(30, 60, 100, 0.08) !important;
|
|
|
|
|
|
&::after {
|
|
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent 38%), repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0 1px, transparent 1px 64px) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.admin-badge {
|
|
|
color: #2563eb !important;
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.4) !important;
|
|
|
}
|
|
|
|
|
|
.admin-title {
|
|
|
color: #1f2937 !important;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.admin-subtitle {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- 3. 搜索栏 / 工具条 ---------- */
|
|
|
.query-bar,
|
|
|
.task-toolbar,
|
|
|
.toolbar,
|
|
|
.filter-section,
|
|
|
.df {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.15) !important;
|
|
|
box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06) !important;
|
|
|
}
|
|
|
|
|
|
.query-item .query-label,
|
|
|
.class-picker,
|
|
|
.toolbar .query-label,
|
|
|
.df span,
|
|
|
.online span {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.task-tip {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- 4. 卡片容器 ---------- */
|
|
|
.card,
|
|
|
.admin-panel,
|
|
|
.score-card,
|
|
|
.stats-card,
|
|
|
.trend-card {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.15) !important;
|
|
|
box-shadow: 0 6px 20px rgba(30, 60, 100, 0.06) !important;
|
|
|
backdrop-filter: none;
|
|
|
}
|
|
|
|
|
|
.admin-panel-title {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.admin-panel-subtitle {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
// 卡片内部标题/正文
|
|
|
.card-header,
|
|
|
.card-body,
|
|
|
.card-footer {
|
|
|
color: #1f2937;
|
|
|
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
.card-title {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// app-container 全局蓝色发光阴影柔化
|
|
|
.app-container {
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0 6px 20px rgba(30, 60, 100, 0.08) !important;
|
|
|
min-height: auto !important;
|
|
|
padding: 18px 20px 28px !important;
|
|
|
}
|
|
|
|
|
|
// 滚动容器统一底部留白，避免表格/列表滚到底部紧贴边缘
|
|
|
.teacher-main {
|
|
|
padding-bottom: 32px !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- 5. 表格 ---------- */
|
|
|
.el-table {
|
|
|
background-color: #ffffff !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.15) !important;
|
|
|
box-shadow: 0 6px 20px rgba(30, 60, 100, 0.06) !important;
|
|
|
color: #1f2937;
|
|
|
|
|
|
// 表头：浅蓝渐变 + 深蓝字（!important 同时覆盖页面 :header-cell-style 内联样式）
|
|
|
.el-table__header-wrapper th.el-table__cell,
|
|
|
.el-table__fixed-header-wrapper th.el-table__cell {
|
|
|
background: linear-gradient(135deg, #eff6ff 0%, #eff6ff 100%) !important;
|
|
|
background-color: #e3effb !important;
|
|
|
color: #1f2937 !important;
|
|
|
font-weight: 600 !important;
|
|
|
text-shadow: none !important;
|
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
|
|
|
}
|
|
|
|
|
|
// 单元格
|
|
|
.el-table__cell,
|
|
|
td.el-table__cell .cell {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
tr,
|
|
|
td.el-table__cell {
|
|
|
background-color: #ffffff !important;
|
|
|
border-bottom: 1px solid #edf2f7 !important;
|
|
|
}
|
|
|
|
|
|
// 紧凑化：正文行单元格 padding 从 Element 默认 ~12px 减到 6px 左右，行高 ~40px
|
|
|
td.el-table__cell {
|
|
|
padding-top: 6px !important;
|
|
|
padding-bottom: 6px !important;
|
|
|
|
|
|
.cell {
|
|
|
line-height: 1.5 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 斑马纹（若开启）
|
|
|
.el-table__row--striped td.el-table__cell {
|
|
|
background-color: #f8fbff !important;
|
|
|
}
|
|
|
|
|
|
// hover 行
|
|
|
.el-table__body tr:hover > td.el-table__cell {
|
|
|
background-color: #eff6ff !important;
|
|
|
}
|
|
|
|
|
|
// 空数据/汇总行文字
|
|
|
.el-table__empty-text,
|
|
|
.el-table__summary .cell {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
// 表尾合计
|
|
|
tfoot td.el-table__cell {
|
|
|
background-color: #f9fafb !important;
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 排序/筛选图标
|
|
|
.caret-wrapper {
|
|
|
color: #9ca3af;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- 6. 按钮（统一规范：36px 高 · 8px 圆角 · 12px 字号）----------
|
|
|
* 实色主按钮（蓝）只承载主操作；默认按钮白底灰边；文字按钮蓝/红用于表格行内
|
|
|
*/
|
|
|
.el-button {
|
|
|
height: 36px;
|
|
|
border-radius: 8px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 600;
|
|
|
box-shadow: none !important;
|
|
|
transform: none !important;
|
|
|
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
|
|
|
|
|
|
// 默认按钮（取消等次要操作）：白底灰边深字，hover 边变深 + 微浮
|
|
|
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(.is-link) {
|
|
|
background-color: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #f9fafb !important;
|
|
|
border-color: #9ca3af !important;
|
|
|
color: #1f2937 !important;
|
|
|
box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08) !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
}
|
|
|
|
|
|
// 按下：回落 + 更暗底
|
|
|
&:active {
|
|
|
background-color: #f3f4f6 !important;
|
|
|
border-color: #9ca3af !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: translateY(0) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 主按钮：透明底 + 蓝描边 + 蓝字（outline 风格）
|
|
|
&.el-button--primary {
|
|
|
background-color: transparent !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
|
|
|
// 移入：蓝色半透明底，描边/文字保持蓝
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
// 按下：蓝色半透明再加深
|
|
|
&:active {
|
|
|
background-color: rgba(59, 130, 246, 0.18) !important;
|
|
|
border-color: #2563eb !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
// plain 朴素态与默认 outline 风格保持一致
|
|
|
&.is-plain {
|
|
|
background-color: transparent !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: rgba(59, 130, 246, 0.18) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 成功（语义状态色）
|
|
|
&.el-button--success {
|
|
|
background-color: #2ba471 !important;
|
|
|
border-color: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #3cbb85 !important;
|
|
|
border-color: #3cbb85 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 4px 14px rgba(43, 164, 113, 0.3) !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: #1f8559 !important;
|
|
|
border-color: #1f8559 !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: translateY(0) !important;
|
|
|
}
|
|
|
|
|
|
&.is-plain {
|
|
|
background-color: #e6f6ee !important;
|
|
|
border-color: #9fd8bd !important;
|
|
|
color: #1e7a4f !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 警告（语义状态色）
|
|
|
&.el-button--warning {
|
|
|
background-color: #e8a33d !important;
|
|
|
border-color: #e8a33d !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #f2b45a !important;
|
|
|
border-color: #f2b45a !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 4px 14px rgba(232, 163, 61, 0.3) !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: #c9841f !important;
|
|
|
border-color: #c9841f !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: translateY(0) !important;
|
|
|
}
|
|
|
|
|
|
&.is-plain {
|
|
|
background-color: #fdf3e2 !important;
|
|
|
border-color: #f3d3a0 !important;
|
|
|
color: #b36a14 !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #e8a33d !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 危险（语义状态色）
|
|
|
&.el-button--danger {
|
|
|
background-color: #ef4444 !important;
|
|
|
border-color: #ef4444 !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #dc2626 !important;
|
|
|
border-color: #dc2626 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: #b91c1c !important;
|
|
|
border-color: #b91c1c !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: translateY(0) !important;
|
|
|
}
|
|
|
|
|
|
&.is-plain {
|
|
|
background-color: #fef2f2 !important;
|
|
|
border-color: #fecaca !important;
|
|
|
color: #dc2626 !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #ef4444 !important;
|
|
|
border-color: #ef4444 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// text/link 文字按钮（表格操作列）：透明底，primary 蓝、danger 红
|
|
|
&.is-text,
|
|
|
&.is-link {
|
|
|
height: auto;
|
|
|
background: transparent !important;
|
|
|
border-color: transparent !important;
|
|
|
|
|
|
&.el-button--primary {
|
|
|
color: #3b82f6 !important;
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #2563eb !important;
|
|
|
background: rgba(59, 130, 246, 0.08) !important;
|
|
|
}
|
|
|
}
|
|
|
&.el-button--danger {
|
|
|
color: #ef4444 !important;
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #dc2626 !important;
|
|
|
background: rgba(239, 68, 68, 0.08) !important;
|
|
|
}
|
|
|
}
|
|
|
&.el-button--warning {
|
|
|
color: #d97706 !important;
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #b45309 !important;
|
|
|
background: rgba(217, 119, 6, 0.08) !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 禁用
|
|
|
&.is-disabled,
|
|
|
&.is-disabled:hover,
|
|
|
&.is-disabled:focus {
|
|
|
opacity: 0.5;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- 7. 表单与输入组件（统一规范：36px 高 · 8px 圆角 · 12px 字号）----------
|
|
|
* input/select/date 的 wrapper 统一外观：白底灰边，hover 中性变深，聚焦教育蓝光晕
|
|
|
*/
|
|
|
.el-form-item__label {
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
// EP 中 input 与 select 各自承载边框的 wrapper 必须同时覆盖
|
|
|
.el-input__wrapper,
|
|
|
.el-select__wrapper {
|
|
|
height: 36px !important;
|
|
|
min-height: 36px !important;
|
|
|
background-color: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: none !important;
|
|
|
border-radius: 8px !important;
|
|
|
padding: 0 11px !important;
|
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #d1d5db !important;
|
|
|
}
|
|
|
|
|
|
&.is-focus,
|
|
|
&.is-focused {
|
|
|
border-color: #3b82f6 !important;
|
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-input__inner {
|
|
|
height: 34px !important;
|
|
|
line-height: 34px !important;
|
|
|
font-size: 12px !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// select 显示值/占位值（EP 用 -webkit-text-fill-color，需显式覆盖）
|
|
|
.el-select__placeholder,
|
|
|
.el-select__selected-item {
|
|
|
font-size: 12px !important;
|
|
|
color: #1f2937 !important;
|
|
|
-webkit-text-fill-color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.el-select__placeholder.is-transparent {
|
|
|
color: #9ca3af !important;
|
|
|
-webkit-text-fill-color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
.el-select__caret {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
.el-input__prefix,
|
|
|
.el-input__suffix {
|
|
|
color: #9ca3af;
|
|
|
}
|
|
|
|
|
|
// 多行文本：与单行同一描边语言
|
|
|
.el-textarea__inner {
|
|
|
background-color: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 12px !important;
|
|
|
border-radius: 8px !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
&:hover { border-color: #d1d5db !important; }
|
|
|
|
|
|
&:focus {
|
|
|
border-color: #3b82f6 !important;
|
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 禁用态：浅灰底 + 灰边 + 浅字
|
|
|
.el-select .el-input.is-disabled .el-input__wrapper,
|
|
|
.el-input.is-disabled .el-input__wrapper,
|
|
|
.el-select.is-disabled .el-select__wrapper {
|
|
|
background-color: #f9fafb !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
|
|
|
.el-input__inner {
|
|
|
color: #9ca3af !important;
|
|
|
-webkit-text-fill-color: #9ca3af;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 单选/复选文字
|
|
|
.el-radio,
|
|
|
.el-checkbox {
|
|
|
color: #1f2937;
|
|
|
font-size: 12px;
|
|
|
|
|
|
&.is-disabled {
|
|
|
color: #9ca3af;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-radio__label,
|
|
|
.el-checkbox__label {
|
|
|
color: #1f2937;
|
|
|
}
|
|
|
|
|
|
// 表单校验错误
|
|
|
.el-form-item__error {
|
|
|
color: #ef4444;
|
|
|
}
|
|
|
|
|
|
// 字数统计
|
|
|
.el-input__count,
|
|
|
.el-input__count-inner {
|
|
|
color: #9ca3af !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- 8. 分页（覆盖全局 index.scss 强制暗色） ---------- */
|
|
|
.el-pagination,
|
|
|
.pager .el-pagination {
|
|
|
--el-pagination-bg-color: transparent;
|
|
|
--el-pagination-button-bg-color: #ffffff;
|
|
|
--el-pagination-hover-color: #3b82f6;
|
|
|
color: #1f2937;
|
|
|
font-weight: 500;
|
|
|
|
|
|
.el-pagination__total,
|
|
|
.el-pagination__jump {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
button,
|
|
|
.el-pager li {
|
|
|
background-color: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 6px;
|
|
|
font-weight: 500;
|
|
|
|
|
|
&:hover {
|
|
|
color: #3b82f6 !important;
|
|
|
border-color: #3b82f6;
|
|
|
background-color: #eff6ff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-pager li.is-active {
|
|
|
background-color: #3b82f6 !important;
|
|
|
color: #ffffff !important;
|
|
|
border-color: #3b82f6;
|
|
|
}
|
|
|
|
|
|
.btn-prev,
|
|
|
.btn-next {
|
|
|
background-color: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&:disabled,
|
|
|
&.is-disabled {
|
|
|
background-color: #f9fafb !important;
|
|
|
color: #b0c0d0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-select .el-input__wrapper {
|
|
|
background-color: #ffffff !important;
|
|
|
box-shadow: 0 0 0 1px #e5e7eb inset !important;
|
|
|
|
|
|
.el-input__inner {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- 9. 其他组件 ---------- */
|
|
|
// 标签 el-tag：浅底标签文字加深，保证在白底上可读
|
|
|
.el-tag {
|
|
|
&.el-tag--primary {
|
|
|
&.is-plain,
|
|
|
&.is-light {
|
|
|
color: #2563eb !important;
|
|
|
background-color: #eff6ff !important;
|
|
|
border-color: #9cc8ef !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-tag--success {
|
|
|
&.is-plain,
|
|
|
&.is-light {
|
|
|
color: #1e7a4f !important;
|
|
|
background-color: #e6f6ee !important;
|
|
|
border-color: #9fd8bd !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-tag--warning {
|
|
|
&.is-plain,
|
|
|
&.is-light {
|
|
|
color: #b36a14 !important;
|
|
|
background-color: #fdf3e2 !important;
|
|
|
border-color: #f3d3a0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-tag--danger {
|
|
|
&.is-plain,
|
|
|
&.is-light {
|
|
|
color: #c0392b !important;
|
|
|
background-color: #fdecec !important;
|
|
|
border-color: #f3b0b0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-tag--info {
|
|
|
&.is-plain,
|
|
|
&.is-light {
|
|
|
color: #5e6b7c !important;
|
|
|
background-color: #f4f6f9 !important;
|
|
|
border-color: #d3dae3 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 标签页
|
|
|
.el-tabs__item {
|
|
|
color: #6b7280;
|
|
|
|
|
|
&.is-active {
|
|
|
color: #2563eb;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-tabs__active-bar {
|
|
|
background-color: #3b82f6;
|
|
|
}
|
|
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
|
background-color: #e3eaf2;
|
|
|
}
|
|
|
|
|
|
// 描述列表
|
|
|
.el-descriptions__label {
|
|
|
color: #6b7280 !important;
|
|
|
background: #f6f9fc !important;
|
|
|
}
|
|
|
|
|
|
.el-descriptions__content {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 卡片组件
|
|
|
.el-card {
|
|
|
border-color: rgba(59, 130, 246, 0.15);
|
|
|
box-shadow: 0 4px 14px rgba(30, 60, 100, 0.05);
|
|
|
}
|
|
|
|
|
|
// 空状态
|
|
|
.el-empty__description p {
|
|
|
color: #9ca3af;
|
|
|
}
|
|
|
|
|
|
// 加载遮罩（覆盖全局 element-ui.scss 暗色遮罩）
|
|
|
.el-loading-mask {
|
|
|
background-color: rgba(245, 248, 252, 0.78) !important;
|
|
|
backdrop-filter: blur(2px);
|
|
|
}
|
|
|
|
|
|
.el-loading-spinner .path {
|
|
|
stroke: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
.el-loading-text {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
// 开关
|
|
|
.el-switch__label {
|
|
|
color: #1f2937;
|
|
|
}
|
|
|
|
|
|
// 下拉菜单（页面内）
|
|
|
.el-dropdown-menu {
|
|
|
color: #1f2937;
|
|
|
}
|
|
|
|
|
|
// 警告/提示条
|
|
|
.el-alert__title,
|
|
|
.el-alert__description {
|
|
|
color: inherit;
|
|
|
}
|
|
|
|
|
|
/* ---------- 16. 按钮/表头/密度统一规范（仅样式层，不改模板） ---------- */
|
|
|
|
|
|
// 16.1 工具栏按钮语义纠偏
|
|
|
// 语义约定：查询/搜索/保存=蓝，新增=绿，导入=蓝，导出/下载=橙，重置/刷新/配置=白底
|
|
|
// 学生管理：btn-group 首个 primary 是“新增” -> 绿；末个 primary 是“刷新” -> 白底
|
|
|
.student-page .query-bar .btn-group {
|
|
|
> .el-button--primary:first-child {
|
|
|
background-color: #2ba471 !important;
|
|
|
border-color: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #3cbb85 !important;
|
|
|
border-color: #3cbb85 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
> .el-button--primary:last-child {
|
|
|
background-color: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #1f2937 !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #eff6ff !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 成绩管理：toolbar-right 内三个 success 依次为 导出 / 权重设置 / 成绩更新
|
|
|
.school-admin-workbench .toolbar .toolbar-right {
|
|
|
// 导出 -> 橙（与其他页面导出统一）
|
|
|
> .el-button--success {
|
|
|
background: #e8a33d !important;
|
|
|
border-color: #e8a33d !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #f2b45a !important;
|
|
|
border-color: #f2b45a !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 权重设置（第二个 success）-> 白底次要
|
|
|
> .el-button--success ~ .el-button--success {
|
|
|
background: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #1f2937 !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #eff6ff !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 成绩更新（第三个 success）-> 蓝（主要操作）
|
|
|
> .el-button--success ~ .el-button--success ~ .el-button--success {
|
|
|
background: #3b82f6 !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #3b82f6 !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 16.2 表格操作列：text/link/默认按钮统一为小号实心按钮 + 不换行并排
|
|
|
.el-table {
|
|
|
.action-group {
|
|
|
gap: 6px !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
white-space: nowrap !important;
|
|
|
}
|
|
|
|
|
|
.cell .el-button + .el-button {
|
|
|
margin-left: 6px !important;
|
|
|
}
|
|
|
|
|
|
// 操作列单元格强制不换行，避免按钮堆叠成多行
|
|
|
.cell,
|
|
|
td.el-table__cell .cell {
|
|
|
&.action,
|
|
|
[class*="action"] {
|
|
|
white-space: nowrap !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 兜底：按钮直接放在单元格内且多个相邻时不换行（其他教师端页面）。
|
|
|
// 教师管理页按钮已包进 .action-btn-group，.cell 的直接子级不再有相邻按钮，
|
|
|
// 故本规则不命中该页 —— cell 可正常换行，让组外 el-tag 掉到第二行。
|
|
|
tbody td.el-table__cell .cell:has(> .el-button + .el-button) {
|
|
|
white-space: nowrap !important;
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
// 教师管理页：三个操作按钮成组保持一排，组外 el-tag 宽度不够时自行换到下一行
|
|
|
// 该列无固定 width，el-table 按剩余空间分配会裁切按钮组，此处固定列宽
|
|
|
&:has(.action-btn-group) {
|
|
|
colgroup col:last-child {
|
|
|
width: 230px !important;
|
|
|
min-width: 230px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.action-btn-group {
|
|
|
display: inline-flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: center !important;
|
|
|
gap: 6px !important;
|
|
|
white-space: nowrap !important;
|
|
|
vertical-align: middle !important;
|
|
|
|
|
|
.el-button + .el-button {
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 组外提示 tag：换到第二行后占满列宽、文字允许折行，避免再被裁切
|
|
|
td.el-table__cell .cell:has(.action-btn-group) {
|
|
|
display: flex !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
justify-content: center !important;
|
|
|
row-gap: 4px !important;
|
|
|
}
|
|
|
|
|
|
td.el-table__cell .cell:has(.action-btn-group) > .el-tag {
|
|
|
margin-left: 0 !important;
|
|
|
max-width: 100% !important;
|
|
|
white-space: normal !important;
|
|
|
height: auto !important;
|
|
|
line-height: 1.4 !important;
|
|
|
}
|
|
|
|
|
|
// 教师管理页：暗黑遗留的浅色文字在白底上模糊，统一为亮色主题清晰色
|
|
|
// 名下班级 chip：浅蓝底 + 深蓝字（与 plain primary tag 同系）
|
|
|
.owned-class-chip {
|
|
|
color: #2563eb !important;
|
|
|
border: 1px solid #9cc8ef !important;
|
|
|
background: #eff6ff !important;
|
|
|
}
|
|
|
|
|
|
// 暂无班级：中性灰蓝（与表格空数据文字一致）
|
|
|
.empty-summary {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
// 学生数量：深色科技蓝数字
|
|
|
.student-count {
|
|
|
color: #3b82f6 !important;
|
|
|
|
|
|
small {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-button {
|
|
|
height: 26px !important;
|
|
|
min-height: 26px !important;
|
|
|
padding: 0 10px !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 500 !important;
|
|
|
line-height: 24px !important;
|
|
|
border-radius: 6px !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 12px !important;
|
|
|
margin-right: 2px;
|
|
|
}
|
|
|
|
|
|
// 文字按钮（is-text / is-link）重铸为统一风格
|
|
|
&.is-text,
|
|
|
&.is-link {
|
|
|
// Primary：透明底蓝描边，hover 蓝色半透明
|
|
|
&.el-button--primary {
|
|
|
background-color: transparent !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: rgba(59, 130, 246, 0.18) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-button--success {
|
|
|
background-color: #2ba471 !important;
|
|
|
border-color: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #3cbb85 !important;
|
|
|
border-color: #3cbb85 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-button--warning {
|
|
|
background-color: #e8a33d !important;
|
|
|
border-color: #e8a33d !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #f2b45a !important;
|
|
|
border-color: #f2b45a !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.el-button--danger {
|
|
|
background-color: #ef4444 !important;
|
|
|
border-color: #ef4444 !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #ec7272 !important;
|
|
|
border-color: #ec7272 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 无类型的文字按钮 -> 白底描边
|
|
|
&:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
|
|
|
background-color: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: #eff6ff !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 实心按钮尺寸对齐（学生页原 default 尺寸较大）
|
|
|
&.el-button--primary,
|
|
|
&.el-button--success,
|
|
|
&.el-button--warning,
|
|
|
&.el-button--danger {
|
|
|
font-weight: 500 !important;
|
|
|
}
|
|
|
|
|
|
// 禁用态保持可见但弱化
|
|
|
&.is-disabled,
|
|
|
&.is-disabled:hover {
|
|
|
opacity: 0.55 !important;
|
|
|
cursor: not-allowed !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 成绩中心只读分数：暗黑遗留亮青字统一为深色科技蓝
|
|
|
.teacher-score-readonly {
|
|
|
strong {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
small {
|
|
|
color: #9ca3af !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
background: #f4f8fd !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 16.3 表头统一：纯白底 + 深黑字 + 灰色分隔线（同步修复成绩页 .cell 白字）
|
|
|
.el-table {
|
|
|
--el-table-header-bg-color: #ffffff;
|
|
|
--el-table-header-text-color: #1f2937;
|
|
|
|
|
|
.el-table__header-wrapper th.el-table__cell,
|
|
|
.el-table__fixed-header-wrapper th.el-table__cell {
|
|
|
height: 38px;
|
|
|
padding: 5px 0 !important;
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 13px !important;
|
|
|
font-weight: 600 !important;
|
|
|
text-shadow: none !important;
|
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
|
|
|
|
.cell {
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 13px !important;
|
|
|
font-weight: 600 !important;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 16.5 工具栏按钮统一：32px 高度 + 色板复用全局定义
|
|
|
// 覆盖容器：.df / .query-bar / .toolbar / .task-toolbar / .filter-section / .toolbar-actions
|
|
|
// 色板已在第 6 节 .el-button 统一：primary=#3b82f6 / success=#2ba471 /
|
|
|
// warning=#e8a33d / danger=#ef4444 / default=白底描边，此处只控尺寸和换行
|
|
|
.df,
|
|
|
.query-bar,
|
|
|
.toolbar,
|
|
|
.task-toolbar,
|
|
|
.filter-section,
|
|
|
.toolbar-actions {
|
|
|
display: flex !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
align-items: center !important;
|
|
|
gap: 8px !important;
|
|
|
|
|
|
> .el-button,
|
|
|
.el-button {
|
|
|
height: 32px !important;
|
|
|
min-height: 32px !important;
|
|
|
padding: 0 14px !important;
|
|
|
font-size: 13px !important;
|
|
|
font-weight: 500 !important;
|
|
|
line-height: 32px !important;
|
|
|
border-radius: 8px !important;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 14px !important;
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 16.6 工具栏按钮不换行兜底：工具栏内按钮组保持一行
|
|
|
.query-bar .btn-group,
|
|
|
.toolbar .btn-group,
|
|
|
.df > div + div,
|
|
|
.toolbar-actions {
|
|
|
display: flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: center !important;
|
|
|
gap: 8px !important;
|
|
|
}
|
|
|
|
|
|
// 成绩中心：操作按钮被带 title 提示的 <span> 包裹，
|
|
|
// 破坏 Element 的 .el-button + .el-button 相邻间距，三个按钮粘连。
|
|
|
// 用 :has 精准命中含 span 包裹按钮的 inline 表单项，flex gap 补回间距。
|
|
|
.el-form--inline .el-form-item__content:has(> span > .el-button) {
|
|
|
display: inline-flex !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
align-items: center !important;
|
|
|
gap: 10px !important;
|
|
|
|
|
|
> span {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 16.4 整体布局紧凑化
|
|
|
.page-header {
|
|
|
padding: 14px 20px !important;
|
|
|
margin-bottom: 12px !important;
|
|
|
}
|
|
|
|
|
|
.query-bar,
|
|
|
.toolbar,
|
|
|
.task-toolbar,
|
|
|
.filter-section {
|
|
|
padding: 10px 14px !important;
|
|
|
margin-bottom: 12px !important;
|
|
|
gap: 10px !important;
|
|
|
}
|
|
|
|
|
|
.school-admin-workbench {
|
|
|
.admin-hero {
|
|
|
padding: 16px 20px !important;
|
|
|
margin-bottom: 12px !important;
|
|
|
}
|
|
|
|
|
|
.admin-panel {
|
|
|
padding: 14px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-table {
|
|
|
font-size: 13px !important;
|
|
|
|
|
|
.el-table__cell {
|
|
|
padding: 7px 0 !important;
|
|
|
}
|
|
|
|
|
|
td.el-table__cell .cell {
|
|
|
font-size: 13px !important;
|
|
|
line-height: 1.5 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-pagination,
|
|
|
.pagination-container {
|
|
|
margin-top: 12px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* =============================================================
|
|
|
* 9.5 亮色模式下 Element Plus 全局 CSS 变量覆盖
|
|
|
* （置于 body 作用域，让 teleport 弹层 + 页面内组件都命中）
|
|
|
* ============================================================= */
|
|
|
body.teacher-light-mode {
|
|
|
--el-color-primary: #3b82f6;
|
|
|
--el-color-primary-light-3: #60a5fa;
|
|
|
--el-color-primary-light-5: #93c5fd;
|
|
|
--el-color-primary-light-7: #bfdbfe;
|
|
|
--el-color-primary-light-8: #dbeafe;
|
|
|
--el-color-primary-light-9: #eff6ff;
|
|
|
--el-color-primary-dark-2: #2563eb;
|
|
|
|
|
|
--el-color-success: #2ba471;
|
|
|
--el-color-warning: #e8a33d;
|
|
|
--el-color-danger: #ef4444;
|
|
|
--el-color-error: #ef4444;
|
|
|
--el-color-info: #9ca3af;
|
|
|
}
|
|
|
|
|
|
/* =============================================================
|
|
|
* 10. teleport 弹层（body.teacher-light-mode 命中）
|
|
|
* ============================================================= */
|
|
|
body.teacher-light-mode {
|
|
|
// 全局无条件暗色规则的重置（index.scss / element-ui.scss）
|
|
|
.el-input__inner {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-input__count,
|
|
|
.el-input__count-inner {
|
|
|
color: #9ca3af !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
// 下拉选择弹层
|
|
|
.el-select__popper.el-popper,
|
|
|
.el-select-dropdown {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
|
|
|
|
|
|
.el-select-dropdown__item {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&.is-hovering,
|
|
|
&:hover {
|
|
|
background-color: #eff6ff !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
&.is-selected {
|
|
|
color: #3b82f6 !important;
|
|
|
background-color: #eff6ff !important;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
&.is-disabled {
|
|
|
color: #b0c0d0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-select-dropdown__empty {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
.el-popper__arrow::before {
|
|
|
background: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 分页每页条数下拉里的输入框
|
|
|
.el-pagination .el-input__inner {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 日期/时间选择器面板
|
|
|
.el-picker-panel,
|
|
|
.el-date-picker,
|
|
|
.el-time-panel {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
.el-picker-panel__icon-btn,
|
|
|
.el-picker-panel__header-label,
|
|
|
.el-date-picker__header-label,
|
|
|
.el-date-table th {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td .el-date-table-cell__text {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #eff6ff !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-date-table td.today .el-date-table-cell__text {
|
|
|
color: #3b82f6 !important;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
|
|
|
background-color: #3b82f6 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.prev-month .el-date-table-cell__text,
|
|
|
.el-date-table td.next-month .el-date-table-cell__text {
|
|
|
color: #b0c0d0 !important;
|
|
|
}
|
|
|
|
|
|
.el-time-spinner__item {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&.is-active {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
&:hover:not(.is-disabled) {
|
|
|
background: #eff6ff !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-picker-panel__footer {
|
|
|
background: #f6f9fc !important;
|
|
|
border-top-color: #e3eaf2 !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel__sidebar {
|
|
|
border-right-color: #e3eaf2 !important;
|
|
|
}
|
|
|
|
|
|
.el-time-panel__btn.confirm {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 弹窗（教师端各页面 teacher-dialog / admin-edit-dialog）
|
|
|
.teacher-dialog,
|
|
|
.admin-edit-dialog {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 16px !important;
|
|
|
box-shadow: 0 20px 56px rgba(30, 60, 100, 0.18) !important;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.el-dialog__header {
|
|
|
background: linear-gradient(135deg, #eff6ff 0%, #eff6ff 100%) !important;
|
|
|
padding: 18px 24px;
|
|
|
margin: 0;
|
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.15);
|
|
|
|
|
|
.el-dialog__title {
|
|
|
color: #1f2937 !important;
|
|
|
font-weight: 700;
|
|
|
font-size: 17px;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.el-dialog__headerbtn .el-dialog__close {
|
|
|
color: #6b7280 !important;
|
|
|
|
|
|
&:hover {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-dialog__body {
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937;
|
|
|
padding: 24px 28px;
|
|
|
}
|
|
|
|
|
|
.el-dialog__footer {
|
|
|
background: #f8fbfe !important;
|
|
|
border-top: 1px solid #edf2f7 !important;
|
|
|
padding: 14px 24px;
|
|
|
}
|
|
|
|
|
|
.el-form-item__label,
|
|
|
label {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.el-input__wrapper,
|
|
|
.el-select .el-input__wrapper,
|
|
|
.el-textarea__inner {
|
|
|
background-color: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
.el-input__inner,
|
|
|
.el-textarea__inner {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.el-radio__label,
|
|
|
.el-checkbox__label {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 班级成员管理弹窗内的搜索工具条
|
|
|
.member-toolbar {
|
|
|
background: #f8fbfe !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 确认消息框（退出登录等 ElMessageBox）
|
|
|
.el-overlay {
|
|
|
.el-message-box {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: 0 20px 56px rgba(30, 60, 100, 0.2) !important;
|
|
|
border-radius: 14px;
|
|
|
|
|
|
.el-message-box__title,
|
|
|
.el-message-box__content,
|
|
|
.el-message-box__message p {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.el-message-box__headerbtn .el-message-box__close {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 轻提示
|
|
|
.el-message {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
.el-message__content {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 通知
|
|
|
.el-notification {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
|
|
|
|
|
|
.el-notification__title {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.el-notification__content {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// tooltip 保持 Element 默认深色（设计语义为浮层提示，不调整）
|
|
|
|
|
|
// 全屏加载遮罩
|
|
|
.el-loading-mask {
|
|
|
background-color: rgba(245, 248, 252, 0.78) !important;
|
|
|
}
|
|
|
|
|
|
.el-loading-spinner .path {
|
|
|
stroke: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
.el-loading-text {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- 11. 表格 CSS 变量层兜底（admin-theme 通过变量注入暗色） ---------- */
|
|
|
.el-table {
|
|
|
--el-table-bg-color: #ffffff;
|
|
|
--el-table-tr-bg-color: #ffffff;
|
|
|
--el-table-header-bg-color: #ffffff;
|
|
|
--el-table-header-text-color: #1f2937;
|
|
|
--el-table-text-color: #1f2937;
|
|
|
--el-table-border-color: #edf2f7;
|
|
|
--el-table-row-hover-bg-color: #f9fafb;
|
|
|
}
|
|
|
|
|
|
/* ---------- 12. 成绩中心（school-admin-workbench）补充 ---------- */
|
|
|
.school-admin-workbench {
|
|
|
.toolbar {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.18) !important;
|
|
|
}
|
|
|
|
|
|
// 工具栏按钮：覆盖 admin-theme.scss 的深色渐变，统一为亮色系统色
|
|
|
.toolbar .el-button {
|
|
|
&::before,
|
|
|
&::after {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
// Primary（查询等主要操作）— 透明底蓝描边，hover 蓝色半透明
|
|
|
&[type="primary"],
|
|
|
&.el-button--primary {
|
|
|
background: transparent !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
box-shadow: none !important;
|
|
|
backdrop-filter: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #2563eb !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background: rgba(59, 130, 246, 0.18) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Success（导出/新增等）— 绿色
|
|
|
&[type="success"],
|
|
|
&.el-button--success {
|
|
|
background: #2ba471 !important;
|
|
|
border-color: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 4px 12px rgba(43, 164, 113, 0.2) !important;
|
|
|
backdrop-filter: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #3cbb85 !important;
|
|
|
border-color: #3cbb85 !important;
|
|
|
color: #ffffff !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Danger（删除等）— 红色
|
|
|
&[type="danger"],
|
|
|
&.el-button--danger {
|
|
|
background: #ef4444 !important;
|
|
|
border-color: #ef4444 !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #ec7272 !important;
|
|
|
border-color: #ec7272 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Warning — 橙色
|
|
|
&[type="warning"],
|
|
|
&.el-button--warning {
|
|
|
background: #e8a33d !important;
|
|
|
border-color: #e8a33d !important;
|
|
|
color: #ffffff !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #f2b45a !important;
|
|
|
border-color: #f2b45a !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 默认按钮（重置等）— 白底深字
|
|
|
&:not([type="primary"]):not([type="success"]):not([type="danger"]):not([type="warning"]):not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(.el-button--warning) {
|
|
|
background: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #1f2937 !important;
|
|
|
backdrop-filter: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #eff6ff !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.admin-form {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.18) !important;
|
|
|
}
|
|
|
|
|
|
.el-table .el-loading-mask {
|
|
|
background: rgba(245, 248, 252, 0.78) !important;
|
|
|
}
|
|
|
|
|
|
.el-table .el-loading-spinner .path {
|
|
|
stroke: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
.el-table .el-loading-text {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
// 表格操作按钮
|
|
|
.action-btn {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
.action-btn.el-button--danger {
|
|
|
color: #d04545 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- 13. 教师首页仪表盘补充 ---------- */
|
|
|
.grade-center {
|
|
|
.card-badge {
|
|
|
color: #2563eb !important;
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
.legend-dots,
|
|
|
.legend-item,
|
|
|
.filter-label,
|
|
|
.insight-text {
|
|
|
color: #46607d !important;
|
|
|
}
|
|
|
|
|
|
// 卡片右上角图标：荧光青/绿 -> 科技蓝/绿
|
|
|
.trend-icon {
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04)) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.3) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
.stats-icon {
|
|
|
background: linear-gradient(135deg, rgba(43, 164, 113, 0.12), rgba(43, 164, 113, 0.04)) !important;
|
|
|
border-color: rgba(43, 164, 113, 0.3) !important;
|
|
|
color: #1e7a4f !important;
|
|
|
}
|
|
|
|
|
|
.card-badge.success {
|
|
|
color: #1e7a4f !important;
|
|
|
background: rgba(43, 164, 113, 0.1) !important;
|
|
|
border-color: rgba(43, 164, 113, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
.el-select__caret {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
.card-footer {
|
|
|
border-top-color: rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
.card-glow {
|
|
|
background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.06), transparent 50%) !important;
|
|
|
}
|
|
|
|
|
|
// 成绩卡片：白底 + 淡彩色顶边
|
|
|
.score-card {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.15) !important;
|
|
|
|
|
|
&:hover {
|
|
|
box-shadow: 0 10px 26px rgba(30, 60, 100, 0.1) !important;
|
|
|
}
|
|
|
|
|
|
&.card-max {
|
|
|
background: linear-gradient(135deg, rgba(255, 107, 157, 0.07), #ffffff 60%) !important;
|
|
|
border-color: rgba(255, 107, 157, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
&.card-min {
|
|
|
background: linear-gradient(135deg, rgba(75, 207, 250, 0.07), #ffffff 60%) !important;
|
|
|
border-color: rgba(45, 184, 232, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
&.card-avg {
|
|
|
background: linear-gradient(135deg, rgba(245, 200, 0, 0.08), #ffffff 60%) !important;
|
|
|
border-color: rgba(245, 200, 0, 0.3) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.score-name {
|
|
|
color: #46607d !important;
|
|
|
}
|
|
|
|
|
|
.score-number {
|
|
|
background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
|
|
|
-webkit-background-clip: text !important;
|
|
|
background-clip: text !important;
|
|
|
-webkit-text-fill-color: transparent !important;
|
|
|
}
|
|
|
|
|
|
.score-unit {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- 14. 实训任务管理页 ---------- */
|
|
|
.teacher-main.training-task-main-theme {
|
|
|
background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 48%, #f3f8ff 100%) !important;
|
|
|
}
|
|
|
|
|
|
.training-task-page {
|
|
|
// 头部统计小块：荧光绿/浅蓝白字在白底上不可见，改为实色浅蓝底 + 深蓝字
|
|
|
.header-stats {
|
|
|
.stat-item,
|
|
|
.header-stat {
|
|
|
color: #1f2937 !important;
|
|
|
background: #eff6ff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
color: #2563eb !important;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 页面副标题加深
|
|
|
.page-header .page-subtitle {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
.class-filter .filter-label {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 搜索框
|
|
|
.search-box {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.2) !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
.el-input__inner {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 工具栏主按钮（原深蓝渐变）改为亮蓝
|
|
|
.toolbar-btn {
|
|
|
border-radius: 10px;
|
|
|
|
|
|
// Primary：透明底蓝描边，hover 蓝色半透明
|
|
|
&.el-button--primary {
|
|
|
background: transparent !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background: rgba(59, 130, 246, 0.18) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Success：绿色实色（语义色）
|
|
|
&.el-button--success {
|
|
|
background: #2ba471 !important;
|
|
|
border-color: #2ba471 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: 0 4px 12px rgba(43, 164, 113, 0.2) !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #3cbb85 !important;
|
|
|
border-color: #3cbb85 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// “恢复默认”：原深暗红渐变改为浅红 plain 风格（hover 转红实心）
|
|
|
&.el-button--danger,
|
|
|
&.toolbar-btn-danger {
|
|
|
background: #fdecec !important;
|
|
|
border-color: #f3b0b0 !important;
|
|
|
color: #c0392b !important;
|
|
|
box-shadow: none !important;
|
|
|
text-shadow: none !important;
|
|
|
transform: none !important;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background: #ef4444 !important;
|
|
|
border-color: #ef4444 !important;
|
|
|
color: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&::before,
|
|
|
&::after {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 项目筛选容器
|
|
|
.project-filter {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.15) !important;
|
|
|
box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06) !important;
|
|
|
|
|
|
.filter-label {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
svg {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 项目页签
|
|
|
.project-tabs {
|
|
|
.project-tab {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.15) !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
.tab-name {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.tab-count {
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
border-color: rgba(59, 130, 246, 0.4) !important;
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.5) !important;
|
|
|
|
|
|
.tab-name {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
.tab-count {
|
|
|
background: #3b82f6 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// “显示 x/x 条”：原浅绿字在白底偏淡，改为深绿
|
|
|
.filter-result {
|
|
|
color: #1e7a4f !important;
|
|
|
background: rgba(43, 164, 113, 0.08) !important;
|
|
|
border-color: rgba(43, 164, 113, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
// 任务卡片网格：一行五个，整体更紧凑
|
|
|
.task-grid {
|
|
|
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
|
|
|
gap: 14px !important;
|
|
|
min-height: auto !important;
|
|
|
}
|
|
|
|
|
|
// 任务卡片
|
|
|
.task-card {
|
|
|
padding: 14px !important;
|
|
|
border-radius: 12px !important;
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.15) !important;
|
|
|
box-shadow: 0 6px 18px rgba(30, 60, 100, 0.06) !important;
|
|
|
|
|
|
&:hover {
|
|
|
transform: none !important;
|
|
|
border-color: rgba(59, 130, 246, 0.4) !important;
|
|
|
box-shadow: 0 10px 28px rgba(30, 60, 100, 0.1) !important;
|
|
|
}
|
|
|
|
|
|
// 装饰编号与右上角“启用/停用”状态标签位置重叠，亮色下隐藏避免干扰
|
|
|
.card-index {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.card-header {
|
|
|
margin-bottom: 8px !important;
|
|
|
}
|
|
|
|
|
|
.task-project {
|
|
|
font-size: 11px !important;
|
|
|
padding: 2px 8px !important;
|
|
|
color: #2563eb !important;
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
// 启用状态：荧光绿在白底不可见，改为深绿实色标签
|
|
|
.task-status {
|
|
|
font-size: 10px !important;
|
|
|
padding: 2px 8px !important;
|
|
|
color: #b04545 !important;
|
|
|
background: rgba(239, 68, 68, 0.1) !important;
|
|
|
border-color: rgba(239, 68, 68, 0.3) !important;
|
|
|
|
|
|
&.enabled {
|
|
|
color: #1e7a4f !important;
|
|
|
background: rgba(43, 164, 113, 0.1) !important;
|
|
|
border-color: rgba(43, 164, 113, 0.3) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 目标/步骤数量文字加深
|
|
|
.task-meta .meta-item {
|
|
|
color: #46607d !important;
|
|
|
}
|
|
|
|
|
|
.task-name {
|
|
|
margin: 0 0 8px !important;
|
|
|
font-size: 14px !important;
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.task-meta {
|
|
|
margin-bottom: 10px !important;
|
|
|
gap: 10px !important;
|
|
|
}
|
|
|
|
|
|
.meta-item {
|
|
|
font-size: 11px !important;
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
.edit-btn {
|
|
|
width: 100% !important;
|
|
|
height: 30px !important;
|
|
|
padding: 0 10px !important;
|
|
|
font-size: 12px !important;
|
|
|
border-radius: 8px !important;
|
|
|
background: transparent !important;
|
|
|
border: 1px solid #3b82f6 !important;
|
|
|
color: #3b82f6 !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background: rgba(59, 130, 246, 0.18) !important;
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 卡片上的扫描线/辉光特效在亮色下隐藏
|
|
|
.scanline,
|
|
|
.card-glow {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.corner-decoration {
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
|
|
|
.task-empty {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
// 表单内白色 label（scoped 中带 !important）
|
|
|
.task-form .el-form-item__label,
|
|
|
.drawer-shell .el-form-item__label {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 窄屏下列数收敛
|
|
|
@media (max-width: 1500px) {
|
|
|
.task-grid {
|
|
|
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1100px) {
|
|
|
.task-grid {
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* =============================================================
|
|
|
* 15. 实训任务抽屉（el-drawer teleport 到 body）
|
|
|
* ============================================================= */
|
|
|
body.teacher-light-mode {
|
|
|
.training-task-drawer.el-drawer {
|
|
|
background: #f5f8fc !important;
|
|
|
box-shadow: -10px 0 36px rgba(30, 60, 100, 0.14) !important;
|
|
|
|
|
|
.el-drawer__body {
|
|
|
background: #f5f8fc;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.training-task-drawer {
|
|
|
.drawer-shell {
|
|
|
background: #f5f8fc !important;
|
|
|
color: #1f2937;
|
|
|
}
|
|
|
|
|
|
.drawer-header {
|
|
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.04)) !important;
|
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
// 标题区文字：h3 白字 / p 浅蓝字在浅底上不可见，统一深色
|
|
|
.drawer-heading {
|
|
|
h3 {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 信息条：scoped 为 rgba(0,10,20,0.3) 深底，亮色场景发灰，改为浅蓝底
|
|
|
.drawer-identity {
|
|
|
background: #eef5fc !important;
|
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
// 信息条内项目值：确保深色
|
|
|
.identity-content {
|
|
|
strong {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 底部操作条：scoped 为 rgba(0,10,20,0.95) 近黑，改为白底浅分隔线
|
|
|
.drawer-footer {
|
|
|
background: #ffffff !important;
|
|
|
border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
|
|
|
box-shadow: 0 -4px 16px rgba(30, 60, 100, 0.06) !important;
|
|
|
}
|
|
|
|
|
|
// 取消/关闭按钮：scoped 暗色玻璃态，改为白底描边深色字
|
|
|
.cancel-btn {
|
|
|
color: #1f2937 !important;
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
|
|
|
&:hover {
|
|
|
color: #3b82f6 !important;
|
|
|
background: #eff6ff !important;
|
|
|
border-color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.drawer-kicker {
|
|
|
color: #2563eb !important;
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
}
|
|
|
|
|
|
.drawer-close-button {
|
|
|
color: #6b7280 !important;
|
|
|
background: rgba(59, 130, 246, 0.08) !important;
|
|
|
|
|
|
&:hover {
|
|
|
color: #ffffff !important;
|
|
|
background: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.identity-item {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.12) !important;
|
|
|
|
|
|
.identity-label {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
|
|
|
.status-value {
|
|
|
color: #ef4444 !important;
|
|
|
|
|
|
&.enabled {
|
|
|
color: #2ba471 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.drawer-section {
|
|
|
background: #ffffff !important;
|
|
|
border-color: rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
.section-title {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
.section-number {
|
|
|
background: rgba(59, 130, 246, 0.12) !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// h4/p 在 scoped 中有显式浅色（#fff / rgba(200,230,255,.5)），继承压不住，需显式覆盖
|
|
|
.section-info {
|
|
|
h4 {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.objective-row,
|
|
|
.step-item,
|
|
|
.material-row {
|
|
|
background: #f8fbfe !important;
|
|
|
border-color: rgba(59, 130, 246, 0.12) !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
.objective-number,
|
|
|
.step-number {
|
|
|
background: rgba(59, 130, 246, 0.1) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.25) !important;
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.material-placeholder {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
.material-link {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
|
|
|
.add-step-button,
|
|
|
.add-objective-button,
|
|
|
.upload-btn {
|
|
|
background: rgba(59, 130, 246, 0.08) !important;
|
|
|
border-color: rgba(59, 130, 246, 0.3) !important;
|
|
|
color: #3b82f6 !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: #3b82f6 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.remove-btn {
|
|
|
color: #ef4444 !important;
|
|
|
border-color: rgba(239, 68, 68, 0.3) !important;
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(239, 68, 68, 0.08) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 抽屉内表单 label/输入框
|
|
|
.el-form-item__label {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
.el-input__wrapper,
|
|
|
.el-select .el-input__wrapper,
|
|
|
.el-textarea__inner {
|
|
|
background-color: #ffffff !important;
|
|
|
box-shadow: 0 0 0 1px #e5e7eb inset !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
}
|
|
|
|
|
|
.el-input__inner,
|
|
|
.el-textarea__inner {
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
&::placeholder {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 教师端其他 el-drawer 默认亮色兜底
|
|
|
.el-drawer {
|
|
|
.el-drawer__header {
|
|
|
color: #1f2937;
|
|
|
margin-bottom: 0;
|
|
|
padding: 18px 24px;
|
|
|
border-bottom: 1px solid #edf2f7;
|
|
|
}
|
|
|
|
|
|
.el-drawer__title {
|
|
|
color: #1f2937;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.el-drawer__close-btn .el-icon {
|
|
|
color: #6b7280;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* =============================================================
|
|
|
* 16. 任务评阅页（TaskReviewPanel）亮色覆盖
|
|
|
* 该页 scoped 内写了完整的暗色样式，teacher-light.scss 之前完全没覆盖
|
|
|
* ============================================================= */
|
|
|
#app .teacherLayout .task-review {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.15) !important;
|
|
|
border-radius: 14px;
|
|
|
box-shadow: 0 6px 20px rgba(30, 60, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
|
|
|
|
|
|
// 左侧筛选 + 学生列表栏
|
|
|
.task-review__sidebar {
|
|
|
background: #f8fbfe !important;
|
|
|
border-right: 1px solid rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
.task-review__filters {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.15) !important;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 2px 8px rgba(30, 60, 100, 0.04);
|
|
|
}
|
|
|
|
|
|
// "学生列表（6）" 标题
|
|
|
.task-review__list-head {
|
|
|
color: #1f2937 !important;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.task-review__readonly-tip {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
// 右侧学生预览区
|
|
|
.task-review__content {
|
|
|
background: linear-gradient(135deg, #ffffff 0%, #f5f8fc 100%) !important;
|
|
|
}
|
|
|
|
|
|
// 学生姓名 + 任务副标题
|
|
|
.task-review__student-head {
|
|
|
border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
|
|
|
|
|
|
h2 {
|
|
|
color: #1f2937 !important;
|
|
|
text-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// AI评分 / 老师评分 胶囊
|
|
|
.task-review__scores {
|
|
|
color: #46607d !important;
|
|
|
|
|
|
span {
|
|
|
background: #eff6ff !important;
|
|
|
border: 1px solid rgba(59, 130, 246, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
strong {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// iframe 滚动容器：移除暗色 scrollbar，改用亮色系统滚动条
|
|
|
.task-review__student-preview-scroll {
|
|
|
border: 1px solid rgba(59, 130, 246, 0.18) !important;
|
|
|
border-radius: 10px;
|
|
|
scrollbar-color: #9cc8ef #eff6ff;
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: #eff6ff !important;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #9cc8ef !important;
|
|
|
border-radius: 8px;
|
|
|
border: 2px solid #eff6ff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 批量打分弹窗内说明文字
|
|
|
.task-review__batch-copy {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// 选中行高亮（scoped 用了 :deep() 提权，这里用类名+ !important 覆盖）
|
|
|
.task-review__student-table .task-review__selected-row > td {
|
|
|
background: #eff6ff !important;
|
|
|
}
|
|
|
}
|