From cce68040e30701132390e95bee5c7347ff5b1399 Mon Sep 17 00:00:00 2001
From: taoshihan1991 <630892807@qq.com>
Date: Mon, 3 Aug 2020 17:54:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=86=E5=A4=87=E5=A2=9E=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/common.css      | 72 +++++++++++++++++++++++++++++++++++++-
 static/html/chat_page.html |  9 ++++-
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/static/css/common.css b/static/css/common.css
index 560894e..35258e7 100644
--- a/static/css/common.css
+++ b/static/css/common.css
@@ -1,2 +1,72 @@
 .floatRight{float: right;}
-.clear{clear: both;}
\ No newline at end of file
+.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{
+
+}
\ No newline at end of file
diff --git a/static/html/chat_page.html b/static/html/chat_page.html
index f154ffa..618704a 100644
--- a/static/html/chat_page.html
+++ b/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>
         <!--//客服代码-->