This commit is contained in:
hu xiaotong
2025-04-23 17:23:03 +08:00
parent 1d74593cea
commit 4aa9c6921a

View File

@@ -158,12 +158,15 @@ const Lineup: React.FC = () => {
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4"></h4> <h4 className="text-lg font-semibold text-[#E6B17E] mb-4"></h4>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{lineup.defenseHeroInfos.map((hero, index) => ( {lineup.defenseHeroInfos.map((hero, index) => (
<div key={index} className="flex flex-col items-center"> <div key={index} className="flex flex-col items-center group relative">
<img <img
src={hero.headImgUrl} src={hero.headImgUrl}
alt={hero.heroCode} alt={hero.heroCode}
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300" className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
/> />
<div className="absolute bottom-full mb-2 px-2 py-1 bg-[#1A1412] text-[#E6B17E] text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap border border-[#C17F59]/30">
{hero.heroName}
</div>
</div> </div>
))} ))}
</div> </div>
@@ -174,12 +177,15 @@ const Lineup: React.FC = () => {
<h4 className="text-lg font-semibold text-[#E6B17E] mb-4"></h4> <h4 className="text-lg font-semibold text-[#E6B17E] mb-4"></h4>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{lineup.attackHeroInfos.map((hero, index) => ( {lineup.attackHeroInfos.map((hero, index) => (
<div key={index} className="flex flex-col items-center"> <div key={index} className="flex flex-col items-center group relative">
<img <img
src={hero.headImgUrl} src={hero.headImgUrl}
alt={hero.heroCode} alt={hero.heroCode}
className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300" className="w-16 h-16 rounded-full border-2 border-[#C17F59]/30 hover:border-[#C17F59] transition-colors duration-300"
/> />
<div className="absolute bottom-full mb-2 px-2 py-1 bg-[#1A1412] text-[#E6B17E] text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap border border-[#C17F59]/30">
{hero.heroName}
</div>
</div> </div>
))} ))}
</div> </div>