init
This commit is contained in:
hu xiaotong
@@ -10,12 +10,12 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#1A1412]/95 backdrop-blur-md border-b border-[#C17F59]/30">
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#1A1412]/95 backdrop-blur-md border-b border-[#C17F59]/30 shadow-lg">
|
||||
<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">
|
||||
<Link to="/" className="text-2xl font-bold text-[#E6B17E]">
|
||||
<Link to="/" className="text-2xl font-bold text-[#E6B17E] hover:text-[#F5C28A] transition-colors duration-200">
|
||||
战神纪元
|
||||
</Link>
|
||||
</div>
|
||||
@@ -23,60 +23,60 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
<div className="flex items-baseline space-x-4">
|
||||
<Link
|
||||
to="/"
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium ${
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
location.pathname === "/"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
主页
|
||||
</Link>
|
||||
<Link
|
||||
to="/characters"
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium ${
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
location.pathname === "/characters"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
角色列表
|
||||
</Link>
|
||||
<Link
|
||||
to="/builds"
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium ${
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
location.pathname === "/builds"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
配装攻略
|
||||
</Link>
|
||||
<Link
|
||||
to="/battles"
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium ${
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
location.pathname === "/battles"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
对战信息
|
||||
</Link>
|
||||
<Link
|
||||
to="/news"
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium ${
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
location.pathname === "/news"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
资讯中心
|
||||
</Link>
|
||||
<Link
|
||||
to="/community"
|
||||
className={`px-3 py-2 rounded-md text-sm font-medium ${
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
location.pathname === "/community"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
社区
|
||||
@@ -87,7 +87,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
<div className="hidden md:block">
|
||||
<button
|
||||
onClick={onLoginClick}
|
||||
className="px-4 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
|
||||
className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
@@ -95,7 +95,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
<div className="-mr-2 flex md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="inline-flex items-center justify-center p-2 rounded-md text-[#C17F59] hover:text-[#E6B17E] hover:bg-[#2A211E] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#1A1412] focus:ring-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
className="inline-flex items-center justify-center p-2 rounded-md text-[#C17F59] hover:text-[#E6B17E] hover:bg-[#2A211E] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#1A1412] focus:ring-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200"
|
||||
>
|
||||
<span className="sr-only">打开主菜单</span>
|
||||
<i className={`fas ${isMenuOpen ? "fa-times" : "fa-bars"}`}></i>
|
||||
@@ -105,71 +105,71 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
</div>
|
||||
{/* 移动端菜单 */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30">
|
||||
<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30 shadow-lg">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<Link
|
||||
to="/"
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||
location.pathname === "/"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
主页
|
||||
</Link>
|
||||
<Link
|
||||
to="/characters"
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||
location.pathname === "/characters"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
角色列表
|
||||
</Link>
|
||||
<Link
|
||||
to="/builds"
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||
location.pathname === "/builds"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
配装攻略
|
||||
</Link>
|
||||
<Link
|
||||
to="/battles"
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||
location.pathname === "/battles"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
对战信息
|
||||
</Link>
|
||||
<Link
|
||||
to="/news"
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||
location.pathname === "/news"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
资讯中心
|
||||
</Link>
|
||||
<Link
|
||||
to="/community"
|
||||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
|
||||
location.pathname === "/community"
|
||||
? "text-[#E6B17E] bg-[#2A211E]"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
|
||||
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
|
||||
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
|
||||
} !rounded-button whitespace-nowrap cursor-pointer`}
|
||||
>
|
||||
社区
|
||||
</Link>
|
||||
<button
|
||||
onClick={onLoginClick}
|
||||
className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
|
||||
className="block w-full text-left px-4 py-3 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
|
||||
@@ -178,6 +178,7 @@ const Home: React.FC = () => {
|
||||
description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。",
|
||||
features: "星辰轨道 / 时空裂隙 / 引力操控",
|
||||
color: "purple",
|
||||
status: "即将登场"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -187,6 +188,7 @@ const Home: React.FC = () => {
|
||||
description: "融合古代武士精神与现代能量技术的战士。",
|
||||
features: "能量刀刃 / 武士之魂 / 烈焰斩击",
|
||||
color: "red",
|
||||
status: "即将登场"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -197,6 +199,37 @@ const Home: React.FC = () => {
|
||||
description: "运用生态能量的远程射手，善于控制战场环境。",
|
||||
features: "自然之力 / 生态屏障 / 藤蔓控制",
|
||||
color: "green",
|
||||
status: "即将登场"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "暗影刺客",
|
||||
role: "刺客",
|
||||
image:
|
||||
"https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
|
||||
description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
|
||||
changes: "基础攻击力 +15%，技能冷却时间 -10%",
|
||||
status: "最新更新"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "元素法师",
|
||||
role: "法师",
|
||||
image:
|
||||
"https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
|
||||
description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
|
||||
changes: "法术穿透 +8%，控制效果持续时间 +1秒",
|
||||
status: "最新更新"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "钢铁守卫",
|
||||
role: "坦克",
|
||||
image:
|
||||
"https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
|
||||
description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
|
||||
changes: "护甲值 +20%，生命回复速度 +15%",
|
||||
status: "最新更新"
|
||||
},
|
||||
];
|
||||
|
||||
@@ -436,140 +469,68 @@ const Home: React.FC = () => {
|
||||
<section className="py-24 relative pt-0">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#2A211E] to-[#1A1412]"></div>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative pb-24 border-b border-[#C17F59]/30">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* 即将登场 */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<div className="inline-block px-3 py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full mb-2 backdrop-blur-sm">
|
||||
<span className="text-[#E6B17E] text-sm font-semibold">
|
||||
新英雄预告
|
||||
<div className="inline-block px-3 py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full mb-2 backdrop-blur-sm">
|
||||
<span className="text-[#E6B17E] text-sm font-semibold">
|
||||
角色更新
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#E6B17E]">
|
||||
角色更新
|
||||
</h2>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
查看全部
|
||||
<i className="fas fa-arrow-right ml-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
||||
{upcomingCharacters.map((character) => (
|
||||
<div
|
||||
key={character.id}
|
||||
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
|
||||
>
|
||||
<div className="relative h-52 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 bg-gradient-to-r from-[#C17F59]/80 to-transparent px-2 py-1 rounded-br-lg z-10">
|
||||
<span className="text-[#E6B17E] font-medium text-xs">
|
||||
{character.role}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#E6B17E]">
|
||||
即将登场
|
||||
</h2>
|
||||
<img
|
||||
src={character.image}
|
||||
alt={character.name}
|
||||
className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
查看全部
|
||||
<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-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
|
||||
>
|
||||
<div className="relative h-40 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 bg-gradient-to-r from-[#C17F59]/80 to-transparent px-4 py-1 rounded-br-lg z-10">
|
||||
<span className="text-[#E6B17E] font-medium">
|
||||
{character.role}
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
src={character.image}
|
||||
alt={character.name}
|
||||
className="w-full h-full object-cover object-center 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-[#E6B17E]">
|
||||
{character.name}
|
||||
</h3>
|
||||
<span className="text-[#C17F59] text-sm">即将登场</span>
|
||||
</div>
|
||||
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
|
||||
{character.description}
|
||||
</p>
|
||||
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-2 rounded-md">
|
||||
<p className="text-[#C17F59] font-medium text-xs mb-1">
|
||||
核心特性
|
||||
</p>
|
||||
<p className="text-[#9B8579] text-xs line-clamp-1">
|
||||
{character.features}
|
||||
</p>
|
||||
</div>
|
||||
<button className="mt-3 w-full py-1.5 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 hover:from-[#C17F59]/30 hover:to-[#A66D4F]/30 text-[#E6B17E] rounded-md flex items-center justify-center text-sm transition-all duration-300">
|
||||
预约获取
|
||||
<i className="fas fa-chevron-right ml-2 text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h3 className="text-sm font-bold text-[#E6B17E]">
|
||||
{character.name}
|
||||
</h3>
|
||||
<span className="text-[#C17F59] text-xs">{character.status}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最新更新 */}
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<div className="inline-block px-3 py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full mb-2 backdrop-blur-sm">
|
||||
<span className="text-[#E6B17E] text-sm font-semibold">
|
||||
平衡性调整
|
||||
</span>
|
||||
<p className="text-[#9B8579] text-xs line-clamp-2 mb-2 leading-tight">
|
||||
{character.description}
|
||||
</p>
|
||||
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-1 rounded-md">
|
||||
<p className="text-[#C17F59] font-medium text-xs mb-0.5">
|
||||
{character.status === "即将登场" ? "核心特性" : "变更数据"}
|
||||
</p>
|
||||
<p className="text-[#9B8579] text-xs line-clamp-1">
|
||||
{character.status === "即将登场" ? character.features : character.changes}
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#E6B17E]">
|
||||
最新更新
|
||||
</h2>
|
||||
<button className="mt-2 w-full py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 hover:from-[#C17F59]/30 hover:to-[#A66D4F]/30 text-[#E6B17E] rounded-md flex items-center justify-center text-xs transition-all duration-300">
|
||||
{character.status === "即将登场" ? "预约获取" : "查看详情"}
|
||||
<i className="fas fa-chevron-right ml-1 text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
查看全部
|
||||
<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-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
|
||||
>
|
||||
<div className="relative h-40 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 bg-gradient-to-r from-[#C17F59]/80 to-transparent px-4 py-1 rounded-br-lg z-10">
|
||||
<span className="text-[#E6B17E] font-medium">
|
||||
{character.role}
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
src={character.image}
|
||||
alt={character.name}
|
||||
className="w-full h-full object-cover object-center 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-[#E6B17E]">
|
||||
{character.name}
|
||||
</h3>
|
||||
<span className="text-[#C17F59] text-sm">最新更新</span>
|
||||
</div>
|
||||
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
|
||||
{character.description}
|
||||
</p>
|
||||
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-2 rounded-md">
|
||||
<p className="text-[#C17F59] font-medium text-xs mb-1">
|
||||
变更数据
|
||||
</p>
|
||||
<p className="text-[#9B8579] text-xs line-clamp-1">
|
||||
{character.changes}
|
||||
</p>
|
||||
</div>
|
||||
<button className="mt-3 w-full py-1.5 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 hover:from-[#C17F59]/30 hover:to-[#A66D4F]/30 text-[#E6B17E] rounded-md flex items-center justify-center text-sm transition-all duration-300">
|
||||
查看详情
|
||||
<i className="fas fa-chevron-right ml-2 text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user