.main{ .logo-con{ height: 64px; // flex 居中:收起态只剩徽标也自动居中 display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; white-space: nowrap; // 渐变徽标:与登录页主色同源,无底色块,直接落在侧栏上 .logo-badge{ flex: none; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 10px; background: linear-gradient(135deg, #4f6ef7, #7c5cf0); color: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 2px 8px rgba(79, 110, 247, .3); } // 文字:深墨色,轻字重间隔,与侧栏浅底协调 .logo-name{ font-size: 21px; font-weight: 600; letter-spacing: .5px; color: #1f2d50; } } .header-con{ background: #fff; padding: 0 20px; width: 100%; } .main-layout-con{ height: 100%; overflow: hidden; } .main-content-con{ height: ~"calc(100% - 60px)"; overflow: hidden; } .tag-nav-wrapper{ padding: 0; height:40px; background:#f5f7fa; } .content-wrapper{ padding: 18px; height: ~"calc(100% - 80px)"; overflow: auto; // 内容填充白色背景 background: #fff; } .left-sider{ // 浅灰蓝侧边栏:比内容区深半档,形成层次但不沉重 background: #f0f3fa; // 分隔线用 border 而非 box-shadow:阴影会被右侧内容区(标签栏等)背景盖住 border-right: 1px solid #e2e8f5; .ivu-layout-sider-children{ overflow-y: scroll; margin-right: -18px; } } } .ivu-menu-item > i{ margin-right: 12px !important; } .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i { margin-right: 8px !important; } .collased-menu-dropdown{ width: 100%; margin: 0; line-height: normal; padding: 7px 0 6px 16px; clear: both; font-size: 12px !important; white-space: nowrap; list-style: none; cursor: pointer; transition: background 0.2s ease-in-out; &:hover{ background: rgba(100, 100, 100, 0.1); } & * { color: #515a6e; } .ivu-menu-item > i{ margin-right: 12px !important; } .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i { margin-right: 8px !important; } } .ivu-select-dropdown.ivu-dropdown-transfer{ max-height: 400px; }