<template>
  <div>
    <h4>纯红点，且使用坑位 >= 40px</h4>
    <div class="group">
      <div class="item">首页</div>
      <lyf-badge content="78"><div class="item">消息</div></lyf-badge>
      <div class="item">发现</div>
      <lyf-badge content="0"><div class="item">公告</div></lyf-badge>
      <div class="item">我的</div>
    </div>

    <br/>
    <h4>带边框纯红点</h4>
    <lyf-badge border><div class="item">消息</div></lyf-badge>
    <br/>
    
    <br/>
    <h4>纯红点，且使用坑位 小于 40px</h4>
    <br/>
    <lyf-badge origin="center">
      <div class="box"></div>
    </lyf-badge>
    <br/>
    <br/>
    <h4>修改颜色</h4>
    <br/>
    <lyf-badge color="blue" content="5">
      <div class="item"></div>
    </lyf-badge>
    <br>
    <lyf-badge color="#fd6800" content="999">
      <div class="item"></div>
    </lyf-badge>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style scoped>
.group {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  overflow-x: auto;
}
.item {
  width: 60px;
  height: 40px;
  background-color: var(--background-color_1);
  line-height: 40px;
  text-align: center;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--background-color_1);
}
.box img {
  width: 100%;
}
</style>