add components
This commit is contained in:
parent
8010b93fe9
commit
1743bc24d3
BIN
src/assets/bottom-bg.png
Normal file
BIN
src/assets/bottom-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 520 KiB |
BIN
src/assets/left-middle-bg.png
Normal file
BIN
src/assets/left-middle-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 404 KiB |
BIN
src/assets/left-top-bg.png
Normal file
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
BIN
src/assets/right-top-bg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 650 KiB |
0
src/components/yx-dark/chart/gradientChart.vue
Normal file
0
src/components/yx-dark/chart/gradientChart.vue
Normal 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>
|
||||
|
0
src/components/yx-dark/widget/waterTemp/index.vue
Normal file
0
src/components/yx-dark/widget/waterTemp/index.vue
Normal 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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user