<template>
<div class="timeshaft_box" ref="timeshaft_box_item">
<div class="timeshaft_box_item">
<div
class="timeshaft_box_shaft"
v-for="(item, index) in milestonesContent"
:key="index"
>
<div>
<div
class="tiem_icon"
:style="item[3] ? { border: '2px solid' + item[3] } : ''"
></div>
</div>
<div
class="timeshaft_box_shaft_span"
:style="{ color: item[3] ? item[3] : '' }"
>
{{ item[0] }}
</div>
<div
class="timeshaft_box_shaft_box"
:style="{ color: item[3] ? item[3] : '' }"
>
{{ item[1] }}
</div>
</div>
<!-- 浅色时间轴 -->
<div class="linegray"></div>
<!-- 深色时间轴 -->
<div class="segmentblue"></div>
<!-- 小三角 -->
<div class="timeshaft_box_caret">
<em class="el-icon-caret-right iconse"></em>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
milestonesContent: {
type: Array,
},
color: {
type: String,
},
},
computed: {
timeCalculation() {
return item.color;
},
},
};
</script>
<style lang="scss" scoped>
.timeshaft_box_caret {
color: #5275c8;
font-size: 30px;
position: absolute;
// top: -17px;
transform: translateX(-12px);
right: -30px;
}
.timeshaft_box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
// background-color: bisque;
.timeshaft_box_item {
width: 100%;
height: 2px;
justify-content: space-around;
// background-color: #d9e1f3;
position: relative;
display: flex;
align-items: center;
.timeshaft_box_shaft {
display: flex;
flex-direction: column;
align-items: center;
.tiem_icon {
width: 13px;
height: 13px;
// position: relative;
top: -6.5px;
left: 10px;
z-index: 1;
background-color: #fff;
border: 2px solid #5275c8;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
// margin-left: -5px;
// margin-top: 18px;
position: static;
}
}
.timeshaft_box_two {
height: 2px;
background-color: #5275c8;
position: absolute;
}
}
}
.timeshaft_box_shaft_icon {
width: 11px;
height: 11px;
border: 4px solid #5275c8;
transform: rotate(45deg);
background-color: #fff;
cursor: pointer;
z-index: 1;
}
.timeshaft_box_shaft_span {
// transform: translate(0, -38px);
color: #646566;
font-weight: 500;
position: absolute;
top: -30px;
}
.timeshaft_box_shaft_box {
// transform: translate(0, -10px);
text-align: center;
color: #646566;
top: 15px;
position: absolute;
}
.linegray {
height: 2px;
background-color: #d8db01;
position: absolute;
}
.segmentblue {
height: 2px;
background-color: #5275c8;
position: absolute;
}
.timeshaft_box_shaft_icon_than {
width: 10px;
height: 10px;
position: absolute;
top: 2px;
transform: rotate(45deg);
background-color: #5275c8;
cursor: pointer;
}
.timeshaft_box_shaft_icon_than + .timeshaft_box_shaft_span {
transform: translate(-5px, -28px);
}
.timeshaft_box_shaft_icon_than
+ .timeshaft_box_shaft_span
+ .timeshaft_box_shaft_box {
transform: translate(-5px, 5px);
}
</style>
根据数据动态生成时间轴
于 2023-09-10 23:54:50 首次发布