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"> <style scoped lang="scss">
.rect-container { .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; padding: 24px;
width: 624px; // width: 624px;
height: 304px; // height: 304px;
} }
</style> </style>

View File

@ -33,10 +33,21 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.main-area { .main-area {
position: relative; position: relative;
background: url("../assets/main-area-bg.png") 40% 98% / 97% no-repeat;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 240px; gap: 240px;
padding-top: 96px; 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> </style>

View File

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