Skip to content

M
mr-julyedu
Commit 3a387759 by xuzhenghua
Options

冲突

parents 7ca1bdd4 9e9a03b4
Showing with 838 additions and 11 deletions
src/components/python/index.js
......@@ -13,6 +13,12 @@ class Python extends Component {
super(props);
this.state = {
isPay: 0,
syllabus: [], // 阶梯学习
allSyllabus: [], // 阶梯学习
allSyllabusShow: false,
practice: [], // 课后实操
allPractice: [], // 课后实操
allPracticeShow: false,
}
}
......@@ -20,28 +26,72 @@ class Python extends Component {
this.fetchCourseInfo();
}
showAll = (key) => {
if(key === 1) {
this.setState({
syllabus: this.state.allSyllabus,
allSyllabusShow: true,
})
}
if(key === 2) {
this.setState({
practice: this.state.allPractice,
allPracticeShow: true,
})
}
}
hideSome = (key) => {
if(key === 1) {
this.setState({
syllabus: this.state.allSyllabus.slice(0, 2),
allSyllabusShow: false,
})
}
if(key === 2) {
this.setState({
practice: this.state.allPractice.slice(0, 2),
allPracticeShow: false,
})
}
}
fun = (fun, key) => {
}
fetchCourseInfo = () => {
const id = getParam('id');
http.get(`${API.home}/m/course/detail/${id}`).then((res) => {
const {data, code} = res.data;
const { data, code } = res.data;
if (code === 200) {
this.setState({
// TODO
// isPay: data.course_info.is_pay
isPay: 1
})
}
});
}
http.get(`${API['home']}/web/it_detail?course_id=180`).then(res => {
const { code, data, msg } = res.data
if (code == 200) {
this.setState({
syllabus: data.syllabus.slice(0, 2),
allSyllabus: data.syllabus,
practice: data.practice.slice(0, 2),
allPractice: data.practice,
})
} else {
Message.warning(msg);
}
});
}
render() {
const {isPay} = this.state;
const {user: {hasError}} = this.props;
const { isPay, syllabus, allSyllabusShow, practice, allPracticeShow } = this.state;
const { user: { hasError } } = this.props;
return (
<div style={{height:'100%'}}>
<div>
{
isPay === 0 && <PythonDes ></PythonDes>
isPay === 0 && <PythonDes syllabus={syllabus} practice={practice} allSyllabusShow={allSyllabusShow} allPracticeShow={allPracticeShow} show={this.showAll} hide={this.hideSome}></PythonDes>
}
{
isPay === 1 && <PythonStudy></PythonStudy>
......
src/components/python/pythomDes/Experience/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Experience extends Component {
render() {
return (
<div className={'experience_container'}>
<p className={'title'}>试 / 学 / 体 / 验</p>
<div className={'experience'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/L%402x.png" alt=""/>
<div>
<p>限时福利免费试学</p>
<p>开始颠覆你想象的学习</p>
</div>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
</div>
<div className={'btn'}>立即体验</div>
</div>
)
}
}
src/components/python/pythomDes/Experience/index.scss 0 → 100644
.experience_container {
padding-top: 32px;
padding-bottom: 40px;
.title {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(0, 153, 255, 1);
text-align: center;
}
.experience {
display: flex;
justify-content: space-between;
align-items: center;
width: 250px;
margin: 22px auto 28px;
img {
width: 16px;
height: 56px;
}
p {
font-size: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
line-height: 30px;
text-align: center;
letter-spacing: 4px;
}
}
.btn {
width: 150px;
height: 36px;
background: rgba(0, 153, 255, 1);
box-shadow: 0px 6px 12px 0px rgba(0, 153, 255, 0.06);
border-radius: 18px;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 36px;
text-align: center;
margin: 0 auto;
}
}
src/components/python/pythomDes/Progream/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Progream extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{
q: '课程学习周期是多久？',
a: '每天学习1小时，课程采用通关制解锁的方式，根据自己的时间和学习速度灵活调整。'
},{
q: '我没有Python基础可以学习吗？',
a: '我们的课程是面向零基础的小伙伴设计的，课程通过故事叙述的方式由浅入深，层层递进，尽可能帮助大家理解并且掌握所学知识，没有任何基础是可以学习的。'
},{
q: '学习过程中遇到了困难怎么办？',
a: '我们为学员配备了专门的助教，有问题随时可以咨询助教老师。'
},{
q: '课程学习周期是多久？',
a: '在平台上学习不需要安装任何环境，该课程包含的知识点实操以及课后实操都可以在平台上完成。'
}
]
}
}
render() {
const {list} = this.state;
return (
<div className={'pro_container'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/pro_left.png" alt=""/>
<p>常 / 见 / 问 / 题</p>
<ul>
{
list.map((item, index)=>{
return (<li key={index} className={'q_item'}>
<div className={'q'}> <p>{`Q：${item.q}`}</p> <span></span></div>
<div className={'a__container'}>
<div>A：</div>
<p>{item.a}</p>
</div>
</li>)
})
}
</ul>
</div>
)
}
}
src/components/python/pythomDes/Progream/index.scss 0 → 100644
.pro_container {
padding-top: 32px;
padding-bottom: 30px;
background: #0096ff;
position: relative;
img {
position: absolute;
width: 76px;
height: 174px;
left: 0;
bottom: 50px;
}
p {
font-size: 22px;
line-height: 22px;
font-weight: 600;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.q_item {
width: 340px;
min-height: 86px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 5px 0px rgba(153, 153, 153, 0.06);
border-radius: 2px;
margin: 0 auto 12px;
padding: 14px 15px 10px;
&:first-child {
margin-top: 18px;
}
.q {
position: relative;
display: inline-block;
p {
font-size: 14px;
line-height: 14px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
text-align: left;
z-index: 9;
position: relative;
}
span {
position: absolute;
width: 70%;
height: 4px;
background:rgba(255,214,103,1);
left: 0;
bottom: 0;
z-index: 0;
}
}
.a__container {
display: flex;
justify-content: flex-start;
align-content: flex-start;
margin-top: 10px;
div {
font-size: 12px;
color:rgba(82,92,101,1);
font-weight:600;
}
p {
font-size: 12px;
font-weight: 400;
color: rgba(82, 92, 101, 0.8);
line-height: 16px;
text-align: left;
}
}
}
}
src/components/python/pythomDes/Study/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Study extends Component {
render() {
return (
<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'}>20节课堂教学，带你掌握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>
<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}>
<div className={'item__title'}>{item.name}</div>
{
item.lessons.map((item, index)=>{
return (
<div className={'item__content'} key={index}>
<div className={'content order_number number_center'}>{item.number}</div>
<div className={'content chapter'}>{item.number}</div>
<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>
)
}
}
src/components/python/pythomDes/Study/index.scss 0 → 100644
.study__container {
background: #0096ff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 32px 0 30px 0;
position: relative;
.learn_left {
position: absolute;
left: 0;
top: 36px;
width: 46px;
height: 126px;
}
.learn_bottom {
position: absolute;
left: 0;
bottom: 0;
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;
}
}
}
.table__container {
width: 358px;
color: #fff;
background: #005ac6;
margin-top: 22px;
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;
background: #ffd75d;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px 4px 0 0;
.head_title {
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 600;
color: rgba(0, 93, 195, 1);
}
}
.table__body {
width: 100%;
.item__container {
.item__title {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 500;
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;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 6px;
padding-right: 6px;
}
.number_center {
display: flex;
justify-content: center;
padding-left: 0;
}
}
}
.table__bottom {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
font-weight: 400;
div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 9px;
height: 9px;
margin-left: 6px;
}
}
}
}
src/components/python/pythomDes/Team/index.js 0 → 100644
import React, { Component } from 'react'
import './index.scss'
export default class Team extends Component {
constructor(props) {
super(props);
this.state = {
teacherList: [
{
name: 'A老师',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
},
{
name: 'A老师',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
},
{
name: 'A老师',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，'
},{
name: 'A老师',
des: '七月在线AI Lab负责人兼科学家。历任浪潮集团数据科学家，国家电网人工智能行业应用方向团队负责人。参与过一国家863项目，且曾主持一山东省自主创新及成果转化专项，发明专利十余项，专业论文十余年哈哈塑料袋科技发牢骚'
}
]
}
}
render() {
const {teacherList} = this.state;
return (
<div className={'team_container'}>
<img className={'team_top'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/team_top.png" alt=""/>
<img className={'team_bottom'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/team_bottom.png" alt=""/>
<p className={'title'}>教/学/团/队</p>
<p className={'sub_title'}>讲师+助教+班主任全程陪伴，哪里不会问哪里</p>
<ul>
{
teacherList.map((item,index)=>{
return (
<li key={index} className={'item_li'}>
<div className={'item_image'}></div>
<div className={'item_info'}>
<span className={'name'}>{item.name}</span>
<p className={'des'}>{item.des}</p>
</div>
</li>
)
})
}
</ul>
</div>
)
}
}
src/components/python/pythomDes/Team/index.scss 0 → 100644
.team_container {
padding-top: 32px;
background: #0096ff;
padding-bottom: 46px;
position: relative;
.team_top {
position: absolute;
left: 0;
top: 0;
width: 78px;
height: 76px;
}
.team_bottom {
position: absolute;
right: 0;
bottom: 0;
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);
}
.sub_title {
font-size: 12px;
line-height: 12px;
font-weight: 300;
color: rgba(255, 255, 255, 1);
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;
padding: 12px 14px 14px 12px;
.item_image {
width: 44px;
height: 44px;
border-radius: 22px;
background: #0099ff;
flex: 0 0 auto;
margin-right: 14px;
}
.item_info {
.name {
font-size: 16px;
line-height: 16px;
font-weight: 600;
color: rgba(82, 92, 101, 1);
}
.des {
font-size: 12px;
line-height: 15px;
font-weight: 300;
color: rgba(82, 92, 101, 0.8);
text-align: left;
text-align-last: left;
margin-top: 6px;
width: 266px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
}
}
}
}
src/components/python/pythomDes/Test/index.js 0 → 100644
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 key={index}>
<div className='stage'>{`第${this.Change(item.stage)}阶段 ${item.name}`}</div>
{
item.questions.map((question, index)=>{
return <div key={index} className={'line'}>
<span>{index}</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/python/pythomDes/Test/index.scss 0 → 100644
.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 {
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;
border-top: 1px solid #0099FF;
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/python/pythomDes/index.js
......@@ -2,6 +2,11 @@ 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'
export default class PythonDes extends Component {
constructor(props) {
......@@ -87,6 +92,12 @@ export default class PythonDes extends Component {
</div>
<Description list={desList}></Description>
<NoWorry list={worryList}></NoWorry>
<Study syllabus={this.props.syllabus} allSyllabusShow={this.props.allSyllabusShow} show={this.props.show} hide={this.props.hide}></Study>
<Test practice={this.props.practice} allPracticeShow={this.props.allPracticeShow} show={this.props.show} hide={this.props.hide}></Test>
<Team />
<Experience />
<img style={{display: 'block', width: '100%', height: '8px'}} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/changjian.png" alt=""/>
<Progream />
</div>
)
}
......
src/components/python/pythonStudy/index.scss
html, body, #root {
height: 100%;
}
.am-accordion.python-study__stage .am-accordion-item .am-accordion-header {
height: 44px;
padding-left: 13px;
......@@ -80,6 +79,11 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
}
.python-study__progress {
color: rgba(255,255,255,.8);
}
.python-study__progress {
height: 66px;
padding: 0 12px;
}
......@@ -167,8 +171,6 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(247, 248, 249, 1);
&[data-status="lock"] {
background-color: rgba(247, 248, 249, .6);
}
......@@ -209,6 +211,9 @@ html:not([data-scale]) .am-accordion.python-study__stage .am-accordion-item .am-
.python-study__subject-title {
max-width: 220px;
width: 228px;
}
.python-study__subject-title {
font-size: 14px;
color: #333;
line-height: 18px;
......
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