客服界面样式

static/css/common.css

@@ -319,6 +319,9 @@
 .footContact a{font-size: 12px;color: #999;text-decoration: none;}
 .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
 .chatTimeHide{display: none;}
+.visitorInfo .el-menu-item{
+    font-size: 13px;
+}
 .chatRightTitle{
     color: #303133;
     height: 40px;
@@ -326,15 +329,23 @@
     padding-left: 20px;
     font-size: 14px;
     border-bottom:1px solid #E4E7ED;
-    background: #E3E3E3;
 }
 .replyBox{
-    padding: 0 10px;
     font-size: 12px;
     min-height: 300px;
+    background: #fff;
+    border: solid 1px #e6e6e6;
+    margin-top: 5px;
 }
 .replyItem:hover{
     background-color: #f0f9eb;
     color: #67C23A;
 }
+.replyContent{
+    padding: 0 10px;
+}
+.iconBtnsBox{
+    position: relative;
+    margin-top: 4px;
+}
 .clear{clear:both;}

static/html/chat_main.html

@@ -14,11 +14,11 @@
     <style>
         html, body {overflow:hidden;height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
         .el-row{width:100%}
-        .chatBg{min-height: 100%;background: #fff;border: solid 1px #e6e6e6;overflow: hidden;}
-        .chatLeft{    margin-left: 4px;}
+        .chatBg{background: #fff;border: solid 1px #e6e6e6;overflow: hidden;}
+        .chatLeft{height:100%;margin-left: 4px;}
         .sw-bg{background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;}
         .chatBgContext .el-row{margin-bottom: 5px;}
-        .chatBgContext{position: relative;}
+        .chatBgContext{position: relative;height: 100%;}
         .chatUser{
             line-height: 24px;
             font-size: 12px;
@@ -56,8 +56,7 @@
         .chatBoxMe .el-col-3{float: right;text-align: right;}
         .chatBoxMe .chatUser{text-align: right}
         .chatBoxMe .chatContent:after{left:auto;right: -10px;}
-        .chatArea{margin: 10px 0;}
-        .chatBox{max-height: 350px;overflow-y: auto;overflow-x: hidden;}
+        .chatBox{max-height: 340px;overflow-y: auto;overflow-x: hidden;}
         .chatTime{text-align: center;color: #bbb;margin: 5px 0;font-size: 12px;}
         .funcBtns{margin: 2px 0px;color: #7f7f7f;border-bottom: 1px solid #e6e6e6;font-size: 12px;padding: 5px 0px;}
     </style>
@@ -128,24 +127,26 @@
                                 </el-col>
                             </el-row>
                         </div>
-                        <div class="faceBox kefuFaceBox">
-                            <ul class="faceBoxList">
-                                <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>
-                            </ul>
-                            <div class="clear"></div>
+                        <div class="iconBtnsBox">
+                            <div class="faceBox kefuFaceBox">
+                                <ul class="faceBoxList">
+                                    <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"  :title="v.name"><img :src=v.path></li>
+                                </ul>
+                                <div class="clear"></div>
+                            </div>
+                            <div class="faceBtn"></div>
+                            <div class="imageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
+                            <el-button size="small" class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
                         </div>
-                        <el-input type="textarea" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"></el-input>
-                        <div class="faceBtn"></div>
-                        <div class="imageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
-                        <el-button class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
                         <div class="clear"></div>
+                        <el-input type="textarea" class="chatArea" v-model="messageContent"  v-on:keyup.enter.native="chatToUser"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="6">
-                    <div   class="chatBg chatRight">
+                <el-col :span="6" class="chatRight">
+                    <div   class="chatBg">
                         <el-tabs v-model="rightTabActive" @tab-click="handleTabClick">
                             <el-tab-pane label="访客信息" name="visitorInfo">
-                                <el-menu>
+                                <el-menu class="visitorInfo" v-show="visitor.visitor_id">
                                     <el-tooltip content="点击加入黑名单" placement="left">
                                         <el-menu-item v-on:click="addIpblack(visitor.source_ip)" title="点击加入黑名单" style="padding-left:2px;">
                                             <i class="el-icon-s-tools"></i>
@@ -162,18 +163,13 @@
                                         <i class="el-icon-s-tools"></i>
                                         <span slot="title">城市：<{visitor.city}></span>
                                     </el-menu-item>
-                                    <el-popover
-                                            ref="popover"
-                                            placement="top"
-                                            title="来源"
-                                            width="300"
-                                            trigger="hover"
-                                            :content="visitor.refer">
-                                    </el-popover>
-                                    <el-menu-item v-popover:popover style="padding-left:2px;">
-                                        <i class="el-icon-s-tools"></i>
-                                        <span slot="title" >来源：<{visitor.refer}></span>
-                                    </el-menu-item>
+                                    <el-tooltip :content="visitor.refer" placement="left">
+                                        <el-menu-item  style="padding-left:2px;">
+                                            <i class="el-icon-s-tools"></i>
+                                            <span slot="title" >来源：<{visitor.refer}></span>
+                                        </el-menu-item>
+                                    </el-tooltip>
+
                                     <el-menu-item style="padding-left:2px;">
                                         <i class="el-icon-s-tools"></i>
                                         <span slot="title">创建时间：<{visitor.created_at}></span>
@@ -198,8 +194,10 @@
                                 </el-row>
                             </el-tab-pane>
                         </el-tabs>
+                    </div>
+                    <div class="replyBox">
                         <div class="chatRightTitle">快捷回复</div>
-                        <div class="replyBox">
+                        <div class="replyContent">
                             <el-collapse>
                                 <el-collapse-item title="客服营销" name="1">
                                     <div class="replyItem">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>