index.js

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

export default class Description extends Component {

  state = {
    list: [
      {
        icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_1.png',
        text: '0门槛交互式授课，学习像聊天一样有趣；'
      },
      {
        icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_2.png',
        text: '原理部分结合图片和例子，内容讲解详细；'
      },
      {
        icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_3.png',
        text: '代码逐行讲解，在线编程，QQ群答疑，学会为止；'
      },
      {
        icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_4.png',
        text: '精编课程习题，结合面试场景，夯实理论基础；'
      },
      {
        icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_5.png',
        text: '精选项目干货，结合所学，手把手指导。'
      },
    ]
  }

  render() {
    const {list} = this.state
    return (
      <div className={'description'}>
        <img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png" alt=""/>
        <img className={'right'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png" alt=""/>
        <p className={'title'}>课 / 程 / 特 / 色</p>
        <img src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/ml-introduce.png'}/>
        <ul className={'des-list'}>
          {
            list.map((item,index) => {
              return <li key={index}>
                <img src={item.icon} alt=""/>
                <span>{item.text}</span>
              </li>
            })
          }
        </ul>
      </div>
    )
  }
}