kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
hu xiaotong
2025-04-16 17:24:52 +08:00
parent 169fed0463
commit e2a32fa2d1
4 changed files with 887 additions and 1095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1102
src/App.tsx
View File

File diff suppressed because it is too large Load Diff

116
src/components/Footer.tsx Normal file
View File

@@ -0,0 +1,116 @@
import React from 'react';
const Footer: React.FC = () => {
return (
<footer className="bg-gray-900 pt-12 pb-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="text-xl font-bold text-white mb-4">战神纪元</h3>
<p className="text-gray-400 mb-4">
最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
</p>
<div className="flex space-x-4">
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
<i className="fab fa-weixin text-xl"></i>
</a>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
<i className="fab fa-qq text-xl"></i>
</a>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
<i className="fab fa-weibo text-xl"></i>
</a>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
<i className="fab fa-bilibili text-xl"></i>
</a>
</div>
</div>
<div>
<h3 className="text-lg font-semibold text-white mb-4">快速链接</h3>
<ul className="space-y-2">
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
游戏下载
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
新手教程
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
更新日志
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
活动中心
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
商城
</a>
</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold text-white mb-4">支持</h3>
<ul className="space-y-2">
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
常见问题
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
联系我们
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
用户协议
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
隐私政策
</a>
</li>
<li>
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
关于我们
</a>
</li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold text-white mb-4">联系我们</h3>
<ul className="space-y-2">
<li className="text-gray-400">
<i className="fas fa-envelope mr-2"></i>
support@epicgame.com
</li>
<li className="text-gray-400">
<i className="fas fa-phone mr-2"></i>
400-123-4567
</li>
<li className="text-gray-400">
<i className="fas fa-map-marker-alt mr-2"></i>
上海市浦东新区张江高科技园区
</li>
</ul>
</div>
</div>
<div className="mt-8 pt-8 border-t border-gray-800 text-center">
<p className="text-gray-400 text-sm">
© 2024 战神纪元. All rights reserved.
</p>
</div>
</div>
</footer>
);
};
export default Footer;

97
src/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,97 @@
import React, { useState } from 'react';
interface NavbarProps {
onLoginClick: () => void;
}
const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#0A0C10]/90 backdrop-blur-md border-b border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<span className="text-2xl font-bold bg-gradient-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent">
战神纪元
</span>
</div>
<div className="hidden md:block ml-10">
<div className="flex items-baseline space-x-4">
<a href="#" className="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-800 !rounded-button whitespace-nowrap cursor-pointer">
主页
</a>
<a href="#" className="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
角色列表
</a>
<a href="#" className="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
配装攻略
</a>
<a href="#" className="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
对战信息
</a>
<a href="#" className="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
资讯中心
</a>
<a href="#" className="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
社区
</a>
</div>
</div>
</div>
<div className="hidden md:block">
<button
onClick={onLoginClick}
className="px-4 py-2 rounded-md text-sm font-medium text-white bg-yellow-500 hover:bg-yellow-600 !rounded-button whitespace-nowrap cursor-pointer"
>
登录
</button>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white !rounded-button whitespace-nowrap cursor-pointer"
>
<span className="sr-only">打开主菜单</span>
<i className={`fas ${isMenuOpen ? "fa-times" : "fa-bars"}`}></i>
</button>
</div>
</div>
</div>
{/* 移动端菜单 */}
{isMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-800 !rounded-button whitespace-nowrap cursor-pointer">
主页
</a>
<a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
角色列表
</a>
<a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
配装攻略
</a>
<a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
对战信息
</a>
<a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
资讯中心
</a>
<a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white !rounded-button whitespace-nowrap cursor-pointer">
社区
</a>
<button
onClick={onLoginClick}
className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white bg-yellow-500 hover:bg-yellow-600 !rounded-button whitespace-nowrap cursor-pointer"
>
登录
</button>
</div>
</div>
)}
</nav>
);
};
export default Navbar;

665
src/pages/Home.tsx Normal file
View File

@@ -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 (
<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
{/* 英雄区 */}
<div className="pt-16 relative">
<div className="relative h-[600px] overflow-hidden">
<div className="absolute inset-0 z-0">
{slides.map((slide, index) => (
<div
key={slide.id}
className={`absolute inset-0 transition-opacity duration-1000 ${
currentSlide === index ? "opacity-100" : "opacity-0"
}`}
>
<div className="absolute inset-0 bg-gradient-to-r from-[#0A0C10] via-[#0A0C10]/80 to-transparent z-10"></div>
<div className="absolute inset-0 overflow-hidden">
<img
src={slide.image}
alt={slide.title}
className="h-full object-cover object-top"
/>
</div>
</div>
))}
</div>
<div className="relative z-10 flex items-center h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl">
<div className="inline-block px-3 py-1 mb-4 bg-yellow-500/20 border border-yellow-500 rounded-full">
<span className="text-yellow-400 text-sm font-semibold">
{slides[currentSlide].version}
</span>
</div>
<h1 className="text-5xl font-bold mb-4 leading-tight">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-yellow-200">
{slides[currentSlide].title}
</span>
<span className="block text-white mt-2">{slides[currentSlide].subtitle}</span>
</h1>
<p className="text-xl text-gray-300 mb-8">
{slides[currentSlide].description}
</p>
<div className="flex space-x-4">
<button className="px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-400 rounded-md font-medium text-black shadow-lg hover:from-yellow-400 hover:to-yellow-300 transition-all duration-300 !rounded-button whitespace-nowrap cursor-pointer">
查看更新详情
</button>
<button className="px-6 py-3 bg-gray-800 border border-yellow-500 rounded-md font-medium text-yellow-500 hover:bg-gray-700 transition-colors duration-300 !rounded-button whitespace-nowrap cursor-pointer">
立即更新
</button>
</div>
</div>
</div>
{/* 轮播图指示器 */}
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 flex space-x-2">
{slides.map((_, index) => (
<button
key={index}
onClick={() => goToSlide(index)}
className={`w-3 h-3 rounded-full transition-all duration-300 ${
currentSlide === index
? "bg-yellow-500 w-8"
: "bg-gray-500 hover:bg-gray-400"
}`}
/>
))}
</div>
</div>
</div>
{/* 最新角色更新区 */}
<section className="py-16 bg-[#0A0C10]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* 即将登场 */}
<div>
<div className="flex justify-between items-center mb-6">
<div>
<div
className="inline-block px-3 py-1 bg-yellow-500/20 border border-yellow-500 rounded-full mb-2">
<span className="text-yellow-400 text-sm font-semibold">
新英雄预告
</span>
</div>
<h2 className="text-2xl font-bold text-white">即将登场</h2>
</div>
<a href="#"
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer">
查看全部
<i className="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{upcomingCharacters.map((character) => (
<div
key={character.id}
className={`bg-gradient-to-br from-${character.color}-500/20 to-blue-500/20 rounded-lg overflow-hidden border border-${character.color}-500/30 hover:border-${character.color}-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-${character.color}-500/10 cursor-pointer`}
>
<div className="relative h-40 overflow-hidden">
<div
className={`absolute top-0 left-0 bg-gradient-to-r from-${character.color}-500/80 to-transparent px-4 py-1 rounded-br-lg z-10`}>
<span className="text-white font-medium">{character.role}</span>
</div>
<img
src={character.image}
alt={character.name}
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
/>
</div>
<div className="p-4">
<div className="flex items-center justify-between mb-2">
<h3 className="text-lg font-bold text-white">{character.name}</h3>
<span className={`text-${character.color}-400 text-sm`}>即将登场</span>
</div>
<p className="text-gray-400 text-sm line-clamp-2 mb-3 leading-tight">
{character.description}
</p>
<div className="bg-gray-800/50 p-2 rounded-md">
<p className={`text-${character.color}-400 font-medium text-xs mb-1`}>核心特性</p>
<p className="text-gray-300 text-xs line-clamp-1">{character.features}</p>
</div>
<button
className={`mt-3 w-full py-1.5 bg-${character.color}-500/20 hover:bg-${character.color}-500/30 text-${character.color}-300 rounded-md flex items-center justify-center text-sm`}>
预约获取
<i className="fas fa-chevron-right ml-2 text-xs"></i>
</button>
</div>
</div>
))}
</div>
</div>
{/* 最新更新 */}
<div>
<div className="flex justify-between items-center mb-6">
<div>
<div
className="inline-block px-3 py-1 bg-yellow-500/20 border border-yellow-500 rounded-full mb-2">
<span className="text-yellow-400 text-sm font-semibold">
平衡性调整
</span>
</div>
<h2 className="text-2xl font-bold text-white">最新更新</h2>
</div>
<a href="#"
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer">
查看全部
<i className="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{updatedCharacters.map((character) => (
<div
key={character.id}
className="bg-gradient-to-br from-yellow-500/20 to-blue-500/20 rounded-lg overflow-hidden border border-yellow-500/30 hover:border-yellow-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-yellow-500/10 cursor-pointer"
>
<div className="relative h-40 overflow-hidden">
<div
className="absolute top-0 left-0 bg-gradient-to-r from-yellow-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
<span className="text-white font-medium">{character.role}</span>
</div>
<img
src={character.image}
alt={character.name}
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
/>
</div>
<div className="p-4">
<div className="flex items-center justify-between mb-2">
<h3 className="text-lg font-bold text-white">{character.name}</h3>
<span className="text-yellow-400 text-sm">最新更新</span>
</div>
<p className="text-gray-400 text-sm line-clamp-2 mb-3 leading-tight">
{character.description}
</p>
<div className="bg-gray-800/50 p-2 rounded-md">
<p className="text-yellow-400 font-medium text-xs mb-1">变更数据</p>
<p className="text-gray-300 text-xs line-clamp-1">{character.changes}</p>
</div>
<button
className="mt-3 w-full py-1.5 bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-300 rounded-md flex items-center justify-center text-sm">
查看详情
<i className="fas fa-chevron-right ml-2 text-xs"></i>
</button>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* 热门配装推荐 */}
<section className="py-16 bg-gray-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center mb-10">
<h2 className="text-3xl font-bold text-white">热门配装推荐</h2>
<a
href="#"
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer"
>
更多配装
<i className="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{equipmentBuilds.map((build) => (
<div
key={build.id}
className="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition-all duration-300 cursor-pointer"
>
<div className="p-5">
<div className="flex items-center mb-4">
<img
src={build.avatar}
alt={build.character}
className="w-12 h-12 rounded-full border-2 border-yellow-500"
/>
<div className="ml-3">
<h3 className="text-lg font-bold text-white">
{build.character}
</h3>
<div className="flex items-center">
<span className="text-yellow-500 text-sm mr-3">
胜率: {build.winRate}
</span>
<span className="text-gray-400 text-sm">
使用率: {build.usageRate}
</span>
</div>
</div>
</div>
<div className="bg-gray-900 p-3 rounded-md mb-4">
<p className="text-gray-300 font-medium mb-2">推荐装备</p>
<div className="grid grid-cols-6 gap-2">
{build.items.map((item, index) => (
<div
key={index}
className="bg-gray-800 rounded-md p-1 flex items-center justify-center"
>
<div
className="w-8 h-8 rounded-md bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
<i className="fas fa-shield-alt text-yellow-500"></i>
</div>
</div>
))}
</div>
</div>
<div className="flex flex-wrap gap-2 mb-4">
{build.tags.map((tag, index) => (
<span
key={index}
className="px-2 py-1 bg-gray-700 text-gray-300 rounded-md text-xs"
>
{tag}
</span>
))}
</div>
<button
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
查看详细配装
<i className="fas fa-chevron-right ml-2 text-xs"></i>
</button>
</div>
</div>
))}
</div>
</div>
</section>
{/* 对战数据板块 */}
<section className="py-16 bg-[#0A0C10]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center mb-10">
<h2 className="text-3xl font-bold text-white">实时对战数据</h2>
<a
href="#"
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer"
>
查看完整数据
<i className="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="lg:col-span-2">
<div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800">
<div className="p-5">
<h3 className="text-xl font-bold mb-4 text-white">
角色使用率排行
</h3>
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-800">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
排名
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
角色
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
胜率
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
选取率
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
禁用率
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-800">
{battleData.map((data) => (
<tr key={data.rank} className="hover:bg-gray-800">
<td className="px-6 py-4 whitespace-nowrap">
<div
className={`w-6 h-6 rounded-full flex items-center justify-center ${
data.rank <= 3
? "bg-yellow-500 text-black"
: "bg-gray-700 text-white"
}`}
>
{data.rank}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">
{data.character}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
{data.winRate}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
{data.pickRate}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
{data.banRate}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div>
<div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 mb-6">
<div className="p-5">
<h3 className="text-xl font-bold mb-4 text-white">
当前赛季
</h3>
<div className="flex items-center justify-between mb-4">
<span className="text-gray-400">赛季名称</span>
<span className="text-white font-medium">暗影崛起</span>
</div>
<div className="flex items-center justify-between mb-4">
<span className="text-gray-400">开始时间</span>
<span className="text-white font-medium">2025-03-15</span>
</div>
<div className="flex items-center justify-between mb-4">
<span className="text-gray-400">结束时间</span>
<span className="text-white font-medium">2025-06-15</span>
</div>
<div className="flex items-center justify-between">
<span className="text-gray-400">剩余时间</span>
<span className="text-yellow-500 font-medium">66 天</span>
</div>
</div>
</div>
<div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800">
<div className="p-5">
<h3 className="text-xl font-bold mb-4 text-white">
最新比赛结果
</h3>
<div className="space-y-4">
<div className="bg-gray-800 p-3 rounded-md">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-400 text-sm">职业联赛</span>
<span className="text-yellow-500 text-sm">2小时前</span>
</div>
<div className="flex justify-between items-center">
<div className="flex items-center">
<span className="font-medium text-white">
龙族战队
</span>
<span className="mx-2 text-green-500 font-bold">
3
</span>
</div>
<span className="text-gray-400">VS</span>
<div className="flex items-center">
<span className="mx-2 text-red-500 font-bold">1</span>
<span className="font-medium text-white">
风暴战队
</span>
</div>
</div>
</div>
<div className="bg-gray-800 p-3 rounded-md">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-400 text-sm">职业联赛</span>
<span className="text-yellow-500 text-sm">5小时前</span>
</div>
<div className="flex justify-between items-center">
<div className="flex items-center">
<span className="font-medium text-white">
火焰战队
</span>
<span className="mx-2 text-green-500 font-bold">
3
</span>
</div>
<span className="text-gray-400">VS</span>
<div className="flex items-center">
<span className="mx-2 text-red-500 font-bold">2</span>
<span className="font-medium text-white">
雷霆战队
</span>
</div>
</div>
</div>
<div className="bg-gray-800 p-3 rounded-md">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-400 text-sm">职业联赛</span>
<span className="text-yellow-500 text-sm">昨天</span>
</div>
<div className="flex justify-between items-center">
<div className="flex items-center">
<span className="font-medium text-white">
幽灵战队
</span>
<span className="mx-2 text-red-500 font-bold">0</span>
</div>
<span className="text-gray-400">VS</span>
<div className="flex items-center">
<span className="mx-2 text-green-500 font-bold">
3
</span>
<span className="font-medium text-white">
星辰战队
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default Home;