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

export default class Description extends Component {
  render() {
    return (
      <div className={'description'}>
        <img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left.png" alt=""/>
        <img className={'right'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right.png" alt=""/>
        <p className={'title'}>课 / 程 / 介 / 绍</p>
        <p className={'sub__title'}>对话式交互教学+课后实操，17节课全面掌握Python基础语法</p>
        <img src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/diannao.png'} />
        {
          this.props.list.map((item, index)=>{
            return <DesList item={item} key={index}></DesList>
          })
        }
      </div>
    )
  }
}

function DesList(props) {
  const {url, title, subTitle} = props.item;
  return (
    <div className={'des__container'}>
      <img src={url} alt=""/>
      <div>
        <p className={'item__title'}>{title}</p>
        <p className={'item__sub'}>{subTitle}</p>
      </div>
    </div>
  )
}