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

export default class Team extends Component {
  constructor(props) {
    super(props)
    this.state = {
      teacherList: [
        {
          avatar: "https://cdn.julyedu.com/h5_python_class/teacher1.png",
          name: "陈博士",
          des:
            "七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余篇。",
        },
        {
          avatar: "https://cdn.julyedu.com/h5_python_class/teacher2.png",
          name: "孙老师",
          des:
            "10多年开发经验，先后任职国内知名互联网企业，从事人工智能方向的实施，擅长全栈开发，将机器学习/深度学习结合到实际生产运营中。",
        },
        {
          avatar: "https://cdn.julyedu.com/h5_python_class/teacher3.png",
          name: "史老师",
          des:
            "计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验，授课思路清晰明了，通俗易懂，幽默风趣的讲课方式将枯燥的知识以通俗的方式展现，深受学生好评。",
        },
        {
          avatar: "https://cdn.julyedu.com/h5_python_class/teacher4.png",
          name: "珊酱",
          des:
            "班主任的工作是一项非常辛苦和琐碎的工作，不付出艰辛的劳动和辛苦的汗水是不会有收获的。历经数万名学员的一对一服务，始终坚持给学员做到最好的服务和最严格的要求，学员的点滴进步和成长就是我最大的期望！",
        },
      ],
    }
  }
  render() {
    const { teacherList } = this.state
    return (
      <div className={"team_container"}>
        <img
          className={"team_top"}
          src="https://cdn.julyedu.com/h5_python_class/team_top.png"
          alt=""
        />
        <img
          className={"team_bottom"}
          src="https://cdn.julyedu.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>
    )
  }
}