add components

This commit is contained in:
g7hoo 2023-09-09 12:04:59 +08:00
parent 8010b93fe9
commit 1743bc24d3
9 changed files with 50 additions and 19 deletions

BIN
src/assets/bottom-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 520 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 KiB

BIN
src/assets/left-top-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

BIN
src/assets/right-top-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 650 KiB

View File

@ -26,9 +26,9 @@ export default {
<style scoped lang="scss">
.rect-container {
background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
// background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
padding: 24px;
width: 624px;
height: 304px;
// width: 624px;
// height: 304px;
}
</style>

View File

@ -33,10 +33,21 @@ export default {
<style scoped lang="scss">
.main-area {
position: relative;
background: url("../assets/main-area-bg.png") 40% 98% / 97% no-repeat;
display: flex;
justify-content: center;
gap: 240px;
padding-top: 96px;
overflow: visible;
}
.main-area::after {
content: '';
display: inline-block;
background: url("../assets/main-area-bg.png") 100% / 100% no-repeat;
position: absolute;
top: 128px;
left: -560px;
width: 130%;
height: 100%;
}
</style>

View File

@ -8,28 +8,28 @@
<template>
<div class="main-panel">
<RectContainer class="leftTop">
<TablesContainer />
<WaterTemp />
</RectContainer>
<RectContainer class="leftMiddle">
<ChartContainer />
<GradientChart />
</RectContainer>
<!-- <RectContainer class="leftBottom">
<ChartContainer />
</RectContainer> -->
<RectContainer class="bottom-1">
<TablesContainer />
</RectContainer>
<RectContainer class="bottom-2">
<TablesContainer />
</RectContainer>
<RectContainer class="bottom-3">
<RectContainer class="bottom-1 bg-bottom">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-4">
<RectContainer class="bottom-2 bg-bottom">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-5">
<RectContainer class="bottom-3 bg-bottom">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-4 bg-bottom">
<ChartContainer />
</RectContainer>
<RectContainer class="bottom-5 bg-bottom">
<ChartContainer />
</RectContainer>
<!-- <RectContainer class="bottom-6">
@ -43,7 +43,7 @@
</RectContainer> -->
<RectContainer class="rightTop">
<ChartContainer />
<TablesContainer />
</RectContainer>
<!-- <RectContainer class="rightMiddle">
<TablesContainer />
@ -61,10 +61,19 @@ import RectContainer from "@/components/yx-dark/containers/rect.vue";
import MainArea from "./MainArea.vue";
import ChartContainer from "@/components/yx-dark/containers/chart.vue";
import TablesContainer from "@/components/yx-dark/containers/table.vue";
import GradientChart from "@/components/yx-dark/chart/gradientChart.vue";
import WaterTemp from "@/components/yx-dark/widget/waterTemp/index.vue";
export default {
name: "MainPanel",
components: { RectContainer, MainArea, ChartContainer, TablesContainer },
components: {
RectContainer,
MainArea,
ChartContainer,
TablesContainer,
WaterTemp,
GradientChart,
},
props: {},
data() {
return {};
@ -77,7 +86,7 @@ export default {
<style scoped lang="scss">
.main-panel {
// background: #cccc;
padding: 70px 0 24px;
padding: 0 0 14px;
position: relative;
// top: -28px; //
display: grid;
@ -90,7 +99,7 @@ export default {
// "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-rows: 215px 409px 314px;
grid-template-areas:
"leftTop main main main rightTop "
"leftMiddle main main main rightTop "
@ -104,10 +113,18 @@ export default {
.leftTop {
grid-area: leftTop;
// justify-self: end;
width: 729px;
background: url(../assets/left-top-bg.png) 100% / contain no-repeat;
}
.leftMiddle {
grid-area: leftMiddle;
width: 729px;
background: url(../assets/left-middle-bg.png) 100% / contain no-repeat;
}
.bg-bottom {
background: url(../assets/bottom-bg.png) 100% / contain no-repeat;
}
.leftBottom {
@ -117,6 +134,9 @@ export default {
.rightTop {
grid-area: rightTop;
justify-self: end;
width: 623px;
background: url(../assets/right-top-bg.png) 100% / contain no-repeat;
}
.rightMiddle {