init
This commit is contained in:
hxt
28
biome.json
Normal file
28
biome.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"formatWithErrors": false,
|
||||
"ignore": [],
|
||||
"attributePosition": "auto",
|
||||
"indentStyle": "tab",
|
||||
"indentWidth": 2,
|
||||
"lineEnding": "lf",
|
||||
"lineWidth": 80
|
||||
},
|
||||
"javascript": {
|
||||
"formatter": {
|
||||
"arrowParentheses":"always",
|
||||
"bracketSameLine": false,
|
||||
"bracketSpacing": true,
|
||||
"jsxQuoteStyle": "double",
|
||||
"quoteProperties": "asNeeded",
|
||||
"semicolons": "always",
|
||||
"trailingCommas": "all"
|
||||
}
|
||||
},
|
||||
"json": {
|
||||
"formatter": {
|
||||
"trailingCommas": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
156
package-lock.json
generated
156
package-lock.json
generated
@@ -13,6 +13,7 @@
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@rsbuild/core": "^1.3.1",
|
||||
"@rsbuild/plugin-react": "^1.1.1",
|
||||
"@tailwindcss/postcss": "^4.1.4",
|
||||
@@ -35,6 +36,161 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/biome": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/biome/-/biome-1.9.4.tgz",
|
||||
"integrity": "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"biome": "bin/biome"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/biome"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@biomejs/cli-darwin-arm64": "1.9.4",
|
||||
"@biomejs/cli-darwin-x64": "1.9.4",
|
||||
"@biomejs/cli-linux-arm64": "1.9.4",
|
||||
"@biomejs/cli-linux-arm64-musl": "1.9.4",
|
||||
"@biomejs/cli-linux-x64": "1.9.4",
|
||||
"@biomejs/cli-linux-x64-musl": "1.9.4",
|
||||
"@biomejs/cli-win32-arm64": "1.9.4",
|
||||
"@biomejs/cli-win32-x64": "1.9.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-darwin-arm64": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.4.tgz",
|
||||
"integrity": "sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-darwin-x64": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.9.4.tgz",
|
||||
"integrity": "sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-linux-arm64": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.9.4.tgz",
|
||||
"integrity": "sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-linux-arm64-musl": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.9.4.tgz",
|
||||
"integrity": "sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-linux-x64": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-linux-x64/-/cli-linux-x64-1.9.4.tgz",
|
||||
"integrity": "sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-linux-x64-musl": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-1.9.4.tgz",
|
||||
"integrity": "sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-win32-arm64": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.9.4.tgz",
|
||||
"integrity": "sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@biomejs/cli-win32-x64": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmmirror.com/@biomejs/cli-win32-x64/-/cli-win32-x64-1.9.4.tgz",
|
||||
"integrity": "sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=14.21.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-free": {
|
||||
"version": "6.7.2",
|
||||
"resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@rsbuild/core": "^1.3.1",
|
||||
"@rsbuild/plugin-react": "^1.1.1",
|
||||
"@tailwindcss/postcss": "^4.1.4",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
};
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
};
|
||||
|
||||
76
src/App.tsx
76
src/App.tsx
@@ -1,49 +1,51 @@
|
||||
// The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.
|
||||
import React, {useState, useEffect} from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Navbar from "./components/Navbar";
|
||||
import Footer from "./components/Footer";
|
||||
import Home from "./pages/Home";
|
||||
import LoginModal from "./components/LoginModal";
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev === 2 ? 0 : prev + 1));
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev === 2 ? 0 : prev + 1));
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// 添加 ESC 键关闭功能
|
||||
useEffect(() => {
|
||||
const handleEscKey = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isLoginModalOpen) {
|
||||
closeLoginModal();
|
||||
}
|
||||
};
|
||||
// 添加 ESC 键关闭功能
|
||||
useEffect(() => {
|
||||
const handleEscKey = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape" && isLoginModalOpen) {
|
||||
closeLoginModal();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleEscKey);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleEscKey);
|
||||
};
|
||||
}, [isLoginModalOpen]);
|
||||
window.addEventListener("keydown", handleEscKey);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleEscKey);
|
||||
};
|
||||
}, [isLoginModalOpen]);
|
||||
|
||||
const handleLoginClick = () => {
|
||||
setIsLoginModalOpen(true);
|
||||
};
|
||||
const closeLoginModal = () => {
|
||||
setIsLoginModalOpen(false);
|
||||
};
|
||||
const handleLoginClick = () => {
|
||||
setIsLoginModalOpen(true);
|
||||
};
|
||||
const closeLoginModal = () => {
|
||||
setIsLoginModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
|
||||
<Navbar onLoginClick={handleLoginClick} />
|
||||
<main className="pt-16">
|
||||
<Home />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
|
||||
<Navbar onLoginClick={handleLoginClick} />
|
||||
<main className="pt-16">
|
||||
<Home />
|
||||
</main>
|
||||
<Footer />
|
||||
<LoginModal isOpen={isLoginModalOpen} onClose={closeLoginModal} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
|
||||
@@ -1,116 +1,158 @@
|
||||
import React from 'react';
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<footer className="bg-[#1A1412] 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-[#E6B17E] mb-4">战神纪元</h3>
|
||||
<p className="text-[#9B8579] mb-4">
|
||||
最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
<i className="fab fa-weixin text-xl"></i>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
<i className="fab fa-qq text-xl"></i>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
<i className="fab fa-weibo text-xl"></i>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
<i className="fab fa-bilibili text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">快速链接</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
游戏下载
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
新手教程
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
更新日志
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
活动中心
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
商城
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">支持</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
常见问题
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
联系我们
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
用户协议
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
隐私政策
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
关于我们
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">联系我们</h3>
|
||||
<ul className="space-y-2">
|
||||
<li className="text-[#9B8579] flex items-center">
|
||||
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i>
|
||||
support@epicgame.com
|
||||
</li>
|
||||
<li className="text-[#9B8579] flex items-center">
|
||||
<i className="fas fa-phone mr-2 text-[#C17F59]"></i>
|
||||
400-123-4567
|
||||
</li>
|
||||
<li className="text-[#9B8579] flex items-center">
|
||||
<i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></i>
|
||||
上海市浦东新区张江高科技园区
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-[#C17F59]/30 text-center">
|
||||
<p className="text-[#9B8579] text-sm">
|
||||
© 2024 战神纪元. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
125
src/components/LoginModal.tsx
Normal file
125
src/components/LoginModal.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import React from "react";
|
||||
|
||||
interface LoginModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 transition-opacity z-50" aria-hidden="true">
|
||||
<div className="absolute inset-0 bg-black opacity-75"></div>
|
||||
</div>
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
<div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
|
||||
<div className="absolute top-4 right-4 z-50">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-full text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none transition-colors duration-200"
|
||||
aria-label="关闭"
|
||||
>
|
||||
<i className="fas fa-times text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
||||
<h3 className="text-2xl leading-6 font-bold text-white mb-6 text-center">
|
||||
登录账号
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<div className="mb-4">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1">
|
||||
电子邮箱
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-400 mb-1">
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
className="bg-gray-800 block w-full px-3 py-2 border-none rounded-md leading-5 text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:bg-gray-700 sm:text-sm !rounded-button"
|
||||
placeholder="输入密码"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
|
||||
/>
|
||||
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-400">
|
||||
记住我
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer">
|
||||
忘记密码?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-yellow-500 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-gray-900 text-gray-400">
|
||||
或使用以下方式登录
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-3 gap-3">
|
||||
<div>
|
||||
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
<i className="fab fa-weixin text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
<i className="fab fa-qq text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
|
||||
<i className="fab fa-weibo text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
还没有账号?{" "}
|
||||
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer">
|
||||
立即注册
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginModal;
|
||||
@@ -1,97 +1,133 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface NavbarProps {
|
||||
onLoginClick: () => void;
|
||||
onLoginClick: () => void;
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#1A1412]/95 backdrop-blur-md border-b border-[#C17F59]/30">
|
||||
<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 text-[#E6B17E]">
|
||||
战神纪元
|
||||
</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-[#E6B17E] bg-[#2A211E] hover:bg-[#3A2E2A] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
主页
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
角色列表
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
配装攻略
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
对战信息
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
资讯中心
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-2 rounded-md text-sm font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !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-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
登录
|
||||
</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-[#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"
|
||||
>
|
||||
<span className="sr-only">打开主菜单</span>
|
||||
<i className={`fas ${isMenuOpen ? "fa-times" : "fa-bars"}`}></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 移动端菜单 */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30">
|
||||
<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-[#E6B17E] bg-[#2A211E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
主页
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
角色列表
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
配装攻略
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
对战信息
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
资讯中心
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] !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-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
1471
src/pages/Home.tsx
1471
src/pages/Home.tsx
File diff suppressed because it is too large
Load Diff
@@ -6,18 +6,14 @@
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"useDefineForClassFields": true,
|
||||
|
||||
/* modules */
|
||||
"module": "ESNext",
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
|
||||
/* type checking */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false
|
||||
},
|
||||
"include": ["src", "postcss.config.mjs"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user