diff --git a/common/common.css b/common/common.css index 52ffed4..0f5d4a8 100644 --- a/common/common.css +++ b/common/common.css @@ -1032,6 +1032,209 @@ } } +/* 汉堡菜单按钮 - 默认隐藏 */ +.mobile-menu-toggle { + display: none; + flex-direction: column; + justify-content: space-between; + width: 28px; + height: 22px; + cursor: pointer; + margin-left: 16px; + z-index: 1001; + position: relative; +} + +.mobile-menu-toggle span { + display: block; + width: 100%; + height: 3px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border-radius: 2px; + transition: all 0.3s ease; +} + +.mobile-menu-toggle.active span:nth-child(1) { + transform: translateY(9.5px) rotate(45deg); +} + +.mobile-menu-toggle.active span:nth-child(2) { + opacity: 0; +} + +.mobile-menu-toggle.active span:nth-child(3) { + transform: translateY(-9.5px) rotate(-45deg); +} + +/* 移动端侧边导航栏 */ +.mobile-sidebar { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 9999; + pointer-events: none; +} + +.mobile-sidebar.active { + pointer-events: auto; +} + +.mobile-sidebar-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + opacity: 0; + transition: opacity 0.3s ease; +} + +.mobile-sidebar.active .mobile-sidebar-overlay { + opacity: 1; +} + +.mobile-sidebar-content { + position: absolute; + top: 0; + right: 0; + width: 280px; + height: 100%; + background: linear-gradient(180deg, #0F172A 0%, #020617 100%); + box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3); + transform: translateX(100%); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.mobile-sidebar.active .mobile-sidebar-content { + transform: translateX(0); +} + +.mobile-sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + border-bottom: 1px solid rgba(148, 163, 184, 0.15); +} + +.mobile-sidebar-logo img { + height: 28px; + width: auto; +} + +.mobile-sidebar-close { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 6px; + transition: all 0.3s ease; +} + +.mobile-sidebar-close span { + font-size: 24px; + color: #94A3B8; + transition: color 0.3s ease; +} + +.mobile-sidebar-close:hover { + background: rgba(56, 189, 248, 0.1); +} + +.mobile-sidebar-close:hover span { + color: #38BDF8; +} + +.mobile-sidebar-body { + flex: 1; + padding: 20px; + overflow-y: auto; +} + +.mobile-nav-item { + margin-bottom: 8px; +} + +.mobile-nav-link { + display: block; + padding: 14px 16px; + color: #E5E7EB; + font-size: 15px; + font-weight: 500; + border-radius: 8px; + transition: all 0.3s ease; + cursor: pointer; + text-decoration: none; +} + +.mobile-nav-link:hover { + background: rgba(56, 189, 248, 0.1); + color: #38BDF8; + transform: translateX(4px); +} + +.mobile-nav-divider { + height: 1px; + background: rgba(148, 163, 184, 0.15); + margin: 16px 0; +} + +.mobile-nav-btn { + display: inline-block; + padding: 12px 24px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + color: #ffffff; + font-size: 14px; + font-weight: 600; + border-radius: 8px; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; + margin: 8px 16px; +} + +.mobile-nav-btn:hover { + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4); + transform: translateY(-2px); +} + +.mobile-user-info { + display: flex; + align-items: center; + padding: 16px; + background: rgba(15, 23, 42, 0.8); + border-radius: 8px; + margin-bottom: 16px; +} + +.mobile-user-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 18px; + margin-right: 12px; +} + +.mobile-user-name { + color: #F9FAFB; + font-size: 16px; + font-weight: 600; +} + /* 移动端导航栏和页脚优化 */ @media screen and (max-width: 991px) { /* 导航栏 */ @@ -1096,6 +1299,21 @@ margin-right: 10px; } + /* 移动端显示汉堡菜单 */ + .mobile-menu-toggle { + display: flex; + } + + /* 移动端显示侧边栏 */ + .mobile-sidebar { + display: block; + } + + /* 移动端隐藏桌面导航链接 */ + .nav-desktop-link { + display: none !important; + } + .nav-menu .nav-item { padding: 0 8px; font-size: 13px; diff --git a/css/index.css b/css/index.css index 32b7993..088e2fb 100644 --- a/css/index.css +++ b/css/index.css @@ -2543,6 +2543,15 @@ html { font-size: 12px !important; } + /* 调整进度条位置,避免和按钮重合 */ + .banner-cont .swiper-pagination { + bottom: 40px !important; + } + + .banner-cont .swiper-pagination-bullet { + width: 45px !important; + } + /* ===== Banner 快速入口 - 紧凑布局 ===== */ .banner .banner-s { margin-top: -40px; @@ -2551,11 +2560,14 @@ html { .banner-s .banner-list { gap: 8px; + display: grid; + grid-template-columns: repeat(2, 1fr); /* 一行两个 */ } .banner-s .banner-list .banner-item { padding: 12px 16px !important; gap: 10px; + flex: unset; /* 移除 flex 属性,改用 grid */ } .banner-s .banner-list .banner-item .banner-item-icon { diff --git a/js/tools.js b/js/tools.js index 3181c8d..beb61e5 100644 --- a/js/tools.js +++ b/js/tools.js @@ -1,4 +1,161 @@ $(function () { + // 移动端侧边导航栏控制 + const mobileMenuToggle = document.getElementById('mobileMenuToggle'); + const mobileSidebar = document.getElementById('mobileSidebar'); + const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay'); + const mobileSidebarClose = document.getElementById('mobileSidebarClose'); + + // 打开侧边栏 + if (mobileMenuToggle) { + mobileMenuToggle.addEventListener('click', function() { + mobileSidebar.classList.add('active'); + mobileMenuToggle.classList.add('active'); + document.body.style.overflow = 'hidden'; // 禁止页面滚动 + }); + } + + // 关闭侧边栏 + function closeMobileSidebar() { + if (mobileSidebar) { + mobileSidebar.classList.remove('active'); + } + if (mobileMenuToggle) { + mobileMenuToggle.classList.remove('active'); + } + document.body.style.overflow = ''; // 恢复页面滚动 + } + + // 点击遮罩层关闭 + if (mobileSidebarOverlay) { + mobileSidebarOverlay.addEventListener('click', closeMobileSidebar); + } + + // 点击关闭按钮关闭 + if (mobileSidebarClose) { + mobileSidebarClose.addEventListener('click', closeMobileSidebar); + } + + // 点击侧边栏内的链接后关闭(可选) + document.querySelectorAll('.mobile-nav-link').forEach(function(link) { + link.addEventListener('click', function(e) { + // 如果是 a 标签且不是 javascript:; 则关闭侧边栏 + if (link.tagName === 'A' && link.getAttribute('href') !== 'javascript:;') { + closeMobileSidebar(); + } + }); + }); + + // 同步桌面端和移动端的登录状态 + function syncLoginStatus() { + const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login'); + const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in'); + const mobileNoLogin = document.querySelector('.mobile-no-login'); + const mobileLoginIn = document.querySelector('.mobile-login-in'); + + // 检查桌面端登录状态 + if (desktopNoLogin && desktopNoLogin.style.display !== 'none') { + // 未登录 + if (mobileNoLogin) mobileNoLogin.style.display = 'block'; + if (mobileLoginIn) mobileLoginIn.style.display = 'none'; + } else if (desktopLoginIn && desktopLoginIn.style.display !== 'none') { + // 已登录 + if (mobileNoLogin) mobileNoLogin.style.display = 'none'; + if (mobileLoginIn) mobileLoginIn.style.display = 'block'; + + // 同步用户信息 + const desktopUsername = document.getElementById('username'); + const desktopHeadImg = document.getElementById('headImg'); + const mobileUsername = document.getElementById('mobileUsername'); + const mobileHeadImg = document.getElementById('mobileHeadImg'); + + if (desktopUsername && mobileUsername) { + mobileUsername.textContent = desktopUsername.textContent; + } + if (desktopHeadImg && mobileHeadImg) { + mobileHeadImg.textContent = desktopHeadImg.textContent; + } + } + } + + // 移动端登录按钮事件绑定 + const mobileLoginBtn = document.getElementById('mobileLoginBtn'); + const desktopLoginBtn = document.getElementById('loginBtn'); + if (mobileLoginBtn && desktopLoginBtn) { + mobileLoginBtn.addEventListener('click', function() { + desktopLoginBtn.click(); + closeMobileSidebar(); + }); + } + + // 移动端注册按钮事件绑定 + const mobileRegistBtn = document.getElementById('mobileRegistBtn'); + const desktopRegistBtn = document.getElementById('registBtn'); + if (mobileRegistBtn && desktopRegistBtn) { + mobileRegistBtn.addEventListener('click', function() { + desktopRegistBtn.click(); + closeMobileSidebar(); + }); + } + + // 移动端账户信息按钮事件绑定 + const mobileAccountBtn = document.getElementById('mobileAccountBtn'); + const desktopAccountBtn = document.getElementById('accountBtn'); + if (mobileAccountBtn && desktopAccountBtn) { + mobileAccountBtn.addEventListener('click', function() { + desktopAccountBtn.click(); + closeMobileSidebar(); + }); + } + + // 移动端未付款订单按钮事件绑定 + const mobileFinanceBtn = document.getElementById('mobileFinanceBtn'); + const desktopFinanceBtn = document.getElementById('financeBtn'); + if (mobileFinanceBtn && desktopFinanceBtn) { + mobileFinanceBtn.addEventListener('click', function() { + desktopFinanceBtn.click(); + closeMobileSidebar(); + }); + } + + // 移动端我的工单按钮事件绑定 + const mobileTicketBtn = document.getElementById('mobileTicketBtn'); + const desktopTicketBtn = document.getElementById('ticketBtn'); + if (mobileTicketBtn && desktopTicketBtn) { + mobileTicketBtn.addEventListener('click', function() { + desktopTicketBtn.click(); + closeMobileSidebar(); + }); + } + + // 移动端退出按钮事件绑定 + const mobileLogout = document.getElementById('mobileLogout'); + const desktopLogout = document.getElementById('logout'); + if (mobileLogout && desktopLogout) { + mobileLogout.addEventListener('click', function() { + desktopLogout.click(); + closeMobileSidebar(); + }); + } + + // 初始化时同步登录状态 + setTimeout(syncLoginStatus, 100); + + // 监听登录状态变化(使用 MutationObserver) + const observeLoginStatus = function() { + const desktopNoLogin = document.querySelector('.nav-desktop-link.no-login'); + const desktopLoginIn = document.querySelector('.nav-desktop-link.login-in'); + + if (desktopNoLogin) { + const observer = new MutationObserver(syncLoginStatus); + observer.observe(desktopNoLogin, { attributes: true, attributeFilter: ['style'] }); + } + if (desktopLoginIn) { + const observer = new MutationObserver(syncLoginStatus); + observer.observe(desktopLoginIn, { attributes: true, attributeFilter: ['style'] }); + } + }; + observeLoginStatus(); + // 产品详情页的图片预览轮播(仅在存在时初始化) if ($('.gallery-thumbs').length > 0 && $('.gallery-top').length > 0) { var galleryThumbs = new Swiper('.gallery-thumbs', { diff --git a/public/header.html b/public/header.html index 2e9d5ce..c64e36e 100644 --- a/public/header.html +++ b/public/header.html @@ -29,16 +29,16 @@
- + +