Skip to content

M
mr-julyedu
Commit a130082d by wangshuo
Options

介绍

parent 5e97a371
Showing with 335 additions and 2 deletions
src/components/Index/index.js
......@@ -268,6 +268,7 @@ function CourseList({modules, toDetail}) {
}
return (
<div className='category'>
<Link className="more" to='/python'>python ></Link>
<h2 className="title">{modules.name}</h2>
{
modules.show_more === 1 &&
......
src/components/python/index.js
import React, { Component } from 'react'
import { connect } from 'react-redux';
import {http, getParam} from '@/utils'
import PythonDes from './pythomDes'
import PythonClass from './pythonClass'
@connect(state => ({
user: state.user
}))
class Python extends Component {
constructor(props) {
super(props);
this.state = {
isPay: 0,
}
}
componentDidMount() {
this.fetchCourseInfo();
}
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
})
}
});
}
export default class Python extends Component {
render() {
const {isPay} = this.state;
const {user: {hasError}} = this.props;
return (
<div>
{
isPay === 0 && <PythonDes ></PythonDes>
}
{
isPay === 1 && <PythonClass></PythonClass>
}
</div>
)
}
}
export default Python
src/components/python/pythomDes/Description/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Description extends Component {
render() {
return (
<div className={'description'}>
<p>课 / 程 / 介 / 绍</p>
<p>对话式交互教学+课后实操，20节课全面掌握Python基础语法</p>
<img src={} />
{
}
</div>
)
}
}
function DesList(props) {
}
src/components/python/pythomDes/Description/index.scss 0 → 100644
.description {
}
\ No newline at end of file
src/components/python/pythomDes/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
import Description from './Description';
export default class PythonDes extends Component {
constructor(props) {
super(props);
this.state = {
defineList: [
{
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/trophy.png',
title: '排名第1的编程语言',
subTitle: '2018世界编程语言排行榜中，Python排名第1',
subWidth: '180px',
bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/program_lan.png',
desInfo: {
width: '240px',
height: '170px',
}
},
{
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kaifa.png',
title: '开发快速、简单易掌握',
subTitle: '严谨的代码编写格式，语法格式简单易理解完成一个相同的任务',
subWidth: '260px',
bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/kuaisu.png',
desInfo: {
width: '212px',
height: '106px',
}
},
{
titleUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/lingyu.png',
title: '适用领域广',
subTitle: 'Python工程师可从事多领域编程工作，人才年需求增长6倍',
subWidth: '230px',
bottomUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/jiandan.png',
desInfo: {
width: '234px',
height: '106px',
}
}
],
desList: [
{url: '', title: '全新课程形式', subTitle: '对话式交互教学，轻松、生动、不无聊'},
{url: '', title: '在线编程环境', subTitle: '无需安装任何编程软件'},
{url: '', title: '20天零基础入门', subTitle: '降低学习门槛，20天入门人工智能'},
]
}
}
render() {
const {defineList} = this.state;
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'}>什 / 么 / 是 / Python</p>
{
defineList.map((item,index) => {
return <DefineItem item={item} key={index}></DefineItem>
})
}
</div>
<div className={'course__introduce'}></div>
<div className={'bottom__btn_group'}>
<div className={'course__price'}>
<div className={'money'}>199<span style={{fontSize: '18px'}}>元</span></div>
<div className={'discount'}>
限时特惠
<div className={'triangle'}></div>
</div>
</div>
<div className={'btn__group'}>
<div className={'try__study'}>免费试学</div>
<div className={'sign__now'}>立即报名</div>
</div>
</div>
<Description></Description>
</div>
)
}
}
function DefineItem(props) {
const {item, item: {desInfo}} = props;
return (
<div className={'number_one'}>
<img className={'trophy'} src={item.titleUrl}></img>
<p className={'item__title'}>{item.title}</p>
<p className={'item__subtitle'} style={{width: item.subWidth}}>{item.subTitle}</p>
<img style={{width: desInfo.width, height: desInfo.height}} src={item.bottomUrl}></img>
</div>
)
}
src/components/python/pythomDes/index.scss 0 → 100644
.python__des {
width: 100vw;
height: 100vh;
padding-bottom: 60px;
overflow: auto;
.des__start {
width: 100%;
height: 258px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/head_img.png")
center center no-repeat;
background-size: contain;
}
.python__define {
position: relative;
padding-top: 28px;
.define__title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
text-align: center;
text-align-last: center;
margin: 0 auto 40px;
}
.number_one {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 30px;
}
// 公共
.trophy {
width: 75px;
height: 75px;
margin-bottom: 12px;
}
.item__title {
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
margin-bottom: 12px;
}
.item__subtitle {
font-size: 12px;
font-weight: 400;
color: rgba(82, 92, 101, 0.8);
text-align: center;
text-align-last: center;
margin-bottom: 16px;
}
.left__decorate {
position: absolute;
left: 0;
top: -50px;
width: 60px;
height: 216px;
}
.right__decorate {
position: absolute;
right: 0;
top: 156px;
width: 44px;
height: 180px;
}
}
.bottom__btn_group {
width: 100%;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
padding: 0 14px;
background: #fff;
.course__price {
width: 100px;
font-size: 24px;
font-weight: 600;
color: rgba(255, 33, 33, 1);
position: relative;
}
.discount {
width: 54px;
height: 22px;
background: rgba(248, 60, 46, 1);
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
position: absolute;
left: 46px;
top: -18px;
.triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #FB3A22;
position: absolute;
bottom: -5px;
left: 8px;
}
}
.btn__group {
display: flex;
justify-content: center;
align-items: center;
.try__study {
width: 100px;
height: 38px;
border: 1px solid rgba(0, 153, 255, 1);
border-radius: 19px;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
.sign__now {
width: 100px;
height: 38px;
background: rgba(0, 153, 255, 1);
border-radius: 19px;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
margin-left: 12px;
}
}
}
}
src/components/python/pythonClass/index.js 0 → 100644
import React, { Component } from 'react'
export default class PythonClass extends Component {
render() {
return (
<div>
已购买
</div>
)
}
}
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