update jiashicang

src/views/copilot/container.vue

@@ -56,12 +56,15 @@ export default {
   width: calc(100% + 30px);
   z-index: 1001;
   color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .copilot-footer {
   position: absolute;
-  bottom: 20px;
+  bottom: 10px;
-  height: 20px;
+  height: 10px;
   width: 100%;
   color: rgb(80, 80, 80);
   user-select: none;

src/views/copilot/yield/index.vue

@@ -6,13 +6,41 @@
 -->
 
 <template>
-  <div class="yield-copilot">产量驾驶舱</div>
+  <div class="yield-copilot">
+    <section class="top flex">
+      <db-container
+        class="std-yield"
+        title="标准组件产出"
+        icon="std"
+      ></db-container>
+      <db-container
+        class="chip-yield"
+        title="芯片产出"
+        icon="chip2"
+      ></db-container>
+      <db-container
+        class="bipv-yield"
+        title="BIPV产出"
+        icon="bipv"
+      ></db-container>
+    </section>
+    <section class="bottom flex">
+      <db-container class="fto-involve" title="FTO投入"></db-container>
+      <db-container
+        class="chip-involve"
+        title="芯片投入"
+        icon="chip"
+      ></db-container>
+    </section>
+  </div>
 </template>
 
 <script>
+import Container from "@/views/dashboard/components/Container.vue";
+
 export default {
   name: "YieldCopilot",
-  components: {},
+  components: { DbContainer: Container },
   props: {},
   data() {
     return {};
@@ -22,4 +50,22 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.yield-copilot {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.flex {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.top > div,
+.bottom > div {
+  height: 40vh;
+}
+</style>