优化滚动条

2024-01-20 10:15:09 +08:00 · 2024-01-20 10:15:09 +08:00 · c550850cd9
commit c550850cd9
parent cc6cc53d82
1 changed files with 29 additions and 0 deletions
--- a/frontend/src/views/job/JobBatchLog.vue
+++ b/frontend/src/views/job/JobBatchLog.vue
@ -169,6 +169,35 @@ export default {
  display: flex !important;
  flex-direction: column;

+  // 美化滚动条
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    width: 6px;
+    background: rgba(#101F1C, 0.1);
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(144,147,153,.5);
+    background-clip: padding-box;
+    min-height: 28px;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+    transition: background-color .3s;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144,147,153,.3);
+  }
+
  .scroller {
    height: 100%;
    overflow: auto;