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-22 09:30:44 +08:00
parent 718d5e3b54
commit e8d80bfefd
12 changed files with 377 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+29 -25
View File
@@ -9,6 +9,7 @@ interface NavChild {
label: string;
href: string;
icon: string;
desc?: string;
}
interface NavItem {
@@ -24,15 +25,16 @@ const navItems: NavItem[] = [
{
id: 'products', label: '产品中心', href: '/qazk', icon: 'fa-cubes',
children: [
{ id: 'qazk', label: '工贸企业', href: '/qazk', icon: 'fa-cogs' },
{ id: 'property', label: '物业楼宇', href: '/property', icon: 'fa-building-o' },
{ id: 'elderly', label: '智慧养老', href: '/elderly', icon: 'fa-heartbeat' },
{ 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: 'qazk', label: '工贸企业', href: '/qazk', icon: 'fa-cogs', desc: 'AI + 物联全场景安全管理' },
{ id: 'property', label: '物业楼宇', href: '/property', icon: 'fa-building-o', desc: '智慧社区全域安防一体化' },
{ id: 'elderly', label: '智慧养老', href: '/elderly', icon: 'fa-heartbeat', desc: '适老化主动健康守护体系' },
{ id: 'kitchen', label: '明厨亮灶', href: '/kitchen', icon: 'fa-cutlery', desc: 'AI 视觉后厨食安管控' },
{ id: 'education', label: '智慧学校', href: '/education', icon: 'fa-graduation-cap', desc: '平安校园数智化治理' },
{ id: 'logistics', label: '仓储物流', href: '/logistics', icon: 'fa-truck', desc: '仓配园区全闭环安全管控' },
{ id: 'construction', label: '智慧工地', href: '/construction', icon: 'fa-industry', desc: '工地七牌一图数智管控' },
{ id: 'chemical', label: '危险化学品', href: '/chemical', icon: 'fa-flask', desc: '五防协同危化智能管控' },
{ id: 'fireworks', label: '烟花爆竹', href: '/fireworks', icon: 'fa-asterisk', desc: '防爆 AI 火工品全链路溯源' },
{ id: 'mining', label: '非煤矿山', href: '/mining', icon: 'fa-cubes', desc: '矿山防爆物联灾害预警' },
]
},
{ id: 'customization', label: '本地化定制', href: '/customization', icon: 'fa-wrench' },
@@ -87,23 +89,30 @@ function getMobileNavLinkClass(item: NavItem) {
</button>
<div class="absolute top-full left-1/2 -translate-x-1/2 pt-3 opacity-0 invisible transition-all duration-200 z-50"
data-dropdown-panel role="menu">
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-4 w-[760px]">
<div class="grid grid-cols-3 gap-3">
<div class="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl shadow-slate-900/10 ring-1 ring-slate-200/70 p-3 w-[720px]">
<div class="grid grid-cols-2 gap-2">
{item.children.map(child => (
<a href={child.href} role="menuitem"
class={`menu-item group flex items-center gap-3.5 px-4 py-3.5 rounded-xl transition-all touch-manipulation select-none ${
class={`menu-item group relative flex items-center gap-4 px-4 py-3.5 rounded-2xl transition-all duration-200 touch-manipulation select-none ${
child.id === activeNav
? 'bg-primary text-white'
? 'bg-gradient-to-br from-primary to-blue-600 text-white shadow-lg shadow-blue-500/30'
: 'text-gray-700'
}`}>
<span class={`menu-item-icon w-12 h-12 rounded-xl flex items-center justify-center shrink-0 transition-colors ${
<span class={`menu-item-icon w-16 flex items-center justify-center shrink-0 transition-all duration-200 ${
child.id === activeNav
? 'bg-white/20 text-white'
: 'bg-primary/10 text-primary'
? 'text-white'
: 'text-primary group-hover:scale-110'
}`}>
<i class={`fa ${child.icon} text-xl`}></i>
<i class={`fa ${child.icon} text-5xl`}></i>
</span>
<span class="flex-1 min-w-0">
<span class="block text-base font-extrabold leading-tight tracking-tight">{child.label}</span>
{child.desc && (
<span class={`block text-xs font-medium mt-1 leading-snug truncate ${
child.id === activeNav ? 'text-blue-50/90' : 'text-gray-500'
}`}>{child.desc}</span>
)}
</span>
<span class="text-base font-semibold whitespace-nowrap">{child.label}</span>
</a>
))}
</div>
@@ -163,7 +172,7 @@ 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-lg mx-auto px-4 py-4 grid grid-cols-3 gap-3">
<div class="max-w-lg mx-auto px-4 py-4 grid grid-cols-2 gap-3">
{navItems.find(item => item.children)?.children?.map(child => (
<a href={child.href} role="menuitem"
class={`flex flex-col items-center gap-2 py-4 px-2 rounded-xl transition-colors touch-manipulation select-none ${
@@ -387,12 +396,7 @@ function getMobileNavLinkClass(item: NavItem) {
background-color: rgb(22 93 255 / 0.1);
}
.menu-item.text-gray-700:hover {
background-color: rgb(22 93 255 / 0.1);
color: var(--color-primary, #165DFF);
}
.menu-item.text-gray-700:hover .menu-item-icon {
background-color: var(--color-primary, #165DFF);
color: #fff;
background-color: rgb(22 93 255 / 0.06);
}
}