style(subscriptions-list):modify scrollbar style

emqx · Jul 29, 2023 · c847591 · c847591
1 parent 9d4dfa9
commit c847591
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss
@@ -36,6 +36,17 @@ body.select-none {
   :focus {
     outline: none;
   }
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: var(--color-bg-scrollbar);
+    width: 8px;
+  }
 }
 
 h1 {

diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue
@@ -715,7 +715,7 @@ export default class SubscriptionsList extends Vue {
     border-bottom: none;
     text-align: center;
     position: relative;
-    padding: 12px 16px 0 16px;
+    padding: 12px 16px;
     .hide-btn {
       font-size: 20px;
       position: absolute;
@@ -724,9 +724,10 @@ export default class SubscriptionsList extends Vue {
     }
   }
   .el-card__body {
-    padding: 18px 16px 0 16px;
+    padding: 6px 16px;
     height: 100%;
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: overlay;
     .topics-item {
       cursor: pointer;
       color: var(--color-text-title);