Skip to content

M
mr-julyedu
Commit 46feb184 by xuzhenghua
Options

6

parent 0531f09b
Showing with 284 additions and 3 deletions
src/components/Index/course.css 0 → 100644
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;}
li {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
}
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-price {
margin-top: 15px;
}
.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;
}
src/components/Index/course.js 0 → 100644
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
}
]
}
}
render() {
return (
<div>
<ul className="course-detail">
{
this.state.dataList.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">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
} else {
<a href="" className="isbuy">已购买</a>
}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Classify;
\ No newline at end of file
src/components/Index/index.css 0 → 100644
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';
class Index extends Component {
state = {
data: ['1', '2', '3'],
imgHeight: 176,
}
componentDidMount() {
// simulate img loading
setTimeout(() => {
this.setState({
data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
});
}, 100);
}
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="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>
</ul>
</div>
</div>
)
);
}
}
......
src/components/Index/scroll.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
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