msb-public
/
go-fly
mirror of https://github.com/taoshihan1991/go-fly.git
1
0
Code Issues Projects Releases Wiki Activity

客服界面样式

Browse Source
pull/23/head
taoshihan1991 4 years ago
parent d591721e4f
commit 4faacab44e
2 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File

15
static/css/common.css
Unescape View File

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

58
static/html/chat_main.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save