|
@@ -1,13 +1,9 @@
|
|
@import './theme.scss';
|
|
@import './theme.scss';
|
|
-
|
|
|
|
$pageHeaderHeight: 50px;
|
|
$pageHeaderHeight: 50px;
|
|
-
|
|
|
|
$pageSidebarWidth: 235px;
|
|
$pageSidebarWidth: 235px;
|
|
$pageSidebarClosedWidth: 64px;
|
|
$pageSidebarClosedWidth: 64px;
|
|
$pageSidebarItemHeight: 40px;
|
|
$pageSidebarItemHeight: 40px;
|
|
-
|
|
|
|
$pageFooterHeight: 40px;
|
|
$pageFooterHeight: 40px;
|
|
-
|
|
|
|
html,
|
|
html,
|
|
body {
|
|
body {
|
|
padding: 0 !important;
|
|
padding: 0 !important;
|
|
@@ -16,16 +12,20 @@ body {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
#app {
|
|
#app {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
#page-main {
|
|
#page-main {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: column; /* 垂直 从上到下 */
|
|
|
|
- justify-content: flex-start; /* 垂直 左对齐 */
|
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ /* 垂直 从上到下 */
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ /* 垂直 左对齐 */
|
|
align-items: stretch;
|
|
align-items: stretch;
|
|
.page-header {
|
|
.page-header {
|
|
order: 0;
|
|
order: 0;
|
|
@@ -33,16 +33,15 @@ body {
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
height: $pageHeaderHeight;
|
|
height: $pageHeaderHeight;
|
|
}
|
|
}
|
|
-
|
|
|
|
.page-container {
|
|
.page-container {
|
|
order: 1;
|
|
order: 1;
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
-
|
|
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: row; /* 水平,从左到右 */
|
|
|
|
- justify-content: flex-start; /* 水平上对齐 */
|
|
|
|
-
|
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ /* 水平,从左到右 */
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ /* 水平上对齐 */
|
|
.page-sidebar-wrapper {
|
|
.page-sidebar-wrapper {
|
|
width: $pageSidebarWidth;
|
|
width: $pageSidebarWidth;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
@@ -54,7 +53,6 @@ body {
|
|
flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
.page-footer {
|
|
.page-footer {
|
|
order: 2;
|
|
order: 2;
|
|
flex-grow: 0;
|
|
flex-grow: 0;
|
|
@@ -68,21 +66,20 @@ body {
|
|
|
|
|
|
#page-main .page-header {
|
|
#page-main .page-header {
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: row; /* 水平, 从左向右 */
|
|
|
|
- justify-content: flex-start; /* 垂直 左对齐 */
|
|
|
|
-
|
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ /* 水平, 从左向右 */
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ /* 垂直 左对齐 */
|
|
.page-logo {
|
|
.page-logo {
|
|
flex-grow: 0;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
-
|
|
|
|
padding-left: 20px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-right: 20px;
|
|
width: 195px;
|
|
width: 195px;
|
|
-
|
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- > a {
|
|
|
|
|
|
+ >a {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
.logo-default {
|
|
.logo-default {
|
|
margin: 18px 0 0;
|
|
margin: 18px 0 0;
|
|
@@ -127,8 +124,7 @@ body {
|
|
|
|
|
|
#page-main .page-container {
|
|
#page-main .page-container {
|
|
.page-sidebar-wrapper {
|
|
.page-sidebar-wrapper {
|
|
- .el-menu {
|
|
|
|
- }
|
|
|
|
|
|
+ .el-menu {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -144,7 +140,9 @@ body {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
/** sidebar 弹框 */
|
|
/** sidebar 弹框 */
|
|
|
|
+
|
|
.el-menu--vertical {
|
|
.el-menu--vertical {
|
|
.el-menu.el-menu--popup.el-menu--popup-right-start {
|
|
.el-menu.el-menu--popup.el-menu--popup-right-start {
|
|
.el-menu-item.sidebar-menu-item {
|
|
.el-menu-item.sidebar-menu-item {
|
|
@@ -156,11 +154,9 @@ body {
|
|
|
|
|
|
#page-main .page-container .page-content-wrapper {
|
|
#page-main .page-container .page-content-wrapper {
|
|
margin: 0px 10px 10px 10px;
|
|
margin: 0px 10px 10px 10px;
|
|
-
|
|
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
-
|
|
|
|
.page-bar {
|
|
.page-bar {
|
|
flex-grow: 0;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
@@ -186,20 +182,18 @@ body {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
align-items: stretch;
|
|
-
|
|
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
-
|
|
|
|
- > .query-form {
|
|
|
|
|
|
+ >.query-form {
|
|
flex-grow: 0;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
- > .data-table {
|
|
|
|
|
|
+ >.data-table {
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
overflow-x: auto;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
- background: #fff;
|
|
|
|
|
|
+ background: rgb(242, 242, 242);
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
>.data-table-pagination {
|
|
>.data-table-pagination {
|
|
@@ -220,7 +214,7 @@ body {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-#page-main #page-container #page-content-wrapper .page-content > .query-form {
|
|
|
|
|
|
+#page-main #page-container #page-content-wrapper .page-content>.query-form {
|
|
padding: 5px 10px 0px 10px;
|
|
padding: 5px 10px 0px 10px;
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
.el-form {
|
|
.el-form {
|
|
@@ -241,19 +235,16 @@ body {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-#page-main #page-container #page-content-wrapper .page-content .data-table {
|
|
|
|
-}
|
|
|
|
|
|
+#page-main #page-container #page-content-wrapper .page-content .data-table {}
|
|
|
|
|
|
// #page-main #page-container #page-content-wrapper .page-content .data-table {
|
|
// #page-main #page-container #page-content-wrapper .page-content .data-table {
|
|
.data-table {
|
|
.data-table {
|
|
position: relative;
|
|
position: relative;
|
|
-
|
|
|
|
- > .el-table {
|
|
|
|
|
|
+ >.el-table {
|
|
position: absolute;
|
|
position: absolute;
|
|
.el-table__header-wrapper {
|
|
.el-table__header-wrapper {
|
|
.el-table__header {
|
|
.el-table__header {
|
|
- thead tr th {
|
|
|
|
- }
|
|
|
|
|
|
+ thead tr th {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-table__body-wrapper {
|
|
.el-table__body-wrapper {
|
|
@@ -262,10 +253,10 @@ body {
|
|
padding: 6px 0;
|
|
padding: 6px 0;
|
|
.cell {
|
|
.cell {
|
|
line-height: 20px;
|
|
line-height: 20px;
|
|
- }
|
|
|
|
- &.btn{
|
|
|
|
|
|
+ }
|
|
|
|
+ &.btn {
|
|
padding: 2px 0;
|
|
padding: 2px 0;
|
|
- }
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -276,15 +267,12 @@ body {
|
|
form {
|
|
form {
|
|
max-width: 800px;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
margin: 50px auto;
|
|
-
|
|
|
|
- > .el-form-item {
|
|
|
|
|
|
+ >.el-form-item {
|
|
margin-bottom: 18px;
|
|
margin-bottom: 18px;
|
|
-
|
|
|
|
- > .el-form-item__label {
|
|
|
|
|
|
+ >.el-form-item__label {
|
|
width: 180px;
|
|
width: 180px;
|
|
}
|
|
}
|
|
-
|
|
|
|
- > .el-form-item__content {
|
|
|
|
|
|
+ >.el-form-item__content {
|
|
max-width: 600px;
|
|
max-width: 600px;
|
|
margin-left: 180px;
|
|
margin-left: 180px;
|
|
}
|
|
}
|
|
@@ -298,7 +286,7 @@ body {
|
|
padding-left: 20px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-right: 20px;
|
|
width: 20px;
|
|
width: 20px;
|
|
- > a {
|
|
|
|
|
|
+ >a {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -329,7 +317,6 @@ body {
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
-
|
|
|
|
// @media screen and (max-width: 800px) {
|
|
// @media screen and (max-width: 800px) {
|
|
// #page-main {
|
|
// #page-main {
|
|
// .page-header {
|
|
// .page-header {
|
|
@@ -341,14 +328,12 @@ body {
|
|
// display: flex;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// flex-direction: column;
|
|
// justify-content: flex-start;
|
|
// justify-content: flex-start;
|
|
-
|
|
|
|
// .page-sidebar-wrapper {
|
|
// .page-sidebar-wrapper {
|
|
// width: 100%;
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
-
|
|
|
|
// @media screen and (max-height: 700px) {
|
|
// @media screen and (max-height: 700px) {
|
|
// #page-main {
|
|
// #page-main {
|
|
// .page-footer {
|
|
// .page-footer {
|
|
@@ -369,14 +354,11 @@ body {
|
|
#page-main #page-container #page-content-wrapper .box {
|
|
#page-main #page-container #page-content-wrapper .box {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
-
|
|
|
|
.el-tabs {
|
|
.el-tabs {
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
-
|
|
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
-
|
|
|
|
.el-tabs__header {
|
|
.el-tabs__header {
|
|
flex-grow: 0;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
@@ -384,18 +366,14 @@ body {
|
|
.el-tabs__content {
|
|
.el-tabs__content {
|
|
flex-grow: 1;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
-
|
|
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
-
|
|
|
|
.el-tab-pane {
|
|
.el-tab-pane {
|
|
height: 100%;
|
|
height: 100%;
|
|
// flex-grow: 1;
|
|
// flex-grow: 1;
|
|
// flex-shrink: 1;
|
|
// flex-shrink: 1;
|
|
-
|
|
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
-
|
|
|
|
// // > div {
|
|
// // > div {
|
|
// // flex-grow: 1;
|
|
// // flex-grow: 1;
|
|
// // flex-shrink: 1;
|
|
// // flex-shrink: 1;
|
|
@@ -403,4 +381,4 @@ body {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+}
|