<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">

    <title>客服首页</title>
    
    <meta content="all" name="robots" /><!--允许蜘蛛搜索--> 
    <meta name="keywords" content="客服兔" />
    <meta name="description" content="客服兔" />
    <meta name="author" content="客服兔">
    <meta name="copyright" content="客服兔" />
    <!--网站小图标-->  
    <!--
    <link href="favicon.ico" rel="bookmark" type="image/x-icon" /> 
    <link href="favicon.ico" rel="icon" type="image/x-icon" /> 
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     -->
    <!-- BASE JS -->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Bootstrap v3.3.5-->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- //Bootstrap -->
    <!-- 布局，版面 -->
    <!-- // -->

    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
    body{background: url(http://zhongzhu.cn185.so313.com/Websites/zhongzhu/Uploads/Picture/2016-06-29/57733eee65b71.jpg);}
    .container{width: 1000px;height: 1000px;border:1px solid #000;margin: auto;padding: }
    </style>

  </head>
  <body>
  <h1>客服兔插件</h1>  
  <div class="container">
    
  </div>
  
  <!-- KEFUTU role="kefu" <i class="icon>图标区</i>-->
  <link rel="stylesheet" href="css/kefutu.css">
  <script src="js/kefutu-v2.1.js"></script>
  <div class="kefutu-container" id="kefu" role="kefu">
    <i class="kefutu-arrow">
        <span class="border_arrow"></span>
        <span class="con_arrow"></span>
    </i>
    <!-- 连接 -->
    <div class="kefutu-item">
      <a href="javascript:">
        <i class="kefutu-item-icon icon iconfont"><img src="images/kefutu-icons-qq.png" alt="qq"></i>
        <span class="kefutu-item-title">QQ咨询</span>
      </a>
      <div class="kefutu-item-content">
        <div class="kefutu-item-content-container">
            <p>销售：<i class="icon iconfont">&#xe606;</i><a href="#">53832198</a></p>
            <!-- <p>销售：<i class="icon iconfont">&#xe606;</i><a href="#">253832198</a></p>
            <p>销售：<i class="icon iconfont">&#xe606;</i><a href="#">1250565415</a></p> -->
           <!--  
            <p>客服：<i class="icon iconfont">&#xe606;</i>1250565415</p>
            <p>经理：<i class="icon iconfont">&#xe606;</i>54866555</p> 
            -->
        </div>
      </div>
    </div>
    <!-- 链接 -->
    <div class="kefutu-item">
      <a href="javascript:">
        <i class="kefutu-item-icon icon iconfont"><img src="images/kefutu-icons-chat.png" alt=""></i>
        <span class="kefutu-item-title">我有话说</span>
      </a>
      <div class="kefutu-item-content">
          <div class="kefutu-item-content-container">
                这是自定义文字面板 
          </div>
      </div>
    </div>
    <!-- 电话 -->
    <div class="kefutu-item">
      <a href="javascript:">
        <i class="kefutu-item-icon icon iconfont"><img src="images/kefutu-icons-phone.png" alt=""></i>
        <span class="kefutu-item-title">电话</span>
      </a>
      <div class="kefutu-item-content">
        <div class="kefutu-item-content-container">
            <p><strong>销售： 13551393375</strong></p>
            <p><strong>销售： 400-1888-6886</strong></p>
            <p><strong>销售： 400-1888-6886</strong></p>
           <!--  
            <p>客服： 400-1888-6886</p>
            <p>经理： 400-1888-6886</p>
            <p>经理： 400-1888-6886</p> 
            -->
        </div>
      </div>
    </div>
    <!-- 二维码 -->
    <div class="kefutu-item">
      <a href="javascript:">
        <i class="icon iconfont kefutu-item-icon"><img src="images/kefutu-icons-qr.png" alt=""></i>
        <span class="kefutu-item-title">扫二维码</span>
      </a>
      <div class="kefutu-item-content">
        <div class="kefutu-item-content-container">
            <img src="images/erweima.jpg" class="kefutu-qr-img">
        </div>
      </div>
    </div>
    <!-- 表单 -->
    <div class="kefutu-item item-form">
      <a href="javascript:">
        <i class="kefutu-item-icon icon iconfont"><img src="images/kefutu-icons-form.png" alt=""></i>
        <span class="kefutu-item-title">留言</span>
      </a>
      <div class="kefutu-item-content">
        <div class="kefutu-item-content-container">
        <form action="?" method="post" class="k-form-message">
            <div class="form-group clearfix">
              <label for="" class="k-label">称呼：</label>
              <div class="k-input">
                <input type="text" class="form-control" id="" placeholder="Name">
              </div>
            </div>
            <div class="form-group clearfix">
              <label for="exampleInputEmail1" class="k-label">手机：</label>
              <div class="k-input">
              <input type="text" class="form-control" id="" placeholder="Mobile">
              </div>
            </div>
            <div class="form-group clearfix">
              <label for="exampleInputEmail1" class="k-label">邮箱：</label>
              <div class="k-input">
              <input type="email" class="form-control" id="" placeholder="Email">
              </div>
            </div>
            <div class="form-group clearfix">
              <label for="exampleInputEmail1" class="k-label">内容：</label>
              <div class="k-input k-textarea">
              <textarea class="form-control" placeholder="Message" rows="3"></textarea>
              </div>
            </div>
            <div class="form-group clearfix">
              <label for="exampleInputEmail1" class="k-label">验证码：</label>
              <!-- 验证码 -->
              <div class="k-input kefu-vcode">
                 <div class="kefu-vcode-imgbox"><img src="images/admin.png" _src="images/admin.png"></div>
                 <input type="text" class="form-control" id="" placeholder="Email">
              </div>
            </div>
            <div class="form-group k-form-foot">
              <button type="submit" class="btn k-btn-submit">提交</button><button type="reset" class="btn k-btn-reset">重置</button>
            </div>
        </form>
        </div>
      </div>
    </div>

    <!-- 返回顶部 -->
    <div class="kefutu-item item-gotop">
      <a href="javascript:">
        <i class="icon iconfont kefutu-item-icon"><img src="images/kefutu-icons-gotop.png" alt=""></i>
        <span class="kefutu-item-title">返回顶部</span>
      </a>
    </div>

  </div>
  <script type="text/javascript">
  $(function(){         
    $('#kefu').KEFUTU({
      service:'on',//是否打开服务 on off
      skin:'',//自定义风格.yourclass
      horizontal:'right',//水平 left， rihgt
      offset:'middle',//垂直偏移量,middle：垂直居中
      targetCell:'',//基于目标对象定位
      durationTime: 300,//缓动时间
    });
  });
  </script>
  <!-- //KEFUTU -->


  <p style="height:2000px"></p>
  
  

  </body>
</html>