diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx index fc397733cbcd1e11e3d1c38cace1c154e4892030..59e79cf03daf422968e500736d6aa32dcba41325 100644 --- a/components/timeline/index.jsx +++ b/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 ?
: null; let lastLineShow = (props.timelineLast && !end) ? 'none' : 'block'; return ( -
  • -
    +
  • +
    {props.children}
    {last} diff --git a/style/components/timeline.less b/style/components/timeline.less index a6909991cee9c1d1123f6fcf40b040b84b463f31..f0eae886a33e1bed75f7837cd591fc66e7bb7873 100644 --- a/style/components/timeline.less +++ b/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; + } } } }