Skip to content

M
mr-julyedu
Commit de0a67fe by xuzhenghua
Options

a标签

parent 0d0b56dc
Showing with 124 additions and 53 deletions
src/common/Courseload/index.js deleted 100644 → 0
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,4 +5,3 @@ export { default as Course } from './Course' // 课程状态（试听 正在 ...@@ -5,4 +5,3 @@ 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
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Courseload} from '../../common'; import {VList} from '../../common';
import './index.scss'; import './courselist.scss';
class Classify extends Component { class Classify extends Component {
state = { state = {
dataList: [ mockData:[
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', title: '三月面试求职班',
'title': 'Spark大数据', imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww', contact: 'QQ群：449141326',
'time': '2343234', time: '03月12日',
'isbuy': 0, record: '学习到第2课2分33秒',
'price0': 100, isbuy: 0,
'price1': 1000 price0: 100,
price1: 100
}, },
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', title: '三月面试求职班',
'title': '机器学习', imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
'teacher': 'wwwwww', contact: 'QQ群：449141326',
'time': '2343234', time: '03月12日',
'isbuy': 0, record: '学习到第2课2分33秒',
'price0': 100, isbuy: 0,
'price1': 1000 price0: 100,
price1: 100
}, },
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', title: '三月面试求职班',
'title': 'Linux', imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
'teacher': 'wwwwww', contact: 'QQ群：449141326',
'time': '2343234', time: '03月12日',
'isbuy': 0, record: '学习到第2课2分33秒',
'price0': 100, isbuy: 0,
'price1': 1000 price0: 100,
price1: 100
}, },
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', title: '三月面试求职班',
'title': '数学', imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
'teacher': 'wwwwww', contact: 'QQ群：449141326',
'time': '2343234', time: '03月12日',
'isbuy': 1, record: '学习到第2课2分33秒',
'price0': 200, isbuy: 0,
'price1': 2000 price0: 100,
} price1: 100
},
] ]
} }
render() { render() {
const handleClick = () => {
console.log(1);
}
return ( return (
<div className='class-box'> <div className='class-box'>
<Courseload></Courseload> <ul>
{this.state.mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact'>{item.contact}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
return (
<VList handleClick={handleClick} {...item} key={index} info={Info}></VList>
)
})}
</ul>
</div> </div>
) )
} }
} }
export default Classify; export default Classify;
\ No newline at end of file
src/components/classify/courselist.scss
.class-box {
.v-list-item {
.content {
border: none;
.cover {
flex: inherit;
}
}
.info {
.title {
font-size: 16px;
color: $color_333;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
.course-price {
margin-top: 15px;
.new {
color: $red;
font-size: 15px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
}
}
\ No newline at end of file
src/components/classify/index.js
...@@ -54,7 +54,7 @@ class Classify extends Component { ...@@ -54,7 +54,7 @@ class Classify extends Component {
{ {
this.state.dataList.map((item,index)=>{ this.state.dataList.map((item,index)=>{
return ( return (
<a href="#" key={index} className='item-banner'><img <a href="/#" key={index} className='item-banner'><img
src={item.src} src={item.src}
alt=""/></a> alt=""/></a>
) )
...@@ -71,7 +71,7 @@ class Classify extends Component { ...@@ -71,7 +71,7 @@ class Classify extends Component {
{ {
this.state.dataList.map((item,index)=>{ this.state.dataList.map((item,index)=>{
return ( return (
<a href="#" key={index} className='item-banner'><img <a href="/#" key={index} className='item-banner'><img
src={item.src} src={item.src}
alt=""/></a> alt=""/></a>
) )
...@@ -87,7 +87,7 @@ class Classify extends Component { ...@@ -87,7 +87,7 @@ class Classify extends Component {
{ {
this.state.dataList.map((item,index)=>{ this.state.dataList.map((item,index)=>{
return ( return (
<a href="#" key={index} className='item-label'>{item.title}</a> <a href="/#" key={index} className='item-label'>{item.title}</a>
) )
}) })
} }
...@@ -101,7 +101,7 @@ class Classify extends Component { ...@@ -101,7 +101,7 @@ class Classify extends Component {
{ {
this.state.dataList.map((item,index)=>{ this.state.dataList.map((item,index)=>{
return ( return (
<a href="#" key={index} className='item-label'>{item.title}</a> <a href="/#" key={index} className='item-label'>{item.title}</a>
) )
}) })
} }
......
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