manual save(2026-01-05 11:01)
This commit is contained in:
SiteAgent Bot
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
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';
|
||||
|
||||
/**
|
||||
@@ -40,137 +40,250 @@ export const Header: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'bg-white/95 backdrop-blur-sm shadow-md'
|
||||
: 'bg-white shadow-sm'
|
||||
}`}
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-[70px]">
|
||||
{/* Logo 区域 */}
|
||||
<>
|
||||
{/* 顶部信息栏 */}
|
||||
<motion.div
|
||||
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 ${
|
||||
isScrolled ? 'h-0 opacity-0 overflow-hidden' : 'h-10'
|
||||
}`}
|
||||
initial={{ y: -40 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<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 gap-6">
|
||||
<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
|
||||
to="/"
|
||||
className="flex items-center gap-3 group"
|
||||
className="flex items-center gap-3 group relative"
|
||||
aria-label="返回首页"
|
||||
>
|
||||
<motion.div
|
||||
className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary text-white"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
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, rotate: 5 }}
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
</Link>
|
||||
|
||||
{/* 桌面端导航菜单 */}
|
||||
{/* 桌面端导航菜单 - 增强版 */}
|
||||
<nav
|
||||
className="hidden md:flex items-center gap-1"
|
||||
className="hidden lg:flex items-center gap-1"
|
||||
role="navigation"
|
||||
aria-label="主导航"
|
||||
>
|
||||
{NAVIGATION_MENU.map((item) => (
|
||||
<Link
|
||||
{NAVIGATION_MENU.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`relative px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
||||
isActive(item.path)
|
||||
? 'text-primary'
|
||||
: 'text-gray-600 hover:text-primary'
|
||||
}`}
|
||||
aria-current={isActive(item.path) ? 'page' : undefined}
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
{item.label}
|
||||
{/* 活动状态指示器 */}
|
||||
{isActive(item.path) && (
|
||||
<Link
|
||||
to={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
|
||||
layoutId="activeIndicator"
|
||||
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-accent rounded-full"
|
||||
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
|
||||
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"
|
||||
initial={false}
|
||||
/>
|
||||
)}
|
||||
{/* 悬停效果 */}
|
||||
{!isActive(item.path) && (
|
||||
<span className="absolute inset-0 rounded-lg bg-primary/5 scale-0 transition-transform duration-200 group-hover:scale-100" />
|
||||
)}
|
||||
</Link>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* 桌面端 CTA 按钮 */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
{/* 桌面端操作区域 */}
|
||||
<div className="hidden lg:flex items-center gap-3">
|
||||
{/* 搜索按钮 */}
|
||||
<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 }}
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* 移动端菜单按钮 */}
|
||||
<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)}
|
||||
aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'}
|
||||
aria-expanded={isMobileMenuOpen}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 移动端菜单 */}
|
||||
{/* 移动端菜单 - 增强版 */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<motion.nav
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="md:hidden bg-white border-t border-gray-100 overflow-hidden"
|
||||
transition={{ duration: 0.3 }}
|
||||
className="lg:hidden bg-gradient-to-b from-white to-gray-50 border-t border-gray-100 overflow-hidden shadow-xl"
|
||||
role="navigation"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
<div className="px-4 py-4 space-y-2">
|
||||
{NAVIGATION_MENU.map((item) => (
|
||||
<Link
|
||||
<div className="px-4 py-6 space-y-3">
|
||||
{NAVIGATION_MENU.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`block px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 ${
|
||||
isActive(item.path)
|
||||
? 'bg-primary/5 text-primary'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
aria-current={isActive(item.path) ? 'page' : undefined}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
>
|
||||
{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
|
||||
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 }}
|
||||
>
|
||||
立即咨询
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.nav>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.header>
|
||||
</motion.header>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -212,12 +212,16 @@ export const About: React.FC = () => {
|
||||
viewport={{ once: true }}
|
||||
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="w-full h-full flex items-center justify-center text-white p-12 text-center">
|
||||
<div>
|
||||
<div className="text-6xl font-bold mb-4">诚裕集团</div>
|
||||
<div className="text-2xl opacity-80">诚信为本 · 裕及四方</div>
|
||||
<div className="mt-8 w-24 h-1 bg-accent mx-auto rounded-full" />
|
||||
<div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
|
||||
<img
|
||||
src="/images/about-office.jpg"
|
||||
alt="诚裕集团办公环境"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<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>
|
||||
@@ -367,10 +371,12 @@ export const About: React.FC = () => {
|
||||
transition={{ delay: index * 0.1, duration: 0.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">
|
||||
{member.name.charAt(0)}
|
||||
</div>
|
||||
{/* 团队成员头像 */}
|
||||
<div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden ring-4 ring-primary/10">
|
||||
<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">
|
||||
{member.name.charAt(0)}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-dark">
|
||||
{member.name}
|
||||
</h3>
|
||||
@@ -404,25 +410,25 @@ export const About: React.FC = () => {
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{honors.map((honor, index) => (
|
||||
<motion.div
|
||||
key={honor.name}
|
||||
className="flex items-center gap-4 p-5 bg-background rounded-xl hover:shadow-md transition-shadow"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ x: 5 }}
|
||||
>
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-accent/20 flex items-center justify-center">
|
||||
<Award size={24} className="text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-primary-dark">
|
||||
{honor.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">获得年份：{honor.year}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
key={honor.name}
|
||||
className="flex items-center gap-4 p-5 bg-background rounded-xl hover:shadow-md transition-shadow"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
whileHover={{ x: 5 }}
|
||||
>
|
||||
<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={28} className="text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-primary-dark">
|
||||
{honor.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500">获得年份：{honor.year}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -64,19 +64,42 @@ export const CategoriesPage: React.FC = () => {
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{loading
|
||||
? Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="bg-white p-6 rounded-lg shadow-sm animate-pulse">
|
||||
<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 key={i} className="bg-white rounded-lg shadow-sm overflow-hidden animate-pulse">
|
||||
<div className="aspect-[16/9] bg-gray-200"></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>
|
||||
))
|
||||
: categories.map((category) => (
|
||||
<a
|
||||
key={category.id}
|
||||
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>
|
||||
<p className="text-sm text-gray-600">查看该分类下的所有文章</p>
|
||||
<div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/10 to-primary-light/10">
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -108,6 +108,28 @@ export const CategoryDetail: React.FC = () => {
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<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">
|
||||
📂 {category?.title || '分类'}
|
||||
</h2>
|
||||
|
||||
@@ -402,64 +402,81 @@ export const Contact: React.FC = () => {
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.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">
|
||||
<MapPin size={48} className="text-primary mb-4" />
|
||||
<p className="text-primary-dark font-medium mb-2">
|
||||
诚裕集团总部
|
||||
</p>
|
||||
<p className="text-gray-500 text-sm text-center px-8">
|
||||
北京市朝阳区建国路88号诚裕大厦
|
||||
</p>
|
||||
<motion.button
|
||||
className="mt-4 px-6 py-2 bg-primary text-white rounded-lg text-sm"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
在地图中查看
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 地图和办公环境 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-2 mb-6">
|
||||
<div className="aspect-[4/3] rounded-xl overflow-hidden relative">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1200&h=900&fit=crop"
|
||||
alt="诚裕集团总部大楼 - 现代化办公大厦"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur-sm rounded-lg p-3 shadow-lg">
|
||||
<p className="text-primary-dark font-medium text-sm mb-1">
|
||||
📍 诚裕集团总部
|
||||
</p>
|
||||
<p className="text-gray-600 text-xs">
|
||||
北京市朝阳区建国路88号诚裕大厦
|
||||
</p>
|
||||
<motion.button
|
||||
className="mt-2 px-4 py-1 bg-primary text-white rounded text-xs hover:bg-primary-light transition-colors"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
在地图中查看
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 公司详细信息 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
||||
<h3 className="text-lg font-semibold text-primary-dark mb-4">
|
||||
公司信息
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">总部地址</p>
|
||||
<p className="text-primary-dark">
|
||||
{COMPANY_INFO.headquarters}诚裕大厦
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">服务热线</p>
|
||||
<p className="text-primary-dark">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">商务邮箱</p>
|
||||
<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>
|
||||
{/* 办公环境展示 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
|
||||
<div className="aspect-[16/9] overflow-hidden">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&h=675&fit=crop"
|
||||
alt="诚裕集团办公环境 - 现代化工作空间"
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 公司详细信息 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
|
||||
<h3 className="text-lg font-semibold text-primary-dark mb-4">
|
||||
公司信息
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">总部地址</p>
|
||||
<p className="text-primary-dark">
|
||||
{COMPANY_INFO.headquarters}诚裕大厦
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">服务热线</p>
|
||||
<p className="text-primary-dark">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail size={20} className="text-accent mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">商务邮箱</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Calendar,
|
||||
@@ -7,6 +7,10 @@ import {
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Tag,
|
||||
Play,
|
||||
Pause,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Header } from '../components/Header';
|
||||
@@ -168,17 +172,24 @@ const NewsCard: React.FC<{ news: typeof allNews[0]; index: number }> = ({
|
||||
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">
|
||||
<div className="absolute inset-0 flex items-center justify-center text-primary/20">
|
||||
<Tag size={48} />
|
||||
</div>
|
||||
<Link to={`/news/${news.id}`} className="block aspect-[16/9] relative overflow-hidden">
|
||||
<img
|
||||
src={`https://images.unsplash.com/photo-${
|
||||
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}
|
||||
</span>
|
||||
{/* 热门标签 */}
|
||||
{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} />
|
||||
热门
|
||||
</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 组件 - 新闻资讯页面
|
||||
*/
|
||||
@@ -373,6 +513,9 @@ export const News: React.FC = () => {
|
||||
{/* 新闻内容区域 */}
|
||||
<section className="py-12">
|
||||
<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="lg:col-span-2">
|
||||
|
||||
@@ -158,12 +158,19 @@ const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: ca
|
||||
transition={{ delay: index * 0.1, duration: 0.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="text-primary/20">
|
||||
<Rocket size={48} />
|
||||
</div>
|
||||
</div>
|
||||
{/* 案例图片 */}
|
||||
<div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/5 to-primary-light/10">
|
||||
<img
|
||||
src={`https://images.unsplash.com/photo-${
|
||||
caseItem.category === 'tech' ? '1518770660439-4636190af475' :
|
||||
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">
|
||||
<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}
|
||||
@@ -349,13 +356,13 @@ export const Services: React.FC = () => {
|
||||
viewport={{ once: true }}
|
||||
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="text-center text-white">
|
||||
<PieChart size={80} className="mx-auto mb-6 opacity-80" />
|
||||
<div className="text-4xl font-bold mb-2">500亿</div>
|
||||
<div className="text-lg opacity-80">管理资产规模</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-square rounded-2xl overflow-hidden shadow-xl">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1554224311-beee460ae6ba?w=800&h=800&fit=crop"
|
||||
alt="金融服务 - 数据分析与财富管理"
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -368,13 +375,13 @@ export const Services: React.FC = () => {
|
||||
viewport={{ once: true }}
|
||||
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="text-center text-primary-dark">
|
||||
<Cpu size={80} className="mx-auto mb-6 opacity-80" />
|
||||
<div className="text-4xl font-bold mb-2">100+</div>
|
||||
<div className="text-lg opacity-80">技术专利</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-square rounded-2xl overflow-hidden shadow-xl">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&h=800&fit=crop"
|
||||
alt="科技研发 - 数字化转型与创新"
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
@@ -489,9 +496,9 @@ export const Services: React.FC = () => {
|
||||
transition={{ delay: index * 0.1, duration: 0.5 }}
|
||||
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">
|
||||
<Building2 size={32} className="text-primary" />
|
||||
</div>
|
||||
<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 opacity-50" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-primary-dark">
|
||||
{partner.name}
|
||||
</h4>
|
||||
|
||||
Reference in New Issue
Block a user