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 {
this.props.data.map((item, index) => {
return (
<li key={index}>
{item.isbuy === 1 && <span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>}
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
......
src/components/Index/course.scss
......@@ -8,7 +8,24 @@
width: 47.8%;
margin-top: 15px;
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 {
width: 100%;
height:119px;
......@@ -17,13 +34,15 @@
.course-title {
font-size: 13px;
color: #333;
line-height: 19px;
margin-top: 9px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 19px;
margin-top: 9px;
box-orient: vertical;
}
.course-price {
......@@ -44,6 +63,7 @@
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
......
src/components/Index/index.js
......@@ -2,14 +2,16 @@ 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 './index.scss';
class Index extends Component {
state = {
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'title': '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
......@@ -43,34 +45,54 @@ class Index extends Component {
'price0': 100,
'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() {
return (
<div className='indexbox'>
<TopScroll data={this.state.dataList}></TopScroll>
<TopScroll data={this.state.dataList} height='168px'></TopScroll>
<div className="tabbox">
<ul>
<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>
<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>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/><span>企业内训</span></li>
{
this.state.tabdata.map((item,index)=>{
return (
<li key={index}>
<img src={item.src} alt=""/>
<span>{item.name}</span>
</li>
)
})
}
</ul>
</div>
<div className='category'>
<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">
<a href="">
<img
......@@ -86,7 +108,7 @@ class Index extends Component {
<div className='category'>
<h2 className="title">热门推荐</h2>
<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>
</div>
<div className='category'>
......
src/components/Index/index.scss
......@@ -3,19 +3,29 @@
background-color: #fff;
}
.am-wingblank {
margin-top: 50px;
margin-top: 15px;
}
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0!important;
margin-top: 12px;
margin-bottom: 5px;
}
/*
页面tab
*/
.tabbox {
width: 100%;
height: 103px;
padding: 20px;
padding: 20px 17px;
margin-top: 50px;
ul {
display: flex;
justify-content: space-between;
text-align: center;
li {
width: 64px;
img {
width: 40px;
height: 40px;
......@@ -24,14 +34,62 @@
span {
color: #606060;
font-size: 16px;
font-size: 13px;
display: block;
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 {
width: 100%;
height: 106px;
......@@ -65,7 +123,9 @@
float: right;
}
}
/*
底部查看所有课程
*/
.all-course {
text-align: center;
padding-bottom: 30px;
......@@ -82,51 +142,3 @@
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';
class Scroll extends Component {
render() {
return (
<WingBlank>
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
......@@ -12,7 +12,7 @@ class Scroll extends Component {
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: '100px' }}
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
......
src/components/Index/topscroll.js
......@@ -23,7 +23,7 @@ class TopScroll extends Component {
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -10 : 0,
height: '168px',
height: this.props.height,
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}}
>
......@@ -34,7 +34,7 @@ class TopScroll extends Component {
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({imgHeight: '168px'});
this.setState({imgHeight: this.props.height});
}}
/>
</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