大多数的app已经加入了社交元素,会话界面用到的还是瞒多的,就一块封装了进去

    如果想自定义气泡颜色,修改.aui-chat-receiver-cont背景和.aui-chat-left-triangle的border-color

    .aui-chat-sender为发送消息的容器,也就是你的

    .aui-chat-receiver为接受到的消息容器

    .history-date 定义了个时间的效果,可以结合p标签来使用

    1. <div class="aui-content aui-content-padded">
    2. <p class="aui-text-center history-date">7-16 20:00</p>
    3. <div class="aui-chat-sender">
    4. <div class="aui-chat-sender-avatar"><img src="../image/demo1.png"></div>
    5. <div class="aui-chat-sender-cont">
    6. <div class="aui-chat-right-triangle"></div>
    7. <span>Hello!!</span>
    8. </div>
    9. </div>
    10. <div class="aui-chat-receiver">
    11. <div class="aui-chat-receiver-avatar"><img src="../image/demo2.png"></div>
    12. <div class="aui-chat-receiver-cont">
    13. <div class="aui-chat-left-triangle"></div>
    14. <span>你好!</span>
    15. </div>
    16. </div>
    17. </div>