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

refactor: split single-page landing into three separate pages

Browse Source
This commit is contained in:
ZHENG XIAOYI
2026-02-09 15:04:43 +08:00
parent bf7fc2d434
commit f89ac6baf0
9 changed files with 172 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+50 -19
View File
@@ -1,5 +1,19 @@
---
const { title = "浙江贝凡网络科技" } = Astro.props;
const { title = "浙江贝凡网络科技", activeNav = "home" } = Astro.props;
const navItems = [
{ id: 'home', label: '公司介绍', href: '/', icon: 'fa-building' },
{ id: 'core-business', label: '核心业务', href: '/core-business', icon: 'fa-cogs' },
{ id: 'partnership', label: '生态合作', href: '/partnership', icon: 'fa-handshake-o' },
];
function getNavLinkClass(itemId: string) {
const baseClass = 'flex items-center gap-2 px-4 py-2.5 rounded-full font-medium transition-all duration-300';
if (itemId === activeNav) {
return `${baseClass} bg-primary text-white shadow-md`;
}
return `${baseClass} text-gray-600 hover:text-primary hover:bg-primary/10`;
}
---
<html lang="zh-CN">
@@ -16,29 +30,46 @@ const { title = "浙江贝凡网络科技" } = Astro.props;
<a href="/" class="flex items-center space-x-3">
<img src="/img/logo.png" alt="浙江贝凡 Logo" class="h-10 w-auto">
</a>
<nav class="hidden lg:flex items-center space-x-6 lg:space-x-8">
<a href="/#home" class="font-bold text-primary transition duration-300 relative hover:text-blue-600">首页</a>
<a href="/#core-business" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">核心业务</a>
<a href="/#ai-model" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">AI大模型</a>
<a href="/#about-us" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">关于我们</a>
<a href="/#recruitment" class="font-medium text-gray-700 hover:text-primary transition duration-300 relative">生态合作</a>
<nav class="hidden lg:flex items-center gap-3">
{
navItems.map(item => (
<a href={item.href} class={getNavLinkClass(item.id)}>
<i class={`fa ${item.icon}`}></i>
<span>{item.label}</span>
</a>
))
}
</nav>
<a href="/#contact-info" class="hidden lg:block bg-primary hover:bg-blue-600 text-white px-6 py-2 rounded-full font-bold transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-0.5">
立即咨询
<a href="/#contact-info" class="hidden lg:flex items-center gap-2 bg-primary hover:bg-blue-600 text-white px-5 py-2.5 rounded-full font-bold transition-all duration-300 shadow-lg hover:shadow-xl">
<i class="fa fa-phone"></i>
<span>立即咨询</span>
</a>
<button id="menu-toggle" class="lg:hidden text-gray-800 focus:outline-none p-2 rounded-lg hover:bg-gray-100">
<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 id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl">
<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col space-y-2">
<a href="/#home" class="font-medium text-primary py-2 px-4 rounded-lg hover:bg-primary/10 transition">首页</a>
<a href="/#core-business" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">核心业务</a>
<a href="/#ai-model" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">AI大模型</a>
<a href="/#about-us" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">关于我们</a>
<a href="/#recruitment" class="font-medium text-gray-800 py-2 px-4 rounded-lg hover:bg-primary/10 transition">生态合作</a>
<a href="/#contact-info" class="bg-primary hover:bg-blue-600 text-white px-6 py-2.5 rounded-full font-bold text-center mt-3 transition shadow-lg">
立即咨询
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-200 shadow-xl pb-4">
<div class="max-w-7xl mx-auto px-4 pt-4 space-y-2">
{
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'}`}>
<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-xl ${item.id === activeNav ? 'text-white' : 'text-gray-600'}`}></i>
</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 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>