vue怎么实现横向时间轴

这篇文章给大家分享的是有关Vue怎么实现横向时间轴的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

1、效果图

2、代码实现 

html

<template>  <div class="timeaxis" >    <div v-for="item in list" :key="item.index">      <div class="box">        <div class="item">          <div class="left">{{item.warnname}}</div>          <div class="center">{{item.condation}}</div>        </div>        <div class="circular"></div>        <div class="item2">          <div class="bottom">{{item.standard}}</div>        </div>      </div>    </div>  </div></template><script>export default {  data(){    return {        //数据      list:[        {              warnname: "一级预警",              condation: "60",              standard: 18,              median: 5,            },            {              warnname: "二级预警",              condation: "30",              standard: 15,              median: 5,            },            {              warnname: "三级预警",              condation: "15",              standard: 22,              median: 5,            },      ]    }  }}</script>

CSS样式

<style scoped lang='less'>.timeaxis{  width: 800px;  height: 200px;}.box{  float: left;  width: 180px;}.circular{  border: 2px solid #67c23a;  width: 10px;  height: 10px;  border-radius: 10px;  background: white;  margin: auto;  margin-bottom: -4px;  position: relative;  top: -8px;  left: 85px;}.item{  border-bottom: 1px solid #409eff;  position: relative;  .left{    position: absolute;    left: 55px;    top: -25px;  }  .center{    position: absolute;    left: 165px;    top: -26px;  }}.item2 {  position: relative;   .bottom{    position: absolute;    left: 75px;    top: 0px;  }}</style>

感谢各位的阅读！关于“vue怎么实现横向时间轴”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！