Skip to content

M
mr-julyedu
Commit f84c6fda by zhanghaozhe
Options

ml

parent 9d16cab6
Showing with 354 additions and 488 deletions
src/components/detail/index.js
......@@ -313,7 +313,6 @@ class Detail extends Component {
}
payCallBack = (singleType, nowPrice, laterPrice) => {
// Toast.info(singleType, 2);
const _this = this;
if (singleType === 2) {
_this.setState({
......@@ -339,8 +338,18 @@ class Detail extends Component {
course: data
});
if (data.course_info) {
if (data.course_info.is_it_course == 1) {
this.props.history.push(`/python?id=${id}`)
const mode = data.course_info.mode
if (mode) {
const {history} = this.props
/*
* mode: 课程模式 1集训营2普通小课3就业班4VIP 5AI特训营 6图文小课-python 7图文小课-ML
* */
const route = {
6: 'python',
7: 'ml'
}
history.push(`${route[mode]}?id=${id}`)
}
let course_info = data.course_info;
......
src/components/ml/poup/index.js
import React, { Component } from 'react'
import './index.scss'
import {CallApp} from './../../../common'
export default class Poup extends Component {
render() {
......@@ -11,13 +10,11 @@ export default class Poup extends Component {
{
this.props.type === 1 ? (
<>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端或者APP体验课程。</p>
<CallApp className='btn btn-18B4ED' text={'前往APP体验课程'}></CallApp>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端体验课程。</p>
</>
) : (
<>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端或者APP学习课程。</p>
<CallApp className='btn btn-18B4ED' text={'前往APP学习课程'}></CallApp>
<p className={'tip'}>当前环境暂不支持该课程模式，您可前往七月在线PC端学习课程。</p>
</>
)
}
......
src/components/ml/poup/index.scss
......@@ -18,7 +18,7 @@
}
.content {
width: 300px;
height: 196px;
height: 130px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
position: absolute;
......
src/components/ml/pythomDes/Description/index.js
......@@ -2,33 +2,51 @@ import React, { Component } from 'react'
import './index.scss'
export default class Description extends Component {
state = {
list: [
{
icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_1.png',
text: '交互式授课，学习像聊天一样有趣；'
},
{
icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_2.png',
text: '原理部分结合图片和例子，内容讲解详细；'
},
{
icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_3.png',
text: '代码逐行讲解，在线编程，QQ群答疑，学会为止；'
},
{
icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_4.png',
text: '精编课程习题，结合面试场景，夯实理论基础；'
},
{
icon: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/des_icon_5.png',
text: '精选项目干货，结合所学，手把手指导。'
},
]
}
render() {
const {list} = this.state
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=""/>
<img className={'left'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png" alt=""/>
<img className={'right'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png" alt=""/>
<p className={'title'}>课 / 程 / 介 / 绍</p>
<p className={'sub__title'}>对话式交互教学+课后实操，17节课全面掌握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>
})
}
<img src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/ml-introduce.png'}/>
<ul className={'des-list'}>
{
list.map((item,index) => {
return <li key={index}>
<img src={item.icon} alt=""/>
<span>{item.text}</span>
</li>
})
}
</ul>
</div>
)
}
}
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/ml/pythomDes/Description/index.scss
.description {
width: 100%;
background: #0099ff;
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -9,59 +8,43 @@
position: relative;
.left {
position: absolute;
width: 50px;
height: 144px;
width: 61px;
height: 216px;
left: 0;
top: 18px;
top: -48px;
}
.right {
position: absolute;
top: 156px;
right: 0;
bottom: 4px;
width: 48px;
height: 132px;
width: 43px;
height: 180px;
}
.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;
color: #4B41FF;
margin-bottom: 33px;
}
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;
.des-list{
margin-top: 36px;
li{
display: flex;
align-items: center;
margin-bottom: 12px;
}
.item__title {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
line-height: 16px;
img{
width: 18px;
height: 18px;
margin-right: 8px;
}
.item__sub {
span{
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 12px;
color: #525C65;
}
}
}
src/components/ml/pythomDes/Experience/index.scss
......@@ -5,7 +5,7 @@
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
color: #4B41FF;
text-align: center;
}
......@@ -38,7 +38,7 @@
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 36px;
background: rgba(0, 153, 255, 1);
background: #4B41FF;
box-shadow: 0px 6px 12px 0px rgba(0, 153, 255, 0.06);
}
......
src/components/ml/pythomDes/InAction/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
class InAction extends Component {
state = {
projects: [
{
image: '',
title: ' 基于KNN的电影推荐系统',
detail: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。'
},
{
image: '',
title: ' 使用线性回归预测股票走势',
detail: '10多年开发经验，先后任职国内知名互联网企业，从事人工智能方向的实施，擅长全栈开发。'
},
{
image: '',
title: ' 基于LR的广告点击率预估',
detail: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验。'
},
{
image: '',
title: ' 基于LR的广告点击率预估',
detail: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验。'
},
{
image: '',
title: ' 基于LR的广告点击率预估',
detail: '计算机专业毕业，多年开发经验，熟悉 Python，熟悉 linux 环境下系统编程，具有多年的 Web 后端开发经验。'
},
],
showAll: false,
initialShowCount: 3
}
render() {
const {showAll, initialShowCount} = this.state
return (
<div id={'in-action'}>
<h2>项 / 目 / 实 / 战</h2>
<ul>
{
this.state.projects.map((item, i) => {
if (i >= initialShowCount && !showAll) {
return null
}
return <li key={i}>
<div className={'project-image'}></div>
<div className={'des'}>
<div className="title">
<span>{i + 1}</span>
<span>{item.title}</span>
</div>
<p className={'detail'}>{item.detail}</p>
</div>
</li>
})
}
<li>
{
!showAll
? <button onClick={() => {
this.setState({
showAll: true
})
}}>
展开更多
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
</button>
: <button onClick={() => {
this.setState({
showAll: false
})
}}>
收起
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
</button>
}
</li>
</ul>
</div>
);
}
}
export default InAction;
\ No newline at end of file
src/components/ml/pythomDes/InAction/index.scss 0 → 100644
#in-action {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 17px 30px;
background: #4B41FF;
h2 {
font-size: 21px;
font-family: PingFang SC, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-weight: 600;
color: #fff;
margin-bottom: 34px;
}
li {
display: flex;
margin-bottom: 27px;
.project-image {
width: 100px;
height: 75px;
margin-right: 11px;
flex: 0 0 auto;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-bottom: 10px;
span:nth-of-type(1) {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
color: #4B41FF;
background: #fff;
text-align: center;
margin-right: 7px;
}
span:nth-of-type(2) {
color: #fff;
font-size: 14px;
}
}
.detail {
color: #fff;
opacity: 80%;
}
}
li:last-child {
display: flex;
justify-content: center;
margin-top: 38px;
margin-bottom: 0;
button {
width: 94px;
height: 30px;
border: 1px solid #fff;
border-radius: 15px;
font-size: 12px;
color: #fff;
background: transparent;
img{
width: 9px;
height: 9px;
margin-left: 6px;
}
}
}
}
\ No newline at end of file
src/components/ml/pythomDes/NoWorry/index.js deleted 100644 → 0
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/ml/pythomDes/NoWorry/index.scss deleted 100644 → 0
.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/ml/pythomDes/Progream/index.js
......@@ -10,14 +10,14 @@ export default class Progream extends Component {
q: '课程学习周期是多久？',
a: '每天学习1小时，课程采用通关制解锁的方式，根据自己的时间和学习速度灵活调整。'
},{
q: '我没有Python基础可以学习吗？',
a: '我们的课程是面向零基础的小伙伴设计的，课程通过故事叙述的方式由浅入深，层层递进，尽可能帮助大家理解并且掌握所学知识，没有任何基础是可以学习的。'
q: '我没有机器学习基础可以学习吗？',
a: '我们的课程是面向零基础的小伙伴设计的，内容通俗易懂，由浅入深，层层递进，尽可能帮助大家理解并且掌握所学知识，没有任何基础是可以学习的。'
},{
q: '学习过程中遇到了困难怎么办？',
a: '我们为学员配备了专门的助教，有问题随时可以咨询助教老师。'
},{
q: '需要自己安装代码运行环境吗？',
a: '在平台上学习不需要安装任何环境，该课程包含的知识点实操以及课后实操都可以在平台上完成。'
q: '项目实战的形式是什么样的？',
a: '项目实战会以考试的形式发给你，每一步都有详细的指导说明；提交试卷后可以下载完整的参考代码进行巩固复习。'
}
]
}
......
src/components/ml/pythomDes/Progream/index.scss
.pro_container {
padding-top: 32px;
padding-bottom: 30px;
background: #0096ff;
background: #4D40FF;
position: relative;
margin-top: -1px;
img {
position: absolute;
......
src/components/ml/pythomDes/Selection/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
class Selection extends Component {
state = {
screenshots: ['','','']
}
render() {
return (
<div id={'selection'}>
<h2>精 / 选 / 习 / 题</h2>
<ul>
{
this.state.screenshots.map((item, i) => {
return <li key={i}>
<img src={item} alt=""/>
</li>
})
}
</ul>
</div>
);
}
}
export default Selection;
\ No newline at end of file
src/components/ml/pythomDes/Selection/index.scss 0 → 100644
#selection {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 0 53px;
h2 {
font-size: 21px;
font-family: PingFang SC, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-weight: 600;
color: #4B41FF;
}
li{
width: 249px;
height: 158px;
margin-bottom: 18px;
img{
width: 100%;
height: 100%;
}
}
li:last-child{
margin-bottom: 0;
}
}
\ No newline at end of file
src/components/ml/pythomDes/Study/index.js
......@@ -28,25 +28,8 @@ export default class Study extends Component {
<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'}>17节课堂教学，带你掌握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>
<p className={'title'}>课 / 程 / 安 / 排</p>
<p className={'sub__title'}>2020年4月20日开班</p>
<div className={'table__container'}>
<div className={'table__head'}>
<div className={'head_title order_number'}>序号</div>
......
src/components/ml/pythomDes/Study/index.scss
.study__container {
background: #0096ff;
background: #4B41FF;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 32px 0 30px 0;
padding: 32px 0 46px 0;
position: relative;
.learn_left {
position: absolute;
left: 0;
top: 36px;
top: -31px;
width: 46px;
height: 126px;
}
.learn_bottom {
position: absolute;
left: 0;
......@@ -20,79 +22,42 @@
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;
}
}
margin: 12px 0 30px 0;
}
.table__container {
width: 358px;
color: #fff;
background: #005ac6;
margin-top: 22px;
background: #2E24D7;
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;
......@@ -109,12 +74,13 @@
align-items: center;
font-size: 12px;
font-weight: 600;
color: rgba(0, 93, 195, 1);
color: #2E24D7;
}
}
.table__body {
width: 100%;
.item__container {
.item__title {
height: 36px;
......@@ -126,14 +92,17 @@
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;
......@@ -143,6 +112,7 @@
padding-left: 6px;
padding-right: 6px;
}
.number_center {
display: flex;
justify-content: center;
......@@ -150,7 +120,7 @@
}
}
}
.table__bottom {
height: 36px;
display: flex;
......@@ -159,6 +129,7 @@
color: #fff;
font-size: 12px;
font-weight: 400;
div {
width: 100%;
height: 100%;
......@@ -166,6 +137,7 @@
justify-content: center;
align-items: center;
}
img {
width: 9px;
height: 9px;
......
src/components/ml/pythomDes/Team/index.scss
.team_container {
padding-top: 32px;
background: #0096ff;
padding-bottom: 46px;
position: relative;
.team_top {
position: absolute;
left: 0;
......@@ -10,6 +10,7 @@
width: 78px;
height: 76px;
}
.team_bottom {
position: absolute;
right: 0;
......@@ -17,34 +18,38 @@
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);
color: #4B41FF;
}
.sub_title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 1);
color: #4B41FF;
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;
width: 352px;
height: 130px;
margin: 0 auto 25px;
padding: 12px 14px 14px 12px;
box-shadow: 0 3px 12px 0 rgba(79, 69, 255, 0.1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.item_image {
width: 44px;
......@@ -54,6 +59,7 @@
flex: 0 0 auto;
margin-right: 14px;
}
.item_info {
.name {
font-size: 16px;
......
src/components/ml/pythomDes/Test/index.js deleted 100644 → 0
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 className="stage-item" key={index}>
<div className='stage'>{`第${this.Change(item.stage)}阶段 ${item.name}`}</div>
{
item.questions.map((question, index)=>{
return <div key={index} className={'line'}>
<span>{question.number}</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/ml/pythomDes/Test/index.scss deleted 100644 → 0
.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-item {
border-bottom: 1px solid #0099FF;
}
.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;
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/ml/pythomDes/index.js
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'
import Selection from './Selection'
import Mask from './../poup/index.js'
import InAction from "./InAction"
import {http, getParam, SendMessageToApp,} from '@/utils'
import {connect} from 'react-redux'
import {Toast} from "antd-mobile"
......@@ -61,23 +61,6 @@ class PythonDes extends Component {
}
}
],
desList: [
{
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: '17天零基础入门',
subTitle: '降低学习门槛，17天入门人工智能'
},
],
worryList: [
{
url: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiechu.png',
......@@ -248,8 +231,7 @@ class PythonDes extends Component {
render() {
const {
defineList,
desList,
worryList,
worryList,
syllabus,
practice,
allSyllabusShow,
......@@ -261,18 +243,6 @@ class PythonDes extends Component {
return (
<div className={'python__des'}>
<div className={'des__start'}></div>
<div className={'python__define'}>
<img className={'left__decorate'}
src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/left__decorate.png'}></img>
<img className={'right__decorate'}
src={'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/right__decorate.png'}></img>
<p className={'define__title'}>课 / 程 / 介 / 绍</p>
{
defineList.map((item, index) => {
return <DefineItem item={item} key={index}></DefineItem>
})
}
</div>
<div className={'course__introduce'}></div>
{
isOnline
......@@ -301,21 +271,17 @@ class PythonDes extends Component {
}
{/* 课程介绍 */}
<Description list={desList} />
<NoWorry list={worryList}></NoWorry>
<Description/>
<Study syllabus={syllabus} allSyllabusShow={allSyllabusShow} show={this.showAll}
hide={this.hideSome}></Study>
{/* 课后实操 */}
<Test
practice={practice}
allPracticeShow={allPracticeShow}
show={this.showAll}
hide={this.hideSome}
/>
{/*精选习题*/}
<Selection/>
{/*项目实战*/}
<InAction/>
<Team/>
{/* 试学体验 */}
......@@ -326,7 +292,7 @@ class PythonDes extends Component {
width: '100%',
height: '8px'
}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png"
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/di.png"
alt=""
/>
......
src/components/ml/pythomDes/index.scss
......@@ -5,11 +5,13 @@
overflow: auto;
.des__start {
position: relative;
width: 100%;
height: 258px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/banner.png")
center center no-repeat;
background-size: contain;
z-index: 100;
}
.python__define {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment