Compare commits
2 Commits
42e261bcc5
...
64ed7bb140
| Author | SHA1 | Date | |
|---|---|---|---|
64ed7bb140
|
|||
|
e084973c52
|
@@ -4,10 +4,18 @@
|
|||||||
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
<div class="max-w-7xl mx-auto px-4 lg:px-0">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class="text-center mb-12">
|
<div class="mb-16 relative">
|
||||||
<h3 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">合作携手，共创价值</h3>
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-blue-200/30 blur-3xl rounded-full -z-10"></div>
|
||||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-4 rounded-full"></div>
|
<div class="text-center">
|
||||||
</div>
|
<h3 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||||
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">匠心筑就 · 信赖桥梁</span>
|
||||||
|
</h3>
|
||||||
|
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-6 rounded-full"></div>
|
||||||
|
<p class="text-gray-500 mt-6 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
合作携手，共创价值
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 items-center">
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 items-center">
|
||||||
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
<div class="p-4 bg-white rounded-lg shadow-md flex flex-col justify-center items-center h-32 transition-all-500 hover:shadow-xl hover:-translate-y-1 space-y-3 border">
|
||||||
<img src="/img/partner-cmcc.webp" alt="中国移动 logo" class="max-h-12 w-auto">
|
<img src="/img/partner-cmcc.webp" alt="中国移动 logo" class="max-h-12 w-auto">
|
||||||
@@ -59,160 +67,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="mt-20 md:mt-28">
|
|
||||||
<div class="max-w-7xl mx-auto">
|
|
||||||
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h3 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">企业荣誉与资质</h3>
|
|
||||||
<div class="w-20 h-1.5 bg-blue-600 mx-auto mt-4 rounded-full"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-10">
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-6 gap-3">
|
|
||||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
|
||||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
|
||||||
<img src="/img/certificate-1.webp" alt="ISO 27001" class="max-w-[80%] max-h-[80%] transition-all duration-500">
|
|
||||||
</div>
|
|
||||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">信息安全管理体系</h4>
|
|
||||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">ISO 27001</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
|
||||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
|
||||||
<img src="/img/certificate-2.webp" alt="ISO 20000" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
|
||||||
</div>
|
|
||||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">信息服务管理体系</h4>
|
|
||||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">ISO 20000</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
|
||||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
|
||||||
<img src="/img/certificate-3.webp" alt="ISO 9001" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
|
||||||
</div>
|
|
||||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">质量管理体系认证</h4>
|
|
||||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">ISO 9001</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
|
||||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
|
||||||
<img src="/img/product-safety-1.webp" alt="ISO 27001" class="max-w-[80%] max-h-[80%] transition-all duration-500">
|
|
||||||
</div>
|
|
||||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">多光谱热成像图像处理分析管理系统</h4>
|
|
||||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">软著</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
|
||||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
|
||||||
<img src="/img/product-safety-2.webp" alt="ISO 20000" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
|
||||||
</div>
|
|
||||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">高性能边缘计算盒运行控制管理系统</h4>
|
|
||||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">软著</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group bg-white p-6 rounded-1 border border-slate-100 shadow-lg hover:shadow-blue-100 hover:border-blue-200 transition-all text-center">
|
|
||||||
<div class="aspect-[4/3] mb-4 bg-slate-50 rounded-2xl overflow-hidden flex items-center justify-center group-hover:bg-white transition-colors">
|
|
||||||
<img src="/img/product-safety-3.webp" alt="ISO 9001" class="max-w-[80%] max-h-[80%] object-contain transition-all duration-500">
|
|
||||||
</div>
|
|
||||||
<h4 class="font-bold text-gray-900 text-lg leading-tight">基于数字孪生的乡村治理平台</h4>
|
|
||||||
<p class="text-sm text-blue-600 mt-2 font-black tracking-widest uppercase">软著</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white rounded-[2.5rem] p-8 md:p-10 border border-slate-100 shadow-xl">
|
|
||||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="w-10 h-10 bg-red-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-red-100">
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
</div>
|
|
||||||
<h4 class="text-2xl font-bold text-gray-900">资信等级认证</h4>
|
|
||||||
</div>
|
|
||||||
<span class="px-4 py-1 bg-red-50 text-red-600 text-sm font-black rounded-full border border-red-100 self-start">权威机构 AAA 级评定</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
|
||||||
<span class="text-2xl group-hover:scale-110 transition-transform">🏆</span>
|
|
||||||
<span class="text-base font-bold text-gray-700">诚信经营示范单位</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
|
||||||
<span class="text-2xl group-hover:scale-110 transition-transform">🤝</span>
|
|
||||||
<span class="text-base font-bold text-gray-700">重合同守信用企业</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
|
||||||
<span class="text-2xl group-hover:scale-110 transition-transform">💎</span>
|
|
||||||
<span class="text-base font-bold text-gray-700">质量服务信用单位</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4 bg-slate-50 p-5 rounded-2xl border border-slate-100 hover:bg-white hover:border-red-200 transition-all group">
|
|
||||||
<span class="text-2xl group-hover:scale-110 transition-transform">📈</span>
|
|
||||||
<span class="text-base font-bold text-gray-700">企业资信等级认证</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-8 md:p-10 rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden">
|
|
||||||
<div class="absolute -right-10 -bottom-10 opacity-[0.03] pointer-events-none">
|
|
||||||
<i class="fa fa-file-code-o text-[240px]"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-3 mb-10">
|
|
||||||
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
|
|
||||||
<i class="fa fa-code"></i>
|
|
||||||
</div>
|
|
||||||
<h4 class="text-2xl font-bold text-gray-900">核心自主知识产权</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-8 gap-x-12 mb-12">
|
|
||||||
<div class="relative pl-5 group">
|
|
||||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
|
||||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">多光谱热成像图像处理分析管理系统</p>
|
|
||||||
</div>
|
|
||||||
<div class="relative pl-5 group">
|
|
||||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
|
||||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">高性能边缘计算盒运行控制管理系统</p>
|
|
||||||
</div>
|
|
||||||
<div class="relative pl-5 group">
|
|
||||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
|
||||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">基于数字孪生的乡村治理平台</p>
|
|
||||||
</div>
|
|
||||||
<div class="relative pl-5 group">
|
|
||||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
|
||||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">企业能耗在线监测端系统</p>
|
|
||||||
</div>
|
|
||||||
<div class="relative pl-5 group">
|
|
||||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
|
||||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">数据中心园区综合管理系统</p>
|
|
||||||
</div>
|
|
||||||
<div class="relative pl-5 group">
|
|
||||||
<div class="absolute left-0 top-1 w-1 h-4 bg-blue-200 group-hover:bg-blue-600 transition-colors rounded-full"></div>
|
|
||||||
<p class="text-base text-gray-600 font-bold group-hover:text-gray-900 transition-colors">硬件处理模块智能配置管理系统</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 pt-10 border-t border-slate-50 flex flex-col md:flex-row md:items-center justify-between gap-8">
|
|
||||||
<div class="flex items-center gap-6">
|
|
||||||
<div class="bg-blue-600 px-8 py-4 rounded-[2rem] text-white shadow-xl shadow-blue-100 flex items-center gap-4">
|
|
||||||
<span class="text-4xl font-black italic">30+</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-lg font-bold text-gray-900">软件著作权与专利</p>
|
|
||||||
<p class="text-sm text-gray-400">持续投入研发，构建核心技术护城河</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-2 max-w-sm">
|
|
||||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 机器视觉</span>
|
|
||||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 边缘计算</span>
|
|
||||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 数字孪生</span>
|
|
||||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 智能监测</span>
|
|
||||||
<span class="px-3 py-1 bg-slate-50 text-slate-500 text-sm font-bold rounded-full border border-slate-100"># 可视化大屏</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -16,6 +16,14 @@ function getNavLinkClass(itemId: string) {
|
|||||||
}
|
}
|
||||||
return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
|
return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getMobileNavLinkClass(itemId: string) {
|
||||||
|
const baseClass = 'flex flex-col items-center justify-center py-2 px-2 min-w-[4.5rem] rounded-xl transition-all duration-300';
|
||||||
|
if (itemId === activeNav) {
|
||||||
|
return `${baseClass} bg-primary text-white`;
|
||||||
|
}
|
||||||
|
return `${baseClass} text-gray-600 hover:bg-primary/10`;
|
||||||
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
@@ -28,7 +36,7 @@ function getNavLinkClass(itemId: string) {
|
|||||||
</head>
|
</head>
|
||||||
<body class="font-inter text-dark bg-slate-50">
|
<body class="font-inter text-dark bg-slate-50">
|
||||||
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-100">
|
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-md shadow-lg border-b border-gray-100">
|
||||||
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-3 flex items-center justify-between">
|
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-3 flex items-center justify-between hidden lg:flex">
|
||||||
<a href="/" class="flex items-center space-x-3">
|
<a href="/" class="flex items-center space-x-3">
|
||||||
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
|
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
|
||||||
</a>
|
</a>
|
||||||
@@ -46,41 +54,109 @@ function getNavLinkClass(itemId: string) {
|
|||||||
<i class="fa fa-phone"></i>
|
<i class="fa fa-phone"></i>
|
||||||
<span>立即咨询</span>
|
<span>立即咨询</span>
|
||||||
</a>
|
</a>
|
||||||
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-3 rounded-xl hover:bg-gray-100 border border-gray-200">
|
|
||||||
<i class="fa fa-bars text-xl"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl pb-4">
|
<!-- Mobile Header - First Row -->
|
||||||
<div class="max-w-7xl mx-auto px-4 pt-4 space-y-2">
|
<div id="mobile-header-row" class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
|
||||||
|
<a href="/" class="flex items-center space-x-2">
|
||||||
|
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-8 w-auto">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Mobile Navigation Row - Separate from header -->
|
||||||
|
<div id="mobile-nav-container" class="lg:hidden fixed left-0 right-0 z-40 bg-gray-50 border-b border-gray-200 transition-all duration-300" style="top: 60px;">
|
||||||
|
<div class="flex items-center justify-between px-2 py-2">
|
||||||
|
<div class="flex items-center gap-1 overflow-x-auto no-scrollbar">
|
||||||
{
|
{
|
||||||
navItems.map(item => (
|
navItems.map(item => (
|
||||||
<a href={item.href} class={`flex items-center gap-4 p-4 rounded-xl transition-all ${item.id === activeNav ? 'bg-primary/10 border-2 border-primary' : 'hover:bg-gray-50 border-2 border-transparent'}`}>
|
<a href={item.href} class={getMobileNavLinkClass(item.id)}>
|
||||||
<div class={`w-12 h-12 rounded-xl flex items-center justify-center ${item.id === activeNav ? 'bg-primary' : 'bg-gray-100'}`}>
|
<i class={`fa ${item.icon} text-lg mb-1`}></i>
|
||||||
<i class={`fa ${item.icon} text-xl ${item.id === activeNav ? 'text-white' : 'text-gray-600'}`}></i>
|
<span class="text-xs font-medium whitespace-nowrap">{item.label}</span>
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class={`text-base font-bold block ${item.id === activeNav ? 'text-primary' : 'text-gray-800'}`}>{item.label}</span>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
item.id === activeNav && <i class="fa fa-check-circle text-primary text-xl"></i>
|
|
||||||
}
|
|
||||||
</a>
|
</a>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
<a href="/#contact-info" class="flex items-center gap-4 p-4 rounded-xl bg-primary text-white mt-4">
|
|
||||||
<i class="fa fa-phone text-xl"></i>
|
|
||||||
<span class="text-base font-bold">立即咨询</span>
|
|
||||||
<i class="fa fa-arrow-right ml-auto"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a href="/#contact-info" class="flex items-center justify-center py-2 px-3 bg-primary text-white rounded-xl min-w-[3rem] ml-1">
|
||||||
|
<i class="fa fa-phone text-lg"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
|
||||||
|
<!-- Spacer for mobile to prevent content overlap (header 3.5rem + nav 2.5rem) -->
|
||||||
|
<div class="lg:hidden h-[6rem] transition-all duration-300"></div>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
<Footer />
|
<Footer />
|
||||||
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
|
|
||||||
|
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 z-50">
|
||||||
<i class="fa fa-arrow-up"></i>
|
<i class="fa fa-arrow-up"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<script is:inline src="/js/script.js"></script>
|
<script is:inline src="/js/script.js"></script>
|
||||||
|
<script>
|
||||||
|
// Mobile navigation scroll behavior
|
||||||
|
(function() {
|
||||||
|
var navContainer = document.getElementById('mobile-nav-container');
|
||||||
|
var headerRow = document.getElementById('mobile-header-row');
|
||||||
|
var spacer = document.querySelector('.lg\\:hidden.h-\\[6rem\\]');
|
||||||
|
var lastScrollTop = 0;
|
||||||
|
var scrollThreshold = 50;
|
||||||
|
|
||||||
|
// Set correct top position based on actual header height
|
||||||
|
function updateNavPosition() {
|
||||||
|
if (headerRow && navContainer && window.innerWidth < 1024) {
|
||||||
|
var headerHeight = headerRow.getBoundingClientRect().height;
|
||||||
|
navContainer.style.top = headerHeight + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update on load and resize
|
||||||
|
updateNavPosition();
|
||||||
|
window.addEventListener('resize', updateNavPosition);
|
||||||
|
window.addEventListener('load', updateNavPosition);
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function() {
|
||||||
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
|
||||||
|
// Only apply on mobile
|
||||||
|
if (window.innerWidth >= 1024) return;
|
||||||
|
|
||||||
|
if (scrollTop > lastScrollTop && scrollTop > scrollThreshold) {
|
||||||
|
// Scrolling down - hide second row
|
||||||
|
if (navContainer) {
|
||||||
|
navContainer.style.transform = 'translateY(-100%)';
|
||||||
|
navContainer.style.opacity = '0';
|
||||||
|
}
|
||||||
|
// Reduce spacer height
|
||||||
|
if (spacer) {
|
||||||
|
(spacer as HTMLElement).style.height = '3.5rem';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Scrolling up - show second row
|
||||||
|
if (navContainer) {
|
||||||
|
navContainer.style.transform = 'translateY(0)';
|
||||||
|
navContainer.style.opacity = '1';
|
||||||
|
}
|
||||||
|
// Restore spacer height
|
||||||
|
if (spacer) {
|
||||||
|
(spacer as HTMLElement).style.height = '6rem';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollTop = scrollTop;
|
||||||
|
}, { passive: true });
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user