vue實(shí)現(xiàn)橫向時間軸
更新時間：2022年02月27日 16:08:40 作者：kurcp
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫向時間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)橫向時間軸的具體代碼，供大家參考，具體內(nèi)容如下
1、效果圖
2、代碼實(shí)現(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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中有一些方法需要在多個頁面調(diào)用,但為了避免在每個頁面都import進(jìn)來,可以把方法加到原型上去,這樣在每個組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
在vue-cli搭建的項(xiàng)目中增加后臺mock接口的方法
這篇文章主要介紹了在vue-cli搭建的項(xiàng)目中增加后臺mock接口的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能
這篇文章主要介紹了基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能,需要的朋友可以參考下2018-04-04
最近翻閱了一下vue。發(fā)覺有一個單文件組件之前基本忽視掉了。所以本文就詳細(xì)的介紹了vue單文件組件的實(shí)現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動的思路詳解
這篇文章主要介紹了基于Vue實(shí)現(xiàn)圖片在指定區(qū)域內(nèi)移動，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue3中的watch()的用法和具體作用,通過合理和熟練使用watch()方法，開發(fā)者可以更加高效地完成前端開發(fā)工作，需要的朋友可以參考下2023-04-04
權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識,需要的朋友可以參考下2022-06-06
在使用npm命令時,如果直接從國外的倉庫下載依賴,下載速度很慢,甚至?xí)螺d不下來,我們可以更換npm的倉庫源,提高下載速度,這篇文章主要給大家介紹了關(guān)于vue中npm如何設(shè)置倉庫地址的相關(guān)資料,需要的朋友可以參考下2023-12-12
本篇文章給大家分享了Vue實(shí)例的相關(guān)內(nèi)容以及重要知識點(diǎn)，對此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04