centos-stream-9 centos9 配置国内源 阿里云源
一般我们用wordpress来构建网站都知道，如果引入外部的jquery会导致主题或者插件出现不兼容的情况，对此很多漂亮的在线客服组件就不适合用了。本站再用的在线客服，不依赖jquery，纯html、css构造。
效果如下:
效果还是比较ok的，我们分享代码如下，HTML部分：
<div class="main-im">
<div id="open_im" onclick="open_im()" class="open-im"> </div>
<div class="im_main" id="im_main">
<div id="close_im" onclick="close_im()" class="close-im"><a href="javascript:void(0);" title="点击关闭" style="text-decoration: none;"> </a></div>
<a href="http://wpa.qq.com/msgrd?v=3&uin=1409198410&site=qq&menu=yes" target="_blank" class="im-qq qq-a" title="产品销售咨询"> <span>QQ技术咨询</span>
<div class="qq-container"></div>
<div class="qq-hover-c"><img class="img-qq" src="https://img.kejianet.cn/2019/kefu/imgs/qq.png"></div>
</a>
<div class="im-tel">
<div class="b2b">
<div>产品咨询</div>
<div class="tel-num"> <a target="blank" href="http://wpa.qq.com/msgrd?v=3&uin=1409198410&site=qq&menu=yes"><img border="0" src="https://img.kejianet.cn/2019/kefu/imgs/qq_ico.png" alt="开源产品"></a></div>
<div class="tel-num"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1409198410&site=qq&menu=yes"><img border="0" src="https://img.kejianet.cn/2019/kefu/imgs/qq_ico.png" alt="定制产品"></a></div>
</div>
<div class="solution">
<div class="tel-num" style="margin:16px 0px 6px"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1409198410&site=qq&menu=yes"><img border="0" src="https://img.kejianet.cn/2019/kefu/imgs/qq_ico.png" alt="解决方案"></a></div>
</div>
<div class="b2b">
<div>售后服务</div>
<div class="tel-num"><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=c9528e910d95a2958e122914f7c0f7741af79f7203e4789fe82690bafb09c0dc"><img border="0" src="https://img.kejianet.cn/2019/kefu/imgs/group.png" alt="售后服务"></a></div>
</div>
</div>
<div class="im-footer" style="position:relative">
<div class="weixing-container" onmousemove="weixinShow()" onmouseout="weixinHide()">
<div class="weixing-show" id="weixing-show">
<div class="weixing-txt">微信扫一扫<br>
关注官网微信</div>
<img class="weixing-ma" src="https://img.kejianet.cn/2019/kefu/imgs/kejia_weixin.jpg">
<div class="weixing-sanjiao"></div>
<div class="weixing-sanjiao-big"></div>
</div>
</div>
<div class="go-top"><a href="#" title="返回顶部"></a> </div>
<div style="clear:both"></div>
</div>
</div>
</div>
<script>
var im_div=document.getElementById("im_main");
var openim_div=document.getElementById("open_im");
var weixin_div=document.getElementById("weixing-show");
function close_im(){
im_div.style.display="none";
openim_div.style.display="block";
}
function open_im(){
im_div.style.display="block";
openim_div.style.display="none";
}
function weixinShow(){
weixin_div.style.display="block";
}
function weixinHide(){
weixin_div.style.display="none";
}
</script>
CSS代码：
/***在线客服***/
/*侧边栏客服对应*/
.main-im { position: fixed; right: 10px; top: 50%; z-index:9999999; width: 110px; height:133px; margin-top: -200px; }
.main-im .qq-a { display: block; width: 106px; height: 116px; font-size: 14px; color: #0484cd; text-align: center; position: relative; }
.main-im .qq-a span { bottom: 5px; position: absolute; width: 90px; left: 10px; }
.main-im .qq-hover-c { width: 70px; height: 70px; border-radius: 35px; position: absolute; left: 18px; top: 10px; overflow: hidden; z-index: 9; }
.main-im .qq-container { z-index: 99; position: absolute; left: 0; top: 0; width: 109px; height: 118px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 1px solid #dddddd; background: url(https://img.kejianet.cn/2019/kefu/imgs/qq-icon-bg.png) no-repeat center 8px; }
.main-im .img-qq { max-width: 60px; display: block; position: absolute; left: 6px; top: 3px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.main-im .im-qq:hover .img-qq { max-width: 70px; left: 1px; top: 8px; position: absolute; }
.main-im .im_main .im-tel .solution { display: none;}
.main-im .im_main { background: #F9FAFB; border: 1px solid #dddddd; border-radius: 10px;}
.main-im .im_main .im-tel { color: #000000; text-align: center; width: 109px; /*height: 185px;*/ border-bottom: 1px solid #dddddd; }
.main-im .im_main .im-tel .saas { display: none;}
.main-im .im_main .im-tel div { font-weight: bold; font-size: 12px; margin-top: 6px; }
.main-im .im_main .im-tel .tel-num { font-family: Arial; font-weight: bold; color: #e66d15; }
.main-im .im_main .im-tel:hover { background: #fafafa; }
.main-im .im_main .weixing-container { width: 55px; height: 47px; border-right: 1px solid #dddddd; border-bottom-left-radius: 10px; background:#f5f5f5 url(https://img.kejianet.cn/2019/kefu/imgs/weixing-icon.png) no-repeat center center; float: left; }
.main-im .im_main .weixing-show { width: 112px; height: 172px; background: #ffffff; border-radius: 10px; border: 1px solid #dddddd; position: absolute; left: -125px; top: -126px; display: none; }
.main-im .im_main .weixing-show .weixing-sanjiao { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #ffffff; border-width: 6px; left: 112px; top: 134px; position: absolute; z-index: 2; }
.main-im .im_main .weixing-show .weixing-sanjiao-big { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #dddddd; border-width: 8px; left: 112px; top: 132px; position: absolute; }
.main-im .im_main .weixing-show .weixing-ma { width: 104px; height: 103px; padding-left: 5px; padding-top: 5px; }
.main-im .im_main .weixing-show .weixing-txt { position: absolute; top: 110px; left: 7px; width: 100px; margin: 0 auto; text-align: center; }
.main-im .im_main .go-top { width: 50px; height: 47px; background: #f5f5f5; border-bottom-right-radius: 10px; background: url(https://img.kejianet.cn/2019/kefu/imgs/totop-icon.png) no-repeat center center; float: right; }
.main-im .im_main .go-top a { display: block; width: 52px; height: 47px; }
.main-im .close-im { position: absolute; right: 10px; top: -12px; z-index: 100; width: 24px; height: 24px; }
.main-im .close-im a { display: block; width: 24px; height: 24px; background: url(https://img.kejianet.cn/2019/kefu/imgs/close_im.png) no-repeat left top; }
.main-im .close-im a:hover { text-decoration: none; }
.main-im .open-im { cursor: pointer; margin-left: 68px; width: 40px; height: 133px; background: url(https://img.kejianet.cn/2019/kefu/imgs/open_im.png) no-repeat left top; display: none; }
相关文章
