nongzigongxiaowang/assets/css/public/kefu.less

//添加在线客服
.kefu {
  bottom: 100px;
  height: 430px;
  position: fixed;
  right: 10px;
  width: 100px;
  .kefu_itemKf {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 16px #0000001a;
      height: 100px;
      margin-bottom: 15px;
      text-align: center;
      width: 100px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      margin-bottom: 100px;
      a {
          >p {
              color: #666;
              font-size: 14px;
              font-weight: 500;
              line-height: 16px;
          }
          >img {
              margin-top: 15px;
              width: 50px;
              height:50px;
              margin-bottom: 5px;
          }
      }
  }
  .kefu_itemQQ {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 16px #0000001a;
      height: 100px;
      margin-bottom: 15px;
      text-align: center;
      width: 100px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      >p {
          color: #666;
          font-size: 14px;
          font-weight: 500;
          line-height: 16px;
      }
      >img {
          margin-top: 10px;
          width: 60px;
          height: 60px;
      }
      &:hover {
          .kefu_item_content_QQ {
              display: block;
          }
      }
  }
  .kefu_itemPhone {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 16px #0000001a;
      height: 100px;
      margin-bottom: 15px;
      text-align: center;
      width: 100px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      >p {
          color: #666;
          font-size: 14px;
          font-weight: 500;
          line-height: 16px;
      }
      >img {
          margin-top: 10px;
          width: 60px;
          height: 60px;
      }
      &:hover {
          .kefu_item_content_phone {
              display: block;
          }
      }
  }
  .kefu_item_content_QQ {
      position: absolute;
      top: -100px;
      right: 100px;
      background: #fff;
      border-radius: 10px;
      display: none;
      width: 190px;
      height: 330px;
      background: #fff;
      box-shadow: 0 4px 16px #0000001a;
      z-index: 99;
      box-sizing: border-box;
      padding: 20px;
      img {
          margin-bottom: 10px;
      }
      .qqfs {
          margin-bottom: 20px;
          font-size: 14px;
          color: #333;
      }
      .arrow {
          width: 0;
          height: 0;
          width: 0;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent; 
          border-left: 20px solid #fff; 
          position: absolute;
          top: 120px;
          right: -20px;
          transform: translateX(-50%);
          z-index: 100;
      }
  }
  .kefu_item_content_phone {
      position: absolute;
      top: 0;
      right: 100px;
      background: #fff;
      border-radius: 10px;
      display: none;
      width: 190px;
      height: 80px;
      background: #fff;
      box-shadow: 0 4px 16px #0000001a;
      z-index: 99;
      box-sizing: border-box;
      padding: 20px;
      text-align: left;
      color: #333;
      .kefu_item_content_phone_title {
          margin-bottom: 5px;
          font-weight: bold;
      }
      .arrow {
          width: 0;
          height: 0;
          width: 0;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent; 
          border-left: 20px solid #fff; 
          position: absolute;
          top: 20px;
          right: -20px;
          transform: translateX(-50%);
          z-index: 100;
      }
  }
}


    @media screen and (max-width:800px){/*ipad_phone*/
            .phone_none{display:none!important;}


            .kefu{left:0px;bottom:0px!important;width:100%!important;height:66px!important;
                   text-align:center; line-height:66px; z-index: 1111;position:relative!important; }
            .kefu>div{display:inline-block;margin:0px 10px!important;height:55px!important;width:90px!important;}
            .kefu>div a{display:block; height:55px;}
            .kefu>div>img{display:block;margin:3px auto 0!important;width:33px!important;height:33px!important;}
            .kefu>div>a>img{display:block;margin:3px auto 0!important;width:33px!important;height:33px!important;}
            .kefu .kefu_item_content_QQ img{margin-bottom:0px;}
             .kefu .kefu_item_content_QQ .qqfs{margin-bottom:0px;height:22px;line-height:22px;}
             .kefu .kefu_itemKf a > p{word-break: keep-all; white-space: nowrap;}
            .kefu .kefu_item_content_QQ{
                
                right:-95px;
                margin-right:50%;overflow:hidden;
                top:auto;bottom:100px;
                line-height: normal;
            }
            .qqadd:nth-of-type(1){margin-bottom:22px;}
            
            .kefu .kefu_item_content_phone{
               right:20px;
               margin-right:50%;overflow:hidden;
               top:auto;bottom:100px;
               line-height: normal;
            
            
            }  


    }