From 96b1445a2fac0f15db3fad39b8bf92d71032e412 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 7 May 2022 13:23:21 +0800
Subject: [PATCH] set scroll bar

---
 src/styles/lib.scss                  | 18 ++++++++++++++++++
 src/views/dashboard/controls/Tab.vue |  6 +++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 34083a5b..1d2a5084 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -171,3 +171,21 @@
     color: #ddd;
   }
 }
+
+.scroll_bar_style::-webkit-scrollbar {
+  width: 9px;
+  height: 4px;
+  background-color: #eee;
+}
+
+.scroll_bar_style::-webkit-scrollbar-track {
+  background-color: #eee;
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #ccc;
+}
+
+.scroll_bar_style::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  box-shadow: inset 0 0 6px #ccc;
+  background-color: #aaa;
+}
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 3ce22394..5c2e0f50 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h tab-header">
-    <div class="tabs">
+    <div class="tabs scroll_bar_style">
       <span
         v-for="(child, idx) in data.children || []"
         :key="idx"
@@ -259,6 +259,10 @@ export default defineComponent({
 .tabs {
   height: 40px;
   color: #ccc;
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  overflow-y: hidden;
 
   span {
     display: inline-block;