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

refactor: enhance teacher view layout and styling; add support for dark mode and improved chart configurations

Browse Source
fix/exam-question-access-material-excel-delete-draft
qinzhenpen 1 month ago
parent 5d3df886f7
commit 34eb1da613
2 changed files with 279 additions and 2 deletions
Show Stats Download Patch File Download Diff File

250
src/assets/styles/index.scss
Unescape Escape View File

@ -8,6 +8,256 @@
@import "./dialog.scss";
@import "./student-training.scss";
/* Element Plus 暗色模式：引入官方暗色 CSS 变量文件 */
@import "element-plus/theme-chalk/dark/css-vars.css";
/* Element Plus 暗色模式全局变量覆盖，与项目深色主题保持一致 */
html.dark,
.dark {
/* 主色 */
--el-color-primary: #00aaff;
--el-color-primary-light-3: #33bbff;
--el-color-primary-light-5: #55ccff;
--el-color-primary-light-7: #77ddff;
--el-color-primary-light-8: #99eeff;
--el-color-primary-light-9: #bbffff;
--el-color-primary-dark-2: #0088cc;
/* 背景色 */
--el-bg-color: #03070e;
--el-bg-color-page: #03070e;
--el-bg-color-overlay: #061827;
/* 文字色 */
--el-text-color-primary: #e8f4ff;
--el-text-color-regular: #c0d8f0;
--el-text-color-secondary: #8ec8f5;
--el-text-color-placeholder: #5a8ab5;
--el-text-color-disabled: #4a6a85;
/* 边框 */
--el-border-color: rgba(0, 170, 255, 0.2);
--el-border-color-light: rgba(0, 170, 255, 0.15);
--el-border-color-lighter: rgba(0, 170, 255, 0.1);
--el-border-color-extra-light: rgba(0, 170, 255, 0.08);
--el-border-color-dark: rgba(0, 170, 255, 0.4);
--el-border-color-darker: rgba(0, 170, 255, 0.6);
/* 填充 */
--el-fill-color: rgba(0, 40, 80, 0.5);
--el-fill-color-light: rgba(0, 30, 60, 0.4);
--el-fill-color-lighter: rgba(0, 20, 50, 0.3);
--el-fill-color-extra-light: rgba(0, 15, 40, 0.2);
--el-fill-color-dark: rgba(0, 50, 100, 0.6);
--el-fill-color-darker: rgba(0, 60, 120, 0.7);
--el-fill-color-blank: rgba(4, 20, 33, 0.92);
/* 阴影 */
--el-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
--el-box-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.3);
--el-box-shadow-lighter: 0 2px 8px rgba(0, 0, 0, 0.2);
--el-box-shadow-dark: 0 12px 48px rgba(0, 0, 0, 0.5);
/* 遮罩 */
--el-mask-color: rgba(0, 0, 0, 0.7);
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
/* Date Picker */
--el-datepicker-off-text-color: #4a6a85;
--el-datepicker-header-text-color: #e8f4ff;
--el-datepicker-text-color: #c0d8f0;
--el-datepicker-inner-border-color: rgba(0, 170, 255, 0.15);
/* Popper / Dropdown */
--el-popover-bg-color: rgba(4, 20, 33, 0.96);
--el-popover-border-color: rgba(0, 170, 255, 0.3);
--el-popover-title-color: #e8f4ff;
--el-popover-font-color: #c0d8f0;
/* Input */
--el-input-bg-color: rgba(0, 30, 60, 0.6);
--el-input-border-color: rgba(0, 170, 255, 0.3);
--el-input-hover-border-color: rgba(0, 170, 255, 0.6);
--el-input-focus-border-color: #00aaff;
--el-input-text-color: #e0f0ff;
--el-input-placeholder-color: #5a8ab5;
/* Button */
--el-button-disabled-bg-color: rgba(0, 40, 80, 0.5);
--el-button-disabled-border-color: rgba(0, 170, 255, 0.2);
--el-button-disabled-text-color: #5a8ab5;
/* Table */
--el-table-bg-color: transparent;
--el-table-tr-bg-color: rgba(2, 16, 27, 0.78);
--el-table-header-bg-color: rgba(9, 48, 73, 0.96);
--el-table-row-hover-bg-color: rgba(0, 111, 177, 0.18);
--el-table-border-color: rgba(54, 159, 212, 0.2);
--el-table-text-color: #dff4ff;
--el-table-header-text-color: #dff6ff;
/* Dialog */
--el-dialog-bg-color: rgba(4, 13, 24, 0.98);
/* Message / Notification */
--el-message-bg-color: rgba(4, 20, 33, 0.96);
/* Select */
--el-select-dropdown-bg-color: rgba(4, 20, 33, 0.96);
--el-select-option-color: #c0d8f0;
--el-select-option-hover-bg-color: rgba(0, 111, 177, 0.18);
--el-select-option-selected-bg-color: rgba(0, 170, 255, 0.2);
--el-select-group-color: #8ec8f5;
/* Pagination */
--el-pagination-bg-color: transparent;
--el-pagination-button-bg-color: rgba(3, 24, 36, 0.85);
--el-pagination-hover-color: #00aaff;
--el-pagination-button-disabled-bg-color: rgba(3, 24, 36, 0.5);
/* Tooltip */
--el-tooltip-bg-color: rgba(0, 20, 40, 0.95);
--el-tooltip-border-color: rgba(0, 170, 255, 0.5);
--el-tooltip-font-color: #e0f0ff;
/* Tag */
--el-tag-bg-color: rgba(0, 60, 120, 0.4);
--el-tag-border-color: rgba(0, 170, 255, 0.3);
--el-tag-font-color: #8ec8f5;
/* Card */
--el-card-bg-color: rgba(10, 30, 60, 0.6);
--el-card-border-color: rgba(0, 170, 255, 0.2);
}
/* Element Plus 暗色模式下，DatePicker 弹层面板强制使用项目深色背景 */
.dark,
html.dark {
.el-date-picker {
--el-datepicker-bg-color: rgba(4, 20, 33, 0.98) !important;
background-color: rgba(4, 20, 33, 0.98) !important;
border-color: rgba(0, 170, 255, 0.4) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 170, 255, 0.15) !important;
.el-picker-panel__header {
.el-picker-panel__header-label,
button {
color: #e0f0ff !important;
}
button:hover {
color: #00aaff !important;
}
}
.el-date-table th {
color: #8ec8f5 !important;
}
.el-date-table td {
color: #c0d8f0 !important;
&.current:not(.disabled) .el-date-table-cell__text {
color: #ffffff !important;
background-color: rgba(0, 170, 255, 0.35) !important;
}
&.today .el-date-table-cell__text {
color: #00ffcc !important;
font-weight: bold !important;
}
&.available:hover .el-date-table-cell__text {
background-color: rgba(0, 170, 255, 0.2) !important;
color: #ffffff !important;
}
&.prev-month .el-date-table-cell__text,
&.next-month .el-date-table-cell__text {
color: #4a6a85 !important;
}
&.disabled .el-date-table-cell__text {
color: #3a5a75 !important;
}
}
.el-month-table td,
.el-year-table td {
color: #c0d8f0 !important;
&.current .el-month-table-cell__text,
&.current .el-year-table-cell__text {
color: #00aaff !important;
}
&.today .el-month-table-cell__text,
&.today .el-year-table-cell__text {
color: #00ffcc !important;
}
&:hover .el-month-table-cell__text,
&:hover .el-year-table-cell__text {
background-color: rgba(0, 170, 255, 0.18) !important;
}
}
.el-picker-panel__footer {
background-color: rgba(4, 20, 33, 0.98) !important;
border-top-color: rgba(0, 170, 255, 0.2) !important;
.el-button {
color: #cfeaff !important;
background: rgba(4, 24, 38, 0.92) !important;
border-color: rgba(88, 178, 224, 0.45) !important;
}
.el-button--text {
color: #80d7ff !important;
}
.el-button--primary {
background: linear-gradient(135deg, #0066cc, #00aaff) !important;
border-color: transparent !important;
color: #ffffff !important;
}
}
}
.el-time-panel {
background-color: rgba(4, 20, 33, 0.98) !important;
border-color: rgba(0, 170, 255, 0.3) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
.el-time-panel__header {
.el-time-panel__title {
color: #e0f0ff !important;
}
}
.el-time-spinner__item {
color: #c0d8f0 !important;
&:hover:not(.is-disabled) {
background-color: rgba(0, 170, 255, 0.15) !important;
color: #ffffff !important;
}
&.is-active {
color: #00aaff !important;
font-weight: 700 !important;
}
&.is-disabled {
color: #3a5a75 !important;
}
}
}
/* 日期选择器内联输入框（页面上的输入框，不影响弹层内的） */
.search-form .el-date-picker .el-input__wrapper {
background: rgba(0, 30, 60, 0.6) !important;
border-color: rgba(0, 170, 255, 0.3) !important;
box-shadow: none !important;
}
.search-form .el-date-picker .el-input__inner {
color: #e0f0ff !important;
&::placeholder {
color: #5a8ab5 !important;
}
}
.search-form .el-date-picker .el-input__prefix,
.search-form .el-date-picker .el-input__suffix {
color: #8ec8f5 !important;
}
}
body {
height: 100%;
margin: 0;

31
src/layout/components/AppMain.vue
Unescape Escape View File

@ -7,7 +7,7 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<section :class="mainClass">
<section :class="mainClass" class="main-section">
<div v-if="isDemo" class="student-demo-banner">演示模式：{{ demoClassName }}<button @click="exitDemo">退出演示</button></div>
<router-view v-slot="{ Component, route }">
<keep-alive :include="tagsViewStore.cachedViews">
@ -182,17 +182,27 @@ router.beforeEach((to, from, next) => {
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
height: calc(100vh - 50px);
//height: calc(100vh - 50px);
height: 100%;
width: 100%;
position: relative;
overflow: auto;
background: url("@/assets/images/背景.webp") no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
.main-section {
flex: 1;
display: flex;
flex-direction: column;
}
}
.student-demo-banner{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;padding:8px 18px;color:#fff;background:#b45309}.student-demo-banner button{border:0;border-radius:4px;padding:3px 10px;cursor:pointer}
.student-task-loading{position:fixed;inset:50px 0 0;z-index:90;display:grid;place-items:start center;padding-top:96px;background:linear-gradient(135deg,rgba(2,15,26,.985),rgba(4,31,47,.985));}.student-task-loading__panel{display:grid;gap:18px;width:min(820px,calc(100vw - 72px));padding:32px;border:1px solid rgba(66,201,250,.34);border-radius:18px;background:rgba(4,27,42,.8);box-shadow:0 22px 52px rgba(0,0,0,.32)}.student-task-loading__label{color:#bdefff;font-weight:700;letter-spacing:.04em}.student-task-loading__line{display:block;height:18px;border-radius:99px;background:linear-gradient(90deg,rgba(26,107,143,.32),rgba(88,208,255,.58),rgba(26,107,143,.32));background-size:200% 100%;animation:student-task-loading-shimmer 1.2s linear infinite}.student-task-loading__line--title{width:42%;height:30px}.student-task-loading__line--short{width:68%}@keyframes student-task-loading-shimmer{to{background-position:-200% 0}}
.app-main2 {
min-height: calc(100vh - 50px);
height: 100%;
width: 100%;
position: relative;
overflow: auto;
@ -200,9 +210,18 @@ router.beforeEach((to, from, next) => {
radial-gradient(circle at 12% 16%, rgba(0, 170, 255, 0.24), transparent 28%),
radial-gradient(circle at 85% 4%, rgba(43, 110, 255, 0.16), transparent 28%),
linear-gradient(135deg, #07101d 0%, #03060c 100%);
display: flex;
flex-direction: column;
.main-section {
flex: 1;
display: flex;
flex-direction: column;
}
}
.teacher-main {
min-height: calc(100vh - 50px);
height: 100%;
width: 100%;
position: relative;
overflow: auto;
@ -211,6 +230,14 @@ router.beforeEach((to, from, next) => {
radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.5), transparent 34%),
radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.34), transparent 28%),
linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%);
display: flex;
flex-direction: column;
.main-section {
flex: 1;
display: flex;
flex-direction: column;
}
}
.fixed-header + .app-main {
padding-top: 50px;

Write Preview
Loading…
Cancel
Save