md

src/views/report/quality-analysis/index.vue

@@ -51,52 +51,48 @@
           </div>
         </div>
         <div class="col2-body">
-          <div class="col2-row">
-            <div class="card">
-              <div class="title">
-                <span class="label">影响度供应商分布及对比</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result11" :options="options11"></my-chart>
-              </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">影响度供应商分布及对比</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
+            </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result11" :options="options11"></my-chart>
+            </div>
+          </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">执行协调类归因供应商分布及对比</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
+            </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result12" :options="options12"></my-chart>
+            </div>
+          </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">影响度大区分布及对比TOP5</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
             </div>
-            <div class="card">
-              <div class="title">
-                <span class="label">执行协调类归因供应商分布及对比</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result12" :options="options12"></my-chart>
-              </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result21" :options="options21"></my-chart>
             </div>
           </div>
-          <div class="col2-row">
-            <div class="card">
-              <div class="title">
-                <span class="label">影响度大区分布及对比TOP5</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result21" :options="options21"></my-chart>
-              </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">执行协调类归因大区分布及对比TOP5</span>
+              <t-button variant="outline">
+                <template #icon><FullscreenIcon /></template>
+              </t-button>
             </div>
-            <div class="card">
-              <div class="title">
-                <span class="label">执行协调类归因大区分布及对比TOP5</span>
-                <t-button variant="outline">
-                  <template #icon><FullscreenIcon /></template>
-                </t-button>
-              </div>
-              <div class="chart-wrap">
-                <my-chart v-if="result22" :options="options22"></my-chart>
-              </div>
+            <div class="chart-wrap">
+              <my-chart v-if="result22" :options="options22"></my-chart>
             </div>
           </div>
         </div>
@@ -331,31 +327,32 @@ const options22 = computed(() => {
     }
     .col2 {
       flex-grow: 2;
-      display: flex;
-      flex-direction: column;
-
       .col2-head {
-        flex-grow: 0;
-        flex-shrink: 0;
         height: 85px;
+        margin-bottom: 16px;
       }
       .col2-body {
-        height: calc(100% - 85px);
-      }
-
-      .col2-row {
-        padding-top: 16px;
-        display: flex;
-        justify-content: stretch;
-        height: 50%;
-
+        height: calc(100% - 85px - 16px);
+        position: relative;
         .card {
+          position: absolute;
           width: calc(50% - 8px);
-          &:first-child {
-            margin-right: 8px;
+          height: calc(50% - 8px);
+          &:nth-of-type(1) {
+            top: 0;
+            left: 0;
+          }
+          &:nth-of-type(2) {
+            top: 0;
+            right: 0;
+          }
+          &:nth-of-type(3) {
+            bottom: 0;
+            left: 0;
           }
-          &:last-child {
-            margin-left: 8px;
+          &:nth-of-type(4) {
+            bottom: 0;
+            right: 0;
           }
         }
       }