index.js

import React, { Component } from "react"
import "./index.scss"

export default class NoWorry extends Component {
  render() {
    return (
      <div className={"worry__container"}>
        <img
          className={"left"}
          src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/worry_left.png"
          alt=""
        />
        <p className={"title"}>你 / 的 / 担 / 忧</p>
        <p className={"sub__title"}>
          全新的课程形式，轻松、有趣的课程内容，解除你所有的担忧
        </p>
        {this.props.list.map((item, index) => {
          return <WorryItem item={item} key={index}></WorryItem>
        })}
      </div>
    )
  }
}

function WorryItem(props) {
  const { url, title, subTitle } = props.item
  return (
    <div className={"item__container"}>
      <div className={"head"}></div>
      <img src={url} alt="" />
      <p className={"title"}>{title}</p>
      <p className={"des"}>{subTitle}</p>
    </div>
  )
}