add chart+tables

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

@@ -0,0 +1,30 @@
+<!-- 
+    filename: chart.vue
+    author: liubin
+    date: 2023-09-08 13:53:04
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-chart"></div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkChart",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-chart {
+  height: 100%;
+  background: #f003;
+}
+</style>

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

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

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

@@ -0,0 +1,30 @@
+<!-- 
+    filename: table.vue
+    author: liubin
+    date: 2023-09-08 13:52:12
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-tables"></div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkTables",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-tables {
+  height: 100%;
+  background: #fff3;
+}
+</style>

src/views/MainPanel.vue

@@ -7,22 +7,50 @@
 
 <template>
   <div class="main-panel">
-    <RectContainer class="leftTop" />
+    <RectContainer class="leftTop">
-    <RectContainer class="leftMiddle" />
+      <TablesContainer />
-    <RectContainer class="leftBottom" />
+    </RectContainer>
+    <RectContainer class="leftMiddle">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="leftBottom">
+      <ChartContainer />
+    </RectContainer>
 
-    <RectContainer class="bottom-1" />
+    <RectContainer class="bottom-1">
-    <RectContainer class="bottom-2" />
+      <TablesContainer />
-    <RectContainer class="bottom-3" />
+    </RectContainer>
-    <RectContainer class="bottom-4" />
+    <RectContainer class="bottom-2">
-    <RectContainer class="bottom-5" />
+      <TablesContainer />
-    <RectContainer class="bottom-6" />
+    </RectContainer>
-    <RectContainer class="bottom-7" />
+    <RectContainer class="bottom-3">
-    <RectContainer class="bottom-8" />
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-4">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-5">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-6">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="bottom-7">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-8">
+      <ChartContainer />
+    </RectContainer>
 
-    <RectContainer class="rightTop" />
+    <RectContainer class="rightTop">
-    <RectContainer class="rightMiddle" />
+      <ChartContainer />
-    <RectContainer class="rightBottom" />
+    </RectContainer>
+    <RectContainer class="rightMiddle">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="rightBottom">
+      <ChartContainer />
+    </RectContainer>
 
     <MainArea style="grid-area: main" />
   </div>
@@ -31,10 +59,12 @@
 <script>
 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";
 
 export default {
   name: "MainPanel",
-  components: { RectContainer, MainArea },
+  components: { RectContainer, MainArea, ChartContainer, TablesContainer },
   props: {},
   data() {
     return {};