@import './theme.scss'; $pageHeaderHeight: 50px; $pageSidebarWidth: 235px; $pageSidebarClosedWidth: 64px; $pageSidebarItemHeight: 40px; $pageFooterHeight: 40px; html, body { padding: 0 !important; margin: 0 !important; font-size: 14px; width: 100%; height: 100%; } #app { width: 100%; height: 100%; } #page-main { width: 100%; height: 100%; display: flex; flex-direction: column; /* 垂直 从上到下 */ justify-content: flex-start; /* 垂直 左对齐 */ align-items: stretch; .page-header { order: 0; flex-grow: 0; flex-shrink: 0; height: $pageHeaderHeight; } .page-container { order: 1; flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: row; /* 水平,从左到右 */ justify-content: flex-start; /* 水平上对齐 */ .page-sidebar-wrapper { width: $pageSidebarWidth; overflow-y: auto; flex-grow: 0; flex-shrink: 0; } .page-content-wrapper { flex-grow: 1; flex-shrink: 1; .page-content { padding: 10px; } } } .page-footer { order: 2; flex-grow: 0; flex-shrink: 0; height: $pageFooterHeight; } } #page-main .page-header { display: flex; flex-direction: row; /* 水平, 从左向右 */ justify-content: flex-start; /* 垂直 左对齐 */ .page-logo { flex-grow: 0; flex-shrink: 0; padding-left: 20px; padding-right: 20px; width: 195px; display: inline-flex; flex-direction: row; justify-content: space-between; > a { display: inline-block; .logo-default { margin: 18px 0 0; } } .menu-toggler.sidebar-toggler { margin: 15.5px 0 0; } } .data-menu { padding: 0 10px; flex-grow: 0; flex-shrink: 1; width: 240px; height: 100%; line-height: $pageHeaderHeight; .data-menu-dropdown { height: 100%; line-height: $pageHeaderHeight; font-size: 18px; } .el-select .el-input--suffix .el-input__inner { height: 30px; line-height: 30px; } } .user-menu { flex-grow: 1; flex-shrink: 1; margin: 0 20px 0 0; padding: 0; height: 100%; display: inline-flex; flex-direction: row-reverse; .user-menu-dropdown { height: 100%; line-height: $pageHeaderHeight; font-size: 18px; margin-left: 20px; } } } #page-main .page-container { .page-sidebar-wrapper { .el-menu { } } } #page-main .page-container #page-sidebar-wrapper { .sidebar-menu.el-menu { border-right: none; .el-submenu { .el-menu-item { height: $pageSidebarItemHeight; line-height: $pageSidebarItemHeight; } } } } /** sidebar 弹框 */ .el-menu--vertical { .el-menu.el-menu--popup.el-menu--popup-right-start { .el-menu-item.sidebar-menu-item { height: $pageSidebarItemHeight; line-height: $pageSidebarItemHeight; } } } #page-main .page-container .page-content-wrapper { margin: 0px 10px 10px 10px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; .page-bar { flex-grow: 0; flex-shrink: 0; height: 30px; padding: 0 20px; // margin-bottom: 10px; border-bottom: 1px solid #c2cedb; .el-breadcrumb { font-size: 14px; line-height: 30px; } } .page-content { flex-grow: 1; flex-shrink: 1; overflow-y: auto; padding: 10px; } } #page-main #page-container #page-content-wrapper .page-content.page-table-template { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; > .query-form { flex-grow: 0; flex-shrink: 0; } > .data-table { flex-grow: 1; flex-shrink: 1; overflow-x: auto; overflow-y: auto; } > .data-table-pagination { flex-grow: 0; flex-shrink: 0; } } #page-main #page-container #page-content-wrapper .page-content > .query-form { padding: 5px 10px 0px 10px; margin-bottom: 10px; .el-form { .el-form-item { margin-bottom: 5px; vertical-align: middle; .el-form-item__label { //min-width: 72px; } .el-form-item__content { margin-left: 0px; } } .halving_line { width: 100%; border-top: 1px solid #dfe6ec; } } } #page-main #page-container #page-content-wrapper .page-content > .data-table { } #page-main #page-container #page-content-wrapper .page-content > .data-table { position: relative; > .el-table { position: absolute; .el-table__header-wrapper { .el-table__header { thead tr th { } } } .el-table__body-wrapper { .el-table__body { tr td { padding: 6px 0; .cell { line-height: 20px; } } } } } } #page-main #page-container #page-content-wrapper .page-content.input-form { form { max-width: 800px; margin: 50px auto; > .el-form-item { margin-bottom: 18px; > .el-form-item__label { width: 180px; } > .el-form-item__content { max-width: 600px; margin-left: 180px; } } } } #page-main.page-sidebar-closed { .page-header { .page-logo { padding-left: 20px; padding-right: 20px; width: 20px; > a { display: none; } } } .page-container { .page-sidebar-wrapper { width: $pageSidebarClosedWidth; } } } @media screen and (max-width: 1000px) { #page-main { .page-header { .page-logo { padding-left: 20px; padding-right: 20px; width: 20px; > a { display: none; } } } .page-container { .page-sidebar-wrapper { width: $pageSidebarClosedWidth; } } } } @media screen and (max-width: 800px) { #page-main { .page-header { .page-logo { display: none; } } .page-container { display: flex; flex-direction: column; justify-content: flex-start; .page-sidebar-wrapper { width: 100%; } } } } @media screen and (max-height: 700px) { #page-main { .page-footer { display: none; } } } #page-main #page-container #page-content-wrapper .box { display: flex; flex-direction: column; .el-tabs { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; .el-tabs__header { flex-grow: 0; flex-shrink: 0; } .el-tabs__content { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; .el-tab-pane { height: 100%; // flex-grow: 1; // flex-shrink: 1; display: flex; flex-direction: column; // // > div { // // flex-grow: 1; // // flex-shrink: 1; // // } } } } }