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-17 17:33:06 +08:00
parent 9a9998d2b6
commit 227e14839c
2 changed files with 129 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Navbar.tsx
View File

@@ -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>