diff --git a/src/App.tsx b/src/App.tsx index 3c8f312..13122d5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ // The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. import React, {useState, useEffect} from "react"; +import Navbar from "./components/Navbar"; +import Footer from "./components/Footer"; +import Home from "./pages/Home"; const App: React.FC = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -32,1103 +35,14 @@ const App: React.FC = () => { const closeLoginModal = () => { setIsLoginModalOpen(false); }; - - // 即将登场的角色数据 - const upcomingCharacters = [ - { - id: 1, - name: "星璇法师", - role: "法师", - image: "", - description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。", - features: "星辰轨道 / 时空裂隙 / 引力操控", - color: "purple" - }, - { - id: 2, - name: "炎武士", - role: "战士", - image: "", - description: "融合古代武士精神与现代能量技术的战士。", - features: "能量刀刃 / 武士之魂 / 烈焰斩击", - color: "red" - }, - { - id: 3, - name: "生态猎手", - role: "射手", - image: "https://readdy.ai/api/search-image?query=A%20high-tech%20archer%20character%20with%20sleek%20armor%20and%20holographic%20bow%2C%20nature-themed%20accessories%2C%20standing%20in%20a%20dynamic%20pose%20against%20a%20dark%20misty%20background%20with%20green%20energy%20effects%2C%20high-quality%20gaming%20character%20render%2C%20detailed%20futuristic%20design&width=400&height=500&seq=upcoming3&orientation=portrait", - description: "运用生态能量的远程射手，善于控制战场环境。", - features: "自然之力 / 生态屏障 / 藤蔓控制", - color: "green" - } - ]; - - // 最新更新的角色数据 - const updatedCharacters = [ - { - id: 1, - name: "暗影刺客", - role: "刺客", - image: "https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg", - description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。", - changes: "基础攻击力 +15%，技能冷却时间 -10%" - }, - { - id: 2, - name: "元素法师", - role: "法师", - image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg", - description: "元素法师的控场能力得到加强，新增了区域冻结效果。", - changes: "法术穿透 +8%，控制效果持续时间 +1秒" - }, - { - id: 3, - name: "钢铁守卫", - role: "坦克", - image: "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg", - description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。", - changes: "护甲值 +20%，生命回复速度 +15%" - } - ]; - - const equipmentBuilds = [ - { - id: 1, - character: "暗影刺客", - avatar: - "https://public.readdy.ai/ai/img_res/5488e233cf11243801c148778a6c1d46.jpg", - items: [ - "暗影匕首", - "刺客护甲", - "速度之靴", - "致命宝石", - "隐形披风", - "破甲短剑", - ], - winRate: "68%", - usageRate: "42%", - tags: ["高爆发", "单体刺杀", "灵活机动"], - }, - { - id: 2, - character: "元素法师", - avatar: - "https://public.readdy.ai/ai/img_res/fc1ca2fe0c579530ebb48af702a00a69.jpg", - items: [ - "法师法杖", - "魔力长袍", - "法术之靴", - "魔法水晶", - "奥术宝珠", - "时间怀表", - ], - winRate: "62%", - usageRate: "38%", - tags: ["范围控制", "高法术伤害", "团战核心"], - }, - { - id: 3, - character: "钢铁守卫", - avatar: - "https://public.readdy.ai/ai/img_res/f2961785fd8feb60a369a8224515c980.jpg", - items: [ - "守护者盾牌", - "重型护甲", - "抵抗之靴", - "生命宝石", - "荆棘背心", - "反伤护符", - ], - winRate: "58%", - usageRate: "35%", - tags: ["高生存", "团队保护", "前排坦克"], - }, - { - id: 4, - character: "狂战士", - avatar: - "https://public.readdy.ai/ai/img_res/09dab9a842b7ba916d91f6ddffed0178.jpg", - items: [ - "狂战斧", - "战士护甲", - "狂暴之靴", - "力量宝石", - "嗜血项链", - "狂怒手套", - ], - winRate: "65%", - usageRate: "40%", - tags: ["高持续伤害", "团战切入", "半肉战士"], - }, - ]; - const battleData = [ - { - rank: 1, - character: "暗影刺客", - winRate: "68%", - pickRate: "42%", - banRate: "38%", - }, - { - rank: 2, - character: "元素法师", - winRate: "62%", - pickRate: "38%", - banRate: "25%", - }, - { - rank: 3, - character: "狂战士", - winRate: "65%", - pickRate: "40%", - banRate: "22%", - }, - { - rank: 4, - character: "钢铁守卫", - winRate: "58%", - pickRate: "35%", - banRate: "18%", - }, - { - rank: 5, - character: "神射手", - winRate: "59%", - pickRate: "32%", - banRate: "15%", - }, - ]; + return (
- {/* 导航栏 */} - - {/* 英雄区 */} -
-
-
-
-
- 游戏场景 -
- - /* -
-
- 游戏场景 -
-
-
- 游戏场景 -
-
-
-
-
- - 版本 3.8.5 现已上线 - -
-

- - 暗影崛起 - - 全新赛季来临 -

-

- 全新角色平衡调整，暗影刺客获得重做，元素系统全面升级，多项游戏体验优化。立即体验前所未有的战斗体验！ -

-
- - -
-
-
-
- {[0, 1, 2].map((index) => ( -
-
-
- {/* 最新角色更新区 */} -
-
-
- {/* 即将登场 */} -
-
-
-
- - 新英雄预告 - -
-

即将登场

-
- - 查看全部 - - -
-
- {upcomingCharacters.map((character) => ( -
-
-
- {character.role} -
- {character.name} -
-
-
-

{character.name}

- 即将登场 -
-

- {character.description} -

-
-

核心特性

-

{character.features}

-
- -
-
- ))} -
-
- {/* 最新更新 */} -
-
-
-
- - 平衡性调整 - -
-

最新更新

-
- - 查看全部 - - -
-
- {updatedCharacters.map((character) => ( -
-
-
- {character.role} -
- {character.name} -
-
-
-

{character.name}

- 最新更新 -
-

- {character.description} -

-
-

变更数据

-

{character.changes}

-
- -
-
- ))} -
-
-
-
-
- {/* 热门配装推荐 */} -
-
-
-

热门配装推荐

- - 更多配装 - - -
-
- {equipmentBuilds.map((build) => ( -
-
-
- {build.character} -
-

- {build.character} -

-
- - 胜率: {build.winRate} - - - 使用率: {build.usageRate} - -
-
-
-
-

推荐装备

-
- {build.items.map((item, index) => ( -
-
- -
-
- ))} -
-
-
- {build.tags.map((tag, index) => ( - - {tag} - - ))} -
- -
-
- ))} -
-
-
- {/* 对战数据板块 */} -
-
-
-

实时对战数据

- - 查看完整数据 - - -
-
-
-
-
-

- 角色使用率排行 -

-
- - - - - - - - - - - - {battleData.map((data) => ( - - - - - - - - ))} - -
- 排名 - - 角色 - - 胜率 - - 选取率 - - 禁用率 -
-
- {data.rank} -
- 		- {data.character} - - {data.winRate} - - {data.pickRate} - - {data.banRate} -
-
-
-
-
-
-
-
-

- 当前赛季 -

-
- 赛季名称 - 暗影崛起 -
-
- 开始时间 - 2025-03-15 -
-
- 结束时间 - 2025-06-15 -
-
- 剩余时间 - 66 天 -
-
-
-
-
-

- 最新比赛结果 -

-
-
-
- 职业联赛 - 2小时前 -
-
-
- - 龙族战队 - - - 3 - -
- VS -
- 1 - - 风暴战队 - -
-
-
-
-
- 职业联赛 - 5小时前 -
-
-
- - 火焰战队 - - - 3 - -
- VS -
- 2 - - 雷霆战队 - -
-
-
-
-
- 职业联赛 - 昨天 -
-
-
- - 幽灵战队 - - 0 -
- VS -
- - 3 - - - 星辰战队 - -
-
-
-
-
-
-
-
-
-
- {/* 登录/注册模态框 */} - {isLoginModalOpen && ( -
-
- - -
-
- -
-
-
-
-

- 登录账号 -

-
-
- - -
-
- - -
-
-
- - -
- -
- -
-
-
-
-
-
-
- - 或使用以下方式登录 - -
-
-
-
- - - -
-
- - - -
-
- - - -
-
-
-
-

- 还没有账号?{" "} - - 立即注册 - -

-
-
-
-
-
-
-
- )} - {/* 页脚 */} - + +
+ +
+
); }; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..167285b --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,116 @@ +import React from 'react'; + +const Footer: React.FC = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..bfce590 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,97 @@ +import React, { useState } from 'react'; + +interface NavbarProps { + onLoginClick: () => void; +} + +const Navbar: React.FC = ({ onLoginClick }) => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + return ( + + ); +}; + +export default Navbar; \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..3549704 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,665 @@ +import React, {useState, useEffect} from 'react'; + +const Home: React.FC = () => { + const [currentSlide, setCurrentSlide] = useState(0); + + // 轮播图数据 + const slides = [ + { + id: 1, + image: "https://public.readdy.ai/ai/img_res/524ed52dc79e61a10101d4b2290f77ff.jpg", + title: "暗影崛起", + subtitle: "全新赛季来临", + description: "全新角色平衡调整，暗影刺客获得重做，元素系统全面升级，多项游戏体验优化。立即体验前所未有的战斗体验！", + version: "版本 3.8.5 现已上线" + }, + { + id: 2, + image: "https://public.readdy.ai/ai/img_res/524ed52dc79e61a10101d4b2290f77ff.jpg", + title: "暗影刺客", + subtitle: "全新技能组合", + description: "暗影刺客获得全新技能组合，突进能力和爆发伤害大幅提升，成为战场上的致命杀手。", + version: "新英雄登场" + }, + { + id: 3, + image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg", + title: "元素法师", + subtitle: "控场能力加强", + description: "元素法师的控场能力得到全面加强，新增区域冻结效果，成为团战中的核心控制者。", + version: "平衡性调整" + } + ]; + + useEffect(() => { + const interval = setInterval(() => { + setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1)); + }, 5000); + return () => clearInterval(interval); + }, [slides.length]); + + // 手动切换轮播图 + const goToSlide = (index: number) => { + setCurrentSlide(index); + }; + + // 即将登场的角色数据 + const upcomingCharacters = [ + { + id: 1, + name: "星璇法师", + role: "法师", + image: "", + description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。", + features: "星辰轨道 / 时空裂隙 / 引力操控", + color: "purple" + }, + { + id: 2, + name: "炎武士", + role: "战士", + image: "", + description: "融合古代武士精神与现代能量技术的战士。", + features: "能量刀刃 / 武士之魂 / 烈焰斩击", + color: "red" + }, + { + id: 3, + name: "生态猎手", + role: "射手", + image: "https://readdy.ai/api/search-image?query=A%20high-tech%20archer%20character%20with%20sleek%20armor%20and%20holographic%20bow%2C%20nature-themed%20accessories%2C%20standing%20in%20a%20dynamic%20pose%20against%20a%20dark%20misty%20background%20with%20green%20energy%20effects%2C%20high-quality%20gaming%20character%20render%2C%20detailed%20futuristic%20design&width=400&height=500&seq=upcoming3&orientation=portrait", + description: "运用生态能量的远程射手，善于控制战场环境。", + features: "自然之力 / 生态屏障 / 藤蔓控制", + color: "green" + } + ]; + + // 最新更新的角色数据 + const updatedCharacters = [ + { + id: 1, + name: "暗影刺客", + role: "刺客", + image: "https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg", + description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。", + changes: "基础攻击力 +15%，技能冷却时间 -10%" + }, + { + id: 2, + name: "元素法师", + role: "法师", + image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg", + description: "元素法师的控场能力得到加强，新增了区域冻结效果。", + changes: "法术穿透 +8%，控制效果持续时间 +1秒" + }, + { + id: 3, + name: "钢铁守卫", + role: "坦克", + image: "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg", + description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。", + changes: "护甲值 +20%，生命回复速度 +15%" + } + ]; + + const battleData = [ + { + rank: 1, + character: "暗影刺客", + winRate: "68%", + pickRate: "42%", + banRate: "38%", + }, + { + rank: 2, + character: "元素法师", + winRate: "62%", + pickRate: "38%", + banRate: "25%", + }, + { + rank: 3, + character: "狂战士", + winRate: "65%", + pickRate: "40%", + banRate: "22%", + }, + { + rank: 4, + character: "钢铁守卫", + winRate: "58%", + pickRate: "35%", + banRate: "18%", + }, + { + rank: 5, + character: "神射手", + winRate: "59%", + pickRate: "32%", + banRate: "15%", + }, + ]; + const equipmentBuilds = [ + { + id: 1, + character: "暗影刺客", + avatar: + "https://public.readdy.ai/ai/img_res/5488e233cf11243801c148778a6c1d46.jpg", + items: [ + "暗影匕首", + "刺客护甲", + "速度之靴", + "致命宝石", + "隐形披风", + "破甲短剑", + ], + winRate: "68%", + usageRate: "42%", + tags: ["高爆发", "单体刺杀", "灵活机动"], + }, + { + id: 2, + character: "元素法师", + avatar: + "https://public.readdy.ai/ai/img_res/fc1ca2fe0c579530ebb48af702a00a69.jpg", + items: [ + "法师法杖", + "魔力长袍", + "法术之靴", + "魔法水晶", + "奥术宝珠", + "时间怀表", + ], + winRate: "62%", + usageRate: "38%", + tags: ["范围控制", "高法术伤害", "团战核心"], + }, + { + id: 3, + character: "钢铁守卫", + avatar: + "https://public.readdy.ai/ai/img_res/f2961785fd8feb60a369a8224515c980.jpg", + items: [ + "守护者盾牌", + "重型护甲", + "抵抗之靴", + "生命宝石", + "荆棘背心", + "反伤护符", + ], + winRate: "58%", + usageRate: "35%", + tags: ["高生存", "团队保护", "前排坦克"], + }, + { + id: 4, + character: "狂战士", + avatar: + "https://public.readdy.ai/ai/img_res/09dab9a842b7ba916d91f6ddffed0178.jpg", + items: [ + "狂战斧", + "战士护甲", + "狂暴之靴", + "力量宝石", + "嗜血项链", + "狂怒手套", + ], + winRate: "65%", + usageRate: "40%", + tags: ["高持续伤害", "团战切入", "半肉战士"], + }, + ]; + + return ( +
+ {/* 英雄区 */} +
+
+
+ {slides.map((slide, index) => ( +
+
+
+ {slide.title} +
+
+ ))} +
+
+
+
+ + {slides[currentSlide].version} + +
+

+ + {slides[currentSlide].title} + + {slides[currentSlide].subtitle} +

+

+ {slides[currentSlide].description} +

+
+ + +
+
+
+ {/* 轮播图指示器 */} +
+ {slides.map((_, index) => ( +
+
+
+ + {/* 最新角色更新区 */} +
+
+
+ {/* 即将登场 */} +
+
+
+
+ + 新英雄预告 + +
+

即将登场

+
+ + 查看全部 + + +
+
+ {upcomingCharacters.map((character) => ( +
+
+
+ {character.role} +
+ {character.name} +
+
+
+

{character.name}

+ 即将登场 +
+

+ {character.description} +

+
+

核心特性

+

{character.features}

+
+ +
+
+ ))} +
+
+ + {/* 最新更新 */} +
+
+
+
+ + 平衡性调整 + +
+

最新更新

+
+ + 查看全部 + + +
+
+ {updatedCharacters.map((character) => ( +
+
+
+ {character.role} +
+ {character.name} +
+
+
+

{character.name}

+ 最新更新 +
+

+ {character.description} +

+
+

变更数据

+

{character.changes}

+
+ +
+
+ ))} +
+
+
+
+
+ + {/* 热门配装推荐 */} +
+
+
+

热门配装推荐

+ + 更多配装 + + +
+
+ {equipmentBuilds.map((build) => ( +
+
+
+ {build.character} +
+

+ {build.character} +

+
+ + 胜率: {build.winRate} + + + 使用率: {build.usageRate} + +
+
+
+
+

推荐装备

+
+ {build.items.map((item, index) => ( +
+
+ +
+
+ ))} +
+
+
+ {build.tags.map((tag, index) => ( + + {tag} + + ))} +
+ +
+
+ ))} +
+
+
+ {/* 对战数据板块 */} +
+
+
+

实时对战数据

+ + 查看完整数据 + + +
+
+
+
+
+

+ 角色使用率排行 +

+
+ + + + + + + + + + + + {battleData.map((data) => ( + + + + + + + + ))} + +
+ 排名 + + 角色 + + 胜率 + + 选取率 + + 禁用率 +
+
+ {data.rank} +
+ 		+ {data.character} + + {data.winRate} + + {data.pickRate} + + {data.banRate} +
+
+
+
+
+
+
+
+

+ 当前赛季 +

+
+ 赛季名称 + 暗影崛起 +
+
+ 开始时间 + 2025-03-15 +
+
+ 结束时间 + 2025-06-15 +
+
+ 剩余时间 + 66 天 +
+
+
+
+
+

+ 最新比赛结果 +

+
+
+
+ 职业联赛 + 2小时前 +
+
+
+ + 龙族战队 + + + 3 + +
+ VS +
+ 1 + + 风暴战队 + +
+
+
+
+
+ 职业联赛 + 5小时前 +
+
+
+ + 火焰战队 + + + 3 + +
+ VS +
+ 2 + + 雷霆战队 + +
+
+
+
+
+ 职业联赛 + 昨天 +
+
+
+ + 幽灵战队 + + 0 +
+ VS +
+ + 3 + + + 星辰战队 + +
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default Home; \ No newline at end of file