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

<template>
    <div class="guard_flow">
        <div class="left_guard_flow">
            <div class="flex_spection">
                <HeadlineTag value="门禁系统entranceguard"></HeadlineTag>
            </div>
            <div class="flex_spection">
                <HeadlineTag value="门禁系统entranceguard"></HeadlineTag>
            </div>
            <div class="flex_spection">
                <HeadlineTag value="门禁系统entranceguard"></HeadlineTag>
            </div>
        </div>
        <div class="right_guard_flow">
            <div class="flex_spection">
                <HeadlineTag type="right" value="门禁系统entranceguard"></HeadlineTag>
            </div>
            <div class="flex_spection">
                <HeadlineTag type="right" value="门禁系统entranceguard"></HeadlineTag>
            </div>
            <div class="flex_spection">
                <HeadlineTag type="right" value="门禁系统entranceguard"></HeadlineTag>
            </div>
        </div>
    </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
</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;
    padding-left: 10px;
}

.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 {
    display: flex;
    align-items: center;
    height: calc(100% - 40px);
}
</style>