Badge

徽章

带文字的badge

  1. <spanclass="weui-badge">New</span>

小红点

  1. <spanclass="weui-badge weui-badge_dot"></span>

示例代码

  1. <template>
  2. <divclass="page">
  3. <divclass="page__hd">
  4. <divclass="page__title">Badge</div>
  5. <divclass="page__desc">徽章</div>
  6. </div>
  7. <divclass="page__bd">
  8. <divclass="weui-cells__title">新消息提示跟摘要信息后,统一在列表右侧</div>
  9. <divclass="weui-cells weui-cells_after-title">
  10. <divclass="weui-cell weui-cell_access">
  11. <divclass="weui-cell__bd">单行列表</div>
  12. <divclass="weui-cell__ft weui-cell__ft_in-access"style="font-size:0">
  13. <divstyle="display:inline-block;vertical-align:middle; font-size:17px;">详细信息</div>
  14. <divclass="weui-badge weui-badge_dot"style="margin-left:5px;margin-right:5px;"></div>
  15. </div>
  16. </div>
  17. </div>
  18. <divclass="weui-cells__title">未读数红点跟在主题信息后,统一在列表左侧</div>
  19. <divclass="weui-cells weui-cells_after-title">
  20. <divclass="weui-cell">
  21. <divclass="weui-cell__hd"style="position: relative;margin-right:10px;">
  22. <imagesrc="../../../static/images/pic_160.png"style="width:50px; height:50px; display: block"/>
  23. <divclass="weui-badge"style="position: absolute;top:-.4em;right:-.4em;">8</div>
  24. </div>
  25. <divclass="weui-cell__bd">
  26. <div>联系人名称</div>
  27. <divstyle="font-size:13px;color:#888888;">摘要信息</div>
  28. </div>
  29. </div>
  30. <divclass="weui-cell weui-cell_access">
  31. <divclass="weui-cell__bd">
  32. <divstyle="display:inline-block; vertical-align: middle">单行列表</div>
  33. <divclass="weui-badge"style="margin-left:5px;">8</div>
  34. </div>
  35. <divclass="weui-cell__ft weui-cell__ft_in-access"></div>
  36. </div>
  37. <divclass="weui-cell weui-cell_access">
  38. <divclass="weui-cell__bd">
  39. <divstyle="display:inline-block; vertical-align: middle">单行列表</div>
  40. <divclass="weui-badge"style="margin-left:5px;">8</div>
  41. </div>
  42. <divclass="weui-cell__ft weui-cell__ft_in-access">详细信息</div>
  43. </div>
  44. <divclass="weui-cell weui-cell_access">
  45. <divclass="weui-cell__bd">
  46. <divstyle="display:inline-block; vertical-align: middle">单行列表</div>
  47. <divclass="weui-badge"style="margin-left:5px;">New</div>
  48. </div>
  49. <divclass="weui-cell__ft weui-cell__ft_in-access"></div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. exportdefault{
  57. }
  58. </script>
  59. <style>
  60. </style>

效果

badge