forked from 77media/video-flow
调整H5首页顶部导航栏布局
This commit is contained in:
parent
6d3adc9bae
commit
b011a784c3
@ -261,8 +261,17 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
|
|||||||
left: (pathname === "/" || !isDesktop) ? "0" : (collapsed ? "2.5rem" : "16rem")
|
left: (pathname === "/" || !isDesktop) ? "0" : (collapsed ? "2.5rem" : "16rem")
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="h-full flex items-center justify-between px-4">
|
<div className="h-full flex items-center justify-between pr-4 md:px-4">
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center md:space-x-4">
|
||||||
|
{pathname === "/" && (
|
||||||
|
<button
|
||||||
|
data-alt="mobile-menu-toggle"
|
||||||
|
className="md:hidden text-white/90 p-[0.8rem]"
|
||||||
|
onClick={() => window.dispatchEvent(new CustomEvent('home-menu-toggle'))}
|
||||||
|
>
|
||||||
|
☰
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<div
|
<div
|
||||||
className={`flex items-center cursor-pointer space-x-1 link-logo roll event-on`}
|
className={`flex items-center cursor-pointer space-x-1 link-logo roll event-on`}
|
||||||
onClick={() => router.push("/")}
|
onClick={() => router.push("/")}
|
||||||
|
|||||||
@ -217,6 +217,11 @@ export function HomePage2() {
|
|||||||
|
|
||||||
const NavBar = () => {
|
const NavBar = () => {
|
||||||
if (homeTabs.length === 0) return null;
|
if (homeTabs.length === 0) return null;
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = () => setMenuOpen((v) => !v);
|
||||||
|
window.addEventListener('home-menu-toggle' as any, handler as any);
|
||||||
|
return () => window.removeEventListener('home-menu-toggle' as any, handler as any);
|
||||||
|
}, []);
|
||||||
return (
|
return (
|
||||||
<div data-alt="home-navbar" className="fixed h-16 top-0 left-0 right-0 z-50">
|
<div data-alt="home-navbar" className="fixed h-16 top-0 left-0 right-0 z-50">
|
||||||
<div className="mx-auto h-full">
|
<div className="mx-auto h-full">
|
||||||
@ -234,14 +239,8 @@ export function HomePage2() {
|
|||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{/* 移动端开关 */}
|
{/* 移动端开关移至 TopBar,保留占位对齐 */}
|
||||||
<button
|
<span className="md:hidden" data-alt="mobile-menu-toggle-placeholder"></span>
|
||||||
data-alt="mobile-menu-toggle"
|
|
||||||
className="md:hidden text-white/90 px-3 py-1 border border-white/20 rounded"
|
|
||||||
onClick={() => setMenuOpen((v) => !v)}
|
|
||||||
>
|
|
||||||
☰
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
{/* 移动端下拉(仅三个项) */}
|
{/* 移动端下拉(仅三个项) */}
|
||||||
{menuOpen && (
|
{menuOpen && (
|
||||||
@ -1396,9 +1395,9 @@ function HomeModule5() {
|
|||||||
|
|
||||||
{/* 主要价格卡片 */}
|
{/* 主要价格卡片 */}
|
||||||
<div
|
<div
|
||||||
className="w-full max-w-[70%] mx-auto px-4
|
className="w-full max-w-[88%] mx-auto px-4
|
||||||
/* 移动端 - 单列布局 */
|
/* 移动端 - 单列布局 */
|
||||||
grid grid-cols-1 gap-4
|
grid grid-cols-1 gap-2
|
||||||
/* 平板 - 双列布局 */
|
/* 平板 - 双列布局 */
|
||||||
sm:grid-cols-2 sm:gap-6 sm:px-6
|
sm:grid-cols-2 sm:gap-6 sm:px-6
|
||||||
/* 桌面端 - 三列布局 */
|
/* 桌面端 - 三列布局 */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user