diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b5c0a4a..c5b9a50 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -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 ( - -
-
- {/* Logo 区域 */} + <> + {/* 顶部信息栏 */} + +
+
+
+ + 400-123-4567 +
+
+ + contact@chengyu.com +
+
+
+ 欢迎来到诚裕集团官网 +
+ | + + / + +
+
+
+ + + {/* 主导航栏 */} + +
+
+ {/* Logo 区域 - 增强版 */} - + + {/* 光晕效果 */} +
- + 诚裕集团 -

Chengyu Group

+

CHENGYU GROUP

- {/* 桌面端导航菜单 */} + {/* 桌面端导航菜单 - 增强版 */} - {/* 桌面端 CTA 按钮 */} -
+ {/* 桌面端操作区域 */} +
+ {/* 搜索按钮 */} + + + + {/* 联系电话按钮 */} + - 立即咨询 + + 400-123-4567 + + + {/* CTA 按钮 - 渐变风格 */} + +
+
+ + 立即咨询 + + → + +
{/* 移动端菜单按钮 */} setIsMobileMenuOpen(!isMobileMenuOpen)} aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'} aria-expanded={isMobileMenuOpen} + whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > - {isMobileMenuOpen ? : } + + {isMobileMenuOpen ? : } +
- {/* 移动端菜单 */} + {/* 移动端菜单 - 增强版 */} {isMobileMenuOpen && ( -
- {NAVIGATION_MENU.map((item) => ( - + {NAVIGATION_MENU.map((item, index) => ( + - {item.label} - + +
+ {item.label} + {isActive(item.path) && ( + + )} +
+ + ))} -
+ + {/* 移动端联系方式 */} + + + + 400-123-4567 + + 立即咨询 -
+
)} - + + ); }; diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 9aac9f4..37bb06d 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -212,12 +212,16 @@ export const About: React.FC = () => { viewport={{ once: true }} transition={{ duration: 0.6, delay: 0.2 }} > -
-
-
-
诚裕集团
-
诚信为本 · 裕及四方
-
+
+ 诚裕集团办公环境 +
+
+
诚裕集团
+
诚信为本 · 裕及四方
@@ -367,10 +371,12 @@ export const About: React.FC = () => { transition={{ delay: index * 0.1, duration: 0.5 }} whileHover={{ y: -5 }} > - {/* 头像占位 */} -
- {member.name.charAt(0)} -
+ {/* 团队成员头像 */} +
+
+ {member.name.charAt(0)} +
+

{member.name}

@@ -404,25 +410,25 @@ export const About: React.FC = () => {
{honors.map((honor, index) => ( - -
- -
-
-

- {honor.name} -

-

获得年份：{honor.year}

-
- + +
+ +
+
+

+ {honor.name} +

+

获得年份：{honor.year}

+
+ ))}
diff --git a/src/pages/Categories.tsx b/src/pages/Categories.tsx index b062f1d..8bdaa02 100644 --- a/src/pages/Categories.tsx +++ b/src/pages/Categories.tsx @@ -64,19 +64,42 @@ export const CategoriesPage: React.FC = () => {
{loading ? Array.from({ length: 6 }).map((_, i) => ( - diff --git a/src/pages/CategoryDetail.tsx b/src/pages/CategoryDetail.tsx index a399d89..ea93701 100644 --- a/src/pages/CategoryDetail.tsx +++ b/src/pages/CategoryDetail.tsx @@ -108,6 +108,28 @@ export const CategoryDetail: React.FC = () => {
+ {category && ( +
+
+ {category.title} { + const target = e.target as HTMLImageElement; + target.style.display = 'none'; + target.nextElementSibling?.classList.remove('hidden'); + }} + /> +
+
+
📂
+

{category.title}

+
+
+
+
+ )}

📂 {category?.title || '分类'}

diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 6a73ada..7ad4346 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -402,64 +402,81 @@ export const Contact: React.FC = () => { viewport={{ once: true }} transition={{ duration: 0.6 }} > - {/* 地图占位 */} -
-
- -

- 诚裕集团总部 -

-

- 北京市朝阳区建国路88号诚裕大厦 -

- - 在地图中查看 - -
-
+ {/* 地图和办公环境 */} +
+
+ 诚裕集团总部大楼 - 现代化办公大厦 +
+

+ 📍 诚裕集团总部 +

+

+ 北京市朝阳区建国路88号诚裕大厦 +

+ + 在地图中查看 + +
+
+
- {/* 公司详细信息 */} -
-

- 公司信息 -

-
-
- -
-

总部地址

-

- {COMPANY_INFO.headquarters}诚裕大厦 -

-
-
-
- -
-

服务热线

-

{COMPANY_INFO.phone}

-
-
-
- -
-

商务邮箱

-

{COMPANY_INFO.email}

-
-
-
- -
-

工作时间

-

{COMPANY_INFO.workingHours}

-
-
-
-
+ {/* 办公环境展示 */} +
+
+ 诚裕集团办公环境 - 现代化工作空间 +
+
+ + {/* 公司详细信息 */} +
+

+ 公司信息 +

+
+
+ +
+

总部地址

+

+ {COMPANY_INFO.headquarters}诚裕大厦 +

+
+
+
+ +
+

服务热线

+

{COMPANY_INFO.phone}

+
+
+
+ +
+

商务邮箱

+

{COMPANY_INFO.email}

+
+
+
+ +
+

工作时间

+

{COMPANY_INFO.workingHours}

+
+
+
+
diff --git a/src/pages/News.tsx b/src/pages/News.tsx index 2b2ebd9..9b9e32a 100644 --- a/src/pages/News.tsx +++ b/src/pages/News.tsx @@ -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 }} > {/* 图片区域 */} - -
- -
+ + {news.title} +
{/* 分类标签 */} - + {category.label} {/* 热门标签 */} {news.isHot && ( - + 热门 @@ -309,6 +320,135 @@ const Pagination: React.FC<{ ); }; +/** + * 数字人视频播放器组件 + */ +const DigitalHumanVideo: React.FC = () => { + const videoRef = useRef(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 ( + +
+ {/* 视频播放器 */} +
+
+ + + {/* 播放控制按钮 */} +
+ + {isPlaying ? : } + +
+ + {/* 音量控制 */} +
+ + {isMuted ? : } + +
+ + {/* 直播标签 */} +
+ + + 数字人播报 + +
+
+
+ + {/* 视频信息 */} +
+
+ + AI 数字人 + +

+ 诚裕集团新闻播报 +

+

+ 欢迎收看诚裕集团最新资讯播报。我们使用先进的AI数字人技术，为您带来最新的企业动态、行业资讯和重要公告。 +

+
+ +
+
+
+ 24小时不间断播报 +
+
+
+ 实时更新企业资讯 +
+
+
+ 多语言智能播报 +
+
+ + + + 了解更多 + +
+
+ + ); +}; + /** * News 组件 - 新闻资讯页面 */ @@ -373,6 +513,9 @@ export const News: React.FC = () => { {/* 新闻内容区域 */}
+ {/* 数字人视频播放器 */} + +
{/* 左侧新闻列表 */}
diff --git a/src/pages/Services.tsx b/src/pages/Services.tsx index 9215b73..e56149d 100644 --- a/src/pages/Services.tsx +++ b/src/pages/Services.tsx @@ -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 }} > - {/* 图片占位 */} -
-
- -
-
+ {/* 案例图片 */} +
+ {caseItem.title} +
{categories.find(c => c.id === caseItem.category)?.label} @@ -349,13 +356,13 @@ export const Services: React.FC = () => { viewport={{ once: true }} transition={{ duration: 0.6 }} > -
-
- -
500亿
-
管理资产规模
-
-
+
+ 金融服务 - 数据分析与财富管理 +
@@ -368,13 +375,13 @@ export const Services: React.FC = () => { viewport={{ once: true }} transition={{ duration: 0.6 }} > -
-
- -
100+
-
技术专利
-
-
+
+ 科技研发 - 数字化转型与创新 +
{ transition={{ delay: index * 0.1, duration: 0.5 }} whileHover={{ y: -3 }} > -
- -
+
+ +

{partner.name}