最终效果:
原始效果:
相关代码:
<!-- 菜单 --><div class="button-manage-right"><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-itemv-for="item in currentCommandInfo.functionArr":key="item.functionId":index="item.functionId">{{ item.functionName }}</el-menu-item></el-menu></div><style lang="less" scoped>
// 修改菜单的样式
.button-manage-right {& ::v-deep .el-menu {background-color: transparent;}& ::v-deep .el-menu.el-menu--horizontal {height: 100%;border-bottom: none;}& ::v-deep .el-menu--horizontal > .el-menu-item {height: 100%;color: #fff;font-size: 14px;font-weight: bold;letter-spacing: 2px;border-top-left-radius: 5px;border-top-right-radius: 5px;display: flex;justify-content: center;align-items: center;}& ::v-deep .el-menu--horizontal > .el-menu-item:hover {background-color: #2c3c7a;border-bottom-color: #2c3c7a;}& ::v-deep .el-menu--horizontal > .el-menu-item.is-active {background-color: #2c3c7a;border-bottom-color: #2c3c7a;}
}
</style>
)
