vue 控件的四个角设置 父视图position:relative
父视图relative，子视图 absolute
<div class="bg1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="tableTitle">
<div style="float: left;;">7日内出库排行</div>
</div>
<div id="main11" style="width: 100% !important;height:calc(100vh * 340 / 1080) ;"
class="echart">
</div>
</div>
.topL {
width: 5px;
height: 5px;
border-top-width: 2px;
border-top-color: #26c6f0;
border-top-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;//根据父视图决定位置
top: -2px;
left: -2px;
}
.topR {
width: 5px;
height: 5px;
border-top-width: 2px;
border-top-color: #26c6f0;
border-top-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
top: -2px;
right: -2px;
}
.bottomL {
width: 5px;
height: 5px;
border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
bottom: -2px;
left: -2px;
}
.bottomR {
width: 5px;
height: 5px;
border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
bottom: -2px;
right: -2px;
}
.bg1 {
height: calc(100vh *385 / 1080);
width: 100%;
border-radius: 5px;
border: 1px solid rgba(25, 186, 139, .17);
background: rgba(255, 255, 255, .04);
position: relative;//相对于自身的位置而言
}