style(Lineup): 优化代码格式和布局
- 调整了代码的缩进和空格，提高了可读性 -修复了一些小的语法问题，如缺少逗号等 - 优化了部分长行的换行方式，提高了代码的整洁度
This commit is contained in:
hxt
@@ -4,154 +4,154 @@ const Footer: React.FC = () => {
|
||||
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="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.
|
||||
© 2025 露娜助手. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,12 +12,12 @@ interface NavItem {
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: "/", label: "对战阵容" },
|
||||
{ path: "/home", label: "主页" },
|
||||
{ path: "/characters", label: "角色列表" },
|
||||
{ path: "/builds", label: "配装攻略" },
|
||||
{ path: "/battles", label: "对战信息" },
|
||||
{ path: "/news", label: "资讯中心" },
|
||||
{ path: "/community", label: "社区" }
|
||||
// { path: "/home", label: "主页" },
|
||||
// { path: "/characters", label: "角色列表" },
|
||||
// { path: "/builds", label: "配装攻略" },
|
||||
// { path: "/battles", label: "对战信息" },
|
||||
// { path: "/news", label: "资讯中心" },
|
||||
// { path: "/community", label: "社区" }
|
||||
];
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
@@ -53,12 +53,12 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<button
|
||||
onClick={onLoginClick}
|
||||
className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
{/*<button*/}
|
||||
{/* onClick={onLoginClick}*/}
|
||||
{/* className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"*/}
|
||||
{/*>*/}
|
||||
{/* 登录*/}
|
||||
{/*</button>*/}
|
||||
</div>
|
||||
<div className="-mr-2 flex md:hidden">
|
||||
<button
|
||||
|
||||
@@ -3,9 +3,8 @@ import * as EpicApi from '@/api/index';
|
||||
import { Character } from '@/api/types';
|
||||
|
||||
const Lineup: React.FC = () => {
|
||||
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("简单");
|
||||
const [lineups, setLineups] = useState<EpicApi.GvgTeam[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [heroes, setHeroes] = useState<EpicApi.Hero[]>([]);
|
||||
const [selectedHeroes, setSelectedHeroes] = useState<EpicApi.Hero[]>([]);
|
||||
@@ -26,9 +25,40 @@ const Lineup: React.FC = () => {
|
||||
fetchHeroes();
|
||||
}, []);
|
||||
|
||||
// Fetch lineups data
|
||||
// Initial data fetch
|
||||
useEffect(() => {
|
||||
const fetchLineups = async () => {
|
||||
handleSearch();
|
||||
}, []);
|
||||
|
||||
const handleHeroSelect = (hero: EpicApi.Hero) => {
|
||||
if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
|
||||
setSelectedHeroes([...selectedHeroes, hero]);
|
||||
setSearchInput("");
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHeroRemove = (heroId: number) => {
|
||||
setSelectedHeroes(selectedHeroes.filter(h => h.id !== heroId));
|
||||
};
|
||||
|
||||
const handleSearch = async () => {
|
||||
if (selectedHeroes.length === 0) {
|
||||
// If no heroes selected, fetch all lineups
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await EpicApi.getGvgTeamList([]);
|
||||
setLineups(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch lineups:', err);
|
||||
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const heroCodes = selectedHeroes.map(hero => hero.heroCode);
|
||||
@@ -43,21 +73,12 @@ const Lineup: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
fetchLineups();
|
||||
}, [selectedHeroes]);
|
||||
|
||||
const difficulties = ["简单", "中等", "困难"];
|
||||
|
||||
const handleHeroSelect = (hero: EpicApi.Hero) => {
|
||||
if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
|
||||
setSelectedHeroes([...selectedHeroes, hero]);
|
||||
const handleReset = () => {
|
||||
setSelectedHeroes([]);
|
||||
setSearchInput("");
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHeroRemove = (heroId: number) => {
|
||||
setSelectedHeroes(selectedHeroes.filter(h => h.id !== heroId));
|
||||
setLineups([]);
|
||||
setError(null);
|
||||
handleSearch(); // Fetch all lineups after reset
|
||||
};
|
||||
|
||||
const filteredHeroes = heroes.filter(hero => {
|
||||
@@ -66,14 +87,6 @@ const Lineup: React.FC = () => {
|
||||
(hero.nickName && hero.nickName.toLowerCase().includes(searchLower));
|
||||
});
|
||||
|
||||
const filteredLineups = lineups.filter(lineup => {
|
||||
const matchesDifficulty = selectedDifficulty === "简单" && lineup.id % 3 === 1 ||
|
||||
selectedDifficulty === "中等" && lineup.id % 3 === 2 ||
|
||||
selectedDifficulty === "困难" && lineup.id % 3 === 0;
|
||||
|
||||
return matchesDifficulty;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
|
||||
{/* 背景装饰 */}
|
||||
@@ -87,33 +100,28 @@ const Lineup: React.FC = () => {
|
||||
</h1>
|
||||
|
||||
{/* 搜索和筛选组件 */}
|
||||
<div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm">
|
||||
{/* 难度筛选 */}
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{difficulties.map((difficulty) => (
|
||||
<button
|
||||
key={difficulty}
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
||||
selectedDifficulty === difficulty
|
||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedDifficulty(difficulty)}
|
||||
<div className="sticky top-0 z-50 bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30 backdrop-blur-sm min-h-[8rem]">
|
||||
{/* 数据来源说明 */}
|
||||
<div className="text-center mb-4 text-[#9B8579]">
|
||||
<span>对战数据来源于</span>
|
||||
<a
|
||||
href="https://docs.qq.com/sheet/DVmVIdGZOSnVJTHBq?tab=BB08J2"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#E6B17E] hover:text-[#C17F59] mx-1"
|
||||
>
|
||||
{difficulty}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
【鬼殺队GVG通解】
|
||||
</a>
|
||||
<span>感谢分享</span>
|
||||
</div>
|
||||
|
||||
{/* 英雄多选下拉框 */}
|
||||
<div className="relative">
|
||||
<div className="relative flex gap-2">
|
||||
<div
|
||||
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] cursor-pointer flex items-center justify-between"
|
||||
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-[32rem] text-[#E6B17E] cursor-pointer flex items-center justify-between h-12"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-2 flex-1 items-center">
|
||||
{selectedHeroes.length > 0 ? (
|
||||
selectedHeroes.map((hero) => (
|
||||
<div
|
||||
@@ -136,13 +144,28 @@ const Lineup: React.FC = () => {
|
||||
<span className="text-[#9B8579]">选择防守英雄（最多3个）</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}>
|
||||
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''} ml-2`}>
|
||||
▼
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm text-[#E6B17E] hover:bg-[#2A211E] hover:border-[#C17F59] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||
onClick={handleSearch}
|
||||
disabled={selectedHeroes.length === 0}
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm text-[#E6B17E] hover:bg-[#2A211E] hover:border-[#C17F59] transition-colors duration-200 whitespace-nowrap"
|
||||
onClick={handleReset}
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50">
|
||||
<div className="absolute top-full left-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50 w-[32rem]">
|
||||
<div className="p-2 border-b border-[#C17F59]/30">
|
||||
<input
|
||||
type="text"
|
||||
@@ -202,7 +225,7 @@ const Lineup: React.FC = () => {
|
||||
{/* 阵容列表 */}
|
||||
{!loading && (
|
||||
<div className="space-y-4">
|
||||
{filteredLineups.map((lineup) => (
|
||||
{lineups.map((lineup) => (
|
||||
<div
|
||||
key={lineup.id}
|
||||
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 backdrop-blur-sm"
|
||||
|
||||
Reference in New Issue
Block a user