<template>
  <div class="root-page">
    <z-header
      v-if="!noHeader"
      :noLeft="true"
      :background="background">
      {{title}}
    </z-header>
    <z-content :style="contentStyle">
      <slot></slot>
    </z-content>
  </div>
</template>

<script>
import zHeader from './header.vue'
import zContent from './content.vue'

export default {
  components: {
    zHeader,
    zContent,
  },
  props: {
    title: String,
    noHeader: Boolean,
    background: String,
  },
  computed: {
    contentStyle() {
      return this.noHeader ? "height: 100%;" : ''
    }
  },
}
</script>

<style scoped lang="less">
.root-page {
  width: 100%;
  height: 100%;
  background: white;
}
</style>
