tonytech/kindergarten
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(布局): 优化左侧菜单栏滚动条样式

Browse Source 
- 滚动条宽度统一为 4px，更细更不占空间
- 滑块增加圆角 (border-radius: 4px)，视觉更柔和
- 轨道背景透明，滑块半透明灰，悬停时加深便于识别
- 涉及布局: 教师端、园校端、管理端、家长端 (teacher/school/admin/parent LayoutView)

Made-with: Cursor
This commit is contained in:
zhonghua 2026-03-03 10:44:20 +08:00
parent 6cd267985c
commit b91f661024
4 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
reading-platform-frontend/src/views/admin/LayoutView.vue
View File

@ -382,6 +382,20 @@ $bg-dark: #111827;
flex: 1;
min-height: 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
}
.side-menu {

14
reading-platform-frontend/src/views/parent/LayoutView.vue
View File

@ -367,6 +367,20 @@ $bg-light: #FAFAFA;
flex: 1;
min-height: 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
}
.side-menu {

14
reading-platform-frontend/src/views/school/LayoutView.vue
View File

@ -461,6 +461,20 @@ $bg-light: #FAFAFA;
flex: 1;
min-height: 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
}
.side-menu {

14
reading-platform-frontend/src/views/teacher/LayoutView.vue
View File

@ -358,6 +358,20 @@ $bg-light: #FAFAFA;
flex: 1;
min-height: 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.28);
}
}
.side-menu {