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

更新時間：2022年02月27日 16:08:40 作者：kurcp

這篇文章主要為大家詳細介紹了vue實現(xiàn)橫向時間軸，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)橫向時間軸的具體代碼，供大家參考，具體內容如下

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: "一級預警",
? ? ? ? ? ? ? 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: