Skip to content

M
mr-julyedu
Commit 57494c3e by xuzhenghua
Options

test

parent 8000b127
Showing with 353 additions and 228 deletions
src/components/Index/course.js
import React, {Component} from 'react';
import './course.css';
class Classify extends Component {
constructor(props) {
super(props)
this.state = {
dataList: [
{
'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
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 200,
'price1': 2000
},
{
'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
},
{
'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
},
{
'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
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 100,
'price1': 1000
}
]
}
}
import './course.scss';
class Course extends Component {
render() {
return (
<div>
<ul className="course-detail">
{
this.state.dataList.map((item, index) => {
this.props.data.map((item, index) => {
return (
<li key={index}>
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
</a>
if({item.isbuy === 0}){
<p className="course-price">
{item.isbuy === 0 && <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
} else {
<a href="" className="isbuy">已购买</a>
}
</p>}
{item.isbuy === 1 &&
<a href="" className="isbuy">已购买</a>
}
</li>
)
})
......@@ -106,5 +31,5 @@ class Classify extends Component {
}
}
export default Course
export default Classify;
\ No newline at end of file
src/components/Index/course.css → src/components/Index/course.scss
......@@ -2,55 +2,57 @@
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;}
flex-wrap: wrap;
li {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
}
li {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
img {
width: 100%;
height: 119px;
}
img {
width: 100%;
height:119px;
}
.course-title {
font-size: 13px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 19px;
margin-top: 9px;
}
.course-title {
font-size: 13px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 19px;
margin-top: 9px;
}
.course-price {
margin-top: 15px;
}
.new {
color: #FF2121;
font-size: 15px;
}
.course-price {
margin-top: 15px;
.old {
color: #999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
.new {
color: #FF2121;
font-size: 15px;
}
.old {
color: #999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
margin-top:15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
.isbuy {
margin-top: 15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
\ No newline at end of file
src/components/Index/index.css deleted 100644 → 0
body,html {
background-color: #fff;
}
.tabbox {
width: 100%;
height: 103px;
padding: 20px;
}
.tabbox ul {
display: flex;
justify-content: space-between;
list-style: none;
}
.tabbox ul li img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.tabbox ul li span {
color: #606060;
font-size: 13px;
display: block;
margin-top: 10px;
}
\ No newline at end of file
src/components/Index/index.js
import React, { Component } from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
import './index.css';
import React, {Component} from 'react';
import Course from './course.js';
import Scroll from './scroll.js';
import TopScroll from './topscroll.js';
import './index.scss';
class Index extends Component {
state = {
data: ['1', '2', '3'],
imgHeight: 176,
}
componentDidMount() {
// simulate img loading
setTimeout(() => {
this.setState({
data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
});
}, 100);
dataList: [
{
'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
},
{
'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
},
{
'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
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 100,
'price1': 1000
}
]
}
render() {
return (
<div>
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={10}
slideWidth={0.8}
autoplay
infinite
beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
afterChange={index => this.setState({ slideIndex: index })}
>
{this.state.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -10 : 0,
height: this.state.imgHeight,
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}}
>
<img
src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
<div className='indexbox'>
<TopScroll data={this.state.dataList}></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>
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>
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>
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>
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>
alt=""/><span>企业内训</span></li>
</ul>
</div>
<div className='category'>
<h2 className="title">近期直播</h2>
<div className="vip">
<a href="">
<img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" />
</a>
</div>
</div>
<div className='category'>
<h2 className="title">新上好课</h2>
<Course data={this.state.dataList}></Course>
</div>
<div className='category'>
<h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a>
<Scroll data={this.state.dataList}></Scroll>
<Course data={this.state.dataList}></Course>
</div>
<div className='category'>
<h2 className="title">基础入门</h2>
<a className="more" href="#">更多 ></a>
<Course data={this.state.dataList}></Course>
</div>
<div className='category'>
<h2 className="title">就业班</h2>
<Course data={this.state.dataList}></Course>
</div>
<div className="category all-course">
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</div>
</div>
);
}
......
src/components/Index/index.scss 0 → 100644
.indexbox {
overflow: hidden;
background-color: #fff;
}
.am-wingblank {
margin-top: 50px;
}
.tabbox {
width: 100%;
height: 103px;
padding: 20px;
margin-top: 50px;
ul {
display: flex;
justify-content: space-between;
li {
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
span {
color: #606060;
font-size: 16px;
display: block;
margin-top: 10px;
}
}
}
}
.vip {
width: 100%;
height: 106px;
border-radius: 5px;
margin-top: 20px;
img {
width: 100%;
height: 106px;
border-radius: 5px;
}
}
/*课程公共样式*/
.category {
width: 100%;
border-top: 8px solid #F3F4F8;
padding: 20px 15px 15px 15px;
.title {
font-size: 15px;
color: #333;
display: inline-block;
}
.more {
color: #09f;
font-size: 12px;
float: right;
}
}
.all-course {
text-align: center;
padding-bottom: 30px;
margin-bottom: 50px;
p {
color: #555;
font-size: 15px;
margin-bottom: 10px;
}
span {
color: #999;
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
import React, { Component } from 'react';
class Index extends Component {
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
class Scroll extends Component {
render() {
return (
<div>
首页
</div>
)
<WingBlank>
<Carousel
autoplay={true}
infinite
>
{this.props.data.map(val => (
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: '100px' }}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
export default Index;
\ No newline at end of file
export default Scroll
src/components/Index/topscroll.js 0 → 100644
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
class TopScroll extends Component {
state = {}
render() {
return (
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={12}
slideWidth={0.9}
autoplay
infinite
beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
afterChange={index => this.setState({slideIndex: index})}
>
{this.props.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -10 : 0,
height: '168px',
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}}
>
<img
src={val.src}
alt=""
style={{width: '100%', verticalAlign: 'top'}}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({imgHeight: '168px'});
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
export default TopScroll
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