|
|
#app {
|
|
|
.main-container {
|
|
|
height: calc(100% - 50px);
|
|
|
transition: margin-left 0.28s;
|
|
|
margin-left: $base-sidebar-width;
|
|
|
position: relative;
|
|
|
}
|
|
|
.sidebarHide {
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
.sidebar-container {
|
|
|
-webkit-transition: width 0.28s;
|
|
|
transition: width 0.28s;
|
|
|
width: 239px !important;
|
|
|
background: url("../images/sidebar-background.webp") no-repeat center;
|
|
|
// background-color: $base-menu-background;
|
|
|
background-size: 100% 100%;
|
|
|
height: 100%;
|
|
|
position: fixed;
|
|
|
font-size: 0px;
|
|
|
top: -8px;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 1001;
|
|
|
overflow: hidden;
|
|
|
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
|
|
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
|
|
// reset element-ui css
|
|
|
.horizontal-collapse-transition {
|
|
|
transition:
|
|
|
0s width ease-in-out,
|
|
|
0s padding-left ease-in-out,
|
|
|
0s padding-right ease-in-out;
|
|
|
}
|
|
|
.scrollbar-wrapper {
|
|
|
overflow-x: hidden !important;
|
|
|
}
|
|
|
|
|
|
.el-scrollbar__bar.is-vertical {
|
|
|
right: 0px;
|
|
|
}
|
|
|
|
|
|
.el-scrollbar {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
&.has-logo {
|
|
|
.el-scrollbar {
|
|
|
height: calc(100% - 50px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.is-horizontal {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.svg-icon {
|
|
|
margin-right: 16px;
|
|
|
}
|
|
|
.el-menu {
|
|
|
border: none;
|
|
|
height: 100%;
|
|
|
width: 100% !important;
|
|
|
background-color: transparent !important;
|
|
|
padding: 25px 18px;
|
|
|
|
|
|
.el-sub-menu {
|
|
|
margin-bottom: 15px !important;
|
|
|
.el-sub-menu__title {
|
|
|
height: 37px;
|
|
|
line-height: 37px;
|
|
|
background: url("../images/sidebar-normal.png") no-repeat;
|
|
|
background-size: 100% 100% !important;
|
|
|
}
|
|
|
.el-menu {
|
|
|
padding: 1px 18px !important;
|
|
|
.el-menu-item {
|
|
|
min-width: 100% !important;
|
|
|
height: 30px;
|
|
|
color: #fff;
|
|
|
padding-left: 4px;
|
|
|
background: transparent !important;
|
|
|
margin-bottom: 0px;
|
|
|
&:hover {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.is-opened {
|
|
|
margin-bottom: 0px !important;
|
|
|
}
|
|
|
.el-menu-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
height: 37px;
|
|
|
line-height: 37px;
|
|
|
color: #fff;
|
|
|
background: url("../images/sidebar-normal.png") no-repeat;
|
|
|
background-size: 100% 100% !important;
|
|
|
}
|
|
|
|
|
|
.is-active {
|
|
|
background: url("../images/sidebar-active.png") no-repeat !important;
|
|
|
.el-menu {
|
|
|
.nest-menu {
|
|
|
.is-active {
|
|
|
color: #008efe !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-sub-menu__title {
|
|
|
background: url("../images/sidebar-active.png") no-repeat !important;
|
|
|
background-size: 100% 100% !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-menu-item,
|
|
|
.menu-title {
|
|
|
// overflow: hidden !important;
|
|
|
// text-overflow: ellipsis !important;
|
|
|
// white-space: nowrap !important;
|
|
|
}
|
|
|
|
|
|
.el-menu-item .el-menu-tooltip__trigger {
|
|
|
display: inline-block !important;
|
|
|
}
|
|
|
|
|
|
// menu hover
|
|
|
.sub-menu-title-noDropdown,
|
|
|
.el-sub-menu__title {
|
|
|
&:hover {
|
|
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
& .theme-dark .is-active > .el-sub-menu__title {
|
|
|
color: $base-menu-color-active !important;
|
|
|
}
|
|
|
|
|
|
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
|
|
& .el-sub-menu .el-menu-item {
|
|
|
min-width: $base-sidebar-width !important;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
|
|
& .theme-dark .el-sub-menu .el-menu-item {
|
|
|
background-color: $base-sub-menu-background !important;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: $base-sub-menu-hover !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.hideSidebar {
|
|
|
.sidebar-container {
|
|
|
width: 54px !important;
|
|
|
}
|
|
|
|
|
|
.main-container {
|
|
|
margin-left: 54px;
|
|
|
}
|
|
|
|
|
|
.sub-menu-title-noDropdown {
|
|
|
padding: 0 !important;
|
|
|
position: relative;
|
|
|
|
|
|
.el-tooltip {
|
|
|
padding: 0 !important;
|
|
|
|
|
|
.svg-icon {
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-sub-menu {
|
|
|
overflow: hidden;
|
|
|
|
|
|
& > .el-sub-menu__title {
|
|
|
padding: 0 !important;
|
|
|
|
|
|
.svg-icon {
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-menu--collapse {
|
|
|
.el-sub-menu {
|
|
|
& > .el-sub-menu__title {
|
|
|
& > span {
|
|
|
height: 0;
|
|
|
width: 0;
|
|
|
overflow: hidden;
|
|
|
visibility: hidden;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
& > i {
|
|
|
height: 0;
|
|
|
width: 0;
|
|
|
overflow: hidden;
|
|
|
visibility: hidden;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-menu--collapse .el-menu .el-sub-menu {
|
|
|
min-width: $base-sidebar-width !important;
|
|
|
}
|
|
|
// mobile responsive
|
|
|
.mobile {
|
|
|
.main-container {
|
|
|
margin-left: 0px;
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
transition: transform 0.28s;
|
|
|
width: $base-sidebar-width !important;
|
|
|
}
|
|
|
|
|
|
&.hideSidebar {
|
|
|
.sidebar-container {
|
|
|
pointer-events: none;
|
|
|
transition-duration: 0.3s;
|
|
|
transform: translate3d(-$base-sidebar-width, 0, 0);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.withoutAnimation {
|
|
|
.main-container,
|
|
|
.sidebar-container {
|
|
|
transition: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 纯顶部导航模式（超管/校管，不渲染侧边栏）：清除侧边菜单默认宽度的占位 */
|
|
|
/* 需压过 #app .teacherLayout .main-container 的 margin-left:180px !important（位置更靠后），用双类提权 */
|
|
|
.topNavbarOnly.teacherLayout .main-container,
|
|
|
.topNavbarOnly .main-container {
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
|
|
|
/* 超管端主区域：与教师端一致改浅色（body.teacher-light-mode 时），保留暗色作为无亮色主题时的兜底 */
|
|
|
.platform-admin-main {
|
|
|
height: calc(100vh - 50px);
|
|
|
overflow: auto !important;
|
|
|
background: radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%), radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%), linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: #111a24;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #2d8fcf;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* @at-root 跳出 #app 并提升特异性（压过 #app .platform-admin-main 的 ID 权重深色规则） */
|
|
|
@at-root body.teacher-light-mode #app .platform-admin-main {
|
|
|
// 纯白画布，与教师端/学生端亮色体系一致（禁渐变、禁浅灰底）
|
|
|
background: #ffffff !important;
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #d1d5db;
|
|
|
|
|
|
&:hover {
|
|
|
background: #9ca3af;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.studentLayout,
|
|
|
.teacherLayout {
|
|
|
background: radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.74), transparent 34%), radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.24), transparent 28%), linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%);
|
|
|
|
|
|
.main-container {
|
|
|
margin-left: 304px;
|
|
|
background: radial-gradient(circle at 10% 20%, rgba(11, 42, 74, 0.72), transparent 34%), radial-gradient(circle at 88% 8%, rgba(0, 136, 210, 0.22), transparent 28%), linear-gradient(135deg, #02050c 0%, #07101d 52%, #02060d 100%);
|
|
|
}
|
|
|
|
|
|
.app-main,
|
|
|
.teacher-main {
|
|
|
height: calc(100vh - 50px);
|
|
|
padding: 28px 32px 40px 24px;
|
|
|
overflow: auto;
|
|
|
background: radial-gradient(circle at 12% 18%, rgba(14, 74, 112, 0.45), transparent 34%), radial-gradient(circle at 78% 6%, rgba(25, 92, 170, 0.3), transparent 28%), linear-gradient(135deg, #03070e 0%, #061827 48%, #02060d 100%) !important;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: #111a24;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #2d8fcf;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
top: 50px;
|
|
|
width: 304px !important;
|
|
|
height: calc(100% - 50px);
|
|
|
padding: 0;
|
|
|
background: transparent !important;
|
|
|
border-right: 0;
|
|
|
box-shadow: none;
|
|
|
overflow: hidden;
|
|
|
|
|
|
&::before {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
&.student-sidebar-shell {
|
|
|
position: fixed;
|
|
|
z-index: 1;
|
|
|
height: calc(100% - 50px);
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
.student-sidebar-scroll {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.scrollbar-wrapper {
|
|
|
overflow-x: hidden !important;
|
|
|
}
|
|
|
|
|
|
.student-course-nav {
|
|
|
width: calc(100% - 40px);
|
|
|
min-height: calc(100% - 56px);
|
|
|
margin: 28px 20px;
|
|
|
padding: 24px 16px 28px;
|
|
|
border: 1px solid rgba(0, 180, 255, 0.25);
|
|
|
border-radius: 32px;
|
|
|
background: rgba(8, 18, 28, 0.7);
|
|
|
box-shadow:
|
|
|
0 22px 48px rgba(0, 0, 0, 0.22),
|
|
|
inset 0 1px 0 rgba(169, 229, 255, 0.08);
|
|
|
backdrop-filter: blur(12px);
|
|
|
}
|
|
|
|
|
|
.student-course-heading {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
width: 100%;
|
|
|
min-height: 22px;
|
|
|
margin: 0 0 14px;
|
|
|
border: 0;
|
|
|
padding: 0 6px;
|
|
|
line-height: 1.35;
|
|
|
text-align: left;
|
|
|
color: #7e9fc5;
|
|
|
background: transparent;
|
|
|
font-family: inherit;
|
|
|
font-size: 12px;
|
|
|
font-weight: 800;
|
|
|
letter-spacing: 1.6px;
|
|
|
text-transform: uppercase;
|
|
|
white-space: normal;
|
|
|
cursor: pointer;
|
|
|
transition: color 0.2s ease;
|
|
|
}
|
|
|
|
|
|
.student-course-heading:hover,
|
|
|
.student-course-heading.active {
|
|
|
color: #c9edff;
|
|
|
}
|
|
|
|
|
|
.student-course-list {
|
|
|
margin: 0 0 28px;
|
|
|
}
|
|
|
|
|
|
.student-course-link {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
width: 100%;
|
|
|
min-height: 42px;
|
|
|
margin: 0 0 8px;
|
|
|
border: 1px solid transparent;
|
|
|
border-radius: 18px;
|
|
|
padding: 10px 14px 10px 16px;
|
|
|
line-height: 1.4;
|
|
|
text-align: left;
|
|
|
color: #d7e9ff;
|
|
|
background: rgba(255, 255, 255, 0.025);
|
|
|
font-family: inherit;
|
|
|
font-size: 15px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0;
|
|
|
white-space: normal;
|
|
|
overflow: hidden;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
color 0.2s ease,
|
|
|
transform 0.2s ease,
|
|
|
border-color 0.2s ease,
|
|
|
background 0.2s ease,
|
|
|
box-shadow 0.2s ease;
|
|
|
}
|
|
|
|
|
|
.student-course-icon {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
display: inline-flex;
|
|
|
flex: 0 0 auto;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
border: 1px solid rgba(0, 170, 255, 0.26);
|
|
|
border-radius: 10px;
|
|
|
color: #7ee9ff;
|
|
|
background: linear-gradient(135deg, rgba(0, 170, 255, 0.24), rgba(43, 110, 255, 0.08)), rgba(1, 24, 36, 0.82);
|
|
|
box-shadow:
|
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
|
0 0 10px rgba(0, 170, 255, 0.08);
|
|
|
|
|
|
svg {
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-course-icon--heading {
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
border-radius: 9px;
|
|
|
color: #9defff;
|
|
|
background: rgba(0, 132, 198, 0.18);
|
|
|
|
|
|
svg {
|
|
|
width: 13px;
|
|
|
height: 13px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-course-text {
|
|
|
min-width: 0;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.student-course-link:hover,
|
|
|
.student-course-link.active {
|
|
|
color: #ffffff;
|
|
|
border-color: rgba(0, 170, 255, 0.72);
|
|
|
background: linear-gradient(95deg, rgba(0, 160, 255, 0.2), rgba(0, 100, 200, 0.1));
|
|
|
box-shadow: 0 2px 14px rgba(0, 170, 255, 0.18);
|
|
|
transform: translateX(3px);
|
|
|
}
|
|
|
|
|
|
.student-course-link.active {
|
|
|
border-left: 3px solid #00aaff;
|
|
|
}
|
|
|
|
|
|
.student-course-link.disabled {
|
|
|
cursor: default;
|
|
|
}
|
|
|
|
|
|
.student-report-button {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 8px;
|
|
|
width: calc(100% - 28px);
|
|
|
min-height: 44px;
|
|
|
margin: 18px 14px 0;
|
|
|
border: 1px solid rgba(0, 170, 255, 0.65);
|
|
|
border-radius: 40px;
|
|
|
line-height: 42px;
|
|
|
text-align: center;
|
|
|
color: #caf0ff;
|
|
|
background: rgba(0, 160, 255, 0.15);
|
|
|
font-family: inherit;
|
|
|
font-size: 14px;
|
|
|
font-weight: 800;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background 0.2s ease,
|
|
|
box-shadow 0.2s ease;
|
|
|
|
|
|
&:hover,
|
|
|
&.active {
|
|
|
color: #ffffff;
|
|
|
background: rgba(0, 170, 255, 0.26);
|
|
|
box-shadow: 0 0 14px rgba(34, 183, 237, 0.32);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mobile.studentLayout,
|
|
|
.mobile.teacherLayout {
|
|
|
.main-container {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
width: 304px !important;
|
|
|
}
|
|
|
|
|
|
&.hideSidebar {
|
|
|
.sidebar-container {
|
|
|
transform: translate3d(-304px, 0, 0);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.teacherLayout {
|
|
|
.sidebar-container {
|
|
|
border-right: 1px solid rgba(0, 180, 255, 0.24);
|
|
|
|
|
|
&::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 3;
|
|
|
width: 1px;
|
|
|
background: linear-gradient(180deg, rgba(81, 211, 255, 0.38), rgba(81, 211, 255, 0.18) 45%, rgba(81, 211, 255, 0.28));
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
.student-sidebar-scroll,
|
|
|
.el-scrollbar__wrap,
|
|
|
.el-scrollbar__view {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.el-scrollbar__bar.is-vertical {
|
|
|
right: 4px;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.2s ease;
|
|
|
}
|
|
|
|
|
|
&:hover .el-scrollbar__bar.is-vertical {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.student-course-nav {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
min-height: 100%;
|
|
|
margin: 0;
|
|
|
padding: 28px 20px;
|
|
|
box-sizing: border-box;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: radial-gradient(circle at 18% 10%, rgba(0, 170, 255, 0.12), transparent 34%), rgba(8, 18, 28, 0.82);
|
|
|
box-shadow:
|
|
|
inset -1px 0 0 rgba(169, 229, 255, 0.06),
|
|
|
12px 0 32px rgba(0, 5, 16, 0.2);
|
|
|
}
|
|
|
|
|
|
.student-course-list {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.student-course-link {
|
|
|
min-height: 46px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.course-sidebar-toggle {
|
|
|
position: absolute;
|
|
|
top: 14px;
|
|
|
right: 14px;
|
|
|
z-index: 8;
|
|
|
display: grid;
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
place-items: center;
|
|
|
border: 1px solid rgba(89, 218, 255, 0.5);
|
|
|
border-radius: 9px;
|
|
|
color: #dff8ff;
|
|
|
background: rgba(5, 54, 83, 0.84);
|
|
|
box-shadow: 0 0 14px rgba(0, 170, 255, 0.15);
|
|
|
font-size: 24px;
|
|
|
line-height: 1;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background 0.2s ease,
|
|
|
border-color 0.2s ease,
|
|
|
transform 0.2s ease;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: #70e4ff;
|
|
|
background: rgba(11, 116, 160, 0.8);
|
|
|
transform: translateX(1px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.hideSidebar {
|
|
|
.sidebar-container {
|
|
|
width: 64px !important;
|
|
|
|
|
|
.student-course-nav {
|
|
|
padding: 58px 10px 24px;
|
|
|
}
|
|
|
|
|
|
.student-course-heading,
|
|
|
.student-course-link {
|
|
|
justify-content: center;
|
|
|
padding-right: 0;
|
|
|
padding-left: 0;
|
|
|
}
|
|
|
|
|
|
.student-course-heading {
|
|
|
margin-bottom: 14px;
|
|
|
}
|
|
|
|
|
|
.student-course-link {
|
|
|
min-height: 42px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.student-course-text {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.course-sidebar-toggle {
|
|
|
right: 16px;
|
|
|
transform: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.main-container {
|
|
|
margin-left: 64px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 仅学生实训任务页提供课程导航的图标轨道，离开任务页不改变原有学生布局。 */
|
|
|
.studentLayout:has(.student-training-shell) {
|
|
|
.sidebar-container {
|
|
|
border-right: 1px solid rgba(0, 180, 255, 0.24);
|
|
|
|
|
|
.student-course-nav {
|
|
|
margin: 20px;
|
|
|
}
|
|
|
|
|
|
.course-sidebar-toggle {
|
|
|
position: absolute;
|
|
|
top: 28px;
|
|
|
right: 28px;
|
|
|
z-index: 8;
|
|
|
display: grid;
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
place-items: center;
|
|
|
border: 1px solid rgba(89, 218, 255, 0.5);
|
|
|
border-radius: 9px;
|
|
|
color: #dff8ff;
|
|
|
background: rgba(5, 54, 83, 0.84);
|
|
|
box-shadow: 0 0 14px rgba(0, 170, 255, 0.15);
|
|
|
font-size: 24px;
|
|
|
line-height: 1;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background 0.2s ease,
|
|
|
border-color 0.2s ease,
|
|
|
transform 0.2s ease;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus-visible {
|
|
|
border-color: #70e4ff;
|
|
|
outline: none;
|
|
|
background: rgba(11, 116, 160, 0.8);
|
|
|
transform: translateX(1px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.hideSidebar {
|
|
|
.sidebar-container {
|
|
|
width: 64px !important;
|
|
|
|
|
|
.student-course-nav {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
min-height: 100%;
|
|
|
margin: 0;
|
|
|
padding: 58px 11px 24px;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: linear-gradient(180deg, rgba(8, 31, 47, 0.92), rgba(3, 16, 28, 0.98));
|
|
|
box-shadow: inset -1px 0 0 rgba(132, 228, 255, 0.1);
|
|
|
}
|
|
|
|
|
|
.student-course-heading,
|
|
|
.student-course-link {
|
|
|
box-sizing: border-box;
|
|
|
width: 42px;
|
|
|
justify-content: center;
|
|
|
padding-right: 0;
|
|
|
padding-left: 0;
|
|
|
}
|
|
|
|
|
|
/* 分类名收起后没有辨识价值，保留具有页面入口的标题按钮。 */
|
|
|
div.student-course-heading {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.student-course-heading {
|
|
|
min-height: 42px;
|
|
|
margin: 0 0 10px;
|
|
|
}
|
|
|
|
|
|
.student-course-link {
|
|
|
min-height: 42px;
|
|
|
margin: 0 0 8px;
|
|
|
border-radius: 13px;
|
|
|
background: rgba(255, 255, 255, 0.025);
|
|
|
}
|
|
|
|
|
|
.student-course-list {
|
|
|
margin: 0 0 10px;
|
|
|
}
|
|
|
|
|
|
.student-course-text {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.student-course-icon {
|
|
|
width: 27px;
|
|
|
height: 27px;
|
|
|
}
|
|
|
|
|
|
.student-course-link.active {
|
|
|
border: 1px solid rgba(0, 190, 255, 0.85);
|
|
|
background: linear-gradient(135deg, rgba(0, 174, 255, 0.28), rgba(18, 95, 190, 0.14));
|
|
|
box-shadow: 0 0 14px rgba(0, 178, 255, 0.25);
|
|
|
transform: none;
|
|
|
}
|
|
|
|
|
|
.course-sidebar-toggle {
|
|
|
top: 12px;
|
|
|
right: 16px;
|
|
|
transform: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.main-container {
|
|
|
margin-left: 64px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// when menu collapsed
|
|
|
.el-menu--vertical {
|
|
|
& > .el-menu {
|
|
|
.svg-icon {
|
|
|
margin-right: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
|
|
.el-menu-item {
|
|
|
&:hover {
|
|
|
// you can use $sub-menuHover
|
|
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// the scroll bar appears when the sub-menu is too long
|
|
|
> .el-menu--popup {
|
|
|
max-height: 100vh;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
&::-webkit-scrollbar-track-piece {
|
|
|
background: #d3dce6;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #99a9bf;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 学生端 + 教师端共用亮色主题覆盖
|
|
|
* 取代 #app .studentLayout, #app .teacherLayout 共享的暗色背景（L274-411）
|
|
|
* 超管端 (role 1) 走独立深色路径：#app .platform-admin-main (L250-272)
|
|
|
*/
|
|
|
#app .studentLayout,
|
|
|
#app .teacherLayout {
|
|
|
// 整体浅色背景 + 蓝色点缀，营造明亮的科技感
|
|
|
background: radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.07), transparent 34%), radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.05), transparent 28%), linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
|
|
|
|
|
|
.main-container {
|
|
|
background: radial-gradient(circle at 10% 20%, rgba(30, 136, 229, 0.06), transparent 34%), radial-gradient(circle at 88% 8%, rgba(66, 165, 245, 0.04), transparent 28%), linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
|
|
|
}
|
|
|
|
|
|
.app-main,
|
|
|
.teacher-main {
|
|
|
background: radial-gradient(circle at 12% 18%, rgba(30, 136, 229, 0.05), transparent 34%), radial-gradient(circle at 78% 6%, rgba(66, 165, 245, 0.04), transparent 28%), linear-gradient(135deg, #f7fafd 0%, #eef4fb 48%, #f5f8fc 100%) !important;
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: rgba(30, 60, 100, 0.06);
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: rgba(30, 136, 229, 0.35);
|
|
|
border-radius: 10px;
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(30, 136, 229, 0.55);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 侧边栏整体：纯白极简（Stripe/Linear 风），右侧 1px 灰线，无玻璃无发光
|
|
|
.sidebar-container {
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&::after {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
// 教师端导航容器：透明，交给容器白底
|
|
|
.student-course-nav {
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
backdrop-filter: none !important;
|
|
|
}
|
|
|
|
|
|
// 分组标题：小号灰字
|
|
|
.student-course-heading {
|
|
|
color: #9ca3af !important;
|
|
|
font-size: 11px;
|
|
|
font-weight: 600;
|
|
|
letter-spacing: 0.02em;
|
|
|
|
|
|
&:hover,
|
|
|
&.active {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 菜单项：默认透明无边框；hover 中性灰；激活淡蓝平底 + 细指示条
|
|
|
.student-course-link {
|
|
|
color: #374151 !important;
|
|
|
background: transparent !important;
|
|
|
border: none !important;
|
|
|
border-radius: 6px !important;
|
|
|
box-shadow: none !important;
|
|
|
// 连续列表风：小间距贴边排列，压过共用区 8px 胶囊悬浮间距
|
|
|
margin: 0 0 2px !important;
|
|
|
min-height: 40px !important;
|
|
|
padding: 0 12px !important;
|
|
|
transition:
|
|
|
background-color 0.15s ease,
|
|
|
color 0.15s ease;
|
|
|
|
|
|
&:hover {
|
|
|
color: #1f2937 !important;
|
|
|
background: #f5f7fa !important;
|
|
|
}
|
|
|
|
|
|
// 激活：无渐变、无发光；2px 短指示条（Stripe 式）+ 蓝字 + 蓝色软底
|
|
|
&.active {
|
|
|
color: #2563eb !important;
|
|
|
font-weight: 600;
|
|
|
background: #eff6ff !important;
|
|
|
border-left: none !important;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 22%;
|
|
|
bottom: 22%;
|
|
|
width: 2px;
|
|
|
border-radius: 1px;
|
|
|
background: #2563eb;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 图标容器：透明无边框，颜色跟随菜单文字
|
|
|
.student-course-icon {
|
|
|
color: inherit !important;
|
|
|
border-color: transparent !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&--heading {
|
|
|
color: #9ca3af !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 报告按钮（如有）：白底灰边 ghost
|
|
|
.student-report-button {
|
|
|
color: #374151 !important;
|
|
|
background: #ffffff !important;
|
|
|
border-color: #e5e7eb !important;
|
|
|
|
|
|
&:hover,
|
|
|
&.active {
|
|
|
color: #2563eb !important;
|
|
|
background: #eff6ff !important;
|
|
|
border-color: rgba(37, 99, 235, 0.35) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 折叠把手：贴侧边栏右缘、垂直居中的极小竖条（全 !important 压过旧深色块）
|
|
|
.course-sidebar-toggle {
|
|
|
position: absolute !important;
|
|
|
top: 50% !important;
|
|
|
right: 0 !important;
|
|
|
transform: translateY(-50%) !important;
|
|
|
z-index: 8;
|
|
|
display: flex !important;
|
|
|
align-items: center !important;
|
|
|
justify-content: center !important;
|
|
|
box-sizing: border-box !important;
|
|
|
width: 14px !important;
|
|
|
height: 44px !important;
|
|
|
padding: 0 !important;
|
|
|
border: 1px solid #e5e7eb !important;
|
|
|
border-right: 0 !important;
|
|
|
border-radius: 8px 0 0 8px !important;
|
|
|
background: #ffffff !important;
|
|
|
color: #9ca3af !important;
|
|
|
box-shadow: -2px 0 6px rgba(17, 24, 39, 0.08) !important;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background-color 0.15s ease,
|
|
|
color 0.15s ease;
|
|
|
|
|
|
.toggle-arrow {
|
|
|
font-size: 10px;
|
|
|
}
|
|
|
.toggle-arrow--right {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
&:hover,
|
|
|
&:focus-visible {
|
|
|
background: #1f2937 !important;
|
|
|
color: #ffffff !important;
|
|
|
outline: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 折叠态：左箭头隐藏、右箭头显示（与 .sidebar-container 同级，避免嵌套出双容器）
|
|
|
.sidebar-container.is-collapse .course-sidebar-toggle {
|
|
|
.toggle-arrow--left {
|
|
|
display: none;
|
|
|
}
|
|
|
.toggle-arrow--right {
|
|
|
display: inline-flex;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 教师端 sidebar 宽度单独缩减 50%（304 → 152px）
|
|
|
* 教师端使用 el-menu 直显式布局，无需学生端的内嵌卡片空间，原 304px 造成大量空白
|
|
|
* 学生端保持 304px 不变（内部 .student-course-nav 卡片需要空间）
|
|
|
* 同时隐藏教师端唯一的分组标题"教学管理"（标识），仅保留菜单项
|
|
|
*/
|
|
|
#app .teacherLayout {
|
|
|
.main-container {
|
|
|
margin-left: 180px !important;
|
|
|
}
|
|
|
|
|
|
// 收起后侧边栏仅保留 64px 图标轨道，主内容同步释放展开态的空间。
|
|
|
&.hideSidebar .main-container {
|
|
|
margin-left: 64px !important;
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
width: 180px !important;
|
|
|
}
|
|
|
// 隐藏教师端顶部分组标题（"教学管理"标识），不影响学生端多分组标题
|
|
|
.student-course-nav > .student-course-heading {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* 学生端 + 教师端实训页背景覆盖
|
|
|
* student-training.scss 中 .student-training-shell 的暗色背景统一覆盖为亮色
|
|
|
*/
|
|
|
#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 .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
|
|
|
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
/* ========================================================================
|
|
|
* 学生端课程菜单（role 4）教育蓝极简主题
|
|
|
* 1) 仅命中 .is-student-nav，教师端 teacherLayout 不受影响
|
|
|
* 2) 置于文件末尾，选择器多出一个 .is-student-nav 类，覆盖前文共享亮色块
|
|
|
* 3) 风格：白底 + 教育蓝 Stripe 激活（浅蓝底 + 蓝字 + 左侧 3px 蓝条）
|
|
|
* ====================================================================== */
|
|
|
#app .studentLayout {
|
|
|
.sidebar-container.is-student-nav {
|
|
|
background: #ffffff !important;
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&::after {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
/* 清除遗留背景图：sidebar-normal.png / sidebar-active.png / sidebar-background.webp
|
|
|
这些 !important 老规则在 L15/L75/L103/L107 会给 li/sub-menu-title/menu-item
|
|
|
贴蓝底图，必须在此逐层 !important 覆盖。注意只清 background-image，
|
|
|
不要写 background: transparent !important 否则会和 .is-active 的
|
|
|
background-color: #f3f4f6 !important 发生 specificity 竞争 */
|
|
|
.el-menu {
|
|
|
background-color: transparent !important;
|
|
|
background-image: none !important;
|
|
|
}
|
|
|
|
|
|
.el-sub-menu {
|
|
|
background-color: transparent !important;
|
|
|
background-image: none !important;
|
|
|
|
|
|
&.is-active,
|
|
|
&.is-opened {
|
|
|
background-color: transparent !important;
|
|
|
background-image: none !important;
|
|
|
}
|
|
|
|
|
|
.el-sub-menu__title {
|
|
|
background-color: transparent !important;
|
|
|
background-image: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-menu-item {
|
|
|
background-image: none !important;
|
|
|
|
|
|
&.is-active {
|
|
|
background-image: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-sidebar-scroll,
|
|
|
.el-scrollbar__wrap,
|
|
|
.el-scrollbar__view {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
/* 侧边栏滚动条中性化 */
|
|
|
.el-scrollbar__wrap {
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 5px;
|
|
|
}
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: transparent;
|
|
|
}
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #d1d5db;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
|
background: #9ca3af;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-scrollbar__bar.is-vertical {
|
|
|
right: 4px;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.2s ease;
|
|
|
}
|
|
|
|
|
|
&:hover .el-scrollbar__bar.is-vertical {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* el-menu 菜单容器：白底、紧凑行高 */
|
|
|
.sidebar-container.is-student-nav .student-course-menu {
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
border-right: 0;
|
|
|
background: #ffffff;
|
|
|
padding: 12px 10px;
|
|
|
--el-menu-item-height: 46px;
|
|
|
--el-menu-sub-item-height: 46px;
|
|
|
}
|
|
|
|
|
|
/* 侧栏 Logo 标题（Logo.vue scoped 写死 14px，此处仅学生端放大一档） */
|
|
|
.sidebar-container.is-student-nav .sidebar-title {
|
|
|
font-size: var(--student-fs-body);
|
|
|
}
|
|
|
|
|
|
/* 一级行（直跳项 / 分组标题）：教育蓝极简文字行，白底深灰字。
|
|
|
EP 会给 title 绑内联 color/background，必须 !important 才能覆盖。
|
|
|
一级用最深字色 + 700 加粗 + 15px，与二级（浅灰 14px/400）拉开层级 */
|
|
|
.student-course-menu > li.el-menu-item,
|
|
|
.student-course-menu > li.el-sub-menu > .el-sub-menu__title {
|
|
|
position: relative;
|
|
|
height: 44px;
|
|
|
line-height: 44px;
|
|
|
margin: 10px 0 2px;
|
|
|
border-radius: 6px;
|
|
|
color: #1f2937 !important;
|
|
|
font-size: var(--student-fs-body);
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.01em;
|
|
|
background: transparent !important;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
transition:
|
|
|
background-color 0.15s ease,
|
|
|
color 0.15s ease;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #1f2937 !important;
|
|
|
transition: color 0.15s ease;
|
|
|
}
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #1f2937 !important;
|
|
|
background: #f9fafb !important;
|
|
|
outline: none;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 直跳一级项（AI 智能助手）收紧上边距，贴顶无空隙 */
|
|
|
.student-course-menu > li.el-menu-item:first-child,
|
|
|
.student-course-menu > li.el-sub-menu:first-child > .el-sub-menu__title {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
|
|
|
/* 一级直跳项激活（如 AI 智能助手 = 当前路由叶子）：中性灰底胶囊 + 近黑粗体 + 蓝图标。
|
|
|
不用蓝底色块（AI 味），不用左条墨标（太碎），用 Notion 式灰底 + 字重 + 图标色三重信号 */
|
|
|
.student-course-menu > li.el-menu-item.is-active {
|
|
|
color: #111827 !important;
|
|
|
font-weight: 700;
|
|
|
background: #f3f4f6 !important;
|
|
|
box-shadow: none;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #111827 !important;
|
|
|
background: #e5e7eb !important;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 一级分组标题含激活子项：仅蓝字 + 蓝图标，不加底色 ——
|
|
|
只指示「你在这个分区」，完整高亮留给当前路由叶子项 */
|
|
|
.student-course-menu > li.el-sub-menu.is-active > .el-sub-menu__title {
|
|
|
color: #2563eb !important;
|
|
|
font-weight: 700;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #2563eb !important;
|
|
|
background: #f9fafb !important;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 二级分组标题含激活子项（如「消费者需求与行为」内含三级路由）：
|
|
|
同样仅蓝字 + 蓝图标，不加底色 */
|
|
|
.sidebar-container.is-student-nav .el-sub-menu .el-sub-menu.is-active > .el-sub-menu__title {
|
|
|
color: #2563eb !important;
|
|
|
font-weight: 600;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
color: #2563eb !important;
|
|
|
background: #f9fafb !important;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 二级列表展开区：白底 */
|
|
|
.sidebar-container.is-student-nav .el-sub-menu .el-menu {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
/* 二级菜单项：透明底浅灰字、14px/400、左侧缩进，明显从属于一级分组。
|
|
|
与一级（#1f2937 15px/700）拉开三重对比：字色 / 字号 / 字重。
|
|
|
老规则对嵌套项写了 transparent !important（L80-90），背景必须 !important 才能覆盖 */
|
|
|
.sidebar-container.is-student-nav .el-sub-menu .el-menu-item {
|
|
|
position: relative;
|
|
|
height: 36px;
|
|
|
line-height: 36px;
|
|
|
min-width: auto;
|
|
|
padding-left: 40px !important;
|
|
|
border-radius: 8px;
|
|
|
color: #6b7280;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
font-weight: 400;
|
|
|
background: transparent;
|
|
|
transition:
|
|
|
background-color 0.15s ease,
|
|
|
color 0.15s ease;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #9ca3af !important;
|
|
|
font-size: 15px;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background: #f9fafb !important;
|
|
|
color: #1f2937;
|
|
|
outline: none;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #6b7280 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.is-active {
|
|
|
background: #f3f4f6 !important;
|
|
|
color: #111827;
|
|
|
font-weight: 600;
|
|
|
box-shadow: none;
|
|
|
|
|
|
.student-menu-icon {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
background: #e5e7eb !important;
|
|
|
color: #111827;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.is-disabled,
|
|
|
&.is-disabled:hover {
|
|
|
color: #c0c5cd;
|
|
|
opacity: 1;
|
|
|
background: transparent !important;
|
|
|
cursor: default;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 分组折叠箭头：灰色，hover/激活教育蓝；旋转由组件内置 */
|
|
|
.sidebar-container.is-student-nav .el-sub-menu__icon-arrow {
|
|
|
color: #9ca3af !important;
|
|
|
}
|
|
|
|
|
|
.sidebar-container.is-student-nav .el-sub-menu__title:hover .el-sub-menu__icon-arrow,
|
|
|
.sidebar-container.is-student-nav li.el-sub-menu.is-active .el-sub-menu__icon-arrow {
|
|
|
color: #2563eb !important;
|
|
|
}
|
|
|
|
|
|
/* 菜单图标：16px，与文字间距 8px */
|
|
|
.sidebar-container.is-student-nav .student-menu-icon {
|
|
|
margin-right: 8px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
/* 折叠把手沿用共享块的边缘定位（!important）；此处仅覆写 hover，
|
|
|
压过旧 .studentLayout:has(.student-training-shell) 蓝色玻璃 hover */
|
|
|
.sidebar-container.is-student-nav .course-sidebar-toggle {
|
|
|
&:hover,
|
|
|
&:focus-visible {
|
|
|
border-color: #2563eb;
|
|
|
background: #2563eb;
|
|
|
color: #ffffff;
|
|
|
outline: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 64px 图标轨道模式（el-menu collapse 原生支持，二级以弹出层展示） */
|
|
|
&.hideSidebar .sidebar-container.is-student-nav {
|
|
|
.student-course-menu {
|
|
|
box-sizing: border-box;
|
|
|
width: 64px;
|
|
|
padding: 12px 8px;
|
|
|
}
|
|
|
|
|
|
/* 一级深蓝块在轨道模式下只居中显图标 */
|
|
|
.student-course-menu > li.el-menu-item,
|
|
|
.student-course-menu > li.el-sub-menu > .el-sub-menu__title {
|
|
|
justify-content: center;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.student-menu-icon {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
/* 恢复折叠模式下 sub-menu title 里的 icon 尺寸 ——
|
|
|
Element Plus 默认把 .hideSidebar 里 sub-menu title 的 <i> 也压成 0 宽高，
|
|
|
但分组标题在折叠轨道模式下仍需显示图标 */
|
|
|
.el-menu--collapse .el-sub-menu > .el-sub-menu__title > i.student-menu-icon {
|
|
|
width: var(--el-menu-icon-width, 24px) !important;
|
|
|
height: var(--el-menu-icon-width, 24px) !important;
|
|
|
overflow: visible !important;
|
|
|
visibility: visible !important;
|
|
|
display: inline-flex !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ========================================================================
|
|
|
* 学生端 64px 轨道模式：分组二级弹出层（teleport 到 body，脱离 sidebar 作用域）
|
|
|
* 通过 el-sub-menu 的 popper-class="student-menu-popper" 锚定换肤
|
|
|
* ====================================================================== */
|
|
|
.el-popper.student-menu-popper,
|
|
|
.el-menu--popup-container.student-menu-popper {
|
|
|
padding: 6px;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 6px 20px rgba(17, 24, 39, 0.12);
|
|
|
|
|
|
.el-menu--popup {
|
|
|
padding: 0;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.el-menu-item {
|
|
|
position: relative;
|
|
|
height: 36px;
|
|
|
line-height: 36px;
|
|
|
border-radius: 8px;
|
|
|
color: #6b7280;
|
|
|
font-size: var(--student-fs-body-sm);
|
|
|
font-weight: 400;
|
|
|
background: transparent;
|
|
|
transition:
|
|
|
background-color 0.15s ease,
|
|
|
color 0.15s ease;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background: #f9fafb;
|
|
|
color: #1f2937;
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
&.is-active {
|
|
|
background: #f3f4f6;
|
|
|
color: #111827;
|
|
|
font-weight: 600;
|
|
|
box-shadow: none;
|
|
|
|
|
|
&:hover {
|
|
|
background: #e5e7eb;
|
|
|
color: #111827;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* ========================================================================
|
|
|
* 教师端（role 3）极简 SaaS 教育风：纯白画布 + 教育蓝
|
|
|
* 覆盖前文 #app .studentLayout, #app .teacherLayout 共享的浅蓝玻璃块
|
|
|
* 选择器带 .teacherLayout 锚点且置于文件末尾，确保胜出
|
|
|
* ====================================================================== */
|
|
|
#app .teacherLayout {
|
|
|
background: #ffffff !important;
|
|
|
|
|
|
.main-container {
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
.app-main,
|
|
|
.teacher-main {
|
|
|
background: #ffffff !important;
|
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #d1d5db !important;
|
|
|
}
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
|
background: #9ca3af !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 实训页背景一并收敛为纯白
|
|
|
.app-main:has(.student-training-shell) {
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
background: #ffffff !important;
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
&::after {
|
|
|
display: none !important;
|
|
|
}
|
|
|
|
|
|
// 导航容器：去掉大圆角玻璃卡片，铺满侧栏
|
|
|
.student-course-nav {
|
|
|
width: 100%;
|
|
|
min-height: 100%;
|
|
|
margin: 0;
|
|
|
padding: 16px 10px;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
background: #ffffff !important;
|
|
|
box-shadow: none !important;
|
|
|
backdrop-filter: none;
|
|
|
}
|
|
|
|
|
|
// 分组标题：13px 深灰 700，不再大写拉字距
|
|
|
.student-course-heading {
|
|
|
margin: 0 0 8px;
|
|
|
padding: 0 8px;
|
|
|
color: #1f2937 !important;
|
|
|
font-size: 13px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0;
|
|
|
text-transform: none;
|
|
|
|
|
|
&:hover {
|
|
|
color: #1f2937 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.student-course-list {
|
|
|
margin: 0 0 16px;
|
|
|
}
|
|
|
|
|
|
// 菜单项：纯文字行、38px 高、8px 圆角
|
|
|
.student-course-link {
|
|
|
min-height: 38px;
|
|
|
margin: 0 0 4px;
|
|
|
padding: 0 10px;
|
|
|
border: 0 !important;
|
|
|
border-radius: 8px !important;
|
|
|
color: #4b5563 !important;
|
|
|
background: transparent !important;
|
|
|
font-size: 13px;
|
|
|
font-weight: 400;
|
|
|
|
|
|
&:hover {
|
|
|
color: #1f2937 !important;
|
|
|
background: #f3f4f6 !important;
|
|
|
box-shadow: none !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
|
|
|
// 激活：教育蓝浅底 + 蓝字 + 左侧 3px 蓝条
|
|
|
&.active {
|
|
|
color: #3b82f6 !important;
|
|
|
background: #eff6ff !important;
|
|
|
box-shadow: inset 3px 0 0 #3b82f6;
|
|
|
}
|
|
|
|
|
|
&.disabled {
|
|
|
color: #c0c5cd !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 图标：透明底灰图标，hover/激活变色
|
|
|
.student-course-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
border: 0 !important;
|
|
|
border-radius: 6px;
|
|
|
color: #9ca3af !important;
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.student-course-icon--heading {
|
|
|
color: #3b82f6 !important;
|
|
|
background: #eff6ff !important;
|
|
|
}
|
|
|
|
|
|
.student-course-link:hover .student-course-icon {
|
|
|
color: #4b5563 !important;
|
|
|
}
|
|
|
.student-course-link.active .student-course-icon {
|
|
|
color: #3b82f6 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|