diff --git a/src/views/traceManage/tshark/components/PacketTable.vue b/src/views/traceManage/tshark/components/PacketTable.vue index 1b1a8874..3b7300b3 100644 --- a/src/views/traceManage/tshark/components/PacketTable.vue +++ b/src/views/traceManage/tshark/components/PacketTable.vue @@ -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; /* 设置鼠标悬停时滚动条滑块颜色 */ }