diff --git a/ruoyi-ui/src/views/ccdiProject/detail.vue b/ruoyi-ui/src/views/ccdiProject/detail.vue index cabb6da..4e7e721 100644 --- a/ruoyi-ui/src/views/ccdiProject/detail.vue +++ b/ruoyi-ui/src/views/ccdiProject/detail.vue @@ -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; + } + } +}