vue怎么實現(xiàn)橫向時間軸

這篇文章給大家分享的是有關(guān)vue怎么實現(xiàn)橫向時間軸的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

1、效果圖

2、代碼實現(xiàn) 

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 {
        //數(shù)據(jù)
      list:[
        {
              warnname: "一級預(yù)警",
              condation: "60",
              standard: 18,
              median: 5,
            },
            {
              warnname: "二級預(yù)警",
              condation: "30",
              standard: 15,
              median: 5,
            },
            {
              warnname: "三級預(yù)警",
              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>

感謝各位的閱讀！關(guān)于“vue怎么實現(xiàn)橫向時間軸”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！