<template>
  <div class="page-badge">
    <!-- <div class="page-title">Badge</div> -->
    <co-header fixed title="头部">
      <fallback slot="left"></fallback>
      <div slot="right" class="co-flex co-je">
        <!--头部右边内容区域-->
        <co-button icon="more"></co-button>
      </div>
    </co-header>
    <div style="padding-top:44px">
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
      <div class="co-pd-a06 co-bd-b">中间区域</div>
    </div>
    <co-tabbar fixed v-model="selected">
      <co-tab-item id="工作">
        <img slot="icon" src="">
        工作
      </co-tab-item>
      <co-tab-item id="消息">
        <img slot="icon" src="">
        消息
      </co-tab-item>
      <co-tab-item id="商店">
        <img slot="icon" src="">
        商店
      </co-tab-item>
      <co-tab-item id="我的">
        <img slot="icon" src="">
        我的
      </co-tab-item>
    </co-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  }
};
</script>

<style lang="css">
  .page-badge-container {
    padding: 0 10px;
  }
  .co-pd-a06{
    padding:15px;
  }
  .co-bd-b{
    border-bottom: 1px #ccc solid
  }
</style>
