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 120 additions and 94 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.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