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 16:12:30 +08:00
parent d53355859b
commit 169fed0463
2 changed files with 88 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/index.html
View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<title>战神纪元</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

209
src/App.tsx
View File

@@ -32,44 +32,66 @@ const App: React.FC = () => {
const closeLoginModal = () => {
setIsLoginModalOpen(false);
};
const characters = [
// 即将登场的角色数据
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",
image: "https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
changes: "基础攻击力 +15%，技能冷却时间 -10%",
changes: "基础攻击力 +15%，技能冷却时间 -10%"
},
{
id: 2,
name: "元素法师",
role: "法师",
image:
"https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
changes: "法术穿透 +8%，控制效果持续时间 +1秒",
changes: "法术穿透 +8%，控制效果持续时间 +1秒"
},
{
id: 3,
name: "钢铁守卫",
role: "坦克",
image:
"https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
image: "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
changes: "护甲值 +20%，生命回复速度 +15%",
},
{
id: 4,
name: "狂战士",
role: "战士",
image:
"https://public.readdy.ai/ai/img_res/38093515cf7120e0f8fe258becedcf96.jpg",
description: "狂战士获得了全新的怒气系统，可以在战斗中积累更多能量。",
changes: "暴击率 +12%，攻击速度 +10%",
},
changes: "护甲值 +20%，生命回复速度 +15%"
}
];
const equipmentBuilds = [
{
id: 1,
@@ -441,112 +463,40 @@ const App: React.FC = () => {
</a>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{upcomingCharacters.map((character) => (
<div
className="bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-lg overflow-hidden border border-purple-500/30 hover:border-purple-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-purple-500/10 cursor-pointer">
<div className="relative h-48 overflow-hidden">
<div
className="absolute top-0 left-0 bg-gradient-to-r from-purple-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
<span className="text-white font-medium">法师</span>
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=""
alt="星璇法师"
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-5">
<div className="p-4">
<div className="flex items-center justify-between mb-2">
<h3 className="text-xl font-bold text-white">星璇法师</h3>
<span className="text-purple-400 text-sm">即将登场</span>
<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 mb-4">
掌控星辰能量的神秘法师，可以操纵时空进行战斗。
</p>
<div className="bg-gray-800/50 p-3 rounded-md">
<p className="text-purple-400 font-medium mb-1">
核心特性
</p>
<p className="text-gray-300">
星辰轨道 / 时空裂隙 / 引力操控
<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-4 w-full py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 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
className="bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-lg overflow-hidden border border-red-500/30 hover:border-red-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-red-500/10 cursor-pointer">
<div className="relative h-48 overflow-hidden">
<div
className="absolute top-0 left-0 bg-gradient-to-r from-red-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
<span className="text-white font-medium">战士</span>
</div>
<img
src=''
alt="炎武士"
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
/>
</div>
<div className="p-5">
<div className="flex items-center justify-between mb-2">
<h3 className="text-xl font-bold text-white">炎武士</h3>
<span className="text-red-400 text-sm">即将登场</span>
</div>
<p className="text-gray-400 mb-4">
融合古代武士精神与现代能量技术的战士。
</p>
<div className="bg-gray-800/50 p-3 rounded-md">
<p className="text-red-400 font-medium mb-1">核心特性</p>
<p className="text-gray-300">
能量刀刃 / 武士之魂 / 烈焰斩击
</p>
</div>
<button
className="mt-4 w-full py-2 bg-red-500/20 hover:bg-red-500/30 text-red-300 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
className="bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-lg overflow-hidden border border-green-500/30 hover:border-green-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-green-500/10 cursor-pointer">
<div className="relative h-48 overflow-hidden">
<div
className="absolute top-0 left-0 bg-gradient-to-r from-green-500/80 to-transparent px-4 py-1 rounded-br-lg z-10">
<span className="text-white font-medium">射手</span>
</div>
<img
src="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"
alt="生态猎手"
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
/>
</div>
<div className="p-5">
<div className="flex items-center justify-between mb-2">
<h3 className="text-xl font-bold text-white">生态猎手</h3>
<span className="text-green-400 text-sm">即将登场</span>
</div>
<p className="text-gray-400 mb-4">
运用生态能量的远程射手，善于控制战场环境。
</p>
<div className="bg-gray-800/50 p-3 rounded-md">
<p className="text-green-400 font-medium mb-1">
核心特性
</p>
<p className="text-gray-300">
自然之力 / 生态屏障 / 藤蔓控制
</p>
</div>
<button
className="mt-4 w-full py-2 bg-green-500/20 hover:bg-green-500/30 text-green-300 rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
<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>
{/* 最新更新 */}
@@ -569,18 +519,15 @@ const App: React.FC = () => {
<i className="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
{characters.map((character) => (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{updatedCharacters.map((character) => (
<div
key={character.id}
className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-yellow-500 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-yellow-500/10 cursor-pointer"
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-48 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-black font-medium">
{character.role}
</span>
<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}
@@ -588,21 +535,19 @@ const App: React.FC = () => {
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
/>
</div>
<div className="p-5">
<h3 className="text-xl font-bold mb-2 text-white">
{character.name}
</h3>
<p className="text-gray-400 mb-4">
<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 p-3 rounded-md">
<p className="text-yellow-400 font-medium mb-1">
变更数据
</p>
<p className="text-gray-300">{character.changes}</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-4 w-full py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
<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>