style(ccdiProject): 添加导航菜单简洁链接风格样式

This commit is contained in:
wkc
2026-03-04 10:40:30 +08:00
parent 9f2a2b7c17
commit 4678f2cd44

View File

@@ -316,21 +316,42 @@ export default {
}
.header-right {
.action-buttons {
display: flex;
align-items: center;
gap: 12px;
.nav-menu {
// 移除默认背景色和边框
background-color: transparent;
border-bottom: none;
.el-button {
padding: 8px 16px;
// 菜单项基础样式
.el-menu-item,
.el-submenu__title {
font-size: 14px;
color: #606266;
padding: 0 16px;
height: 40px;
line-height: 40px;
border-bottom: 2px solid transparent;
.el-icon--right {
margin-left: 4px;
&:hover {
background-color: #f5f7fa;
color: #303133;
}
}
.el-tag {
// 激活状态:底部下划线 + 蓝色文字
.el-menu-item.is-active {
color: #1890ff;
border-bottom: 2px solid #1890ff;
background-color: transparent;
}
// 下拉菜单激活状态
.el-submenu.is-active > .el-submenu__title {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
// 下拉菜单图标
.el-submenu__icon-arrow {
margin-left: 4px;
}
}
@@ -457,4 +478,22 @@ export default {
}
}
}
// 下拉菜单弹窗样式
::v-deep .el-menu--popup {
min-width: 140px;
.el-menu-item {
font-size: 14px;
&:hover {
background-color: #f5f7fa;
}
&.is-active {
color: #1890ff;
background-color: #e6f7ff;
}
}
}
</style>