From 522f1e09a744ac683974d5339c5dcda5d7720b90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sun, 8 Feb 2026 16:46:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E7=BD=91=E7=AB=99UI?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构整体UI设计，采用红色主题配色方案 优化页面布局结构，将Header和Footer移至page组件 更新按钮样式和交互效果，增强视觉反馈 调整全局字体配置，使用思源黑体作为中文字体 改进各区块卡片样式，增加悬停动画效果 优化响应式设计，提升移动端体验 --- src/app/(marketing)/layout.tsx | 5 - src/app/(marketing)/page.tsx | 26 +-- src/app/globals.css | 177 ++++++++++++------- src/app/layout.tsx | 40 +---- src/components/layout/footer.tsx | 55 +++--- src/components/layout/header.tsx | 60 +++++-- src/components/sections/about-section.tsx | 45 +++-- src/components/sections/contact-section.tsx | 99 ++++++----- src/components/sections/hero-section.tsx | 63 ++++--- src/components/sections/news-section.tsx | 39 ++-- src/components/sections/products-section.tsx | 47 +++-- src/components/sections/services-section.tsx | 30 ++-- src/components/ui/button.tsx | 28 +-- 13 files changed, 392 insertions(+), 322 deletions(-) diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx index 681c371..24c4a16 100644 --- a/src/app/(marketing)/layout.tsx +++ b/src/app/(marketing)/layout.tsx @@ -1,6 +1,3 @@ -import { Header } from '@/components/layout/header'; -import { Footer } from '@/components/layout/footer'; - export default function MarketingLayout({ children, }: { @@ -8,9 +5,7 @@ export default function MarketingLayout({ }) { return (
-
{children}
-
); } diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index 02b2efe..e5fef5c 100644 --- a/src/app/(marketing)/page.tsx +++ b/src/app/(marketing)/page.tsx @@ -1,25 +1,25 @@ -import { HeroSection } from '@/components/sections/hero-section'; -import { AboutSection } from '@/components/sections/about-section'; -import { ServicesSection } from '@/components/sections/services-section'; -import { ProductsSection } from '@/components/sections/products-section'; -import { NewsSection } from '@/components/sections/news-section'; -import { ContactSection } from '@/components/sections/contact-section'; -import { COMPANY_INFO } from '@/lib/constants'; +"use client"; -export const metadata = { - title: `${COMPANY_INFO.name} - 专业科技服务提供商`, - description: COMPANY_INFO.description, -}; +import { Header } from "@/components/layout/header"; +import { Footer } from "@/components/layout/footer"; +import { HeroSection } from "@/components/sections/hero-section"; +import { AboutSection } from "@/components/sections/about-section"; +import { ServicesSection } from "@/components/sections/services-section"; +import { ProductsSection } from "@/components/sections/products-section"; +import { NewsSection } from "@/components/sections/news-section"; +import { ContactSection } from "@/components/sections/contact-section"; export default function HomePage() { return ( - <> +
+
- +
+
); } diff --git a/src/app/globals.css b/src/app/globals.css index 8d50826..d88815b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,6 +8,7 @@ --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --font-chinese: var(--font-noto-sans-sc); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); @@ -44,80 +45,85 @@ } :root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.145 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.145 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.145 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --radius: 0.5rem; + --primary: #C41E3A; + --primary-dark: #A01830; + --primary-light: #D93D5C; + --primary-muted: #FEF2F4; + --primary-foreground: #FFFFFF; + --background: #FFFFFF; + --background-secondary: #FAF8F8; + --background-tertiary: #F5F0F0; + --foreground: #1A1A1A; + --card: #FFFFFF; + --card-foreground: #1A1A1A; + --popover: #FFFFFF; + --popover-foreground: #1A1A1A; + --secondary: #FAF8F8; + --secondary-foreground: #1A1A1A; + --muted: #F5F0F0; + --muted-foreground: #6B6B6B; + --accent: #F5F0F0; + --accent-foreground: #1A1A1A; + --destructive: #DC2626; + --destructive-foreground: #FFFFFF; + --border: #E8E0E0; + --input: #E8E0E0; + --ring: #C41E3A; + --chart-1: #C41E3A; + --chart-2: #1B4B8C; + --chart-3: #10B981; + --chart-4: #F59E0B; + --chart-5: #8B5CF6; + --sidebar: #FAF8F8; + --sidebar-foreground: #1A1A1A; + --sidebar-primary: #C41E3A; + --sidebar-primary-foreground: #FFFFFF; + --sidebar-accent: #F5F0F0; + --sidebar-accent-foreground: #1A1A1A; + --sidebar-border: #E8E0E0; + --sidebar-ring: #C41E3A; } .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --background: #1A1A1A; + --background-secondary: #2A2A2A; + --background-tertiary: #333333; + --foreground: #FAFAFA; + --card: #2A2A2A; + --card-foreground: #FAFAFA; + --popover: #2A2A2A; + --popover-foreground: #FAFAFA; + --primary: #D93D5C; + --primary-foreground: #FFFFFF; + --secondary: #333333; + --secondary-foreground: #FAFAFA; + --muted: #333333; + --muted-foreground: #A0A0A0; + --accent: #333333; + --accent-foreground: #FAFAFA; + --destructive: #EF4444; + --destructive-foreground: #FFFFFF; + --border: rgba(255, 255, 255, 0.1); + --input: rgba(255, 255, 255, 0.15); + --ring: #D93D5C; + --sidebar: #2A2A2A; + --sidebar-foreground: #FAFAFA; + --sidebar-primary: #D93D5C; + --sidebar-primary-foreground: #FFFFFF; + --sidebar-accent: #333333; + --sidebar-accent-foreground: #FAFAFA; + --sidebar-border: rgba(255, 255, 255, 0.1); + --sidebar-ring: #D93D5C; } @layer base { * { - @apply border-border outline-ring/50; + @apply border-border; } body { @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; } html { scroll-behavior: smooth; @@ -129,3 +135,46 @@ @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; } } + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: #F5F0F0; +} + +::-webkit-scrollbar-thumb { + background: #C41E3A; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #A01830; +} + +::selection { + background-color: #C41E3A; + color: #FFFFFF; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6fbc18e..dfa316d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono, Ma_Shan_Zheng, ZCOOL_XiaoWei, Noto_Serif_SC } from "next/font/google"; +import { Geist, Geist_Mono, Noto_Sans_SC } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ @@ -12,23 +12,10 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); -// 书法字体 -const maShanZheng = Ma_Shan_Zheng({ - weight: "400", - variable: "--font-ma-shan-zheng", - subsets: ["latin"], -}); - -const zcoolXiaoWei = ZCOOL_XiaoWei({ - weight: "400", - variable: "--font-zcool-xiaowei", - subsets: ["latin"], -}); - -// 思源宋体 - 作为青柳隶书的替代 -const notoSerifSC = Noto_Serif_SC({ - weight: ["400", "700"], - variable: "--font-noto-serif-sc", +// 思源黑体 - 中文字体 +const notoSansSC = Noto_Sans_SC({ + weight: ["400", "500", "700"], + variable: "--font-noto-sans-sc", subsets: ["latin"], }); @@ -59,11 +46,6 @@ export const metadata: Metadata = { title: "四川睿新致远科技有限公司", description: "企业数字化转型服务商", }, - verification: { - // 可以添加搜索引擎验证代码 - // google: "your-google-verification-code", - // baidu: "your-baidu-verification-code", - }, alternates: { canonical: "https://www.novalon.cn", }, @@ -75,21 +57,15 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {/* Favicon */} - {/* 中文字体 - 从Google Fonts加载 */} - - - {children} diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx index 7884030..9a5cb4f 100644 --- a/src/components/layout/footer.tsx +++ b/src/components/layout/footer.tsx @@ -1,11 +1,10 @@ import Link from 'next/link'; -import Image from 'next/image'; import { Mail, Phone, MapPin } from 'lucide-react'; -import { COMPANY_INFO, NAVIGATION, SOCIAL_LINKS } from '@/lib/constants'; +import { COMPANY_INFO, NAVIGATION } from '@/lib/constants'; export function Footer() { return ( -