cf-platform/Application/Media/View/default/Service/detail.html

<extend name="Public/base" />
<block name="body">
  <script src="__JS__/jquery.min.js"></script>
  <script src="__JS__/rem.js"></script>
  <link rel="stylesheet" type="text/css" href="__CSS__/heard.css" />


  <link rel="stylesheet" href="__CSS__/service.css">
  <link href="__STATIC__/icons_alibaba/iconfont.css?v=1.0" rel="stylesheet">
  <script type="text/javascript" src="__JS__/event.js"></script>
  <script type="text/javascript" src="__JS__/tween.js"></script>

  <!--客服详情-->
  <style>
    .search-input-new {
      border: 1px solid #999;
      border-radius: 20px;
      width: 300px;
      height: 30px;
      padding-left: 12px;
      padding-right: 30px;
    }

    .search-icon {
      font-size: 0.2rem;
      line-height: 32px;
      position: absolute;
      right: 8px;
      cursor: pointer;
    }
  </style>
  <div class="g-main server_detail">
    <div class="crumbs" style="display: flex;">
      <div>
        <em>当前位置：</em> <span>客服中心</span>
      </div>
      <div style="float: right;position: absolute;right: 5%;display: flex;">
        <input class="search-input-new" placeholder="" id="search_value" value="{:I('get.search','')}" />
        <i class="iconfont iconicon-test search-icon" id="search_btn"></i>
      </div>
    </div>
    <div class="tabmain">
      <div id="outerWrap">
        <div id="sliderParent"></div>
        <div class="blueline" id="blueline" style="top: 0px; "></div>
        <ul class="tabGroup">
          <volist name="yidata" id="yi">
            <a href="{:U('',array('kefu'=>$yi['titleurl']))}"><li <if condition='I("kefu") eq $yi["titleurl"]'>class="tabOption selectedTab"</if>>{$yi["title"]}</li></a>
          </volist>
        </ul>
        <div id="container">
          <div id="content">
            <div class="tabContent selectedContent">
              <!--密码问题-->
              <h3>{$title.title}</h3>
              <notempty name="erdata">
                <ul>
                  <volist name="erdata" id="er">
                    <li>
                      <div class="q" style="height:auto;line-height:20px;" title="{$er['zititle']}"><em>•</em>{$er['zititle']}</div>
                      <div class="a">
                        <p style="line-height:15px"><span style="font-family:'微软雅黑','sans-serif'">&nbsp;{$er['contend']}</p>
                        <p><br>
                        </p>
                      </div>
                    </li>
                  </volist>
                </ul>
                <else />
                <div class="empty-notice">暂无此类问题哦~</div>
              </notempty>
            </div>
            <!--密码问题结束-->


          </div>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>
  </div>

  <!-- 主体内容 -->
  <script type="text/javascript">
      var container = document.getElementById('container');
      var content = document.getElementById('content');
      var oDivs = DOM.children(content, "div");
      oDivs[0].st = 0;
      for (var i = 1; i < oDivs.length; i++) {
          oDivs[i].st = oDivs[i].offsetTop;
      }
      var oLis = DOM.getElesByClass("tabOption");
      var flag = 0;
      var upFlag = oLis.length;
      (function() {
          function fn(e) {
              e = e || window.event;
              if (e.wheelDelta) {
                  var n = e.wheelDelta;
              } else if (e.detail) {
                  var n = e.detail * -1;
              }
              if (n > 0) {
                  container.scrollTop -= 12;
              } else if (n < 0) {
                  container.scrollTop += 12;
              }
              slider.style.top = container.scrollTop * container.offsetHeight / content.offsetHeight + "px";
              slider.offsetTop * (content.offsetHeight / container.offsetHeight);
              var st = container.scrollTop;
              if (st > this.preSt) {
                  for (var j = 0; j < oLis.length; j++) {
                      if (st < oDivs[j].st) break;
                  }
                  if (oLis[j - 2] && this.preLi !== j) {
                      if ((j) > (flag + 1)) {
                          DOM.removeClass(oLis[j - 2], "selectedTab");
                          DOM.addClass(oLis[j - 1], "selectedTab");
                          animate(blueline, {
                                  top: (j - 1) * 48
                              },
                              500, 2);
                      }
                  }
                  flag = j - 1;
              } else if (st < this.preSt) {
                  for (var j = oLis.length - 1; j >= 0; j--) {
                      if (st > oDivs[j].st) break;
                  }
                  if (oLis[j + 2] && this.preLi !== j) {
                      if (flag === undefined) return;
                      if ((j) < (flag)) {
                          for (var k = 0; k < oLis.length; k++) {
                              DOM.removeClass(oLis[k], "selectedTab");
                          };
                          DOM.addClass(oLis[j + 1], "selectedTab");
                          animate(blueline, {
                                  top: (j + 1) * 48
                              },
                              500, 2);
                          upFlag = j + 1;
                      }
                  }
              }
              this.preSt = st;
              if (e.preventDefault) e.preventDefault();
              return false;
          }
          container.onmousewheel = fn;
          if (container.addEventListener) container.addEventListener("DOMMouseScroll", fn, false);
          slider = document.createElement('span');
          slider.id = "slider";
          slider.style.height = container.offsetHeight * (container.offsetHeight / content.offsetHeight) + "px";
          sliderParent.appendChild(slider);
          on(slider, "mousedown", down);
          var blueline = document.getElementById("blueline");
          function changeTab() {
              var index = DOM.getIndex(this);
              for (var i = 0; i < oLis.length; i++) {
                  DOM.removeClass(oLis[i], "selectedTab");
              }
              DOM.addClass(this, "selectedTab");
              animate(container, {
                      scrollTop: oDivs[index].st
                  },
                  500, 1);
              var t = oDivs[index].st * container.offsetHeight / content.offsetHeight;
              animate(slider, {
                      top: t
                  },
                  500);
              animate(blueline, {
                      top: index * 48
                  },
                  500, 2);
          }
          var tabPannel1 = document.getElementById("outerWrap");
          var oLis = DOM.children(DOM.children(tabPannel1, "ul")[0], "li");
          for (var i = 0; i < oLis.length; i++) {
              oLis[i].onclick = changeTab;
          };

          $('#search_btn').click(function () {
              var value = $('#search_value').val();
              var url = '/media.php?s=/Service/detail/kefu/' + "{:I('get.kefu')}" + '/search/' + value + '.html';
              // console.log(url);
              window.location.href = url;
          });

          $('#search_value').bind('keypress', function (event) {
              if(event.keyCode == 13){
                  $('#search_btn').click();
              }
          });
      })();
  </script>
</block>