Skip to content

M
mr-julyedu
Commit b27d03f0 by xuzhenghua
Options

detail

parent 5a739f73
Showing with 1491 additions and 1014 deletions
src/common/HeaderBar/index.js 0 → 100644
import React from 'react'
import './index.scss'
const HeaderBar = (props) => {
return (
<div className="detail-header">
<i className={'iconfont iconiconfront-68 return'}></i>
<span className='herder'>{props.title}</span>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
);
};
export default HeaderBar;
src/common/HeaderBar/index.scss 0 → 100644
.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;
}
}
\ No newline at end of file
src/common/ToApp/index.js 0 → 100644
import React from 'react'
const ToApp = (props) => {
return (
<div className={props.className} onClick={props.toApp}>在APP打开</div>
);
};
export default ToApp;
src/common/index.js
......@@ -2,3 +2,5 @@ export { default as VList } from './VList'
export { default as Course } from './Course' // 课程状态（试听 正在直播）+封面+标题+ 详情
export { default as Tag } from './CategoryTag'
export { default as OrderItem } from './OrderList'
export { default as HeaderBar } from './HeaderBar'
export { default as ToApp } from './ToApp'
src/components/Index/image/freeclass_icon.png 100644 → 100755
src/components/Index/image/freeclass_icon.png

2.95 KB | W: | H:

src/components/Index/image/freeclass_icon.png

1.54 KB | W: | H:

src/components/Index/image/freeclass_icon.png
src/components/Index/image/freeclass_icon.png
src/components/Index/image/freeclass_icon.png
src/components/Index/image/freeclass_icon.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Index/image/jingpin_icon.png 100644 → 100755
src/components/Index/image/jingpin_icon.png

2.64 KB | W: | H:

src/components/Index/image/jingpin_icon.png

1.47 KB | W: | H:

src/components/Index/image/jingpin_icon.png
src/components/Index/image/jingpin_icon.png
src/components/Index/image/jingpin_icon.png
src/components/Index/image/jingpin_icon.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Index/image/mryt_icon.png 100644 → 100755
src/components/Index/image/mryt_icon.png

2.74 KB | W: | H:

src/components/Index/image/mryt_icon.png

1.51 KB | W: | H:

src/components/Index/image/mryt_icon.png
src/components/Index/image/mryt_icon.png
src/components/Index/image/mryt_icon.png
src/components/Index/image/mryt_icon.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Index/image/qynx_icon.png 100644 → 100755
src/components/Index/image/qynx_icon.png

2.63 KB | W: | H:

src/components/Index/image/qynx_icon.png

1.61 KB | W: | H:

src/components/Index/image/qynx_icon.png
src/components/Index/image/qynx_icon.png
src/components/Index/image/qynx_icon.png
src/components/Index/image/qynx_icon.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Index/image/zjxj_icon.png 100644 → 100755
src/components/Index/image/zjxj_icon.png

2.62 KB | W: | H:

src/components/Index/image/zjxj_icon.png

1.59 KB | W: | H:

src/components/Index/image/zjxj_icon.png
src/components/Index/image/zjxj_icon.png
src/components/Index/image/zjxj_icon.png
src/components/Index/image/zjxj_icon.png
  • 2-up
  • Swipe
  • Onion skin
src/components/classify/index.js
import React, {Component} from 'react';
import {WithTab} from '@/HOCs'
import './index.scss';
import {api} from "@/utils";
class Classify extends Component {
state = {
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Spark大数据',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '机器学习',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Linux',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '数学',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 200,
'price1': 2000
constructor(props) {
super(props)
this.state = {
camp: [],
employment: [],
basics: [],
advanced: [],
special: []
}
}
componentDidMount() {
let data = 1
api.get(`/m/course/classify/${data}`,).then((res) => {
if (res.data.code === 200) {
if(res.data.data.special.length > 0){
this.setState({
basics: res.data.data.common[0],
advanced: res.data.data.common[1],
})
}
if(res.data.data.common.length > 0){
this.setState({
basics: res.data.data.common[0],
advanced: res.data.data.common[1],
})
}
}
]
})
}
render() {
return (
<div className='class-box'>
<div className="class-title">分类</div>
<ClassCourseBox data={this.state.dataList} title={'集训营'} type={1}/>
<ClassCourseBox data={this.state.dataList} title={'就业班'} type={1}/>
<ClassCourseBox data={this.state.dataList} title={'基础入门'} type={2}/>
<ClassCourseBox data={this.state.dataList} title={'进阶提高'} type={2}/>
<ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/>
<ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
<ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/>
<ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/>
<div className="vip">
<a href="/#">
<img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/>
</a>
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item,index)=>{
return(
<a key={index} href={item.course_img}>
<img src={item.course_img} alt=""/>
</a>
)
})
}
</div>
</div>
)
......@@ -62,14 +61,12 @@ class Classify extends Component {
}
function ClassCourseA({data}) {
return(
return (
<div className='items-box'>
{
data.map((item,index)=>{
data && data.length > 0 && data.map((item, index) => {
return (
<a href="/courselist" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
<a href={item.course_id} key={index} className='item-banner'><img src={item.course_img} alt=""/></a>
)
})
}
......@@ -78,12 +75,12 @@ function ClassCourseA({data}) {
}
function ClassCourseB({data}) {
return(
return (
<div className='items-box'>
{
data.map((item,index)=>{
data && data.length > 0 && data.map((item, index) => {
return (
<a href="/#" key={index} className='item-label'>{item.title}</a>
<a href={item.c_id} key={index} className='item-label'>{item.c_name}</a>
)
})
}
......@@ -91,19 +88,21 @@ function ClassCourseB({data}) {
)
}
function ClassCourseBox({data,title,type}) {
return(
function ClassCourseBox({data, title, type}) {
return (
<div className="class-course">
<p className='course-items-title'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/>{title}</p>
{ type === 1 &&
<p className='course-items-title'>
<img src={require('./image/tips.png')} alt=""/>
{title}
</p>
{type === 1 &&
<ClassCourseA data={data}/>
}
{ type === 2 &&
{type === 2 &&
<ClassCourseB data={data}/>
}
</div>
)
}
export default WithTab(Classify);
src/components/detail/audition/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
class Audition extends Component {
constructor(props) {
super(props);
}
colse = () => {
this.props.boxHide(false);
}
render() {
return (
<div>
{
this.props.auditionBox &&
<div className='popup-box'>
<div className='content audition-box'>
<p className='audition-header'>当前页面不支持试听</p>
<p className='audition-dec'>请前往APP试听</p>
<div className='btn btn-18B4ED'>立即前往</div>
</div>
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
}
</div>
);
}
}
export default Audition;
src/components/detail/audition/index.scss 0 → 100644
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.audition-box {
height: 144px;
text-align: center;
margin: 212px auto 22px auto;
.audition-header {
font-size: 16px;
color: $color_333;
}
.audition-dec {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
}
}
src/components/detail/index.js
import React, {Component} from 'react';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './index.scss';
import React, {Component} from 'react'
import './index.scss'
import Bargain from './bargain'
import OutLine from './outline'
import {HeaderBar, ToApp} from '../../common'
import ShareRank from "./shareRank"
import Audition from "./audition"
import Single from "./single"
class Detail extends Component {
state = {
isbuy: 0,
isvip: 0,
isshow: false,
status: 0,
stage_info: [
{
"stage_name": "预习阶段 机器学习中的数学基础",
"lesson": [
{
"is_video": 0,
"name": "微积分",
"video_id": 1170,
"point": [
{
"name": "微积分的基本概念",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 2,
"name": "概率论",
"video_id": 1171,
"point": [
{
"name": "概率论简介",
"type": 1
}
],
"class_price": 22.99,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 3,
"name": "线性代数",
"video_id": 1172,
"point": [
{
"name": "线性代数基础",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 4,
"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": 5,
"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": 6,
"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
}
]
}
]
auditionBox: false,
singleBox: false
}
toAudition() {
this.setState(status => ({
isshow: !status.isshow,
status: 0
}));
toApp = () => {
alert('toApp')
}
toSingleset() {
// 点击子组件试听按钮
toAudition = () => {
this.setState(status => ({
isshow: !status.isshow,
status: 1
auditionBox: true,
}));
}
colse(){
// 点击子组件单集购买按钮
toSingleset = () => {
this.setState(status => ({
isshow: !status.isshow,
singleBox: true,
}));
}
render() {
const tabs = [
{title: '介绍'},
{title: '大纲'}
];
// 自组件传给父组件的boxHide
boxHide = (val) => {
this.setState({auditionBox: val,singleBox: val})
}
render() {
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>
<ToApp className='toapp' toApp={this.toApp}></ToApp>
<HeaderBar title={'课程详情'}></HeaderBar>
{/*课程*/}
<div className='course-content'>
<div className='cover'>
......@@ -664,7 +79,6 @@ class Detail extends Component {
</div>
}
{/*服务承诺*/}
<div className='promise'>
<label>服务承诺</label>
......@@ -672,182 +86,24 @@ class Detail extends Component {
</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>
<ShareRank/>
{/*砍价*/}
<Bargain/>
{/*课程介绍、大纲*/}
<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}
<OutLine toAudition={this.toAudition} toSingleset={this.toSingleset}/>
{ // 试听
item.is_video === 0 &&
<span className='btn-right-10 audition' onClick={this.toAudition.bind(this)}>试听</span>
}
{ // 未购买未开单集购买：上锁标志，点击提示购买
item.is_video === 3 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i>
}
{ // 未购买已开单集购买：显示单集价格，点击购买单集
item.is_video === 2 &&
<span className='btn-right-10 singleset' onClick={this.toSingleset.bind(this)}>¥ {item.class_price}</span>
}
{
// 已购买直播中：正在直播，点击进入直播间
item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i className='iconfont icondanseshixintubiao-23'></i></span>
}
{
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程
item.is_video === 5 &&
<i className='iconfont icondanseshixintubiao-23 icon-right-22'></i>
}
{
// 已购买未开课、已购买直播结束：空
}
</h2>
{
item.point.map((item, index) => {
const type = (
<span>
{item.type === 1 &&
<span>知识点{index + 1}：</span>
} {item.type === 2 &&
<span className='red'>实战项目：</span>
}
</span>
)
{/*试听*/}
<Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>
return (
<li className='points text-overflow-1'
key={index}>{type}{item.name}</li>
)
{/*单集购买*/}
<Single singleBox={this.state.singleBox} boxHide={this.boxHide}/>
})
}
</ul>
)
})
}
</div>
)
})
}
</div>
</Tabs>
<WhiteSpace/>
</div>
{
this.state.isshow === true &&
<div>
<div className='popup-box'>
{
this.state.status === 0 &&
<div className='content audition-box'>
<p className='audition-header'>当前页面不支持试听</p>
<p className='audition-dec'>请前往APP试听</p>
<div className='btn btn-18B4ED'>立即前往</div>
</div>
}
{
this.state.status === 1 &&
<div className='content singleset-payment'>
<div className='price-box'>
<span>实付款：</span>
<p>25元</p>
</div>
<div className='course-info'>
<p className='text-overflow-1'><span>课程：</span>机器学习</p>
<p className='text-overflow-1'><span>课时：</span>第2课时 决策树与树集成模型法法第2课时 决策树与树集成模型法法</p>
</div>
<div className='payment-type'>
<label>支付方式：</label>
<p>
<i className='iconfont iconzhifubaox-'></i>
<span>支付宝</span>
<i className='iconfont icondanseshixintubiao-5 redioed'></i>
</p>
<p>
<i className='iconfont iconweixinzhifu buy'></i>
<span>微信支付</span>
<i className='iconfont icondanseshixintubiao-5 redio'></i>
</p>
</div>
<div className='btn btn-18B4ED'>确认购买</div>
</div>
}
{
this.state.status === 2 &&
<div className='content payment-success'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 3天内购买全集，可直接抵扣该集费用，275元购买。</div>
<div className="dec">· 超过3天，按照未够集数/全部集数等比例计费，280元购买全集。</div>
<div className='btn btn-18B4ED'>开始学习</div>
<div className='btn btn-FF4000'>￥275购买全集</div>
</div>
}
{
this.state.status === 3 &&
<div className='content zero'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 恭喜您获得0元拼团购买剩余课时的机会。</div>
<div className='btn btn-FF4000'>0元参团</div>
</div>
}
{
this.state.status === 4 &&
<div className='content zero'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 恭喜您获得0元购买剩余课时的机会。</div>
<div className='btn btn-FF4000'>0元购</div>
</div>
}
<i onClick={this.colse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>
</div>
</div>
}
</div>
);
)
}
}
export default Detail;
export default Detail
src/components/detail/index.scss
......@@ -15,25 +15,6 @@
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;
......@@ -196,132 +177,6 @@
}
}
.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;
position: relative;
}
.points {
font-size: 12px;
color: $color_666;
margin-left: 10px;
margin-top: 10px;
}
.red {
color: $color_FE2F2F;
}
.icon-right-22 {
position: absolute;
right: 22px;
}
.iconiconfront-74 {
font-size: 19px;
}
.icondanseshixintubiao-23 {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: $bg_active;
color: $white;
text-align: center;
line-height: 22px;
font-size: 14px;
top: 6px;
margin-left: 5px;
}
.live {
color: $active;
font-size: 12px;
}
.btn-right-10 {
position: absolute;
right: 10px;
top: 6px;
display: inline-block;
min-width: 44px;
padding: 0 5px;
height: 22px;
line-height: 22px;
text-align: center;
color: $white;
font-size: 12px;
border-radius: 11px;
}
.audition {
background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%);
}
.singleset {
background-color: $bg_FE2F2F;
}
}
}
.popup-box {
position: fixed;
top: 0;
......
src/components/detail/outline/index.js 0 → 100644
import React, {Component} from 'react'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './index.scss'
class OutLine extends Component {
state = {
stage_info: [
{
"stage_name": "预习阶段 机器学习中的数学基础",
"lesson": [
{
"is_video": 0,
"name": "微积分",
"video_id": 1170,
"point": [
{
"name": "微积分的基本概念",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 2,
"name": "概率论",
"video_id": 1171,
"point": [
{
"name": "概率论简介",
"type": 1
}
],
"class_price": 22.99,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 3,
"name": "线性代数",
"video_id": 1172,
"point": [
{
"name": "线性代数基础",
"type": 1
}
],
"class_price": 0,
"is_preview": 0,
"is_class": 0,
"video_auth": 0
},
{
"is_video": 4,
"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": 5,
"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": 6,
"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='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}
{ // 试听
item.is_video === 0 &&
<span className='btn-right-10 audition'
onClick={this.props.toAudition}>试听</span>
}
{ // 未购买未开单集购买：上锁标志，点击提示购买
item.is_video === 3 &&
<i className='iconfont iconiconfront-74 icon-right-22'></i>
}
{ // 未购买已开单集购买：显示单集价格，点击购买单集
item.is_video === 2 &&
<span className='btn-right-10 singleset'
onClick={this.props.toSingleset}>¥ {item.class_price}</span>
}
{
// 已购买直播中：正在直播，点击进入直播间
item.is_video === 4 &&
<span className='live icon-right-22'>正在直播<i
className='iconfont icondanseshixintubiao-23'></i></span>
}
{
// 已购买直播结束已上传视频：正常播放按钮，点击播放课程
item.is_video === 5 &&
<i className='iconfont icondanseshixintubiao-23 icon-right-22'></i>
}
{
// 已购买未开课、已购买直播结束：空
}
</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>
);
}
}
export default OutLine;
src/components/detail/outline/index.scss 0 → 100644
.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;
position: relative;
}
.points {
font-size: 12px;
color: $color_666;
margin-left: 10px;
margin-top: 10px;
}
.red {
color: $color_FE2F2F;
}
.icon-right-22 {
position: absolute;
right: 22px;
}
.iconiconfront-74 {
font-size: 19px;
}
.icondanseshixintubiao-23 {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: $bg_active;
color: $white;
text-align: center;
line-height: 22px;
font-size: 14px;
top: 6px;
margin-left: 5px;
}
.live {
color: $active;
font-size: 12px;
}
.btn-right-10 {
position: absolute;
right: 10px;
top: 6px;
display: inline-block;
min-width: 44px;
padding: 0 5px;
height: 22px;
line-height: 22px;
text-align: center;
color: $white;
font-size: 12px;
border-radius: 11px;
}
.audition {
background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%);
}
.singleset {
background-color: $bg_FE2F2F;
}
}
}
src/components/detail/shareRank/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
class ShareRank extends Component {
render() {
return (
<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>
);
}
}
export default ShareRank;
src/components/detail/shareRank/index.scss 0 → 100644
.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;
}
}
src/components/detail/single/index.js 0 → 100644
import React, {Component} from 'react'
import './index.scss'
class Single extends Component {
state = {
status: 1,
}
colse = () => {
this.props.boxHide(false);
}
render() {
return (
<div>
{
this.props.singleBox &&
<div className='popup-box'>
{
this.state.status === 1 &&
<div className='content singleset-payment'>
<div className='price-box'>
<span>实付款：</span>
<p>25元</p>
</div>
<div className='course-info'>
<p className='text-overflow-1'><span>课程：</span>机器学习</p>
<p className='text-overflow-1'><span>课时：</span>第2课时 决策树与树集成模型法法第2课时 决策树与树集成模型法法
</p>
</div>
<div className='payment-type'>
<label>支付方式：</label>
<p>
<i className='iconfont iconzhifubaox-'></i>
<span>支付宝</span>
<i className='iconfont icondanseshixintubiao-5 redioed'></i>
</p>
<p>
<i className='iconfont iconweixinzhifu buy'></i>
<span>微信支付</span>
<i className='iconfont icondanseshixintubiao-5 redio'></i>
</p>
</div>
<div className='btn btn-18B4ED'>确认购买</div>
</div>
}
{
this.state.status === 2 &&
<div className='content payment-success'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 3天内购买全集，可直接抵扣该集费用，275元购买。</div>
<div className="dec">· 超过3天，按照未够集数/全部集数等比例计费，280元购买全集。</div>
<div className='btn btn-18B4ED'>开始学习</div>
<div className='btn btn-FF4000'>￥275购买全集</div>
</div>
}
{
this.state.status === 3 &&
<div className='content zero'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 恭喜您获得0元拼团购买剩余课时的机会。</div>
<div className='btn btn-FF4000'>0元参团</div>
</div>
}
{
this.state.status === 4 &&
<div className='content zero'>
<div className="header">
<i className='iconfont icondanseshixintubiao-5'></i>
<span>购买成功</span>
</div>
<div className="dec">· 恭喜您获得0元购买剩余课时的机会。</div>
<div className='btn btn-FF4000'>0元购</div>
</div>
}
<i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
</div>
}
</div>
);
}
}
export default Single;
src/components/detail/single/index.scss 0 → 100644
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
.content {
width: 300px;
position: relative;
background-color: $white;
padding-top: 20px;
border-radius: 3px;
}
.close {
color: #fff;
font-size: 22px;
position: relative;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.singleset-payment {
height: 305px;
margin: 140px auto 22px auto;
padding: 17px 20px;
.price-box {
padding-bottom: 15px;
border-bottom: 1px solid $sp_ddd;
span {
font-size: 12px;
color: $color_666;
}
p {
height: 22px;
line-height: 22px;
color: $color_FF4000;
font-size: 22px;
text-align: center;
margin-top: 5px;
}
}
.course-info {
font-size: 14px;
p {
height: 14px;
line-height: 14px;
margin-top: 10px;
color: $color_333;
span {
color: $color_666;
}
}
}
.payment-type {
margin-top: 20px;
label {
display: inline-block;
width: 100%;
border-bottom: 1px solid $sp_ddd;
color: $color_666;
font-size: 12px;
padding-bottom: 5px;
}
p {
height: 22px;
line-height: 22px;
margin-top: 10px;
position: relative;
.iconzhifubaox- {
font-size: 22px;
color: #01aaef;
}
.iconweixinzhifu {
font-size: 22px;
color: #3baf34;
}
span {
display: inline-block;
margin-left: 10px;
color: $color_333;
font-size: 14px;
vertical-align: text-bottom;
}
.icondanseshixintubiao-5 {
position: absolute;
right: 0;
font-size: 24px;
}
.redioed {
color: #4cd964;
}
.redio {
color: $border_ccc;
}
}
}
}
.zero {
height: 147px;
margin: 213px auto 22px auto;
text-align: center;
.header {
color: $active;
height: 24px;
line-height: 24px;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.dec {
height: 14px;
line-height: 14px;
color: $color_666;
font-size: 14px;
margin-top: 15px;
}
}
.payment-success {
height: 258px;
margin: 143px auto 22px auto;
padding: 20px 24px;
.dec {
height: 33px;
line-height: 20px;
color: $color_666;
font-size: 14px;
margin-top: 12px;
}
.btn-18B4ED {
bottom: 70px;
}
}
}
\ No newline at end of file
src/components/passport/common/Header/header.scss
.header {
padding: 38px 130px 52px;
flex: 0 0 auto;
.common-header {
padding: 38px 130px 52px;
flex: 0 0 auto;
img {
width: 117px;
height: 50px;
}
}
\ No newline at end of file
img {
width: 117px;
height: 50px;
}
}
\ No newline at end of file
src/components/passport/common/Header/index.js
......@@ -5,7 +5,7 @@ import logo from './logo.png'
const Header = React.memo(() => {
return (
<div className="header">
<div className="common-header">
<img src={logo} alt=""/>
</div>
);
......
src/components/preferential/headerBar.js 0 → 100644
import React, {Component} from 'react'
import {SearchBar} from 'antd-mobile'
import './index.scss'
class HeaderBar extends Component {
toSearch() {
window.location.href ='/search'
}
return() {
window.location.href ='/index'
}
render() {
return (
<div className='preferential'>
<div className="search-nav">
<i className={'iconfont iconiconfront-68 return'} onClick={this.return.bind(this)}></i>
<SearchBar
placeholder="搜索课程"
cancelText={" "}
onFocus={this.toSearch.bind(this)}
showCancelButton={false}
/>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
</div>
)
}
}
export default HeaderBar
src/components/preferential/index.js
import React, {Component} from 'react'
import {VList} from '../../common'
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './index.scss'
import HeaderBar from './headerBar'
import {api} from "@/utils"
class Preferential extends Component {
......@@ -67,13 +68,6 @@ class Preferential extends Component {
console.log(courseId)
}
toSearch() {
window.location.href ='/search'
}
return() {
window.location.href ='/index'
}
render() {
const tabs = [
{title: '限时特惠'},
......@@ -82,16 +76,7 @@ class Preferential extends Component {
]
return (
<div className='preferential'>
<div className="search-nav">
<i className={'iconfont iconiconfront-68 return'} onClick={this.return.bind(this)}></i>
<SearchBar
placeholder="搜索课程"
cancelText={" "}
onFocus={this.toSearch.bind(this)}
showCancelButton={false}
/>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
<HeaderBar></HeaderBar>
<div className='class-content'>
<WhiteSpace/>
......
yarn.lock
......@@ -2540,16 +2540,16 @@ comma-separated-tokens@^1.0.0:
resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.6.tgz#3cd3d8adc725ab473843db338bcdfd4a7bb087bf"
integrity sha512-f20oA7jsrrmERTS70r3tmRSxR8IJV2MTN7qe6hzgX+3ARfXrdMJFvGWvWQK0xpcBurg9j9eO2MiqzZ8Y+/UPCA==
commander@*, commander@^2.11.0, commander@^2.19.0, commander@~2.20.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
commander@2.17.x:
version "2.17.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
commander@^2.11.0, commander@^2.19.0, commander@~2.20.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
commander@~2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
......@@ -5934,6 +5934,11 @@ js-base64@^2.1.8:
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
js-cookie@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.0.tgz#1b2c279a6eece380a12168b92485265b35b1effb"
integrity sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s=
js-levenshtein@^1.1.3:
version "1.1.6"
resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
......@@ -6730,6 +6735,13 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
dependencies:
minimist "0.0.8"
mockjs@^1.0.1-beta3:
version "1.0.1-beta3"
resolved "https://registry.yarnpkg.com/mockjs/-/mockjs-1.0.1-beta3.tgz#d234f3c27256397564f2c955142e891909537209"
integrity sha1-0jTzwnJWOXVk8slVFC6JGQlTcgk=
dependencies:
commander "*"
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
......@@ -8651,6 +8663,13 @@ react-fast-compare@^2.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-infinite-scroller@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
dependencies:
prop-types "^15.5.8"
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
......
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