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-11 16:03:36 +08:00
parent 5304b298f6
commit 91c9829d77
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;
}
.thead-item:nth-child(2),
.tbody-item:nth-child(2) {
flex-basis: 8rem;
width: 8rem;
}
.tbody-item:nth-child(2),
.thead-item:nth-child(3),
.tbody-item:nth-child(3) {
flex-basis: 8rem;
width: 8rem;
}
.tbody-item:nth-child(3),
.thead-item:nth-child(4),
.tbody-item:nth-child(4) {
flex-basis: 8rem;
width: 8rem;
overflow-y: auto;
}
.thead-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 {
width: 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 {
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 {
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 {
background-color: #1890ff; /* 设置鼠标悬停时滚动条滑块颜色 */
}