github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 14:45:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

set scroll bar

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-07 13:23:21 +08:00
parent 3c92edc35c
commit 96b1445a2f
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/styles/lib.scss
View File

@ -171,3 +171,21 @@
color: #ddd; 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;
}

6
src/views/dashboard/controls/Tab.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h tab-header"> <div class="flex-h tab-header">
<div class="tabs"> <div class="tabs scroll_bar_style">
<span <span
v-for="(child, idx) in data.children || []" v-for="(child, idx) in data.children || []"
:key="idx" :key="idx"
@ -259,6 +259,10 @@ export default defineComponent({
.tabs { .tabs {
height: 40px; height: 40px;
color: #ccc; color: #ccc;
width: 100%;
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
span { span {
display: inline-block; display: inline-block;