chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 为学生端添加亮色主题样式并适配角色切换

Browse Source 
1. 新增学生端亮色模式类名student-light-mode，新增对应样式覆盖所有element-plus组件及自定义弹窗
2. 在布局组件中根据用户角色动态添加/移除对应亮色模式类名，清理卸载时的类名
fix/exam-question-access-material-excel-delete-draft
qinzhenpen 3 weeks ago
parent 38688cf86b
commit abdcfd72ff
2 changed files with 262 additions and 0 deletions
Show Stats Download Patch File Download Diff File

255
src/assets/styles/student-training.scss
Unescape Escape View File

@ -985,3 +985,258 @@
margin-left: 0 !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; }
}
}

7
src/layout/index.vue
Unescape Escape View File

@ -70,15 +70,22 @@ function setLayout() {
// 教师端亮色模式标识：挂在 body 上，使 teleport 到 body 的弹层（下拉、日期选择器、弹窗等）也能命中亮色样式 // 教师端亮色模式标识：挂在 body 上，使 teleport 到 body 的弹层（下拉、日期选择器、弹窗等）也能命中亮色样式
const TEACHER_LIGHT_CLASS = "teacher-light-mode"; const TEACHER_LIGHT_CLASS = "teacher-light-mode";
const STUDENT_LIGHT_CLASS = "student-light-mode";
watchEffect(() => { watchEffect(() => {
if (role.value === 3) { if (role.value === 3) {
document.body.classList.add(TEACHER_LIGHT_CLASS); document.body.classList.add(TEACHER_LIGHT_CLASS);
document.body.classList.remove(STUDENT_LIGHT_CLASS);
} else if (role.value === 4) {
document.body.classList.add(STUDENT_LIGHT_CLASS);
document.body.classList.remove(TEACHER_LIGHT_CLASS);
} else { } else {
document.body.classList.remove(TEACHER_LIGHT_CLASS); document.body.classList.remove(TEACHER_LIGHT_CLASS);
document.body.classList.remove(STUDENT_LIGHT_CLASS);
} }
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.body.classList.remove(TEACHER_LIGHT_CLASS); document.body.classList.remove(TEACHER_LIGHT_CLASS);
document.body.classList.remove(STUDENT_LIGHT_CLASS);
}); });
</script> </script>

Write Preview
Loading…
Cancel
Save