Skip to content

M
mr-julyedu
Commit 386f09e0 by xuzhenghua
Options

分类一部分

parent 9dbae6e5
Showing with 225 additions and 29 deletions
src/components/Index/index.js
......@@ -105,7 +105,7 @@ class Index extends Component {
})
}
</Carousel>
<div className="vip">
<div className="category-vip">
<a href="/#">
<img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
......
src/components/Index/index.scss
......@@ -117,7 +117,7 @@
}
}
.vip {
.category-vip {
width: 100%;
height: 106px;
border-radius: 5px;
......
src/components/classify/courselist.js
import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace} from 'antd-mobile';
import './courselist.scss';
class Classify extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.ontabclick = this.ontabclick.bind(this)
}
handleClick() {
console.log(1);
}
ontabclick(tab, index) {
console.log(tab, index)
}
pulldown(){
alert(2)
}
state = {
mockData:[
mockData: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
......@@ -45,38 +62,126 @@ class Classify extends Component {
price0: 100,
price1: 100
},
],
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Spark大数据',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'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': 'Linux',
'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': 200,
'price1': 2000
}
]
}
render() {
const handleClick = () => {
console.log(1);
}
const tabs = [
{title: '机器学习'},
{title: '数学'},
{title: 'Linux'},
{title: '深度学习'},
{title: '数据结构'},
{title: 'Linux'},
{title: '数据结构'},
{title: '数学'},
];
return (
<div className='class-box'>
<ul>
{this.state.mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
<div>
<WhiteSpace/>
<i className={'iconfont iconiconfront-69 pull-down'} onClick={this.pulldown.bind(this)}></i>
<Tabs
tabs={tabs}
animated={false}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
return (
<VList handleClick={this.handleClick} key={index} info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
<div className='mbc-box'>
<div className="tabcontent">
<div className="class-course">
<p className='course-items-title'>基础入门</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="/#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div>
</div>
<div className="class-course">
<p className='course-items-title'>进阶提高</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="/#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div>
)
return (
<VList handleClick={handleClick} key={index} info={Info}></VList>
)
})}
</ul>
</div>
</div>
</div>
</div>
)
}
......
src/components/classify/courselist.scss
.class-box {
padding: 0 12px;
position: relative;
.v-list-item {
padding: 10px 0 0;
.content {
border: none;
.cover {
flex: inherit;
width: 42.2%;
img {
width: 100%;
}
......@@ -14,6 +20,7 @@
.info {
width: 52.3%;
position: relative;
.title {
font-size: 16px;
color: $color_333;
......@@ -21,14 +28,17 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.new {
color: $red;
......@@ -59,4 +69,84 @@
}
}
.tabs {
display: flex;
margin-top: 10px;
}
.pull-down {
width: 32px;
position: absolute;
top: 12px;
right: 0;
z-index: 2;
background-color: $bg_fff;
color: $color_666;
}
.mbc-box {
position: fixed;
left: 0;
top: 53px;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
.tabcontent {
width: 100%;
height: 303px;
overflow: auto;
background-color: $bg_fff;
border-top: 1px solid $sp_ddd;
padding-bottom: 30px;
.class-course {
width: 100%;
margin-top: 20px;
padding: 0 15px;
.course-items-title {
font-size: 13px;
color: $color_333;
}
.items-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item-banner {
display: inline-block;
width: 30.5%;
height: 76px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
}
.item-label {
display: inline-block;
width: 30.5%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: $bg_f4f4f4;
border-radius: 15px;
margin-top: 15px;
margin-bottom: -5px;
}
}
}
}
}
}
html:not([data-scale]) .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff;
}
.am-tabs-tab-bar-wrap {
padding-right: 30px;
}
\ 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