<template>
<!--Timeline-->
<div class="timeLine" style="overflow: hidden;">
<div class="ul_box">
<ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
<li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">
<!--Circle node-->
<div class="my_timeline_node" @click="changeActive(index)" :class="{active: ||}">
<span v-if=''>
<i class=' my_timeline_span_check' :class=''></i>
</span>
<span v-else="" class='my_timeline_span'>{{index+1}}</span>
</div>
<!--Wire-->
<div :class="index+1!= ? 'my_timeline_item_line' : 'my_timeline_item_line_end'"></div>
<!--Tag-->
<div class="my_timeline_item_content">
{{item.timestamp}}
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'timeLine',
props: {
timeLineList: { // Timeline data
type: Array,
default: () => {
return []
}
},
},
data() {
return {
timeIndex: 2,
}
},
methods: {
changeActive(index) {
this.timeIndex = index;
}
}
}
</script>
<style scoped>
.ul_box {
width: 100%;
height: 60px;
display: flex;
/*float: left;*/
margin-top: 2px;
overflow: hidden;
padding-left: 50px;
padding-right: 50px;
}
.my_timeline_item {
display: inline-block;
width: 220px;
}
.my_timeline_node {
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
width: 28px;
height: 28px;
background-color: #e4e7ed;
}
.my_timeline_node.active {
background-color: #3b7bfb !important;
}
.my_timeline_item_line {
width: 100%;
height: 10px;
margin: -14px 0 0 28px;
border-top: 2px solid #E4E7ED;
border-left: none;
}
.my_timeline_item_line_end {
width: 0.5%;
height: 10px;
margin: -14px 0 0 28px;
border-top: 2px solid #E4E7ED;
border-left: none;
}
.my_timeline_item_content {
margin: 10px 0 0 -25px;
color: #999;
fontSize: 28px
}
.my_timeline_span{
display: flex;
align-items: center;
justify-content: center;
line-height: 30px;
color: white;
}
.my_timeline_span_check{
display: flex;
align-items: center;
justify-content: center;
/*line-height: 30px;*/
color: white;
font-weight: bolder;
line-height: 30px;
}
</style>
