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

export default class Progream extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          q: "课程学习周期是多久？",
          a:
            "每天学习1小时，课程采用通关制解锁的方式，根据自己的时间和学习速度灵活调整。",
        },
        {
          q: "我没有Python基础可以学习吗？",
          a:
            "我们的课程是面向零基础的小伙伴设计的，课程通过故事叙述的方式由浅入深，层层递进，尽可能帮助大家理解并且掌握所学知识，没有任何基础是可以学习的。",
        },
        {
          q: "学习过程中遇到了困难怎么办？",
          a: "我们为学员配备了专门的助教，有问题随时可以咨询助教老师。",
        },
        {
          q: "需要自己安装代码运行环境吗？",
          a:
            "在平台上学习不需要安装任何环境，该课程包含的知识点实操以及课后实操都可以在平台上完成。",
        },
      ],
    }
  }
  render() {
    const { list } = this.state
    return (
      <div className={"pro_container"}>
        <img
          src="https://cdn.julyedu.com/h5_python_class/pro_left.png"
          alt=""
        />
        <p>常 / 见 / 问 / 题</p>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={index} className={"q_item"}>
                <div className={"q"}>
                  {" "}
                  <p>{`Q：${item.q}`}</p> <span></span>
                </div>
                <div className={"a__container"}>
                  <div>A：</div>
                  <p>{item.a}</p>
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}