标签绑定参数
<div class="timeline" :data-content="less_day" :style="{ '--bottom': less_day2 }"
ref="branch_money" style="width: 100%; height: 350px">
</div>
style中获取
// 时间线
.timeline {
position: relative;
&::before {
content: attr(data-content); // data-变量
text-align: right;
position: absolute;
bottom: var(--bottom); //当前时间进度就是高度,通过style变量获取 定义以--开头
left: 0;
width: 100%;
height: 22px;
border-bottom: 2px solid #ff0000;
color: red;
transform: translateY(-30px);
z-index: 1;
}
}
效果
红色的时间线根据每天的时间进行高度变化