Skip to content

M
mr-julyedu
Commit 4607dcfa by xuzhenghua
Options

master

parent ce8cd6c2
Showing with 46 additions and 28 deletions
src/components/Index/course.js → src/common/course/course.js
......@@ -10,21 +10,12 @@ class Course extends Component {
this.props.data.map((item, index) => {
return (
<li key={index}>
{item.isbuy === 1 && <span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>}
{this.props.top}
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
</a>
{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>
}
{this.props.bottom}
</li>
)
})
......@@ -35,5 +26,6 @@ class Course extends Component {
}
}
export default Course
src/components/Index/course.scss → src/common/course/course.scss
......@@ -9,6 +9,7 @@
margin-top: 15px;
margin-bottom: 5px;
position: relative;
.audition {
position: absolute;
top: 10px;
......@@ -20,15 +21,17 @@
color: #fff;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px!important;
font-size: 14px !important;
display: inline-block;
margin-right: 4px;
}
}
img {
width: 100%;
height:119px;
height: 119px;
}
.course-title {
......
src/components/Index/index.js
import React, {Component} from 'react';
import Course from './course.js';
import Scroll from './scroll.js';
import TopScroll from './topscroll.js';
import Carousel from './carousel.js';
import Course from '../../common/course/course.js';
import Scroll from '../../common/scroll/scroll.js';
import TopScroll from '../../common/scroll/topscroll.js';
import Carousel from '../../common/carousel/carousel.js';
import './index.scss';
......@@ -47,22 +47,38 @@ class Index extends Component {
}
],
tabdata: [
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'公开课'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'精品特惠'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'赚奖学金'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'每日一题'},
{'src':'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png','name':'企业内训'}
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '公开课'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '精品特惠'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '赚奖学金'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '每日一题'
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'name': '企业内训'
}
]
}
render() {
const top = <div>333</div>
return (
<div className='indexbox'>
<TopScroll data={this.state.dataList} height='168px'></TopScroll>
<div className="tabbox">
<ul>
{
this.state.tabdata.map((item,index)=>{
this.state.tabdata.map((item, index) => {
return (
<li key={index}>
<img src={item.src} alt=""/>
......@@ -77,11 +93,11 @@ class Index extends Component {
<h2 className="title">近期直播</h2>
<Carousel>
{
this.state.dataList.map((item,index)=>{
return(
this.state.dataList.map((item, index) => {
return (
<li key={index} className='scroll-item'>
<a href="">
<img className="item-img" src={item.src} alt="" />
<img className="item-img" src={item.src} alt=""/>
<div className="item-content">
<h2 className="item-title">{item.title}</h2>
<p className="item-teacher">讲师：{item.teacher}</p>
......@@ -97,13 +113,20 @@ class Index extends Component {
<a href="">
<img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" />
alt=""/>
</a>
</div>
</div>
<div className='category'>
<h2 className="title">新上好课</h2>
<Course data={this.state.dataList}></Course>
<Course data={this.state.dataList} top={
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
} bottom = {
<p>{aaa}</p>
}></Course>
</div>
<div className='category'>
<h2 className="title">热门推荐</h2>
......
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