This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<div class="header-nav-item">
|
||||
<div class="header-nav-title">{:lang_i18n('产品列表')}</div>
|
||||
<div class="header-dropdown" >
|
||||
<div class="header-dropdown" style="display: block;">
|
||||
<div class="header-dropdown-tabs">
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</div>
|
||||
@@ -189,28 +189,28 @@
|
||||
|
||||
|
||||
//产品列表在hover复位tabs选择
|
||||
const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
||||
// const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
||||
|
||||
if (productNavContainer) {
|
||||
productNavContainer.addEventListener('mouseleave', () => {
|
||||
// 延迟执行，确保下拉菜单已经隐藏
|
||||
setTimeout(() => {
|
||||
const tabs = document.querySelectorAll('.header-tab-item');
|
||||
const contents = document.querySelectorAll('.header-tab-content');
|
||||
// if (productNavContainer) {
|
||||
// productNavContainer.addEventListener('mouseleave', () => {
|
||||
// // 延迟执行，确保下拉菜单已经隐藏
|
||||
// setTimeout(() => {
|
||||
// const tabs = document.querySelectorAll('.header-tab-item');
|
||||
// const contents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
// 重置到第一个tab
|
||||
if (tabs.length > 0 && tabs[0]) {
|
||||
tabs.forEach(tab => tab.classList.remove('active'));
|
||||
contents.forEach(content => content.classList.remove('active'));
|
||||
// // 重置到第一个tab
|
||||
// if (tabs.length > 0 && tabs[0]) {
|
||||
// tabs.forEach(tab => tab.classList.remove('active'));
|
||||
// contents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
tabs[0].classList.add('active');
|
||||
const firstContentId = tabs[0].getAttribute('data-tab');
|
||||
const firstContent = document.getElementById(firstContentId);
|
||||
if (firstContent) firstContent.classList.add('active');
|
||||
}
|
||||
}, 350);
|
||||
});
|
||||
}
|
||||
// tabs[0].classList.add('active');
|
||||
// const firstContentId = tabs[0].getAttribute('data-tab');
|
||||
// const firstContent = document.getElementById(firstContentId);
|
||||
// if (firstContent) firstContent.classList.add('active');
|
||||
// }
|
||||
// }, 350);
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
421
app/index/view/pc/public/header1.html
Normal file
421
app/index/view/pc/public/header1.html
Normal file
@@ -0,0 +1,421 @@
|
||||
<link rel="stylesheet" href="__CSS__/header.css">
|
||||
<div class="header" >
|
||||
<!-- 导航外容器：1920px宽，下拉框基于此定位 -->
|
||||
<div class="header-nav-outer" >
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header-nav-bar">
|
||||
<div style="display:flex;align-items:center">
|
||||
<a href="/" style="display:flex;align-items:center">
|
||||
<img src="__IMAGES__/logo.png" alt="orico" class="header-log">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-nav-items">
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<div class="header-nav-item">
|
||||
<div class="header-nav-title">{:lang_i18n('产品列表')}</div>
|
||||
<div class="header-dropdown" style="display: block;">
|
||||
<div class="header-dropdown-tabs">
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-dropdown-content header-tab-content {if condition="$idx == 1"}active{/if}" id="tag-{$vo.id}">
|
||||
<div class="header-dropdown-category">
|
||||
{if condition="!empty($vo.children)"}
|
||||
{volist name="vo.children" id="vc"}
|
||||
<div class="header-category-box">
|
||||
{volist name="vc" id="vcc"}
|
||||
<div class="header-category-block">
|
||||
<div class="header-category-title">
|
||||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}" target="_self">
|
||||
{$vcc.name}
|
||||
</a>
|
||||
</div>
|
||||
<ul class="header-category-list">
|
||||
{if condition="!empty($vcc.children)"}
|
||||
{volist name="vcc.children" id="vccc" length="4"}
|
||||
<li class="header-category-item">
|
||||
<a href="{:url('product/subcategory', ['id' => $vccc.id])}" target="_self">
|
||||
{$vccc.name}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="header-dropdown-products">
|
||||
{if condition="!empty($vo.recommends)"}
|
||||
{volist name="vo.recommends" id="recommend"}
|
||||
<div class="header-product-card">
|
||||
<a href="{$recommend.link}">
|
||||
<div class="header-product-img">
|
||||
<img src="{$recommend.image}" alt="">
|
||||
</div>
|
||||
<div class="header-product-name">{$recommend.title}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{if condition="!empty($header_navigation)"}
|
||||
{volist name="header_navigation" id="nav"}
|
||||
<div class="header-nav-item">
|
||||
{if condition="empty($nav.children)"}
|
||||
<div class="header-nav-title">
|
||||
<a href="{$nav.link}" target="{$nav.blank==1?'_blank':'_self'}">{$nav.name}</a>
|
||||
</div>
|
||||
{else /}
|
||||
<div class="header-nav-title">{$nav.name}</div>
|
||||
<div class="header-dropdown">
|
||||
<div class="header-dropdown-content1">
|
||||
{volist name="nav.children" id="child"}
|
||||
<div class="header-product-card-1">
|
||||
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}">
|
||||
<div class="header-product-img-1">
|
||||
<img src="{$child.image}" alt="">
|
||||
</div>
|
||||
<div class="header-product-title-1">{$child.name}</div>
|
||||
<div class="header-product-name-1">{$child.desc}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- 右侧功能按钮 -->
|
||||
<div class="header-nav-actions">
|
||||
<div class="header-search-wrapper">
|
||||
<span class="header-nav-btn">
|
||||
<img src="__IMAGES__/s1.png" alt="" style="width: 17px;height: 17px;">
|
||||
</span>
|
||||
<div class="header-search-dropdown" id="searchDropdown">
|
||||
<span class="header-search-dropdown-delete-icon">✕</span>
|
||||
<div class="header-search-input-wrapper">
|
||||
<input type="text" class="header-search-input" placeholder="{:lang_i18n('搜索产品、分类...')}">
|
||||
<button class="header-search-submit">{:lang_i18n('搜索')}</button>
|
||||
</div>
|
||||
<div class="header-search-history" id="searchHistory">
|
||||
<div class="header-history-title">
|
||||
<span>{:lang_i18n('最近搜索')}</span>
|
||||
<span class="header-clear-history" id="clearHistory">{:lang_i18n('清空')}</span>
|
||||
</div>
|
||||
<div class="header-history-list" id="historyList"></div>
|
||||
</div>
|
||||
<div class="header-hot-products">
|
||||
<div class="header-hot-title">{:lang_i18n('热销产品')}</div>
|
||||
<div class="header-hot-product-list">
|
||||
{if condition="!empty($header_hot_products)"}
|
||||
{volist name="header_hot_products" id="pro"}
|
||||
<div class="header-hot-product-item" data-keyword="keyword-{$pro.id}">
|
||||
<div class="header-hot-product-img">
|
||||
<a href="{:url('product/detail', ['id' => $pro.id])}">
|
||||
<img src="{:thumb($pro.cover_image)}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-hot-product-name">{$pro.name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-lang-wrapper">
|
||||
<span class="header-nav-btn">
|
||||
<img src="__IMAGES__/l1.png" alt="" style="width: 20px;height:20px">
|
||||
</span>
|
||||
<div class="header-lang-dropdown" id="langDropdown">
|
||||
<span class="header-lang-dropdown-delete-icon">✕</span>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}" class="header-lang-item" data-lang="zh-CN" target="_self">
|
||||
<img src="{$vo.lang_icon}" alt="">
|
||||
|
||||
{eq name=":cookie('think_lang')" value="zh-cn"}
|
||||
<span class="header-lang-code">{$vo.country_zh_name}</span>
|
||||
<span class="header-lang-name">{$vo.lang_name}</span>
|
||||
{else}
|
||||
<span class="header-lang-code">{$vo.country_en_name}</span>
|
||||
<span class="header-lang-name-en">{$vo.lang_en_name}</span>
|
||||
{/eq}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-buy-wrapper">
|
||||
<button class="header-buy-btn">
|
||||
<img src="__IMAGES__/g1.png" alt="" style="margin-right: 3px;">
|
||||
{:lang_i18n('购买')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买下拉框 -->
|
||||
<div class="header-buy-dropdown" id="buyDropdown">
|
||||
<div class="header-buy-dropdown-content">
|
||||
{if condition="!empty($header_mall_entrance)"}
|
||||
{volist name="header_mall_entrance" id="ma"}
|
||||
<a class="header-buy-product-card" target="_self" href="{$ma.link}">
|
||||
<div class="header-buy-product-img">
|
||||
<img class="header-default-img" src="{$ma.image}" alt="{$ma.name}">
|
||||
<img class="header-hover-img" src="{$ma.hover_image}" alt="{$ma.name}">
|
||||
</div>
|
||||
<div class="header-buy-product-title">{$ma.name}</div>
|
||||
</a>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100vw;height: 64px;"></div>
|
||||
<script>
|
||||
|
||||
|
||||
//产品列表在hover复位tabs选择
|
||||
// const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
||||
|
||||
// if (productNavContainer) {
|
||||
// productNavContainer.addEventListener('mouseleave', () => {
|
||||
// // 延迟执行，确保下拉菜单已经隐藏
|
||||
// setTimeout(() => {
|
||||
// const tabs = document.querySelectorAll('.header-tab-item');
|
||||
// const contents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
// // 重置到第一个tab
|
||||
// if (tabs.length > 0 && tabs[0]) {
|
||||
// tabs.forEach(tab => tab.classList.remove('active'));
|
||||
// contents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
// tabs[0].classList.add('active');
|
||||
// const firstContentId = tabs[0].getAttribute('data-tab');
|
||||
// const firstContent = document.getElementById(firstContentId);
|
||||
// if (firstContent) firstContent.classList.add('active');
|
||||
// }
|
||||
// }, 350);
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
|
||||
const tabItems = document.querySelectorAll('.header-tab-item');
|
||||
const tabContents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
tabItems.forEach(tab =>
|
||||
{
|
||||
tab.addEventListener('click', () =>
|
||||
{
|
||||
tabItems.forEach(item => item.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
const tabId = tab.getAttribute('data-tab');
|
||||
tabContents.forEach(content =>
|
||||
{
|
||||
content.classList.remove('active');
|
||||
if (content.id === tabId) {
|
||||
content.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
let searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]');
|
||||
|
||||
function renderHistory ()
|
||||
{
|
||||
const historyList = document.getElementById('historyList');
|
||||
const historySection = document.getElementById('searchHistory');
|
||||
if (searchHistory.length === 0) {
|
||||
historySection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
historySection.style.display = 'block';
|
||||
historyList.innerHTML = searchHistory.map((item, index) => `
|
||||
<div class="header-history-item" data-keyword="${item}">
|
||||
<span>${item}</span>
|
||||
<span class="header-delete-icon" data-index="${index}">✕</span>
|
||||
</div>
|
||||
`).join('');
|
||||
document.querySelectorAll('.header-history-item').forEach(item =>
|
||||
{
|
||||
const keyword = item.getAttribute('data-keyword');
|
||||
const deleteBtn = item.querySelector('.header-delete-icon');
|
||||
item.addEventListener('click', (e) =>
|
||||
{
|
||||
if (e.target === deleteBtn) return;
|
||||
performSearch(keyword);
|
||||
});
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
const index = parseInt(deleteBtn.getAttribute('data-index'));
|
||||
searchHistory.splice(index, 1);
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addToHistory (keyword)
|
||||
{
|
||||
if (!keyword.trim()) return;
|
||||
searchHistory = searchHistory.filter(item => item !== keyword);
|
||||
searchHistory.unshift(keyword);
|
||||
if (searchHistory.length > 10) searchHistory.pop();
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
const clearHistoryBtn = document.getElementById('clearHistory');
|
||||
if (clearHistoryBtn) {
|
||||
clearHistoryBtn.addEventListener('click', () =>
|
||||
{
|
||||
searchHistory = [];
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
});
|
||||
}
|
||||
|
||||
function performSearch (keyword)
|
||||
{
|
||||
if (keyword.trim()) {
|
||||
addToHistory(keyword);
|
||||
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(keyword);
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
if (searchInput) searchInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const searchBtn = document.querySelector('.header-search-wrapper .header-nav-btn');
|
||||
const searchDropdown = document.getElementById('searchDropdown');
|
||||
const searchInput = document.querySelector('.header-search-input');
|
||||
const searchSubmit = document.querySelector('.header-search-submit');
|
||||
const langDropdown = document.getElementById('langDropdown');
|
||||
const buyDropdown = document.getElementById('buyDropdown');
|
||||
const langCloseBtn = document.querySelector('.header-lang-dropdown-delete-icon');
|
||||
const searchCloseBtn = document.querySelector('.header-search-dropdown-delete-icon');
|
||||
|
||||
// 语言关闭按钮
|
||||
if (langCloseBtn && langCloseBtn) {
|
||||
langCloseBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
langDropdown.classList.remove('show');
|
||||
});
|
||||
}
|
||||
//搜索关闭
|
||||
if (searchCloseBtn && searchCloseBtn) {
|
||||
searchCloseBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
|
||||
e.stopPropagation();
|
||||
searchDropdown.classList.remove('show');
|
||||
});
|
||||
}
|
||||
// 鼠标移入导航项时，关闭购买下拉框
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
navItems.forEach(item =>
|
||||
{
|
||||
item.addEventListener('mouseenter', () =>
|
||||
{
|
||||
if (buyDropdown) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (searchBtn && searchDropdown) {
|
||||
searchBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (langDropdown) langDropdown.classList.remove('show');
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
searchDropdown.classList.toggle('show');
|
||||
if (searchDropdown.classList.contains('show')) {
|
||||
renderHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (searchSubmit) {
|
||||
searchSubmit.addEventListener('click', () =>
|
||||
{
|
||||
performSearch(searchInput.value);
|
||||
});
|
||||
}
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('keypress', (e) =>
|
||||
{
|
||||
if (e.key === 'Enter') {
|
||||
performSearch(searchInput.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const hotProducts = document.querySelectorAll('.header-hot-product-item');
|
||||
hotProducts.forEach(product =>
|
||||
{
|
||||
product.addEventListener('click', () =>
|
||||
{
|
||||
const keyword = product.getAttribute('data-keyword');
|
||||
if (keyword) performSearch(keyword);
|
||||
});
|
||||
});
|
||||
|
||||
const langBtn = document.querySelector('.header-lang-wrapper .header-nav-btn');
|
||||
if (langBtn && langDropdown) {
|
||||
langBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
langDropdown.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
const buyWrapper = document.querySelector('.header-buy-wrapper');
|
||||
if (buyWrapper && buyDropdown) {
|
||||
buyWrapper.addEventListener('click', () =>
|
||||
{
|
||||
console.log('123232323')
|
||||
buyDropdown.classList.add('show');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) =>
|
||||
{
|
||||
if (!e.target.closest('.header-search-wrapper')) {
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (!e.target.closest('.header-lang-wrapper')) {
|
||||
if (langDropdown) langDropdown.classList.remove('show');
|
||||
}
|
||||
if (!e.target.closest('.header-buy-wrapper')) {
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
if (searchDropdown) searchDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
if (langDropdown) langDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
if (buyDropdown) buyDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
|
||||
renderHistory();
|
||||
</script>
|
||||
@@ -323,30 +323,34 @@ a {
|
||||
|
||||
/* 左侧6个分类区块 */
|
||||
.header-dropdown-category {
|
||||
display: flex;
|
||||
/* display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
flex: 1; */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-category-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top:2em;
|
||||
}
|
||||
.header-category-box:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 单个分类区块 */
|
||||
.header-category-block {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-category-block:nth-child(5) {
|
||||
/* .header-category-block:nth-child(5) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-category-block:nth-child(6) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
} */
|
||||
|
||||
.header-category-title {
|
||||
font-size: 1em;
|
||||
|
||||
Reference in New Issue
Block a user