signal_web/src/views/Test.vue

<template>
    <div>
        <!--<Radar></Radar>-->
        <!--<Sankey></Sankey>-->

        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">旅客人脸图</div>
        </div>

        <Map></Map>
    </div>
</template>

<script>
    import Radar from '@/components/Radar.vue'
    import Sankey from '@/components/Sankey.vue'
    import Map from '@/components/Map.vue'

    export default {
        data() {
            return {
                editableTabsValue: '1'
            }
        },
        components: {
            Radar, Sankey,Map
        }
    }
</script>

<style scoped>

    .image-border {
        position: absolute;
        width: 20px;
        height: 20px;
    }

    .image-border1 {
        top: 0px;
        left: 0;
        border-left: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border2 {
        top: 0;
        right: -2px;
        border-right: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border3 {
        bottom: 0;
        left: 0;
        border-bottom: 2px solid #6DC1FF;
        border-left: 2px solid #6DC1FF;
    }

    .image-border4 {
        bottom: 0;
        right: -2px;
        border-right: 2px solid #6DC1FF;
        border-bottom: 2px solid #6DC1FF;
    }

    .other-people {
        border: 1px dashed #01355B;
        width: 200px;
        height: 200px;
        margin-left: 61px;
        padding: 5px;
        position: relative;
    }

    .other-image {
        width: 100%;
        height: 100%;
    }

    .other-people-title {
        position: absolute;
        background: rgb(21, 90, 154);
        height: 52px;
        opacity: 0.5;
        font-size: 14px;
        line-height: 52px;
        top: 25px;
        left: 25px;
    }
</style>