准备增加表情

pull/30/head
taoshihan1991 4 years ago
parent a208eee8e2
commit cce68040e3

@ -1,2 +1,72 @@
.floatRight{float: right;}
.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{
}

@ -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>
<!--//客服代码-->

Loading…
Cancel
Save