.ant-layout-aside { position: relative; min-height: 100%; } .ant-layout-aside .ant-layout-logo { width: 150px; height: 32px; background: #333; border-radius: 6px; margin: 16px 24px 16px 28px; transition: all 0.3s ease; } .ant-layout-aside-collapse .ant-layout-logo { width: 32px; margin: 16px; transition: all 0.3s ease; } .ant-layout-aside .ant-layout-sider { width: 224px; background: #404040; position: absolute; overflow: visible; padding-bottom: 24px; height: 100%; transition: all 0.3s ease; } .ant-layout-aside-collapse .ant-layout-sider { width: 64px; transition: all 0.3s ease; } .ant-layout-aside .ant-layout-sider > .ant-menu { margin-bottom: 20px; } .ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item { margin: 16px 0; } .ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text { vertical-align: baseline; display: inline-block; } .ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon { transition: font-size .3s; } .ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item { transition: all 0s ease; } .ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon { font-size: 16px; display: inline-block; } .ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text { display: none; } .ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover { background: #333; color: #fff; transition: all 0s ease; } .ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text { display: inline-block; vertical-align: top; background: #333; color: #fff; padding-right: 16px; border-radius: 0 5px 5px 0; } /* 实际使用中需要改成 position: fixed */ .ant-layout-aside .ant-aside-action { height: 42px; width: 224px; position: fixed; bottom: 0; background: #656565; color: #fff; text-align: center; line-height: 42px; cursor: pointer; transition: all 0.3s ease; } .ant-layout-aside-collapse .ant-aside-action { width: 64px; transition: all 0.3s ease; } .ant-layout-aside .ant-layout-header { background: #fff; height: 64px; border-bottom: 1px solid #e9e9e9; } /*.ant-layout-aside .ant-layout-breadcrumb {*/ /*margin: 7px 0 -17px 24px;*/ /*}*/ .ant-layout-aside .ant-layout-main { margin-left: 224px; transition: all 0.3s ease; } .ant-layout-aside-collapse .ant-layout-main { margin-left: 64px; transition: all 0.3s ease; } .ant-layout-aside .ant-layout-container { margin: 0px 16px; } .ant-layout-aside .ant-layout-content { background: #fff; padding: 24px; } .ant-layout-aside .ant-layout-footer { height: 64px; line-height: 64px; text-align: center; font-size: 12px; color: #999; background: #fff; border-top: 1px solid #e9e9e9; width: 100%; }