在线客服

基本样式

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

    <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="https://wpa.qq.com/msgrd?v=3&uin=106967808&site=QQ客服&menu=yes">
              <img border="0" src="https://wpa.qq.com/pa?p=2:106967808:52" alt="QQ客服" title="QQ客服" />
            </a>
          </li>
          <li>
            旺旺
            <a target="_blank" href="https://www.taobao.com/webww/ww.php?ver=3&touid=pintuer&siteid=cntaobao&s=2&charset=utf-8">
              <img border="0" src="https://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样式的内容。

    <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="https://wpa.qq.com/msgrd?v=3&amp;uin=106967808&amp;site=qq&amp;menu=yes">
                <img src="https://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>