准备增加表情

static/css/common.css

@@ -1,2 +1,72 @@
 .floatRight{float: right;}
-.clear{clear: both;}
+.clear{clear: both;}
+.faceBtn, .faceBtn:after, .faceBtn {
+    border: 1px solid;
+}
+.faceBtn {
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    height: 28px;
+    width: 28px;
+    display: inline-block;
+    vertical-align: middle;
+    position: absolute;
+    font-style: normal;
+    color: #9da0a0;
+    text-align: left;
+    text-indent: -9999px;
+    direction: ltr;
+    margin-bottom: -14px;
+    right: 70px;
+    bottom: 50%;
+    cursor: pointer;
+}
+.faceBtn:before {
+    content: '';
+    pointer-events: none;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    box-shadow: 8px 0 0 0, 0 0 0 2px inset;
+    height: 4px;
+    width: 4px;
+    left: 7px;
+    position: absolute;
+    top: 29%;
+}
+.faceBtn:after {
+    content: '';
+    pointer-events: none;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    -o-border-radius: 50%;
+    border-radius: 50%;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    transform: translateX(-50%);
+    border-top-color: transparent;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    height: 15px;
+    left: 50%;
+    position: absolute;
+    top: 10%;
+    width: 15px;
+}
+.faceBox{
+    width: 100%;
+    background: #fff;
+    position: absolute;
+    z-index: 99999999;
+    bottom: 70px;
+    padding: 2px;
+    display: none;
+}
+.faceBoxList{
+
+}

static/html/chat_page.html

@@ -12,6 +12,7 @@
     <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="/static/css/common.css" />
     <style>
         html,
         body {
@@ -70,7 +71,7 @@
         .chatBoxMe .chatUser{text-align: right}
         .chatBoxMe .chatContent:after{left:auto;right: -10px;}
         .chatArea{margin: 5px 0 0 5px;}
-        .chatArea .el-textarea__inner{width: 85%;}
+        .chatArea .el-textarea__inner{width: 80%;}
         .chatTitle{height: 30px;line-height: 30px;color: #1989fa}
         .chatBoxSend{background: #fff;position: fixed;bottom: 0;left: 0;width: 100%;height: 67px;}
         .chatBoxSendBtn{position: absolute;right: 5px;bottom:50%;margin-bottom: -16px;}
@@ -110,6 +111,12 @@
         </div>
         <div class="chatBoxSend">
             <el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input>
+            <div class="faceBox">
+                <ul class="faceBoxList">
+                    <li title="[微笑]"><img src="/static/images/face/0.gif"></li>
+                </ul>
+            </div>
+            <div class="faceBtn"></div>
             <el-button type="primary" class="chatBoxSendBtn" size="small" v-on:click="chatToUser">{{.SendBtn}}</el-button>
         </div>
         <!--//客服代码-->