src/pages/SeedList/Recommend/Recommend.jsx

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;