调整IM Demo样式

This commit is contained in:
wanggeng 2021-09-14 11:43:58 +08:00
parent 52cfb14dae
commit 897e648b98

View File

@ -10,7 +10,7 @@
.websocket-container {width: 295px;} .websocket-container {width: 295px;}
.websocket-history-box {height: 400px; border: 1px solid silver; overflow: auto;} .websocket-history-box {height: 400px; border: 1px solid silver; overflow: auto;}
.websocket-box {padding: 5px 0; text-align: right;} .websocket-box {padding: 5px 0; text-align: right;}
.message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;} .message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;word-wrap: break-word; word-break: normal;}
.receive-msg-box {} .receive-msg-box {}
.receive-msg {background-color: #04b304; color: #FFFFFF;} .receive-msg {background-color: #04b304; color: #FFFFFF;}
.send-msg-box {text-align: right;} .send-msg-box {text-align: right;}
@ -104,6 +104,7 @@
} else if(data.type === 101) { } else if(data.type === 101) {
var body = data.body; var body = data.body;
$('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>'); $('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>');
autoScrollBottom();
} else if(data.type === 1100) { } else if(data.type === 1100) {
var body = JSON.parse(data.body); var body = JSON.parse(data.body);
$('#'+ data.id).before('<span class="send-status" title="'+ body.msg +'">!</span> ') $('#'+ data.id).before('<span class="send-status" title="'+ body.msg +'">!</span> ')
@ -161,7 +162,7 @@
websocket.send(JSON.stringify(sendBody)); websocket.send(JSON.stringify(sendBody));
$('#websocketHistoryBox').append('<div class="send-msg-box"><div id="'+ sendId +'" class="message send-msg">'+ $('#message').val() +'</div></div>'); $('#websocketHistoryBox').append('<div class="send-msg-box"><div id="'+ sendId +'" class="message send-msg">'+ $('#message').val() +'</div></div>');
$('#message').val(''); $('#message').val('');
autoScrollBottom();
// //
} }
@ -174,6 +175,10 @@
$('#sendBox').hide(); $('#sendBox').hide();
} }
function autoScrollBottom() {
var websocketHistoryBox = document.getElementById('websocketHistoryBox');
websocketHistoryBox.scrollTop = websocketHistoryBox.scrollHeight;
}
</script> </script>
</body> </body>