保存本地对routes.ts的修改
Change-Id: I4f4dbd8069893d7363e251130791dc0594be44e1
diff --git a/src/feature/home/Home.tsx b/src/feature/home/Home.tsx
index fc2c982..80e44eb 100644
--- a/src/feature/home/Home.tsx
+++ b/src/feature/home/Home.tsx
@@ -1,12 +1,116 @@
+import { NavLink } from 'react-router';
+import filmImg from '../../assets/categories/film.jpg';
+import musicImg from '../../assets/categories/music.jpg';
+import gameImg from '../../assets/categories/game.jpg';
+import otherImg from '../../assets/categories/other.jpg';
+// 假设你有排行榜数据，这里模拟一下，实际根据接口等替换
+const filmRankList = [
+ { id: 1, name: '影视作品1', view: '1.2万' },
+ { id: 2, name: '影视作品2', view: '1.1万' },
+ { id: 3, name: '影视作品3', view: '1.0万' },
+];
+const musicRankList = [
+ { id: 1, name: '音乐作品1', view: '1.5万' },
+ { id: 2, name: '音乐作品2', view: '1.3万' },
+ { id: 3, name: '音乐作品3', view: '1.2万' },
+];
+const gameRankList = [
+ { id: 1, name: '游戏作品1', view: '2.0万' },
+ { id: 2, name: '游戏作品2', view: '1.8万' },
+ { id: 3, name: '游戏作品3', view: '1.6万' },
+];
+const otherRankList = [
+ { id: 1, name: '其他作品1', view: '0.8万' },
+ { id: 2, name: '其他作品2', view: '0.7万' },
+ { id: 3, name: '其他作品3', view: '0.6万' },
+];
+
function Home() {
+ const categories = [
+ { id: 'film', name: '影视', image: filmImg, rankList: filmRankList },
+ { id: 'music', name: '音乐', image: musicImg, rankList: musicRankList },
+ { id: 'game', name: '游戏', image: gameImg, rankList: gameRankList },
+ { id: 'other', name: '其他', image: otherImg, rankList: otherRankList },
+ ];
return (
- <>
- 主页
- </>
- )
+ <div className="max-w-7xl mx-auto px-4 py-16 flex flex-col items-center">
+ {/* 页面标题 */}
+ <h1 className="text-[clamp(2rem,5vw,3.5rem)] font-bold text-center mb-12 text-gray-800 tracking-tight">
+ 欢迎访问创意协作平台
+ </h1>
+
+ {/* 分区 + 排行榜 容器，改为 flex 布局 */}
+ <div className="w-full flex max-w-6xl mx-auto">
+ {/* 分区卡片容器 - 响应式网格布局 */}
+ <div className="grid grid-cols-4 gap-6 w-3/4">
+ {categories.map((category) => (
+ <div
+ key={category.id}
+ className="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
+ >
+ <NavLink to={`/categories/${category.id}`} className="block">
+ {/* 图片容器 */}
+ <div className="aspect-[4/3] relative overflow-hidden">
+ {/* 背景图片 - 带模糊和亮度调整 */}
+ <img
+ src={category.image}
+ alt={category.name}
+ className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+ style={{ filter: 'blur(1px) brightness(0.85)' }}
+ />
+
+ {/* 渐变遮罩层 - 增强文字可读性 */}
+ <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
+
+ {/* 文字内容 */}
+ <div className="absolute inset-0 flex flex-col items-center justify-center p-4 z-20">
+ {/* 分类标题 - 艺术字体 */}
+ <h2 className="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white text-center mb-2" style={{
+ fontFamily: '"Playfair Display", serif',
+ textShadow: '0 4px 12px rgba(0,0,0,0.8)',
+ transform: 'translateY(10px)',
+ transition: 'transform 0.3s ease-out',
+ letterSpacing: '2px',
+ borderBottom: '2px solid rgba(255,255,255,0.6)',
+ paddingBottom: '4px'
+ }}>
+ {category.name}
+ </h2>
+
+ {/* 描述文本 - 悬停显示 */}
+ <p className="text-indigo-100 text-center opacity-0 transform translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 mt-2" style={{
+ fontFamily: '"Merriweather", serif',
+ textShadow: '0 2px 6px rgba(0,0,0,0.6)'
+ }}>
+ 探索{category.name}创意项目
+ </p>
+ </div>
+ </div>
+ </NavLink>
+ </div>
+ ))}
+ </div>
+
+ {/* 排行榜区域 - 右侧 */}
+ <div className="w-1/4 pl-6">
+ {categories.map((category) => (
+ <div key={category.id} className="mb-8">
+ <h3 className="text-xl font-bold text-gray-800 mb-4">{category.name}排行榜</h3>
+ <ul>
+ {category.rankList.map((item) => (
+ <li key={item.id} className="flex justify-between items-center mb-2">
+ <span>{item.name}</span>
+ <span className="text-gray-600">{item.view}</span>
+ </li>
+ ))}
+ </ul>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
}
-
-
-export default Home
+export default Home;
\ No newline at end of file