<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 class="box_arch">
                    <passable></passable>
                </div>
            </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 class="box_arch">
                    <inform></inform>
                </div>
            </div>
        </div>
    </div>
</template>

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

<style scoped lang="scss">
.guard_flow {
    position: relative;
    width: 100%;
    padding-top: 45px;
    height: 100%;
    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>