网站浮动栏

<!-- 客服 -->
<div class="custCare">
  <ul>
    <li>
        <div class="cus-service">
          <img src="<?php bloginfo('template_directory'); ?>/img/cus-service.jpg" />
          <div class="addWx">扫码添加客服微信</div>
        </div>
        <div>
          <img class="wx" src="<?php bloginfo('template_directory'); ?>/img/right_navigation_1weixin.svg" />
          <div class="line">扫码关注</div>
        </div>

    </li>
    <li>
         <div class="tel_list">
          <div>售前咨询</div>
          <div>020-84661XXx</div>
          <div>133XXXXX742</div>
          <div>服务时间：9:00-18:00</div>
        </div>
        <div>
          <img class="tel" src="<?php bloginfo('template_directory'); ?>/img/right_navigation_2telephone.svg" />
          <div class="line">咨询热线</div>
        </div>
    </li>
    <li id="online">
      <img class="online" src="<?php bloginfo('template_directory'); ?>/img/right_navigation_3service.svg" />
      <div class="line">在线客服</div>
    </li>
    <li id="backup">
      <img class="top" src="<?php bloginfo('template_directory'); ?>/img/right_navigation_4top.svg" />
      <div class="top-word">返回顶部</div>
    </li>
  </ul>
</div>

/** 客服 **/
.custCare {
  position: fixed;
  z-index: 13;
  bottom: 5%;
  transform: translateY(5%);
  right: 1.5rem;
  width: 3.8rem;
  height: 16.55rem;
  background: rgba(0,0,0,0.6);
  opacity: 0.8;
  border-radius: 1.85rem;
}
.custCare ul {
  text-align: center;
  font-size: 0.7rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}
.custCare ul li {
  position: relative;
}
.custCare ul li .wx {
  margin-top: 1.5rem;
  width: 1.5rem;
  height: 1.2rem;
}
.custCare ul li .tel {
  width: 1.05rem;
  height: 1.2rem;
}
.custCare ul li .online {
  width: 1.5rem;
  height: 1.15rem;
}
.custCare ul li .top {
  width: 1rem;
  height: 0.75rem;
}
.custCare ul li .line {
  margin: 0.5rem 0 1.5rem 0;
}
.custCare ul li .line:after {
  content: " ";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  width: 2.7rem;
  height: 1px;
  background: #fff;
  transform: translate(-50%);
  opacity: 0.3;
}
.custCare ul li .top-word {
  margin-top: 0.5rem;
}
.custCare ul li:nth-child(3):hover {
  cursor: pointer;
}
.custCare ul #backup {
  cursor: pointer;
}
.custCare ul li:hover .cus-service {
   display: block;
   position: absolute;
   right: 4.5rem;
   top:0;
}

.custCare ul li:hover .tel_list {
   display: block;
   position: absolute;
   right: 4.5rem;
   top:0;
}

/** 客服微信悬浮 **/
.cus-service {
  display: none;
  padding: 1rem;
  text-align: center;
  box-shadow: 0px 0px 1.6rem 0px rgba(152, 160, 190, 0.2);
  border-radius: 0.25rem;
  background: #FFFFFF;
  opacity：1;
  width: 7rem;
}
.cus-service img {
  padding-top: 0.4rem;
  width: 4rem;
  height: 4rem;
}
.cus-service .addWx {
  margin-top: 0.5rem;
  font-size: 0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6C7581;
}
/** 客服电话悬浮 **/
.tel_list {
  display: none;
  padding: 1rem;
  line-height: 1;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6C7581;
  box-shadow: 0px 0px 1.6rem 0px rgba(152, 160, 190, 0.2);
  border-radius: 0.25rem;
  background: #FFFFFF;
  opacity：1;
  width: 10.5rem;
}
.tel_list > div:first-child {
  font-size: 1rem;
}
.tel_list > div:nth-child(2) {
  margin-top: 0.7rem;
  font-size: 1.2rem;
}
.tel_list > div:nth-child(3) {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}
.tel_list > div:last-child {
  margin-top: 1rem;
  font-size: 0.6rem;
}