Files
orico-official-website/app/index/view/mobile/public/nas_header.html
2025-07-16 14:13:13 +08:00

126 lines
4.3 KiB
HTML

<header class="oircoEgapp-head">
<div class="headtop">
{eq name=":cookie('think_lang')" value="zh-cn"}
<a href="{:url('/index/topic/nas/index')}">
{else/}
<a>
{/eq}
<img src="__IMAGES__/logo.png" class="headerlogimg" />
</a>
<div class="action-r">
<div class="right img-responsive cursor_p">
<span class="icon-category cursor_p top-menu-toggle"><i class="icon-menu-svg"></i></span>
</div>
</div>
</div>
<!-- 顶部国家选择-->
<div class="top-country">
<div class="mask"></div>
<div class="action-sheet">
<div class="menu-title">
<div class="menu-name">{:lang_i18n('请择地区')}</div>
<div class="close-icon">
<img src="__IMAGES__/close.png">
</div>
</div>
<ul>
{volist name="header_languages" id="la"}
<li>
<a href="{$la.lang_url}" target="_blank">
<img src="{$la.lang_icon}">{$la.country_en_name} - {$la.lang_en_name}
</a>
</li>
{/volist}
</ul>
</div>
</div>
<!-- 顶部菜单-->
<div class="top-menu">
{notempty name="header_navigation"}
{volist name="header_navigation" id="nav"}
<div class="it-ct">
<div class="it-1">
{empty name="nav.children"}
<a href="{$nav.link}">{$nav.name}</a>
{else/}
<div class="it-1-more">{$nav.name}<i class="icon-arrow"></i></div>
{volist name="nav.children" id="ch"}
<div class="it-1-2"><a href="{$ch.link}">{$ch.name}</a></div>
{/volist}
{/empty}
</div>
</div>
{/volist}
{/notempty}
</div>
</header>
<script type="text/javascript">
$(function() {
// 点击顶部菜单
$(".top-menu-toggle").click(function() {
$(".top-menu").slideToggle(800);
})
// 点击一级菜单显示二级菜单
$(".it-1-more").on("click", function() {
$('.it-1-2').hide();
$('.icon-arrow').removeClass('rotate');
$(this).siblings('.it-1-2').slideToggle(800);
$(this).find('.icon-arrow').addClass('rotate');
});
// 顶部国家选择
$('.top-country-toggle').click(function(){
$(".mask,.action-sheet").show();
})
$('.top-country .close-icon').click(function(){
$(".mask,.action-sheet").hide();
})
// 移动端顶部宽度设置和主体内容宽度一致
var pageWidth = $('.oricoEGapp').outerWidth();
// 设置.header-PC元素的宽度
$('.oircoEgapp-head').css('width', pageWidth + 'px');
// 可选:监听窗口大小变化,实时更新宽度
$(window).resize(function() {
var newWidth = $('.oricoEGapp').outerWidth();
$('.oircoEgapp-head').css('width', newWidth + 'px');
});
// 回显搜索历史记录
history();
})
function history() {
var keywords = new URL(window.location.href).searchParams.get('keywords')
var history_keywords = localStorage.getItem('header_search_keywords');
if (!history_keywords) {
history_keywords = [];
} else {
history_keywords = JSON.parse(history_keywords);
}
// 记录搜索关键词
if (keywords) {
if (history_keywords.includes(keywords)) {
history_keywords.splice(history_keywords.indexOf(keywords), 1);
}
history_keywords.unshift(keywords);
if (history_keywords.length > 3) {
history_keywords.pop();
}
localStorage.setItem('header_search_keywords', JSON.stringify(history_keywords));
}
// 回显搜索历史
history_keywords.forEach(function(item) {
$('#history').append(
$('<a>')
.css({
'margin-right': '10px'
})
.attr('href', '{:url("product/search")}?keywords=' + item)
.text(item)
);
});
return history_keywords;
}
</script>