新增：官网->客服帮助->模糊搜索
chenxiaojun
5 years ago
commit
9bb4900b2c
@ -1,150 +1,192 @@
|
|||||||
<extend name="Public/base" />
|
<extend name="Public/base" />
|
||||||
<block name="body">
|
<block name="body">
|
||||||
<link rel="stylesheet" href="__CSS__/service.css">
|
<link rel="stylesheet" href="__CSS__/service.css">
|
||||||
<script type="text/javascript" src="__JS__/event.js"></script>
|
<link href="__STATIC__/icons_alibaba/iconfont.css?v=1.0" rel="stylesheet">
|
||||||
<script type="text/javascript" src="__JS__/tween.js"></script>
|
<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;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 32px;
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<div class="g-main server_detail">
|
<div class="g-main server_detail">
|
||||||
<div class="crumbs"><em>当前位置：</em> <span>客服中心</span></div>
|
<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 class="tabmain">
|
||||||
<div id="outerWrap">
|
<div id="outerWrap">
|
||||||
<div id="sliderParent"></div>
|
<div id="sliderParent"></div>
|
||||||
<div class="blueline" id="blueline" style="top: 0px; "></div>
|
<div class="blueline" id="blueline" style="top: 0px; "></div>
|
||||||
<ul class="tabGroup">
|
<ul class="tabGroup">
|
||||||
<volist name="yidata" id="yi">
|
<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>
|
<a href="{:U('',array('kefu'=>$yi['titleurl']))}"><li <if condition='I("kefu") eq $yi["titleurl"]'>class="tabOption selectedTab"</if>>{$yi["title"]}</li></a>
|
||||||
</volist>
|
</volist>
|
||||||
</ul>
|
</ul>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div class="tabContent selectedContent">
|
<div class="tabContent selectedContent">
|
||||||
<!--密码问题-->
|
<!--密码问题-->
|
||||||
<h3>{$title.title}</h3>
|
<h3>{$title.title}</h3>
|
||||||
<notempty name="erdata">
|
<notempty name="erdata">
|
||||||
<ul>
|
<ul>
|
||||||
<volist name="erdata" id="er">
|
<volist name="erdata" id="er">
|
||||||
<li>
|
<li>
|
||||||
<div class="q" style="height:auto;line-height:20px;" title="{$er['zititle']}"><em>•</em>{$er['zititle']}</div>
|
<div class="q" style="height:auto;line-height:20px;" title="{$er['zititle']}"><em>•</em>{$er['zititle']}</div>
|
||||||
<div class="a">
|
<div class="a">
|
||||||
<p style="line-height:15px"><span style="font-family:'微软雅黑','sans-serif'"> {$er['contend']}</p>
|
<p style="line-height:15px"><span style="font-family:'微软雅黑','sans-serif'"> {$er['contend']}</p>
|
||||||
<p><br>
|
<p><br>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</volist>
|
</volist>
|
||||||
</ul>
|
</ul>
|
||||||
<else />
|
<else />
|
||||||
<div class="empty-notice">暂无此类问题哦~</div>
|
<div class="empty-notice">暂无此类问题哦~</div>
|
||||||
</notempty>
|
</notempty>
|
||||||
</div>
|
</div>
|
||||||
<!--密码问题结束-->
|
<!--密码问题结束-->
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="clear:both;"></div>
|
<div style="clear:both;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 主体内容 -->
|
<!-- 主体内容 -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var container = document.getElementById('container');
|
var container = document.getElementById('container');
|
||||||
var content = document.getElementById('content');
|
var content = document.getElementById('content');
|
||||||
var oDivs = DOM.children(content, "div");
|
var oDivs = DOM.children(content, "div");
|
||||||
oDivs[0].st = 0;
|
oDivs[0].st = 0;
|
||||||
for (var i = 1; i < oDivs.length; i++) {
|
for (var i = 1; i < oDivs.length; i++) {
|
||||||
oDivs[i].st = oDivs[i].offsetTop;
|
oDivs[i].st = oDivs[i].offsetTop;
|
||||||
}
|
}
|
||||||
var oLis = DOM.getElesByClass("tabOption");
|
var oLis = DOM.getElesByClass("tabOption");
|
||||||
var flag = 0;
|
var flag = 0;
|
||||||
var upFlag = oLis.length;; (function() {
|
var upFlag = oLis.length;
|
||||||
function fn(e) {
|
(function() {
|
||||||
e = e || window.event;
|
function fn(e) {
|
||||||
if (e.wheelDelta) {
|
e = e || window.event;
|
||||||
var n = e.wheelDelta;
|
if (e.wheelDelta) {
|
||||||
} else if (e.detail) {
|
var n = e.wheelDelta;
|
||||||
var n = e.detail * -1;
|
} else if (e.detail) {
|
||||||
}
|
var n = e.detail * -1;
|
||||||
if (n > 0) {
|
}
|
||||||
container.scrollTop -= 12;
|
if (n > 0) {
|
||||||
} else if (n < 0) {
|
container.scrollTop -= 12;
|
||||||
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);
|
slider.style.top = container.scrollTop * container.offsetHeight / content.offsetHeight + "px";
|
||||||
var st = container.scrollTop;
|
slider.offsetTop * (content.offsetHeight / container.offsetHeight);
|
||||||
if (st > this.preSt) {
|
var st = container.scrollTop;
|
||||||
for (var j = 0; j < oLis.length; j++) {
|
if (st > this.preSt) {
|
||||||
if (st < oDivs[j].st) break;
|
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)) {
|
if (oLis[j - 2] && this.preLi !== j) {
|
||||||
DOM.removeClass(oLis[j - 2], "selectedTab");
|
if ((j) > (flag + 1)) {
|
||||||
DOM.addClass(oLis[j - 1], "selectedTab");
|
DOM.removeClass(oLis[j - 2], "selectedTab");
|
||||||
animate(blueline, {
|
DOM.addClass(oLis[j - 1], "selectedTab");
|
||||||
top: (j - 1) * 48
|
animate(blueline, {
|
||||||
},
|
top: (j - 1) * 48
|
||||||
500, 2);
|
},
|
||||||
}
|
500, 2);
|
||||||
}
|
}
|
||||||
flag = j - 1;
|
}
|
||||||
} else if (st < this.preSt) {
|
flag = j - 1;
|
||||||
for (var j = oLis.length - 1; j >= 0; j--) {
|
} else if (st < this.preSt) {
|
||||||
if (st > oDivs[j].st) break;
|
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 (oLis[j + 2] && this.preLi !== j) {
|
||||||
if ((j) < (flag)) {
|
if (flag === undefined) return;
|
||||||
for (var k = 0; k < oLis.length; k++) {
|
if ((j) < (flag)) {
|
||||||
DOM.removeClass(oLis[k], "selectedTab");
|
for (var k = 0; k < oLis.length; k++) {
|
||||||
};
|
DOM.removeClass(oLis[k], "selectedTab");
|
||||||
DOM.addClass(oLis[j + 1], "selectedTab");
|
};
|
||||||
animate(blueline, {
|
DOM.addClass(oLis[j + 1], "selectedTab");
|
||||||
top: (j + 1) * 48
|
animate(blueline, {
|
||||||
},
|
top: (j + 1) * 48
|
||||||
500, 2);
|
},
|
||||||
upFlag = j + 1;
|
500, 2);
|
||||||
}
|
upFlag = j + 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.preSt = st;
|
}
|
||||||
if (e.preventDefault) e.preventDefault();
|
this.preSt = st;
|
||||||
return false;
|
if (e.preventDefault) e.preventDefault();
|
||||||
}
|
return false;
|
||||||
container.onmousewheel = fn;
|
}
|
||||||
if (container.addEventListener) container.addEventListener("DOMMouseScroll", fn, false);
|
container.onmousewheel = fn;
|
||||||
slider = document.createElement('span');
|
if (container.addEventListener) container.addEventListener("DOMMouseScroll", fn, false);
|
||||||
slider.id = "slider";
|
slider = document.createElement('span');
|
||||||
slider.style.height = container.offsetHeight * (container.offsetHeight / content.offsetHeight) + "px";
|
slider.id = "slider";
|
||||||
sliderParent.appendChild(slider);
|
slider.style.height = container.offsetHeight * (container.offsetHeight / content.offsetHeight) + "px";
|
||||||
on(slider, "mousedown", down);
|
sliderParent.appendChild(slider);
|
||||||
var blueline = document.getElementById("blueline");
|
on(slider, "mousedown", down);
|
||||||
function changeTab() {
|
var blueline = document.getElementById("blueline");
|
||||||
var index = DOM.getIndex(this);
|
function changeTab() {
|
||||||
for (var i = 0; i < oLis.length; i++) {
|
var index = DOM.getIndex(this);
|
||||||
DOM.removeClass(oLis[i], "selectedTab");
|
for (var i = 0; i < oLis.length; i++) {
|
||||||
}
|
DOM.removeClass(oLis[i], "selectedTab");
|
||||||
DOM.addClass(this, "selectedTab");
|
}
|
||||||
animate(container, {
|
DOM.addClass(this, "selectedTab");
|
||||||
scrollTop: oDivs[index].st
|
animate(container, {
|
||||||
},
|
scrollTop: oDivs[index].st
|
||||||
500, 1);
|
},
|
||||||
var t = oDivs[index].st * container.offsetHeight / content.offsetHeight;
|
500, 1);
|
||||||
animate(slider, {
|
var t = oDivs[index].st * container.offsetHeight / content.offsetHeight;
|
||||||
top: t
|
animate(slider, {
|
||||||
},
|
top: t
|
||||||
500);
|
},
|
||||||
animate(blueline, {
|
500);
|
||||||
top: index * 48
|
animate(blueline, {
|
||||||
},
|
top: index * 48
|
||||||
500, 2);
|
},
|
||||||
}
|
500, 2);
|
||||||
var tabPannel1 = document.getElementById("outerWrap");
|
}
|
||||||
var oLis = DOM.children(DOM.children(tabPannel1, "ul")[0], "li");
|
var tabPannel1 = document.getElementById("outerWrap");
|
||||||
for (var i = 0; i < oLis.length; i++) {
|
var oLis = DOM.children(DOM.children(tabPannel1, "ul")[0], "li");
|
||||||
oLis[i].onclick = changeTab;
|
for (var i = 0; i < oLis.length; i++) {
|
||||||
};
|
oLis[i].onclick = changeTab;
|
||||||
})();
|
};
|
||||||
</script>
|
|
||||||
|
$('#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>
|
</block>
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue