vue實現橫向時間軸
更新時間：2022年02月27日 16:08:40 作者：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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue components 動態(tài)組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關資料,需要的朋友可以參考下2022-10-10
Vue?提供了雙向數據綁定機制,使得開發(fā)者可以輕松地將表單組件的值與?Vue?實例中的數據進行關聯(lián),本文將詳細介紹如何在?Vue?中使用這些表單組件,并實現雙向數據綁定,需要的可以參考下2024-03-03
Vue.js?中組件間通信的方法有很多種,這篇文章主要為大家詳細介紹了6種常見的直接或間接的組件傳值方式,有需要的小伙伴可以參考一下2024-01-01
這篇文章主要介紹了vue-pdf實現pdf在線預覽并實現自定義預覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天在做vue和springboot交互的一個項目的時候，想要基于前端實現一些只有登錄驗證之后才能訪問某些頁面的操作，所以在這里總結一下實現該功能的一個解決方案2021-10-10
vue中提供了一種混合機制--mixins,用來更高效的實現組件內容的復用,下面這篇文章主要給大家介紹了關于Vue中mixins的使用方法以及實際項目應用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
vue開發(fā)chrome插件，實現獲取界面數據和保存到數據庫功能
這篇文章主要介紹了vue開發(fā)chrome插件，實現獲取界面數據和保存到數據庫功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要給大家介紹了關于Vue手動埋點設計的相關資料,內容簡明扼要并且容易理解,絕對能使你眼前一亮,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue在table表中懸浮顯示數據及右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04