消息时间轴

<h1>消息时间轴</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=c433bcb220063580cd724c9bb94afeff&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html"> &lt;view class="cu-item text-blue"&gt; &lt;view class="bg-blue shadow-blur content"&gt; &lt;view class="cu-list menu-avatar radius"&gt; &lt;view class="cu-item"&gt; &lt;view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"&gt;&lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text-grey"&gt;文晓港&lt;/view&gt; &lt;view class="text-gray text-sm"&gt; &lt;text class="cuIcon-infofill text-red"&gt;&lt;/text&gt; 消息未送达&lt;/view&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;view class="text-grey text-xs"&gt;22:20&lt;/view&gt; &lt;view class="cu-tag round bg-grey sm"&gt;5&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"&gt; &lt;view class="cu-tag badge"&gt;99+&lt;/view&gt; &lt;/view&gt; &lt;view class="content"&gt; &lt;view class="text-grey"&gt;文晓港 &lt;view class="cu-tag round orange sm"&gt;SVIP&lt;/view&gt; &lt;/view&gt; &lt;view class="text-gray text-sm"&gt; &lt;text class="cuIcon-redpacket_fill text-red"&gt;&lt;/text&gt; 收到红包&lt;/view&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;view class="text-grey text-xs"&gt;22:20&lt;/view&gt; &lt;text class="cuIcon-notice_forbid_fill text-gray"&gt;&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>