gitadmin/23ff5c49-3ffc-4a02-b409-140c8171de7d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

manual save(2026-01-05 11:01)

Browse Source
This commit is contained in:
SiteAgent Bot
2026-01-05 11:01:50 +08:00
parent 1d019667ef
commit 72e6ab4720
7 changed files with 521 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/components/Header.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, Building2 } from 'lucide-react'; import { Menu, X, Building2, Phone, Mail, Search, ChevronDown } from 'lucide-react';
import { NAVIGATION_MENU } from '../lib/constants'; import { NAVIGATION_MENU } from '../lib/constants';
/** /**
@@ -40,137 +40,250 @@ export const Header: React.FC = () => {
}; };
return ( return (
<motion.header <>
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${ {/* 顶部信息栏 */}
isScrolled <motion.div
? 'bg-white/95 backdrop-blur-sm shadow-md' className={`fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-primary-dark to-primary text-white text-xs transition-all duration-300 ${
: 'bg-white shadow-sm' isScrolled ? 'h-0 opacity-0 overflow-hidden' : 'h-10'
}`} }`}
initial={{ y: -100 }} initial={{ y: -40 }}
animate={{ y: 0 }} animate={{ y: 0 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
<div className="flex items-center justify-between h-[70px]"> <div className="flex items-center gap-6">
{/* Logo 区域 */} <div className="flex items-center gap-2">
<Phone size={14} />
<span>400-123-4567</span>
</div>
<div className="hidden sm:flex items-center gap-2">
<Mail size={14} />
<span>contact@chengyu.com</span>
</div>
</div>
<div className="hidden md:flex items-center gap-4">
<span className="text-white/80">欢迎来到诚裕集团官网</span>
<div className="flex items-center gap-2">
<span className="text-white/60">|</span>
<button className="hover:text-accent transition-colors">简体中文</button>
<span className="text-white/60">/</span>
<button className="hover:text-accent transition-colors">English</button>
</div>
</div>
</div>
</motion.div>
{/* 主导航栏 */}
<motion.header
className={`fixed left-0 right-0 z-50 transition-all duration-300 ${
isScrolled
? 'top-0 bg-white/95 backdrop-blur-md shadow-lg'
: 'top-10 bg-white shadow-md'
}`}
initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ duration: 0.3, delay: 0.1 }}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-[80px]">
{/* Logo 区域 - 增强版 */}
<Link <Link
to="/" to="/"
className="flex items-center gap-3 group" className="flex items-center gap-3 group relative"
aria-label="返回首页" aria-label="返回首页"
> >
<motion.div <motion.div
className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary text-white" className="relative flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-light text-white shadow-lg"
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05, rotate: 5 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
<Building2 size={24} /> <Building2 size={26} />
{/* 光晕效果 */}
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary to-primary-light opacity-20 blur-xl group-hover:opacity-40 transition-opacity" />
</motion.div> </motion.div>
<div className="hidden sm:block"> <div className="hidden sm:block">
<span className="text-lg font-bold text-primary-dark group-hover:text-primary transition-colors"> <span className="text-xl font-bold bg-gradient-to-r from-primary-dark to-primary bg-clip-text text-transparent group-hover:from-primary group-hover:to-primary-light transition-all">
诚裕集团 诚裕集团
</span> </span>
<p className="text-xs text-gray-500 -mt-1">Chengyu Group</p> <p className="text-xs text-gray-500 -mt-1 font-medium tracking-wider">CHENGYU GROUP</p>
</div> </div>
</Link> </Link>
{/* 桌面端导航菜单 */} {/* 桌面端导航菜单 - 增强版 */}
<nav <nav
className="hidden md:flex items-center gap-1" className="hidden lg:flex items-center gap-1"
role="navigation" role="navigation"
aria-label="主导航" aria-label="主导航"
> >
{NAVIGATION_MENU.map((item) => ( {NAVIGATION_MENU.map((item, index) => (
<Link <motion.div
key={item.id} key={item.id}
to={item.path} initial={{ opacity: 0, y: -20 }}
className={`relative px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${ animate={{ opacity: 1, y: 0 }}
isActive(item.path) transition={{ delay: index * 0.1 }}
? 'text-primary'
: 'text-gray-600 hover:text-primary'
}`}
aria-current={isActive(item.path) ? 'page' : undefined}
> >
{item.label} <Link
{/* 活动状态指示器 */} to={item.path}
{isActive(item.path) && ( className={`group relative px-5 py-3 text-sm font-medium rounded-xl transition-all duration-300 flex items-center gap-2 ${
isActive(item.path)
? 'text-primary bg-primary/5'
: 'text-gray-700 hover:text-primary hover:bg-primary/5'
}`}
aria-current={isActive(item.path) ? 'page' : undefined}
>
<span className="relative z-10">{item.label}</span>
{/* 活动状态指示器 - 渐变下划线 */}
{isActive(item.path) && (
<motion.div
layoutId="activeIndicator"
className="absolute bottom-1 left-1/2 -translate-x-1/2 w-8 h-1 bg-gradient-to-r from-primary to-accent rounded-full"
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
/>
)}
{/* 悬停背景效果 */}
<motion.div <motion.div
layoutId="activeIndicator" className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary/10 to-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-accent rounded-full" initial={false}
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
/> />
)} </Link>
{/* 悬停效果 */} </motion.div>
{!isActive(item.path) && (
<span className="absolute inset-0 rounded-lg bg-primary/5 scale-0 transition-transform duration-200 group-hover:scale-100" />
)}
</Link>
))} ))}
</nav> </nav>
{/* 桌面端 CTA 按钮 */} {/* 桌面端操作区域 */}
<div className="hidden md:flex items-center gap-3"> <div className="hidden lg:flex items-center gap-3">
{/* 搜索按钮 */}
<motion.button <motion.button
className="px-5 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-light transition-colors shadow-sm" className="p-2.5 rounded-lg text-gray-600 hover:text-primary hover:bg-primary/5 transition-all"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
aria-label="搜索"
>
<Search size={20} />
</motion.button>
{/* 联系电话按钮 */}
<motion.a
href="tel:400-123-4567"
className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-primary border-2 border-primary rounded-lg hover:bg-primary hover:text-white transition-all"
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
> >
立即咨询 <Phone size={16} />
<span className="hidden xl:inline">400-123-4567</span>
</motion.a>
{/* CTA 按钮 - 渐变风格 */}
<motion.button
className="relative px-6 py-2.5 text-sm font-medium text-white rounded-lg overflow-hidden group"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<div className="absolute inset-0 bg-gradient-to-r from-primary to-primary-light" />
<div className="absolute inset-0 bg-gradient-to-r from-accent to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<span className="relative z-10 flex items-center gap-2">
立即咨询
<motion.span
animate={{ x: [0, 3, 0] }}
transition={{ repeat: Infinity, duration: 1.5 }}
>
→
</motion.span>
</span>
</motion.button> </motion.button>
</div> </div>
{/* 移动端菜单按钮 */} {/* 移动端菜单按钮 */}
<motion.button <motion.button
className="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors" className="lg:hidden p-2.5 rounded-xl text-gray-600 hover:bg-primary/5 hover:text-primary transition-all"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'} aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'}
aria-expanded={isMobileMenuOpen} aria-expanded={isMobileMenuOpen}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />} <motion.div
animate={{ rotate: isMobileMenuOpen ? 90 : 0 }}
transition={{ duration: 0.2 }}
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</motion.div>
</motion.button> </motion.button>
</div> </div>
</div> </div>
{/* 移动端菜单 */} {/* 移动端菜单 - 增强版 */}
<AnimatePresence> <AnimatePresence>
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<motion.nav <motion.nav
initial={{ opacity: 0, height: 0 }} initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }} animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }} exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.3 }}
className="md:hidden bg-white border-t border-gray-100 overflow-hidden" className="lg:hidden bg-gradient-to-b from-white to-gray-50 border-t border-gray-100 overflow-hidden shadow-xl"
role="navigation" role="navigation"
aria-label="移动端导航" aria-label="移动端导航"
> >
<div className="px-4 py-4 space-y-2"> <div className="px-4 py-6 space-y-3">
{NAVIGATION_MENU.map((item) => ( {NAVIGATION_MENU.map((item, index) => (
<Link <motion.div
key={item.id} key={item.id}
to={item.path} initial={{ opacity: 0, x: -20 }}
className={`block px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 ${ animate={{ opacity: 1, x: 0 }}
isActive(item.path) transition={{ delay: index * 0.05 }}
? 'bg-primary/5 text-primary'
: 'text-gray-600 hover:bg-gray-50'
}`}
aria-current={isActive(item.path) ? 'page' : undefined}
> >
{item.label} <Link
</Link> to={item.path}
className={`block px-5 py-3.5 rounded-xl text-base font-medium transition-all duration-200 ${
isActive(item.path)
? 'bg-gradient-to-r from-primary/10 to-accent/10 text-primary shadow-sm'
: 'text-gray-700 hover:bg-primary/5 active:scale-95'
}`}
aria-current={isActive(item.path) ? 'page' : undefined}
>
<div className="flex items-center justify-between">
<span>{item.label}</span>
{isActive(item.path) && (
<motion.div
className="w-2 h-2 rounded-full bg-gradient-to-r from-primary to-accent"
layoutId="mobileActiveIndicator"
/>
)}
</div>
</Link>
</motion.div>
))} ))}
<div className="pt-4 border-t border-gray-100">
{/* 移动端联系方式 */}
<motion.div
className="pt-4 mt-2 border-t border-gray-200 space-y-3"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
>
<a
href="tel:400-123-4567"
className="flex items-center gap-3 px-5 py-3 rounded-xl text-gray-700 hover:bg-primary/5 transition-all"
>
<Phone size={18} className="text-primary" />
<span className="text-sm font-medium">400-123-4567</span>
</a>
<motion.button <motion.button
className="w-full px-4 py-3 text-base font-medium text-white bg-primary rounded-lg" className="w-full px-5 py-3.5 text-base font-medium text-white rounded-xl bg-gradient-to-r from-primary to-primary-light shadow-lg shadow-primary/30"
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
> >
立即咨询 立即咨询
</motion.button> </motion.button>
</div> </motion.div>
</div> </div>
</motion.nav> </motion.nav>
)} )}
</AnimatePresence> </AnimatePresence>
</motion.header> </motion.header>
</>
); );
}; };

64
src/pages/About.tsx
View File

@@ -212,12 +212,16 @@ export const About: React.FC = () => {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
> >
<div className="aspect-[4/3] rounded-2xl overflow-hidden bg-gradient-to-br from-primary to-primary-light shadow-xl"> <div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
<div className="w-full h-full flex items-center justify-center text-white p-12 text-center"> <img
<div> src="/images/about-office.jpg"
<div className="text-6xl font-bold mb-4">诚裕集团</div> alt="诚裕集团办公环境"
<div className="text-2xl opacity-80">诚信为本 · 裕及四方</div> className="w-full h-full object-cover"
<div className="mt-8 w-24 h-1 bg-accent mx-auto rounded-full" /> />
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end justify-center p-8">
<div className="text-center text-white">
<div className="text-4xl font-bold mb-2">诚裕集团</div>
<div className="text-xl opacity-90">诚信为本 · 裕及四方</div>
</div> </div>
</div> </div>
</div> </div>
@@ -367,10 +371,12 @@ export const About: React.FC = () => {
transition={{ delay: index * 0.1, duration: 0.5 }} transition={{ delay: index * 0.1, duration: 0.5 }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
> >
{/* 头像占位 */} {/* 团队成员头像 */}
<div className="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-white text-2xl font-bold"> <div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden ring-4 ring-primary/10">
{member.name.charAt(0)} <div className="w-full h-full rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center text-white text-2xl font-bold shadow-lg">
</div> {member.name.charAt(0)}
</div>
</div>
<h3 className="text-xl font-semibold text-primary-dark"> <h3 className="text-xl font-semibold text-primary-dark">
{member.name} {member.name}
</h3> </h3>
@@ -404,25 +410,25 @@ export const About: React.FC = () => {
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
{honors.map((honor, index) => ( {honors.map((honor, index) => (
<motion.div <motion.div
key={honor.name} key={honor.name}
className="flex items-center gap-4 p-5 bg-background rounded-xl hover:shadow-md transition-shadow" className="flex items-center gap-4 p-5 bg-background rounded-xl hover:shadow-md transition-shadow"
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ delay: index * 0.1, duration: 0.5 }} transition={{ delay: index * 0.1, duration: 0.5 }}
whileHover={{ x: 5 }} whileHover={{ x: 5 }}
> >
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-accent/20 flex items-center justify-center"> <div className="flex-shrink-0 w-16 h-16 rounded-lg bg-gradient-to-br from-accent/20 to-accent/10 flex items-center justify-center">
<Award size={24} className="text-accent" /> <Award size={28} className="text-accent" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-medium text-primary-dark"> <h4 className="font-medium text-primary-dark">
{honor.name} {honor.name}
</h4> </h4>
<p className="text-sm text-gray-500">获得年份：{honor.year}</p> <p className="text-sm text-gray-500">获得年份：{honor.year}</p>
</div> </div>
</motion.div> </motion.div>
))} ))}
</div> </div>
</div> </div>

35
src/pages/Categories.tsx
View File

@@ -64,19 +64,42 @@ export const CategoriesPage: React.FC = () => {
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{loading {loading
? Array.from({ length: 6 }).map((_, i) => ( ? Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="bg-white p-6 rounded-lg shadow-sm animate-pulse"> <div key={i} className="bg-white rounded-lg shadow-sm overflow-hidden animate-pulse">
<div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div> <div className="aspect-[16/9] bg-gray-200"></div>
<div className="h-4 bg-gray-200 rounded w-1/2"></div> <div className="p-6">
<div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
</div> </div>
)) ))
: categories.map((category) => ( : categories.map((category) => (
<a <a
key={category.id} key={category.id}
href={`/categories/${category.slug}`} href={`/categories/${category.slug}`}
className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow" className="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow group"
> >
<h3 className="text-xl font-semibold text-gray-900 mb-2">{category.title}</h3> <div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/10 to-primary-light/10">
<p className="text-sm text-gray-600">查看该分类下的所有文章</p> <img
src={`/images/category-${category.slug}.jpg`}
alt={category.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.style.display = 'none';
target.nextElementSibling?.classList.remove('hidden');
}}
/>
<div className="w-full h-full flex items-center justify-center hidden">
<div className="text-center text-primary">
<div className="text-4xl mb-2">📁</div>
<p className="text-sm font-medium">{category.title}</p>
</div>
</div>
</div>
<div className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-2">{category.title}</h3>
<p className="text-sm text-gray-600">查看该分类下的所有文章</p>
</div>
</a> </a>
))} ))}
</div> </div>

22
src/pages/CategoryDetail.tsx
View File

@@ -108,6 +108,28 @@ export const CategoryDetail: React.FC = () => {
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<section className="mb-12"> <section className="mb-12">
{category && (
<div className="mb-8">
<div className="aspect-[16/8] rounded-2xl overflow-hidden mb-6">
<img
src={`/images/category-${category.slug}-header.jpg`}
alt={category.title}
className="w-full h-full object-cover"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.style.display = 'none';
target.nextElementSibling?.classList.remove('hidden');
}}
/>
<div className="w-full h-full bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center hidden">
<div className="text-center text-primary">
<div className="text-6xl mb-4">📂</div>
<p className="text-2xl font-medium">{category.title}</p>
</div>
</div>
</div>
</div>
)}
<h2 className="text-3xl font-bold text-gray-900 mb-2"> <h2 className="text-3xl font-bold text-gray-900 mb-2">
📂 {category?.title || '分类'} 📂 {category?.title || '分类'}
</h2> </h2>

131
src/pages/Contact.tsx
View File

@@ -402,64 +402,81 @@ export const Contact: React.FC = () => {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
{/* 地图占位 */} {/* 地图和办公环境 */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-2 mb-6"> <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-2 mb-6">
<div className="aspect-[4/3] rounded-xl bg-gradient-to-br from-primary/10 to-primary-light/10 flex flex-col items-center justify-center"> <div className="aspect-[4/3] rounded-xl overflow-hidden relative">
<MapPin size={48} className="text-primary mb-4" /> <img
<p className="text-primary-dark font-medium mb-2"> src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1200&h=900&fit=crop"
诚裕集团总部 alt="诚裕集团总部大楼 - 现代化办公大厦"
</p> className="w-full h-full object-cover"
<p className="text-gray-500 text-sm text-center px-8"> />
北京市朝阳区建国路88号诚裕大厦 <div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur-sm rounded-lg p-3 shadow-lg">
</p> <p className="text-primary-dark font-medium text-sm mb-1">
<motion.button 📍 诚裕集团总部
className="mt-4 px-6 py-2 bg-primary text-white rounded-lg text-sm" </p>
whileHover={{ scale: 1.05 }} <p className="text-gray-600 text-xs">
whileTap={{ scale: 0.95 }} 北京市朝阳区建国路88号诚裕大厦
> </p>
在地图中查看 <motion.button
</motion.button> className="mt-2 px-4 py-1 bg-primary text-white rounded text-xs hover:bg-primary-light transition-colors"
</div> whileHover={{ scale: 1.05 }}
</div> whileTap={{ scale: 0.95 }}
>
在地图中查看
</motion.button>
</div>
</div>
</div>
{/* 公司详细信息 */} {/* 办公环境展示 */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
<h3 className="text-lg font-semibold text-primary-dark mb-4"> <div className="aspect-[16/9] overflow-hidden">
公司信息 <img
</h3> src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&h=675&fit=crop"
<div className="space-y-4"> alt="诚裕集团办公环境 - 现代化工作空间"
<div className="flex items-start gap-3"> className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
<MapPin size={20} className="text-accent mt-0.5" /> />
<div> </div>
<p className="text-sm text-gray-500">总部地址</p> </div>
<p className="text-primary-dark">
{COMPANY_INFO.headquarters}诚裕大厦 {/* 公司详细信息 */}
</p> <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
</div> <h3 className="text-lg font-semibold text-primary-dark mb-4">
</div> 公司信息
<div className="flex items-start gap-3"> </h3>
<Phone size={20} className="text-accent mt-0.5" /> <div className="space-y-4">
<div> <div className="flex items-start gap-3">
<p className="text-sm text-gray-500">服务热线</p> <MapPin size={20} className="text-accent mt-0.5" />
<p className="text-primary-dark">{COMPANY_INFO.phone}</p> <div>
</div> <p className="text-sm text-gray-500">总部地址</p>
</div> <p className="text-primary-dark">
<div className="flex items-start gap-3"> {COMPANY_INFO.headquarters}诚裕大厦
<Mail size={20} className="text-accent mt-0.5" /> </p>
<div> </div>
<p className="text-sm text-gray-500">商务邮箱</p> </div>
<p className="text-primary-dark">{COMPANY_INFO.email}</p> <div className="flex items-start gap-3">
</div> <Phone size={20} className="text-accent mt-0.5" />
</div> <div>
<div className="flex items-start gap-3"> <p className="text-sm text-gray-500">服务热线</p>
<Clock size={20} className="text-accent mt-0.5" /> <p className="text-primary-dark">{COMPANY_INFO.phone}</p>
<div> </div>
<p className="text-sm text-gray-500">工作时间</p> </div>
<p className="text-primary-dark">{COMPANY_INFO.workingHours}</p> <div className="flex items-start gap-3">
</div> <Mail size={20} className="text-accent mt-0.5" />
</div> <div>
</div> <p className="text-sm text-gray-500">商务邮箱</p>
</div> <p className="text-primary-dark">{COMPANY_INFO.email}</p>
</div>
</div>
<div className="flex items-start gap-3">
<Clock size={20} className="text-accent mt-0.5" />
<div>
<p className="text-sm text-gray-500">工作时间</p>
<p className="text-primary-dark">{COMPANY_INFO.workingHours}</p>
</div>
</div>
</div>
</div>
</motion.div> </motion.div>
</div> </div>
</div> </div>

157
src/pages/News.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react'; import { useState, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { import {
Calendar, Calendar,
@@ -7,6 +7,10 @@ import {
Clock, Clock,
TrendingUp, TrendingUp,
Tag, Tag,
Play,
Pause,
Volume2,
VolumeX,
} from 'lucide-react'; } from 'lucide-react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Header } from '../components/Header'; import { Header } from '../components/Header';
@@ -168,17 +172,24 @@ const NewsCard: React.FC<{ news: typeof allNews[0]; index: number }> = ({
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
> >
{/* 图片区域 */} {/* 图片区域 */}
<Link to={`/news/${news.id}`} className="block aspect-[16/9] bg-gradient-to-br from-primary/5 to-primary-light/10 relative overflow-hidden"> <Link to={`/news/${news.id}`} className="block aspect-[16/9] relative overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center text-primary/20"> <img
<Tag size={48} /> src={`https://images.unsplash.com/photo-${
</div> news.category === 'company' ? '1560179707-f14e90ef3623' :
news.category === 'industry' ? '1504868584819-f8e8b4b6d7e3' :
'1552664730-d307ca884978'
}?w=800&h=450&fit=crop&auto=format&q=80`}
alt={news.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
{/* 分类标签 */} {/* 分类标签 */}
<span className={`absolute top-4 left-4 px-3 py-1 text-xs font-medium rounded-full ${category.color}`}> <span className={`absolute top-4 left-4 px-3 py-1 text-xs font-medium rounded-full backdrop-blur-sm ${category.color}`}>
{category.label} {category.label}
</span> </span>
{/* 热门标签 */} {/* 热门标签 */}
{news.isHot && ( {news.isHot && (
<span className="absolute top-4 right-4 px-3 py-1 text-xs font-medium bg-red-500 text-white rounded-full flex items-center gap-1"> <span className="absolute top-4 right-4 px-3 py-1 text-xs font-medium bg-red-500 text-white rounded-full flex items-center gap-1 backdrop-blur-sm">
<TrendingUp size={12} /> <TrendingUp size={12} />
热门 热门
</span> </span>
@@ -309,6 +320,135 @@ const Pagination: React.FC<{
); );
}; };
/**
* 数字人视频播放器组件
*/
const DigitalHumanVideo: React.FC = () => {
const videoRef = useRef<HTMLVideoElement>(null);
const [isPlaying, setIsPlaying] = useState(false);
const [isMuted, setIsMuted] = useState(true);
const togglePlay = () => {
if (videoRef.current) {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
}
};
const toggleMute = () => {
if (videoRef.current) {
videoRef.current.muted = !isMuted;
setIsMuted(!isMuted);
}
};
return (
<motion.div
className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden mb-12"
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<div className="grid lg:grid-cols-5 gap-6">
{/* 视频播放器 */}
<div className="lg:col-span-3 relative bg-gradient-to-br from-primary/5 to-primary-light/10">
<div className="aspect-video relative">
<video
ref={videoRef}
className="w-full h-full object-cover"
muted={isMuted}
loop
playsInline
poster="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1200&h=675&fit=crop"
>
<source
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
/>
您的浏览器不支持视频播放
</video>
{/* 播放控制按钮 */}
<div className="absolute inset-0 flex items-center justify-center bg-black/20 hover:bg-black/30 transition-colors group">
<motion.button
onClick={togglePlay}
className="w-16 h-16 rounded-full bg-white/90 backdrop-blur-sm flex items-center justify-center text-primary shadow-lg group-hover:scale-110 transition-transform"
whileHover={{ scale: 1.15 }}
whileTap={{ scale: 0.95 }}
>
{isPlaying ? <Pause size={28} /> : <Play size={28} className="ml-1" />}
</motion.button>
</div>
{/* 音量控制 */}
<div className="absolute bottom-4 right-4">
<motion.button
onClick={toggleMute}
className="w-10 h-10 rounded-full bg-white/90 backdrop-blur-sm flex items-center justify-center text-primary shadow-lg"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
>
{isMuted ? <VolumeX size={20} /> : <Volume2 size={20} />}
</motion.button>
</div>
{/* 直播标签 */}
<div className="absolute top-4 left-4">
<span className="px-3 py-1 bg-red-500 text-white text-xs font-medium rounded-full flex items-center gap-2">
<span className="w-2 h-2 bg-white rounded-full animate-pulse" />
数字人播报
</span>
</div>
</div>
</div>
{/* 视频信息 */}
<div className="lg:col-span-2 p-6 flex flex-col justify-center">
<div className="mb-4">
<span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">
AI 数字人
</span>
<h3 className="text-2xl font-bold text-primary-dark mb-3">
诚裕集团新闻播报
</h3>
<p className="text-gray-600 leading-relaxed mb-4">
欢迎收看诚裕集团最新资讯播报。我们使用先进的AI数字人技术，为您带来最新的企业动态、行业资讯和重要公告。
</p>
</div>
<div className="space-y-3 text-sm text-gray-600">
<div className="flex items-center gap-3">
<div className="w-2 h-2 bg-primary rounded-full" />
<span>24小时不间断播报</span>
</div>
<div className="flex items-center gap-3">
<div className="w-2 h-2 bg-primary rounded-full" />
<span>实时更新企业资讯</span>
</div>
<div className="flex items-center gap-3">
<div className="w-2 h-2 bg-primary rounded-full" />
<span>多语言智能播报</span>
</div>
</div>
<motion.button
className="mt-6 px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-light transition-colors flex items-center justify-center gap-2"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<Play size={18} />
了解更多
</motion.button>
</div>
</div>
</motion.div>
);
};
/** /**
* News 组件 - 新闻资讯页面 * News 组件 - 新闻资讯页面
*/ */
@@ -373,6 +513,9 @@ export const News: React.FC = () => {
{/* 新闻内容区域 */} {/* 新闻内容区域 */}
<section className="py-12"> <section className="py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* 数字人视频播放器 */}
<DigitalHumanVideo />
<div className="grid lg:grid-cols-3 gap-8"> <div className="grid lg:grid-cols-3 gap-8">
{/* 左侧新闻列表 */} {/* 左侧新闻列表 */}
<div className="lg:col-span-2"> <div className="lg:col-span-2">

53
src/pages/Services.tsx
View File

@@ -158,12 +158,19 @@ const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: ca
transition={{ delay: index * 0.1, duration: 0.5 }} transition={{ delay: index * 0.1, duration: 0.5 }}
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
> >
{/* 图片占位 */} {/* 案例图片 */}
<div className="aspect-[16/9] bg-gradient-to-br from-primary/5 to-primary-light/10 flex items-center justify-center"> <div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/5 to-primary-light/10">
<div className="text-primary/20"> <img
<Rocket size={48} /> src={`https://images.unsplash.com/photo-${
</div> caseItem.category === 'tech' ? '1518770660439-4636190af475' :
</div> caseItem.category === 'investment' ? '1460925895917-afdab827c52f' :
caseItem.category === 'consulting' ? '1552664730-d307ca884978' :
'1551288049-1bf847840e16'
}?w=800&h=450&fit=crop`}
alt={caseItem.title}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
/>
</div>
<div className="p-6"> <div className="p-6">
<span className="inline-block px-3 py-1 text-xs font-medium bg-accent/20 text-accent-dark rounded-full mb-3"> <span className="inline-block px-3 py-1 text-xs font-medium bg-accent/20 text-accent-dark rounded-full mb-3">
{categories.find(c => c.id === caseItem.category)?.label} {categories.find(c => c.id === caseItem.category)?.label}
@@ -349,13 +356,13 @@ export const Services: React.FC = () => {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<div className="aspect-square rounded-2xl bg-gradient-to-br from-primary to-primary-light p-8 flex items-center justify-center"> <div className="aspect-square rounded-2xl overflow-hidden shadow-xl">
<div className="text-center text-white"> <img
<PieChart size={80} className="mx-auto mb-6 opacity-80" /> src="https://images.unsplash.com/photo-1554224311-beee460ae6ba?w=800&h=800&fit=crop"
<div className="text-4xl font-bold mb-2">500亿</div> alt="金融服务 - 数据分析与财富管理"
<div className="text-lg opacity-80">管理资产规模</div> className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
</div> />
</div> </div>
</motion.div> </motion.div>
</div> </div>
@@ -368,13 +375,13 @@ export const Services: React.FC = () => {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<div className="aspect-square rounded-2xl bg-gradient-to-br from-accent to-accent-dark p-8 flex items-center justify-center"> <div className="aspect-square rounded-2xl overflow-hidden shadow-xl">
<div className="text-center text-primary-dark"> <img
<Cpu size={80} className="mx-auto mb-6 opacity-80" /> src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&h=800&fit=crop"
<div className="text-4xl font-bold mb-2">100+</div> alt="科技研发 - 数字化转型与创新"
<div className="text-lg opacity-80">技术专利</div> className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
</div> />
</div> </div>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -489,9 +496,9 @@ export const Services: React.FC = () => {
transition={{ delay: index * 0.1, duration: 0.5 }} transition={{ delay: index * 0.1, duration: 0.5 }}
whileHover={{ y: -3 }} whileHover={{ y: -3 }}
> >
<div className="w-16 h-16 rounded-lg bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center mb-4"> <div className="w-16 h-16 rounded-lg overflow-hidden mb-4 bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center">
<Building2 size={32} className="text-primary" /> <Building2 size={32} className="text-primary opacity-50" />
</div> </div>
<h4 className="font-semibold text-primary-dark"> <h4 className="font-semibold text-primary-dark">
{partner.name} {partner.name}
</h4> </h4>