fix: different card heights in Analysis (#3386)

* fix: different card heights in Analysis

* add padding for Pie in ProportionSales

* adjust style

src/pages/Dashboard/Analysis.js

@@ -144,6 +144,7 @@ class Analysis extends Component {
             selectDate={this.selectDate}
           />
         </Suspense>
+        <div className={styles.twoColLayout}>
           <Row gutter={24}>
             <Col xl={12} lg={24} md={24} sm={24} xs={24}>
               <Suspense fallback={null}>
@@ -168,6 +169,7 @@ class Analysis extends Component {
               </Suspense>
             </Col>
           </Row>
+        </div>
         <Suspense fallback={null}>
           <OfflineData
             activeKey={activeKey}

src/pages/Dashboard/Analysis.less

@@ -134,6 +134,25 @@
   }
 }
 
+.twoColLayout {
+  .salesCard {
+    height: calc(100% - 24px);
+  }
+  div[class^='ant-col']:last-child {
+    right: 0\9;
+    height: 100%\9;
+    position: absolute\9;
+  }
+  :global {
+    .ant-row {
+      display: flex;
+      display: block\9;
+      flex-flow: row wrap;
+      position: relative\9;
+    }
+  }
+}
+
 .trendText {
   margin-left: 8px;
   color: @heading-color;

src/pages/Dashboard/ProportionSales.js

@@ -38,12 +38,7 @@ const ProportionSales = memo(
       }
       style={{ marginTop: 24 }}
     >
-      <div
-        style={{
-          minHeight: 380,
-        }}
-      >
-        <h4 style={{ marginTop: 8, marginBottom: 32 }}>
+      <h4 style={{ marginTop: 10, marginBottom: 32 }}>
         <FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />
       </h4>
       <Pie
@@ -52,10 +47,10 @@ const ProportionSales = memo(
         total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
         data={salesPieData}
         valueFormat={value => <Yuan>{value}</Yuan>}
-          height={248}
+        height={270}
         lineWidth={4}
+        style={{ padding: '8px 0' }}
       />
-      </div>
     </Card>
   )
 );