给地图四面添加蒙层
效果如下图，
<div class="main layout">
<map3d class="mapContainer" ref="map3d" v-show="!isshowd" :menunum="menunum" ></map3d>
</div>
.main {
width: 100%;
height: 100%;
position: absolute;
&::before,
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 1;
pointer-events: none;
}
&::before {
top: 0;
height: 284px;
background-image: url("../assets/topbg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
&::after {
bottom: 0;
height: 288px;
background-image: url("../assets/bottombg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
.mapContainer {
width: 100%;
height: 100%;
position: absolute;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
}
&::before {
width: 284px;
left: 0;
background-image: url("../assets/leftbg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
&::after {
width: 284px;
right: 0;
background-image: url("../assets/rightbg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
