
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>
猜你喜欢
本站资源仅供研究学习,请勿商用。商用请自行联系软件作者获取授权。如产生法律纠纷,本站概不负责!