kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(Lineup): 优化代码格式和布局

Browse Source 
- 调整了代码的缩进和空格，提高了可读性
-修复了一些小的语法问题，如缺少逗号等
- 优化了部分长行的换行方式，提高了代码的整洁度
This commit is contained in:
hxt
2025-04-24 19:47:30 +08:00
parent 4aa9c6921a
commit 04f167d3d6
1 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/Lineup.tsx
View File

@@ -57,13 +57,15 @@ const Lineup: React.FC = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
<h1 className="text-4xl font-bold text-center mb-8"> <h1 className="text-4xl font-bold text-center mb-8">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]"> <span
className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
对战阵容推荐 对战阵容推荐
</span> </span>
</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">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
<input <input
type="text" type="text"
@@ -132,7 +134,8 @@ const Lineup: React.FC = () => {
{/* 加载状态 */} {/* 加载状态 */}
{loading && ( {loading && (
<div className="flex justify-center items-center py-12"> <div className="flex justify-center items-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#E6B17E]"></div> <div
className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#E6B17E]"></div>
</div> </div>
)} )}
@@ -158,13 +161,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 group relative"> <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"> <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} {hero.heroName}
</div> </div>
</div> </div>
@@ -177,13 +182,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 group relative"> <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"> <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} {hero.heroName}
</div> </div>
</div> </div>