<div style="height:calc(100vh - 100px - 20px - 55px);position:relative" id="mapContainerDiv">
<div id="videoMap" clas="videoMap" style="height:100%"></div>
<div class="mapIconSign">
<span class="iconTitle">图标示例:</span>
<div><img src="@/assets/gif/12.gif"/><span>电动车</span></div>
<div><img src="@/assets/gif/22.gif"/><span>堆物堆料</span></div>
<div><img src="@/assets/gif/42.gif"/><span>消防通道</span></div>
<div><img src="@/assets/gif/32.gif"/><span>火眼</span></div>
</div>
</div>
.mapIconSign{
position:absolute;
left:0px;
bottom:20px;
padding:10px 20px 0px 10px;
border-radius:0px 10px 10px 0px;
background:rgba(0,0,0,.6);
display:flex;
flex-direction:column;
pointer-events:none; // 鼠标禁止点击
.iconTitle{
padding:0px 0px 10px 0px;
color:#5ccf07;
font-weight:bold;
font-size:14px;
}
div{
display:flex;
align-items:center;
padding-bottom:10px;
img{
width:20px;
height:20px;
margin-right:10px;
}
span{
font-size:12px;
}
}
}
效果图