github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +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

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

@ -17,50 +17,52 @@ limitations under the License. -->
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
</div>
<el-menu
active-text-color="#448dfe"
background-color="#252a2f"
class="el-menu-vertical"
:default-active="name"
text-color="#efefef"
:unique-opened="true"
:collapse="isCollapse"
:style="{ border: 'none' }"
>
<template v-for="(menu, index) in routes" :key="index">
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<template #title>
<router-link class="items" :to="menu.path">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<Icon size="lg" :iconName="menu.meta.icon" />
</el-icon>
<span class="title" :class="isCollapse ? 'collapse' : ''">
{{ t(menu.meta.title) }}
</span>
</router-link>
</template>
<el-menu-item-group>
<el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
<router-link class="items" :to="m.path">
<span class="title">{{ m.meta && t(m.meta.title) }}</span>
<div class="menu scroll_bar_dark">
<el-menu
active-text-color="#448dfe"
background-color="#252a2f"
class="el-menu-vertical"
:default-active="name"
text-color="#efefef"
:unique-opened="true"
:collapse="isCollapse"
:style="{ border: 'none' }"
>
<template v-for="(menu, index) in routes" :key="index">
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<template #title>
<router-link class="items" :to="menu.path">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<Icon size="lg" :iconName="menu.meta.icon" />
</el-icon>
<span class="title" :class="isCollapse ? 'collapse' : ''">
{{ t(menu.meta.title) }}
</span>
</router-link>
</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<router-link class="items" :to="menu.children[0].path">
<Icon size="lg" :iconName="menu.meta.icon" />
</router-link>
</el-icon>
<template #title>
<router-link class="items" :to="menu.children[0].path">
<span class="title">{{ t(menu.meta.title) }}</span>
</router-link>
</template>
</el-menu-item>
</template>
</el-menu>
</template>
<el-menu-item-group>
<el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
<router-link class="items" :to="m.path">
<span class="title">{{ m.meta && t(m.meta.title) }}</span>
</router-link>
</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<router-link class="items" :to="menu.children[0].path">
<Icon size="lg" :iconName="menu.meta.icon" />
</router-link>
</el-icon>
<template #title>
<router-link class="items" :to="menu.children[0].path">
<span class="title">{{ t(menu.meta.title) }}</span>
</router-link>
</template>
</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;
}