mt-fe-group/dezhou-screen
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update layout

Browse Source
This commit is contained in:
lb
2023-09-08 16:54:01 +08:00
parent bfeec6db62
commit 8010b93fe9
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/MainPanel.vue
View File

@@ -13,9 +13,9 @@
<RectContainer class="leftMiddle">
<ChartContainer />
</RectContainer>
<RectContainer class="leftBottom">
<!-- <RectContainer class="leftBottom">
<ChartContainer />
</RectContainer>
</RectContainer> -->
<RectContainer class="bottom-1">
<TablesContainer />
@@ -32,7 +32,7 @@
<RectContainer class="bottom-5">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-6">
<!-- <RectContainer class="bottom-6">
<TablesContainer />
</RectContainer>
<RectContainer class="bottom-7">
@@ -40,17 +40,17 @@
</RectContainer>
<RectContainer class="bottom-8">
<ChartContainer />
</RectContainer>
</RectContainer> -->
<RectContainer class="rightTop">
<ChartContainer />
</RectContainer>
<RectContainer class="rightMiddle">
<!-- <RectContainer class="rightMiddle">
<TablesContainer />
</RectContainer>
<RectContainer class="rightBottom">
<ChartContainer />
</RectContainer>
</RectContainer> -->
<MainArea style="grid-area: main" />
</div>
@@ -77,18 +77,24 @@ export default {
<style scoped lang="scss">
.main-panel {
// background: #cccc;
padding: 0 0 24px;
padding: 70px 0 24px;
position: relative;
// top: -28px; // 往上部偏移一点
display: grid;
gap: 32px;
place-content: end center;
grid-auto-columns: 624px;
grid-auto-rows: 304px;
// grid-auto-columns: 624px;
// grid-auto-rows: 304px;
// grid-template-areas:
// "leftTop main main main main main main main main rightTop "
// "leftMiddle main main main main main main main main rightMiddle "
// "leftBottom BottomOne BottomTwo BottomThree BottomFour BottomFive BottomSix BottomSeven BottomEight rightBottom ";
grid-auto-columns: 1282px;
grid-template-rows: 1fr 2fr 314px;
grid-template-areas:
"leftTop main main main main main main main main rightTop "
"leftMiddle main main main main main main main main rightMiddle "
"leftBottom BottomOne BottomTwo BottomThree BottomFour BottomFive BottomSix BottomSeven BottomEight rightBottom ";
"leftTop main main main rightTop "
"leftMiddle main main main rightTop "
"BottomOne BottomTwo BottomThree BottomFour BottomFive ";
}
.main-area {