CSS实现一个动态横向时间轴
先看效果
html
<template>
<x-view class="stepFlex">
<x-view
v-for="(item, index) in testList"
:key="index"
style="position: relative; flex: 1; text-align: center;margin-top:-10px"
>
<x-view >{{ item.name }}</x-view>
<x-view
:class="item.ceshi == '1' ? 'greenCircle' :item.ceshi == '2' ? 'now' : 'greyCircle'"
></x-view>
<x-view
v-if="index !== testList.length - 1"
:class="testList[index + 1].ceshi != '3' ? 'greenline' : 'greyline'"
></x-view>
<x-view style="margin-top:20px">{{ item.time }}</x-view>
</x-view>
</x-view>
</template>
css
.stepFlex {
display: flex;
.greenCircle {
top: calc(50% - 4px);
left: calc(50% - 4px);
position: absolute;
z-index: 2;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #08d0c3;
}
.now{
top: calc(50% - 8px);
left: calc(50% - 8px);
position: absolute;
z-index: 3;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #08d0c3;
border: 4px solid #cef6f3;
}
.greyCircle {
top: calc(50% - 4px);
left: calc(50% - 4px);
position: absolute;
z-index: 2;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ccc;
}
.greenline {
width: 100%;
top: calc(50% - 2px);
left: calc(50% - 2px);
height: 2px;
background-color: #08d0c3;
position: absolute;
}
.greyline {
height: 0;
border: 1px dashed #ccc;
width: 100%;
top: calc(50% - 2px);
left: calc(50% - 2px);
position: absolute;
}
}
js
testList:[{
name:'购买',
time:'2019/01/25',
ceshi:1
},
{
name:'起息',
time:'2019/01/25',
ceshi:2
},{
name:'到期',
time:'2019/01/25',
ceshi:3
}],