Skip to content

M
mr-julyedu
Commit 8b5b79c6 by xuzhenghua
Options

合并master

parent c2b00593
Showing with 257 additions and 3 deletions
src/common/Courseload/index.js 0 → 100644
import React from 'react';
import './course.scss'
const Course = (props) => {
return (
<li className='course-item'>
wwwww
</li>
);
};
export default Course;
src/common/index.js
...@@ -5,3 +5,4 @@ export { default as Course } from './Course' // 课程状态（试听 正在 ...@@ -5,3 +5,4 @@ export { default as Course } from './Course' // 课程状态（试听 正在
export { default as Carousel } from './Carousel' // 横向滚动 export { default as Carousel } from './Carousel' // 横向滚动
export { default as Topscroll } from './Topscroll' // 首页头部轮播 export { default as Topscroll } from './Topscroll' // 首页头部轮播
export { default as Scroll } from './Scroll' // 首页正常轮播图 export { default as Scroll } from './Scroll' // 首页正常轮播图
export { default as Courseload } from './Courseload' // 下拉加载课程列表
src/components/classify/courselist.js 0 → 100644
import React, {Component} from 'react';
import {Courseload} from '../../common';
import './index.scss';
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
}
]
}
render() {
return (
<div className='class-box'>
<Courseload></Courseload>
</div>
)
}
}
export default Classify;
\ No newline at end of file
src/components/classify/index.js
import React, { Component } from 'react'; import React, {Component} from 'react';
import './index.scss'; import './index.scss';
class Classify extends Component { 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
}
]
}
render() { render() {
return( return (
<div className='class-box'> <div className='class-box'>
<div className="class-title">分类</div> <div className="class-title">分类</div>
<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=""/>集训营</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="#" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
})
}
</div>
</div>
<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=""/>就业班</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="#" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
})
}
</div>
</div>
<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=""/>基础入门</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div>
</div>
<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=""/>进阶提高</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div>
</div>
<div className="vip">
<a href="/#">
<img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/>
</a>
</div>
</div> </div>
) )
} }
......
src/components/classify/index.scss
.class-box {
background-color: $bg_fff;
}
.class-title {
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #F7F9FC;
font-size: 16px;
color: $color_333;
}
.class-course {
width: 100%;
margin-top: 20px;
padding: 0 15px;
.course-items-title {
font-size: 13px;
color: $color_333;
img {
margin-right: 8px;
width: 10px;
height: 11px;
}
}
.items-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item-banner {
display: inline-block;
width: 30.5%;
height: 76px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
}
.item-label {
display: inline-block;
width: 30.5%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: $bg_f4f4f4;
border-radius: 15px;
margin-top: 15px;
margin-bottom: -5px;
}
}
}
.vip {
width: 100%;
height: 130px;
border-radius: 5px;
margin-top: 20px;
margin-bottom: 50px;
padding: 0 15px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
src/router.js
...@@ -6,6 +6,7 @@ import Index from './components/Index'; ...@@ -6,6 +6,7 @@ import Index from './components/Index';
import Classify from './components/classify'; import Classify from './components/classify';
import Study from './components/study'; import Study from './components/study';
import My from './components/my'; import My from './components/my';
import CourseList from './components/classify/courselist';
...@@ -18,6 +19,7 @@ const router = () => ( ...@@ -18,6 +19,7 @@ const router = () => (
<Route path='/classify' component={Classify}></Route> <Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route> <Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route> <Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route>
</Switch> </Switch>
<Menu /> <Menu />
</Router> </Router>
......
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