Skip to content

M
mr-julyedu
Commit e3f562e0 by xuzhenghua
Options

首页轮播

parent d65e40c9
Showing with 193 additions and 134 deletions
package.json
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,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-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",
"redux": "^4.0.1", "redux": "^4.0.1",
......
src/components/Index/animateTypes.js 0 → 100644
Object.defineProperty(exports, "__esModule", {
value: true
});
var DEFAULT = exports.DEFAULT = 'DEFAULT';
var ROLL = exports.ROLL = 'ROLL';
var CARD = exports.CARD = 'CARD';
console.log(DEFAULT,ROLL,CARD)
\ No newline at end of file
src/components/Index/createStyle.js 0 → 100644
Object.defineProperty(exports, "__esModule", {
value: true
});
var _animateTypes = require('./animateTypes');
var animateTypess = _interopRequireWildcard(_animateTypes);
var clientWidth = exports.clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
exports.default = function (animateTypes, stage, progress, duration) {
switch (animateTypes) {
case animateTypess.CARD:
switch (stage) {
case 'pre':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + -(clientWidth * 0.92 + progress) + 'px) scaleY(' + (0.92 + Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + 's',
zIndex: 2
};
case 'active':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + -progress + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.85) * 0.2)) + ')',
transitionDuration: duration + 's',
zIndex: 3
};
case 'next':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (clientWidth * 0.92 - progress) + 'px) scaleY(' + (0.92 + Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
case 'prePro':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (-(clientWidth * 1.7) - progress) + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
case 'nextPro':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (clientWidth * 1.7 - progress) + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
default: break;
}
break;
default: break;
}
};
\ No newline at end of file
src/components/Index/index.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Course} from '../../common' import {Course} from '../../common'
import Scroll from './scroll'
import Topscroll from './topscroll'
import './index.scss'; import './index.scss';
import {WithTab} from '@/HOCs' import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle'
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,
})); }));
} }
toSubscribe(){
toSubscribe() {
this.setState(status => ({ this.setState(status => ({
isshow: !status.isshow, isshow: !status.isshow,
toSubscribe: !status.toSubscribe toSubscribe: !status.toSubscribe
})); }));
} }
subscribeColse(){
subscribeColse() {
this.setState(status => ({ this.setState(status => ({
toSubscribe: !status.toSubscribe toSubscribe: !status.toSubscribe
})); }));
} }
iphoneStep(){
iphoneStep() {
this.setState(status => ({ this.setState(status => ({
step: 1 step: 1
})); }));
} }
serverStep(){
serverStep() {
this.setState(status => ({ this.setState(status => ({
step: 2 step: 2
})); }));
} }
submit(){
submit() {
this.setState(status => ({ this.setState(status => ({
success: true, success: true,
toSubscribe: !status.toSubscribe toSubscribe: !status.toSubscribe
})); }));
} }
state = { state = {
issubscribe: 0, issubscribe: 0,
toSubscribe: false, toSubscribe: false,
isfollow: true, isfollow: false,
isshow: true, isshow: false,
step: 0, step: 0,
success: false, success: false,
dataList: [ dataList: [
...@@ -106,19 +114,33 @@ class Index extends Component { ...@@ -106,19 +114,33 @@ class Index extends Component {
} }
] ]
} }
toSearch() { toSearch() {
window.location.href ='/search' window.location.href = '/search'
} }
render() { render() {
return ( return (
<div className='index-box'> <div className='index-box'>
<div className='header'> <div className='header'>
<img className="logo" src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt="" /> <img className="logo"
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/img/index/logo.png" alt=""/>
<button className='to-app'>在APP打开</button> <button className='to-app'>在APP打开</button>
<i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i> <i className='iconfont iconiconfront- search' onClick={this.toSearch.bind(this)}></i>
</div> </div>
<Topscroll data={this.state.dataList} height='155px' actheight='168px'></Topscroll> <div className='index-swiper'>
<Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}>
{this.state.dataList.map((item, index) => {
return (
<div key={index}>
<img className="item" src={item.src} alt=""/>
</div>
)
})
}
</Swiper>
</div>
<div className="tabbox"> <div className="tabbox">
<ul> <ul>
...@@ -199,7 +221,16 @@ class Index extends Component { ...@@ -199,7 +221,16 @@ class Index extends Component {
<div className='category'> <div className='category'>
<h2 className="title">热门推荐</h2> <h2 className="title">热门推荐</h2>
<a className="more" href="/#">更多 ></a> <a className="more" href="/#">更多 ></a>
<Scroll data={this.state.dataList} height='106px'></Scroll> <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'> <ul className='course-detail'>
{this.state.dataList.map((item, index) => { {this.state.dataList.map((item, index) => {
const top = ( const top = (
...@@ -303,7 +334,9 @@ class Index extends Component { ...@@ -303,7 +334,9 @@ class Index extends Component {
<div className='live-room-content'> <div className='live-room-content'>
<div className='course-banner'> <div className='course-banner'>
<div className='left'><span></span></div> <div className='left'><span></span></div>
<div className='center'><img src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" alt=""/></div> <div className='center'><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/></div>
<div className='right'><span></span></div> <div className='right'><span></span></div>
</div> </div>
<div className='course-dec'> <div className='course-dec'>
...@@ -341,22 +374,26 @@ class Index extends Component { ...@@ -341,22 +374,26 @@ class Index extends Component {
{ {
this.state.toSubscribe === true && this.state.toSubscribe === true &&
<div className='subscribe-box'> <div className='subscribe-box'>
{ this.state.step === 0 && {this.state.step === 0 &&
<div> <div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div> <div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='subscribe-content'> <div className='subscribe-content'>
<span className='title'>请选择即将直播时通知您的方式</span> <span className='title'>请选择即将直播时通知您的方式</span>
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.serverStep.bind(this)}>微信服务号通知</button> <button className={this.state.isfollow ? 'follow' : 'nofollow'}
onClick={this.serverStep.bind(this)}>微信服务号通知
</button>
{ {
this.state.isfollow === true && this.state.isfollow === true &&
<span className='tips'>关注服务号即代表预约成功</span> <span className='tips'>关注服务号即代表预约成功</span>
} }
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.iphoneStep.bind(this)}>手机短信通知</button> <button className={this.state.isfollow ? 'follow' : 'nofollow'}
onClick={this.iphoneStep.bind(this)}>手机短信通知
</button>
</div> </div>
</div> </div>
} }
{ this.state.step === 1 && {this.state.step === 1 &&
<div> <div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div> <div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content'> <div className='iphone-content'>
...@@ -367,11 +404,12 @@ class Index extends Component { ...@@ -367,11 +404,12 @@ class Index extends Component {
</div> </div>
</div> </div>
} }
{ this.state.step === 2 && {this.state.step === 2 &&
<div> <div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div> <div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content server-content'> <div className='iphone-content server-content'>
<p className='title'><i className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p> <p className='title'><i
className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p>
<p className='dec'>直播开始前会通过微信“服务通知”提醒您。 推荐预留手机号，届时可通过手机号登录直播 间直接学习：</p> <p className='dec'>直播开始前会通过微信“服务通知”提醒您。 推荐预留手机号，届时可通过手机号登录直播 间直接学习：</p>
<input type="text" placeholder='请输入手机号'/> <input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>提交</button> <button className='submit' onClick={this.submit.bind(this)}>提交</button>
......
src/components/Index/index.scss
...@@ -31,42 +31,69 @@ ...@@ -31,42 +31,69 @@
margin-top: -6px; margin-top: -6px;
} }
} }
.index-swiper {
.top-scroll {
touch-action: pan-y;
margin-top: 7px; margin-top: 7px;
height: 168px; height: 168px;
position: relative; .swiper-container {
height: 100%!important;
.am-wingblank.am-wingblank-lg { .swiper-slide {
margin: 0;
}
img { img {
width: 100%;
height: 168px;
border-radius: 6px; border-radius: 6px;
} }
}
.slider-decorator-0 { }
position: absolute; .swiper-pagination {
top: 125px; width: 100%;
left: 188px !important;
.am-carousel-wrap {
text-align: right; text-align: right;
padding-right: 50px; padding-right: 55px;
.pagination-item{
width: 8px !important;
height: 8px !important;
background-color: $bg_fff !important;
opacity: 0.5;
}
.active {
width: 18px!important;
height: 7px!important;
border-radius: 4px!important;
background-color: $bg_fff !important;
opacity: 1;
} }
} }
} }
/*热门推荐轮播*/
.scroll { /*热门推荐轮播*/
width: 100%; .category {
margin-left: 0 !important; .swiper-container {
margin-top: 12px; height: 106px !important;
margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
touch-action: pan-y; touch-action: pan-y;
border-radius: 3px;
.swiper-pagination {
bottom: 5px !important;
.pagination-item {
width: 8px !important;
height: 8px !important;
background-color: $bg_fff !important;
opacity: 0.5;
} }
.active {
background-color: $bg_fff !important;
opacity: 1;
}
}
}
}
/* /*
页面tab 页面tab
*/ */
...@@ -296,6 +323,7 @@ ...@@ -296,6 +323,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
.live-room-content { .live-room-content {
...@@ -565,23 +593,28 @@ ...@@ -565,23 +593,28 @@
margin-top: 20px; margin-top: 20px;
} }
} }
.server-content { .server-content {
height: 226px; height: 226px;
padding: 20px; padding: 20px;
.title { .title {
font-size: 18px; font-size: 18px;
color: $active; color: $active;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
i{
i {
font-size: 24px; font-size: 24px;
margin-right: 10px; margin-right: 10px;
} }
span { span {
position: relative; position: relative;
top: -3px; top: -3px;
} }
} }
.dec { .dec {
height: 53px; height: 53px;
} }
......
src/components/Index/scroll.js deleted 100644 → 0
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
export default class Scroll extends Component {
render() {
return (
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
>
{this.props.data.map(val => (
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
src/components/Index/topscroll.js deleted 100644 → 0
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
export default class Topscroll extends Component {
state = {
slideIndex:0
}
render() {
return (
<div className='top-scroll'>
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={10}
slideWidth={0.8}
autoplay
infinite
dotActiveStyle={{
width: '18px',
height: '8px',
background: '#fff',
borderRadius: '4px',
}}
afterChange={index => this.setState({ slideIndex: index })}
>
{this.props.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -6 : 0,
height: this.state.slideIndex === index ? this.props.actheight : this.props.height,
}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top', height: '100%' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
// this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
</div>
);
}
}
yarn.lock
...@@ -8593,6 +8593,13 @@ react-lifecycles-compat@^3.0.4: ...@@ -8593,6 +8593,13 @@ react-lifecycles-compat@^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"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-mobile-swiper@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/react-mobile-swiper/-/react-mobile-swiper-1.1.4.tgz#8b27359736254e54a663b1db79af622488195400"
integrity sha512-I4CZIh5muXaKInhsS/CcGYLZt9AZIb4CSgvIVnDUDrfzJSsZBh6AMPf3hQmHQFcAjDNxReCmOcrXzvwAlRDrVA==
dependencies:
prop-types "^15.7.2"
react-native-swipeout@^2.2.2: react-native-swipeout@^2.2.2:
version "2.3.6" version "2.3.6"
resolved "https://registry.yarnpkg.com/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa" resolved "https://registry.yarnpkg.com/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa"
......
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