diff --git a/src/components/Trend/demo/basic.md b/src/components/Trend/demo/basic.md
index 82afcdabe3437e437036b1aa57a6f2c84ced0b31..63c415dcc862c27b105b29d5319ca6a021916fd1 100644
--- a/src/components/Trend/demo/basic.md
+++ b/src/components/Trend/demo/basic.md
@@ -10,7 +10,7 @@ import Trend from 'ant-design-pro/lib/Trend';
 
 ReactDOM.render(
   <div>
-    <Trend flag="up">12%</Trend>
+    <Trend flag="up" >12%</Trend>
     <Trend flag="down" style={{ marginLeft: 8 }}>11%</Trend>
   </div>
 , mountNode);
diff --git a/src/components/Trend/demo/reverse.md b/src/components/Trend/demo/reverse.md
new file mode 100644
index 0000000000000000000000000000000000000000..143ed023b7756ebffa0e69b75fe3a0bfec22dc38
--- /dev/null
+++ b/src/components/Trend/demo/reverse.md
@@ -0,0 +1,17 @@
+---
+order: 0
+title: 颜色反转
+---
+
+在数值背后添加一个小图标来标识涨跌情况。
+
+````jsx
+import Trend from 'ant-design-pro/lib/Trend';
+
+ReactDOM.render(
+  <div>
+    <Trend flag="up" reverseColor={true} >12%</Trend>
+    <Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>11%</Trend>
+  </div>
+, mountNode);
+````
diff --git a/src/components/Trend/index.d.ts b/src/components/Trend/index.d.ts
index fafcb05f6ae46fb53fcfbd08a64776443e43c511..7dc02010301cb3194c41d91b6bf01ac1dbdce1b8 100644
--- a/src/components/Trend/index.d.ts
+++ b/src/components/Trend/index.d.ts
@@ -4,6 +4,7 @@ export interface ITrendProps {
   colorful?: boolean;
   flag: 'up' | 'down';
   style?: React.CSSProperties;
+  reverseColor?: boolean;
 }
 
 export default class Trend extends React.Component<ITrendProps, any> {}
diff --git a/src/components/Trend/index.js b/src/components/Trend/index.js
index cde4ef607f9acf6b3c49d1eee59f77f1683339d8..1cdceb2eeb67283c8b69cc10dbb8a90592a92393 100644
--- a/src/components/Trend/index.js
+++ b/src/components/Trend/index.js
@@ -3,11 +3,12 @@ import { Icon } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
 
-const Trend = ({ colorful = true, flag, children, className, ...rest }) => {
+const Trend = ({ colorful = true, reverseColor = false, flag, children, className, ...rest }) => {
   const classString = classNames(
     styles.trendItem,
     {
       [styles.trendItemGrey]: !colorful,
+      [styles.reverseColor]: reverseColor && colorful,
     },
     className
   );
diff --git a/src/components/Trend/index.less b/src/components/Trend/index.less
index ea66fcf7ba7f5ca004e255a39daae02dfa725bd6..b14b802cb2db73a4e25e9517661498e86866d4d3 100644
--- a/src/components/Trend/index.less
+++ b/src/components/Trend/index.less
@@ -27,4 +27,11 @@
   &.trendItemGrey .down {
     color: @text-color;
   }
+
+  &.reverseColor .up {
+    color: @green-6;
+  }
+  &.reverseColor .down {
+    color: @red-6;
+  }
 }
diff --git a/src/components/Trend/index.md b/src/components/Trend/index.md
index 683ed6199b4554c447c379335dd5f9ba7575cdc1..eb78b96e2969e885412d0b14782e5ac03b19b8a1 100644
--- a/src/components/Trend/index.md
+++ b/src/components/Trend/index.md
@@ -19,3 +19,4 @@ order: 14
 |----------|------------------------------------------|-------------|-------|
 | colorful | 是否彩色标记 | Boolean | true |
 | flag | 上升下降标识：`up|down` | string | - |
+| reverseColor | 颜色反转 | Boolean | true |
diff --git a/src/routes/Forms/BasicForm.js b/src/routes/Forms/BasicForm.js
index 967ced1f7126f3969c9a6f1278bf1ae90e3bff16..ed41cb3b81bc4dad529ba6c5bc293a8ca1a726f9 100644
--- a/src/routes/Forms/BasicForm.js
+++ b/src/routes/Forms/BasicForm.js
@@ -151,7 +151,7 @@ export default class BasicForms extends PureComponent {
               }
             >
               {getFieldDecorator('weight')(<InputNumber placeholder="请输入" min={0} max={100} />)}
-              <span>%</span>
+              <span className="ant-form-text">%</span>
             </FormItem>
             <FormItem {...formItemLayout} label="目标公开" help="客户、邀评人默认被分享">
               <div>