baozhida-building-system/src/views/system/entranceguard/index.vue

<template>
    <div class="guard_flow">
        <div class="left_guard_flow">
            <div style="height: 500px;">
                <HeadlineTag value="门禁设备"></HeadlineTag>
                <div class="box_arch">
                    <equipment></equipment>
                </div>
            </div>
            <div class="flex_spection">
                <HeadlineTag value="非法侵入统计"></HeadlineTag>
                <div class="box_arch">
                    <inbreak></inbreak>
                </div>
            </div>
        </div>
        <div class="right_guard_flow">
            <div class="flex_spection">
                <HeadlineTag type="right" value="门禁系统"></HeadlineTag>
            </div>
            <div class="flex_spection">
                <HeadlineTag type="right" value="出入口管理"></HeadlineTag>
                <div class="box_arch">
                    <alleyway></alleyway>
                </div>
            </div>
            <div class="flex_spection">
                <HeadlineTag type="right" value="门禁系统"></HeadlineTag>
            </div>
        </div>
    </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
import alleyway from './alleyway'
import equipment from './equipment'
import inbreak from './inbreak'
</script>

<style scoped lang="scss">
.guard_flow {
    position: relative;
    width: 100%;
    padding-top: 45px;
    height: 100vh;
    overflow: hidden;
}

.left_guard_flow {
    position: absolute;
    left: 0;
    width: 25%;
    height: calc(100% - 45px);
    display: flex;
    flex-direction: column;
}

.right_guard_flow {
    position: absolute;
    right: 0;
    width: 25%;
    height: calc(100% - 45px);
    display: flex;
    flex-direction: column;
}

.flex_spection {
    flex: 1;
    color: #fff;
}

.box_arch {
    width: 100%;
    height: calc(100% - 40px);
}
</style>