<template>
  <div class="page-header-main">
    <co-header fixed title="固定在顶部">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="page-title">Header</div>
      <co-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
        <fallback slot="left">返回</fallback>
        <co-button icon="more" slot="right"></co-button>
      </co-header>

      <co-header title="多个按钮">
        <div slot="left">
          <fallback>返回</fallback>
          <co-button @click="handleClose">关闭</co-button>
        </div>
        <co-button icon="more" slot="right"></co-button>
      </co-header>
      <co-header title="112233">
        <div slot="left">
          <fallback>返回</fallback>
          <co-button @click="handleClose">关闭</co-button>
        </div>
        <div slot="title">自定义标题</div>
        <co-button icon="more" slot="right"></co-button>
      </co-header>
    </div>

  </div>
</template>

<script type="es6">
export default {
  data() {
    return {

    };
  },

  methods: {
    handleClose() {
      alert('close this page');
    }
  }
};
</script>

<style lang="less">
  .page-header-main {

    .page-title {
      font-size: 20px;
      margin: 20px auto;
      text-align: center;
      display: block;
      line-height: 1;
    }

    .co-button {
      min-width: 2.2rem;
    }

    &>* {
      margin-bottom: 0.75rem;
    }
  }
</style>
