先上效果图:
从图上可以看出是2张 车头朝向不一样的 小车;
主要通过:类名绑定
:class="{'bg1':item.flag == true,'bg2':item.flag == false }"
判断条件是: item.flag == true / item.flag == false;
贴一下标签代码:
<!-- 小车的位置 -->
<div class="positions">
<div id="act_point"
v-if="lines.line.lineId === item.lineId"
v-for="(item,index) in positions" :key="index"
:style="{left: item.left + 'px', bottom: item.bottom + 'px'}"
:class="{'bg1':item.flag == true,'bg2':item.flag == false }"
:title=" '线路Id:' + item.lineId + ',列车编号:' + item.trainId + ',车站Id:' + item.stationBId"></div>
</div>
贴一下css主要代码:
/* 小车 */
.positions {
width: 100%;
position: relative;
top: -120px;
}
.positions #actpoint {
position: absolute;
bottom: 20px;
left: -6px;
width: 50px;
height: 22px;
/* background: url('/static/img/tain1.png') no-repeat; */
cursor: pointer;
}
.bg1{
position: absolute;
bottom: 20px;
left: -6px;
width: 50px;
height: 22px;
background: url('/static/img/tain1.png') no-repeat;
cursor: pointer;
}
.bg2{
position: absolute;
bottom: 20px;
left: -6px;
width: 50px;
height: 22px;
background: url('/static/img/tain.png') no-repeat;
cursor: pointer;
}
本案例的全部代码,我已上传 github,如有需要请去github done:
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140