Explorar o código

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
Anderson %!s(int64=7) %!d(string=hai) anos
pai
achega
2399fb316a
Modificáronse 2 ficheiros con 31 adicións e 3 borrados
  1. 11 3
      src/components/ActiveChart/index.js
  2. 20 0
      src/components/ActiveChart/index.less

+ 11 - 3
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 && (

+ 20 - 0
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;
+}