@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%; } /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{ height:50px; outline-offset:-2px; outline:2px solid #dddee0; border: 2px solid #dddee0; background-color: #dddee0; border-radius: 4px; } /*---鼠标点击滚动条显示样式--*/ ::-webkit-scrollbar-thumb:hover{ height:50px; } /*---滚动条大小--*/ ::-webkit-scrollbar{ width:8px; height:8px; } /*---滚动框背景样式--*/ ::-webkit-scrollbar-track-piece{ } #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: auto; flex-grow: 0; flex-shrink: 0; } .page-content-wrapper { flex-grow: 1; flex-shrink: 1; } } .page-footer { order: 2; flex-grow: 0; flex-shrink: 0; height: $pageFooterHeight; line-height: $pageFooterHeight; text-align: center; color: #6d6d6d; } } #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; height: 18px; } } .menu-toggler.sidebar-toggler { margin-top: 10.5px; } } .data-menu { 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; .header-nav{ margin-right: 10px; >li{ float: left; width: 50px; height: 50px; padding: 0 4px; box-sizing: border-box; } } .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; padding-bottom: 10px; .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; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; .page-bar { flex-grow: 0; flex-shrink: 0; height: 30px; padding: 0 10px; margin-bottom: 10px; border-bottom: 1px solid #333; .el-breadcrumb { font-size: 14px; line-height: 30px; } } .page-content { flex-grow: 1; flex-shrink: 1; overflow-y: auto; } } // #page-main #page-container #page-content-wrapper .page-content.page-table-template { #page-main #page-container #page-content-wrapper .page-table-template { // display: flex; // flex-direction: column; // justify-content: flex-start; // align-items: stretch; // flex-grow: 1; // flex-shrink: 1; height: 100%; >.query-form { flex-grow: 0; flex-shrink: 0; } >.data-table { // flex-grow: 1; // flex-shrink: 1; height: calc(100% - 54px); // overflow-x: auto; // overflow-y: auto; background: #fff; // margin-top: 10px; } >.data-table-pagination { // z-index: 99999; margin-top: 10px; // flex-grow: 0; // flex-shrink: 0; // display: flex; // justify-content: flex-end; text-align: right; // position: fixed; // bottom: 0; // background: #f2f2f2; // left: 242px; // right: 0; // padding-top: 10px; // padding-bottom: 10px; } } #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 { .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; } &.btn { padding: 2px 0; } } } } } } #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; // } // } // } .content-scrollbar { height: calc(100vh - 33px); background: #364150; .el-scrollbar__bar { &.is-vertical { 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; // // } } } } }