Badge

徽章

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

效果

badge