index.js

import React from 'react';
import styles from './index.less';

const list = [
  {
    title: '医学细胞生物学（本临床定向）',
    courseType: '购买普通课程',
    buyTime: '2012.01.23',
    invalidTime: '2012.01.23',
    amount: 8.00,
  },
  {
    title: '医学细胞生物学（本临床定向）',
    courseType: '购买普通课程',
    buyTime: '2020.3.28 09:47:11',
    invalidTime: '2020.3.28 09:47:11',
    amount: 8.00,
  },
  {
    title: '医学细胞生物学（本临床定向）',
    courseType: '购买普通课程',
    buyTime: '2020.3.28 09:47:11',
    invalidTime: '2020.3.28 09:47:11',
    amount: 8.00,
  },
];
const Index = () => {
  const renderItem = () => {
    return list.map(({ title, courseType, buyTime, invalidTime, amount }) => {
      return (
        <div className={styles.item}>
          <div className={styles.top}>
            <div className={styles.title}>
              <div className={styles.courseTitle}>{title}</div>
              <div className={styles.courseType}>{courseType}</div>
            </div>
            <div className={styles.amount}>-{amount}</div>
          </div>
          <div className={styles.bottom}>
            <div className={styles.time}>
              <span>购买时间</span>
              <span>{buyTime}</span>
            </div>
            <div className={styles.time}>
              <span>失效时间</span>
              <span>{invalidTime}</span>
            </div>
          </div>
        </div>
      );
    });
  };
  return <div className={styles.root}>{renderItem()}</div>;
};
export default Index;