.sidebar-menu-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .sidebar-menu { background: transparent !important; border: none; height: 100%; overflow-y: auto; overflow-x: hidden; } .sidebar-menu .ant-menu-item { margin: 0 !important; padding: 12px 20px !important; height: auto !important; line-height: 1.5 !important; transition: all 0.3s !important; font-size: 15px !important; font-weight: 600 !important; } .sidebar-menu .ant-menu-item .ant-menu-title-content { font-size: 15px !important; font-weight: 600 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; } .sidebar-menu .ant-menu-item:hover { background: rgba(255, 255, 255, 0.1) !important; } .sidebar-menu .ant-menu-item-selected { background: rgba(255, 255, 255, 0.2) !important; border-left: 3px solid white; } .sidebar-menu .ant-menu-item-selected .ant-menu-title-content { transform: translateX(8px); } .sidebar-menu .ant-menu-item-selected:hover { background: rgba(255, 255, 255, 0.25) !important; } .sidebar-menu .ant-menu-item-selected:hover .ant-menu-title-content { transform: translateX(8px); } .sidebar-menu .ant-menu-item-group-title { padding: 12px 20px 8px !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.7) !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .sidebar-menu .ant-menu-item-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 18px !important; display: inline-flex; align-items: center; } .sidebar-menu .ant-menu-item:hover .ant-menu-item-icon { transform: scale(1.05); } .sidebar-menu .ant-menu-item-selected .ant-menu-item-icon { transform: translateX(8px); } @media (max-width: 768px) { .sidebar-menu .ant-menu-item { padding: 14px 20px !important; } } /* ── 折叠态(60px):图标居中,覆盖展开态的左对齐 padding/位移 ── */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-group-title { padding: 12px 0 !important; text-align: center; } .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item { display: flex; align-items: center; justify-content: center; width: 100%; } .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-selected .ant-menu-title-content { transform: none !important; } .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item .ant-menu-item-icon, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item:hover .ant-menu-item-icon, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-selected .ant-menu-item-icon { transform: none !important; margin: 0; } /* 折叠时去掉左侧 3px 选中边框(会挤偏图标),选中态用高亮背景区分 */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item-selected { border-left: none !important; } /* 折叠时隐藏 label 占位(antd 折叠动画保留 opacity 占位,会把图标挤离中心) */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item .ant-menu-title-content { display: none !important; } /* 兼容:部分版本折叠态用 vertical 类渲染,同样居中 */ .sidebar-menu.ant-menu-vertical .ant-menu-item, .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item { padding-left: 0 !important; padding-right: 0 !important; } .sidebar-menu.ant-menu-vertical .ant-menu-item .ant-menu-title-content { display: none !important; } /* 折叠态 flex 子元素居中(display:flex 已生效,缺 justify-content) */ .sidebar-menu.ant-menu-inline-collapsed .ant-menu-item { justify-content: center !important; }