@import './index.less'; body { &.colorWeak { filter: invert(80%); } &.userLayout { overflow: auto; } } .layout.ant-layout { height: auto; overflow-x: hidden; &.mobile, &.tablet { .ant-layout-content { .content { margin: 12px 0 0; } } /** * ant-table-wrapper * 覆盖的表格手机模式样式,如果想修改在手机上表格最低宽度,可以在这里改动 */ .ant-table-wrapper { .ant-table-content { overflow-y: auto; } .ant-table-body { min-width: 800px; } } .topmenu { /* 必须为 topmenu 才能启用流式布局 */ &.content-width-Fluid { .header-index-wide { margin-left: 0; } } } } &.mobile { .sidemenu { .ant-header-fixedHeader { &.ant-header-side-opened, &.ant-header-side-closed { width: 100%; } } } } &.ant-layout-has-sider { flex-direction: row; } .trigger { font-size: 20px; line-height: 44px; padding: 0 24px; cursor: pointer; transition: color 0.3s; &:hover { background: rgba(0, 0, 0, 0.025); } } .topmenu { .ant-header-fixedHeader { position: fixed; top: 0; right: 0; z-index: 9; width: 100%; transition: width 0.2s; &.ant-header-side-opened { width: 100%; } &.ant-header-side-closed { width: 100%; } } .ant-header-multiTab{ margin: auto; } .ant-header-fixedMultiTab{ position: fixed; z-index: 8; width: 100%; top: 44px; right:0; margin: auto; } /* 必须为 topmenu 才能启用流式布局 */ &.content-width-Fluid { .header-index-wide { max-width: unset; .header-index-left { flex: 1 1 1000px; .logo{ margin:0 25px; } .ant-menu.ant-menu-horizontal{ max-width: calc(100vw - 190px - 238px - 25px); flex: 1 1 calc(100vw - 190px - 238px - 25px); } } .header-index-right{ margin-right:25px; } } .page-header-index-wide { max-width: unset; } } } .sidemenu { .ant-header-fixedHeader { position: fixed; top: 0; right: 0; z-index: 9; width: 100%; transition: width 0.2s; &.ant-header-side-opened { width: calc(100% - 230px); } &.ant-header-side-closed { width: calc(100% - 80px); } } .ant-header-multiTab{ margin: auto; } .ant-header-fixedMultiTab{ position: fixed; z-index: 8; width: 100%; top: 44px; right:0; margin: auto; &.ant-header-side-opened { width: calc(100% - 230px); } &.ant-header-side-closed { width: calc(100% - 80px); } } } .header { height: 44px; padding: 0 12px 0 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); position: relative; } .ant-layout-header{ height: 44px; line-height: 44px; } .header, .top-nav-header-index { .user-wrapper { float: right; height: 100%; .action { cursor: pointer; padding: 0 12px; display: inline-block; transition: all 0.3s; height: 100%; color: rgba(0, 0, 0, 0.65); &:hover { background: rgba(0, 0, 0, 0.025); } .avatar { margin: 20px 8px 20px 0; color: #1890ff; background: hsla(0, 0%, 100%, 0.85); vertical-align: middle; } .icon { font-size: 16px; padding: 4px; } } } &.dark { .user-wrapper { .action { color: rgba(255, 255, 255, 0.85); a { color: rgba(255, 255, 255, 0.85); } &:hover { background: rgba(255, 255, 255, 0.16); } } } } } &.mobile, &.tablet { .top-nav-header-index { .header-index-wide { .header-index-left { .trigger { color: rgba(255, 255, 255, 0.85); padding: 0 12px; } .logo.top-nav-header { flex: 0 0 36px; text-align: center; line-height: 38px; h1 { display: none; } } } } &.light { .header-index-wide { .header-index-left { .trigger { color: rgba(0, 0, 0, 0.65); } } } // } } } &.tablet { // overflow: hidden; text-overflow:ellipsis; white-space: nowrap; .top-nav-header-index { .header-index-wide { .header-index-left { .logo > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .ant-menu.ant-menu-horizontal { flex: 1 1 auto; white-space: normal; } } } } .top-nav-header-index { box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); position: relative; transition: background 0.3s, width 0.2s; .header-index-wide { max-width: 1200px; margin: auto; padding-left: 0; display: flex; height: 44px; .ant-menu.ant-menu-horizontal { max-width: 835px; flex: 0 1 835px; border: none; height: 44px; line-height: 44px; } .header-index-left { flex: 0 1 1000px; display: flex; .logo.top-nav-header { flex: 0 0 auto; width: auto; height: 44px; position: relative; line-height: 44px; transition: all 0.3s; overflow: hidden; img, svg { display: inline-block; vertical-align: middle; height: 42px; width: 42px; } h1 { color: #fff; display: inline-block; vertical-align: top; font-size: 16px; margin: 0 0 0 12px; font-weight: 400; } } } .header-index-right { flex: 0 0 238px; align-self: flex-end; height: 44px; overflow: hidden; .content-box { float: right; } } } &.light { background-color: #fff; .header-index-wide { .header-index-left { .logo { h1 { color: #002140; } } } } } } // 内容区 .layout-content { margin: 24px 24px 0px; height: 100%; height: 64px; padding: 0 12px 0 0; } // footer .ant-layout-footer { padding: 0; } } .topmenu { .page-header-index-wide { max-width: 1200px; margin: 0 auto; } } // drawer-sider 自定义 .ant-drawer.drawer-sider { .sider { box-shadow: none; } &.dark { .ant-drawer-content { background-color: rgb(0, 21, 41); } } &.light { box-shadow: none; .ant-drawer-content { background-color: #fff; } } .ant-drawer-body { padding: 0; } } // 菜单样式 .sider { box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); position: relative; z-index: @ant-global-sider-zindex; min-height: 100vh; .ant-layout-sider-children { overflow-y: hidden; &:hover { overflow-y: auto; } } &.ant-fixed-sidemenu { position: fixed; height: 100%; } .logo { position: relative; height: 44px; padding-left: 10px; overflow: hidden; line-height: 44px; background: #002140; transition: all .3s; img, svg, h1 { display: inline-block; vertical-align: middle; } img, svg { height: 42px; width: 42px; } h1 { color: #fff; font-size: 16px; margin: 0 0 0 6px; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-weight: 600; vertical-align: middle; } } &.ant-layout-sider-collapsed{ .logo{ padding-left: 20px; } } &.light { background-color: #fff; box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05); .logo { background: #fff; box-shadow: 1px 1px 0px 0px #e8e8e8; h1 { color: unset; } } .ant-menu-light { border-right-color: transparent; } } } // 外置的样式控制 .user-dropdown-menu { span { user-select: none; } } .user-dropdown-menu-wrapper.ant-dropdown-menu { padding: 4px 0; .ant-dropdown-menu-item { // width: 160px; width: 100%; } .ant-dropdown-menu-item > .anticon:first-child, .ant-dropdown-menu-item > a > .anticon:first-child, .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child { min-width: 12px; margin-right: 8px; } } // 数据列表 样式 .table-alert { margin-bottom: 16px; } .table-page-search-wrapper { .ant-form-inline { .ant-form-item { display: flex; margin-bottom: 24px; margin-right: 0; .ant-form-item-control-wrapper { flex: 1 1; display: inline-block; vertical-align: middle; } > .ant-form-item-label { line-height: 32px; padding-right: 8px; width: auto; } .ant-form-item-control { height: 32px; line-height: 32px; } } } .table-page-search-submitButtons { display: block; margin-bottom: 24px; white-space: nowrap; } } .content { .table-operator { padding: 15px 0; border-top: 1px solid #eee; button { margin-right: 8px; } } .table-operator-nobor{ padding: 0 0 15px 0; button { margin-right: 8px; } } } /* 扩展ant design pro按钮组件颜色 */ .ant-btn-primary.button-primary { background-color: #39f; border-color: #39f; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #52a6fb; border-color: #52a6fb; } &:active, &.active { background-color: #3d80bf; border-color: #3d80bf; } } .ant-btn-primary.button-info { background-color: #2db7f5; border-color: #2db7f5; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #32c8f5; border-color: #32c8f5; } &:active, &.active { background-color: #27a3d8; border-color: #27a3d8; } } .ant-btn-primary.button-success { background-color: #0c6; border-color: #0c6; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #01dc8c; border-color: #01dc8c; } &:active, &.active { background-color: #00af57; border-color: #00af57; } } .ant-btn-primary.button-warning { background-color: #f90; border-color: #f90; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #ffb60a; border-color: #ffb60a; } &:active, &.active { background-color: #dd8500; border-color: #dd8500; } } .ant-btn-primary.button-error { background-color: #f30; border-color: #f30; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #ff6666; border-color: #ff6666; } &:active, &.active { background-color: #d62a00; border-color: #d62a00; } } .ant-btn-primary.button-geekblue { background-color: #2F54EB; border-color: #2F54EB; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #1d39c4; border-color: #1d39c4; } &:active, &.active { background-color: #597ef7; border-color: #597ef7; } } .ant-btn-primary.button-purple { background-color: #722ED1; border-color: #722ED1; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #9254de; border-color: #9254de; } &:active, &.active { background-color: #531dab; border-color: #531dab; } } .ant-btn-primary.button-grey { background-color: #82848a; border-color: #82848a; margin: 0 5px; font-size: 12px; &:hover, &:focus { background-color: #909399; border-color: #909399; } &:active, &.active { background-color: #c8c9cc; border-color: #c8c9cc; } } // btn-link .ant-btn-link.button-primary { color: #39f; &:hover, &:focus { color: #52a6fb; } &:active, &.active { color: #3d80bf; } } .ant-btn-link.button-info { color: #2db7f5; &:hover, &:focus { color: #32c8f5; } &:active, &.active { color: #27a3d8; } } .ant-btn-link.button-success { color: #0c6; &:hover, &:focus { color: #01dc8c; } &:active, &.active { color: #00af57; } } .ant-btn-link.button-warning { color: #e89105; &:hover, &:focus { color: #ffb60a; } &:active, &.active { color: #dd8500; } } .ant-btn-link.button-error { color: #f30; &:hover, &:focus { color: #ff6666; } &:active, &.active { color: #d62a00; } } .ant-btn-link.button-geekblue { color: #2F54EB; &:hover, &:focus { color: #1d39c4; } &:active, &.active { color: #597ef7; } } .ant-btn-link.button-purple { color: #722ED1; &:hover, &:focus { color: #9254de; } &:active, &.active { color: #531dab; } } .ant-btn-link.button-grey { color: #82848a; &:hover, &:focus { color: #909399; } &:active, &.active { color: #c8c9cc; } }