课程介绍

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

@@ -5,11 +5,13 @@ export default class Description extends Component {
   render() {
     return (
       <div className={'description'}>
-        <p>课 / 程 / 介 / 绍</p>
-        <p>对话式交互教学+课后实操，20节课全面掌握Python基础语法</p>
-        <img src={} />
+        <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'} />
         {
-
+          this.props.list.map((item, index)=>{
+            return <DesList item={item} key={index}></DesList>
+          })
         }
       </div>
     )
@@ -17,5 +19,14 @@ export default class Description extends Component {
 }
 
 function DesList(props) {
-
+  const {url, title, subTitle} = props.item;
+  return (
+    <div className={'des__container'}>
+      <img src={url} alt=""/>
+      <div>
+        <p className={'item__title'}>{title}</p>
+        <p className={'item__sub'}>{subTitle}</p>
+      </div>
+    </div>
+  )
 }

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

 .description {
-  
-}
+  width: 100%;
+  background: #0099ff;
\ No newline at end of file
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 32px 0 38px 0;
+  .title {
+    font-size: 22px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 1);
+    margin-bottom: 12px;
+  }
+  .sub__title {
+    font-size: 12px;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 1);
+    margin-bottom: 40px;
+  }
+  img {
+    width: 290px;
+    height: 170px;
+  }
+  .des__container {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 50px;
+    margin-top: 28px;
+    img {
+      width: 64px;
+      height: 64px;
+      margin-right: 12px;
+    }
+    .item__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 1);
+      margin-bottom: 10px;
+      line-height: 16px;
+    }
+    .item__sub {
+      font-size: 12px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      line-height: 12px;
+    }
+  }
+}

src/components/python/pythomDes/index.js

 import React, { Component } from 'react'
 import './index.scss'
-import Description from './Description';
+import Description from './Description/index.js';
 
 export default class PythonDes extends Component {
   constructor(props) {
@@ -42,15 +42,15 @@ export default class PythonDes extends Component {
         }
       ],
       desList: [
-        {url: '', title: '全新课程形式', subTitle: '对话式交互教学，轻松、生动、不无聊'},
-        {url: '', title: '在线编程环境', subTitle: '无需安装任何编程软件'},
-        {url: '', title: '20天零基础入门', subTitle: '降低学习门槛，20天入门人工智能'},
+        {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天入门人工智能'},
       ]
     }
   }
 
   render() {
-    const {defineList} = this.state;
+    const {defineList, desList} = this.state;
     return (
       <div className={'python__des'}>
         <div className={'des__start'}></div>
@@ -79,7 +79,7 @@ export default class PythonDes extends Component {
             <div className={'sign__now'}>立即报名</div>
           </div>
         </div>
-        <Description></Description>
+        <Description list={desList}></Description>
       </div>
     )
   }