add components

src/components/yx-dark/containers/rect.vue

@@ -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>

src/views/MainArea.vue

@@ -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>

src/views/MainPanel.vue

@@ -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 {