访客端发送表情图片

Author: taoshihan1991

static/css/common.css

@@ -31,7 +31,7 @@
 
 .visitorFaceBox{
     position: absolute;
-    bottom: 105px;
+    bottom: 85px;
 }
 .visitorIconBtns{
     margin-right: 8px;
@@ -46,88 +46,11 @@
     bottom: 0px;
     z-index: 999;
 }
-.imageBtn {
-    width: 32px;
-    height: 23px;
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    font-style: normal;
-    color: #9da0a0;
-    text-align: left;
-    text-indent: -9999px;
-    direction: ltr;
-    border: 1px solid;
-}
-.imageBtn:before {
-    content: '';
-    position: absolute;
-    width: 17px;
-    height: 16px;
-    left: -2px;
-    top: 10px;
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
-    transform: rotate(45deg);
-    box-shadow: inset 0 0 0 32px, 10px -6px 0 0;
-}
-.imageBtn:after {
-    content: '';
-    -webkit-border-radius: 50%;
-    -moz-border-radius: 50%;
-    -o-border-radius: 50%;
-    border-radius: 50%;
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    box-shadow: inset 0 0 0 32px;
-    top: 5px;
-    right: 5px
-}
-.visitorFolderBtn{
-    float: left;
-    margin-left: 20px;
-}
-.folderBtn {
-    display: inline-block;
-    background-color: transparent;
-    overflow: hidden;
-    font-size: 1px;
-}
-.folderBtn:before {
-    content: '';
-    float: left;
-    background-color: #9da0a0;
-    width: 15px;
-    height: 3px;
-    margin-left: 2px;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    box-shadow: 2px 2px 0 0 #9da0a0;
-}
-.folderBtn:after {
-    content: '';
-    float: left;
-    clear: left;
-    background-color: #d4d6d6;
-    width: 33px;
-    height: 22px;
-    border-radius: 1px;
-}
-.visitorImageBtn{
-    float: left;
-    margin-left: 20px;
-    margin-top: 2px;
-}
 .faceBox{
     width: 100%;
     background: #fff;
     z-index: 99999999;
     padding: 2px;
-    display: none;
 }
 .faceBoxList{
     list-style: none;
@@ -262,7 +185,7 @@
     /*margin-bottom: 80px;*/
 }
 .chatVisitorPage{
-    height: calc(100% - 71px);
+    height: calc(100% - 86px);
     overflow-y: auto;
 }
 .chatVisitorPage .chatBox{
@@ -318,7 +241,7 @@ a{color: #07a9fe;text-decoration: none;}
     padding-top: 5px;
     background: #fff;
     width: 100%;
-    height: 65px;
+    height: 80px;
     z-index: 99;
     border-top: 1px solid #e4e4e4;
 }
@@ -439,14 +362,23 @@ a{color: #07a9fe;text-decoration: none;}
 .chatArticle{
     display: none;
 }
+.visitorIconBox{
+    display: flex;
+    align-items: center;
+    color: rgb(126, 126, 126);
+}
+.visitorIconBox .iconBtn{
+    margin-right: 10px;
+    cursor: pointer;
+}
 @media screen and (min-width: 900px) {
     .chatCenter {
         max-height: 800px;
         box-shadow: 0 2px 8px rgba(0,0,0,.15);
         border-radius: 4px;
     }
     .chatVisitorPage {
-        height: calc(100% - 140px);
+        height: calc(100% - 156px);
     }
     .chatEntTitle{display: flex;}
     .chatEntTitleLogo {

static/js/chat-page.js

@@ -362,15 +362,7 @@ new Vue({
                 $.each(faceTitles, function (index, item) {
                     _this.face.push({"name":item,"path":faces[item]});
                 });
-                $(".visitorFaceBtn").click(function(e){
-                    var status=$('.faceBox').css("display");
-                    if(status=="block"){
-                        $('.faceBox').hide();
-                    }else{
-                        $('.faceBox').show();
-                    }
-                    return false;
-                });
+
 
                 var windheight = $(window).height();
                 $(window).resize(function(){

static/templates/chat_page.html

@@ -51,13 +51,23 @@
             </div>
             <div class="chatBoxSend">
 
-                <div class="iconBtns visitorIconBox" v-show="showIconBtns">
-                    <div style="display: none" :title="flyLang.emotions" class="icono-smile visitorIconBtns visitorFaceBtn"></div>
-                    <div :title="flyLang.photo" class="icono-image visitorIconBtns visitorImageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
-                    <div :title="flyLang.file" class="icono-folder visitorIconBtns visitorFolderBtn" id="uploadFile" v-on:click="uploadFile('/uploadfile')"></div>
+                <div class="visitorIconBox">
+                    <el-tooltip content="发送表情" placement="top">
+                        <div class="iconBtn faceBtn el-icon-s-shop" style="font-size: 24px;" @click.stop="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
+                    </el-tooltip>
+
+                    <el-tooltip content="上传图片" placement="top">
+                        <div class="iconBtn el-icon-picture" id="uploadImg" v-on:click="uploadImg('/uploadimg')" style="font-size: 24px;"></div>
+                    </el-tooltip>
+                    <el-tooltip content="上传附件" placement="top">
+                        <div  class="iconBtn el-icon-upload" id="uploadFile" v-on:click="uploadFile('/uploadfile')" style="font-size: 26px;"></div>
+                    </el-tooltip>
+
+                    <div  style="display: none" :title="flyLang.emotions" class="icono-smile visitorIconBtns visitorFaceBtn"></div>
+
                     <div class="clear"></div>
                 </div>
-                <div class="faceBox visitorFaceBox" v-if="showFaceIcon">
+                <div class="faceBox visitorFaceBox" v-show="showFaceIcon">
                     <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>