jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: index - 首页及顶部导航处理

Browse Source
This commit is contained in:
jsasg
2025-04-07 18:10:50 +08:00
parent 48677e5f91
commit 7a0b36b343
101 changed files with 5823 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/index/view/public/base.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
{block name="title"}<title>{$basic_config['website_seo_title']['value']}</title>{/block}
{block name="seo"}
<meta name="keywords" content="{$basic_config['website_seo_keyword']['value']}" />
<meta name="description" content="{$basic_config['website_seo_description']['value']}" />
{/block}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="static/index/css/public.css" />
<link rel="stylesheet" type="text/css" href="static/index/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="static/index/css/orico_header.css" />
<link rel="stylesheet" type="text/css" href="static/index/css/orico_footer.css" />
{block name="style"}{/block}
<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
</head>
<body>
{block name="header"}
{include file="public/header"/}
{/block}
{block name="main"}{/block}
{block name="footer"}
{include file="public/footer"/}
{/block}
{block name="script"}{/block}
</body>
</html>
</html>

74
app/index/view/public/footer.html Normal file
View File

@@ -0,0 +1,74 @@
<footer class="orico_footer">
<div class="fotter">
<!--中间信息-->
<div class="footerMain">
<!-- 上面-->
<div class="foottxttop">
<!--ico -->
<a href="/">
<img src="static/index/images/bottomlogo.png" class="footerico" />
</a>
<div class="foootCt">
<p class="ftitle">{:lang('footer_navigation.product_categorys')}</p>
<ul>
{volist name="header_categorys" id="vo"}
<li><a href="{:url('product_index', ['id' => $vo.id])}" class="fline">{$vo.name}</a></li>
{/volist}
</ul>
</div>
{if condition="!empty($footer_navigation)"}
{volist name="footer_navigation" id="vo"}
<div class="foootCt">
<p class="ftitle">{$vo.name}</p>
{if condition="!empty($vo.children)"}
<ul>
{volist name="vo.children" id="vc"}
<li><a href="{$vo.link}" class="fline">{$vc.name}</a></li>
{/volist}
</ul>
{/if}
</div>
{/volist}
{/if}
<div class="foootCt">
<p class="ftitle">{:lang('footer_contact')}</p>
{if condition="!empty($contact_config)"}
<ul>
{volist name="contact_config" id="vo"}
<li>
<a href="javascript:void(0);" class="fline">
{if condition="$vo.type == 'image'"}
<img src="{$vo.value}" {if condition="!empty($vo.extra)"}style="{$vo.extra}"{/if} />
{else/}
{$vo.value}
{/if}
</a>
</li>
{/volist}
</ul>
{/if}
</div>
</div>
<div class="foottxtbottom">
{if condition="!empty($media_config)"}
<div class="ftopicos">
<ul>
{volist name="media_config" id="vo"}
<a href="{$vo.url.value}"><img src="{$vo.image.value}" {if condition="!empty($vo.image.extra)"}style="{$vo.image.extra}"{/if} /></a>
{/volist}
</ul>
</div>
{/if}
{if condition="!empty($basic_config.website_powerby)"}
<div class="ftcopyright">
<span>{$basic_config.website_powerby.value}</span>
{if condition="!empty($basic_config.website_icp)"}
<a href="https://beian.miit.gov.cn/">（{$basic_config.website_icp.value}）</a>
{/if}
</div>
{/if}
<!-- <div class="batext">粤公网安备 44030702002297号</div> -->
</div>
</div>
</div>
</footer>

200
app/index/view/public/header.html Normal file
View File

@@ -0,0 +1,200 @@
<header class="header-PC">
<div id="header">
<!-- LOG -->
<div class="nav1">
<a>
<img src="static/index/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('header_navigation.product_categorys')}</a>
<img src="static/index/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="javascript:void(0);">{$vo.name}</a>
</li>
{/volist}
</ul>
<!-- 右边子菜单-->
{volist name="header_categorys" id="vo"}
{if condition="$key == 0"}
<div class="navItem_cyright" style="display: block;">
{else/}
<div class="navItem_cyright" style="display: none;">
{/if}
{volist name="vo.children" id="vc"}
<dl class="nav_cyrightit">
<dt>
<a href="{:url('product_index', ['id' => $vc.id])}">{$vc.name}</a>
</dt>
{volist name="vc.children" id="vcc"}
<dd>
<a href="{:url('product_index', ['id' => $vcc.id])}">{$vcc.name}</a>
</dd>
{/volist}
<dl>
{/volist}
</div>
{/volist}
</ol>
{/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="static/index/images/black-down.png" class="downimg" />
<!--下拉菜单 -->
<ol class="navItemConten1">
{volist name="vo.children" id="voc"}
<li>
<a href="{$vo.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
</li>
{/volist}
</ol>
{/if}
</li>
{/volist}
</ul>
</nav>
</div>
<!-- 顶部搜索/国家选择/商店-->
<div class="nav3">
<img src="static/index/images/icon-search.png" id="openModalBtn" class="searchimg" />
<div class="choesCountry">
<img src="static/index/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>
</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('header_search.history')}</p>
<ul></ul>
</div>
<div class="popProduct">
<p class="h_title">{:lang('header_search.hot_product')}</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>
{/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(400);
}).mouseleave(function() {
$content.stop(true, true).slideUp(400);
});
}
// 处理第一个导航项
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();
});
});
</script>