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">
|
<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>
|
||||||
|
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">
|
<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>
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user