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

fix: update menu scroll

Browse Source
This commit is contained in:
Fine 2023-02-09 15:46:50 +08:00
parent 17b627a5d9
commit 65e0edbfb6
2 changed files with 74 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/layout/components/SideBar.vue
View File

@ -17,6 +17,7 @@ limitations under the License. -->
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
</div>
<div class="menu scroll_bar_dark">
<el-menu
active-text-color="#448dfe"
background-color="#252a2f"
@ -61,6 +62,7 @@ limitations under the License. -->
</el-menu-item>
</template>
</el-menu>
</div>
<div
class="menu-control"
:class="isCollapse ? 'collapse' : ''"
@ -113,7 +115,17 @@ limitations under the License. -->
.side-bar {
background: #252a2f;
height: 100%;
margin-bottom: 100px;
overflow: hidden;
margin-bottom: 180px;
}
.menu {
height: calc(100% - 30px);
overflow: hidden;
width: 220px;
}
.menu:hover {
overflow-y: auto;
overflow-x: hidden;
}

18
src/styles/lib.scss
View File

@ -197,3 +197,21 @@
box-shadow: inset 0 0 6px #ccc;
background-color: #aaa;
}
.scroll_bar_dark::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #666;
}
.scroll_bar_dark::-webkit-scrollbar-track {
background-color: #252a2f;
border-radius: 3px;
box-shadow: inset 0 0 6px #999;
}
.scroll_bar_dark::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px #888;
background-color: #999;
}