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

<template>
    <div class="guard_flow">
        <layout>
            <template #left>
                <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>
            </template>
            <template #right>
                <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>
            </template>
        </layout>
    </div>
</template>

<script setup>
import layout from "@/components/layout_/index.vue";
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%;
    height: 100%;
    overflow: hidden;
}

.left_guard_flow {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.right_guard_flow {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

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