担心

package-lock.json

@@ -1846,6 +1846,11 @@
         "negotiator": "0.6.1"
       }
     },
+    "ace-builds": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.7.tgz",
+      "integrity": "sha512-gwQGVFewBopRLho08BfahyvRa9FlB43JUig5ItAKTYc9kJJsbA9QNz75p28QtQomoPQ9rJx82ymL21x4ZSZmdg=="
+    },
     "acorn": {
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
@@ -4686,6 +4691,11 @@
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
       "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
     },
+    "diff-match-patch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+      "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -9235,6 +9245,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -9245,6 +9260,11 @@
       "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -12051,6 +12071,18 @@
         "scheduler": "^0.13.6"
       }
     },
+    "react-ace": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-8.0.0.tgz",
+      "integrity": "sha512-EvU14vXbZpAenb1ZVKdn8yTQs/shZ9RghFulHtt67bBXT6sjrNHcfOEXHYtSEmwMb6pQVVNNuulzzd8o+Uouig==",
+      "requires": {
+        "ace-builds": "^1.4.6",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-app-polyfill": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz",

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

@@ -5,6 +5,8 @@ export default class Description extends Component {
   render() {
     return (
       <div className={'description'}>
+        <img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left.png" alt=""/>
+        <img className={'right'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right.png" alt=""/>
         <p className={'title'}>课 / 程 / 介 / 绍</p>
         <p className={'sub__title'}>对话式交互教学+课后实操，20节课全面掌握Python基础语法</p>
         <img src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/diannao.png'} />

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

@@ -6,6 +6,21 @@
   justify-content: flex-start;
   align-items: center;
   padding: 32px 0 38px 0;
+  position: relative;
+  .left {
+    position: absolute;
+    width: 50px;
+    height: 144px;
+    left: 0;
+    top: 18px;
+  }
+  .right {
+    position: absolute;
+    right: 0;
+    bottom: 4px;
+    width: 48px;
+    height: 132px;
+  }
   .title {
     font-size: 22px;
     font-weight: 600;

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

+import React, { Component } from 'react'
+import './index.scss'
+
+export default class NoWorry extends Component {
+  render() {
+    return (
+      <div className={'worry__container'}>
+        <img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/worry_left.png" alt=""/>
+        <p className={'title'}>你 / 的 / 担 / 忧</p>
+        <p className={'sub__title'}>全新的课程形式，轻松、有趣的课程内容，解除你所有的担忧</p>
+        {
+          this.props.list.map((item, index)=>{
+            return (
+              <WorryItem item={item} key={index}></WorryItem>
+            )
+          })
+        }
+      </div>
+    )
+  }
+}
+
+function WorryItem(props) {
+  const {url, title, subTitle} = props.item
+  return (
+    <div className={'item__container'}>
+      <div className={'head'}></div>
+      <img src={url} alt=""/>
+      <p className={'title'}>{title}</p>
+      <p className={'des'}>{subTitle}</p>
+    </div>
+  )
+}

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

+.worry__container {
+  padding: 32px 0 44px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  .left {
+    position: absolute;
+    left: 0;
+    top: 150px;
+    width: 40px;
+    height: 220px;
+  }
+  .title {
+    font-size: 22px;
+    line-height: 22px;
+    font-weight: 600;
+    color: rgba(0, 153, 255, 1);
+    margin-bottom: 12px;
+  }
+  .sub__title {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 300;
+    color: rgba(0, 153, 255, 1);
+    margin-bottom: 40px;
+  }
+  .item__container {
+    width: 310px;
+    height: 214px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.03);
+    border-radius: 4px;
+    margin-bottom: 22px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 0 26px;
+    align-items: center;
+    z-index: 9;
+
+    .head {
+      width: 310px;
+      height: 4px;
+      background: rgba(0, 153, 255, 1);
+      border-radius: 4px 4px 0 0;
+      margin-bottom: 12px;
+    }
+    img {
+      width: 58px;
+      height: 58px;
+    }
+    .title {
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: 600;
+      color: rgba(82, 92, 101, 1);
+      margin: 16px 0 12px 0;
+    }
+    .des {
+      font-size: 12px;
+      font-weight: 400;
+      color: rgba(82, 92, 101, 1);
+      line-height: 20px;
+    }
+  }
+}

src/components/python/pythomDes/index.js

 import React, { Component } from 'react'
 import './index.scss'
 import Description from './Description/index.js';
+import NoWorry from './NoWorry/index.js';
 
 export default class PythonDes extends Component {
   constructor(props) {
@@ -45,12 +46,17 @@ export default class PythonDes extends Component {
         {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xingshi.png', title: '全新课程形式', subTitle: '对话式交互教学，轻松、生动、不无聊'},
         {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/huanjing.png', title: '在线编程环境', subTitle: '无需安装任何编程软件'},
         {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/rumen.png', title: '20天零基础入门', subTitle: '降低学习门槛，20天入门人工智能'},
-      ]
+      ],
+      worryList: [
+        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiechu.png', title: '初次接触，担心学不会', subTitle: '本课程专门为零基础的你打造，全篇通过最白话沟通交流的方式进行讲解，无论你有无编程经验都可以轻松理解并且掌握。'},
+        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/xuexi.png', title: '想学习，没有坚持下来', subTitle: '以故事性的方式编写学习内容， 把生硬的知识点有趣化。精美的图片+幽默的文字+代码编写让你越学越向学。'},
+        {url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhishidian.png', title: '知识点掌握了，不知如何运用', subTitle: '每节课的知识点都设有代码编写部分，每节课课后都有课后实操。有多次代码编写练习的机会，助你真正学以致用。'},
+      ],
     }
   }
 
   render() {
-    const {defineList, desList} = this.state;
+    const {defineList, desList, worryList} = this.state;
     return (
       <div className={'python__des'}>
         <div className={'des__start'}></div>
@@ -80,6 +86,7 @@ export default class PythonDes extends Component {
           </div>
         </div>
         <Description list={desList}></Description>
+        <NoWorry list={worryList}></NoWorry>
       </div>
     )
   }