聊天会话界面

大多数的app已经加入了社交元素,会话界面用到的还是瞒多的,就一块封装了进去如果想自定义气泡颜色,修改.aui-chat-receiver-cont背景和.aui-chat-left-triangle的border-color

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

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

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


<div class="aui-content aui-content-padded" id="message-content"><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="/Public/Image/aui/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="/Public/Image/aui/demo2.png" /></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>你好!</span>
        </div></div><div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="/Public/Image/aui/demo1.png" /></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>nice to meet you!</span>
        </div></div><div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="/Public/Image/aui/demo2.png" /></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>很高兴见到你!</span>
        </div></div><div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="/Public/Image/aui/demo1.png" /></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>如果文字太长了会是什么效果,再多一点再多一点</span>
        </div></div><div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="/Public/Image/aui/demo2.png" /></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>如果想自定义气泡颜色,修改aui-chat-receiver-cont背景和aui-chat-left-triangle的border-color</span>
        </div></div></div>