Skip to content

M
mr-julyedu
Commit 8510ff53 by xuzhenghua
Options

课程组件

parent 6fddde37
Showing with 196 additions and 125 deletions
src/common/course/course.js deleted 100644 → 0
import React, {Component} from 'react';
import './course.scss';
class Course extends Component {
render() {
return (
<div>
<ul className="course-detail">
{
this.props.data.map((item, index) => {
return (
<li key={index}>
{this.props.top}
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
</a>
{this.props.bottom}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Course
src/common/course/course.scss
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
li {
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;
}
.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;
box-orient: vertical;
}
.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;
}
}
.course-item {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
position: relative;
img {
width: 100%;
height: 119px;
}
.isbuy {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
.course-title {
font-size: 14px;
color: $color_333;
line-height: 19px;
margin-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
\ No newline at end of file
}
src/common/course/index.js 0 → 100644
import React from 'react';
import './course.scss'
const Course = (props) => {
return (
<li className='course-item'>
{props.top}
<a href="">
<img src={props.data.src} alt=""/>
<p className="course-title">{props.data.title}</p>
</a>
{props.bottom}
</li>
);
};
export default Course;
src/common/index.js
// 底部路由
export { default as Nav } from './Nav'
export { default as VList } from './VList'
\ No newline at end of file
export { default as VList } from './VList'
export { default as Course } from './Course'
\ No newline at end of file
src/components/Index/index.js
import React, {Component} from 'react';
import Course from '../../common/course/course.js';
import {Course, VList} from '../../common'
import Scroll from '../../common/scroll/scroll.js';
import TopScroll from '../../common/scroll/topscroll.js';
import Carousel from '../../common/carousel/carousel.js';
......@@ -119,29 +119,106 @@ class Index extends Component {
</div>
<div className='category'>
<h2 className="title">新上好课</h2>
<Course data={this.state.dataList} top={
<span className='audition'>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
} bottom = {
<p>{top}</p>
}></Course>
)
const bottom = (
<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>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a>
<Scroll data={this.state.dataList} height='106px'></Scroll>
<Course data={this.state.dataList}></Course>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<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>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">基础入门</h2>
<a className="more" href="#">更多 ></a>
<Course data={this.state.dataList}></Course>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<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>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">就业班</h2>
<Course data={this.state.dataList}></Course>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<span className='audition'>
<i className={'iconfont iconerji'}></i>
试听
</span>
)
const bottom = (
<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>
// }
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className="category all-course">
<p>查看全部课程</p>
......
src/components/Index/index.scss
......@@ -2,16 +2,19 @@
overflow: hidden;
background-color: #fff;
}
.am-wingblank {
margin-top: 15px;
}
/*热门推荐轮播*/
.scroll {
width: 100%;
margin-left: 0!important;
margin-left: 0 !important;
margin-top: 12px;
margin-bottom: 5px;
}
/*
页面tab
*/
......@@ -20,12 +23,15 @@
height: 103px;
padding: 20px 17px;
margin-top: 50px;
ul {
display: flex;
justify-content: space-between;
text-align: center;
li {
width: 64px;
img {
width: 40px;
height: 40px;
......@@ -41,6 +47,7 @@
}
}
}
/*
近期直播
*/
......@@ -49,10 +56,11 @@
width: 301px;
height: 100%;
margin-right: 20px;
box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1);
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%;
......@@ -90,6 +98,7 @@
}
}
}
.vip {
width: 100%;
height: 106px;
......@@ -104,7 +113,6 @@
}
/*课程公共样式*/
.category {
width: 100%;
......@@ -123,6 +131,7 @@
float: right;
}
}
/*
底部查看所有课程
*/
......@@ -142,3 +151,62 @@
font-size: 12px;
}
}
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.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;
}
}
.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 {
display: inline-block;
margin-top: 15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
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