报表样式2.0

src/views/report/chipPerCapitaBM/index.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="containerTop">
       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
+    </div>
+    <div class="containerBottom">
+      <div class="smallTitle">4月芯片人均产量</div>
       <bm-line-bar
         :chartHeight="chartHeight"
         :legendList="legendList"
@@ -9,9 +12,6 @@
         :chartId="chartId"
         :chartNum="chartNum"
       />
-    </div>
-    <div class="containerBottom">
-      <div class="smallTitle">芯片人均产量对标</div>
       <base-table
         :table-props="tableProps"
         :page="listQuery.current"
@@ -103,8 +103,8 @@ export default {
         { factory: "工厂1" },
         { factory: "工厂1" },
       ],
-      chartHeight: this.tableHeight(137) / 2 - 111,
-      tableH: this.tableHeight(137) / 2 - 70,
+      chartHeight: this.tableHeight(269) / 2,
+      tableH: this.tableHeight(269) / 2,
       legendList: [
         { id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
         { id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
@@ -184,8 +184,8 @@ export default {
     },
   },
   created() {
-    this.tableH = this.tableHeight(137) / 2 - 70;
-    this.chartHeight = this.tableHeight(137) / 2 - 111;
+    this.tableH = this.tableHeight(269) / 2;
+    this.chartHeight = this.tableHeight(269) / 2;
     window.addEventListener("resize", this._setTableHeight);
   },
   destroyed() {
@@ -199,8 +199,8 @@ export default {
   },
   methods: {
     _setTableHeight() {
-      this.tableH = this.tableHeight(137) / 2 - 70;
-      this.chartHeight = this.tableHeight(137) / 2 - 111;
+      this.tableH = this.tableHeight(269) / 2;
+      this.chartHeight = this.tableHeight(269) / 2;
       if (this.$route.name === "ChipPerCapitaBM") {
         this.chartNum++;
       }
@@ -217,14 +217,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.containerTop {
+  height: 64px;
+}
 .containerTop,
 .containerBottom {
-  height: calc((100vh - 137px) / 2);
+  position: relative;
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
 }
 .containerBottom {
+  height: calc(100vh - 201px);
   margin-top: 8px;
   .smallTitle {
     font-size: 16px;