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