beifan/company-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增危险化学品、烟花爆竹、非煤矿山模块

Browse Source
This commit is contained in:
Frudrax Cheng
2026-05-14 10:37:03 +08:00
parent 8b6f9f56b2
commit 7abfc36ae3
30 changed files with 1189 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+20 -11
View File
@@ -30,6 +30,9 @@ const navItems: NavItem[] = [
{ id: 'kitchen', label: '明厨亮灶', href: '/kitchen', icon: 'fa-cutlery' },
{ id: 'education', label: '智慧学校', href: '/education', icon: 'fa-graduation-cap' },
{ id: 'construction', label: '智慧工地', href: '/construction', icon: 'fa-industry' },
{ id: 'chemical', label: '危险化学品', href: '/chemical', icon: 'fa-flask' },
{ id: 'fireworks', label: '烟花爆竹', href: '/fireworks', icon: 'fa-asterisk' },
{ id: 'mining', label: '非煤矿山', href: '/mining', icon: 'fa-cubes' },
]
},
{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
@@ -84,17 +87,23 @@ function getMobileNavLinkClass(item: NavItem) {
</button>
<div class="absolute top-full left-1/2 -translate-x-1/2 pt-2 opacity-0 invisible transition-all duration-200 z-50"
data-dropdown-panel role="menu">
<div class="bg-white rounded-xl shadow-xl border border-gray-100 p-3">
<div class="flex gap-2">
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-3 w-[600px]">
<div class="grid grid-cols-3 gap-2">
{item.children.map(child => (
<a href={child.href} role="menuitem"
class={`flex flex-col items-center gap-2 px-5 py-3 rounded-lg transition-all min-w-[120px] ${
class={`group flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all ${
child.id === activeNav
? 'bg-primary text-white'
: 'text-gray-700 hover:bg-primary/10 hover:text-primary'
}`}>
<i class={`fa ${child.icon} text-xl`}></i>
<span class="text-sm font-medium whitespace-nowrap">{child.label}</span>
<span class={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${
child.id === activeNav
? 'bg-white/20 text-white'
: 'bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white'
}`}>
<i class={`fa ${child.icon} text-base`}></i>
</span>
<span class="text-sm font-semibold whitespace-nowrap">{child.label}</span>
</a>
))}
</div>
@@ -154,16 +163,16 @@ function getMobileNavLinkClass(item: NavItem) {
<div id="mobile-product-panel"
class="lg:hidden fixed left-0 right-0 z-30 bg-white shadow-xl border-b border-gray-200 transform -translate-y-full opacity-0 pointer-events-none transition-all duration-300"
style="top: 108px;" role="menu">
<div class="max-w-md mx-auto px-2 py-3 grid grid-cols-3 gap-1">
<div class="max-w-md mx-auto px-3 py-3 grid grid-cols-3 gap-2">
{navItems.find(item => item.children)?.children?.map(child => (
<a href={child.href} role="menuitem"
class={`flex flex-col items-center gap-1 py-2 px-1 rounded-lg transition-colors ${
class={`flex flex-col items-center gap-1.5 py-2.5 px-1 rounded-xl transition-colors ${
child.id === activeNav
? 'bg-primary/10 text-primary'
: 'hover:bg-primary/10'
? 'bg-primary text-white'
: 'bg-primary/5 text-gray-700 hover:bg-primary/10'
}`}>
<i class={`fa ${child.icon} text-lg ${child.id === activeNav ? 'text-primary' : 'text-primary'}`}></i>
<span class={`text-[10px] font-medium leading-tight text-center ${child.id === activeNav ? 'text-primary' : 'text-gray-700'}`}>{child.label}</span>
<i class={`fa ${child.icon} text-lg ${child.id === activeNav ? 'text-white' : 'text-primary'}`}></i>
<span class={`text-[11px] font-semibold leading-tight text-center whitespace-nowrap ${child.id === activeNav ? 'text-white' : 'text-gray-700'}`}>{child.label}</span>
</a>
))}
</div>