.systemContent { display: flex; height: 100vh; // justify-content: space-between; flex-wrap: nowrap; // padding: 12px; .tabBarHeader { background-color: #fff; padding: 0; width: 100%; min-height: 62px; display: grid; // margin-bottom: 10px; .tabBarRow { padding: 0 12px; justify-content: flex-end; .tabBarLeft { display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: center; .leftLogo { width: 36px; height: 36px; margin: 0 12px; } .leftMenu { width: calc(100% - 52px); } } .tabBarLeft { text-align: right; display: flex; // justify-content: flex-end;s flex-wrap: nowrap; align-items: center; } .tabBarRight { text-align: right; display: flex; justify-content: flex-end; flex-wrap: nowrap; align-items: center; .tabBarRightAvaTor { margin-right: 20px; } .tabBarRightName { margin-right: 5px; } .tabBarRightBtn { height: 100%; } } } } .rightContent { width: calc(100% - 230px); display: flex; flex-direction: column; height: 100vh; overflow: auto; } .leftMenu { margin: 0; width: 230px; overflow-y: auto; overflow-x: hidden; background-color: #2E4CD4; .ant-menu-inline, .ant-menu-vertical { background: #2E4CD4 !important; } // 默认情况字体样式和右边距 .ant-menu-title-content { margin-left: 28px !important; } .ant-menu-item { width: 100%; // margin: 0px; margin-left: 0px; border-radius: 0px; } .ant-menu-item, .ant-menu-submenu-title { color: rgba(255, 255, 255, 0.6) !important; margin-right: 15px !important; } // 选中状态样式 .ant-menu-item-selected { color: rgba(255, 255, 255, 1) !important; background-color: rgba(255, 255, 255, 0.22) !important; } // 选中状态下的文本颜色和右边距 .ant-menu-item-selected .ant-menu-item-icon, .ant-menu-item-selected a { color: rgba(255, 255, 255, 1) !important; // margin-right: 15px !important; } .menuTitle { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 62px; width: 100%; } } .rightContentMain { width: 100%; //background-color: #ffffff; // border-radius: 6px; overflow-y: auto; // height: 100%; overflow: auto; } }