时间轴

src/packages/timeline/doc.md

@@ -1 +1,86 @@
-# TimeLine 时间轴
+# TimeLine 时间轴
+
+## 基本用法
+
+```html
+<nut-timeline>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+</nut-timeline>
+```
+
+## 轴点类型
+```html
+<nut-timeline>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem pointType="hollow">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem :pointColor="'#456700'">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+</nut-timeline>
+```
+
+## 自定义轴点样式
+```html
+<nut-timeline>
+    <nut-timelineitem>
+        <div slot="dot">
+            <svg class="icon" width="15" height="15"></svg>
+        </div>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem pointType="hollow">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem :pointColor="'#456700'">
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+    <nut-timelineitem>
+        <div slot="title">2020-09-18</div>
+        <div class="content">您提交了订单，请等待系统确认</div>
+    </nut-timelineitem>
+</nut-timeline>
+```
+
+### TimeLineItem Props
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| pointType | 轴点样式：circle/hollow | String | circle
+| pointColor | 自定义轴点颜色，表示背景的颜色或表示边框颜色； | String | '‘
+
+### TimeLineItem Slot 
+
+| 字段 | 说明 | 
+|----- | ----- | 
+| title | 时间轴title | 
+| dot | 自定义轴点 | 
+| 无 | 基本内容 | 

src/packages/timeline/timeline.scss

@@ -1,7 +1,4 @@
-.demo-wrapper{
-    padding-top: 60px;
-    background: #fff;
-}
+
 .nut-timeline{
     
     .nut-timelineitem{
@@ -19,9 +16,8 @@
                 .timelineitem-point{
                     position: absolute;
                     left: 0px;
-                    top: 0px;
+                    top: 2px;
                     .point-icon{
-                        margin-top: 2px;
                         width: 7px;
                         height: 7px;
                         border: 1px solid #f00;
@@ -31,15 +27,15 @@
                         }
 
                         &.hollow-icon{
-                            background: #fff;
+                            background: transparent;
                         }
                     }
 
                     .custom-icon{
-                        width: 9px;
-                        height: 9px;
+                        // width: 9px;
+                        // height: 9px;
                         overflow: hidden;
-                        background: #fff;
+                        background: transparent;
                     }
                 }
                 
@@ -64,11 +60,11 @@
         &.left-border{
             &:before{
                 position: absolute;
-                top: 4px;
+                top: 10px;
                 left: 4px;
                 content: '';
                 width: 1px;
-                height: 100%;
+                height: calc(100% - 8px);
                 background: #C2C2C2;
             };
         }

src/packages/timelineitem/timelineitem.vue

@@ -50,7 +50,7 @@ export default {
         },
         pointStyle() {
             
-            return {'borderColor':this.pointColor,'background':this.pointType=='circle'?this.pointColor:'#fff'}
+            return {'borderColor':this.pointColor,'background':this.pointType=='circle'?this.pointColor:'transparent'}
         },
         isShowTitle(){
             return this.$slots.title?true:false