<template>
  <div class="page-badge">
    <co-header fixed title="Badge">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="page-badge-container">
        <div class="co-mg-b06">
          <co-badge type="primary" size="large">30</co-badge>
          <co-badge type="error" size="large">10</co-badge>
          <co-badge type="success" size="large">10</co-badge>
          <co-badge type="warning" size="large">10</co-badge>
        </div>

        <div class="co-mg-b06">
          <co-badge type="primary">30</co-badge>
          <co-badge type="error">10</co-badge>
          <co-badge type="success">10</co-badge>
          <co-badge type="warning">10</co-badge>
        </div>

        <div class="co-mg-b06">
          <co-badge type="primary" size="small">30</co-badge>
          <co-badge type="error" size="small">10</co-badge>
          <co-badge type="success" size="small">10</co-badge>
          <co-badge type="warning" size="small">10</co-badge>
        </div>

        <div class="co-mg-b06">
          <co-badge size="small" color="#888">自定义颜色</co-badge>
        </div>
      </div>

      <div class="co-mg-b06">
        <co-cell title="徽章">
          <span style="margin-right: 5px;">未读消息</span>
          <co-badge type="error" size="small">12</co-badge>
        </co-cell>
      </div>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-badge'
};
</script>

<style lang="css">
  .page-badge-container {
    padding: 1rem 0.5rem;
  }
</style>
