index.js

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

export default class Team extends Component {
  constructor(props) {
    super(props);
    this.state = {
      teacherList: [
        {
          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher1.png',
          name: 'A老师',
          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
        },
        {
          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher2.png',
          name: 'A老师',
          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
        },
        {
          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher3.png',
          name: 'A老师',
          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
        },
        {
          avatar: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/teacher4.png',
          name: 'A老师',
          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
        }
      ]
    }
  }
  render() {
    const {teacherList} = this.state;
    return (
      <div className={'team_container'}>
        <img className={'team_top'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/team_top.png" alt=""/>
        <img className={'team_bottom'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/team_bottom.png" alt=""/>
        <p className={'title'}>教/学/团/队</p>
        <p className={'sub_title'}>讲师+助教+班主任全程陪伴，哪里不会问哪里</p>
        <ul>
        {
          teacherList.map((item,index)=>{
            return (
              <li key={index} className={'item_li'}>
                <img className={'item_image'} src={item.avatar} alt=""/>
                <div className={'item_info'}>
                  <span className={'name'}>{item.name}</span>
                  <p className={'des'}>{item.des}</p>
                </div>
              </li>
            )
          })
        }
        </ul>
      </div>
    )
  }
}