novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构 Footer 为医疗健康风格

Browse Source
This commit is contained in:
张翔
2026-02-23 08:05:51 +08:00
parent b32fcdbbdc
commit a0c725f2bc
1 changed files with 22 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/footer.tsx
+22 -33
View File
@@ -4,37 +4,26 @@ import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
export function Footer() { export function Footer() {
return ( return (
<footer className="bg-gray-100 dark:bg-[var(--color-bg-secondary)] border-t border-gray-200 dark:border-gray-800"> <footer className="bg-[#F5F7FA] border-t border-[#E2E8F0] py-12">
<div className="container-custom py-16"> <div className="container-wide">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<div className="flex items-center mb-6"> <div className="flex items-center mb-6">
<img src="/logo.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto dark:hidden" /> <img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto hidden dark:block" />
</div> </div>
<p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6"> <p className="text-[#718096] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description} {COMPANY_INFO.description}
</p> </p>
<div className="flex flex-col items-start gap-3">
<span className="text-gray-500 text-sm">关注微信公众号</span>
<div className="w-24 h-24 bg-white rounded-lg p-2">
<img
src="/images/qrcode-wechat.png"
alt="微信公众号二维码"
className="w-full h-full object-contain"
/>
</div>
</div>
</div> </div>
<div> <div>
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">快速链接</h3> <h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">快速链接</h3>
<ul className="space-y-3"> <ul className="space-y-3">
{NAVIGATION.map((item) => ( {NAVIGATION.map((item) => (
<li key={item.id}> <li key={item.id}>
<a <a
href={item.href} href={item.href}
className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors" className="text-[#4A5568] hover:text-[#005EB8] transition-colors"
> >
{item.label} {item.label}
</a> </a>
@@ -44,25 +33,25 @@ export function Footer() {
</div> </div>
<div> <div>
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">服务项目</h3> <h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">服务项目</h3>
<ul className="space-y-3"> <ul className="space-y-3">
<li> <li>
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"> <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
软件开发 软件开发
</a> </a>
</li> </li>
<li> <li>
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"> <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
云服务 云服务
</a> </a>
</li> </li>
<li> <li>
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"> <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
数据分析 数据分析
</a> </a>
</li> </li>
<li> <li>
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"> <a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
信息安全 信息安全
</a> </a>
</li> </li>
@@ -70,34 +59,34 @@ export function Footer() {
</div> </div>
<div> <div>
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">联系方式</h3> <h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">联系方式</h3>
<ul className="space-y-4"> <ul className="space-y-4">
<li className="flex items-start gap-3"> <li className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-[var(--color-tech-blue)] mt-0.5" /> <MapPin className="w-5 h-5 text-[#005EB8] mt-0.5" />
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.address}</span> <span className="text-[#4A5568]">{COMPANY_INFO.address}</span>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<Phone className="w-5 h-5 text-[var(--color-tech-blue)]" /> <Phone className="w-5 h-5 text-[#005EB8]" />
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.phone}</span> <span className="text-[#4A5568]">{COMPANY_INFO.phone}</span>
</li> </li>
<li className="flex items-center gap-3"> <li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-[var(--color-tech-blue)]" /> <Mail className="w-5 h-5 text-[#005EB8]" />
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.email}</span> <span className="text-[#4A5568]">{COMPANY_INFO.email}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="border-t border-gray-200 dark:border-gray-800 mt-12 pt-8"> <div className="border-t border-[#E2E8F0] mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4"> <div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-gray-500 text-sm"> <p className="text-[#718096] text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved. © {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p> </p>
<div className="flex gap-6"> <div className="flex gap-6">
<Link href="#" className="text-gray-500 hover:text-[var(--color-tech-blue)] text-sm transition-colors"> <Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
隐私政策 隐私政策
</Link> </Link>
<Link href="#" className="text-gray-500 hover:text-[var(--color-tech-blue)] text-sm transition-colors"> <Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
服务条款 服务条款
</Link> </Link>
</div> </div>