<template>
  <div class="layout-header">
    <div class="back flex">
      <slot name="back">
        <i class="iconfont icon-back"></i>
      </slot>
    </div>
    <div class="title flex">
      {{title}}
    </div>
    <div class="opts flex">
      <i class="iconfont icon-back"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LayoutHeader',
  props: {
    title: String
  }
};
</script>

<style lang="scss" scoped>
.layout-header {
  width: 100%;
  height: 45PX;
  overflow: hidden;
  display: flex;

  .flex {
    display: flex;
    align-items: center;
  }

  .iconfont {
    width: 70px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .back {
    width: 150px;
  }

  .title {
    flex: 1;
    justify-content: center;
    font-size: 30px;
  }

  .opts {
    width: 150px;
    justify-content: flex-end;
  }
}
</style>