style: 修改滚动条样式

nezha-fronted/src/assets/css/common.scss

@@ -719,16 +719,6 @@ i.nz-icon-override{
   }
 }
 
-.left-menu{
-  .el-menu::-webkit-scrollbar-thumb {
-    background-color: $--scrollbar-left-menu-background-color;
-    border-radius: 3px;
-  }
-  .el-menu::-webkit-scrollbar-thumb:hover {
-    background-color: $--scrollbar-left-menu-background-color-hover;
-    border-radius: 3px;
-  }
-}
 .el-dialog__header{
   color: $--color-text-primary;
 }

nezha-fronted/src/assets/css/components/cli/fileDirectory.scss

@@ -81,15 +81,6 @@
     width: calc(100% - 15px);
     overflow: auto;
   }
-  //.file-state-panel-content::-webkit-scrollbar {
-  //  width: 6px;
-  //}
-  //.file-directory-content::-webkit-scrollbar-thumb {
-  //  width: 6px;
-  //}
-  //.file-directory-content::-webkit-scrollbar-thumb:hover {
-  //  width: 6px;
-  //}
   .directory-content-header{
     height: 32px;
     line-height: 32px;

nezha-fronted/src/assets/css/components/cli/fileListState.scss

@@ -9,19 +9,6 @@
   background: $--background-color-empty;
   box-shadow: -2px 1px 4px 0 rgba(0,0,0,0.06), 1px 1px 4px -1px rgba(0,0,0,0.16);
   border-radius: 2px;
-  .file-state-panel-content::-webkit-scrollbar {
-    width: 8px;
-  }
-  .file-state-panel-content::-webkit-scrollbar-thumb {
-    background: rgba(0,0,0,0.16);
-    border-radius: 4px;
-    border:none
-  }
-  .file-state-panel-content::-webkit-scrollbar-thumb:hover {
-    background: rgba(0,0,0,0.16);
-    border-radius: 4px;
-    border:none
-  }
   .file-state-panel-header{
     height: 48px;
     background: $--background-color-empty;
@@ -42,6 +29,7 @@
     color: $--color-text-primary;
   }
   .file-state-panel-content {
+    box-sizing: border-box;
     min-height: 50px;
     max-height: 180px;
     line-height: 48px;

nezha-fronted/src/assets/css/components/common/filterSearch/filterSearch.scss

@@ -16,10 +16,6 @@
     line-height: 20px !important;
     width: 166px !important;
   }
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
 
   .tag-search__meta, .tag-search__add {
     margin-right: 10px;

nezha-fronted/src/assets/css/components/common/searchBox.scss

@@ -103,7 +103,6 @@
       &::-webkit-scrollbar-thumb {
         width: 6px;
         height: 6px;
-        background-color: $--scrollbar-background-color;
         border-radius: 3px;
         cursor: pointer;
       }

nezha-fronted/src/assets/css/components/layout/leftMenu.scss

@@ -63,22 +63,24 @@
     }
   }
 
-  /*---滚动条默认显示样式--*/
-  >.el-menu::-webkit-scrollbar-thumb {
-    background-color: lighten($--background-color-base, .1);
-    border-radius: 2px;
-    border: none;
-  }
-  /*---鼠标点击滚动条显示样式--*/
-  >.el-menu::-webkit-scrollbar-thumb:hover {
-    background-color: $--background-color-base;
-    border-radius: 2px;
-  }
   /*---滚动条大小--*/
   >.el-menu::-webkit-scrollbar {
     width: 6px;
-    height: 14px;
+    height: 8px;
   }
+  /*---滚动条默认显示样式--*/
+  >.el-menu::-webkit-scrollbar-thumb {
+    background-color: $--scrollbar-left-menu-background-color;
+    border: 2px solid transparent;
+    border-radius: 4px;
+  }
+  /*---鼠标划过滚动条显示样式--*/
+  >.el-menu::-webkit-scrollbar-thumb:hover {
+    background-color: $--scrollbar-left-menu-background-color-hover;
+    border: 2px solid $--scrollbar-left-menu-background-color-hover;
+    border-radius: 4px;
+  }
+
   >.el-menu.header-logo {
     border-right: none;
     >.el-menu-item {

nezha-fronted/src/assets/stylus/main.scss

@@ -1,26 +1,29 @@
+/*---滚动条大小--*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
 /*---滚动条默认显示样式--*/
 ::-webkit-scrollbar-thumb {
   background-color: $--scrollbar-background-color;
-  border-radius: 6px;
+  border: 2px solid transparent;
-  border: 2px solid $--background-color-empty;
+  border-radius: 4px;
+  background-clip: content-box;
 }
-/*---鼠标点击滚动条显示样式--*/
+/*---鼠标划过滚动条显示样式--*/
 ::-webkit-scrollbar-thumb:hover {
   background-color: $--scrollbar-background-color-hover;
-  border-radius: 6px;
+  border: 2px solid $--scrollbar-background-color-hover;
-}
+  border-radius: 4px;
-/*---滚动条大小--*/
+  background-clip: content-box;
-::-webkit-scrollbar {
-  width: 14px;
-  height: 14px;
 }
 /*---滚动框背景样式--*/
-::-webkit-scrollbar-track-piece {
+::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
 li {
-  list-style-type: none ;
+  list-style-type: none;
 }
 
 /* begin--通用*/