.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: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s !important; } /* 菜单文本样式 - 加大字体并加粗 */ .sidebar-menu .ant-menu-item { 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; } /* hover状态 - 不缩进,只改变背景 */ .sidebar-menu .ant-menu-item:hover { background: rgba(255, 255, 255, 0.1) !important; } .sidebar-menu .ant-menu-item:hover .ant-menu-title-content { transform: translateX(0); } /* 选中状态 - 文本缩进 */ .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; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-menu .menu-section-title .ant-menu-item-group-title { opacity: 1; } /* 折叠状态下隐藏分组标题 */ .sidebar-menu .ant-menu-item-group-title:empty { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } /* 分隔线 */ .sidebar-menu .ant-menu-item-divider { height: 1px; background: rgba(255, 255, 255, 0.1) !important; margin: 8px 20px !important; border: none; } .sidebar-menu .menu-divider { height: 1px; background: rgba(255, 255, 255, 0.1) !important; margin: 8px 20px !important; border: none; } /* 管理员功能区域动画 */ .sidebar-menu .admin-section { animation: fadeInDown 0.4s ease-out; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* 菜单项图标样式和动画 */ .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; } /* hover状态 - 图标不缩进,只轻微放大 */ .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); } .sidebar-menu .ant-menu-item-selected:hover .ant-menu-item-icon { transform: translateX(8px) scale(1.05); } /* 折叠状态下的样式调整 */ .sidebar-menu .ant-menu-item-group-title { transition: opacity 0.2s ease; } /* 响应式调整 */ @media (max-width: 768px) { .sidebar-menu .ant-menu-item { padding: 14px 20px !important; } }