create-seed-list-4-9
Change-Id: Ifc7be9f2a5f40f371aaf0c417b22fe185d03a270
diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
new file mode 100644
index 0000000..3cc0e90
--- /dev/null
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -0,0 +1,42 @@
+.recommend-page {
+ padding: 20px;
+ background-color: #f0f0f0;
+}
+
+.recommend-section {
+ margin-bottom: 30px;
+}
+
+.recommend-section h2 {
+ font-size: 24px;
+ margin-bottom: 10px;
+ color: #333;
+}
+
+.recommend-row {
+ display: flex;
+ overflow-x: scroll;
+ gap: 20px;
+}
+
+.recommend-card {
+ width: 150px;
+ text-align: center;
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 10px;
+}
+
+.recommend-image {
+ width: 100%;
+ height: 150px;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.recommend-title {
+ margin-top: 10px;
+ font-size: 16px;
+ color: #333;
+}
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
new file mode 100644
index 0000000..c33d153
--- /dev/null
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import './Recommend.css';
+
+// 假数据
+const recommendData = {
+ paidList: [
+ { title: '片单 1', image: 'https://via.placeholder.com/150' },
+ { title: '片单 2', image: 'https://via.placeholder.com/150' },
+ { title: '片单 3', image: 'https://via.placeholder.com/150' },
+ ],
+ nowPlaying: [
+ { title: '电影 1', image: 'https://via.placeholder.com/150' },
+ { title: '电影 2', image: 'https://via.placeholder.com/150' },
+ { title: '电影 3', image: 'https://via.placeholder.com/150' },
+ { title: '电影 4', image: 'https://via.placeholder.com/150' },
+ { title: '电影 5', image: 'https://via.placeholder.com/150' },
+ { title: '电影 6', image: 'https://via.placeholder.com/150' },
+ { title: '电影 7', image: 'https://via.placeholder.com/150' },
+ { title: '电影 8', image: 'https://via.placeholder.com/150' },
+ ],
+ movieRecommendations: [
+ { title: '电影 1', image: 'https://via.placeholder.com/150' },
+ { title: '电影 2', image: 'https://via.placeholder.com/150' },
+ { title: '电影 3', image: 'https://via.placeholder.com/150' },
+ { title: '电影 4', image: 'https://via.placeholder.com/150' },
+ ],
+ tvRecommendations: [
+ { title: '电视剧 1', image: 'https://via.placeholder.com/150' },
+ { title: '电视剧 2', image: 'https://via.placeholder.com/150' },
+ { title: '电视剧 3', image: 'https://via.placeholder.com/150' },
+ { title: '电视剧 4', image: 'https://via.placeholder.com/150' },
+ ]
+};
+
+const Recommend = () => {
+ return (
+ <div className="recommend-page">
+ <div className="recommend-section">
+ <h2>付费片单</h2>
+ <div className="recommend-row">
+ {recommendData.paidList.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="recommend-section">
+ <h2>正在热映</h2>
+ <div className="recommend-row">
+ {recommendData.nowPlaying.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="recommend-section">
+ <h2>电影推荐</h2>
+ <div className="recommend-row">
+ {recommendData.movieRecommendations.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="recommend-section">
+ <h2>电视剧推荐</h2>
+ <div className="recommend-row">
+ {recommendData.tvRecommendations.map((item, index) => (
+ <div key={index} className="recommend-card">
+ <img src={item.image} alt={item.title} className="recommend-image" />
+ <span className="recommend-title">{item.title}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Recommend;