功能暫時還不是我做的，但是頁面卻是我負責的，其他頁面有關WebSocket都從我這邊黏貼樣式。
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聯繫老師</title>
<link rel="stylesheet" href="dist/css/zui.min.css">
<style type="text/css">
.contact-content {
width: 650px;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.contact-left {
width: 170px;
height: 400px;
}
.contact-right {
width: 450px;
height: 400px;
}
.contact-right>p{
margin:0;
text-indent:20px;
height:50px;
line-height:50px;
color:white;
font-size: 18px;
background-color: #7ab1f1;
}
/*聊天區域*/
.chat-content{
width: 450px;
height: 300px;
background-color: #f2f2f2;
overflow: hidden;
}
.chat-teacher,.chat-parents{
width: 420px;
height: auto;
margin:0 auto;
}
.chat-teacher>p{
padding-top:10px;
}
.chat-parents>p{
text-align: right;
padding-top:10px;
}
.chat-teacher>p>label,.chat-parents>p>label{
margin-right: 5px;
}
.teach-info,.parent-info{
width: 100%;
height: auto;
display: flex;
}
.parent-info{
justify-content: flex-end;
}
.teach-info>p,.parent-info>p{
margin: 0;
padding: 0;
display:inline-block;
padding: 10px 8px;
background-color: white;
border-radius: 8px;
}
/*發送區域*/
.chat-bottom{
width: 450px;
height: 50px;
display:flex;
list-style:none;
margin:0;
padding:0;
justify-content:space-between;
border: 1px solid #ccc;
}
.chat-bottom>li{
height: 50px;
line-height: 50px;
}
.chat-bottom>li:nth-child(1){
width: 55%;
}
.chat-bottom>li:nth-child(2){
width: 35%;
text-align:center;
}
.chat-bottom>li>i{
height: 50px;
line-height: 50px;
margin-left:30px;
}
</style>
</head>
<body>
<div class="panel" style="width: 700px; margin: 20px auto;">
<div class="panel-heading"
style="text-align: center; font-size: 18px; font-weight: bold;">
聯繫老師</div>
<div class="panel-body">
<div class="contact-content">
<div class="contact-left">
<select class="form-control" style="height: 200px;" multiple>
<option value="0">請選擇老師</option>
<option value="1">鄭老師</option>
<option value="2">林老師</option>
<option value="3">曾老師</option>
<option value="4">王老師</option>
</select>
</div>
<div class="contact-right">
<p>聯繫老師</p>
<div class="chat-content">
<div class="chat-teacher">
<p><label>鄭老師</label><span>今天 15:08:06</span></p>
<div class="teach-info">
<p>您的孩子今天表現很好，不用擔心。</p>
</div>
</div>
<div class="chat-parents">
<p><label>小一爸爸</label><span>今天 15:18:50</span></p>
<div class="parent-info">
<p>好的，老師您費心了。</p>
</div>
</div>
<div class="chat-teacher">
<p><label>鄭老師</label><span>今天 15:19:16</span></p>
<div class="teach-info">
<p>把孩子放在幼兒園裏請你放心，我們希望你的孩子過得愉快，我們會盡最大的努力使你的孩子感覺這裏就像他的家裏一樣。</p>
</div>
</div>
</div>
<ul class="chat-bottom">
<li><i class="icon icon-smile icon-2x"></i>
<i class="icon icon-pencil icon-2x"></i>
<i class="icon icon-picture icon-2x"></i></li>
<li>
<button class="btn btn-info" style="width: 80px;" type="button">發送</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>