本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。