From 1d31618f632b0489aa88dd6e6603515bf66d256d Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Tue, 21 Nov 2017 10:34:53 +0800
Subject: [PATCH] add SimpleCard style to fixed:
 https://github.com/ant-design/ant-design-pro/issues/192

---
 src/components/Charts/ChartCard/index.js   | 40 +++++++++++-----
 src/components/Charts/ChartCard/index.less | 27 ++++++++++-
 src/components/Charts/demo/chart-card.md   | 55 +++++++++++++++-------
 3 files changed, 92 insertions(+), 30 deletions(-)

diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js
index fd442673..04cd70c7 100644
--- a/src/components/Charts/ChartCard/index.js
+++ b/src/components/Charts/ChartCard/index.js
@@ -1,29 +1,45 @@
 import React from 'react';
 import { Card, Spin } from 'antd';
+import classNames from 'classnames';
 
 import styles from './index.less';
 
 const ChartCard = ({
-  loading = false, contentHeight, title, action, total, footer, children, ...rest
+  loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
 }) => {
   const content = (
     <div className={styles.chartCard}>
-      <div className={styles.meta}>
-        <span className={styles.title}>{title}</span>
-        <span className={styles.action}>{action}</span>
+      <div
+        className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
+      >
+        <div className={styles.avatar}>
+          {
+            avatar
+          }
+        </div>
+        <div className={styles.metaWrap}>
+          <div className={styles.meta}>
+            <span className={styles.title}>{title}</span>
+            <span className={styles.action}>{action}</span>
+          </div>
+          {
+            // eslint-disable-next-line
+            total && (<div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />)
+          }
+        </div>
       </div>
       {
-        // eslint-disable-next-line
-        total && <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />
+        children && (
+          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
+            <div className={contentHeight && styles.contentFixed}>
+              {children}
+            </div>
+          </div>
+        )
       }
-      <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-        <div className={contentHeight && styles.contentFixed}>
-          {children}
-        </div>
-      </div>
       {
         footer && (
-          <div className={styles.footer}>
+          <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
             {footer}
           </div>
         )
diff --git a/src/components/Charts/ChartCard/index.less b/src/components/Charts/ChartCard/index.less
index da65ef57..bdc573b1 100644
--- a/src/components/Charts/ChartCard/index.less
+++ b/src/components/Charts/ChartCard/index.less
@@ -2,10 +2,32 @@
 
 .chartCard {
   position: relative;
+  .chartTop {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+  .chartTopMargin {
+    margin-bottom: 12px;
+  }
+  .chartTopHasMargin {
+    margin-bottom: 20px;
+  }
+  .metaWrap {
+    float: left;
+  }
+  .avatar {
+    position: relative;
+    top: 4px;
+    float: left;
+    margin-right: 20px;
+    img {
+      border-radius: 100%;
+    }
+  }
   .meta {
     color: @text-color-secondary;
     font-size: @font-size-base;
-    position: relative;
     line-height: 22px;
     height: 22px;
   }
@@ -46,4 +68,7 @@
       position: relative;
     }
   }
+  .footerMargin {
+    margin-top: 20px;
+  }
 }
diff --git a/src/components/Charts/demo/chart-card.md b/src/components/Charts/demo/chart-card.md
index 424bb6f8..32abac47 100644
--- a/src/components/Charts/demo/chart-card.md
+++ b/src/components/Charts/demo/chart-card.md
@@ -8,25 +8,46 @@ title: 图表卡片
 ````jsx
 import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
 import Trend from 'ant-design-pro/lib/Trend';
-import { Tooltip, Icon } from 'antd';
+import { Row, Col, Icon, Tooltip } from 'antd';
 import numeral from 'numeral';
 
 ReactDOM.render(
-  <ChartCard
-    title="销售额"
-    action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-    total={yuan(126560)}
-    footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
-    contentHeight={46}
-  >
-    <span>
-      周同比
-      <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
-    </span>
-    <span style={{ marginLeft: 16 }}>
-      日环比
-      <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
-    </span>
-  </ChartCard>
+  <Row>
+    <Col span={24}>
+      <ChartCard
+        title="销售额"
+        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        total={yuan(126560)}
+        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+        contentHeight={46}
+      >
+        <span>
+          周同比
+          <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
+        </span>
+        <span style={{ marginLeft: 16 }}>
+          日环比
+          <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
+        </span>
+      </ChartCard>
+    </Col>
+    <Col span={24} style={{ marginTop: 24 }}>
+      <ChartCard
+        title="移动指标"
+        avatar={<img style={{ width: 56, height: 56 }} src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />}
+        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        total={yuan(126560)}
+        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+      />
+    </Col>
+    <Col span={24} style={{ marginTop: 24 }}>
+      <ChartCard
+        title="移动指标"
+        avatar={<img style={{ width: 56, height: 56 }} src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" />}
+        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
+        total={yuan(126560)}
+      />
+    </Col>
+  </Row>
 , mountNode);
 ````
-- 
GitLab