vue 控件的四个角设置 父视图position:relative

父视图relative，子视图 absolute

                           

                           

                           

                           

                           

                               

7日内出库排行

                           

                           

                                class="echart">

                           

                       

.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;//相对于自身的位置而言

}