OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

style: 优化PacketTable组件的滚动条样式和布局

Browse Source
This commit is contained in:
TsMask
2025-03-08 10:36:42 +08:00
parent d42e6356f3
commit 4982109af3
1 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/traceManage/tshark/components/PacketTable.vue
View File

@@ -234,19 +234,14 @@ watchEffect(() => {
text-align: right; text-align: right;
} }
.thead-item:nth-child(2), .thead-item:nth-child(2),
.tbody-item:nth-child(2) { .tbody-item:nth-child(2),
flex-basis: 8rem;
width: 8rem;
}
.thead-item:nth-child(3), .thead-item:nth-child(3),
.tbody-item:nth-child(3) { .tbody-item:nth-child(3),
flex-basis: 8rem;
width: 8rem;
}
.thead-item:nth-child(4), .thead-item:nth-child(4),
.tbody-item:nth-child(4) { .tbody-item:nth-child(4) {
flex-basis: 8rem; flex-basis: 8rem;
width: 8rem; width: 8rem;
overflow-y: auto;
} }
.thead-item:nth-child(5), .thead-item:nth-child(5),
.tbody-item:nth-child(5) { .tbody-item:nth-child(5) {
@@ -271,16 +266,32 @@ watchEffect(() => {
} }
/* 修改滚动条的样式 */ /* 修改滚动条的样式 */
.thead-item:nth-child(2)::-webkit-scrollbar,
.tbody-item:nth-child(2)::-webkit-scrollbar,
.tbody-item:nth-child(3)::-webkit-scrollbar,
.tbody-item:nth-child(4)::-webkit-scrollbar,
.tbody-item:nth-child(7)::-webkit-scrollbar { .tbody-item:nth-child(7)::-webkit-scrollbar {
width: 4px; /* 设置滚动条宽度 */ width: 4px; /* 设置滚动条宽度 */
height: 4px; height: 4px;
} }
.thead-item:nth-child(2)::-webkit-scrollbar-track,
.tbody-item:nth-child(2)::-webkit-scrollbar-track,
.tbody-item:nth-child(3)::-webkit-scrollbar-track,
.tbody-item:nth-child(4)::-webkit-scrollbar-track,
.tbody-item:nth-child(7)::-webkit-scrollbar-track { .tbody-item:nth-child(7)::-webkit-scrollbar-track {
background-color: #f0f0f0; /* 设置滚动条轨道背景颜色 */ background-color: #f0f0f0; /* 设置滚动条轨道背景颜色 */
} }
.thead-item:nth-child(2)::-webkit-scrollbar-thumb,
.tbody-item:nth-child(2)::-webkit-scrollbar-thumb,
.tbody-item:nth-child(3)::-webkit-scrollbar-thumb,
.tbody-item:nth-child(4)::-webkit-scrollbar-thumb,
.tbody-item:nth-child(7)::-webkit-scrollbar-thumb { .tbody-item:nth-child(7)::-webkit-scrollbar-thumb {
background-color: #bfbfbf; /* 设置滚动条滑块颜色 */ background-color: #bfbfbf; /* 设置滚动条滑块颜色 */
} }
.thead-item:nth-child(2)::-webkit-scrollbar-thumb:hover,
.tbody-item:nth-child(2)::-webkit-scrollbar-thumb:hover,
.tbody-item:nth-child(3)::-webkit-scrollbar-thumb:hover,
.tbody-item:nth-child(4)::-webkit-scrollbar-thumb:hover,
.tbody-item:nth-child(7)::-webkit-scrollbar-thumb:hover { .tbody-item:nth-child(7)::-webkit-scrollbar-thumb:hover {
background-color: #1890ff; /* 设置鼠标悬停时滚动条滑块颜色 */ background-color: #1890ff; /* 设置鼠标悬停时滚动条滑块颜色 */
} }