Badge

新消息提示跟摘要信息后，统一在列表右侧

单行列表

详细信息

未读数红点跟在主题信息后，统一在列表左侧

8

联系人名称

摘要信息

单行列表 8

单行列表 8

详细信息

单行列表 New

         <div class="page__bd">
            <div class="mx-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div>
            <div class="mx-cells">
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd">单行列表</div>
                    <div class="mx-cell__ft" style="font-size: 0">
                        <span style="vertical-align:middle; font-size: 17px;">详细信息</span>
                        <span class="mx-badge mx-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span>
                    </div>
                </div>
            </div>

            <div class="mx-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div>
            <div class="mx-cells">
                <div class="mx-cell">
                    <div class="mx-cell__hd" style="position: relative;margin-right: 10px;">
                        <img src="../../images/pic_160.png" style="width: 50px;display: block"/>
                        <span class="mx-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>
                    </div>
                    <div class="mx-cell__bd">
                        <p>联系人名称</p>
                        <p style="font-size: 13px;color: #888888;">摘要信息</p>
                    </div>
                </div>
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd">
                        <span style="vertical-align: middle">单行列表</span>
                        <span class="mx-badge" style="margin-left: 5px;">8</span>
                    </div>
                    <div class="mx-cell__ft"></div>
                </div>
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd">
                        <span style="vertical-align: middle">单行列表</span>
                        <span class="mx-badge" style="margin-left: 5px;">8</span>
                    </div>
                    <div class="mx-cell__ft">详细信息</div>
                </div>
                <div class="mx-cell mx-cell_access">
                    <div class="mx-cell__bd">
                        <span style="vertical-align: middle">单行列表</span>
                        <span class="mx-badge" style="margin-left: 5px;">New</span>
                    </div>
                    <div class="mx-cell__ft"></div>
                </div>
            </div>
        </div>