From 2399fb316a812bf5db9cd945c6dfe98875cf7439 Mon Sep 17 00:00:00 2001
From: Anderson <lhongda@live.com>
Date: Fri, 16 Nov 2018 15:47:08 +0800
Subject: [PATCH] Add dashed line to ActiveChart as it was design in sketch
 (#2882)

* Add dashed line to ActiveChart as it was design in sketch

* Improve style
---
 src/components/ActiveChart/index.js   | 14 +++++++++++---
 src/components/ActiveChart/index.less | 20 ++++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js
index 073f3b16..3d9fbbaf 100644
--- a/src/components/ActiveChart/index.js
+++ b/src/components/ActiveChart/index.js
@@ -75,9 +75,17 @@ export default class ActiveChart extends Component {
           />
         </div>
         {activeData && (
-          <div className={styles.activeChartGrid}>
-            <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
-            <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
+          <div>
+            <div className={styles.activeChartGrid}>
+              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
+              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
+            </div>
+            <div className={styles.dashedLine}>
+              <div className={styles.line} />
+            </div>
+            <div className={styles.dashedLine}>
+              <div className={styles.line} />
+            </div>
           </div>
         )}
         {activeData && (
diff --git a/src/components/ActiveChart/index.less b/src/components/ActiveChart/index.less
index 8ecc3237..99079a55 100644
--- a/src/components/ActiveChart/index.less
+++ b/src/components/ActiveChart/index.less
@@ -29,3 +29,23 @@
     text-align: right;
   }
 }
+.dashedLine {
+  position: relative;
+  height: 1px;
+  top: -70px;
+  left: -3px;
+
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%);
+    background-size: 6px;
+  }
+}
+
+.dashedLine:last-child {
+  top: -36px;
+}
-- 
GitLab