style(Lineup): 优化代码格式和布局
- 调整了代码的缩进和空格，提高了可读性 -修复了一些小的语法问题，如缺少逗号等 - 优化了部分长行的换行方式，提高了代码的整洁度
This commit is contained in:
hxt
@@ -4,154 +4,154 @@ const Footer: React.FC = () => {
|
|||||||
return (
|
return (
|
||||||
<footer className="bg-[#1A1412] 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-[#E6B17E] mb-4">战神纪元</h3>
|
{/* <h3 className="text-xl font-bold text-[#E6B17E] mb-4">战神纪元</h3>*/}
|
||||||
<p className="text-[#9B8579] mb-4">
|
{/* <p className="text-[#9B8579] mb-4">*/}
|
||||||
最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。
|
{/* 最专业的游戏资讯和攻略平台，为玩家提供最新、最全面的游戏信息。*/}
|
||||||
</p>
|
{/* </p>*/}
|
||||||
<div className="flex space-x-4">
|
{/* <div className="flex space-x-4">*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* 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
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* 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
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* 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
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* 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-[#E6B17E] mb-4">
|
{/* <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">*/}
|
||||||
快速链接
|
{/* 快速链接*/}
|
||||||
</h3>
|
{/* </h3>*/}
|
||||||
<ul className="space-y-2">
|
{/* <ul className="space-y-2">*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
游戏下载
|
{/* 游戏下载*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
新手教程
|
{/* 新手教程*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
更新日志
|
{/* 更新日志*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
活动中心
|
{/* 活动中心*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* 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-[#E6B17E] 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
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
常见问题
|
{/* 常见问题*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
联系我们
|
{/* 联系我们*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
用户协议
|
{/* 用户协议*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"*/}
|
||||||
>
|
{/* >*/}
|
||||||
隐私政策
|
{/* 隐私政策*/}
|
||||||
</a>
|
{/* </a>*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li>
|
{/* <li>*/}
|
||||||
<a
|
{/* <a*/}
|
||||||
href="#"
|
{/* href="#"*/}
|
||||||
className="text-[#C17F59] hover:text-[#E6B17E] cursor-pointer transition-colors duration-200"
|
{/* 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-[#E6B17E] mb-4">
|
{/* <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">*/}
|
||||||
联系我们
|
{/* 联系我们*/}
|
||||||
</h3>
|
{/* </h3>*/}
|
||||||
<ul className="space-y-2">
|
{/* <ul className="space-y-2">*/}
|
||||||
<li className="text-[#9B8579] flex items-center">
|
{/* <li className="text-[#9B8579] flex items-center">*/}
|
||||||
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i>
|
{/* <i className="fas fa-envelope mr-2 text-[#C17F59]"></i>*/}
|
||||||
support@epicgame.com
|
{/* support@epicgame.com*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li className="text-[#9B8579] flex items-center">
|
{/* <li className="text-[#9B8579] flex items-center">*/}
|
||||||
<i className="fas fa-phone mr-2 text-[#C17F59]"></i>
|
{/* <i className="fas fa-phone mr-2 text-[#C17F59]"></i>*/}
|
||||||
400-123-4567
|
{/* 400-123-4567*/}
|
||||||
</li>
|
{/* </li>*/}
|
||||||
<li className="text-[#9B8579] flex items-center">
|
{/* <li className="text-[#9B8579] flex items-center">*/}
|
||||||
<i className="fas fa-map-marker-alt mr-2 text-[#C17F59]"></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-[#C17F59]/30 text-center">
|
<div className="mt-8 pt-8 border-t border-[#C17F59]/30 text-center">
|
||||||
<p className="text-[#9B8579] text-sm">
|
<p className="text-[#9B8579] text-sm">
|
||||||
© 2024 战神纪元. All rights reserved.
|
© 2025 露娜助手. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,12 +12,12 @@ interface NavItem {
|
|||||||
|
|
||||||
const navItems: NavItem[] = [
|
const navItems: NavItem[] = [
|
||||||
{ path: "/", label: "对战阵容" },
|
{ path: "/", label: "对战阵容" },
|
||||||
{ path: "/home", label: "主页" },
|
// { path: "/home", label: "主页" },
|
||||||
{ path: "/characters", label: "角色列表" },
|
// { path: "/characters", label: "角色列表" },
|
||||||
{ path: "/builds", label: "配装攻略" },
|
// { path: "/builds", label: "配装攻略" },
|
||||||
{ path: "/battles", label: "对战信息" },
|
// { path: "/battles", label: "对战信息" },
|
||||||
{ path: "/news", label: "资讯中心" },
|
// { path: "/news", label: "资讯中心" },
|
||||||
{ path: "/community", label: "社区" }
|
// { path: "/community", label: "社区" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
||||||
@@ -53,12 +53,12 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<button
|
{/*<button*/}
|
||||||
onClick={onLoginClick}
|
{/* 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"
|
{/* 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>*/}
|
||||||
</div>
|
</div>
|
||||||
<div className="-mr-2 flex md:hidden">
|
<div className="-mr-2 flex md:hidden">
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -3,9 +3,8 @@ import * as EpicApi from '@/api/index';
|
|||||||
import { Character } from '@/api/types';
|
import { Character } from '@/api/types';
|
||||||
|
|
||||||
const Lineup: React.FC = () => {
|
const Lineup: React.FC = () => {
|
||||||
const [selectedDifficulty, setSelectedDifficulty] = useState<string>("简单");
|
|
||||||
const [lineups, setLineups] = useState<EpicApi.GvgTeam[]>([]);
|
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 [error, setError] = useState<string | null>(null);
|
||||||
const [heroes, setHeroes] = useState<EpicApi.Hero[]>([]);
|
const [heroes, setHeroes] = useState<EpicApi.Hero[]>([]);
|
||||||
const [selectedHeroes, setSelectedHeroes] = useState<EpicApi.Hero[]>([]);
|
const [selectedHeroes, setSelectedHeroes] = useState<EpicApi.Hero[]>([]);
|
||||||
@@ -26,27 +25,10 @@ const Lineup: React.FC = () => {
|
|||||||
fetchHeroes();
|
fetchHeroes();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Fetch lineups data
|
// Initial data fetch
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchLineups = async () => {
|
handleSearch();
|
||||||
setLoading(true);
|
}, []);
|
||||||
try {
|
|
||||||
const heroCodes = selectedHeroes.map(hero => hero.heroCode);
|
|
||||||
const data = await EpicApi.getGvgTeamList(heroCodes);
|
|
||||||
setLineups(data);
|
|
||||||
setError(null);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to fetch lineups:', err);
|
|
||||||
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchLineups();
|
|
||||||
}, [selectedHeroes]);
|
|
||||||
|
|
||||||
const difficulties = ["简单", "中等", "困难"];
|
|
||||||
|
|
||||||
const handleHeroSelect = (hero: EpicApi.Hero) => {
|
const handleHeroSelect = (hero: EpicApi.Hero) => {
|
||||||
if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
|
if (selectedHeroes.length < 3 && !selectedHeroes.find(h => h.id === hero.id)) {
|
||||||
@@ -60,20 +42,51 @@ const Lineup: React.FC = () => {
|
|||||||
setSelectedHeroes(selectedHeroes.filter(h => h.id !== heroId));
|
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);
|
||||||
|
const data = await EpicApi.getGvgTeamList(heroCodes);
|
||||||
|
setLineups(data);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch lineups:', err);
|
||||||
|
setError(err instanceof Error ? err.message : '获取阵容数据失败，请稍后再试');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
setSelectedHeroes([]);
|
||||||
|
setSearchInput("");
|
||||||
|
setLineups([]);
|
||||||
|
setError(null);
|
||||||
|
handleSearch(); // Fetch all lineups after reset
|
||||||
|
};
|
||||||
|
|
||||||
const filteredHeroes = heroes.filter(hero => {
|
const filteredHeroes = heroes.filter(hero => {
|
||||||
const searchLower = searchInput.toLowerCase();
|
const searchLower = searchInput.toLowerCase();
|
||||||
return hero.heroName.toLowerCase().includes(searchLower) ||
|
return hero.heroName.toLowerCase().includes(searchLower) ||
|
||||||
(hero.nickName && hero.nickName.toLowerCase().includes(searchLower));
|
(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 (
|
return (
|
||||||
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
|
<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
|
||||||
{/* 背景装饰 */}
|
{/* 背景装饰 */}
|
||||||
@@ -87,33 +100,28 @@ const Lineup: React.FC = () => {
|
|||||||
</h1>
|
</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="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="mb-4">
|
<div className="text-center mb-4 text-[#9B8579]">
|
||||||
<div className="flex flex-wrap gap-1">
|
<span>对战数据来源于</span>
|
||||||
{difficulties.map((difficulty) => (
|
<a
|
||||||
<button
|
href="https://docs.qq.com/sheet/DVmVIdGZOSnVJTHBq?tab=BB08J2"
|
||||||
key={difficulty}
|
target="_blank"
|
||||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button border ${
|
rel="noopener noreferrer"
|
||||||
selectedDifficulty === difficulty
|
className="text-[#E6B17E] hover:text-[#C17F59] mx-1"
|
||||||
? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]"
|
>
|
||||||
: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"
|
【鬼殺队GVG通解】
|
||||||
}`}
|
</a>
|
||||||
onClick={() => setSelectedDifficulty(difficulty)}
|
<span>感谢分享</span>
|
||||||
>
|
|
||||||
{difficulty}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 英雄多选下拉框 */}
|
{/* 英雄多选下拉框 */}
|
||||||
<div className="relative">
|
<div className="relative flex gap-2">
|
||||||
<div
|
<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)}
|
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.length > 0 ? (
|
||||||
selectedHeroes.map((hero) => (
|
selectedHeroes.map((hero) => (
|
||||||
<div
|
<div
|
||||||
@@ -136,13 +144,28 @@ const Lineup: React.FC = () => {
|
|||||||
<span className="text-[#9B8579]">选择防守英雄（最多3个）</span>
|
<span className="text-[#9B8579]">选择防守英雄（最多3个）</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}>
|
<span className={`transform transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''} ml-2`}>
|
||||||
▼
|
▼
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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 && (
|
{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">
|
<div className="p-2 border-b border-[#C17F59]/30">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -202,7 +225,7 @@ const Lineup: React.FC = () => {
|
|||||||
{/* 阵容列表 */}
|
{/* 阵容列表 */}
|
||||||
{!loading && (
|
{!loading && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{filteredLineups.map((lineup) => (
|
{lineups.map((lineup) => (
|
||||||
<div
|
<div
|
||||||
key={lineup.id}
|
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"
|
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