vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue横向时间轴

vue实现横向时间轴

作者:kurcp

这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文