【分享】侧栏客服代码

admin 2月前 287

image.webp

css---------------------------------------------

<style>
 
 
.top_kefu{
position: fixed;
width: 200px;
height: auto;
top: 160px;
left: 20px;
text-align: center;
border-left: none;
z-index: 1000;
border-radius: 30px;
opacity: 1;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.3);
}
.top_kefu .wechat{
position: relative;
border-bottom: 1px dashed darkslateblue;
}
.top_kefu .wechat img{
padding: 20px; background-color: #fff;box-sizing: border-box;
}
 
.top_kefu .wechat p{
font-size: 20px;
font-weight: 500;
line-height: 100%;
color: #00BA00;
margin-bottom:20px ;
}
.top_kefu .qrcode_wenzi .wenzi p:nth-child(1){
font-size: 20px;
font-weight: 600;
line-height: 227%;
color: #333333;
}
.top_kefu .qrcode_wenzi .wenzi p:nth-child(2){
font-size: 24px;
font-weight: 600;
line-height: 100%;
color: #00BA00;
}
.top_kefu .qrcode_wenzi .wenzi p:nth-child(3){
font-size: 20px;
font-weight: 600;
line-height: 227%;
letter-spacing: 0px;
color: #333333;
}
 
.top_kefu .qrcode_wenzi img{
padding: 0px 20px; background-color: #fff;box-sizing: border-box;width: 90%;
}
 
</style>
 
 
效果-----------------------------------------------
 
<!--首页左侧联系框 -->

<div class="top_kefu" style="    padding-bottom: 20px;">
        <div class="wechat" style="">
            <img src=" image/wechat.png">
            <p>雷先生</p>
        </div>

        <div class="qrcode_wenzi">
            
            <div class="wenzi" id="wenzi">
                <p>咨询热线</p>
                <p><a style="font-size: 24px;font-weight: 600;line-height: 100%;color: #ba0000;" href="tel:13800000000">13800000000</a></p>
                <p>售前微信</p>
            </div>
            
            <style>
                .wap_kf{display:none}
                .pc_kf {display:block}
                @media screen and (max-width: 967px){
                .pc_kf {display:none}
                .wap_kf{display:block}
                #wenzi p{
                    font-size:24px;
                }
                
                }
            </style>
            <div class="pc_kf">
                <img src=" /image/qcode.png">
                <p class="saoma">微信扫码<br>获取更多行业资讯</p>
            </div>
            
            <div class="wap_kf">
                <p class="saoma" style="    margin-top: 0;font-size: 24px;font-weight: 600;line-height: 100%;color: #00BA00;">13800000000</p>
                
                <a style="padding:5px 10px;border-radius:10px;background:#dfdfdf;font-size:20px;" onclick="copy('18614090192')">复制微信号</a>
            </div>
            
            <script>
                    async function copy(text) {
                        try {
                            await navigator.clipboard.writeText(text);
                            alert('复制成功,可以打开微信添加好友');
                        } catch (err) {
                            console.error('复制失败:', err);
                        }
                    }
            </script>
            
        </div>
    </div>

 
 
 
 
 

 

 

 

 

 

 

 

 

 

 

 

猜你喜欢

本站资源仅供研究学习,请勿商用。商用请自行联系软件作者获取授权。如产生法律纠纷,本站概不负责!
    • 游客
      2
         
返回

手游盒子覆盖了 80%的热门手游

己有 2905876人下载

下载内玩游戏盒
手机扫描安装内玩游戏盒 下载内玩游戏盒