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