Skip to content

M
mr-julyedu
Commit 69562b10 by xuzhenghua
Options

首页

parent c90532bb
Showing with 169 additions and 80 deletions
src/components/Index/carousel.js 0 → 100644
import React, {Component} from 'react';
import './carousel.scss';
class Carousel extends Component {
render() {
return (
<div className='scroll-box'>
<ul className='scroll-list'>
{this.props.children}
</ul>
</div>
)
}
}
export default Carousel
src/components/Index/carousel.scss 0 → 100644
.scroll-box {
width: 100%;
height: 92px;
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
position: absolute;
}
}::-webkit-scrollbar{
display:none;
}
src/components/Index/course.js
...@@ -10,6 +10,10 @@ class Course extends Component { ...@@ -10,6 +10,10 @@ 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'>
<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>
......
src/components/Index/course.scss
...@@ -8,7 +8,24 @@ ...@@ -8,7 +8,24 @@
width: 47.8%; width: 47.8%;
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative;
.audition {
position: absolute;
top: 10px;
width: 54px;
height: 18px;
line-height: 18px;
background-color: #09f;
font-size: 12px;
color: #fff;
text-align: center;
border-radius: 1px;
.iconerji {
font-size: 14px!important;
display: inline-block;
margin-right: 4px;
}
}
img { img {
width: 100%; width: 100%;
height:119px; height:119px;
...@@ -17,13 +34,15 @@ ...@@ -17,13 +34,15 @@
.course-title { .course-title {
font-size: 13px; font-size: 13px;
color: #333; color: #333;
line-height: 19px;
margin-top: 9px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-height: 19px; box-orient: vertical;
margin-top: 9px;
} }
.course-price { .course-price {
...@@ -44,6 +63,7 @@ ...@@ -44,6 +63,7 @@
} }
.isbuy { .isbuy {
display: inline-block;
margin-top: 15px; margin-top: 15px;
width: 61px; width: 61px;
height: 18px; height: 18px;
......
src/components/Index/index.js
...@@ -2,14 +2,16 @@ import React, {Component} from 'react'; ...@@ -2,14 +2,16 @@ import React, {Component} from 'react';
import Course from './course.js'; import Course from './course.js';
import Scroll from './scroll.js'; import Scroll from './scroll.js';
import TopScroll from './topscroll.js'; import TopScroll from './topscroll.js';
import Carousel from './carousel.js';
import './index.scss'; import './index.scss';
class Index extends Component { class Index extends Component {
state = { state = {
dataList: [ dataList: [
{ {
'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',
'title': '啊啊啊啊啊啊啊啊啊啊啊', 'title': '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww', 'teacher': 'wwwwww',
'time': '2343234', 'time': '2343234',
'isbuy': 0, 'isbuy': 0,
...@@ -43,34 +45,54 @@ class Index extends Component { ...@@ -43,34 +45,54 @@ class Index extends Component {
'price0': 100, 'price0': 100,
'price1': 1000 'price1': 1000
} }
],
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':'企业内训'}
] ]
} }
render() { render() {
return ( return (
<div className='indexbox'> <div className='indexbox'>
<TopScroll data={this.state.dataList}></TopScroll> <TopScroll data={this.state.dataList} height='168px'></TopScroll>
<div className="tabbox"> <div className="tabbox">
<ul> <ul>
<li><img {
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" this.state.tabdata.map((item,index)=>{
alt=""/><span>公开课</span></li> return (
<li><img <li key={index}>
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" <img src={item.src} alt=""/>
alt=""/><span>精品特惠</span></li> <span>{item.name}</span>
<li><img </li>
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" )
alt=""/><span>赚奖学金</span></li> })
<li><img }
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>每日一题</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>企业内训</span></li>
</ul> </ul>
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">近期直播</h2> <h2 className="title">近期直播</h2>
<Carousel>
{
this.state.dataList.map((item,index)=>{
return(
<li key={index} className='scroll-item'>
<a href="">
<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>
<p className="item-time">时间：{item.time}</p>
</div>
</a>
</li>
)
})
}
</Carousel>
<div className="vip"> <div className="vip">
<a href=""> <a href="">
<img <img
...@@ -86,7 +108,7 @@ class Index extends Component { ...@@ -86,7 +108,7 @@ class Index extends Component {
<div className='category'> <div className='category'>
<h2 className="title">热门推荐</h2> <h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a> <a className="more" href="#">更多 ></a>
<Scroll data={this.state.dataList}></Scroll> <Scroll data={this.state.dataList} height='106px'></Scroll>
<Course data={this.state.dataList}></Course> <Course data={this.state.dataList}></Course>
</div> </div>
<div className='category'> <div className='category'>
......
src/components/Index/index.scss
...@@ -3,19 +3,29 @@ ...@@ -3,19 +3,29 @@
background-color: #fff; background-color: #fff;
} }
.am-wingblank { .am-wingblank {
margin-top: 50px; margin-top: 15px;
} }
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0!important;
margin-top: 12px;
margin-bottom: 5px;
}
/*
页面tab
*/
.tabbox { .tabbox {
width: 100%; width: 100%;
height: 103px; height: 103px;
padding: 20px; padding: 20px 17px;
margin-top: 50px; margin-top: 50px;
ul { ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: center;
li { li {
width: 64px;
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -24,14 +34,62 @@ ...@@ -24,14 +34,62 @@
span { span {
color: #606060; color: #606060;
font-size: 16px; font-size: 13px;
display: block; display: block;
margin-top: 10px; margin-top: 10px;
} }
} }
} }
} }
/*
近期直播
*/
.scroll-item {
display: inline-block;
width: 301px;
height: 100%;
margin-right: 20px;
box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
a {
width: 100%;
height: 100%;
padding: 10px;
display: flex;
.item-img {
width: 100px;
height: 72px;
margin-right: 8px;
}
.item-content .item-title, .item-teacher, .item-time {
max-width: 173px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.item-title {
font-size: 15px;
color: #333;
}
.item-teacher {
font-size: 13px;
color: #555;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: #999;
margin-top: 11px;
}
}
}
.vip { .vip {
width: 100%; width: 100%;
height: 106px; height: 106px;
...@@ -65,7 +123,9 @@ ...@@ -65,7 +123,9 @@
float: right; float: right;
} }
} }
/*
底部查看所有课程
*/
.all-course { .all-course {
text-align: center; text-align: center;
padding-bottom: 30px; padding-bottom: 30px;
...@@ -82,51 +142,3 @@ ...@@ -82,51 +142,3 @@
font-size: 12px; font-size: 12px;
} }
} }
//
//.person-item {
// display: inline-block;
// height: 92px;
// width: 301px;
// margin-right: 20px;
// border: 1px solid rgba(0, 0, 0, .1);
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
// border-radius: 5px;
//
// a {
// width: 100%;
// height: 100%;
// padding: 10px;
// display: flex;
//
// .item-img {
// width: 100px;
// height: 72px;
// margin-right: 8px;
// }
//
// .item-content .item-title, .item-teacher, .item-time {
// max-width: 173px;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap
// }
//
// .item-title {
// font-size: 15px;
// color: #333;
// }
//
// .item-teacher {
// font-size: 13px;
// color: #555;
// margin-top: 11px;
// }
//
// .item-time {
// font-size: 12px;
// color: #999;
// margin-top: 20px;
// }
// }
//}
\ No newline at end of file
src/components/Index/scroll.js
...@@ -3,7 +3,7 @@ import { Carousel, WingBlank } from 'antd-mobile'; ...@@ -3,7 +3,7 @@ import { Carousel, WingBlank } from 'antd-mobile';
class Scroll extends Component { class Scroll extends Component {
render() { render() {
return ( return (
<WingBlank> <WingBlank className='scroll'>
<Carousel <Carousel
autoplay={true} autoplay={true}
infinite infinite
...@@ -12,7 +12,7 @@ class Scroll extends Component { ...@@ -12,7 +12,7 @@ class Scroll extends Component {
<a <a
key={val} key={val}
href="http://www.baidu.com" href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: '100px' }} style={{ display: 'inline-block', width: '100%', height: this.props.height}}
> >
<img <img
src={val.src} src={val.src}
......
src/components/Index/topscroll.js
...@@ -23,7 +23,7 @@ class TopScroll extends Component { ...@@ -23,7 +23,7 @@ class TopScroll extends Component {
display: 'block', display: 'block',
position: 'relative', position: 'relative',
top: this.state.slideIndex === index ? -10 : 0, top: this.state.slideIndex === index ? -10 : 0,
height: '168px', height: this.props.height,
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)', boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}} }}
> >
...@@ -34,7 +34,7 @@ class TopScroll extends Component { ...@@ -34,7 +34,7 @@ class TopScroll extends Component {
onLoad={() => { onLoad={() => {
// fire window resize event to change height // fire window resize event to change height
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
this.setState({imgHeight: '168px'}); this.setState({imgHeight: this.props.height});
}} }}
/> />
</a> </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