GOFLY，一套可私有化部署的免费开源客服系统，基于Golang开发，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的网页在线客服系统，致力于帮助广大开发者/中小站长快速整合私有客服功能
网站只需嵌入一段js或跳转直连地址即可快速接入客服，访客端支持电脑、手机页面自适应，这个项目截止到现在已经更新了一年多时间，github提交了720多次修改，开源版也获取了800多star收藏，您的star就是我的动力，我将继续用心做这个项目◠‿◠。
昨天修改了一下gofly在线客服的悬浮按钮样式，特意把它整理出来进行分享
效果如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css"> <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script> </head> <style> .lineBox{ position: fixed!important; bottom: 30%; right: 0px; left: auto; z-index: 999999; } .lineBox .lineItem{ cursor: pointer; 50px; height: 55px; background: #2d8cf0; margin-bottom: 1px; color: #fff; line-height: 55px; text-align: center; position: relative; } .lineItem .layui-icon{ font-size: 26px; } .lineItem:hover{ opacity: 0.8; } .lineTop{ margin-top: 4px; } .lineTip{ border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); position: absolute; top:0px; right: 59px; color: #000; padding: 0 10px; background: #fff; display: none; } .lineTip:before, .lineTip:after { content: ""; display: block; position: absolute; 0; height: 0; border: 8px solid transparent; border-left-color: rgba(255,255,255,1); right: -16px; top: 10px; z-index: 1; } .lineTip:after{ right: -18px; border-left-color: rgb(237,237,237); z-index: 0; } .lineWechat{ 100px; height: 100px; padding: 0px; } </style> <body> <div class="lineBox"> <div class="lineItem"> <i class="layui-icon"></i> </div> <div class="lineItem"> <i class="layui-icon"></i> <div class="lineTip lineWechat"> <img class="lineWechat" src="https://img2020.cnblogs.com/blog/726254/202111/726254-20211103001029429-1411405207.png"/> </div> </div> <div class="lineItem"> <i class="layui-icon"></i> <div class="lineTip"> QQ:630892807 </div> </div> <div class="lineItem"> <i class="layui-icon"></i> <div class="lineTip"> QQ:630892807 </div> </div> <div class="lineItem lineTop" id="launchTopButton"> <i class="layui-icon"></i> </div> </div> <script> $(function(){ $("#launchTopButton").click(function() { $('body,html').scrollTop(0); }); $(".lineItem").hover(function() { $(".lineTip").hide(); $(this).find(".lineTip").show(); }); }); </script> </body> </html>