You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
6.6 KiB
SCSS
180 lines
6.6 KiB
SCSS
%exam-pill-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 40px;
|
|
min-height: 40px;
|
|
padding: 0 18px;
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
/*
|
|
* 学生端考试模块主题：令牌、面板材质、按钮与 Element Plus 深色覆盖。
|
|
* 规范见 docs/student-training-ui-standard.md 第 14 节；页面 scoped 样式不得再定义另一套 --exam-*。
|
|
*/
|
|
.exam-page {
|
|
--exam-text: #e8f5ff;
|
|
--exam-text-strong: #ffffff;
|
|
--exam-secondary: #d7ecff;
|
|
--exam-muted: #8eafc2;
|
|
--exam-accent: #71dfff;
|
|
--exam-panel: linear-gradient(145deg, rgba(6, 34, 58, 0.9), rgba(3, 15, 27, 0.94));
|
|
--exam-panel-border: rgba(49, 151, 221, 0.34);
|
|
--exam-card: rgba(1, 14, 26, 0.72);
|
|
--exam-card-border: rgba(0, 180, 255, 0.22);
|
|
--exam-line: rgba(127, 186, 215, 0.22);
|
|
--exam-ok: #57d9a8;
|
|
--exam-bad: #ff9b86;
|
|
--exam-pending: #7fd0ff;
|
|
--exam-current: #ffc861;
|
|
--exam-primary-gradient: linear-gradient(110deg, #0b84bd, #096491);
|
|
--exam-primary-border: rgba(92, 224, 255, 0.7);
|
|
--exam-active-gradient: linear-gradient(110deg, #0a6b9e, #0a5c86);
|
|
--exam-outline-bg: rgba(17, 126, 178, 0.36);
|
|
--exam-outline-border: rgba(99, 217, 255, 0.55);
|
|
|
|
box-sizing: border-box;
|
|
color: var(--exam-text);
|
|
border: 1px solid var(--exam-panel-border);
|
|
border-radius: 14px;
|
|
background: var(--exam-panel);
|
|
box-shadow: 0 14px 36px rgba(0, 12, 30, 0.38), inset 0 1px 0 rgba(173, 225, 255, 0.08), 0 0 18px rgba(16, 109, 189, 0.25);
|
|
|
|
h1, h2, h3 { color: var(--exam-text-strong); }
|
|
p { color: var(--exam-muted); }
|
|
|
|
/* 第 6.1 节 小型轮廓按钮 */
|
|
.exam-outline-action {
|
|
@extend %exam-pill-action;
|
|
border: 1px solid var(--exam-outline-border);
|
|
background: var(--exam-outline-bg);
|
|
color: #e9fbff;
|
|
&:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); }
|
|
&:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
}
|
|
|
|
/* 第 6.2 节 常规主按钮 */
|
|
.exam-primary-action {
|
|
@extend %exam-pill-action;
|
|
border: 1px solid var(--exam-primary-border);
|
|
background: var(--exam-primary-gradient);
|
|
color: #ffffff;
|
|
&:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); }
|
|
&:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
}
|
|
|
|
/* 第 6.3 节 底部大操作按钮 */
|
|
.exam-submit-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 172px;
|
|
height: 64px;
|
|
padding: 0 28px;
|
|
border: 1px solid #2c83aa;
|
|
border-radius: 6px;
|
|
background: rgba(13, 64, 88, 0.62);
|
|
color: #dff7ff;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
|
&:hover { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(16, 82, 112, 0.72); }
|
|
}
|
|
|
|
/* Element Plus 深色覆盖：第 11 节第 4 条 */
|
|
.el-button {
|
|
height: 40px;
|
|
padding: 0 18px;
|
|
border: 1px solid var(--exam-outline-border);
|
|
border-radius: 999px;
|
|
background: var(--exam-outline-bg);
|
|
color: #e9fbff;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
&:hover, &:focus { border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); color: #f2fdff; }
|
|
&.is-circle { width: 40px; padding: 0; border-radius: 50%; }
|
|
&.el-button--primary {
|
|
border-color: var(--exam-primary-border);
|
|
background: var(--exam-primary-gradient);
|
|
color: #ffffff;
|
|
&:hover, &:focus { background: var(--exam-primary-gradient); color: #ffffff; }
|
|
}
|
|
&.is-text, &.el-button--text {
|
|
height: auto;
|
|
padding: 0;
|
|
border-color: transparent;
|
|
background: none;
|
|
color: var(--exam-accent);
|
|
font-weight: 700;
|
|
&:hover, &:focus { background: none; border-color: transparent; color: #a8efff; }
|
|
}
|
|
&:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
&:disabled:not(.el-button--primary):hover { background: var(--exam-outline-bg); }
|
|
}
|
|
|
|
.el-tag {
|
|
border: 1px solid rgba(106, 226, 255, 0.45);
|
|
border-radius: 999px;
|
|
background: rgba(0, 127, 184, 0.25);
|
|
color: var(--exam-secondary);
|
|
&.el-tag--success { border-color: rgba(87, 217, 168, 0.55); background: rgba(87, 217, 168, 0.16); color: #b7f4dc; }
|
|
&.el-tag--danger { border-color: rgba(255, 155, 134, 0.55); background: rgba(255, 155, 134, 0.16); color: #ffd3c8; }
|
|
&.el-tag--info { border-color: rgba(127, 208, 255, 0.45); background: rgba(127, 208, 255, 0.14); color: #d6efff; }
|
|
}
|
|
|
|
.el-input__wrapper, .el-textarea__inner {
|
|
background: #0f1a24;
|
|
box-shadow: 0 0 0 1px rgba(45, 95, 126, 0.95) inset;
|
|
border-radius: 14px;
|
|
color: var(--exam-text);
|
|
}
|
|
.el-input__inner { color: var(--exam-text); }
|
|
.el-textarea__inner { padding: 12px 14px; line-height: 1.65; }
|
|
.el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #8299aa; }
|
|
.el-input__wrapper.is-focus, .el-textarea__inner:focus { box-shadow: 0 0 0 1px rgba(92, 224, 255, 0.7) inset, 0 0 0 3px rgba(0, 174, 255, 0.13); }
|
|
|
|
/* 第 7.3 节 选项：整行为深色卡，选中用激活渐变，圆点不再是默认蓝色 */
|
|
.el-radio, .el-checkbox {
|
|
margin: 0;
|
|
height: auto;
|
|
padding: 14px 16px;
|
|
border: 1px solid rgba(127, 186, 215, 0.35);
|
|
border-radius: 14px;
|
|
background: var(--exam-card);
|
|
white-space: normal;
|
|
transition: border-color 0.2s ease, background 0.2s ease;
|
|
&:hover { border-color: rgba(99, 217, 255, 0.55); }
|
|
.el-radio__inner, .el-checkbox__inner {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 1px solid rgba(99, 217, 255, 0.55);
|
|
background: #0f1a24;
|
|
}
|
|
.el-radio__inner { border-radius: 50%; }
|
|
.el-radio__inner::after { background: var(--exam-accent); }
|
|
.el-checkbox__inner { border-radius: 5px; }
|
|
.el-checkbox__inner::after { border-color: #04121d; border-width: 2px; }
|
|
.el-radio__label, .el-checkbox__label { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; color: var(--exam-secondary); font-weight: 400; }
|
|
&.is-checked {
|
|
border-color: var(--exam-primary-border);
|
|
background: var(--exam-active-gradient);
|
|
.el-radio__label, .el-checkbox__label { color: #ffffff; }
|
|
.el-radio__inner, .el-checkbox__inner { border-color: var(--exam-accent); background: #062430; }
|
|
}
|
|
}
|
|
|
|
.el-empty__description p { color: var(--exam-muted); }
|
|
.el-loading-mask { background-color: rgba(3, 15, 27, 0.72); }
|
|
.el-icon { color: inherit; }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.exam-page .exam-submit-action { width: 100%; }
|
|
}
|