<template>
  <div class="header-container">
    <div class="text">智慧厨房AIOT物联平台驾驶舱看板</div>
    <switchVue :changeCompon="changeCompon" class="right"></switchVue>
  </div>
</template>

<script>
import switchVue from './switch.vue';
export default {
    name:'headerDashboard',
    components:{
      switchVue
    },
    props:{
      changeCompon:{
        type:Function,
        required:true
      }
    }
}
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  //  display: flex;
  //  justify-content: space-between;
   height: 55px;
   position: relative;
   .text{
    font-size: 25px;
    display: flex;
    align-items: center;
    // width: 3000px;
    position: absolute;
    left: 0;
    top:50%;
    transform: translate(0,-50%);
   }
   .right{
    position: absolute;
    right: 0;
    top:50%;
    transform: translate(0,-50%);
   }
}
</style>