ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table滚动条样式修改

Browse Source
This commit is contained in:
zhujiyan
2024-09-02 18:54:03 +08:00
parent bc94be36b8
commit 209aa60b03
2 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/styles/common.scss
View File

@@ -72,7 +72,7 @@
/* scroll bar */
::-webkit-scrollbar {
width: 8px;
width: 6px;
height: 200px;
// background-color: var(--el-color-primary);
}

41
frontend/src/styles/element.scss
View File

@@ -339,3 +339,44 @@
background-color: var(--el-color-primary) !important;
color: #fff;
}
.el-table__body-wrapper,.el-scrollbar{
/* scroll bar */
z-index: 2001;
&::-webkit-scrollbar {
width: 8px !important;
height: 200px !important;
// background-color: var(--el-color-primary);
z-index: 3001;
}
/* 滚动条实际可拖动部分的颜色 */
::-webkit-scrollbar-thumb {
width: 8px;
height: 100px;
background-color: var(--el-border-color-darker) !important;
// background-color: var(--el-color-primary);
border-radius: 20px;
background-color: var(--el-color-primary) !important;
cursor: pointer;
z-index: 3001;
}
}
/* ---el-table滚动条公共样式--- */
.el-scrollbar {
// 横向滚动条
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
opacity: 1; // 默认滚动条自带透明度
height: 20px; // 横向滑块的宽度
border-radius: 4px; // 圆角度数
background-color: var(--el-color-primary); // 滑块背景色
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
}
// 纵向滚动条
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
opacity: 1;
width: 6px; // 纵向滑块的宽度
border-radius: 4px;
background-color: var(--el-color-primary);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
}