vue.js 横向（时间轴、步骤图、流程图）模版

效果：

 

<template>
   
 <div class="container">
        <div style="display:flex; position: absolute;bottom: 40px;">
            <div class="item-wrap">
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>

                  <div class="tp">2020-12-12 <br/>10:52:23 </div>
                  <div class="bt">手术申请</div>
            </div>
            <div class="item-wrap" >
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
                    <div class="tp">2020-12-12 <br/>10:52:23 </div>
                    <div class="bt">手术申请</div>
            </div>
            <div class="item-wrap" >
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>

                  <div class="tp">2020-12-12 12:30:30</div>
                  <div class="bt">手术申请</div>
            </div>
            <div class="item-wrap" >
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
                   <div class="tp">2020-12-12 12:30:30</div>
                   <div class="bt">手术放弃</div>
            </div>
          <div class="item-wrap" >
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
                     <div class="tp">2020-12-12</div>
                     <div class="bt">手术安排</div>
            </div>
            <div class="item-wrap" >
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
                      <div class="tp">2020-12-12 12:30:30</div>
                      <div class="bt">手术结束</div>
            </div>
           
        </div>
    </div>
    
</template>

<script>
export default {
    name: 'timeLine',
    data() {
        return {
           
        
        }
    },
    methods: {
        
    }
}
</script>

<style lang="scss" scoped >
     .container{
            max-height: 150px;
            min-height: 110px;
            overflow-x: auto;
            position: relative;
            background: #fff;
         
         .item-wrap{
              font-size: 13px;
              position: relative;
              flex:1;display:flex;
             .tp{
                  position: absolute;
                  width: 100%;
                  bottom: 20px;
                  text-align: center;
              }

              .bt{
                  position: absolute;
                  width: 100%;
                  top: 20px;
                  text-align: center;
              }
          
         }

         .dot{
            border:2px solid #07c160;
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background:#07c160; //white;
            margin: auto;
            margin-bottom: -4px;
            position: relative;
         }
         .dotsx{ 
             background:#07c160;
          }

        .item{
            //flex:1;
            width: 50px;
            border-bottom:1px solid #D84C29;
        }

        }
        




       
    </style>