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>

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

赞 (0)

相关推荐

  • vue+swiper实现时间轴效果

    vue+swiper实现时间轴效果

    本文实例为大家分享了vue+swiper实现时间轴效果的具体代码,供大家参考,具体内容如下 效果: 首先引入,有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save <template> <div class="hello" style="height:100%;width:100%;position:relative;"> <div class="s

  • Vue时间轴 vue-light-timeline的用法说明

    轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); <template> <light-timeline :items='items'></light-timeline> </tem

  • vue+canvas绘制时间轴的方法

    vue+canvas绘制时间轴的方法

    本文实例为大家分享了vue canvas绘制时间轴的具体代码,供大家参考,具体内容如下 最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下: 代码如下,可以拷贝到vue项目中直接预览 <template> <div> <canvas id="time_line" width="1200" height="27"></canvas> </div> </t

  • vue实现两列水平时间轴的示例代码

    vue实现两列水平时间轴的示例代码

    目录 一.实现组件timelineH.vue 二.调用组件 本文主要介绍了vue实现两列水平时间轴的示例代码,分享给大家,具体如下: 先上图,主要实现两列水平时间轴,查看了很多人实现的,水平只有一列,并且elementUI的时间轴只有竖着的,不支持横向,最后只能含泪自己实现了,没想到还可以,只是如果数据很多翻页还没实现,有实现过这种的掘友可以艾特我一下. 一.实现组件timelineH.vue timelineH.vue中的H代表横,起名字烦恼,哈哈. <template> <ul cl

  • Vue.js实现时间轴功能

    Vue.js实现时间轴功能

    本文实例为大家分享了Vue.js实现时间轴功能的具体代码,供大家参考,具体内容如下 GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key

  • vue实现物流时间轴效果

    vue实现物流时间轴效果

    本文实例为大家分享了vue实现物流时间轴效果的具体代码,供大家参考,具体内容如下 son组件(物流时间轴组件) <template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</spa

  • Vue实现可移动水平时间轴

    本文实例为大家分享了Vue实现可移动水平时间轴的具体代码,供大家参考,具体内容如下 里程碑时间轴具体实现 效果图 编辑里程碑效果图 <template> <div class="state_grade"> <!-- <mile-stone :projectId="projectData.proId" :projectName="projectData.proName" :proNum="project

  • VUE实现时间轴播放组件

    VUE实现时间轴播放组件

    本文实例为大家分享了VUE实现时间轴播放组件的具体代码,供大家参考,具体内容如下 先上效果图吧 1.初始化的效果! 2.可以拖拽,鼠标放上显示时间 3.播放按钮后,正常播放 左右两个横线可以上一页下一页 下面说VUE接入的步骤: 1.index.html中引入js和css文件 <script src='../static/js/timePlay.js'></script> <link href='../static/css/timePlay.css' rel='stylesh

  • Vue实现时间轴功能

    Vue实现时间轴功能

    本文实例为大家分享了Vue实现时间轴功能的具体代码,供大家参考,具体内容如下 <template>   <div class="container">     <div class="content">       <div class="coin" v-for="(item,index1) in Math.ceil((list.length+1)/4)" :key="ind

  • vue实现横向时间轴

    vue实现横向时间轴

    本文实例为大家分享了vue实现横向时间轴的具体代码,供大家参考,具体内容如下 1.效果图 2.代码实现  html <template>   <div class="timeaxis" >     <div v-for="item in list" :key="item.index">       <div class="box">         <div class=&

  • jQuery鼠标滑过横向时间轴样式(代码详解)

    每日分享效果,今天分享内容为:jQuery鼠标滑过横向时间轴样式 效果图: HTML代码: `<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div

  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    代码如下所示: <!-- ! 废话不多说,直接看代码吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang=&

  • 利用Jquery实现几款漂亮实用的时间轴(附示例代码)

    利用Jquery实现几款漂亮实用的时间轴(附示例代码)

    前言 最近在项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会.经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了.现在有很多开源的前端框架,做的都非常的漂亮,h5发展了这么多年了,改变了互联网行业啊! 时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中.时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记. 下面给大家介绍几款漂亮的时间轴,也许大家以后工作中会用到. 一.纵

随机推荐