style: update sidebar styles for student layout in collapsed state

- Added specific styles for the student layout sidebar when collapsed, ensuring it reduces to 64px width.
- Addressed specificity issues with existing styles to prevent layout conflicts in non-mobile views.
dev-QQq^2
qinzhenpen 8 hours ago
parent c3b1e99267
commit e1da3bd6a2

@ -1032,6 +1032,30 @@
} }
} }
/*
* 学生端收起态(非移动端):侧边栏必须收敛到 64px 图标轨道
*
* 为什么必须单独补这一条:
* RuoYi 原始收起规则 #app .hideSidebar .sidebar-container { width: 54px !important }
* 后加的学生端规则 #app .studentLayout .sidebar-container { width: 304px !important }
* 两者特异性完全相同(1 个 ID + 2 个类),而后者在源码中位置更靠后,
* 按"同特异性、后出现者胜"被后者压掉 —— 收起后容器仍留 304px 宽,
* 但 el-menu 已切到 collapse 态,于是只剩一列图标、菜单文字全部消失。
* 教师端由 #app .teacherLayout.hideSidebar 处理,学生端此前只在实训页
* (:has(.student-training-shell)) 补过,非实训页全部中招,这里补齐。
*
* :not(.mobile) 用来排除移动端:移动端需保留 304px 抽屉宽度 + translate3d 滑出。
*/
#app .studentLayout.hideSidebar:not(.mobile) {
.sidebar-container {
width: 64px !important;
}
.main-container {
margin-left: 64px !important;
}
}
/* /*
* 学生端 + 教师端实训页背景覆盖 * 学生端 + 教师端实训页背景覆盖
* student-training.scss 中 .student-training-shell 的暗色背景统一覆盖为亮色 * student-training.scss 中 .student-training-shell 的暗色背景统一覆盖为亮色

Loading…
Cancel
Save