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

feat: 重构网站UI设计并优化布局结构

Browse Source 
重构整体UI设计，采用红色主题配色方案
优化页面布局结构，将Header和Footer移至page组件
更新按钮样式和交互效果，增强视觉反馈
调整全局字体配置，使用思源黑体作为中文字体
改进各区块卡片样式，增加悬停动画效果
优化响应式设计，提升移动端体验
This commit is contained in:
张翔
2026-02-08 16:46:22 +08:00
parent cc55146ba6
commit 522f1e09a7
13 changed files with 392 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/layout.tsx
-5
View File
@@ -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 (
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
);
}
src/app/(marketing)/page.tsx
+13 -13
View File
@@ -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 (
<>
<main className="min-h-screen">
<Header />
<HeroSection />
<AboutSection />
<ServicesSection />
<ProductsSection />
<NewsSection />
<ContactSection />
</>
<Footer />
</main>
);
}
src/app/globals.css
+113 -64
View File
@@ -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;
}
src/app/layout.tsx
+8 -32
View File
@@ -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 (
<html lang="zh-CN">
<html lang="zh-CN" className="scroll-smooth">
<head>
{/* Favicon */}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/favicon.svg" />
{/* 中文字体 - 从Google Fonts加载 */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap"
rel="stylesheet"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} ${maShanZheng.variable} ${zcoolXiaoWei.variable} ${notoSerifSC.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} ${notoSansSC.variable} font-sans antialiased`}
style={{ fontFamily: "'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }}
>
{children}
</body>