Skip to content

M
mr-julyedu
Commit 1b8018b7 by xuzhenghua
Options

详情

parent 7e4f2842
Showing with 1004 additions and 2 deletions
src/components/classify/index.scss
.class-box { .class-box {
background-color: $bg_fff; background-color: $bg_fff;
}
.class-title { .class-title {
width: 100%; width: 100%;
...@@ -74,3 +73,4 @@ ...@@ -74,3 +73,4 @@
border-radius: 5px; border-radius: 5px;
} }
} }
}
src/components/detail/index.js 0 → 100644
import React, {Component} from 'react';
import {Tabs, WhiteSpace, Badge} from 'antd-mobile';
import './index.scss';
class Detail extends Component {
state = {
isbuy: 0,
isvip: 0,
stage_info: [
{
"stage_name": "预习阶段 机器学习中的数学基础",
"lesson": [
{
"is_video": 1,
"name": "微积分",
"video_id": 1170,
"point": [
{
"name": "微积分的基本概念",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "概率论",
"video_id": 1171,
"point": [
{
"name": "概率论简介",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "线性代数",
"video_id": 1172,
"point": [
{
"name": "线性代数基础",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "凸优化",
"video_id": 1173,
"point": [
{
"name": "凸优化简介",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
}
]
},
{
"stage_name": "第一阶段 掌握基本模型 打开ML大门",
"lesson": [
{
"is_video": 1,
"name": "第1课 回归问题与应用",
"video_id": 1118,
"point": [
{
"name": "线性回归",
"type": 1
},
{
"name": "logistic回归",
"type": 1
},
{
"name": "梯度下降",
"type": 1
},
{
"name": "实际工程海量数据下的logistic回归使用",
"type": 1
},
{
"name": "分布拟合与回归、用LR分类与概率预测",
"type": 2
},
{
"name": "用LR完成Kaggle比赛迈开第一步",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第2课 决策树与树集成模型",
"video_id": 1119,
"point": [
{
"name": "不同类型的分类树模型",
"type": 1
},
{
"name": "决策树回归",
"type": 1
},
{
"name": "树模型过拟合与优化",
"type": 1
},
{
"name": "使用随机森林进行数据分类",
"type": 1
},
{
"name": "Bagging",
"type": 1
},
{
"name": "随机森林",
"type": 1
},
{
"name": "信用卡欺诈检测",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第3课 SVM",
"video_id": 1120,
"point": [
{
"name": "线性可分支持向量机、线性支持向量机",
"type": 1
},
{
"name": "非线性支持向量机",
"type": 1
},
{
"name": "SMO",
"type": 1
},
{
"name": "使用SVM进行数据分类",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第4课 最大熵与EM算法（上）",
"video_id": 1121,
"point": [
{
"name": "熵、相对熵、信息增益",
"type": 1
},
{
"name": "最大熵模型、IIS、GMM",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
}
]
},
{
"stage_name": "第二阶段 重中之重 特征工程",
"lesson": [
{
"is_video": 1,
"name": "第5课 机器学习中的特征工程处理",
"video_id": 1122,
"point": [
{
"name": "数据清洗、异常点处理",
"type": 1
},
{
"name": "特征抽取、选择与组合策略",
"type": 1
},
{
"name": "特征处理与特征选择模板",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第6课 多算法组合与模型最优化",
"video_id": 1123,
"point": [
{
"name": "机器学习问题场景分析、算法选择",
"type": 1
},
{
"name": "模型构建、模型性能分析与优化策略",
"type": 1
},
{
"name": "构建模型组合策略工具与模板",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
}
]
},
{
"stage_name": "第三阶段 工业实战 在实战中掌握一切",
"lesson": [
{
"is_video": 1,
"name": "第7课 sklearn与机器学习实战",
"video_id": 1124,
"point": [
{
"name": "sklearn板块介绍",
"type": 1
},
{
"name": "sklearn完成数据预处理与特征工程",
"type": 1
},
{
"name": "建模流水线搭建",
"type": 1
},
{
"name": "经典Titanic案例，商品销量预测案例等",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第8课 高级工具xgboost/lightGBM与建模实战",
"video_id": 1125,
"point": [
{
"name": "xgboost使用方法与高级功能",
"type": 1
},
{
"name": "lightGBM使用方法与高级功能",
"type": 1
},
{
"name": " Titanic与商品销量预测进阶，Kaggle案例实战",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第9课 电商推荐系统",
"video_id": 1126,
"point": [
{
"name": "推荐系统与评估",
"type": 1
},
{
"name": "基于内容的推荐",
"type": 1
},
{
"name": "基于近邻的推荐--协同过滤",
"type": 1
},
{
"name": "隐语义模型",
"type": 1
},
{
"name": "从头手写搭建协同过滤与隐语义模型推荐",
"type": 2
},
{
"name": "基于scikit-surprise的推荐系统",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第10课 聚类",
"video_id": 1127,
"point": [
{
"name": "K-means/K-Medoid",
"type": 1
},
{
"name": "层次聚类",
"type": 1
},
{
"name": "GMM",
"type": 1
},
{
"name": "K-means/GMM代码实现和实际应用分析",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第11课 聚类与推荐系统实战",
"video_id": 1128,
"point": [
{
"name": "基于用户聚类的推荐系统",
"type": 2
},
{
"name": "推荐系统比赛案例（数据、代码）",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
}
]
},
{
"stage_name": "第四阶段 高阶知识 深入机器学习",
"lesson": [
{
"is_video": 1,
"name": "第12课 贝叶斯网络",
"video_id": 1129,
"point": [
{
"name": "朴素贝叶斯",
"type": 1
},
{
"name": "有向分离",
"type": 1
},
{
"name": "马尔科夫模型",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第13课 隐马尔科夫模型HMM",
"video_id": 1130,
"point": [
{
"name": "概率计算问题",
"type": 1
},
{
"name": "参数学习问题",
"type": 1
},
{
"name": "状态预测问题",
"type": 1
},
{
"name": "使用HMM进行中文分词",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第14课 主题模型",
"video_id": 1131,
"point": [
{
"name": "pLSA",
"type": 1
},
{
"name": "共轭先验分布",
"type": 1
},
{
"name": "LDA",
"type": 1
},
{
"name": "使用LDA进行文档分类",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
}
]
},
{
"stage_name": "第五阶段 迈入深度学习 打开DL大门",
"lesson": [
{
"is_video": 1,
"name": "第15课 神经网络初步",
"video_id": 1132,
"point": [
{
"name": "全连接神经网络",
"type": 1
},
{
"name": "反向传播算法与权重优化",
"type": 1
},
{
"name": "训练注意点",
"type": 1
},
{
"name": "通用混合神经网络模板",
"type": 1
},
{
"name": "手写神经网络解决非线性切分问题",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第16课 卷积神经网络与计算机视觉",
"video_id": 1133,
"point": [
{
"name": "卷积神经网络结构分析",
"type": 1
},
{
"name": "过拟合与随机失活",
"type": 1
},
{
"name": "卷积神经网络理解",
"type": 1
},
{
"name": "典型网络结构详解",
"type": 1
},
{
"name": "利用ResNet与inception解决一般图像分类问题套路",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第17课 循环神经网络与自然语言处理",
"video_id": 1134,
"point": [
{
"name": "循环神经网络",
"type": 1
},
{
"name": "长时依赖问题与长短时记忆网络",
"type": 1
},
{
"name": "BPTT算法",
"type": 1
},
{
"name": "利用循环神经网络生成文本作诗",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 1,
"name": "第18课 深度学习实践",
"video_id": 1135,
"point": [
{
"name": "Caffe应用要点",
"type": 1
},
{
"name": "TensorFlow/Keras简介",
"type": 1
},
{
"name": "用神经网络完成图像分类与特征提取",
"type": 2
},
{
"name": "用Keras构建文本情感分析模型",
"type": 2
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
}
]
}
]
}
render() {
const tabs = [
{title: '介绍'},
{title: '大纲'}
];
return (
<div className='detail-box'>
<div className="toapp">在APP打开</div>
{/*头部*/}
<div className="detail-header">
<i className={'iconfont iconiconfront-68 return'}></i>
<span className='herder'>课程详情</span>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
{/*课程*/}
<div className='course-content'>
<div className='cover'>
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg'
alt=""/>
</div>
<div className="info">
<p className='title'>区块链实战[一对一实战 公区块链实战[一对一实战 公...</p>
<p className='contact text-overflow-2'>从零入门区块链和比特币，送干货从零入门</p>
<div className='des'>
{this.state.isbuy === 0 && <p className="course-price">
<span className="new">￥3980</span>
<span className="old">￥5680</span>
</p>
}
{this.state.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
</div>
{/*正常课程已购买时显示*/}
{
this.state.isbuy === 1 &&
<div className='group'>
上课QQ群：449141326，加群请备注您的学号：479409
</div>
}
{/*vip课程显示*/}
{
this.state.isvip === 1 &&
<div className="vip">
<p>已开通年会员：2019/03/02 — 2020/03/02</p>
<p>年会员QQ群：967114537，加群请备注您的学号：479409</p>
</div>
}
{/*服务承诺*/}
<div className='promise'>
<label>服务承诺</label>
<p>直播答疑 · 视频回放 · 讲师助教组长同答疑 · 毕业考核等十多项服务</p>
</div>
{/*分享赚钱*/}
<div className='share-ranking'>
<span className="title">排行榜：</span>
<span className="ranking-mess"><img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" alt=""/><i>22元</i></span>
<span className="ranking-mess"><img src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg" alt=""/><i>22元</i></span>
<img className="ranking-ellipsis" src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
<button className="share">分享赚22元</button>
</div>
{/*课程介绍、大纲*/}
<div className='course-detail'>
<WhiteSpace/>
<Tabs tabs={tabs}>
{/*介绍*/}
<div className='introduce'>
讲师：寒小阳、褚博士、David、林老师、张雨石、李老师
课时：线上课每次至少2小时，线下课每次至少4小时
时间：随到随学，视频课件代码作考一应俱全，且讲师助教 答疑
<img
src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg'
alt=""/>
</div>
{/*大纲*/}
<div className='outline'>
{
this.state.stage_info.map((item, index) => {
return (
<div className='stagebox' key={index}>
<h1 className='stage text-overflow-1'>{item.stage_name}</h1>
{
item.lesson.map((item, index) => {
return (
<ul key={index}>
<h2 className='classhour text-overflow-1'>{item.name}</h2>
{
item.point.map((item, index) => {
const type = (
<span>
{item.type === 1 &&
<span>知识点{index + 1}：</span>
} {item.type === 2 &&
<span className='red'>实战项目：</span>
}
</span>
)
return (
<li className='points text-overflow-1'
key={index}>{type}{item.name}</li>
)
})
}
</ul>
)
})
}
</div>
)
})
}
</div>
</Tabs>
<WhiteSpace/>
</div>
</div>
);
}
}
export default Detail;
src/components/detail/index.scss 0 → 100644
.detail-box {
position: relative;
.toapp {
position: absolute;
right: 0;
top: 117px;
width: 82px;
height: 32px;
text-align: center;
line-height: 32px;
background: linear-gradient(-90deg, $bg_active 0%, $bg_0078FF 100%);
border-radius: 16px 0 0 16px;
font-size: 12px;
color: $white;
z-index: 1;
}
.detail-header {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.shopping-cart, .return {
font-size: 18px !important;
}
.herder {
font-size: 16px;
color: $color_202426;
}
}
.course-content {
margin: 15px 12px 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid $sp_e7eaf1;
display: flex;
justify-content: space-between;
.cover {
width: 42.2%;
height: 108px;
img {
border-radius: 3px;
width: 100%;
height: 100%;
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 66px;
height: 27px;
background-color: $bg_ccc;
color: $white;
border-radius: 3px;
font-size: 12px;
text-align: center;
line-height: 27px;
}
}
}
}
.promise {
padding: 15px 12px;
height: 66px;
label {
float: left;
display: block;
text-align: center;
font-size: 12px;
width: 54px;
height: 18px;
background-color: $bg_333;
color: $white;
border-radius: 6px 0 6px 0;
}
p {
width: 75%;
float: left;
margin-left: 15px;
font-size: 12px;
color: $color_333;
}
}
.group, .vip {
margin: 0 12px;
padding: 10px 12px;
text-align: center;
color: $white;
font-size: 12px;
border-radius: 6px 6px 0 0;
}
.group {
background-color: $bg_82BBFB;
}
.vip {
background: linear-gradient(-90deg, $bg_EBA216 0%, $bg_EBC05A 100%);
}
.share-ranking {
height: 60px;
line-height: 25px;
padding: 15px 12px;
border-top: 8px solid $bg_f5f5f5;
display: flex;
position: relative;
font-size: 12px;
.title {
font-size: 14px;
margin-right: 12px;
}
.ranking-mess {
margin-right: 20px;
img {
width: 22px;
height: 22px;
border-radius: 50%;
vertical-align: middle;
}
i {
display: inline-block;
margin-left: 5px;
color: $color_333;
font-style: normal;
}
}
.ranking-ellipsis {
width: 22px;
height: 22px;
border-radius: 50%;
}
.share {
position: absolute;
right: 12px;
padding: 5px 6px;
border:1px solid $red;
border-radius:3px;
color: $red;
background-color: $bg_fff;
}
}
.course-detail {
border-top: 8px solid $bg_f5f5f5;
margin-bottom: 50px;
.am-whitespace-md {
height: 0;
}
.am-tabs-default-bar-tab {
width: auto !important;
}
.am-tabs-default-bar-content {
border-bottom: 1px solid $sp_e7eaf1;
display: flex;
justify-content: space-around;
}
.am-tabs-default-bar-tab-active {
color: $active;
border-bottom: 1px solid $active !important;
}
.am-tabs-default-bar-underline {
display: none;
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff !important;
}
.introduce {
padding: 15px 12px;
font-size: 14px;
color: $color_555;
}
.outline {
padding: 15px 0 15px 12px;
background-color: $bg_f5f5f5;
.stagebox {
margin-bottom: 15px;
}
.stage {
font-size: 14px;
color: $color_333;
}
.classhour {
height: 33px;
background-color: $bg_fff;
color: $color_4B4B4B;
line-height: 33px;
font-size: 14px;
padding-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
.points {
font-size: 12px;
color: $color_666;
margin-left: 10px;
margin-top: 10px;
}
.red {
color: $color_FE2F2F;
}
}
}
}
\ No newline at end of file
src/router.js
...@@ -9,6 +9,7 @@ import My from './components/my'; ...@@ -9,6 +9,7 @@ import My from './components/my';
import CourseList from './components/classify/courselist'; import CourseList from './components/classify/courselist';
import Preferential from './components/preferential/index'; import Preferential from './components/preferential/index';
import Search from './components/search/index' import Search from './components/search/index'
import Detail from './components/detail/index'
...@@ -23,6 +24,7 @@ const router = () => ( ...@@ -23,6 +24,7 @@ const router = () => (
<Route path='/courselist' component={CourseList}></Route> <Route path='/courselist' component={CourseList}></Route>
<Route path='/preferential' component={Preferential}></Route> <Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route> <Route path='/search' component={Search}></Route>
<Route path='/detail' component={Detail}></Route>
</Switch> </Switch>
<Menu /> <Menu />
</Router> </Router>
......
src/styles/variable.scss
...@@ -10,6 +10,9 @@ $color_555: #555; ...@@ -10,6 +10,9 @@ $color_555: #555;
$color_666: #666; $color_666: #666;
$color_999: #999; $color_999: #999;
$color_606: #606060; $color_606: #606060;
$color_202426: #202426;
$color_4B4B4B: #4B4B4B;
$color_FE2F2F: #FE2F2F;
/* /*
...@@ -27,17 +30,23 @@ $font_14: 14px; ...@@ -27,17 +30,23 @@ $font_14: 14px;
$font_12: 12px; $font_12: 12px;
/* /*
* @ 背景颜色 * @ 背景颜色
*/ */
$bg_active: #09f; $bg_active: #09f;
$bg_0078FF: #0078FF;
$bg_fff: #fff; $bg_fff: #fff;
$bg_000: #000; $bg_000: #000;
$bg_f4f4f4: #f4f4f4; $bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5; $bg_f5f5f5: #f5f5f5;
$bg_f7f9fc: #f7f9fc; $bg_f7f9fc: #f7f9fc;
$bg_EBEFF5: #EBEFF5; $bg_EBEFF5: #EBEFF5;
$bg_ccc: #ccc;
$bg_333: #333;
$bg_82BBFB: #82BBFB;
$bg_EBC05A: #EBC05A;
$bg_EBA216: #EBA216;
/* /*
......
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