|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
#app {
|
|
|
|
|
.main-container {
|
|
|
|
|
height: calc(100% - 50px);
|
|
|
|
|
transition: margin-left .28s;
|
|
|
|
|
transition: margin-left 0.28s;
|
|
|
|
|
margin-left: $base-sidebar-width;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
@ -9,10 +9,10 @@
|
|
|
|
|
margin-left: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
-webkit-transition: width .28s;
|
|
|
|
|
-webkit-transition: width 0.28s;
|
|
|
|
|
transition: width 0.28s;
|
|
|
|
|
width: 239px !important;
|
|
|
|
|
background: url('../images/sidebar-background.webp') no-repeat center;
|
|
|
|
|
background: url("../images/sidebar-background.webp") no-repeat center;
|
|
|
|
|
// background-color: $base-menu-background;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
@ -23,11 +23,14 @@
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
|
|
|
|
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
|
|
|
|
-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;
|
|
|
|
|
transition:
|
|
|
|
|
0s width ease-in-out,
|
|
|
|
|
0s padding-left ease-in-out,
|
|
|
|
|
0s padding-right ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
.scrollbar-wrapper {
|
|
|
|
|
overflow-x: hidden !important;
|
|
|
|
|
@ -72,7 +75,7 @@
|
|
|
|
|
.el-sub-menu__title {
|
|
|
|
|
height: 37px;
|
|
|
|
|
line-height: 37px;
|
|
|
|
|
background: url('../images/sidebar-normal.png') no-repeat;
|
|
|
|
|
background: url("../images/sidebar-normal.png") no-repeat;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
.el-menu {
|
|
|
|
|
@ -90,7 +93,7 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.is-opened{
|
|
|
|
|
.is-opened {
|
|
|
|
|
margin-bottom: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
.el-menu-item {
|
|
|
|
|
@ -100,25 +103,24 @@
|
|
|
|
|
height: 37px;
|
|
|
|
|
line-height: 37px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: url('../images/sidebar-normal.png') no-repeat;
|
|
|
|
|
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{
|
|
|
|
|
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: url("../images/sidebar-active.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-menu-item,
|
|
|
|
|
@ -140,11 +142,11 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& .theme-dark .is-active>.el-sub-menu__title {
|
|
|
|
|
& .theme-dark .is-active > .el-sub-menu__title {
|
|
|
|
|
color: $base-menu-color-active !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
|
|
|
|
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
|
|
|
|
& .el-sub-menu .el-menu-item {
|
|
|
|
|
min-width: $base-sidebar-width !important;
|
|
|
|
|
|
|
|
|
|
@ -153,7 +155,7 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
|
|
|
|
& .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;
|
|
|
|
|
|
|
|
|
|
@ -187,20 +189,19 @@
|
|
|
|
|
.el-sub-menu {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
&>.el-sub-menu__title {
|
|
|
|
|
& > .el-sub-menu__title {
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
|
|
|
|
.svg-icon {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-menu--collapse {
|
|
|
|
|
.el-sub-menu {
|
|
|
|
|
&>.el-sub-menu__title {
|
|
|
|
|
&>span {
|
|
|
|
|
& > .el-sub-menu__title {
|
|
|
|
|
& > span {
|
|
|
|
|
height: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -208,7 +209,7 @@
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&>i {
|
|
|
|
|
& > i {
|
|
|
|
|
height: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@ -229,7 +230,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
transition: transform .28s;
|
|
|
|
|
transition: transform 0.28s;
|
|
|
|
|
width: $base-sidebar-width !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -251,10 +252,7 @@
|
|
|
|
|
.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;
|
|
|
|
|
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;
|
|
|
|
|
@ -274,17 +272,11 @@
|
|
|
|
|
|
|
|
|
|
.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%);
|
|
|
|
|
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%);
|
|
|
|
|
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,
|
|
|
|
|
@ -292,10 +284,7 @@
|
|
|
|
|
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;
|
|
|
|
|
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;
|
|
|
|
|
@ -350,7 +339,9 @@
|
|
|
|
|
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);
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -408,7 +399,12 @@
|
|
|
|
|
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;
|
|
|
|
|
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 {
|
|
|
|
|
@ -423,10 +419,10 @@
|
|
|
|
|
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);
|
|
|
|
|
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;
|
|
|
|
|
@ -487,7 +483,9 @@
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background 0.2s ease, box-shadow 0.2s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background 0.2s ease,
|
|
|
|
|
box-shadow 0.2s ease;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&.active {
|
|
|
|
|
@ -557,10 +555,10 @@
|
|
|
|
|
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);
|
|
|
|
|
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 {
|
|
|
|
|
@ -589,7 +587,10 @@
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background 0.2s ease,
|
|
|
|
|
border-color 0.2s ease,
|
|
|
|
|
transform 0.2s ease;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #70e4ff;
|
|
|
|
|
@ -637,7 +638,6 @@
|
|
|
|
|
margin-left: 64px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 仅学生实训任务页提供课程导航的图标轨道，离开任务页不改变原有学生布局。 */
|
|
|
|
|
@ -666,7 +666,10 @@
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background .2s ease, border-color .2s ease, transform .2s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background 0.2s ease,
|
|
|
|
|
border-color 0.2s ease,
|
|
|
|
|
transform 0.2s ease;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
@ -690,9 +693,8 @@
|
|
|
|
|
padding: 58px 11px 24px;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(180deg, rgba(8, 31, 47, .92), rgba(3, 16, 28, .98));
|
|
|
|
|
box-shadow: inset -1px 0 0 rgba(132, 228, 255, .1);
|
|
|
|
|
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,
|
|
|
|
|
@ -718,7 +720,7 @@
|
|
|
|
|
min-height: 42px;
|
|
|
|
|
margin: 0 0 8px;
|
|
|
|
|
border-radius: 13px;
|
|
|
|
|
background: rgba(255, 255, 255, .025);
|
|
|
|
|
background: rgba(255, 255, 255, 0.025);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.student-course-list {
|
|
|
|
|
@ -735,9 +737,9 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.student-course-link.active {
|
|
|
|
|
border: 1px solid rgba(0, 190, 255, .85);
|
|
|
|
|
background: linear-gradient(135deg, rgba(0, 174, 255, .28), rgba(18, 95, 190, .14));
|
|
|
|
|
box-shadow: 0 0 14px rgba(0, 178, 255, .25);
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -756,13 +758,13 @@
|
|
|
|
|
}
|
|
|
|
|
// when menu collapsed
|
|
|
|
|
.el-menu--vertical {
|
|
|
|
|
&>.el-menu {
|
|
|
|
|
& > .el-menu {
|
|
|
|
|
.svg-icon {
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nest-menu .el-sub-menu>.el-sub-menu__title,
|
|
|
|
|
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
|
|
|
|
.el-menu-item {
|
|
|
|
|
&:hover {
|
|
|
|
|
// you can use $sub-menuHover
|
|
|
|
|
@ -771,7 +773,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// the scroll bar appears when the sub-menu is too long
|
|
|
|
|
>.el-menu--popup {
|
|
|
|
|
> .el-menu--popup {
|
|
|
|
|
max-height: 100vh;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
|
|
@ -798,24 +800,15 @@
|
|
|
|
|
#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;
|
|
|
|
|
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;
|
|
|
|
|
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;
|
|
|
|
|
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;
|
|
|
|
|
@ -878,7 +871,9 @@
|
|
|
|
|
margin: 0 0 2px !important;
|
|
|
|
|
min-height: 40px !important;
|
|
|
|
|
padding: 0 12px !important;
|
|
|
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background-color 0.15s ease,
|
|
|
|
|
color 0.15s ease;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #1f2937 !important;
|
|
|
|
|
@ -954,10 +949,16 @@
|
|
|
|
|
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;
|
|
|
|
|
transition:
|
|
|
|
|
background-color 0.15s ease,
|
|
|
|
|
color 0.15s ease;
|
|
|
|
|
|
|
|
|
|
.toggle-arrow { font-size: 10px; }
|
|
|
|
|
.toggle-arrow--right { display: none; }
|
|
|
|
|
.toggle-arrow {
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
}
|
|
|
|
|
.toggle-arrow--right {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
@ -970,8 +971,31 @@
|
|
|
|
|
|
|
|
|
|
// 折叠态：左箭头隐藏、右箭头显示（与 .sidebar-container 同级，避免嵌套出双容器）
|
|
|
|
|
.sidebar-container.is-collapse .course-sidebar-toggle {
|
|
|
|
|
.toggle-arrow--left { display: none; }
|
|
|
|
|
.toggle-arrow--right { display: inline-flex; }
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
width: 180px !important;
|
|
|
|
|
}
|
|
|
|
|
// 隐藏教师端顶部分组标题（"教学管理"标识），不影响学生端多分组标题
|
|
|
|
|
.student-course-nav > .student-course-heading {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1001,7 +1025,9 @@
|
|
|
|
|
border-right: 1px solid #e5e7eb !important;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
|
|
|
|
|
&::after { display: 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
|
|
|
|
|
@ -1045,13 +1071,19 @@
|
|
|
|
|
|
|
|
|
|
/* 侧边栏滚动条中性化 */
|
|
|
|
|
.el-scrollbar__wrap {
|
|
|
|
|
&::-webkit-scrollbar { width: 5px; }
|
|
|
|
|
&::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
width: 5px;
|
|
|
|
|
}
|
|
|
|
|
&::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
|
|
background: #d1d5db;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
&::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
|
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: #9ca3af;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-scrollbar__bar.is-vertical {
|
|
|
|
|
@ -1060,7 +1092,9 @@
|
|
|
|
|
transition: opacity 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover .el-scrollbar__bar.is-vertical { opacity: 1; }
|
|
|
|
|
&:hover .el-scrollbar__bar.is-vertical {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* el-menu 菜单容器：白底、紧凑行高 */
|
|
|
|
|
@ -1091,9 +1125,14 @@
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background-color 0.15s ease,
|
|
|
|
|
color 0.15s ease;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #1f2937 !important; transition: color 0.15s ease; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #1f2937 !important;
|
|
|
|
|
transition: color 0.15s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus {
|
|
|
|
|
@ -1101,7 +1140,9 @@
|
|
|
|
|
background: #f9fafb !important;
|
|
|
|
|
outline: none;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #1f2937 !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #1f2937 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1119,14 +1160,18 @@
|
|
|
|
|
background: #f3f4f6 !important;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus {
|
|
|
|
|
color: #111827 !important;
|
|
|
|
|
background: #e5e7eb !important;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1138,14 +1183,18 @@
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
background: #f9fafb !important;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1157,14 +1206,18 @@
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
background: #f9fafb !important;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1187,7 +1240,9 @@
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
background: transparent;
|
|
|
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background-color 0.15s ease,
|
|
|
|
|
color 0.15s ease;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #9ca3af !important;
|
|
|
|
|
@ -1201,7 +1256,9 @@
|
|
|
|
|
color: #1f2937;
|
|
|
|
|
outline: none;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #6b7280 !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #6b7280 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.is-active {
|
|
|
|
|
@ -1210,7 +1267,9 @@
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { color: #2563eb !important; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
color: #2563eb !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background: #e5e7eb !important;
|
|
|
|
|
@ -1270,7 +1329,9 @@
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.student-menu-icon { margin-right: 0; }
|
|
|
|
|
.student-menu-icon {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 恢复折叠模式下 sub-menu title 里的 icon 尺寸 ——
|
|
|
|
|
Element Plus 默认把 .hideSidebar 里 sub-menu title 的 <i> 也压成 0 宽高，
|
|
|
|
|
@ -1310,7 +1371,9 @@
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
background: transparent;
|
|
|
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
|
|
|
transition:
|
|
|
|
|
background-color 0.15s ease,
|
|
|
|
|
color 0.15s ease;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus {
|
|
|
|
|
@ -1341,26 +1404,38 @@
|
|
|
|
|
#app .teacherLayout {
|
|
|
|
|
background: #ffffff !important;
|
|
|
|
|
|
|
|
|
|
.main-container { 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; }
|
|
|
|
|
&::-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; }
|
|
|
|
|
.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; }
|
|
|
|
|
&::after {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 导航容器：去掉大圆角玻璃卡片，铺满侧栏
|
|
|
|
|
.student-course-nav {
|
|
|
|
|
@ -1385,10 +1460,14 @@
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
|
|
|
|
|
&:hover { color: #1f2937 !important; }
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #1f2937 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.student-course-list { margin: 0 0 16px; }
|
|
|
|
|
.student-course-list {
|
|
|
|
|
margin: 0 0 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 菜单项：纯文字行、38px 高、8px 圆角
|
|
|
|
|
.student-course-link {
|
|
|
|
|
@ -1438,7 +1517,11 @@
|
|
|
|
|
background: #eff6ff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.student-course-link:hover .student-course-icon { color: #4b5563 !important; }
|
|
|
|
|
.student-course-link.active .student-course-icon { color: #3b82f6 !important; }
|
|
|
|
|
.student-course-link:hover .student-course-icon {
|
|
|
|
|
color: #4b5563 !important;
|
|
|
|
|
}
|
|
|
|
|
.student-course-link.active .student-course-icon {
|
|
|
|
|
color: #3b82f6 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
