nongminwang/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;
      }
  }
}