直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

  <style>

.m-float{position:fixed;z-index:9;bottom:50px;right:55px;width:180px;height:430px;text-align:center;font-size:14px;color:#fff;box-shadow:0 20px 20px 0 rgba(243,65,2,.2);border-radius:10px 10px 90px 90px;background:url(http://www.bootfastui.cn/img/2021/0512/h27.png) no-repeat}
.m-float .top{overflow:hidden;padding:20px 20px 0}
.m-float .pic{width:140px;height:140px;overflow:hidden;margin:0 auto 6px}
.m-float .pic img{display:block;width:100%;height:100%}
.m-float span{display:block;margin-bottom:29px}
.m-float .tel img{display:block;margin:0 auto 20px}
.m-float .txt{font-size:18px;color:#fff;line-height:1.3;position:relative;padding-bottom:7px}
.m-float .txt h5{font-size:22px;font-style:italic;font-weight:400;margin-top:4px}
.m-float .qq{margin:0 20px;padding-top:14px;border-top:1px solid #fff;font-size:18px;font-style:italic}
.m-float .qq p{padding-left:35px;font-weight:700;background:url(http://www.bootfastui.cn/img/2021/0512/h10.png) left center no-repeat}
.m-pop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;width:100%;display:none}
</style>

HTML+JS代码

  <div class="m-float">
  <div class="top">
    <div class="pic">
      <img src="/Public/images/erweima.jpg" alt="" />
    </div>
    <span>微信扫码关注</span>
    <div class="tel">
      <img src="http://www.bootfastui.cn/img/2021/0512/h9.png" alt="" />
    </div>
  </div>
  <div class="txt">
    <p>全国咨询订购热线</p>
    <h5>010-56206283</h5>
  </div>
  <div class="qq">
    <p>281825006</p>
  </div>
</div>