index.js 3.84 KB
Newer Older
wangshuo committed
1 2 3 4
import React, { Component } from 'react'
import './index.scss'

export default class Study extends Component {
FE committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  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;
  }

wangshuo committed
26 27 28
  render() {
    return (
      <div className={'study__container'}>
wangshuo committed
29 30
        <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=""/>
wangshuo committed
31
        <p className={'title'}> /  /  / </p>
FE committed
32
        <p className={'sub__title'}>17节课堂教学,带你掌握Python技术入门知识</p>
wangshuo committed
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
        <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}>
FE committed
61 62
                    <div className={'item__title'}>{ 
                    '第' + this.Change(index + 1) + '阶段 ' +item.name}</div>
wangshuo committed
63 64 65 66 67
                    {
                      item.lessons.map((item, index)=>{
                        return (
                          <div className={'item__content'} key={index}>
                            <div className={'content order_number number_center'}>{item.number}</div>
wangshuo committed
68
                            <div className={'content chapter'}>{item.name}</div>
wangshuo committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
                            <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>
    )
  }
}