先上图:
如图所示,我想实现上边导航栏,左边菜单栏,右边内容区的布局,每个菜单项有个badge。左边的导航栏设置overflow-y: scroll,overflow-x: hidden。可见badge被部分裁剪了。请问各位大佬有什么好的办法解决这个问题吗。代码如下:
<template>
<div id="indexApp">
<div class="header">导航栏</div>
<div class="content">
<div class="side-menu">
<div class="menu-item" v-for="i in 12" :key="i">
<span class="badge">12</span>
菜单{{ i }}
</div>
</div>
<div class="side-main">
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.header {
padding: .18rem;
text-align: center;
background-color: #484759;
color: #FFFFFF;
}
.content {
display: flex;
flex: 1;
flex-direction: row;
.side-menu {
width: .50rem;
flex-shrink: 0;
overflow-y: scroll;
overflow-x: hidden;
background-color: #f2f5f7;
.menu-item {
position: relative;
padding: .14rem;
text-align: center;
font-size: 16px;
color: #333333;
.badge {
position: absolute;
right: -.10rem;
top: .10rem;
display: flex;
justify-content: center;
align-items: center;
width: .24rem;
height: .24rem;
border-radius: 50%;
background-color: #FC4B4C;
font-size: 10px;
color: #FFFFFF;
}
}
}
.side-main {
flex:1;
overflow: scroll;
padding: 0 .15rem;
}
}
</style>
<script>
export default{
data(){
return {
}
},
}
</script>