github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-13 10:45:25 +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'"> <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" /> <Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
</div> </div>
<el-menu <div class="menu scroll_bar_dark">
active-text-color="#448dfe" <el-menu
background-color="#252a2f" active-text-color="#448dfe"
class="el-menu-vertical" background-color="#252a2f"
:default-active="name" class="el-menu-vertical"
text-color="#efefef" :default-active="name"
:unique-opened="true" text-color="#efefef"
:collapse="isCollapse" :unique-opened="true"
:style="{ border: 'none' }" :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 v-for="(menu, index) in routes" :key="index">
<template #title> <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<router-link class="items" :to="menu.path"> <template #title>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> <router-link class="items" :to="menu.path">
<Icon size="lg" :iconName="menu.meta.icon" /> <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
</el-icon> <Icon size="lg" :iconName="menu.meta.icon" />
<span class="title" :class="isCollapse ? 'collapse' : ''"> </el-icon>
{{ t(menu.meta.title) }} <span class="title" :class="isCollapse ? 'collapse' : ''">
</span> {{ t(menu.meta.title) }}
</router-link> </span>
</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> </router-link>
</el-menu-item> </template>
</el-menu-item-group> <el-menu-item-group>
</el-sub-menu> <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
<el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else> <router-link class="items" :to="m.path">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> <span class="title">{{ m.meta && t(m.meta.title) }}</span>
<router-link class="items" :to="menu.children[0].path"> </router-link>
<Icon size="lg" :iconName="menu.meta.icon" /> </el-menu-item>
</router-link> </el-menu-item-group>
</el-icon> </el-sub-menu>
<template #title> <el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
<router-link class="items" :to="menu.children[0].path"> <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<span class="title">{{ t(menu.meta.title) }}</span> <router-link class="items" :to="menu.children[0].path">
</router-link> <Icon size="lg" :iconName="menu.meta.icon" />
</template> </router-link>
</el-menu-item> </el-icon>
</template> <template #title>
</el-menu> <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 <div
class="menu-control" class="menu-control"
:class="isCollapse ? 'collapse' : ''" :class="isCollapse ? 'collapse' : ''"
@ -113,7 +115,17 @@ limitations under the License. -->
.side-bar { .side-bar {
background: #252a2f; background: #252a2f;
height: 100%; 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-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }

18
src/styles/lib.scss
View File

@ -197,3 +197,21 @@
box-shadow: inset 0 0 6px #ccc; box-shadow: inset 0 0 6px #ccc;
background-color: #aaa; 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;
}