272 lines
8.3 KiB
HTML
272 lines
8.3 KiB
HTML
<header class="header-PC">
|
||
<div id="header">
|
||
<!-- LOG -->
|
||
<div class="nav1">
|
||
<a href="/">
|
||
<img src="__IMAGES__/logo.png" />
|
||
</a>
|
||
</div>
|
||
<!--顶部导航栏 -->
|
||
<div class="nav2">
|
||
<nav id="booNavigation" class="booNavigation">
|
||
<ul>
|
||
{if condition="!empty($header_categorys)"}
|
||
<li class="navItem">
|
||
<a href="javascript:void(0);">{:lang_i18n('产品列表')}</a>
|
||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||
<ol class="navItemConten">
|
||
<!-- 左边子菜单-->
|
||
<ul class="navItem_cyleft">
|
||
{volist name="header_categorys" id="vo"}
|
||
<li class="{$key == 0 ? 'it_active' : ''}">
|
||
<a href="{:url('product/category', ['id' => $vo.id])}">{$vo.name}</a>
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
<!-- 右边子菜单-->
|
||
{volist name="header_categorys" id="vo" key="idx"}
|
||
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
|
||
{volist name="vo.children" id="vc"}
|
||
<dl class="nav_cyrightit">
|
||
<dt>
|
||
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
|
||
</dt>
|
||
{volist name="vc.children" id="vcc"}
|
||
<dd>
|
||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||
</dd>
|
||
{/volist}
|
||
</dl>
|
||
{/volist}
|
||
</div>
|
||
{/volist}
|
||
</ol>
|
||
</li>
|
||
{/if}
|
||
{volist name="header_navigation" id="vo"}
|
||
<li class="navItem">
|
||
<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
|
||
{if condition="!empty($vo.children)"}
|
||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||
<!--下拉菜单 -->
|
||
<ol class="navItemConten1">
|
||
{volist name="vo.children" id="voc"}
|
||
<li>
|
||
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
|
||
</li>
|
||
{/volist}
|
||
</ol>
|
||
{/if}
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<!-- 顶部搜索/国家选择/商店-->
|
||
<div class="nav3">
|
||
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
|
||
<div class="choesCountry">
|
||
<img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
|
||
<!--国家选择 -->
|
||
<div class="topCountry" id="top-country">
|
||
<ul>
|
||
<li class="closec">
|
||
<span class="closecountrybt">×</span>
|
||
</li>
|
||
{volist name="header_languages" id="vo"}
|
||
<a href="{$vo.lang_url}">
|
||
<li>
|
||
<div class="cico">
|
||
<img src="{$vo.lang_icon}" class="countryimg" />
|
||
</div>
|
||
<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
|
||
</li>
|
||
</a>
|
||
{/volist}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{eq name=":cookie('think_lang')" value="en-us"}
|
||
{notempty name="basic_config['navigation_store_url']['value']"}
|
||
<a class="storetopbt" href="{$basic_config['navigation_store_url']['value']}">
|
||
<img src="__IMAGES__/shopico.png" class="storeImgico" />{:lang_i18n('店铺')}
|
||
</a>
|
||
{/notempty}
|
||
{/eq}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索弹框-->
|
||
<div class="searchmodalMian" id="scmodal">
|
||
<div class="searchmodalct">
|
||
<span class="close-btn">×</span>
|
||
<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
|
||
<!-- 历史记录 -->
|
||
<div class="searchhistory">
|
||
<p class="h_title">{:lang_i18n('搜索记录')}</p>
|
||
<ul></ul>
|
||
</div>
|
||
<div class="popProduct">
|
||
<p class="h_title">{:lang_i18n('热销产品')}</p>
|
||
<div class="popmain">
|
||
{volist name="header_hot_products" id="vo"}
|
||
<div class="popitem">
|
||
<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}" class="popimg" /></a>
|
||
<div class="productName">{$vo.name}</div>
|
||
<div class="produc-dec">{$vo.short_name}</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<script>
|
||
$(document).ready(function () {
|
||
// 搜索历史记录处理
|
||
function history(keywords) {
|
||
var history = localStorage.getItem('header_search_keywords');
|
||
if (!history) {
|
||
history = [];
|
||
} else {
|
||
history = JSON.parse(history);
|
||
}
|
||
// 记录搜索关键词
|
||
if (keywords) {
|
||
if (history.includes(keywords)) {
|
||
history.splice(history.indexOf(keywords), 1);
|
||
}
|
||
history.unshift(keywords);
|
||
if (history.length > 3) {
|
||
history.pop();
|
||
}
|
||
localStorage.setItem('header_search_keywords', JSON.stringify(history));
|
||
return history;
|
||
}
|
||
|
||
// 回显搜索历史记录
|
||
history.forEach(function (item) {
|
||
$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
|
||
});
|
||
|
||
return history;
|
||
}
|
||
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
||
function handleHover($element, $content) {
|
||
$element.mouseenter(function () {
|
||
$content.stop(true, true).slideDown(60);
|
||
}).mouseleave(function () {
|
||
$content.stop(true, true).slideUp(60);
|
||
});
|
||
}
|
||
// 处理第一个导航项
|
||
handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
|
||
// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
|
||
$('.navItem_cyleft li').mouseenter(function () {
|
||
$(this).addClass('it_active').siblings().removeClass('it_active');
|
||
$('.navItem_cyright').hide();
|
||
$('.navItem_cyright').eq($(this).index()).show();
|
||
});
|
||
// 处理第5 - 8个导航项
|
||
for (let i = 4; i < 8; i++) {
|
||
handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
|
||
}
|
||
// 点击搜索
|
||
$('#openModalBtn').click(function () {
|
||
$('#scmodal').toggle();
|
||
});
|
||
$('.close-btn').click(function () {
|
||
$('#scmodal').hide();
|
||
});
|
||
// 搜索历史记录回显
|
||
history();
|
||
// 执行搜索
|
||
$('#serrchinput').keydown(function (event) {
|
||
if (event.originalEvent.keyCode == 13) {
|
||
var keywords = $(this).val();
|
||
if (keywords == '') {
|
||
return false;
|
||
}
|
||
// 记录搜索关键词
|
||
history(keywords);
|
||
|
||
// 跳转到搜索页面
|
||
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
||
}
|
||
});
|
||
// 点击选择国家
|
||
$('#countrycheck').click(function () {
|
||
$('#top-country').toggle();
|
||
});
|
||
$('.closecountrybt').click(function () {
|
||
$('#top-country').hide();
|
||
});
|
||
// 缓存检测结果
|
||
let _deviceType = null;
|
||
|
||
/**
|
||
* 检测当前设备类型
|
||
* @returns {'mobile'|'tablet'|'desktop'}
|
||
*/
|
||
function detectDevice() {
|
||
if (_deviceType) return _deviceType;
|
||
|
||
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
|
||
const userAgent = navigator.userAgent.toLowerCase();
|
||
|
||
const isTablet =
|
||
userAgent.includes('tablet') ||
|
||
(userAgent.includes('android') && !userAgent.includes('mobile')) ||
|
||
userAgent.includes('ipad') ||
|
||
userAgent.includes('kindle');
|
||
|
||
_deviceType =
|
||
isTouch && (screenWidth < 768 || !isTablet) ? 'mobile' :
|
||
isTouch && screenWidth >= 768 ? 'tablet' : 'desktop';
|
||
|
||
return _deviceType;
|
||
}
|
||
|
||
/**
|
||
* 显示设备类型提示
|
||
*/
|
||
function showDeviceAlert() {
|
||
const device = detectDevice();
|
||
const message = `您正在使用${
|
||
device === 'mobile' ? '手机' :
|
||
device === 'tablet' ? '平板' : '电脑'
|
||
}访问本页面`;
|
||
|
||
// 使用原生alert
|
||
alert(message);
|
||
|
||
// 或者使用自定义样式的提示（需要引入相关CSS）
|
||
/*
|
||
$('<div class="device-alert">' + message + '</div>')
|
||
.css({
|
||
position: 'fixed',
|
||
top: '10px',
|
||
right: '10px',
|
||
padding: '10px 15px',
|
||
background: '#333',
|
||
color: 'white',
|
||
borderRadius: '5px',
|
||
zIndex: '9999'
|
||
})
|
||
.appendTo('body')
|
||
.fadeIn()
|
||
.delay(3000)
|
||
.fadeOut(function() {
|
||
$(this).remove();
|
||
});
|
||
*/
|
||
}
|
||
|
||
// 页面加载完成后自动检测并提示
|
||
$(document).ready(showDeviceAlert);
|
||
|
||
// 暴露检测方法供外部使用
|
||
$.detectDevice = detectDevice;
|
||
});
|
||
</script> |