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' // 课程状态（试听 正在
export { default as Carousel } from './Carousel' // 横向滚动
export { default as Topscroll } from './Topscroll' // 首页头部轮播
export { default as Scroll } from './Scroll' // 首页正常轮播图
export { default as Courseload } from './Courseload' // 下拉加载课程列表
src/components/classify/courselist.js
import React, {Component} from 'react';
import {Courseload} from '../../common';
import './index.scss';
import {VList} from '../../common';
import './courselist.scss';
class Classify extends Component {
state = {
dataList: [
mockData:[
{
'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
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
'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
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
'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
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
'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
}
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
]
}
render() {
const handleClick = () => {
console.log(1);
}
return (
<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>
)
}
}
export default Classify;
\ No newline at end of file
export default Classify;
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 {
{
this.state.dataList.map((item,index)=>{
return (
<a href="#" key={index} className='item-banner'><img
<a href="/#" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
......@@ -71,7 +71,7 @@ class Classify extends Component {
{
this.state.dataList.map((item,index)=>{
return (
<a href="#" key={index} className='item-banner'><img
<a href="/#" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
......@@ -87,7 +87,7 @@ class Classify extends Component {
{
this.state.dataList.map((item,index)=>{
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 {
{
this.state.dataList.map((item,index)=>{
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