冲突

src/components/python/index.js

@@ -13,6 +13,12 @@ class Python extends Component {
     super(props);
     this.state = {
       isPay: 0,
+      syllabus: [], // 阶梯学习
+      allSyllabus: [], // 阶梯学习
+      allSyllabusShow: false,
+      practice: [], // 课后实操
+      allPractice: [], // 课后实操
+      allPracticeShow: false,
     }
   }
 
@@ -20,28 +26,72 @@ class Python extends Component {
     this.fetchCourseInfo();
   }
 
+  showAll = (key) => {
+    if(key === 1) {
+      this.setState({
+        syllabus: this.state.allSyllabus,
+        allSyllabusShow: true,
+      })
+    }
+    if(key === 2) {
+      this.setState({
+        practice: this.state.allPractice,
+        allPracticeShow: true,
+      })
+    }
+  }
+  hideSome = (key) => {
+    if(key === 1) {
+      this.setState({
+        syllabus: this.state.allSyllabus.slice(0, 2),
+        allSyllabusShow: false,
+      })
+    }
+    if(key === 2) {
+      this.setState({
+        practice: this.state.allPractice.slice(0, 2),
+        allPracticeShow: false,
+      })
+    }
+  }
+  fun = (fun, key) => {
+
+  }
+
   fetchCourseInfo = () => {
     const id = getParam('id');
     http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
-        const {data, code} = res.data;
-        if (code === 200) {
-
-            this.setState({
-              // TODO
-              // isPay: data.course_info.is_pay
-              isPay: 1
-            })
-        }
+      const { data, code } = res.data;
+      if (code === 200) {
+        this.setState({
+          // TODO
+          // isPay: data.course_info.is_pay
+        })
+      }
     });
-}
+
+    http.get(`${API['home']}/web/it_detail?course_id=180`).then(res => {
+      const { code, data, msg } = res.data
+      if (code == 200) {
+        this.setState({
+          syllabus: data.syllabus.slice(0, 2),
+          allSyllabus: data.syllabus,
+          practice: data.practice.slice(0, 2),
+          allPractice: data.practice,
+        })
+      } else {
+        Message.warning(msg);
+      }
+    });
+  }
 
   render() {
-    const {isPay} = this.state;
-    const {user: {hasError}} = this.props;
+    const { isPay, syllabus, allSyllabusShow, practice, allPracticeShow } = this.state;
+    const { user: { hasError } } = this.props;
     return (
-      <div style={{height:'100%'}}>
+      <div>
         {
-          isPay === 0 && <PythonDes ></PythonDes>
+          isPay === 0 && <PythonDes syllabus={syllabus} practice={practice} allSyllabusShow={allSyllabusShow} allPracticeShow={allPracticeShow} show={this.showAll} hide={this.hideSome}></PythonDes>
         }
         {
           isPay === 1 && <PythonStudy></PythonStudy>

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

+import React, { Component } from 'react'
+import './index.scss'
+
+export default class Experience extends Component {
+  render() {
+    return (
+      <div className={'experience_container'}>
+        <p className={'title'}>试 / 学 / 体 / 验</p>
+        <div className={'experience'}>
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/L%402x.png" alt=""/>
+          <div>
+            <p>限时福利免费试学</p>
+            <p>开始颠覆你想象的学习</p>
+          </div>
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
+        </div>
+        <div className={'btn'}>立即体验</div>
+      </div>
+    )
+  }
+}

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

+.experience_container {
+  padding-top: 32px;
+  padding-bottom: 40px;
+  .title {
+    font-size: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    color: rgba(0, 153, 255, 1);
+    text-align: center;
+  }
+
+  .experience {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 250px;
+    margin: 22px auto 28px;
+    img {
+      width: 16px;
+      height: 56px;
+    }
+    p {
+      font-size: 16px;
+      font-weight: 600;
+      color: rgba(82, 92, 101, 1);
+      line-height: 30px;
+      text-align: center;
+      letter-spacing: 4px;
+    }
+  }
+  .btn {
+    width: 150px;
+    height: 36px;
+    background: rgba(0, 153, 255, 1);
+    box-shadow: 0px 6px 12px 0px rgba(0, 153, 255, 0.06);
+    border-radius: 18px;
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 1);
+    line-height: 36px;
+    text-align: center;
+    margin: 0 auto;
+  }
+}

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'}>
+        <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.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>
+    )
+  }
+}

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

+.pro_container {
+  padding-top: 32px;
+  padding-bottom: 30px;
+  background: #0096ff;
+  position: relative;
+
+  img {
+    position: absolute;
+    width: 76px;
+    height: 174px;
+    left: 0;
+    bottom: 50px;
+  }
+  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/Study/index.js

+import React, { Component } from 'react'
+import './index.scss'
+
+export default class Study extends Component {
+  render() {
+    return (
+      <div className={'study__container'}>
+        <img className={'learn_left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/learn_left.png" alt=""/>
+        <img className={'learn_bottom'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/learn_bottom.png" alt=""/>
+        <p className={'title'}>阶 / 梯 / 学 / 习</p>
+        <p className={'sub__title'}>20节课堂教学，带你掌握Python技术入门知识</p>
+        <div className={'step__container'}>
+          <div className={'item__container'}>
+            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/wanzheng.png" alt=""/>
+            <p>完整的Python基础知识体系</p>
+            <div className={'item__line'}></div>
+          </div>
+          <div className={'item__container'}>
+            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/siwei.png" alt=""/>
+            <p>灵活的编程思维和实操技巧</p>
+            <div className={'item__line'}></div>
+          </div>
+          <div className={'item__container'}>
+            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shicao.png" alt=""/>
+            <p>丰富有趣的实操训练</p>
+          </div>
+        </div>
+
+        <div className={'table__container'}>
+          <div className={'table__head'}>
+            <div className={'head_title order_number'}>序号</div>
+            <div className={'head_title chapter'}>章节</div>
+            <div className={'head_title points'}>知识点</div>
+          </div>
+          <div className={'table__body'}>
+            {
+              this.props.syllabus.map((item, index)=>{
+                return (
+                  <div className={'item__container'} key={index}>
+                    <div className={'item__title'}>{item.name}</div>
+                    {
+                      item.lessons.map((item, index)=>{
+                        return (
+                          <div className={'item__content'} key={index}>
+                            <div className={'content order_number number_center'}>{item.number}</div>
+                            <div className={'content chapter'}>{item.number}</div>
+                            <div className={'content points'}>{item.info.name}</div>
+                          </div>
+                        )
+                      })
+                    }
+                  </div>
+                )
+              })
+            }
+          </div>
+          <div className={'table__bottom'}>
+            {
+              this.props.allSyllabusShow ? (
+                <div onClick={() => this.props.hide(1)}>
+                  <p>收起</p>
+                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
+                </div>
+              ) : (
+                <div onClick={() => this.props.show(1)}>
+                  <p>展开更多</p>
+                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
+                </div>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

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

+.study__container {
+  background: #0096ff;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 32px 0 30px 0;
+  position: relative;
+  .learn_left {
+    position: absolute;
+    left: 0;
+    top: 36px;
+    width: 46px;
+    height: 126px;
+  }
+  .learn_bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 156px;
+    height: 234px;
+  }
+  .title {
+    font-size: 20px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 1);
+    line-height: 20px;
+  }
+  .sub__title {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 1);
+    margin: 12px 0 22px 0;
+  }
+  .step__container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    .item__container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-left: 28px;
+      width: 80px;
+      position: relative;
+      &:first-child {
+        margin-left: 0;
+      }
+      img {
+        width: 34px;
+        height: 34px;
+        margin-bottom: 10px;
+      }
+      p {
+        text-align: center;
+        font-size: 12px;
+        line-height: 12px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 1);
+        line-height: 16px;
+      }
+      .item__line {
+        width: 34px;
+        height: 1px;
+        background: rgba(255, 255, 255, 1);
+        opacity: 0.4;
+        border-radius: 0px;
+        position: absolute;
+        top: 18px;
+        right: -34px;
+      }
+    }
+  }
+
+  .table__container {
+    width: 358px;
+    color: #fff;
+    background: #005ac6;
+    margin-top: 22px;
+    position: relative;
+    .order_number {
+      width: 50px;
+    }
+    .chapter {
+      width: 158px;
+      border-left: 1px solid #0099ff;
+      border-right: 1px solid #0099ff;
+    }
+    .points {
+      width: 150px;
+    }
+    .table__head {
+      width: 100%;
+      height: 32px;
+      background: #ffd75d;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-radius: 4px 4px 0 0;
+
+      .head_title {
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 600;
+        color: rgba(0, 93, 195, 1);
+      }
+    }
+
+    .table__body {
+      width: 100%;
+      .item__container {
+        .item__title {
+          height: 36px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(255, 214, 103, 1);
+        }
+      }
+      .item__content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid #0099FF;
+        &:last-child {
+          border-bottom: 1px solid #0099FF;
+        }
+        .content {
+          height: 36px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          padding-left: 6px;
+          padding-right: 6px;
+        }
+        .number_center {
+          display: flex;
+          justify-content: center;
+          padding-left: 0;
+        }
+      }
+    }
+  
+    .table__bottom {
+      height: 36px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 400;
+      div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      img {
+        width: 9px;
+        height: 9px;
+        margin-left: 6px;
+      }
+    }
+  }
+}

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

+import React, { Component } from 'react'
+import './index.scss'
+
+export default class Team extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      teacherList: [
+        {
+          name: 'A老师',
+          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
+        },
+        {
+          name: 'A老师',
+          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
+        },
+        {
+          name: 'A老师',
+          des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
+        },{
+          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'}>
+                <div className={'item_image'}></div>
+                <div className={'item_info'}>
+                  <span className={'name'}>{item.name}</span>
+                  <p className={'des'}>{item.des}</p>
+                </div>
+              </li>
+            )
+          })
+        }
+        </ul>
+      </div>
+    )
+  }
+}

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

+.team_container {
+  padding-top: 32px;
+  background: #0096ff;
+  padding-bottom: 46px;
+  position: relative;
+  .team_top {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 78px;
+    height: 76px;
+  }
+  .team_bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 238px;
+    height: 246px;
+  }
+  p {
+    text-align: center;
+    text-align-last: center;
+  }
+  .title {
+    font-size: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .sub_title {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 1);
+    margin: 12px auto 18px;
+  }
+
+  .item_li {
+    width: 352px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 4px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 0 auto 12px;
+    padding: 12px 14px 14px 12px;
+
+    .item_image {
+      width: 44px;
+      height: 44px;
+      border-radius: 22px;
+      background: #0099ff;
+      flex: 0 0 auto;
+      margin-right: 14px;
+    }
+    .item_info {
+      .name {
+        font-size: 16px;
+        line-height: 16px;
+        font-weight: 600;
+        color: rgba(82, 92, 101, 1);
+      }
+
+      .des {
+        font-size: 12px;
+        line-height: 15px;
+        font-weight: 300;
+        color: rgba(82, 92, 101, 0.8);
+        text-align: left;
+        text-align-last: left;
+        margin-top: 6px;
+        width: 266px;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 5;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}

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

+import React, { Component } from 'react'
+import './index.scss'
+
+export default class Test extends Component {
+  Change = (data) => {
+    let cn = ["一", "二", "三", "四", "五", "六", "七", "八", "九", '十'];
+    let newStr = ''
+    let str = data.toString()
+    let ci = Number(str) % 10
+    let cs = Math.floor(Number(str) / 10)
+    let cv = ''
+    if (str.length > 1) {
+        if(cs==1){
+            cv = ci >= 1 ? cn[9] + cn[ci - 1] : cn[9]
+        } else {
+            cv = ci > 1 ? cn[cs - 1] + cn[9] + cn[ci - 1] : cn[cs - 1] + cn[9]
+        }
+    } else {
+        cv = cn[ci - 1]
+    }
+    newStr = str.replace(str, cv)
+    return newStr;
+}
+
+  render() {
+    return (
+      <div className={'test_container'}>
+        <p className={'title'}>课 / 后 / 实 / 操</p>
+        <p className={'sub_title'}>涵盖完整知识体系，让你掌握实用高效的编程技巧</p>
+        <div className={'table_container'}>
+          <div className={'table_head'}>
+            <span>序号</span>
+            <span>实操项目</span>
+          </div>
+          <div className={'table_body'}>
+            {
+              this.props.practice.map((item, index)=>{
+                return <div key={index}>
+                  <div className='stage'>{`第${this.Change(item.stage)}阶段 ${item.name}`}</div>
+                  {
+                    item.questions.map((question, index)=>{
+                      return <div key={index} className={'line'}>
+                        <span>{index}</span>
+                        <div className={'test_name'}>
+                          <img src={question.icon} alt=""/>
+                          <p>{question.name}</p>
+                        </div>
+                      </div>
+                    })
+                  }
+                </div>
+              })
+            }
+          </div>
+          <div className={'table_bottom'}>
+            {
+              this.props.allPracticeShow ? (
+                <div onClick={()=>this.props.hide(2)}>
+                  <p>收起</p>
+                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
+                </div>
+              ) : (
+                <div onClick={()=>this.props.show(2)}>
+                  <p>展开更多</p>
+                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
+                </div>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

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

+.test_container {
+  background: #fff;
+  padding-top: 30px;
+  padding-bottom: 44px;
+
+  .title {
+    font-size: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    color: rgba(0, 153, 255, 1);
+    text-align: center;
+    text-align-last: center;
+  }
+  .sub_title {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 300;
+    color: rgba(0, 153, 255, 1);
+    margin: 12px auto 24px;
+    text-align: center;
+    text-align-last: center;
+  }
+
+  .table_container {
+    width: 358px;
+    margin: 0 auto;
+
+    .table_head {
+      background: #ffd667;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 4px 4px 0 0;
+
+      span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 50px;
+        height: 32px;
+
+        &:last-child {
+          width: 308px;
+          border-left: 1px solid #0099ff;
+        }
+      }
+    }
+
+    .table_body {
+      background: #34AFFF;
+      .stage {
+        height: 38px;
+        font-size: 14px;
+        line-height: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .line {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 36px;
+        border-top: 1px solid #0099FF;
+        color: #FFF;
+        font-size: 12px;
+        span {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 50px;
+        }
+        .test_name {
+          width: 308px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          border-left: 1px solid #0099FF;
+          height: 36px;
+          img {
+            width: 20px;
+            height: 20px;
+            border-radius: 5px;
+            margin: 0 10px;
+          }
+        }
+
+      }
+    }
+
+    .table_bottom {
+      height: 36px;
+      background: #3DB1FF;
+      border-top: 1px solid #0099FF;
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 36px;
+        color: #FFF;
+        font-size: 12px;
+      }
+      img {
+        width: 9px;
+        height: 9px;
+        margin-left: 6px;
+      }
+    }
+  }
+}

src/components/python/pythomDes/index.js

@@ -2,6 +2,11 @@ import React, { Component } from 'react'
 import './index.scss'
 import Description from './Description/index.js';
 import NoWorry from './NoWorry/index.js';
+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) {
@@ -79,7 +84,7 @@ export default class PythonDes extends Component {
               <div className={'triangle'}></div>
             </div>
           </div>
-          
+
           <div className={'btn__group'}>
             <div className={'try__study'}>免费试学</div>
             <div className={'sign__now'}>立即报名</div>
@@ -87,6 +92,12 @@ export default class PythonDes extends Component {
         </div>
         <Description list={desList}></Description>
         <NoWorry list={worryList}></NoWorry>
+        <Study syllabus={this.props.syllabus} allSyllabusShow={this.props.allSyllabusShow} show={this.props.show} hide={this.props.hide}></Study>
+        <Test practice={this.props.practice} allPracticeShow={this.props.allPracticeShow} show={this.props.show} hide={this.props.hide}></Test>
+        <Team />
+        <Experience />
+        <img style={{display: 'block', width: '100%', height: '8px'}} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png" alt=""/>
+        <Progream />
       </div>
     )
   }

src/components/python/pythonStudy/index.js

@@ -207,4 +207,4 @@ class PythonStudy extends Component {
 export default connect(
     state => ({user: state.user}),
     null
-)(PythonStudy);
+)(PythonStudy);
\ No newline at end of file

src/components/python/pythonStudy/index.scss

 html, body, #root {
   height: 100%;
 }
-
 .am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
   height: 44px;
   padding-left: 13px;
@@ -80,6 +79,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
 }
 
 .python-study__progress {
+  color: rgba(255,255,255,.8);
+}
+
+.python-study__progress {
+  height: 66px;
   padding: 0 12px;
 }
 
@@ -167,8 +171,6 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
   border-radius: 4px;
   box-sizing: border-box;
   background-color: rgba(247, 248, 249, 1);
-
-
   &[data-status="lock"] {
     background-color: rgba(247, 248, 249, .6);
   }
@@ -209,6 +211,9 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
 .python-study__subject-title {
   max-width: 220px;
   width: 228px;
+}
+
+.python-study__subject-title {
   font-size: 14px;
   color: #333;
   line-height: 18px;