vue.js 横向(时间轴、步骤图、流程图)模版_vue-timeline-horizontal横向时间轴-程序员宅基地

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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39523111/article/details/110670569

智能推荐

python下载安装教程_python官网下载安装-程序员宅基地

文章浏览阅读10w+次,点赞178次,收藏486次。python3.7.3下载步骤第一步:进入Python官网[https://www.python.org/](https://www.python.org/)第二步:点击downloads进入下载界面选择你想要的下载的版本。这里我选择的是Python3.7.3第三步:新建一个标签,输入网址:[https://python123.io/download](https://python123.io/d..._python官网下载安装

【SVM回归预测】基于鹈鹕算法优化卷积神经网络结合支持向量机实现POA-CNN-SVM实现数据回归预测附matlab代码-程序员宅基地

文章浏览阅读893次,点赞19次,收藏20次。本文提出了一种基于鹈鹕算法优化卷积神经网络结合支持向量机(POA-CNN-SVM)的数据回归预测方法。该方法首先利用鹈鹕算法优化卷积神经网络的参数,然后将优化后的卷积神经网络与支持向量机相结合,构建POA-CNN-SVM回归模型。最后,利用POA-CNN-SVM回归模型对数据进行回归预测。实验结果表明,该方法能够有效提高数据回归预测的准确性。

选项菜单的一些基本内容_android:icon参数是id-程序员宅基地

文章浏览阅读280次。菜单的分类第一种菜单在Activity中的创建OptionMenu的方法,这个方法需要我们自行覆盖,getMenu Inflater()这个方法返回一个MenuInflate对象,这个对象下面有inflate()方法,这个方法需要传两个值,第一个是我们的menu资源,传他的资源索引就可以了,第二个参数就是我们的菜单对象,但是我们的菜单对象早就通过onCreateOptionsMenu方法传进来了,即menu,这个方法就可以将我们的菜单资源加载到页面上,而return 后面应该_android:icon参数是id

ubuntu10.10安装TFTP-程序员宅基地

文章浏览阅读2k次。/*ubuntu10.10安装TFTP*/sudo mkdir /tftpbootsudo chmod 777 /tftpbootsudo apt-get install tftp /*安装客户端*/sudo apt-get install tftpd /*安装服务器端*/sudo apt-get install openbsd-inetdsudo vi /etc/inetd.conf在最后加入一行:tftp dgram udp wait nobody /usr/sbin/tcpd /usr/

【交通标志识别】基于SIFT特征实现交通标志识别matlab源码含GUI-程序员宅基地

文章浏览阅读323次。一、简介SIFT即尺度不变特征变换,是用于图像处理领域的一种描述。这种描述具有尺度不变性,可在图像中检测出关键点,是一种局部特征描述子。\1 SIFT算法特点:\(1)具有较好的稳定性和不变性,能够适应旋转、尺度缩放、亮度的变化,能在一定程度上不受视角变化、仿射变换、噪声的干扰。\(2)区分性好,能够在海量特征数据库中进行快速准确的区分信息进行匹配\(3)多量性,就算只有单个物体,也能..._交通要素识别算法

Educational Codeforces Round 111 (Rated for Div. 2)-程序员宅基地

文章浏览阅读124次。Problem - A - CodeforcesCodeforces. Programming competitions and contests, programming communityhttps://codeforces.com/contest/1550/problem/A签到:B. Maximum Cost Deletion题意:给你一个01字符串,我们每次可以删除相连的且内部每个字符都相等的子串.每次删除的长度为l,那么对于答案的贡献就是a*l+b,a和b都是需要进行输入的.问最大贡献_educational codeforces round 111 (rated for div. 2)

随便推点

gradle 打jar包 第三方依赖放入lib 目录_gradle打jar包时把依赖的lib打进去-程序员宅基地

文章浏览阅读5.7k次。jar { manifest { attributes("Main-Class": "com.thtf.forecast.GuangdongUploader", "Implementation-Title": "Gradle") } into('lib') { from configurations.runt..._gradle打jar包时把依赖的lib打进去

要被淘汰的程序猿-程序员宅基地

文章浏览阅读74次。今天小伙伴都比较忙,我去修改了一个程序的bug搞了至少20分钟,居然被一个以前不care的小问题难住了。jquery span 用 $(".ybm").val() 无法获取到值,$(".ybm").text()才可以获取到值 文本输入框用$(".ybm").val()谨记...

Java源码分析之HashMap(JDK1.8)_hashmap key是如何算出hsahcode的-程序员宅基地

文章浏览阅读8.9k次,点赞10次,收藏30次。一、HashMap概述HashMap是常用的Java集合之一,是基于哈希表的Map接口的实现。与HashTable主要区别有不支持同步和允许null作为key和value。由于HashMap不是线程安全的,如果想要线程安全,可以使用ConcurrentHashMap代替。二、HashMap数据结构HashMap的底层是哈希数组,数组元素为Entry。HashMap通过key的has_hashmap key是如何算出hsahcode的

HTML5常用标签及属性_html5标签属性大全-程序员宅基地

文章浏览阅读3k次,点赞4次,收藏31次。HTML常用标记一、文本标记1.标题标记2.字体标记一、文本标记1.标题标记标题标记的语法格式:<hn align="对齐方式">标题文本</hn><!--HTML中提供了6级标题,为<h1>至<h6>,其中<h1>最大,<h6>最小n代表1,2,3,4,5,6align属性有三种,分别是:left(左对齐),center(居中),right(右对齐)-->例子:<body> <_html5标签属性大全

查找薪水涨幅超过15次的员工号emp_no以及其对应的涨_查找薪水涨幅超过10次的员工-程序员宅基地

文章浏览阅读163次。题目描述查找薪水涨幅超过15次的员工号emp_no以及其对应的涨幅次数tCREATE TABLE `salaries` (`emp_no` int(11) NOT NULL,`salary` int(11) NOT NULL,`from_date` date NOT NULL,`to_date` date NOT NULL,PRIMARY KEY (`emp_no`,`from_date`));s..._查找薪水涨幅超过10次的员工