|
|
/* 全局字体变量（:root）：确保所有 .vue 文件均可访问，不限于 .student-training-shell */
|
|
|
:root {
|
|
|
/* 字体栈：中文优先苹方/思源黑体，回退微软雅黑，跨平台一致 */
|
|
|
--student-font-base: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
/* 数字/数据字体：等宽对齐，成绩/金额专用 */
|
|
|
--student-font-data: "PingFang SC", "SF Mono", "JetBrains Mono", "Microsoft YaHei", monospace;
|
|
|
|
|
|
/* 字号变量（对齐 Word 标准：1pt ≈ 1.333px） */
|
|
|
--student-fs-display: 20px; /* 小三 15pt - 任务主标题 */
|
|
|
--student-fs-h1: 18px; /* 小三 15pt - 步骤大标题 */
|
|
|
--student-fs-h2: 16px; /* 小四 12pt - 面板/步骤行标题 */
|
|
|
--student-fs-h3: 14px; /* 五号 10.5pt - 区块小标题 */
|
|
|
--student-fs-body: 14px; /* 五号 10.5pt - 正文/描述 */
|
|
|
--student-fs-body-sm: 13px; /* 表格次要文字 */
|
|
|
--student-fs-caption: 12px; /* 小五 9pt - 标签/徽章 */
|
|
|
--student-fs-button: 14px; /* 五号 - 按钮文字 */
|
|
|
--student-fs-button-lg: 15px; /* 主操作按钮 */
|
|
|
--student-fs-data: 16px; /* 小四 12pt - 数字/成绩/金额 */
|
|
|
}
|
|
|
|
|
|
.student-training-shell {
|
|
|
--student-step-height: 40px;
|
|
|
--student-step-font: 13px;
|
|
|
--student-action-height: 38px;
|
|
|
--student-action-font: 15px;
|
|
|
--student-upload-height: 36px;
|
|
|
--student-upload-font: 13px;
|
|
|
--student-aux-height: 38px;
|
|
|
--student-aux-font: 13px;
|
|
|
--student-radius-sm: 6px;
|
|
|
--student-radius-pill: 999px;
|
|
|
/* 墨黑极简主题令牌 */
|
|
|
--student-accent: #1f2937;
|
|
|
--student-accent-deep: #111827;
|
|
|
--student-accent-light: #4b5563;
|
|
|
--student-accent-soft: #f3f4f6;
|
|
|
--student-panel-border: #e5e7eb;
|
|
|
--student-card-bg: #ffffff;
|
|
|
--student-panel-bg: #fafbfc;
|
|
|
--student-text: #1f2937;
|
|
|
--student-text-secondary: #6b7280;
|
|
|
|
|
|
/* ===== Element Plus 亮白主题覆盖 =====
|
|
|
index.scss 全局把 Element Plus CSS 变量设成了暗色主题
|
|
|
（--el-input-text-color: #e0f0ff 极浅蓝 / --el-input-bg-color: rgba(0,30,60,.6)），
|
|
|
教师端/超管端的暗色页面需要这些值，但学生实训页
|
|
|
.student-training-shell 是亮白底，必须在这里覆盖回来。 */
|
|
|
--el-text-color-primary: #1f2937;
|
|
|
--el-text-color-regular: #374151;
|
|
|
--el-text-color-secondary: #6b7280;
|
|
|
--el-text-color-placeholder: #9ca3af;
|
|
|
--el-text-color-disabled: #9ca3af;
|
|
|
--el-text-color: #1f2937;
|
|
|
|
|
|
--el-input-bg-color: #ffffff;
|
|
|
--el-input-text-color: #1f2937;
|
|
|
--el-input-border-color: #e5e7eb;
|
|
|
--el-input-hover-border-color: #1f2937;
|
|
|
--el-input-focus-border-color: #1f2937;
|
|
|
--el-input-focus-ring-color: rgba(31, 41, 55, 0.15);
|
|
|
--el-input-disabled-bg-color: #f3f4f6;
|
|
|
--el-input-disabled-text-color: #9ca3af;
|
|
|
--el-input-disabled-border-color: #e5e7eb;
|
|
|
|
|
|
--el-textarea-bg-color: #ffffff;
|
|
|
--el-textarea-text-color: #1f2937;
|
|
|
--el-textarea-border-color: #e5e7eb;
|
|
|
--el-textarea-hover-border-color: #1f2937;
|
|
|
--el-textarea-focus-border-color: #1f2937;
|
|
|
--el-textarea-focus-ring-color: rgba(31, 41, 55, 0.15);
|
|
|
|
|
|
--el-select-bg-color: #ffffff;
|
|
|
--el-select-text-color: #1f2937;
|
|
|
--el-select-border-color-hover: #1f2937;
|
|
|
|
|
|
--el-fill-color-blank: #ffffff;
|
|
|
--el-border-color: #e5e7eb;
|
|
|
--el-border-color-hover: #1f2937;
|
|
|
--el-border-radius-base: 6px;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* The app-main padding around a student training page is part of the page
|
|
|
* canvas. It must blend into the training canvas instead of exposing the
|
|
|
* layout's older black gradient as a vertical block beside the sidebar.
|
|
|
*/
|
|
|
#app .studentLayout .app-main:has(.student-training-shell),
|
|
|
#app .teacherLayout .app-main:has(.student-training-shell) {
|
|
|
background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
|
|
|
}
|
|
|
|
|
|
/* 教师端亮色主题：实训页背景改为浅色，与学生端统一浅色风格 */
|
|
|
#app .teacherLayout .app-main:has(.student-training-shell) {
|
|
|
background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
|
|
|
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
|
|
|
box-sizing: border-box !important;
|
|
|
display: grid !important;
|
|
|
grid-template-columns: minmax(0, 1fr) !important;
|
|
|
align-items: start !important;
|
|
|
gap: 10px !important;
|
|
|
gap: 10px !important;
|
|
|
width: 100% !important;
|
|
|
max-width: none !important;
|
|
|
min-height: calc(100vh - 90px) !important;
|
|
|
margin: 0 !important;
|
|
|
/* padding 由架构标签 .app-main 提供（sidebar.scss 中 28px 32px 40px 24px），子页面根标签不再叠加 */
|
|
|
// padding: 10px 10px 16px !important;
|
|
|
// padding: 10px 10px 16px !important;
|
|
|
background: #ffffff !important;
|
|
|
/* 应用实训页专用字体栈 + 数字等宽对齐 */
|
|
|
font-family: var(--student-font-base) !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
line-height: 1.8 !important;
|
|
|
font-variant-numeric: tabular-nums !important;
|
|
|
}
|
|
|
|
|
|
/* 教师端实训页容器背景改为透明，融入亮色主题 */
|
|
|
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* AI 助学助手已改为真正悬浮（position: fixed，组件内实现）：
|
|
|
* 右下角圆形小按钮，点击展开悬浮面板；不占 grid 列、不影响页面内容宽度。
|
|
|
*/
|
|
|
|
|
|
/*
|
|
|
* Student pages use different local names for their main and workbench cards.
|
|
|
* Keep the layout density here so a page-specific card cannot reclaim the
|
|
|
* space reserved for the hands-on activity area.
|
|
|
*/
|
|
|
.student-training-shell > main {
|
|
|
min-width: 0 !important;
|
|
|
padding: 14px !important;
|
|
|
border-radius: 20px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell > main > .task-card,
|
|
|
.student-training-shell > main > .process-workbench,
|
|
|
.student-training-shell > main > .factors-workbench,
|
|
|
.student-training-shell > main > .workbench {
|
|
|
padding: 10px 12px !important;
|
|
|
border-radius: 16px !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .process-workbench {
|
|
|
padding: 10px 12px !important;
|
|
|
border-radius: 16px !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .process-step-card {
|
|
|
padding: 12px !important;
|
|
|
border-radius: 16px !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .task-header {
|
|
|
margin-bottom: 12px !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .workbench-head {
|
|
|
margin-bottom: 12px !important;
|
|
|
padding-bottom: 10px !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .workbench-head--actions-only {
|
|
|
margin-bottom: 6px !important;
|
|
|
padding-bottom: 0 !important;
|
|
|
}
|
|
|
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .step-indicator {
|
|
|
margin-bottom: 12px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .step-card,
|
|
|
.student-training-shell .process-step-card,
|
|
|
.student-training-shell .factor-step-card {
|
|
|
padding: 12px !important;
|
|
|
border-radius: 16px !important;
|
|
|
padding: 12px !important;
|
|
|
border-radius: 16px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .task-header {
|
|
|
margin-bottom: 12px !important;
|
|
|
margin-bottom: 12px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .task-header .task-title {
|
|
|
font-size: var(--student-fs-display) !important; /* 20px 小三 */
|
|
|
line-height: 1.4 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
font-weight: 700 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .workbench-head h3 {
|
|
|
font-size: var(--student-fs-h1) !important; /* 18px 小三 */
|
|
|
line-height: 1.4 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
font-weight: 700 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .panel-title h4,
|
|
|
.student-training-shell .step-title-row h3 {
|
|
|
font-size: var(--student-fs-h2) !important; /* 16px 小四 */
|
|
|
line-height: 1.5 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
font-weight: 600 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .task-desc,
|
|
|
.student-training-shell .step-desc,
|
|
|
.student-training-shell .goal-bg,
|
|
|
.student-training-shell .background-block,
|
|
|
.student-training-shell .example-block,
|
|
|
.student-training-shell .source-title {
|
|
|
font-size: var(--student-fs-body) !important; /* 14px 五号 */
|
|
|
line-height: 1.8 !important;
|
|
|
}
|
|
|
|
|
|
/* 数字/成绩/金额专用：等宽对齐，避免列内跳动（小四 16px） */
|
|
|
.student-training-shell .score-value,
|
|
|
.student-training-shell .data-number,
|
|
|
.student-training-shell .amount,
|
|
|
.student-training-shell .stat-value,
|
|
|
.student-training-shell .progress-value {
|
|
|
font-family: var(--student-font-data) !important;
|
|
|
font-size: var(--student-fs-data) !important; /* 16px 小四 */
|
|
|
font-variant-numeric: tabular-nums !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1.4 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-steps,
|
|
|
/* ============================================================
|
|
|
* 步骤导航（墨黑极简 · 对齐 foundation new-product-survey）
|
|
|
* ============================================================ */
|
|
|
.student-training-shell .step-indicator {
|
|
|
display: flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: stretch !important;
|
|
|
justify-content: flex-start !important;
|
|
|
gap: 10px !important;
|
|
|
width: 100% !important;
|
|
|
max-width: 100% !important;
|
|
|
margin: 4px 0 20px !important;
|
|
|
padding: 0 !important;
|
|
|
border: none !important;
|
|
|
border-radius: 0 !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
overflow-x: auto !important;
|
|
|
overflow-y: hidden !important;
|
|
|
scrollbar-width: thin !important;
|
|
|
-webkit-overflow-scrolling: touch !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-arrow {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-pill,
|
|
|
.student-training-shell .step-tab {
|
|
|
flex: 0 0 auto !important;
|
|
|
min-width: auto !important;
|
|
|
max-width: none !important;
|
|
|
display: flex !important;
|
|
|
flex-direction: row !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
height: auto !important;
|
|
|
min-height: 42px !important;
|
|
|
margin: 0 !important;
|
|
|
padding: 8px 14px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 8px !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-size: 13px !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1.3 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
white-space: nowrap !important;
|
|
|
text-align: center !important;
|
|
|
cursor: pointer;
|
|
|
transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
|
|
|
|
|
|
.step-bar { display: none !important; }
|
|
|
|
|
|
.step-no,
|
|
|
&:has(.step-no) .step-no {
|
|
|
position: static !important;
|
|
|
flex: 0 0 auto !important;
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 22px !important;
|
|
|
height: 22px !important;
|
|
|
padding: 0 5px !important;
|
|
|
border-radius: 6px !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
color: #6b7280 !important;
|
|
|
font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
&::after { display: none !important; }
|
|
|
}
|
|
|
|
|
|
.step-name { color: inherit !important; }
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-pill:hover:not(.active):not(.complete),
|
|
|
.student-training-shell .step-tab:hover:not(.active):not(.complete) {
|
|
|
border-color: #1f2937 !important;
|
|
|
background: #f9fafb !important;
|
|
|
color: #1f2937 !important;
|
|
|
.step-no,
|
|
|
&:has(.step-no) .step-no {
|
|
|
background: #1f2937 !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-pill.complete:not(.active),
|
|
|
.student-training-shell .step-tab.complete:not(.active) {
|
|
|
border-color: #dce9e2 !important;
|
|
|
color: #374151 !important;
|
|
|
.step-no,
|
|
|
&:has(.step-no) .step-no {
|
|
|
background: rgba(74,157,110,.12) !important;
|
|
|
color: #3f8a5f !important;
|
|
|
}
|
|
|
&:hover {
|
|
|
border-color: #4a9d6e !important;
|
|
|
background: #f9fafb !important;
|
|
|
color: #374151 !important;
|
|
|
.step-no,
|
|
|
&:has(.step-no) .step-no {
|
|
|
background: #4a9d6e !important;
|
|
|
color: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-pill.active,
|
|
|
.student-training-shell .step-tab.active {
|
|
|
border-color: #1f2937 !important;
|
|
|
background: #1f2937 !important;
|
|
|
color: #ffffff !important;
|
|
|
font-weight: 700 !important;
|
|
|
box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
|
|
|
.step-no,
|
|
|
&:has(.step-no) .step-no {
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
&:hover {
|
|
|
background: #111827 !important;
|
|
|
border-color: #111827 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 窄屏步骤导航横向滑动 */
|
|
|
@media (max-width: 900px) {
|
|
|
.student-training-shell .step-indicator {
|
|
|
overflow-x: auto !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
justify-content: flex-start !important;
|
|
|
}
|
|
|
.student-training-shell .step-tab,
|
|
|
.student-training-shell .flow-pill {
|
|
|
flex: 0 0 auto !important;
|
|
|
min-width: 140px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* flow-rail 旧布局兼容（保留但改色） */
|
|
|
.student-training-shell .flow-rail {
|
|
|
display: flex !important;
|
|
|
flex-wrap: nowrap !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: space-between !important;
|
|
|
gap: 4px !important;
|
|
|
width: 100% !important;
|
|
|
margin: 0 0 16px !important;
|
|
|
padding: 4px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 60px !important;
|
|
|
background: #f9fafb !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-step {
|
|
|
display: flex !important;
|
|
|
flex: 1 1 0 !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 6px !important;
|
|
|
min-width: 0 !important;
|
|
|
min-height: 34px !important;
|
|
|
height: 34px !important;
|
|
|
padding: 0 8px !important;
|
|
|
border: 1px solid transparent !important;
|
|
|
border-radius: 999px !important;
|
|
|
color: #6b7280 !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 600 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
text-align: center !important;
|
|
|
overflow-wrap: anywhere !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-step span {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
flex: 0 0 22px !important;
|
|
|
width: 22px !important;
|
|
|
height: 22px !important;
|
|
|
margin: 0 !important;
|
|
|
border-radius: 6px !important;
|
|
|
color: #6b7280 !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-step strong {
|
|
|
min-width: 0 !important;
|
|
|
color: inherit !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 600 !important;
|
|
|
line-height: 1.25 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
text-align: center !important;
|
|
|
overflow-wrap: anywhere !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area {
|
|
|
width: 100% !important;
|
|
|
margin: 12px 0 16px !important;
|
|
|
padding: 12px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 16px !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area::before {
|
|
|
content: "任务实训" !important;
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
height: 34px !important;
|
|
|
min-width: 92px !important;
|
|
|
margin: 0 0 14px !important;
|
|
|
padding: 0 14px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 999px !important;
|
|
|
color: #111827 !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .caseBacktitle {
|
|
|
display: flex !important;
|
|
|
align-items: center !important;
|
|
|
gap: 8px !important;
|
|
|
min-height: 34px !important;
|
|
|
margin: 10px 0 8px !important;
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 16px !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1.45 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .caseBacktitle img {
|
|
|
width: 18px !important;
|
|
|
height: 18px !important;
|
|
|
flex: 0 0 18px !important;
|
|
|
object-fit: contain !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .caseBacktitle span {
|
|
|
margin-left: 0 !important;
|
|
|
color: inherit !important;
|
|
|
font-size: inherit !important;
|
|
|
line-height: inherit !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area p,
|
|
|
.training-step-area li,
|
|
|
.training-step-area .online,
|
|
|
.training-step-area .online span {
|
|
|
color: #374151 !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
line-height: 1.75 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .el-table {
|
|
|
margin-top: 12px !important;
|
|
|
margin-bottom: 18px !important;
|
|
|
font-size: 14px !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .el-button {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 132px !important;
|
|
|
height: 40px !important;
|
|
|
min-height: 40px !important;
|
|
|
padding: 0 18px !important;
|
|
|
border: 1px solid #1f2937 !important;
|
|
|
border-radius: 10px !important;
|
|
|
color: #ffffff !important;
|
|
|
background: #1f2937 !important;
|
|
|
box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .el-button:hover {
|
|
|
background: #111827 !important;
|
|
|
border-color: #111827 !important;
|
|
|
}
|
|
|
|
|
|
.training-step-area .el-button span {
|
|
|
color: inherit !important;
|
|
|
font-size: inherit !important;
|
|
|
line-height: inherit !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions {
|
|
|
display: flex !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
justify-content: center !important;
|
|
|
align-items: center !important;
|
|
|
gap: 14px !important;
|
|
|
margin-top: 20px !important;
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action,
|
|
|
.student-training-shell .training-actions button.training-action {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 112px !important;
|
|
|
width: auto !important;
|
|
|
height: 40px !important;
|
|
|
min-height: 40px !important;
|
|
|
padding: 0 18px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 10px !important;
|
|
|
color: #1f2937 !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
cursor: pointer;
|
|
|
transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action span,
|
|
|
.student-training-shell .training-actions button.training-action span {
|
|
|
font-size: inherit !important;
|
|
|
line-height: 1 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action:hover:not(.is-disabled),
|
|
|
.student-training-shell .training-actions button.training-action:hover:not(:disabled) {
|
|
|
border-color: #1f2937 !important;
|
|
|
color: #1f2937 !important;
|
|
|
background: #f9fafb !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
box-shadow: 0 3px 10px rgba(31,41,55,.14) !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action.primary,
|
|
|
.student-training-shell .training-actions button.training-action.primary {
|
|
|
border: 1px solid #1f2937 !important;
|
|
|
color: #ffffff !important;
|
|
|
background: #1f2937 !important;
|
|
|
box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action.primary:hover:not(.is-disabled),
|
|
|
.student-training-shell .training-actions button.training-action.primary:hover:not(:disabled) {
|
|
|
background: #111827 !important;
|
|
|
border-color: #111827 !important;
|
|
|
box-shadow: 0 4px 12px rgba(31,41,55,.24) !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action.is-disabled,
|
|
|
.student-training-shell .training-actions button.training-action:disabled {
|
|
|
opacity: .5 !important;
|
|
|
transform: none !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
/* 新产品调查等页面使用 task-actions，而非 training-action。统一底部提交/重置按钮规格。 */
|
|
|
.student-training-shell .task-actions {
|
|
|
display: flex !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
justify-content: center !important;
|
|
|
align-items: center !important;
|
|
|
gap: 20px !important;
|
|
|
margin-top: 20px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .task-actions > button {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 112px !important;
|
|
|
width: auto !important;
|
|
|
height: var(--student-action-height) !important;
|
|
|
min-height: var(--student-action-height) !important;
|
|
|
padding: 0 16px !important;
|
|
|
font-size: var(--student-action-font) !important;
|
|
|
font-weight: 800 !important;
|
|
|
line-height: 1 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .taskfooter {
|
|
|
display: flex !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
justify-content: center !important;
|
|
|
align-items: center !important;
|
|
|
gap: 20px !important;
|
|
|
margin-top: 20px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .taskfooter .el-button {
|
|
|
min-width: 112px !important;
|
|
|
width: auto !important;
|
|
|
height: var(--student-action-height) !important;
|
|
|
min-height: var(--student-action-height) !important;
|
|
|
padding: 0 16px !important;
|
|
|
font-size: var(--student-action-font) !important;
|
|
|
font-weight: 800 !important;
|
|
|
line-height: 1 !important;
|
|
|
}
|
|
|
|
|
|
/* 底部提交/重置操作统一采用实训页的胶囊按钮样式。 */
|
|
|
.student-training-shell .training-actions,
|
|
|
.student-training-shell .task-actions,
|
|
|
.student-training-shell .taskfooter {
|
|
|
gap: 20px !important;
|
|
|
margin-top: 20px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .el-button.training-action,
|
|
|
.student-training-shell .training-actions button.training-action,
|
|
|
.student-training-shell .task-actions > button,
|
|
|
.student-training-shell .taskfooter .el-button {
|
|
|
border: 1px solid rgba(31, 41, 55, 0.4) !important;
|
|
|
border-radius: 10px !important;
|
|
|
color: var(--student-text, #1f2937) !important;
|
|
|
background: #ffffff !important;
|
|
|
font-weight: 700 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .training-action--submit,
|
|
|
.student-training-shell .task-actions > .btn-submit,
|
|
|
.student-training-shell .task-actions > .btn-primary,
|
|
|
.student-training-shell .taskfooter .el-button:first-child {
|
|
|
border-color: var(--student-accent, #1f2937) !important;
|
|
|
color: #ffffff !important;
|
|
|
background: var(--student-accent, #1f2937) !important;
|
|
|
box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions button.training-action:hover:not(:disabled),
|
|
|
.student-training-shell .task-actions > button:hover:not(:disabled),
|
|
|
.student-training-shell .taskfooter .el-button:hover:not(.is-disabled) {
|
|
|
border-color: var(--student-accent, #1f2937) !important;
|
|
|
background: var(--student-accent-soft, #f3f4f6) !important;
|
|
|
color: var(--student-accent, #1f2937) !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions .training-action--submit:hover:not(:disabled),
|
|
|
.student-training-shell .task-actions > .btn-primary:hover:not(:disabled),
|
|
|
.student-training-shell .task-actions > .btn-submit:hover:not(:disabled),
|
|
|
.student-training-shell .taskfooter .el-button:first-child:hover:not(.is-disabled) {
|
|
|
border-color: var(--student-accent-deep, #111827) !important;
|
|
|
background: var(--student-accent-deep, #111827) !important;
|
|
|
color: #ffffff !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .task-actions > button .el-icon {
|
|
|
display: inline-flex !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .el-button.ghost-action,
|
|
|
.student-training-shell .el-button.outline-action,
|
|
|
.student-training-shell .workbench-actions .el-button.material-download,
|
|
|
.student-training-shell button.ghost-action,
|
|
|
.student-training-shell button.outline-action,
|
|
|
.student-training-shell .workbench-actions button.material-download {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
min-width: 0 !important;
|
|
|
width: auto !important;
|
|
|
height: 40px !important;
|
|
|
min-height: 40px !important;
|
|
|
padding: 0 18px !important;
|
|
|
border: 1px solid rgba(31, 41, 55, 0.4) !important;
|
|
|
border-radius: 10px !important;
|
|
|
color: var(--student-accent, #1f2937) !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
font-size: 13px !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .el-button.ghost-action:hover:not(.is-disabled),
|
|
|
.student-training-shell .el-button.outline-action:hover:not(.is-disabled),
|
|
|
.student-training-shell .workbench-actions .el-button.material-download:hover:not(.is-disabled),
|
|
|
.student-training-shell button.ghost-action:hover:not(:disabled),
|
|
|
.student-training-shell button.outline-action:hover:not(:disabled),
|
|
|
.student-training-shell .workbench-actions button.material-download:hover:not(:disabled) {
|
|
|
transform: translateY(-1px) !important;
|
|
|
border-color: var(--student-accent, #1f2937) !important;
|
|
|
color: var(--student-accent, #1f2937) !important;
|
|
|
background: var(--student-accent-soft, #f3f4f6) !important;
|
|
|
box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Workbench header actions are a single cross-page component contract.
|
|
|
* Keep this after the generic button rules so legacy, scoped page styles
|
|
|
* cannot turn the material/export actions into a different size or move
|
|
|
* their action group away from the upper-right corner of the workbench.
|
|
|
*/
|
|
|
.student-training-shell .workbench-head {
|
|
|
display: flex !important;
|
|
|
align-items: flex-start !important;
|
|
|
justify-content: space-between !important;
|
|
|
gap: 10px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .workbench-actions {
|
|
|
display: flex !important;
|
|
|
flex: 0 0 auto !important;
|
|
|
flex-wrap: wrap !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: flex-end !important;
|
|
|
align-self: flex-start !important;
|
|
|
gap: 8px !important;
|
|
|
min-width: max-content !important;
|
|
|
margin: 0 0 0 auto !important;
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .workbench-actions > .el-button,
|
|
|
.student-training-shell .workbench-actions > button,
|
|
|
.student-training-shell .workbench-actions > .material-download,
|
|
|
.student-training-shell .workbench-actions > .outline-action {
|
|
|
box-sizing: border-box !important;
|
|
|
flex: 0 0 auto !important;
|
|
|
min-width: 0 !important;
|
|
|
width: auto !important;
|
|
|
height: 40px !important;
|
|
|
min-height: 40px !important;
|
|
|
max-height: 40px !important;
|
|
|
margin: 0 !important;
|
|
|
padding: 0 18px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 10px !important;
|
|
|
color: #1f2937 !important;
|
|
|
background: #ffffff !important;
|
|
|
font-size: 13px !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
white-space: nowrap !important;
|
|
|
cursor: pointer;
|
|
|
transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
|
|
|
&:hover {
|
|
|
border-color: #1f2937 !important;
|
|
|
background: #f9fafb !important;
|
|
|
color: #1f2937 !important;
|
|
|
transform: translateY(-1px) !important;
|
|
|
box-shadow: 0 3px 10px rgba(31,41,55,.14) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-training-shell .el-button.upload-action,
|
|
|
.student-training-shell .el-button.mini-upload,
|
|
|
.student-training-shell button.upload-action,
|
|
|
.student-training-shell button.mini-upload,
|
|
|
.student-training-shell button.upload-btn {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
gap: 8px !important;
|
|
|
min-width: 0 !important;
|
|
|
width: auto !important;
|
|
|
height: 40px !important;
|
|
|
min-height: 40px !important;
|
|
|
padding: 0 18px !important;
|
|
|
border: 1px solid #1f2937 !important;
|
|
|
border-radius: 10px !important;
|
|
|
color: #ffffff !important;
|
|
|
background: #1f2937 !important;
|
|
|
box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
|
|
|
font-size: var(--student-upload-font) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
white-space: nowrap !important;
|
|
|
&:hover {
|
|
|
background: #111827 !important;
|
|
|
border-color: #111827 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-training-shell textarea,
|
|
|
.student-training-shell .large-textarea,
|
|
|
.student-training-shell .input-field,
|
|
|
.student-training-shell .table-textarea {
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
line-height: 1.65 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .field-block > span,
|
|
|
.student-training-shell .large-field > span,
|
|
|
.student-training-shell .product-field > span {
|
|
|
font-size: 16px !important;
|
|
|
line-height: 1.45 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page {
|
|
|
display: grid !important;
|
|
|
box-sizing: border-box !important;
|
|
|
grid-template-columns: minmax(0, 1fr) !important;
|
|
|
gap: 10px !important;
|
|
|
align-items: start !important;
|
|
|
width: 100% !important;
|
|
|
padding: 10px !important;
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page > :not(.training-ai-sidebar) {
|
|
|
grid-column: 1 !important;
|
|
|
min-width: 0 !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page > .training-intro,
|
|
|
.legacy-training-page > .training-step-area,
|
|
|
.legacy-training-page > .training-legacy-actions,
|
|
|
.legacy-training-page > .centent {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page .top_item {
|
|
|
margin-bottom: 12px !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page .top_item .el-button {
|
|
|
display: inline-flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
min-width: 136px !important;
|
|
|
height: 36px !important;
|
|
|
padding: 0 12px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #1f2937 !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
font-size: var(--student-fs-body) !important;
|
|
|
font-weight: 700 !important;
|
|
|
line-height: 1 !important;
|
|
|
letter-spacing: 0 !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page .top_item .el-button.active,
|
|
|
.legacy-training-page .top_item .active {
|
|
|
transform: none !important;
|
|
|
border-color: #1f2937 !important;
|
|
|
color: #ffffff !important;
|
|
|
background: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
// Keep long step names inside the navigation rail. Their complete name remains
|
|
|
// available through the native title tooltip applied by App.vue.
|
|
|
.student-training-shell .step-tab .step-copy,
|
|
|
.legacy-training-page .step-tab .step-copy,
|
|
|
.step-tabs .step-tab .step-copy,
|
|
|
.step-indicator .step-tab .step-copy {
|
|
|
min-width: 0 !important;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .step-tab .step-copy > strong,
|
|
|
.student-training-shell .step-tab .step-copy > b,
|
|
|
.legacy-training-page .step-tab .step-copy > strong,
|
|
|
.legacy-training-page .step-tab .step-copy > b,
|
|
|
.step-tabs .step-tab .step-copy > strong,
|
|
|
.step-tabs .step-tab .step-copy > b,
|
|
|
.step-indicator .step-tab .step-copy > strong,
|
|
|
.step-indicator .step-tab .step-copy > b {
|
|
|
display: block !important;
|
|
|
min-width: 0;
|
|
|
overflow: hidden !important;
|
|
|
text-overflow: ellipsis !important;
|
|
|
white-space: nowrap !important;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1100px) {
|
|
|
/* AI 悬浮球/面板在窄屏仍 fixed 悬浮；面板宽度自适应 100vw-32px */
|
|
|
|
|
|
.student-training-shell .workbench-actions {
|
|
|
min-width: 0 !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .training-actions {
|
|
|
gap: 14px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-steps,
|
|
|
.student-training-shell .step-indicator,
|
|
|
.student-training-shell .flow-rail {
|
|
|
align-items: stretch !important;
|
|
|
flex-direction: column !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .flow-pill,
|
|
|
.student-training-shell .step-tab,
|
|
|
.student-training-shell .flow-step,
|
|
|
.student-training-shell .training-actions .el-button.training-action,
|
|
|
.student-training-shell .training-actions button.training-action {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
|
|
|
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
|
|
|
padding: 14px 14px 18px !important;
|
|
|
}
|
|
|
|
|
|
.legacy-training-page {
|
|
|
padding: 12px !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .workbench-head {
|
|
|
flex-direction: column !important;
|
|
|
}
|
|
|
|
|
|
.student-training-shell .workbench-actions {
|
|
|
align-self: stretch !important;
|
|
|
justify-content: flex-start !important;
|
|
|
width: 100% !important;
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
|
* 学生端弹窗/抽屉/消息/下拉 墨黑极简主题
|
|
|
* 通过 body.student-light-mode 锚点命中 teleport 到 body 的弹层
|
|
|
* ============================================================ */
|
|
|
body.student-light-mode {
|
|
|
/* ---------- el-dialog ---------- */
|
|
|
--el-dialog-bg-color: #ffffff;
|
|
|
--el-dialog-border-radius: 12px;
|
|
|
--el-dialog-padding-primary: 0;
|
|
|
--el-dialog-width: 50%;
|
|
|
|
|
|
.el-overlay {
|
|
|
background-color: rgba(17, 24, 39, 0.55) !important;
|
|
|
}
|
|
|
|
|
|
.el-dialog {
|
|
|
border-radius: 12px !important;
|
|
|
box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25) !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.el-dialog__header {
|
|
|
margin: 0 !important;
|
|
|
padding: 16px 20px !important;
|
|
|
background: #ffffff !important;
|
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
|
border-radius: 12px 12px 0 0 !important;
|
|
|
margin-right: 0 !important;
|
|
|
|
|
|
.el-dialog__title {
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 16px !important;
|
|
|
font-weight: 700 !important;
|
|
|
font-family: var(--student-font-base) !important;
|
|
|
}
|
|
|
|
|
|
.el-dialog__headerbtn {
|
|
|
top: 16px !important;
|
|
|
right: 16px !important;
|
|
|
|
|
|
.el-dialog__close {
|
|
|
color: #6b7280 !important;
|
|
|
&:hover { color: #1f2937 !important; }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-dialog__body {
|
|
|
padding: 20px !important;
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 14px !important;
|
|
|
line-height: 1.6 !important;
|
|
|
}
|
|
|
|
|
|
.el-dialog__footer {
|
|
|
padding: 12px 20px 16px !important;
|
|
|
background: #ffffff !important;
|
|
|
border-top: 1px solid #f3f4f6 !important;
|
|
|
display: flex !important;
|
|
|
justify-content: flex-end !important;
|
|
|
gap: 10px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- el-message-box ---------- */
|
|
|
.el-message-box {
|
|
|
border-radius: 12px !important;
|
|
|
box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25) !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
|
|
|
.el-message-box__header {
|
|
|
padding: 16px 20px 0 !important;
|
|
|
.el-message-box__title {
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 16px !important;
|
|
|
font-weight: 700 !important;
|
|
|
}
|
|
|
.el-message-box__headerbtn .el-message-box__close { color: #6b7280 !important; }
|
|
|
}
|
|
|
.el-message-box__content {
|
|
|
color: #374151 !important;
|
|
|
font-size: 14px !important;
|
|
|
padding: 14px 20px !important;
|
|
|
}
|
|
|
.el-message-box__btns {
|
|
|
padding: 8px 20px 16px !important;
|
|
|
display: flex !important;
|
|
|
justify-content: flex-end !important;
|
|
|
gap: 10px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- el-drawer ---------- */
|
|
|
.el-drawer {
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
|
|
|
.el-drawer__header {
|
|
|
padding: 16px 20px !important;
|
|
|
margin-bottom: 0 !important;
|
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
|
.el-drawer__title {
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 16px !important;
|
|
|
font-weight: 700 !important;
|
|
|
}
|
|
|
.el-drawer__close-btn {
|
|
|
color: #6b7280 !important;
|
|
|
&:hover { color: #1f2937 !important; }
|
|
|
}
|
|
|
}
|
|
|
.el-drawer__body {
|
|
|
padding: 20px !important;
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
.el-drawer__footer {
|
|
|
padding: 12px 20px 16px !important;
|
|
|
border-top: 1px solid #e5e7eb !important;
|
|
|
display: flex !important;
|
|
|
justify-content: flex-end !important;
|
|
|
gap: 10px !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- el-message / el-notification ---------- */
|
|
|
--el-message-bg-color: #ffffff;
|
|
|
--el-message-border-color: #e5e7eb;
|
|
|
--el-message-text-color: #1f2937;
|
|
|
--el-message-padding-lr: 16px;
|
|
|
|
|
|
.el-message {
|
|
|
border-radius: 8px !important;
|
|
|
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
}
|
|
|
|
|
|
.el-notification {
|
|
|
border-radius: 10px !important;
|
|
|
box-shadow: 0 12px 36px rgba(17, 24, 39, 0.2) !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- el-select-dropdown / el-popper ---------- */
|
|
|
.el-select-dropdown,
|
|
|
.el-popper.is-light,
|
|
|
.el-date-editor .el-picker-panel {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-radius: 8px !important;
|
|
|
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
|
|
|
color: #1f2937 !important;
|
|
|
|
|
|
.el-select-dropdown__item,
|
|
|
.el-popper .el-select-dropdown__item {
|
|
|
color: #374151 !important;
|
|
|
&.is-hovering { background: #f3f4f6 !important; color: #1f2937 !important; }
|
|
|
&.is-selected { color: #1f2937 !important; font-weight: 700 !important; }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- el-popover ---------- */
|
|
|
.el-popover {
|
|
|
border-radius: 8px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
|
|
|
/* ---------- gdialog 旧自定义弹窗（popModal.vue 用） ---------- */
|
|
|
.gdialog {
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
border-radius: 12px !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
|
|
|
p, span, div, li { color: #1f2937 !important; }
|
|
|
strong, b { color: #111827 !important; }
|
|
|
|
|
|
.el-dialog__header {
|
|
|
background: #ffffff !important;
|
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
|
padding: 16px 20px !important;
|
|
|
border-radius: 12px 12px 0 0 !important;
|
|
|
margin-right: 0 !important;
|
|
|
|
|
|
.el-dialog__title {
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 16px !important;
|
|
|
font-weight: 700 !important;
|
|
|
font-family: var(--student-font-base) !important;
|
|
|
}
|
|
|
}
|
|
|
.el-dialog__body {
|
|
|
background: #ffffff !important;
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
.el-dialog__footer {
|
|
|
.el-button {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
color: #374151 !important;
|
|
|
border-radius: 8px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- dialogClass 旧自定义弹窗 ---------- */
|
|
|
.dialogClass {
|
|
|
background: #ffffff !important;
|
|
|
.el-dialog__header {
|
|
|
padding: 16px 20px !important;
|
|
|
margin-right: 0 !important;
|
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- el-button in dialog/drawer ---------- */
|
|
|
.el-dialog, .el-drawer, .el-message-box {
|
|
|
.el-button {
|
|
|
border-radius: 8px !important;
|
|
|
font-weight: 600 !important;
|
|
|
font-family: var(--student-font-base) !important;
|
|
|
|
|
|
&.el-button--primary {
|
|
|
background: #1f2937 !important;
|
|
|
border-color: #1f2937 !important;
|
|
|
color: #ffffff !important;
|
|
|
&:hover { background: #111827 !important; border-color: #111827 !important; }
|
|
|
}
|
|
|
&:not(.el-button--primary):not(.el-button--text) {
|
|
|
background: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
color: #374151 !important;
|
|
|
&:hover { border-color: #1f2937 !important; color: #1f2937 !important; }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ---------- el-form in dialog ---------- */
|
|
|
.el-dialog .el-form-item__label {
|
|
|
color: #374151 !important;
|
|
|
font-weight: 500 !important;
|
|
|
}
|
|
|
.el-dialog .el-input__wrapper,
|
|
|
.el-dialog .el-textarea__inner {
|
|
|
background: #ffffff !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
box-shadow: none !important;
|
|
|
color: #1f2937 !important;
|
|
|
&:hover, &.is-focus { border-color: #1f2937 !important; box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1) !important; }
|
|
|
}
|
|
|
}
|