<template>
   <div class="header-container">
        <HeaderLeft />
        <div class="center">
            <HeaderCenter />
        </div>
        <HeaderRight />
   </div>
</template>

<script setup lang="ts">
import HeaderLeft from "./Left.vue"
import HeaderRight from "./Right.vue"
import HeaderCenter from "./Center.vue"
</script>

<style lang="scss" scoped>

.header-container{
    height: 100%;
    display: flex;
    align-items: center;

    .left{
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
    }
    .center{
        flex: 1;
        height: 100%;
        overflow: hidden;
    }
    
}
</style>