安信娱乐谁是老板

拼图开发文档

在线客服

在线客服,常用于在线社交软件窗口,可用于沟通、咨询等功能。

基本样式

框架用.service定义在线客服样式。

在线客服
  • QQ
  • 旺旺
  • 微信公众号
    微信公众号
  • 微博
    微博
  • 400-123-4567
    电话
返回顶部
    <div class="service">
      <div class="card" align="center">
        <div class="card-head card-overflow bg-main bg-inverse">在线客服</div>
        <ul class="list-group bg-white">
          <li>
            QQ
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=106967808&site=QQ客服&menu=yes">
              <img border="0" src="http://wpa.qq.com/pa?p=2:106967808:52" alt="QQ客服" title="QQ客服" />
            </a>
          </li>
          <li>
            旺旺
            <a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=pintuer&siteid=cntaobao&s=2&charset=utf-8">
              <img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=pintuer&site=cntaobao&s=2&charset=utf-8" alt="旺旺客服" />
            </a>
          </li>
          <li><img src="..." width="80" height="80" alt="微信公众号" /><br />微信公众号</li>
          <li><img src="..." width="80" height="80" alt="微博" /><br />微博</li>
          <li>400-123-4567<br /><span class="size-mini">电话</span></li>
        </ul>
        <div class="card-foot" data-win="top">返回顶部</div>
      </div>
    </div>
  

提示工具样式

内容以提示工具的样式显示;需要在显示的项目上添加.service-item样式,同时在项目上添加.service-body样式的内容。

客服
  • QQ
  • 微信
    图片
  • 微博
    图片
顶部
    <div class="service">
      <div class="card radius" align="center">
        <div class="card-head card-overflow bg-main bg-inverse">客服</div>
        <ul class="list-group bg-white">
          <li class="service-item">
            QQ
            <div class="service-body tips tips-right">
              <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=106967808&amp;site=qq&amp;menu=yes">
                <img src="http://wpa.qq.com/pa?p=2:106967808:51" alt="业务合作" title="业务合作" border="0">
              </a>
            </div>
          </li>
          <li class="service-item">
            微信
            <div class="service-body popove popove-right">
              <div class="popove-body"><img src="..." width="135" height="135" alt="图片" /></div>
            </div>
          </li>
          <li class="service-item">
            微博
            <div class="service-body popove popove-right">
              <div class="popove-body"><img src="..." width="135" height="135" alt="图片" /></div>
            </div>
          </li>
        </ul>
        <div class="card-foot" data-win="top">顶部</div>
      </div>
    </div>
  
默认的提示内容显示在右侧,当在线客服窗口显示在右侧时,需要将.tips-right改为.tips-left.popove-right改为.popove-left

固定位置

在线客服一般显示在页面的四个角落,在排版-辅助章节处,有定义“固定位置”样式,四个角落样式分别为:左上角.fixed-left-top、左下角.fixed-left-bottom、右上角.fixed-right-top、右下角.fixed-right-bottom

    <div class="service fixed-left-top">...</div>
    <div class="service fixed-left-bottom">...</div>
    <div class="service fixed-right-top">...</div>
    <div class="service fixed-right-bottom">...</div>