<template>
  <div>
    <div class="bx-cell-group-cells">
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            实心小红点
          </div>
          <div class="bx-cell-right">
            <bxs-badge />
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            数字红点
          </div>
          <div class="bx-cell-right">
            <bxs-badge :text="'1'" />
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            数字红点（固定宽度）
          </div>
          <div class="bx-cell-right">
            <bxs-badge
              :text="'10'"
              :width="24"
              />
            <bxs-badge
              :text="'88'"
              :width="24"
              />
            <bxs-badge
              :text="'99+'"
              :width="24"
              />
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            数字红点（不固定宽度）
          </div>
          <div class="bx-cell-right">
            <bxs-badge :text="'10'" />
            <bxs-badge :text="'88'" />
            <bxs-badge :text="'99+'" />
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            文字标签
          </div>
          <div class="bx-cell-right">
            <bxs-badge
              :text="'New'"
              :type="'label'"
              />
            <bxs-badge
              :text="'Hot'"
              :type="'label'"
              />
            <bxs-badge
              :text="'最高8888'"
              :type="'label'"
              />
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            带描边红点
          </div>
          <div
            class="bx-cell-right"
            style="background-color: #666;padding: 5px 5px"
            >
            <bxs-badge
              :text="'10'"
              :outline="!0"
              />
            <bxs-badge
              :text="'New'"
              :type="'label'"
              :outline="!0"
              />
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            小红点角标
          </div>
          <div class="bx-cell-right">
            <div class="ui-list-item-box">
              <bxs-badge :subscript="!0" />
            </div>
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            数字角标
          </div>
          <div class="bx-cell-right">
            <div class="ui-list-item-box">
              <bxs-badge
                :text="'88'"
                :subscript="!0"
                />
            </div>
          </div>
        </div>
      </div>
      <div class="bx-cell">
        <div class="bx-cell-center-right">
          <div class="bx-cell-center">
            文字角标
          </div>
          <div class="bx-cell-right">
            <div class="ui-list-item-box">
              <bxs-badge
                :text="'New'"
                type="label"
                :subscript="!0"
                />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
</script>
<style lang="css">
.box {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  margin: 15px 15px;
  background-color: #000;
}
.bx-cell .bx-cell-right .bx-badge {
  margin-right: 0
}

.ui-list-item-box {
  position: relative;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  background-color: #666;
}
</style>
