Skip to content

M
mr-julyedu
Commit fd7e388a by zhanghaozhe
Options

Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu

parents e89a522f 43210bec
Showing with 230 additions and 259 deletions
package.json
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
"react-app-polyfill": "^0.2.2", "react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0", "react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"react-lazy-load": "^3.0.13",
"react-mobile-swiper": "^1.1.4", "react-mobile-swiper": "^1.1.4",
"react-redux": "^7.0.2", "react-redux": "^7.0.2",
"react-router-dom": "^5.0.0", "react-router-dom": "^5.0.0",
......
src/components/Index/index.js
...@@ -4,10 +4,12 @@ import './index.scss'; ...@@ -4,10 +4,12 @@ import './index.scss';
import {WithTab} from '@/HOCs' import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper' import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle' import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load';
const animateTypes = Swiper.animateTypes const animateTypes = Swiper.animateTypes
class Index extends Component { class Index extends Component {
liveColse() { liveColse() {
this.setState(status => ({ this.setState(status => ({
isshow: !status.isshow, isshow: !status.isshow,
...@@ -130,16 +132,7 @@ class Index extends Component { ...@@ -130,16 +132,7 @@ class Index extends Component {
</div> </div>
<div className='index-swiper'> <div className='index-swiper'>
<Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}> <TopSwiper datalist={this.state.dataList}/>
{this.state.dataList.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
</div> </div>
<div className="tabbox"> <div className="tabbox">
...@@ -158,27 +151,7 @@ class Index extends Component { ...@@ -158,27 +151,7 @@ class Index extends Component {
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">近期直播</h2> <h2 className="title">近期直播</h2>
<div className='scroll-box'> <ScrollBox dataList={this.state.dataList}/>
<ul className='scroll-list'>
{
this.state.dataList.map((item, index) => {
return (
<li key={index} className='scroll-item'>
<a href="/#">
<img className="item-img" src={item.src} alt=""/>
<div className="item-content">
<h2 className="item-title">{item.title}</h2>
<p className="item-teacher">讲师：{item.teacher}</p>
<p className="item-time">时间：{item.time}</p>
</div>
</a>
</li>
)
})
}
</ul>
</div>
<div className="category-vip"> <div className="category-vip">
<a href="/#"> <a href="/#">
<img <img
...@@ -187,142 +160,12 @@ class Index extends Component { ...@@ -187,142 +160,12 @@ class Index extends Component {
</a> </a>
</div> </div>
</div> </div>
<div className='category'>
<h2 className="title">新上好课</h2>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<div>
{item.isbuy === 1 &&
<span className='audition'>
<i className={'iconfont iconerji'}></i>试听</span>
}
</div>
)
const bottom = (
<div>
{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>
)
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>
<Swiper className='scroll' loop={true} type={animateTypes.DEFAULT} autoPlay>
{this.state.dataList.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<div>
{item.isbuy === 1 &&
<span className='audition'>
<i className={'iconfont iconerji'}></i>试听</span>
}
</div>
)
const bottom = (
<div>
{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>
)
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>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<div>
{item.isbuy === 1 &&
<span className='audition'>
<i className={'iconfont iconerji'}></i>试听</span>
}
</div>
)
const bottom = ( <CourseList courseList={this.state.dataList} title={'新上好课'} more={false} swiper={false}/>
<div> <CourseList courseList={this.state.dataList} title={'热门推荐'} more={true} swiper={true}/>
{item.isbuy === 0 && <p className="course-price"> <CourseList courseList={this.state.dataList} title={'基础入门'} more={true} swiper={false}/>
<span className="new">¥{item.price0}</span> <CourseList courseList={this.state.dataList} title={'就业班'} more={false} swiper={false}/>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className='category'>
<h2 className="title">就业班</h2>
<ul className='course-detail'>
{this.state.dataList.map((item, index) => {
const top = (
<div>
{item.isbuy === 1 &&
<span className='audition'>
<i className={'iconfont iconerji'}></i>试听</span>
}
</div>
)
const bottom = (
<div>
{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>
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</div>
<div className="category all-course"> <div className="category all-course">
<p>查看全部课程</p> <p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span> <span>数学基础、数学结构、大数据实战、Python...</span>
...@@ -428,4 +271,106 @@ class Index extends Component { ...@@ -428,4 +271,106 @@ class Index extends Component {
} }
function TopSwiper({datalist}){
return(
<Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}>
{datalist.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
)
}
function ContenSwiper({datalist}){
return(
<Swiper className='scroll' loop={true} type={animateTypes.DEFAULT} autoPlay>
{datalist.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
)
}
function CourseList({courseList,title,more,swiper}){
return(
<div className='category'>
<h2 className="title">{title}</h2>
{ more &&
<a className="more" href="/#">更多 ></a>
}
{
swiper &&
<ContenSwiper datalist={courseList}/>
}
<LazyLoad offset={50}
onContentVisible={() => console.log('就业班')}
>
<ul className='course-detail'>
{courseList.map((item, index) => {
const top = (
<div>
{item.isbuy === 1 &&
<span className='audition'>
<i className={'iconfont iconerji'}></i>试听</span>
}
</div>
)
const bottom = (
<div>
{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>
)
return (
<Course key={index} top={top} data={item} bottom={bottom}></Course>
)
})}
</ul>
</LazyLoad>
</div>
)
}
function ScrollBox({dataList}) {
return(
<div className='scroll-box'>
<ul className='scroll-list'>
{
dataList.map((item, index) => {
return (
<li key={index} className='scroll-item'>
<a href="/#">
<img className="item-img" src={item.src} alt=""/>
<div className="item-content">
<h2 className="item-title">{item.title}</h2>
<p className="item-teacher">讲师：{item.teacher}</p>
<p className="item-time">时间：{item.time}</p>
</div>
</a>
</li>
)
})
}
</ul>
</div>
)
}
export default WithTab(Index); export default WithTab(Index);
src/components/Index/index.scss
...@@ -31,11 +31,14 @@ ...@@ -31,11 +31,14 @@
margin-top: -6px; margin-top: -6px;
} }
} }
.index-swiper { .index-swiper {
margin-top: 7px; margin-top: 7px;
height: 168px; height: 168px;
.swiper-container { .swiper-container {
height: 100%!important; height: 100% !important;
.swiper-slide { .swiper-slide {
img { img {
width: 100%; width: 100%;
...@@ -44,21 +47,24 @@ ...@@ -44,21 +47,24 @@
} }
} }
} }
.swiper-pagination { .swiper-pagination {
width: 100%; width: 100%;
left: 188px !important; left: 188px !important;
text-align: right; text-align: right;
padding-right: 55px; padding-right: 55px;
.pagination-item{
.pagination-item {
width: 8px !important; width: 8px !important;
height: 8px !important; height: 8px !important;
background-color: $bg_fff !important; background-color: $bg_fff !important;
opacity: 0.5; opacity: 0.5;
} }
.active { .active {
width: 18px!important; width: 18px !important;
height: 7px!important; height: 7px !important;
border-radius: 4px!important; border-radius: 4px !important;
background-color: $bg_fff !important; background-color: $bg_fff !important;
opacity: 1; opacity: 1;
} }
...@@ -234,6 +240,7 @@ ...@@ -234,6 +240,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
background-color: $bg_fff;
.audition { .audition {
position: absolute; position: absolute;
...@@ -638,4 +645,14 @@ ...@@ -638,4 +645,14 @@
text-align: center; text-align: center;
line-height: 32px; line-height: 32px;
} }
//.LazyLoad {
// // width: 100%;
// // min-height: 100px;
// // background: url('http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png') no-repeat;
// // background-position: center;
// //}
// //.is-visible {
// // background-image: none;
// //}
} }
src/components/classify/courselist.js
...@@ -37,10 +37,11 @@ class Classify extends Component { ...@@ -37,10 +37,11 @@ class Classify extends Component {
} }
toSearch() { toSearch() {
window.location.href ='/search' window.location.href = '/search'
} }
return() { return() {
window.location.href ='/classify' window.location.href = '/classify'
} }
state = { state = {
...@@ -412,38 +413,33 @@ class Classify extends Component { ...@@ -412,38 +413,33 @@ class Classify extends Component {
</div> </div>
<div className='mbc-box' style={{display: this.state.display}}> <div className='mbc-box' style={{display: this.state.display}}>
<div className="tabcontent"> <div className="tabcontent">
<div className="class-course"> <ClassCourse data={this.state.dataList} title={'基础入门'} onclick={this.labelclick.bind(this)}/>
<p className='course-items-title'>基础入门</p> <ClassCourse data={this.state.dataList} title={'进阶提高'} onclick={this.labelclick.bind(this)}/>
<div className='items-box'>
{
this.state.dataList.map((item, index) => {
return (
<span key={index} onClick={this.labelclick.bind(this, item.title)}
className='item-label'>{item.title}</span>
)
})
}
</div>
</div>
<div className="class-course">
<p className='course-items-title'>进阶提高</p>
<div className='items-box'>
{
this.state.dataList.map((item, index) => {
return (
<span key={index} onClick={this.labelclick.bind(this, item.title)}
className='item-label'>{item.title}</span>
)
})
}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
) )
} }
} }
function ClassCourse({data, title, onclick}) {
return (
<div className="class-course">
<p className='course-items-title'>{title}</p>
<div className='items-box'>
{
data.map((item, index) => {
return (
<span key={index} onClick={onclick}
className='item-label'>{item.title}</span>
)
})
}
</div>
</div>
)
}
export default Classify; export default Classify;
src/components/classify/index.js
...@@ -47,67 +47,10 @@ class Classify extends Component { ...@@ -47,67 +47,10 @@ class Classify extends Component {
return ( return (
<div className='class-box'> <div className='class-box'>
<div className="class-title">分类</div> <div className="class-title">分类</div>
<div className="class-course"> <ClassCourseBox data={this.state.dataList} title={'集训营'} type={1}/>
<p className='course-items-title'><img <ClassCourseBox data={this.state.dataList} title={'就业班'} type={1}/>
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" <ClassCourseBox data={this.state.dataList} title={'基础入门'} type={2}/>
alt=""/>集训营</p> <ClassCourseBox data={this.state.dataList} title={'进阶提高'} type={2}/>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="/classify/courselist" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
})
}
</div>
</div>
<div className="class-course">
<p className='course-items-title'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/>就业班</p>
<div className='items-box'>
{
this.state.dataList.map((item,index)=>{
return (
<a href="/#" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
})
}
</div>
</div>
<div className="class-course">
<p className='course-items-title'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/>基础入门</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'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/>进阶提高</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="vip"> <div className="vip">
<a href="/#"> <a href="/#">
<img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/> <img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/>
...@@ -116,7 +59,51 @@ class Classify extends Component { ...@@ -116,7 +59,51 @@ class Classify extends Component {
</div> </div>
) )
} }
}
function ClassCourseA({data}) {
return(
<div className='items-box'>
{
data.map((item,index)=>{
return (
<a href="/courselist" key={index} className='item-banner'><img
src={item.src}
alt=""/></a>
)
})
}
</div>
)
} }
function ClassCourseB({data}) {
return(
<div className='items-box'>
{
data.map((item,index)=>{
return (
<a href="/#" key={index} className='item-label'>{item.title}</a>
)
})
}
</div>
)
}
function ClassCourseBox({data,title,type}) {
return(
<div className="class-course">
<p className='course-items-title'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/>{title}</p>
{ type === 1 &&
<ClassCourseA data={data}/>
}
{ type === 2 &&
<ClassCourseB data={data}/>
}
</div>
)
}
export default WithTab(Classify); export default WithTab(Classify);
yarn.lock
...@@ -3772,6 +3772,11 @@ eventemitter3@^3.0.0: ...@@ -3772,6 +3772,11 @@ eventemitter3@^3.0.0:
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA== integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==
eventlistener@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/eventlistener/-/eventlistener-0.0.1.tgz#ed2baabb852227af2bcf889152c72c63ca532eb8"
integrity sha1-7Suqu4UiJ68rz4iRUscsY8pTLrg=
events@^3.0.0: events@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88" resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
...@@ -6246,6 +6251,11 @@ lodash.clonedeep@^4.3.2: ...@@ -6246,6 +6251,11 @@ lodash.clonedeep@^4.3.2:
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
lodash.debounce@^4.0.0:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.isarguments@^3.0.0: lodash.isarguments@^3.0.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
...@@ -6300,6 +6310,11 @@ lodash.templatesettings@^4.0.0: ...@@ -6300,6 +6310,11 @@ lodash.templatesettings@^4.0.0:
dependencies: dependencies:
lodash._reinterpolate "~3.0.0" lodash._reinterpolate "~3.0.0"
lodash.throttle@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.uniq@^4.5.0: lodash.uniq@^4.5.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
...@@ -8588,6 +8603,16 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: ...@@ -8588,6 +8603,16 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
react-lazy-load@^3.0.13:
version "3.0.13"
resolved "https://registry.yarnpkg.com/react-lazy-load/-/react-lazy-load-3.0.13.tgz#3b0a92d336d43d3f0d73cbe6f35b17050b08b824"
integrity sha1-OwqS0zbUPT8Nc8vm81sXBQsIuCQ=
dependencies:
eventlistener "0.0.1"
lodash.debounce "^4.0.0"
lodash.throttle "^4.0.0"
prop-types "^15.5.8"
react-lifecycles-compat@^3.0.4: react-lifecycles-compat@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
......
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