optimize

components/timeline/index.jsx

@@ -34,13 +34,13 @@ Timeline.Item = React.createClass({
     let prefixCls = props.prefixCls;
     let color = props.color;
     let end = props.end;
-    let endCls = end ? prefixCls + '-item-tail-end' : '';
+    let endCls = end ? prefixCls + '-item-last' : '';
     let last = end ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
     let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block';
 
     return (
-      <li className={prefixCls + '-item'}>
-        <div style={{display:lastLineShow}} className={prefixCls + '-item-tail ' + endCls}></div>
+      <li className={prefixCls + '-item ' + endCls}>
+        <div style={{display:lastLineShow}} className={prefixCls + '-item-tail'}></div>
         <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
         <div className={prefixCls + '-item-content'}>{props.children}</div>
         {last}

style/components/timeline.less

@@ -7,28 +7,21 @@
 .@{timeline-prefix-cls} {
   &-item {
     position: relative;
-    min-height: 36px;
-    padding-bottom: 16px;
+    padding-bottom: 12px;
 
     &-tail {
       position: absolute;
       left: 5px;
-      margin-top: 2px;
-      z-index: 1;
+      top: 0;
       height: 100%;
       border-left: 2px solid @timeline-color;
-      &-end {
-        border-left: 2px dotted @timeline-color;
-      }
     }
 
     &-head {
       position: absolute;
-      z-index: 2;
       width: 12px;
       height: 12px;
       background-color: #fff;
-      margin-top: 2px;
       border-radius: 6px;
       &-blue {
         border: 2px solid @primary-color;
@@ -39,16 +32,28 @@
       &-green {
         border: 2px solid @success-color;
       }
-      &-end{
-        position: absolute;
-        bottom: -12px;
+      &-end {
         border: 2px solid @timeline-color;
       }
     }
 
     &-content {
-      margin-left: 24px;
+      min-height: 36px;
+      position: relative;
+      left: 24px;
+      top: -2px;
       font-size: 12px;
+      padding-bottom: 10px;
+    }
+
+    &-last {
+      .@{timeline-prefix-cls}-item-tail {
+        border-left: 2px dotted @timeline-color;
+      }
+      .@{timeline-prefix-cls}-item-content {
+        min-height: 70px;
+        padding-bottom: 30px;
+      }
     }
   }
 }