Badage

徽章

带文字的badge

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

小红点

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

示例代码

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

效果

badge