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

修改移动端样式
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
jsasg
2026-04-15 16:37:32 +08:00
parent d6ce8aa2be
commit 1ed900d2b5
10 changed files with 1012 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
app/index/view/mobile/public/header.html
View File

@@ -23,7 +23,7 @@
<img src="__IMAGES__/header/b.png" class="menu-item-img">
</div>
{if condition="!empty($header_categorys)"}
<div class="sub-menu">
<div class="sub-menu" style="overflow-y: auto;">
{volist name="header_categorys" id="vo" key="idx"}
<div class="sub-item"><a href="{:url('product/classify', ['id' => $vo.id])}" target="_self">{$vo.name}</a></div>
{/volist}
@@ -43,9 +43,9 @@
<img src="__IMAGES__/header/b.png" class="menu-item-img">
</div>
{if condition="!empty($nav.children)"}
<div class="sub-menu">
<div class="sub-menu" style="border: none;" >
{volist name="nav.children" id="child"}
<div class="sub-item no-padding">
<div class="sub-item no-padding ">
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}" class="sub-item-card">
<img src="{$child.image}" alt="" class="sub-item-card-img">
<div class="sub-item-card-title">{$child.name}</div>
@@ -67,14 +67,18 @@
{if condition="!empty($header_mall_entrance)"}
<div class="modal-items-list">
{volist name="header_mall_entrance" id="ma"}
{if condition="!empty($ma.link) && empty($ma.hover_image)"}
{if condition="!empty($ma.link)"}
<a class="modal-item" href="{$ma.link}" target="_self">
<img src="{$ma.image}" alt="" class="modal-item-img">
<div class="modal-item-title">{$ma.name}</div>
</a>
{else/}
<!--悬浮图-->
<div class="modal-item">
<div class="modal-item" data-link="{$ma.link}" style="cursor: pointer;">
<img src="{$ma.image}" alt="" class="modal-item-img">
<div class="modal-item-title">{$ma.name}</div>
</div>
<div class="modal-item" style="display:none">
<img src="{$ma.hover_image}" alt="" class="modal-item-img">
</div>
{/if}
@@ -133,10 +137,80 @@
const navBtn1 = document.querySelector('.nav-img1');
const dropdownMenu = document.querySelector('.nav-dropdown-menu');
// 禁止body滚动
function disableBodyScroll() {
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;
document.body.style.width = '100%';
}
// 恢复body滚动
function enableBodyScroll() {
const scrollY = document.body.style.top;
document.body.style.overflow = '';
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
if (scrollY) {
window.scrollTo(0, parseInt(scrollY || '0') * -1);
}
}
// 复位所有子菜单（关闭并重置滚动位置）
function resetAllSubMenus() {
let hasOpenMenu = false;
document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
if (subMenu.classList.contains('show')) {
hasOpenMenu = true;
}
subMenu.classList.remove('show');
// 重置滚动位置到顶部
subMenu.scrollTop = 0;
});
document.querySelectorAll('.has-child').forEach(function(item) {
item.classList.remove('open');
});
// 如果没有打开的菜单，恢复body滚动
if (!hasOpenMenu) {
enableBodyScroll();
}
}
// 关闭单个子菜单并重置滚动位置
function closeSubMenu(subMenu, menuItem) {
if (subMenu) {
subMenu.classList.remove('show');
subMenu.scrollTop = 0; // 重置滚动位置
}
if (menuItem) {
menuItem.classList.remove('open');
}
// 检查是否还有其他打开的菜单
const anyOpen = document.querySelector('.has-child .sub-menu.show');
if (!anyOpen) {
enableBodyScroll();
}
}
// 打开子菜单
function openSubMenu(subMenu, menuItem) {
// 禁止body滚动
disableBodyScroll();
subMenu.classList.add('show');
menuItem.classList.add('open');
// 确保新打开的菜单滚动位置在顶部
subMenu.scrollTop = 0;
}
// 打开菜单
navBtn.addEventListener('click', function (e)
{
e.stopPropagation();
// 禁止body滚动
disableBodyScroll();
// 关闭所有弹窗
closeAllModals();
dropdownMenu.classList.add('show');
@@ -144,16 +218,19 @@
navBtn1.style.display = 'block';
});
// 关闭菜单
// 关闭菜单 - 复位所有子菜单
navBtn1.addEventListener('click', function (e)
{
e.stopPropagation();
dropdownMenu.classList.remove('show');
navBtn.style.display = 'block';
navBtn1.style.display = 'none';
// 复位所有子菜单到初始状态
resetAllSubMenus();
});
// 处理所有菜单项
// ====================== 处理所有菜单项（同一时间只展开一个） ======================
document.querySelectorAll('.menu-item').forEach(function (item)
{
const isHasChild = item.classList.contains('has-child');
@@ -161,11 +238,33 @@
const box = item.querySelector('.menu-item-box');
if (isHasChild && subMenu) {
box.addEventListener('click', function (e)
// 移除原有事件，重新绑定（确保只有一个展开）
const newBox = box.cloneNode(true);
box.parentNode.replaceChild(newBox, box);
newBox.addEventListener('click', function (e)
{
e.stopPropagation();
subMenu.classList.toggle('show');
item.classList.toggle('open');
// 检查当前是否已展开
const isOpen = subMenu.classList.contains('show');
// 关闭所有其他子菜单并重置滚动位置
document.querySelectorAll('.has-child').forEach(function (otherItem) {
const otherSubMenu = otherItem.querySelector('.sub-menu');
if (otherSubMenu && otherSubMenu !== subMenu) {
otherSubMenu.classList.remove('show');
otherSubMenu.scrollTop = 0; // 重置滚动位置
otherItem.classList.remove('open');
}
});
// 切换当前菜单
if (!isOpen) {
openSubMenu(subMenu, item);
} else {
closeSubMenu(subMenu, item);
}
});
} else {
const link = item.getAttribute('data-link');
@@ -221,6 +320,8 @@
navBtn.style.display = 'block';
navBtn1.style.display = 'none';
closeAllModals();
// 复位所有子菜单
resetAllSubMenus();
cartModal.classList.add('show');
});
@@ -249,6 +350,8 @@
navBtn.style.display = 'block';
navBtn1.style.display = 'none';
closeAllModals();
// 复位所有子菜单
resetAllSubMenus();
langModal.classList.add('show');
});
@@ -410,6 +513,8 @@
navBtn.style.display = 'block';
navBtn1.style.display = 'none';
closeAllModals();
// 复位所有子菜单
resetAllSubMenus();
renderSearchHistory();
searchModal.classList.add('show');
setTimeout(() =>
@@ -449,7 +554,8 @@
}
}
}12
}
searchSubmit.addEventListener('click', function (e)
{
e.stopPropagation();
@@ -464,5 +570,189 @@
doSearch(searchInput.value);
}
});
// ====================== 添加：点击空白区域关闭所有子菜单 ======================
document.addEventListener('click', function(e) {
// 如果点击的不是菜单项内部，关闭所有子菜单
if (!e.target.closest('.menu-item')) {
resetAllSubMenus();
}
});
// ====================== 动态计算子菜单高度并添加滚动功能（产品列表除外） ======================
// 判断是否为产品列表（第一个菜单项）
function isProductList(menuItem) {
const firstMenuItem = document.querySelector('.menu-item');
return menuItem === firstMenuItem;
}
// 设置子菜单的最大高度
function setSubMenuHeight(subMenu, menuItem) {
if (!subMenu || !menuItem) return;
// 产品列表不处理
if (isProductList(menuItem)) {
subMenu.style.maxHeight = '';
subMenu.style.overflowY = '';
return;
}
// 获取菜单位置信息
const rect = menuItem.getBoundingClientRect();
const bottomSpace = 50; // 底部留白空间
// 计算可用高度 = 视口高度 - 菜单顶部距离 - 底部留白
let availableHeight = window.innerHeight - rect.top - bottomSpace;
// 限制最小高度
if (availableHeight < 200) {
availableHeight = 200;
}
// 设置子菜单的最大高度和滚动
subMenu.style.maxHeight = availableHeight + 'px';
subMenu.style.overflowY = 'auto';
subMenu.style.overflowX = 'hidden';
subMenu.style.WebkitOverflowScrolling = 'touch';
}
// 为所有有子菜单的导航项（产品列表除外）绑定事件
const allMenuItems = document.querySelectorAll('.has-child');
allMenuItems.forEach(function(menuItem) {
const subMenu = menuItem.querySelector('.sub-menu');
const box = menuItem.querySelector('.menu-item-box');
if (!subMenu || !box) return;
// 产品列表不处理滚动功能
if (isProductList(menuItem)) {
return;
}
// 添加点击事件处理高度
box.addEventListener('click', function(e) {
// 如果子菜单即将打开，计算高度
if (!subMenu.classList.contains('show')) {
// 延迟一帧，确保DOM已更新
setTimeout(function() {
setSubMenuHeight(subMenu, menuItem);
// 确保滚动位置在顶部
subMenu.scrollTop = 0;
}, 0);
}
});
});
// 窗口大小改变时，重新计算已打开的子菜单高度
window.addEventListener('resize', function() {
const openSubMenus = document.querySelectorAll('.has-child .sub-menu.show');
openSubMenus.forEach(function(subMenu) {
const menuItem = subMenu.closest('.has-child');
if (menuItem && !isProductList(menuItem)) {
setSubMenuHeight(subMenu, menuItem);
}
});
});
// 监听菜单打开状态变化（使用 MutationObserver 确保高度正确设置）
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
const target = mutation.target;
if (target.classList && target.classList.contains('sub-menu') && target.classList.contains('show')) {
const menuItem = target.closest('.has-child');
if (menuItem && !isProductList(menuItem)) {
setSubMenuHeight(target, menuItem);
// 确保滚动位置在顶部
target.scrollTop = 0;
}
}
}
});
});
// 观察所有子菜单的class变化
document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
observer.observe(subMenu, { attributes: true });
});
// ====================== 购物车弹窗悬浮图功能 ======================
// 处理购物车弹窗中的图片悬浮效果
function initCartModalHover() {
const modalItems = document.querySelectorAll('#cartModal .modal-item');
modalItems.forEach(function(item) {
// 查找当前item中是否有悬浮图（隐藏的那个）
const defaultImg = item.querySelector('.modal-item-img');
const hiddenItem = item.nextElementSibling;
let hoverImg = null;
// 检查下一个元素是否是隐藏的悬浮图容器
if (hiddenItem && hiddenItem.classList && hiddenItem.classList.contains('modal-item') && hiddenItem.style.display === 'none') {
hoverImg = hiddenItem.querySelector('.modal-item-img');
}
// 如果有悬浮图
if (hoverImg && defaultImg) {
const originalSrc = defaultImg.src;
const hoverSrc = hoverImg.src;
const link = item.getAttribute('data-link');
// 移除原有的href，因为需要悬浮图效果
item.style.cursor = 'pointer';
// 鼠标移入：显示悬浮图
item.addEventListener('mouseenter', function(e) {
e.stopPropagation();
defaultImg.src = hoverSrc;
});
// 鼠标移出：恢复普通图
item.addEventListener('mouseleave', function(e) {
e.stopPropagation();
defaultImg.src = originalSrc;
});
// 点击事件：如果有链接就跳转
item.addEventListener('click', function(e) {
e.stopPropagation();
if (link && link !== '#') {
window.location.href = link;
}
});
} else {
// 没有悬浮图，保持原有链接
const link = item.getAttribute('href') || item.getAttribute('data-link');
if (link && link !== '#') {
item.addEventListener('click', function(e) {
e.stopPropagation();
window.location.href = link;
});
}
}
});
}
// 在购物车弹窗打开时初始化悬浮图功能
const cartModalObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
if (cartModal.classList.contains('show')) {
setTimeout(function() {
initCartModalHover();
}, 50);
}
}
});
});
if (cartModal) {
cartModalObserver.observe(cartModal, { attributes: true });
// 如果弹窗默认是打开的，也初始化一次
if (cartModal.classList.contains('show')) {
initCartModalHover();
}
}
});
</script>