Skip to content

M
mr-julyedu
Commit fd5ee061 by zhanghaozhe
Options

study

parent 826ef9ae
Showing with 304 additions and 56 deletions
src/components/study/free-courses/free-courses.scss 0 → 100644
.free-courses {
padding: 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.state {
box-sizing: border-box;
border-radius: 0 10px 10px 0;
padding: 1px 5px;
}
.top {
position: absolute;
top: 10px;
left: 0;
}
.tag-starting {
background: $red;
color: $white;
}
.tag-category {
background: #E0B97B;
color: $white;
}
.course-item {
margin-top: 0;
margin-bottom: 16px;
.course-title {
margin-top: 0;
line-height: 34px;
}
.bottom {
display: flex;
justify-content: space-between;
}
}
}
\ No newline at end of file
src/components/study/free-courses/index.js 0 → 100644
import React from 'react'
import { Course } from '../../../common'
import './free-courses.scss'
const mockData = [
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
{
tagText: '机器学习',
tagType: 1,
title: '16年度最火课程TOP10',
src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
},
]
const Tag = (props) => {
return (
<span className={`state ${props.className}`}>
{props.children}
</span>
)
}
const Bottom = (props) => (
<div className='bottom'>
<Tag className={props.className}>{props.tagText}</Tag>
<span>{props.audience}人观看</span>
</div>
)
const FreeCourse = (props) => {
return (
<ul className='free-courses'>
{
mockData.map((item, index) => (
<Course
data={item}
top={
<Tag className={'tag-starting top'}>即将开始</Tag>
}
bottom={
<Bottom audience={232} className={'tag-category'} tagText={item.tagText}></Bottom>
}
key={index}
>
</Course>
))
}
</ul>
)
}
export default FreeCourse
\ No newline at end of file
src/components/study/index.js
......@@ -2,8 +2,11 @@ import React, { Component } from 'react'
import './study.scss'
import { Flex } from 'antd-mobile'
import { NavLink, Route, Switch } from "react-router-dom";
import MyCourses from "./my-courses";
import { NavLink, Route, Switch } from "react-router-dom"
import MyCourses from "./my-courses"
import FreeCourses from './free-courses'
......@@ -21,14 +24,12 @@ class Study extends Component {
<NavLink to={`${match.url}/free-course`} activeClassName='active'>免费课程</NavLink>
</Flex.Item>
</Flex>
<Switch>
<Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
<Route path={`${this.props.match.path}/free-course`} render={() => {
return (
<div>bbb</div>
)
}}/>
</Switch>
<div className="study-container">
<Switch>
<Route path={`${this.props.match.path}/my-course`} component={MyCourses}/>
<Route path={`${this.props.match.path}/free-course`} component={FreeCourses}/>
</Switch>
</div>
</section>
)
}
......
src/components/study/my-courses/index.js
import React from "react"
import { VList } from '../../../common'
import './my-courses.scss'
const mockData = [
{
......@@ -32,27 +33,55 @@ const mockData = [
},
]
export default function MyCourses(props) {
function AddCourse(props) {
return (
<div className='add-course'>
<button className='add' onClick={props.addCourseClick}>添加课程+</button>
</div>
)
}
export default function MyCourses() {
const handleClick = () => {
console.log(1);
}
return (
<ul>
{mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact'>{item.contact}</p>
<p className='des'>
<span className='time'>{item.time}</span>
<span className='record'>{item.record}</span>
</p>
</div>
)
return (
<VList handleClick={handleClick} {...item} key={index} info={Info}></VList>
)
})}
</ul>
)
const addCourseClick = () => {
console.log(2);
}
if(mockData.length !== 0){
return (
<>
<ul>
{
mockData.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact'>{item.contact}</p>
<p className='des'>
<span className='time'>{item.time}</span>
<span className='record'>{item.record}</span>
</p>
</div>
)
return (
<VList handleClick={handleClick} {...item} key={index} info={Info}></VList>
)
})
}
</ul>
<AddCourse addCourseClick={addCourseClick}/>
</>
)
}else {
return (
<div className="empty">
<p><i className='iconfont iconfish'></i></p>
<p className='empty-prompt'>还是咸鱼一条，快去翻身~</p>
<p><button>去选课</button></p>
</div>
)
}
}
\ No newline at end of file
src/components/study/my-courses/my-courses.scss 0 → 100644
.info {
display: flex;
flex-wrap: wrap;
.title {
font-size: 15px;
font-weight: 400;
}
.contact {
font-size: 13px;
color: $red;
}
.des {
align-self: center;
color: $color_999;
font-size: 11px;
.time {
margin-right: 10px;
}
}
}
.add-course {
padding: 10px 12px;
button.add {
width: 150px;
height: 108px;
font-size: 15px;
font-family: HiraginoSansGB-W3;
font-weight: normal;
color: $active;
border: 1px dashed $active;
background: transparent;
}
}
.empty {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 140px;
background: $bg_f5f5f5;
.iconfish {
width: 20px;
height: 20px;
color: #1a4263;
}
.empty-prompt {
margin-bottom: 30px;
font-size: $font_12;
color: $color_666;
}
button{
width:131px;
height:30px;
border:1px solid $active;
border-radius:15px;
background: transparent;
color: $active;
font-size: $font_16;
}
}
\ No newline at end of file
src/components/study/study.scss
......@@ -4,6 +4,7 @@ $tabFontSize: 15px;
#study {
height: 100%;
background: $bg_fff;
overflow: auto;
.tab {
height: $tabHeight;
......@@ -18,33 +19,13 @@ $tabFontSize: 15px;
}
}
.study-container {
height: calc(100% - 50px - 44px);
overflow-y: auto;
}
.active {
color: $active;
border-bottom: 1px solid $active;
}
.info {
display: flex;
flex-wrap: wrap;
.title {
font-size: 15px;
font-weight: 400;
}
.contact {
font-size: 13px;
color: $red;
}
.des {
align-self: center;
color: $color_999;
font-size: 11px;
.time {
margin-right: 10px;
}
}
}
}
\ No newline at end of file
src/font/iconfont.eot
No preview for this file type
src/font/iconfont.ttf
No preview for this file type
src/font/iconfont.woff
No preview for this file type
src/font/iconfont.woff2
No preview for this file type
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