vue.js 横向（时间轴、步骤图、流程图）模版_vue3时间线横向_会点php的前端小渣渣的博客-程序员秘密

技术标签： css 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>

本文链接：https://blog.csdn.net/qq_39523111/article/details/110670569

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

STM32 普通IO模拟串口实验_weixin_30919571的博客-程序员秘密

http://bbs.elecfans.com/jishu_807099_1_1.html#http://bbs.elecfans.com转载于:https://www.cnblogs.com/fly2199/p/8477831.html

git 补丁 - diff 和 patch 使用详解_git patch详解_gdutxiaoxu的博客-程序员秘密

diff 和 patch 的区别Git 提供了两种补丁方案，一种是通过 git diff 生成的 .diff 文件，第二种是通过 git format-patch 生成的 .patch 文件。通过 git diff 生成的文件不含有 commit 信息，可以指定文件生成 diff，也可以指定单个 commit，多个 commit 生成。通过 git format-patch 生成的 .pa...

CNCC 2019 | 计算领域年度盛会—中国计算机大会10月将在苏州举行_QbitAl的博客-程序员秘密

2019年7月24日，中国计算机学会(CCF)和苏州工业园区管委会共同举办2019中国计算机大会(CNCC2019)新闻发布会，向各界介绍CNCC2019的筹备情况。据本...

POJ3169 Layout , 最短路算法解差分约束问题_yew1eb的博客-程序员秘密

POJ3169 Layout题意：n头牛编号为1到n，按照编号的顺序排成一列，每两头牛的之间的距离 >= 0。这些牛的距离存在着一些约束关系：1.有ml组（u, v, w）的约束关系，表示牛[u]和牛[v]之间的距离必须 = w。问如果这n头无法排成队伍，则输出-1，如果牛[1]和牛[n]的距离可以无限远，则输出-2，否则则输出牛[1]和牛[n]之间的最大距离。分析：记第i号牛的位

Python正则表达式所有函数详解_python正则表达式函数_专注算法的马里奥学长的博客-程序员秘密

本篇博客主要讲解正则表达式相关的函数，均不涉及复杂的正则表达式语法。

Factory Method_阿云ivan的博客-程序员秘密

一、工厂方法（Factory Method）模式工厂方法（FactoryMethod）模式是类的创建模式，其用意是定义一个创建产品对象的工厂接口，将实际创建工作推迟到子类中。工厂方法模式是简单工厂模式的进一步抽象和推广。由于使用了多态性，工厂方法模式保持了简单工厂模式的优点，而