时间轴修改

src/packages/timeline/timeline.scss

@@ -11,69 +11,72 @@
             color:#333;
             .timelineitem-list{
                 position: relative;
-                padding-bottom: 10px;
+                display: flex;
 
-                .timelineitem-point{
-                    position: absolute;
-                    left: 0px;
-                    top: 2px;
-                    .point-icon{
-                        width: 7px;
-                        height: 7px;
-                        border: 1px solid #f00;
-                        border-radius: 50%;
-                        &.circle-icon{
-                            background: #f00;
+                .timelineitem-left{
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    
+                    .timelineitem-point{
+                        position: relative;
+                        width: 9px;
+                        .point-icon{
+                            width: 7px;
+                            height: 7px;
+                            border: 1px solid #f00;
+                            border-radius: 50%;
+                            &.circle-icon{
+                                background: #f00;
+                            }
+    
+                            &.hollow-icon{
+                                background: transparent;
+                            }
                         }
-
-                        &.hollow-icon{
+    
+                        .custom-icon{
+                            position: absolute;
+                            left: 50%;
+                            margin-left: -20px;
+                            width: 40px;
+                            height: auto;
+                            overflow: hidden;
                             background: transparent;
+                            text-align: center;
                         }
                     }
-
-                    .custom-icon{
-                        // width: 9px;
-                        // height: 9px;
-                        overflow: hidden;
-                        background: transparent;
+                    
+                    .timelineitem-line{
+                        width: 1px;
+                        height: 100%;
+                        background: #C2C2C2;
                     }
                 }
-                
-                .timelineitem-title{
-                    margin-bottom: 8px;
-                    padding-left: 13px;
-                    line-height: 13px;
-                    position: relative;
-                    .time{
-                        font-size: 12px;
-                        color: #666;
+
+                .timelineitem-right{
+                    padding-bottom: 20px;
+                    .timelineitem-title{
+                        margin-bottom: 8px;
+                        padding-left: 13px;
+                        line-height: 13px;
+                        position: relative;
+                        .time{
+                            font-size: 12px;
+                            color: #666;
+                        }
                     }
-                }
-                .timelineitem-content{
-                    padding-left: 13px;
-                }
-        
-                
+                    .timelineitem-content{
+                        padding-left: 13px;
+                    }
+                }   
             }
         }
 
-        &.left-border{
-            &:before{
-                position: absolute;
-                top: 10px;
-                left: 4px;
-                content: '';
-                width: 1px;
-                height: calc(100% - 8px);
-                background: #C2C2C2;
-            };
-        }
-
         &:last-child{
-            &.left-border{
-                &:before{
-                    width: 0px;
-                };
+            .timelineitem-line{
+                height: 0 !important;
             }
         }
     }

src/packages/timelineitem/timelineitem.vue

@@ -3,22 +3,29 @@
         <div class="timelineitem-list-box">
             <div :class="['timelineitem-list']">
 
-                <div class="timelineitem-point">
-                    <div v-if="!isCustomPoint" :class="[pointClass,'point-icon']" :style="pointStyle"></div>
+                <div class="timelineitem-left">
+                    <div class="timelineitem-point">
+                        <div v-if="!isCustomPoint" :class="[pointClass,'point-icon']" :style="pointStyle"></div>
 
-                    <div v-else class="custom-icon">
-                        <slot name="dot"></slot>
+                        <div v-else class="custom-icon">
+                            <slot name="dot"></slot>
+                        </div>
                     </div>
+
+                    <div class="timelineitem-line"></div>
                 </div>
+                
 
-                <div class="timelineitem-title" v-if="isShowTitle">
-                    <div class="time">
-                        <slot name="title"></slot>
+                <div class="timelineitem-right">
+                    <div class="timelineitem-title" v-if="isShowTitle">
+                        <div class="time">
+                            <slot name="title"></slot>
+                        </div>
                     </div>
-                </div>
 
-                <div class="timelineitem-content">
-                    <slot></slot>
+                    <div class="timelineitem-content">
+                        <slot></slot>
+                    </div>
                 </div>
             </div>
         </div>
@@ -59,8 +66,6 @@ export default {
     mounted(){
         
         this.isCustomPoint = this.$slots.dot?true:false
-
-        console.log(this.$parent.$el)
     },
     methods: {
     }