<template>
  <div class="page-title-div">
    <el-page-header @back="() => (back ? back() : $router.go(-1))">
      <div slot="content" class="pageContent">
        <div>
          <slot name="title">{{ title }}</slot>
        </div>
        <div><slot name="right"></slot></div>
      </div>
    </el-page-header>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    back: {
      type: Function
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.page-title-div {
  border-bottom: 1px solid #eaeefb;
  padding-bottom: 8px;
  margin-bottom: 16px;
  .el-page-header__content {
    flex: 1;
  }
  .el-page-header__left {
    align-items: center;
  }
  .pageContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
