会话界面
最后更新于:2022-04-01 01:24:30
大多数的app已经加入了社交元素,会话界面用到的还是瞒多的,就一块封装了进去<br />
如果想自定义气泡颜色,修改`.aui-chat-receiver-cont`背景和`.aui-chat-left-triangle`的border-color
`.aui-chat-sender`为发送消息的容器,也就是你的<br>
`.aui-chat-receiver`为接受到的消息容器
`.history-date` 定义了个时间的效果,可以结合p标签来使用
~~~
<div class="aui-content aui-content-padded">
<p class="aui-text-center history-date">7-16 20:00</p>
<div class="aui-chat-sender">
<div class="aui-chat-sender-avatar"><img src="../image/demo1.png"></div>
<div class="aui-chat-sender-cont">
<div class="aui-chat-right-triangle"></div>
<span>Hello!!</span>
</div>
</div>
<div class="aui-chat-receiver">
<div class="aui-chat-receiver-avatar"><img src="../image/demo2.png"></div>
<div class="aui-chat-receiver-cont">
<div class="aui-chat-left-triangle"></div>
<span>你好!</span>
</div>
</div>
</div>
~~~