徽标

基础徽标

⁹⁹⁺

^new

⁹⁹⁺

^new

<template>
    <div class="demo-block-column">
        <div class="demo-block-row">
            <t-badge count="99+">
                <div class="badge-block"></div>
            </t-badge>
            <t-badge count="new" shape="round">
                <div class="badge-block"></div>
            </t-badge>
        </div>
        <div class="demo-block-row">
            <t-badge count="99+" size="small">
                <div class="badge-block"></div>
            </t-badge>
            <t-badge count="new" shape="round" size="small">
                <div class="badge-block"></div>
            </t-badge>
        </div>
    </div>
</template>
<style>
.badge-block {
  width: 40px;
  height: 40px;
  background: #EEEEEE;
  border: 1px solid #DCDCDC;
  box-sizing: border-box;
  border-radius: 3px;
}

.t-badge + .t-badge {
  margin-left: 32px;
}
</style>

显示代码 复制代码 复制代码

红点样式徽标

解锁新徽章

<template>
    <div class="demo-block-column">
        <div class="demo-block-row">
            <t-badge dot>
                <div class="badge-block"></div>
            </t-badge>
            <t-badge dot>
                解锁新徽章
            </t-badge>
        </div>
    </div>
</template>
<style>
.badge-block {
  width: 40px;
  height: 40px;
  background: #EEEEEE;
  border: 1px solid #DCDCDC;
  box-sizing: border-box;
  border-radius: 3px;
}

.t-badge + .t-badge {
  margin-left: 32px;
}
</style>

显示代码 复制代码 复制代码