常见问题

src/components/python/pythomDes/Progream/index.js

+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'}>
+        <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>
+    )
+  }
+}

src/components/python/pythomDes/Progream/index.scss

+.pro_container {
+  padding-top: 32px;
+  padding-bottom: 30px;
+  background: #0096ff;
+
+  p {
+    font-size: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+  }
+
+  .q_item {
+    width: 340px;
+    min-height: 86px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 0px 5px 0px rgba(153, 153, 153, 0.06);
+    border-radius: 2px;
+    margin: 0 auto 12px;
+    padding: 14px 15px 10px;
+    &:first-child {
+      margin-top: 18px;
+    }
+    .q {
+      position: relative;
+      display: inline-block;
+      p {
+        font-size: 14px;
+        line-height: 14px;
+        font-weight: 600;
+        color: rgba(82, 92, 101, 1);
+        text-align: left;
+        z-index: 9;
+        position: relative;
+      }
+      span {
+        position: absolute;
+        width: 70%;
+        height: 4px;
+        background:rgba(255,214,103,1);
+        left: 0;
+        bottom: 0;
+        z-index: 0;
+      }
+
+    }
+    .a__container {
+      display: flex;
+      justify-content: flex-start;
+      align-content: flex-start;
+      margin-top: 10px;
+      div {
+        font-size: 12px;
+        color:rgba(82,92,101,1);
+        font-weight:600;
+      }
+      p {
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(82, 92, 101, 0.8);
+        line-height: 16px;
+        text-align: left;
+      }
+    }
+  }
+}

src/components/python/pythomDes/index.js

@@ -6,6 +6,7 @@ import Study from './Study/index.js';
 import Test from './Test/index.js';
 import Team from './Team/index.js';
 import Experience from './Experience/index.js'
+import Progream from './Progream/index.js'
 
 export default class PythonDes extends Component {
   constructor(props) {
@@ -95,7 +96,8 @@ export default class PythonDes extends Component {
         <Test practice={this.props.practice} allPracticeShow={this.props.allPracticeShow} show={this.props.show} hide={this.props.hide}></Test>
         <Team />
         <Experience />
-        <img style={{width: '100%', height: '8px'}} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png" alt=""/>
+        <div style={{height: '8px'}}><img style={{width: '100%', height: '8px'}} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png" alt=""/></div>
+        <Progream />
       </div>
     )
   }