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

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;