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"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "1.9.4",
|
||||||
"@rsbuild/core": "^1.3.1",
|
"@rsbuild/core": "^1.3.1",
|
||||||
"@rsbuild/plugin-react": "^1.1.1",
|
"@rsbuild/plugin-react": "^1.1.1",
|
||||||
"@tailwindcss/postcss": "^4.1.4",
|
"@tailwindcss/postcss": "^4.1.4",
|
||||||
@@ -35,6 +36,161 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"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": {
|
"node_modules/@fortawesome/fontawesome-free": {
|
||||||
"version": "6.7.2",
|
"version": "6.7.2",
|
||||||
"resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
|
"resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "1.9.4",
|
||||||
"@rsbuild/core": "^1.3.1",
|
"@rsbuild/core": "^1.3.1",
|
||||||
"@rsbuild/plugin-react": "^1.1.1",
|
"@rsbuild/plugin-react": "^1.1.1",
|
||||||
"@tailwindcss/postcss": "^4.1.4",
|
"@tailwindcss/postcss": "^4.1.4",
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import React, {useState, useEffect} from "react";
|
|||||||
import Navbar from "./components/Navbar";
|
import Navbar from "./components/Navbar";
|
||||||
import Footer from "./components/Footer";
|
import Footer from "./components/Footer";
|
||||||
import Home from "./pages/Home";
|
import Home from "./pages/Home";
|
||||||
|
import LoginModal from "./components/LoginModal";
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
@@ -18,14 +19,14 @@ const App: React.FC = () => {
|
|||||||
// 添加 ESC 键关闭功能
|
// 添加 ESC 键关闭功能
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleEscKey = (event: KeyboardEvent) => {
|
const handleEscKey = (event: KeyboardEvent) => {
|
||||||
if (event.key === 'Escape' && isLoginModalOpen) {
|
if (event.key === "Escape" && isLoginModalOpen) {
|
||||||
closeLoginModal();
|
closeLoginModal();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener('keydown', handleEscKey);
|
window.addEventListener("keydown", handleEscKey);
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('keydown', handleEscKey);
|
window.removeEventListener("keydown", handleEscKey);
|
||||||
};
|
};
|
||||||
}, [isLoginModalOpen]);
|
}, [isLoginModalOpen]);
|
||||||
|
|
||||||
@@ -43,6 +44,7 @@ const App: React.FC = () => {
|
|||||||
<Home />
|
<Home />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
<LoginModal isOpen={isLoginModalOpen} onClose={closeLoginModal} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,110 +1,152 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
|
|
||||||
const Footer: React.FC = () => {
|
const Footer: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-gray-900 pt-12 pb-8">
|
<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="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 className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-xl font-bold text-white mb-4">战神纪元</h3>
|
<h3 className="text-xl font-bold text-[#E6B17E] mb-4">战神纪元</h3>
|
||||||
<p className="text-gray-400 mb-4">
|
<p className="text-[#9B8579] mb-4">
|
||||||
最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
|
最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
|
||||||
</p>
|
</p>
|
||||||
<div className="flex space-x-4">
|
<div className="flex space-x-4">
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
<i className="fab fa-weixin text-xl"></i>
|
<i className="fab fa-weixin text-xl"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
<i className="fab fa-qq text-xl"></i>
|
<i className="fab fa-qq text-xl"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
<i className="fab fa-weibo text-xl"></i>
|
<i className="fab fa-weibo text-xl"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
<i className="fab fa-bilibili text-xl"></i>
|
<i className="fab fa-bilibili text-xl"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-white mb-4">快速链接</h3>
|
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">快速链接</h3>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
游戏下载
|
游戏下载
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
新手教程
|
新手教程
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
更新日志
|
更新日志
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
活动中心
|
活动中心
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
商城
|
商城
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-white mb-4">支持</h3>
|
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">支持</h3>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
常见问题
|
常见问题
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
联系我们
|
联系我们
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
用户协议
|
用户协议
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
隐私政策
|
隐私政策
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" className="text-gray-400 hover:text-white cursor-pointer">
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
||||||
|
>
|
||||||
关于我们
|
关于我们
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold text-white mb-4">联系我们</h3>
|
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">联系我们</h3>
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
<li className="text-gray-400">
|
<li className="text-[#9B8579] flex items-center">
|
||||||
<i className="fas fa-envelope mr-2"></i>
|
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i>
|
||||||
support@epicgame.com
|
support@epicgame.com
|
||||||
</li>
|
</li>
|
||||||
<li className="text-gray-400">
|
<li className="text-[#9B8579] flex items-center">
|
||||||
<i className="fas fa-phone mr-2"></i>
|
<i className="fas fa-phone mr-2 text-[#C17F59]"></i>
|
||||||
400-123-4567
|
400-123-4567
|
||||||
</li>
|
</li>
|
||||||
<li className="text-gray-400">
|
<li className="text-[#9B8579] flex items-center">
|
||||||
<i className="fas fa-map-marker-alt mr-2"></i>
|
<i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></i>
|
||||||
上海市浦东新区张江高科技园区
|
上海市浦东新区张江高科技园区
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 pt-8 border-t border-gray-800 text-center">
|
<div className="mt-8 pt-8 border-t border-[#C17F59]/30 text-center">
|
||||||
<p className="text-gray-400 text-sm">
|
<p className="text-[#9B8579] text-sm">
|
||||||
© 2024 战神纪元. All rights reserved.
|
© 2024 战神纪元. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
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,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
|
|
||||||
interface NavbarProps {
|
interface NavbarProps {
|
||||||
onLoginClick: () => void;
|
onLoginClick: () => void;
|
||||||
@@ -8,33 +8,51 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#0A0C10]/90 backdrop-blur-md border-b border-gray-800">
|
<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="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 justify-between h-16">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="flex-shrink-0">
|
<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 className="text-2xl font-bold text-[#E6B17E]">
|
||||||
战神纪元
|
战神纪元
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:block ml-10">
|
<div className="hidden md:block ml-10">
|
||||||
<div className="flex items-baseline space-x-4">
|
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
@@ -43,7 +61,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<button
|
<button
|
||||||
onClick={onLoginClick}
|
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"
|
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>
|
</button>
|
||||||
@@ -51,7 +69,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
<div className="-mr-2 flex md:hidden">
|
<div className="-mr-2 flex md:hidden">
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
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"
|
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>
|
<span className="sr-only">打开主菜单</span>
|
||||||
<i className={`fas ${isMenuOpen ? "fa-times" : "fa-bars"}`}></i>
|
<i className={`fas ${isMenuOpen ? "fa-times" : "fa-bars"}`}></i>
|
||||||
@@ -61,29 +79,47 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
</div>
|
</div>
|
||||||
{/* 移动端菜单 */}
|
{/* 移动端菜单 */}
|
||||||
{isMenuOpen && (
|
{isMenuOpen && (
|
||||||
<div className="md:hidden">
|
<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">
|
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<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
|
||||||
|
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>
|
||||||
<button
|
<button
|
||||||
onClick={onLoginClick}
|
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"
|
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>
|
</button>
|
||||||
|
|||||||
@@ -1,48 +1,171 @@
|
|||||||
import React, {useState, useEffect} from 'react';
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
const [currentSlide, setCurrentSlide] = useState(0);
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const [startX, setStartX] = useState(0);
|
||||||
|
const [dragX, setDragX] = useState(0);
|
||||||
|
const sliderRef = useRef<HTMLDivElement>(null);
|
||||||
|
const dragThreshold = 100; // 拖动阈值，超过这个值才会切换
|
||||||
|
const [slideTransition, setSlideTransition] = useState(true);
|
||||||
|
|
||||||
// 轮播图数据
|
// 轮播图数据
|
||||||
const slides = [
|
const slides = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
image: "https://public.readdy.ai/ai/img_res/524ed52dc79e61a10101d4b2290f77ff.jpg",
|
image:
|
||||||
|
"https://public.readdy.ai/ai/img_res/524ed52dc79e61a10101d4b2290f77ff.jpg",
|
||||||
title: "暗影崛起",
|
title: "暗影崛起",
|
||||||
subtitle: "全新赛季来临",
|
subtitle: "全新赛季来临",
|
||||||
description: "全新角色平衡调整，暗影刺客获得重做，元素系统全面升级，多项游戏体验优化。立即体验前所未有的战斗体验！",
|
description:
|
||||||
version: "版本 3.8.5 现已上线"
|
"全新角色平衡调整，暗影刺客获得重做，元素系统全面升级，多项游戏体验优化。立即体验前所未有的战斗体验！",
|
||||||
|
version: "版本 3.8.5 现已上线",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
image: "https://public.readdy.ai/ai/img_res/524ed52dc79e61a10101d4b2290f77ff.jpg",
|
image:
|
||||||
|
"https://public.readdy.ai/ai/img_res/524ed52dc79e61a10101d4b2290f77ff.jpg",
|
||||||
title: "暗影刺客",
|
title: "暗影刺客",
|
||||||
subtitle: "全新技能组合",
|
subtitle: "全新技能组合",
|
||||||
description: "暗影刺客获得全新技能组合，突进能力和爆发伤害大幅提升，成为战场上的致命杀手。",
|
description:
|
||||||
version: "新英雄登场"
|
"暗影刺客获得全新技能组合，突进能力和爆发伤害大幅提升，成为战场上的致命杀手。",
|
||||||
|
version: "新英雄登场",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
|
image:
|
||||||
|
"https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
|
||||||
title: "元素法师",
|
title: "元素法师",
|
||||||
subtitle: "控场能力加强",
|
subtitle: "控场能力加强",
|
||||||
description: "元素法师的控场能力得到全面加强，新增区域冻结效果，成为团战中的核心控制者。",
|
description:
|
||||||
version: "平衡性调整"
|
"元素法师的控场能力得到全面加强，新增区域冻结效果，成为团战中的核心控制者。",
|
||||||
}
|
version: "平衡性调整",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
|
if (!isDragging) {
|
||||||
|
handleNextSlide();
|
||||||
|
}
|
||||||
}, 5000);
|
}, 5000);
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, [slides.length]);
|
}, [slides.length, isDragging]);
|
||||||
|
|
||||||
|
// 切换到下一张
|
||||||
|
const handleNextSlide = () => {
|
||||||
|
setSlideTransition(true);
|
||||||
|
setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换到上一张
|
||||||
|
const handlePrevSlide = () => {
|
||||||
|
setSlideTransition(true);
|
||||||
|
setCurrentSlide((prev) => (prev === 0 ? slides.length - 1 : prev - 1));
|
||||||
|
};
|
||||||
|
|
||||||
// 手动切换轮播图
|
// 手动切换轮播图
|
||||||
const goToSlide = (index: number) => {
|
const goToSlide = (index: number) => {
|
||||||
|
setSlideTransition(true);
|
||||||
setCurrentSlide(index);
|
setCurrentSlide(index);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 处理轮播图切换
|
||||||
|
const handleSlideChange = (dragDistance: number) => {
|
||||||
|
if (Math.abs(dragDistance) > dragThreshold) {
|
||||||
|
if (dragDistance > 0) {
|
||||||
|
// 向右拖动，切换到上一张
|
||||||
|
handlePrevSlide();
|
||||||
|
} else {
|
||||||
|
// 向左拖动，切换到下一张
|
||||||
|
handleNextSlide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标按下事件处理
|
||||||
|
const handleMouseDown = (e: React.MouseEvent) => {
|
||||||
|
setIsDragging(true);
|
||||||
|
setStartX(e.pageX);
|
||||||
|
setDragX(0);
|
||||||
|
setSlideTransition(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标移动事件处理
|
||||||
|
const handleMouseMove = (e: React.MouseEvent) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const currentX = e.pageX;
|
||||||
|
const dragDistance = currentX - startX;
|
||||||
|
setDragX(dragDistance);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标释放事件处理
|
||||||
|
const handleMouseUp = () => {
|
||||||
|
if (isDragging) {
|
||||||
|
handleSlideChange(dragX);
|
||||||
|
setIsDragging(false);
|
||||||
|
setDragX(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标离开事件处理
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
if (isDragging) {
|
||||||
|
handleSlideChange(dragX);
|
||||||
|
setIsDragging(false);
|
||||||
|
setDragX(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 触摸开始事件处理
|
||||||
|
const handleTouchStart = (e: React.TouchEvent) => {
|
||||||
|
setIsDragging(true);
|
||||||
|
setStartX(e.touches[0].pageX);
|
||||||
|
setDragX(0);
|
||||||
|
setSlideTransition(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 触摸移动事件处理
|
||||||
|
const handleTouchMove = (e: React.TouchEvent) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
const currentX = e.touches[0].pageX;
|
||||||
|
const dragDistance = currentX - startX;
|
||||||
|
setDragX(dragDistance);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 触摸结束事件处理
|
||||||
|
const handleTouchEnd = () => {
|
||||||
|
if (isDragging) {
|
||||||
|
handleSlideChange(dragX);
|
||||||
|
setIsDragging(false);
|
||||||
|
setDragX(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算当前显示的幻灯片
|
||||||
|
const getVisibleSlides = () => {
|
||||||
|
const normalizedDragX = dragX / dragThreshold;
|
||||||
|
if (isDragging && Math.abs(normalizedDragX) > 0) {
|
||||||
|
if (dragX > 0) {
|
||||||
|
// 向右拖动，显示上一张
|
||||||
|
const prevIndex = currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
|
||||||
|
return [
|
||||||
|
{ index: prevIndex, opacity: Math.min(normalizedDragX, 1) },
|
||||||
|
{ index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) },
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
// 向左拖动，显示下一张
|
||||||
|
const nextIndex = currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
|
||||||
|
return [
|
||||||
|
{ index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) },
|
||||||
|
{ index: nextIndex, opacity: Math.min(-normalizedDragX, 1) },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [{ index: currentSlide, opacity: 1 }];
|
||||||
|
};
|
||||||
|
|
||||||
// 即将登场的角色数据
|
// 即将登场的角色数据
|
||||||
const upcomingCharacters = [
|
const upcomingCharacters = [
|
||||||
{
|
{
|
||||||
@@ -52,7 +175,7 @@ const Home: React.FC = () => {
|
|||||||
image: "",
|
image: "",
|
||||||
description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。",
|
description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。",
|
||||||
features: "星辰轨道 / 时空裂隙 / 引力操控",
|
features: "星辰轨道 / 时空裂隙 / 引力操控",
|
||||||
color: "purple"
|
color: "purple",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
@@ -61,17 +184,18 @@ const Home: React.FC = () => {
|
|||||||
image: "",
|
image: "",
|
||||||
description: "融合古代武士精神与现代能量技术的战士。",
|
description: "融合古代武士精神与现代能量技术的战士。",
|
||||||
features: "能量刀刃 / 武士之魂 / 烈焰斩击",
|
features: "能量刀刃 / 武士之魂 / 烈焰斩击",
|
||||||
color: "red"
|
color: "red",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: "生态猎手",
|
name: "生态猎手",
|
||||||
role: "射手",
|
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",
|
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: "运用生态能量的远程射手，善于控制战场环境。",
|
description: "运用生态能量的远程射手，善于控制战场环境。",
|
||||||
features: "自然之力 / 生态屏障 / 藤蔓控制",
|
features: "自然之力 / 生态屏障 / 藤蔓控制",
|
||||||
color: "green"
|
color: "green",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// 最新更新的角色数据
|
// 最新更新的角色数据
|
||||||
@@ -80,26 +204,29 @@ const Home: React.FC = () => {
|
|||||||
id: 1,
|
id: 1,
|
||||||
name: "暗影刺客",
|
name: "暗影刺客",
|
||||||
role: "刺客",
|
role: "刺客",
|
||||||
image: "https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
|
image:
|
||||||
|
"https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
|
||||||
description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
|
description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
|
||||||
changes: "基础攻击力 +15%，技能冷却时间 -10%"
|
changes: "基础攻击力 +15%，技能冷却时间 -10%",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: "元素法师",
|
name: "元素法师",
|
||||||
role: "法师",
|
role: "法师",
|
||||||
image: "https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
|
image:
|
||||||
|
"https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
|
||||||
description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
|
description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
|
||||||
changes: "法术穿透 +8%，控制效果持续时间 +1秒"
|
changes: "法术穿透 +8%，控制效果持续时间 +1秒",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: "钢铁守卫",
|
name: "钢铁守卫",
|
||||||
role: "坦克",
|
role: "坦克",
|
||||||
image: "https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
|
image:
|
||||||
|
"https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
|
||||||
description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
|
description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
|
||||||
changes: "护甲值 +20%，生命回复速度 +15%"
|
changes: "护甲值 +20%，生命回复速度 +15%",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const battleData = [
|
const battleData = [
|
||||||
@@ -211,50 +338,73 @@ const Home: React.FC = () => {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#0A0C10] text-white font-sans">
|
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
|
||||||
|
{/* 背景装饰 */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] via-[#2A211E] to-[#1A1412]"></div>
|
||||||
|
|
||||||
{/* 英雄区 */}
|
{/* 英雄区 */}
|
||||||
<div className="pt-16 relative">
|
<div className="pt-24 relative">
|
||||||
<div className="relative h-[600px] overflow-hidden">
|
<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] to-[#2A211E]"></div>
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative pb-24">
|
||||||
{slides.map((slide, index) => (
|
|
||||||
<div
|
<div
|
||||||
key={slide.id}
|
className="relative h-[600px] overflow-hidden rounded-2xl shadow-2xl"
|
||||||
className={`absolute inset-0 transition-opacity duration-1000 ${
|
ref={sliderRef}
|
||||||
currentSlide === index ? "opacity-100" : "opacity-0"
|
onMouseDown={handleMouseDown}
|
||||||
}`}
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseUp={handleMouseUp}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
onTouchStart={handleTouchStart}
|
||||||
|
onTouchMove={handleTouchMove}
|
||||||
|
onTouchEnd={handleTouchEnd}
|
||||||
|
style={{
|
||||||
|
cursor: isDragging ? 'grabbing' : 'grab',
|
||||||
|
touchAction: 'none'
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-[#0A0C10] via-[#0A0C10]/80 to-transparent z-10"></div>
|
<div className="absolute inset-0 z-0">
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
{getVisibleSlides().map(({ index, opacity }) => (
|
||||||
|
<div
|
||||||
|
key={slides[index].id}
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={{
|
||||||
|
opacity,
|
||||||
|
transition: slideTransition ? 'opacity 0.3s ease-out' : 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-[#1A1412] via-[#1A1412]/90 to-transparent z-10"></div>
|
||||||
|
<div className="absolute inset-0 overflow-hidden rounded-2xl">
|
||||||
<img
|
<img
|
||||||
src={slide.image}
|
src={slides[index].image}
|
||||||
alt={slide.title}
|
alt={slides[index].title}
|
||||||
className="h-full object-cover object-top"
|
className="h-full w-full object-cover object-center transform scale-105 transition-transform duration-10000 hover:scale-110"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="relative z-10 flex items-center h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="relative z-20 h-full flex items-center">
|
||||||
<div className="max-w-2xl">
|
<div className="max-w-2xl pl-8">
|
||||||
<div className="inline-block px-3 py-1 mb-4 bg-yellow-500/20 border border-yellow-500 rounded-full">
|
<div className="inline-block px-3 py-1 mb-6 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full backdrop-blur-sm">
|
||||||
<span className="text-yellow-400 text-sm font-semibold">
|
<span className="text-[#E6B17E] text-sm font-semibold">
|
||||||
{slides[currentSlide].version}
|
{slides[currentSlide].version}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-5xl font-bold mb-4 leading-tight">
|
<h1 className="text-5xl font-bold mb-6 leading-tight">
|
||||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-yellow-200">
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
|
||||||
{slides[currentSlide].title}
|
{slides[currentSlide].title}
|
||||||
</span>
|
</span>
|
||||||
<span className="block text-white mt-2">{slides[currentSlide].subtitle}</span>
|
<span className="block text-[#E6B17E] mt-3">
|
||||||
|
{slides[currentSlide].subtitle}
|
||||||
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xl text-gray-300 mb-8">
|
<p className="text-xl text-[#9B8579] mb-10 leading-relaxed">
|
||||||
{slides[currentSlide].description}
|
{slides[currentSlide].description}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex space-x-4">
|
<div className="flex space-x-6">
|
||||||
<button className="px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-400 rounded-md font-medium text-black shadow-lg hover:from-yellow-400 hover:to-yellow-300 transition-all duration-300 !rounded-button whitespace-nowrap cursor-pointer">
|
<button className="px-8 py-3 bg-gradient-to-r from-[#C17F59] to-[#A66D4F] rounded-md font-medium text-[#1A1412] shadow-lg hover:from-[#A66D4F] hover:to-[#8E5B3D] transition-all duration-300 !rounded-button whitespace-nowrap cursor-pointer transform hover:scale-105">
|
||||||
查看更新详情
|
查看更新详情
|
||||||
</button>
|
</button>
|
||||||
<button className="px-6 py-3 bg-gray-800 border border-yellow-500 rounded-md font-medium text-yellow-500 hover:bg-gray-700 transition-colors duration-300 !rounded-button whitespace-nowrap cursor-pointer">
|
<button className="px-8 py-3 bg-gradient-to-r from-[#2A211E] to-[#3A2E2A] border border-[#C17F59] rounded-md font-medium text-[#E6B17E] hover:bg-[#3A2E2A] transition-all duration-300 !rounded-button whitespace-nowrap cursor-pointer transform hover:scale-105">
|
||||||
立即更新
|
立即更新
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -268,7 +418,7 @@ const Home: React.FC = () => {
|
|||||||
onClick={() => goToSlide(index)}
|
onClick={() => goToSlide(index)}
|
||||||
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
||||||
currentSlide === index
|
currentSlide === index
|
||||||
? "bg-yellow-500 w-8"
|
? "bg-gradient-to-r from-[#E6B17E] to-[#C17F59] w-8"
|
||||||
: "bg-gray-500 hover:bg-gray-400"
|
: "bg-gray-500 hover:bg-gray-400"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
@@ -276,25 +426,28 @@ const Home: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 最新角色更新区 */}
|
{/* 最新角色更新区 */}
|
||||||
<section className="py-16 bg-[#0A0C10]">
|
<section className="py-24 relative pt-0">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<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="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
{/* 即将登场 */}
|
{/* 即将登场 */}
|
||||||
<div>
|
<div>
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex justify-between items-center mb-6">
|
||||||
<div>
|
<div>
|
||||||
<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">
|
||||||
className="inline-block px-3 py-1 bg-yellow-500/20 border border-yellow-500 rounded-full mb-2">
|
<span className="text-[#E6B17E] text-sm font-semibold">
|
||||||
<span className="text-yellow-400 text-sm font-semibold">
|
|
||||||
新英雄预告
|
新英雄预告
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-2xl font-bold text-white">即将登场</h2>
|
<h2 className="text-2xl font-bold text-[#E6B17E]">即将登场</h2>
|
||||||
</div>
|
</div>
|
||||||
<a href="#"
|
<a
|
||||||
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer">
|
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>
|
<i className="fas fa-arrow-right ml-2"></i>
|
||||||
</a>
|
</a>
|
||||||
@@ -303,33 +456,41 @@ const Home: React.FC = () => {
|
|||||||
{upcomingCharacters.map((character) => (
|
{upcomingCharacters.map((character) => (
|
||||||
<div
|
<div
|
||||||
key={character.id}
|
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`}
|
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="relative h-40 overflow-hidden">
|
||||||
<div
|
<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">
|
||||||
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-[#E6B17E] font-medium">
|
||||||
<span className="text-white font-medium">{character.role}</span>
|
{character.role}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
src={character.image}
|
src={character.image}
|
||||||
alt={character.name}
|
alt={character.name}
|
||||||
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
|
className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="flex items-center justify-between mb-2">
|
||||||
<h3 className="text-lg font-bold text-white">{character.name}</h3>
|
<h3 className="text-lg font-bold text-[#E6B17E]">
|
||||||
<span className={`text-${character.color}-400 text-sm`}>即将登场</span>
|
{character.name}
|
||||||
|
</h3>
|
||||||
|
<span className="text-[#C17F59] text-sm">
|
||||||
|
即将登场
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-400 text-sm line-clamp-2 mb-3 leading-tight">
|
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
|
||||||
{character.description}
|
{character.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="bg-gray-800/50 p-2 rounded-md">
|
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-2 rounded-md">
|
||||||
<p className={`text-${character.color}-400 font-medium text-xs mb-1`}>核心特性</p>
|
<p className="text-[#C17F59] font-medium text-xs mb-1">
|
||||||
<p className="text-gray-300 text-xs line-clamp-1">{character.features}</p>
|
核心特性
|
||||||
|
</p>
|
||||||
|
<p className="text-[#9B8579] text-xs line-clamp-1">
|
||||||
|
{character.features}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<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">
|
||||||
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>
|
<i className="fas fa-chevron-right ml-2 text-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -343,16 +504,17 @@ const Home: React.FC = () => {
|
|||||||
<div>
|
<div>
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex justify-between items-center mb-6">
|
||||||
<div>
|
<div>
|
||||||
<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">
|
||||||
className="inline-block px-3 py-1 bg-yellow-500/20 border border-yellow-500 rounded-full mb-2">
|
<span className="text-[#E6B17E] text-sm font-semibold">
|
||||||
<span className="text-yellow-400 text-sm font-semibold">
|
|
||||||
平衡性调整
|
平衡性调整
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-2xl font-bold text-white">最新更新</h2>
|
<h2 className="text-2xl font-bold text-[#E6B17E]">最新更新</h2>
|
||||||
</div>
|
</div>
|
||||||
<a href="#"
|
<a
|
||||||
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer">
|
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>
|
<i className="fas fa-arrow-right ml-2"></i>
|
||||||
</a>
|
</a>
|
||||||
@@ -361,33 +523,41 @@ const Home: React.FC = () => {
|
|||||||
{updatedCharacters.map((character) => (
|
{updatedCharacters.map((character) => (
|
||||||
<div
|
<div
|
||||||
key={character.id}
|
key={character.id}
|
||||||
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"
|
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="relative h-40 overflow-hidden">
|
||||||
<div
|
<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">
|
||||||
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-[#E6B17E] font-medium">
|
||||||
<span className="text-white font-medium">{character.role}</span>
|
{character.role}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
src={character.image}
|
src={character.image}
|
||||||
alt={character.name}
|
alt={character.name}
|
||||||
className="w-full h-full object-cover object-top transition-transform duration-500 hover:scale-105"
|
className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="flex items-center justify-between mb-2">
|
||||||
<h3 className="text-lg font-bold text-white">{character.name}</h3>
|
<h3 className="text-lg font-bold text-[#E6B17E]">
|
||||||
<span className="text-yellow-400 text-sm">最新更新</span>
|
{character.name}
|
||||||
|
</h3>
|
||||||
|
<span className="text-[#C17F59] text-sm">
|
||||||
|
最新更新
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-400 text-sm line-clamp-2 mb-3 leading-tight">
|
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
|
||||||
{character.description}
|
{character.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="bg-gray-800/50 p-2 rounded-md">
|
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-2 rounded-md">
|
||||||
<p className="text-yellow-400 font-medium text-xs mb-1">变更数据</p>
|
<p className="text-[#C17F59] font-medium text-xs mb-1">
|
||||||
<p className="text-gray-300 text-xs line-clamp-1">{character.changes}</p>
|
变更数据
|
||||||
|
</p>
|
||||||
|
<p className="text-[#9B8579] text-xs line-clamp-1">
|
||||||
|
{character.changes}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<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">
|
||||||
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>
|
<i className="fas fa-chevron-right ml-2 text-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -401,13 +571,14 @@ const Home: React.FC = () => {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* 热门配装推荐 */}
|
{/* 热门配装推荐 */}
|
||||||
<section className="py-16 bg-gray-900">
|
<section className="py-24 relative">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] to-[#2A211E]"></div>
|
||||||
<div className="flex justify-between items-center mb-10">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative pb-24 border-b border-[#C17F59]/30">
|
||||||
<h2 className="text-3xl font-bold text-white">热门配装推荐</h2>
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h2 className="text-3xl font-bold text-[#E6B17E]">热门配装推荐</h2>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer"
|
className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
|
||||||
>
|
>
|
||||||
更多配装
|
更多配装
|
||||||
<i className="fas fa-arrow-right ml-2"></i>
|
<i className="fas fa-arrow-right ml-2"></i>
|
||||||
@@ -417,40 +588,39 @@ const Home: React.FC = () => {
|
|||||||
{equipmentBuilds.map((build) => (
|
{equipmentBuilds.map((build) => (
|
||||||
<div
|
<div
|
||||||
key={build.id}
|
key={build.id}
|
||||||
className="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition-all duration-300 cursor-pointer"
|
className="bg-gradient-to-br from-[#1A1412] to-[#2A211E] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 cursor-pointer transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 backdrop-blur-sm"
|
||||||
>
|
>
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<div className="flex items-center mb-4">
|
<div className="flex items-center mb-4">
|
||||||
<img
|
<img
|
||||||
src={build.avatar}
|
src={build.avatar}
|
||||||
alt={build.character}
|
alt={build.character}
|
||||||
className="w-12 h-12 rounded-full border-2 border-yellow-500"
|
className="w-12 h-12 rounded-full border-2 border-[#C17F59]"
|
||||||
/>
|
/>
|
||||||
<div className="ml-3">
|
<div className="ml-3">
|
||||||
<h3 className="text-lg font-bold text-white">
|
<h3 className="text-lg font-bold text-[#E6B17E]">
|
||||||
{build.character}
|
{build.character}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="text-yellow-500 text-sm mr-3">
|
<span className="text-[#C17F59] text-sm mr-3">
|
||||||
胜率: {build.winRate}
|
胜率: {build.winRate}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-gray-400 text-sm">
|
<span className="text-[#9B8579] text-sm">
|
||||||
使用率: {build.usageRate}
|
使用率: {build.usageRate}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-gray-900 p-3 rounded-md mb-4">
|
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-3 rounded-md mb-4">
|
||||||
<p className="text-gray-300 font-medium mb-2">推荐装备</p>
|
<p className="text-[#9B8579] font-medium mb-2">推荐装备</p>
|
||||||
<div className="grid grid-cols-6 gap-2">
|
<div className="grid grid-cols-6 gap-2">
|
||||||
{build.items.map((item, index) => (
|
{build.items.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className="bg-gray-800 rounded-md p-1 flex items-center justify-center"
|
className="bg-gradient-to-br from-[#1A1412] to-[#2A211E] rounded-md p-1 flex items-center justify-center"
|
||||||
>
|
>
|
||||||
<div
|
<div className="w-8 h-8 rounded-md bg-gradient-to-br from-[#2A211E] to-[#1A1412] flex items-center justify-center">
|
||||||
className="w-8 h-8 rounded-md bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
|
<i className="fas fa-shield-alt text-[#C17F59]"></i>
|
||||||
<i className="fas fa-shield-alt text-yellow-500"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -460,14 +630,13 @@ const Home: React.FC = () => {
|
|||||||
{build.tags.map((tag, index) => (
|
{build.tags.map((tag, index) => (
|
||||||
<span
|
<span
|
||||||
key={index}
|
key={index}
|
||||||
className="px-2 py-1 bg-gray-700 text-gray-300 rounded-md text-xs"
|
className="px-2 py-1 bg-gradient-to-r from-[#2A211E] to-[#1A1412] text-[#9B8579] rounded-md text-xs"
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button className="w-full py-2 bg-gradient-to-r from-[#2A211E] to-[#3A2E2A] hover:from-[#3A2E2A] hover:to-[#2A211E] text-[#E6B17E] rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer transition-all duration-300">
|
||||||
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-md flex items-center justify-center !rounded-button whitespace-nowrap cursor-pointer">
|
|
||||||
查看详细配装
|
查看详细配装
|
||||||
<i className="fas fa-chevron-right ml-2 text-xs"></i>
|
<i className="fas fa-chevron-right ml-2 text-xs"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -477,14 +646,16 @@ const Home: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* 对战数据板块 */}
|
{/* 对战数据板块 */}
|
||||||
<section className="py-16 bg-[#0A0C10]">
|
<section className="py-24 relative">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<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">
|
||||||
<div className="flex justify-between items-center mb-10">
|
<div className="flex justify-between items-center mb-10">
|
||||||
<h2 className="text-3xl font-bold text-white">实时对战数据</h2>
|
<h2 className="text-3xl font-bold text-[#E6B17E]">实时对战数据</h2>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-yellow-500 hover:text-yellow-400 flex items-center cursor-pointer"
|
className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
|
||||||
>
|
>
|
||||||
查看完整数据
|
查看完整数据
|
||||||
<i className="fas fa-arrow-right ml-2"></i>
|
<i className="fas fa-arrow-right ml-2"></i>
|
||||||
@@ -492,56 +663,56 @@ const Home: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800">
|
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 backdrop-blur-sm">
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<h3 className="text-xl font-bold mb-4 text-white">
|
<h3 className="text-xl font-bold mb-4 text-[#E6B17E]">
|
||||||
角色使用率排行
|
角色使用率排行
|
||||||
</h3>
|
</h3>
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<table className="min-w-full divide-y divide-gray-800">
|
<table className="min-w-full divide-y divide-[#3A2E2A]">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-medium text-[#9B8579] uppercase tracking-wider">
|
||||||
排名
|
排名
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-medium text-[#9B8579] uppercase tracking-wider">
|
||||||
角色
|
角色
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-medium text-[#9B8579] uppercase tracking-wider">
|
||||||
胜率
|
胜率
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-medium text-[#9B8579] uppercase tracking-wider">
|
||||||
选取率
|
选取率
|
||||||
</th>
|
</th>
|
||||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
<th className="px-6 py-3 text-left text-xs font-medium text-[#9B8579] uppercase tracking-wider">
|
||||||
禁用率
|
禁用率
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-gray-800">
|
<tbody className="divide-y divide-[#3A2E2A]">
|
||||||
{battleData.map((data) => (
|
{battleData.map((data) => (
|
||||||
<tr key={data.rank} className="hover:bg-gray-800">
|
<tr key={data.rank} className="hover:bg-[#3A2E2A] transition-colors duration-200">
|
||||||
<td className="px-6 py-4 whitespace-nowrap">
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
<div
|
<div
|
||||||
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||||||
data.rank <= 3
|
data.rank <= 3
|
||||||
? "bg-yellow-500 text-black"
|
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
|
||||||
: "bg-gray-700 text-white"
|
: "bg-gradient-to-r from-[#3A2E2A] to-[#2A211E] text-[#9B8579]"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{data.rank}
|
{data.rank}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#E6B17E]">
|
||||||
{data.character}
|
{data.character}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#9B8579]">
|
||||||
{data.winRate}
|
{data.winRate}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#9B8579]">
|
||||||
{data.pickRate}
|
{data.pickRate}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#9B8579]">
|
||||||
{data.banRate}
|
{data.banRate}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -553,99 +724,99 @@ const Home: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 mb-6">
|
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 mb-6 backdrop-blur-sm">
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<h3 className="text-xl font-bold mb-4 text-white">
|
<h3 className="text-xl font-bold mb-4 text-[#E6B17E]">
|
||||||
当前赛季
|
当前赛季
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<span className="text-gray-400">赛季名称</span>
|
<span className="text-[#9B8579]">赛季名称</span>
|
||||||
<span className="text-white font-medium">暗影崛起</span>
|
<span className="text-[#E6B17E] font-medium">暗影崛起</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<span className="text-gray-400">开始时间</span>
|
<span className="text-[#9B8579]">开始时间</span>
|
||||||
<span className="text-white font-medium">2025-03-15</span>
|
<span className="text-[#E6B17E] font-medium">2025-03-15</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<span className="text-gray-400">结束时间</span>
|
<span className="text-[#9B8579]">结束时间</span>
|
||||||
<span className="text-white font-medium">2025-06-15</span>
|
<span className="text-[#E6B17E] font-medium">2025-06-15</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-gray-400">剩余时间</span>
|
<span className="text-[#9B8579]">剩余时间</span>
|
||||||
<span className="text-yellow-500 font-medium">66 天</span>
|
<span className="text-[#C17F59] font-medium">66 天</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-800">
|
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 backdrop-blur-sm">
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<h3 className="text-xl font-bold mb-4 text-white">
|
<h3 className="text-xl font-bold mb-4 text-[#E6B17E]">
|
||||||
最新比赛结果
|
最新比赛结果
|
||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="bg-gray-800 p-3 rounded-md">
|
<div className="bg-gradient-to-br from-[#1A1412] to-[#2A211E] p-3 rounded-md">
|
||||||
<div className="flex justify-between items-center mb-2">
|
<div className="flex justify-between items-center mb-2">
|
||||||
<span className="text-gray-400 text-sm">职业联赛</span>
|
<span className="text-[#9B8579] text-sm">职业联赛</span>
|
||||||
<span className="text-yellow-500 text-sm">2小时前</span>
|
<span className="text-[#C17F59] text-sm">2小时前</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="font-medium text-white">
|
<span className="font-medium text-[#E6B17E]">
|
||||||
龙族战队
|
龙族战队
|
||||||
</span>
|
</span>
|
||||||
<span className="mx-2 text-green-500 font-bold">
|
<span className="mx-2 text-[#4CAF50] font-bold">
|
||||||
3
|
3
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-gray-400">VS</span>
|
<span className="text-[#9B8579]">VS</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="mx-2 text-red-500 font-bold">1</span>
|
<span className="mx-2 text-[#F44336] font-bold">1</span>
|
||||||
<span className="font-medium text-white">
|
<span className="font-medium text-[#E6B17E]">
|
||||||
风暴战队
|
风暴战队
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-gray-800 p-3 rounded-md">
|
<div className="bg-gradient-to-br from-[#1A1412] to-[#2A211E] p-3 rounded-md">
|
||||||
<div className="flex justify-between items-center mb-2">
|
<div className="flex justify-between items-center mb-2">
|
||||||
<span className="text-gray-400 text-sm">职业联赛</span>
|
<span className="text-[#9B8579] text-sm">职业联赛</span>
|
||||||
<span className="text-yellow-500 text-sm">5小时前</span>
|
<span className="text-[#C17F59] text-sm">5小时前</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="font-medium text-white">
|
<span className="font-medium text-[#E6B17E]">
|
||||||
火焰战队
|
火焰战队
|
||||||
</span>
|
</span>
|
||||||
<span className="mx-2 text-green-500 font-bold">
|
<span className="mx-2 text-[#4CAF50] font-bold">
|
||||||
3
|
3
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-gray-400">VS</span>
|
<span className="text-[#9B8579]">VS</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="mx-2 text-red-500 font-bold">2</span>
|
<span className="mx-2 text-[#F44336] font-bold">2</span>
|
||||||
<span className="font-medium text-white">
|
<span className="font-medium text-[#E6B17E]">
|
||||||
雷霆战队
|
雷霆战队
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-gray-800 p-3 rounded-md">
|
<div className="bg-gradient-to-br from-[#1A1412] to-[#2A211E] p-3 rounded-md">
|
||||||
<div className="flex justify-between items-center mb-2">
|
<div className="flex justify-between items-center mb-2">
|
||||||
<span className="text-gray-400 text-sm">职业联赛</span>
|
<span className="text-[#9B8579] text-sm">职业联赛</span>
|
||||||
<span className="text-yellow-500 text-sm">昨天</span>
|
<span className="text-[#C17F59] text-sm">昨天</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="font-medium text-white">
|
<span className="font-medium text-[#E6B17E]">
|
||||||
幽灵战队
|
幽灵战队
|
||||||
</span>
|
</span>
|
||||||
<span className="mx-2 text-red-500 font-bold">0</span>
|
<span className="mx-2 text-[#F44336] font-bold">0</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-gray-400">VS</span>
|
<span className="text-[#9B8579]">VS</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="mx-2 text-green-500 font-bold">
|
<span className="mx-2 text-[#4CAF50] font-bold">
|
||||||
3
|
3
|
||||||
</span>
|
</span>
|
||||||
<span className="font-medium text-white">
|
<span className="font-medium text-[#E6B17E]">
|
||||||
星辰战队
|
星辰战队
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,18 +6,14 @@
|
|||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
|
|
||||||
/* modules */
|
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
|
|
||||||
/* type checking */
|
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": false,
|
||||||
"noUnusedParameters": true
|
"noUnusedParameters": false
|
||||||
},
|
},
|
||||||
"include": ["src", "postcss.config.mjs"]
|
"include": ["src", "postcss.config.mjs"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user