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

style(ui组件): 更新UI组件颜色方案为深色主题

Browse Source 
refactor(card): 调整卡片背景色和边框颜色
refactor(badge): 修改徽章颜色变体
refactor(button): 更新按钮颜色样式
refactor(input): 调整输入框颜色方案
refactor(textarea): 修改文本区域颜色样式
refactor(header): 更新导航栏颜色
refactor(hero-section): 调整英雄区域颜色和渐变
This commit is contained in:
张翔
2026-02-23 09:18:41 +08:00
parent 9e7fb20d2a
commit 5ec2ad0043
168 changed files with 823 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/footer.tsx
+20 -20
View File
@@ -4,26 +4,26 @@ import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
export function Footer() {
return (
<footer className="bg-[#F5F7FA] border-t border-[#E2E8F0] py-12">
<footer className="bg-[#F5F5F5] border-t border-[#E5E5E5] py-12">
<div className="container-wide">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div className="lg:col-span-1">
<div className="flex items-center mb-6">
<img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
</div>
<p className="text-[#718096] text-sm leading-relaxed mb-6">
<p className="text-[#5C5C5C] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">快速链接</h3>
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">快速链接</h3>
<ul className="space-y-3">
{NAVIGATION.map((item) => (
<li key={item.id}>
<a
href={item.href}
className="text-[#4A5568] hover:text-[#005EB8] transition-colors"
className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors"
>
{item.label}
</a>
@@ -33,25 +33,25 @@ export function Footer() {
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">服务项目</h3>
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">服务项目</h3>
<ul className="space-y-3">
<li>
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
<a href="#services" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
软件开发
</a>
</li>
<li>
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
<a href="#services" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
云服务
</a>
</li>
<li>
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
<a href="#services" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
数据分析
</a>
</li>
<li>
<a href="#services" className="text-[#4A5568] hover:text-[#005EB8] transition-colors">
<a href="#services" className="text-[#3D3D3D] hover:text-[#C41E3A] transition-colors">
信息安全
</a>
</li>
@@ -59,34 +59,34 @@ export function Footer() {
</div>
<div>
<h3 className="font-semibold text-lg mb-6 text-[#1A1A2E]">联系方式</h3>
<h3 className="font-semibold text-lg mb-6 text-[#1C1C1C]">联系方式</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-[#005EB8] mt-0.5" />
<span className="text-[#4A5568]">{COMPANY_INFO.address}</span>
<MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Phone className="w-5 h-5 text-[#005EB8]" />
<span className="text-[#4A5568]">{COMPANY_INFO.phone}</span>
<Phone className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.phone}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-[#005EB8]" />
<span className="text-[#4A5568]">{COMPANY_INFO.email}</span>
<Mail className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#3D3D3D]">{COMPANY_INFO.email}</span>
</li>
</ul>
</div>
</div>
<div className="border-t border-[#E2E8F0] mt-12 pt-8">
<div className="border-t border-[#E5E5E5] mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-[#718096] text-sm">
<p className="text-[#5C5C5C] text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p>
<div className="flex gap-6">
<Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
<Link href="#" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors">
隐私政策
</Link>
<Link href="#" className="text-[#718096] hover:text-[#005EB8] text-sm transition-colors">
<Link href="#" className="text-[#5C5C5C] hover:text-[#C41E3A] text-sm transition-colors">
服务条款
</Link>
</div>
src/components/layout/header.tsx
+6 -6
View File
@@ -114,8 +114,8 @@ export function Header() {
relative px-3 py-1.5 text-sm font-medium
transition-all duration-300
${activeSection === item.id.replace('#', '')
? 'text-[#005EB8]'
: 'text-[#4A5568] hover:text-[#005EB8]'
? 'text-[#1C1C1C]'
: 'text-[#3D3D3D] hover:text-[#1C1C1C]'
}
`}
>
@@ -123,7 +123,7 @@ export function Header() {
{activeSection === item.id.replace('#', '') && (
<motion.span
layoutId="activeNav"
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#005EB8] rounded-full"
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-[#C41E3A] rounded-full"
transition={{ type: "spring", stiffness: 380, damping: 30 }}
/>
)}
@@ -146,7 +146,7 @@ export function Header() {
</div>
<button
className="md:hidden p-2 -mr-2 text-[#4A5568] hover:text-[#005EB8] transition-colors"
className="md:hidden p-2 -mr-2 text-[#3D3D3D] hover:text-[#1C1C1C] transition-colors"
onClick={() => setIsOpen(!isOpen)}
>
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -188,8 +188,8 @@ export function Header() {
transition-all duration-300
border-l-2
${activeSection === item.id.replace('#', '')
? 'text-[#005EB8] border-[#005EB8] bg-[#E8F4FD]'
: 'text-[#4A5568] border-transparent hover:text-[#005EB8] hover:bg-[#F5F7FA]'
? 'text-[#1C1C1C] border-[#C41E3A] bg-[#FEF2F4]'
: 'text-[#3D3D3D] border-transparent hover:text-[#1C1C1C] hover:bg-[#F5F5F5]'
}
`}
>