.app-sider { height: 100%; overflow: auto; background: #fafafa; border-right: 1px solid #f0f0f0; transition: all 0.2s; } .app-sider::-webkit-scrollbar { width: 6px; } .app-sider::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 3px; } .app-sider::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } /* 菜单样式 */ .sider-menu { border-right: none; padding-top: 8px; background: #fafafa; } /* 收起状态下的图标放大 */ :global(.ant-layout-sider-collapsed) .sider-menu :global(.ant-menu-item) { padding: 0 !important; display: flex; align-items: center; justify-content: center; height: 56px; margin: 8px 0; } /* 收起状态下的 SubMenu 样式 */ :global(.ant-layout-sider-collapsed) .sider-menu :global(.ant-menu-submenu) { padding: 0 !important; } :global(.ant-layout-sider-collapsed) .sider-menu :global(.ant-menu-submenu-title) { padding: 0 !important; display: flex; align-items: center; justify-content: center; height: 56px; margin: 8px 0; } :global(.ant-layout-sider-collapsed) .sider-menu :global(.anticon) { font-size: 24px; margin: 0; } /* 收起状态下的 Tooltip */ :global(.ant-layout-sider-collapsed) .sider-menu :global(.ant-menu-item-icon) { font-size: 24px; } :global(.ant-layout-sider-collapsed) .sider-menu :global(.ant-menu-submenu-title) :global(.anticon) { font-size: 24px; margin: 0; } /* 菜单项徽章 */ .menu-item-with-badge { display: flex; align-items: center; justify-content: space-between; width: 100%; } .menu-badge { font-size: 10px; height: 18px; line-height: 18px; border-radius: 9px; padding: 0 6px; margin-left: 8px; } .badge-hot :global(.ant-badge-count) { background: #ff4d4f; } .badge-new :global(.ant-badge-count) { background: #52c41a; } /* 收起状态下隐藏徽章 */ :global(.ant-layout-sider-collapsed) .menu-badge { display: none; }