徽标数
用于组织信息和操作,通常也作为详细信息的入口。
规则
- 当用户有必要知晓每条更新时,应该使用数字型。
- 当用户只需知道大致有内容更新时,应该使用红点型。
代码演示
综合示例
结合列表的案例参考
<!-- 小圆点 -->
<div class="badge">
<div class="badge-dot"></div>
</div>
<!-- 独立的 默认的-->
<div class="badge-nowrapper">
<div class="badge-txt">77</div>
</div>
<!-- 独立的 绿色-->
<div class="badge-nowrapper badge-insign">
<div class="badge-txt"预约</div>
</div>
<!-- 独立的 高亮-->
<div class="badge-nowrapper badge-highlight">
<div class="badge-txt">New</div>
</div>
<!-- 独立的 高亮空心的-->
<div class="badge-nowrapper badge-o-highlight">
<div class="badge-txt">甲等</div>
</div>
<!-- 组合 -->
<div class="list-ord">
<div class="list-item ">
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="badge list-icon-sm">
<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="icon ">
<div class="badge-dot"></div>
</div>
<div class="list-content">
<div class="list-title">小圆点</div>
</div>
<div class="list-extra">说明文字</div>
</a>
</div>
<div class="list-item ">
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-content">
<div class="list-title">右侧内容</div>
</div>
<div class="list-extra">
<div class="badge-nowrapper">
<div class="badge-txt">77</div>
</div>
</div>
</a>
</div>
<div class="list-item ">
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-content">
<div class="list-title">
文本内容
<div class="badge-nowrapper">
<div class="badge-txt">new</div>
</div>
</div>
</div>
<div class="list-extra">说明文字</div>
</a>
</div>
<div class="list-item ">
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-content">
<div class="list-title">
集合
<div class="badge-nowrapper">
<div class="badge-txt">4</div>
</div>
<div class="badge-nowrapper badge-insign">
<div class="badge-txt">预约</div>
</div>
<div class="badge-nowrapper badge-highlight">
<div class="badge-txt">New</div>
</div>
<div class="badge-nowrapper badge-o-highlight">
<div class="badge-txt">甲等</div>
</div>
</div>
</div>
<div class="list-extra">说明文字</div>
</a>
</div>
<div class="list-item ">
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-content">
<div class="list-title">
封顶数字
<div class="badge-nowrapper">
<div class="badge-txt">99+</div>
</div>
</div>
</div>
<div class="list-extra">说明文字</div>
</a>
</div>
</div>