Skip to content

M
mr-julyedu
Commit 641df1d2 by zhanghaozhe
Options

答题页布局

parent 68e66bf0
Showing with 1155 additions and 867 deletions
src/components/activity/2020-717/activity/index.js 0 → 100644
import React, { Component } from 'react';
import { debounce, groupBy, isEmpty } from "lodash";
import { http } from "@/utils"
import { Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import './index.scss'
import { Popup } from "@common/index"
class Anniversary2020 extends Component {
nav = null
stages = {
1: '基础',
2: '进阶',
3: '高阶',
4: '拓展',
}
stageParams = ['one', 'two', 'three', 'four']
records = null
answerRule = `
1.邀请好友加入队伍，好友答对题你和好友均可增加抽奖机会
2.每增加3个队员答对题，你可以增加N次抽奖机会，N=1 ,2, 3 (有3个队员答对题，你可+1次抽奖机会；6个队员答对题，你再+2次抽奖机会，超过6个队员答对题时，每+3人答对题都可+3次抽奖机会)
3.被邀请好友答对题TA可+1次抽奖机会
4.每人只能当1次队员哦
`
state = {
navs: [
{
text: '一分拼团',
id: '#group',
},
{
text: '抽华为P40Pro+',
id: '#lottery',
},
{
text: '组队答题',
id: '#group-answer',
},
{
text: '免费试听',
id: '#audition',
},
{
text: '冰点秒杀',
id: '#stage-course',
},
],
titleImages: [
require('../images/title_1.png'),
require('../images/title_2.png'),
require('../images/title_3.png'),
require('../images/title_4.png'),
require('../images/title_5.png'),
],
rankIcons: [
require('../images/rank1.png'),
require('../images/rank2.png'),
require('../images/rank3.png'),
],
navActive: 0,
sectionsPosition: [],
auditions: [],
auditionShowAll: false,
group: [],
groupShowAll: false,
stageCourses: [],
activityData: {},
team: {},
userAddress: {
name: '',
phone: '',
address: '',
},
isShowUserAddress: false,
prizeData: {},
prizeRecords: [],
prizeRecordsPagination: 0,
isShowPrizesRecords: false,
}
componentDidMount() {
this.getActivityStage()
this.getTeam()
this.getUserAddress()
this.getPrizeData()
this.getPrizeRecords()
this.getAuditionCourses()
this.getGroupCourses()
this.getStageCourses('zero')
}
componentDidUpdate(prevProps, prevState) {
if (prevState.navActive !== this.state.navActive) {
this.showActiveNav()
}
}
getActivityStage = () => {
http.get(`${API.home}/activity/anniversary/activityStage`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
activityData: data,
}, this.bindNavAction);
} else {
Toast.info(msg)
}
})
}
getAuditionCourses = () => {
http.get(`${API.home}/activity/anniversary/big_course`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
auditions: data,
}, this.bindNavAction);
} else {
Toast.info(msg)
}
return 1
})
}
getGroupCourses = () => {
http.get(`${API.home}/activity/anniversary/point_course`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
group: data,
});
} else {
Toast.info(msg)
}
})
}
getStageCourses = (key) => {
http.get(`${API.home}/activity/anniversary/four_stage/${key}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState(state => {
if (key === 'zero') {
return {
stageCourses: groupBy(data, item => {
return item.stage
}),
}
} else {
const index = this.stageParams.findIndex(item => item === key) + 1
state.stageCourses[index] = data
return {
stageCourses: state.stageCourses,
}
}
}, this.bindNavAction)
} else {
Toast.info(msg)
}
})
}
getPrizeData = () => {
http.get(`${API.home}/activity/anniversary/prize_data`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
prizeData: data,
})
} else {
Toast.info(msg)
}
})
}
getTeam = () => {
http.get(`${API.home}/activity/anniversary/teamInfo`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
team: data,
}, this.bindNavAction);
} else {
Toast.info(msg)
}
})
}
getPrizeRecords = (() => {
let hasMore = true, isFetching = false
return () => {
if (isFetching || !hasMore) {
return
}
isFetching = true
http.get(`${API.home}/activity/anniversary/user_prizes/${this.state.prizeRecordsPagination}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
if (isEmpty(data)) {
hasMore = false
}
const _records = Array.isArray(data) ? data : []
this.setState(state => {
return {
prizeRecords: [...state.prizeRecords, ..._records],
prizeRecordsPagination: state.prizeRecordsPagination + 1,
}
}, () => {
setTimeout(() => {
isFetching = false
}, 100)
});
} else {
Toast.info(msg)
}
})
}
})()
handleRecordsScroll = debounce((e) => {
let scrollTop = e.target.scrollTop, scrollHeight = e.target.scrollHeight, height = e.target.clientHeight
if (scrollTop > scrollHeight - height - 120) {
this.getPrizeRecords()
}
}, 16)
componentWillUnmount() {
document.removeEventListener('scroll', this.setNavActive)
document.body.style.overflow = 'auto'
}
handleChange = e => {
let name = e.target.name, value = e.target.value
this.setState(state => {
return {
userAddress: {...state.userAddress, ...{[name]: value}},
}
});
}
submitUserAddress = () => {
http.post(`${API.home}/sys/update_address`, this.state.userAddress)
.then(res => {
const {code, msg} = res.data
if (code === 200) {
Toast.info('提交成功')
this.setState({
isShowUserAddress: false,
});
} else {
Toast.info(msg)
}
})
}
getUserAddress = () => {
http.get(`${API.home}/sys/user_address_info`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
userAddress: data,
});
}
})
}
bindNavAction = () => {
document.removeEventListener('scroll', this.setNavActive)
this.setNavActive()
this.setState({
sectionsPosition: this.state.navs.map(item => {
const el = document.querySelector(item.id)
return {
top: el.offsetTop - 50,
height: el.offsetHeight,
}
}),
}, () => {
document.addEventListener('scroll', this.setNavActive)
})
}
setNavActive = debounce(() => {
const {navActive, sectionsPosition} = this.state
const pageY = window.pageYOffset
for (let i = navActive; i < sectionsPosition.length; i++) {
const section = sectionsPosition[i]
const nextSection = sectionsPosition[i + 1]
const prevSection = i > 0 && sectionsPosition[i - 1]
if (pageY > section.top + section.height && nextSection) {
if (pageY < nextSection.top || pageY < nextSection.top + nextSection.height) {
this.setState({
navActive: i + 1,
});
break
}
} else {
if (pageY < section.top + section.height && prevSection && pageY < prevSection.top + prevSection.height) {
this.setState({
navActive: i - 1 ? i - 1 : 0,
})
break
}
}
}
}, 1000 / 60)
showRule = (content) => {
this.popupInstance = Popup({
className: 'rule-popup',
title: '活动规则',
content,
})
}
showActiveNav = () => {
const listItems = this.nav.querySelectorAll('li')
const activeItem = listItems[this.state.navActive]
const box = activeItem.getBoundingClientRect()
let offsetWidth = this.nav.offsetWidth, scrollLeft = this.nav.scrollLeft
if (box.left < 0) {
this.nav.scrollLeft = box.left
} else if (box.right > offsetWidth + scrollLeft) {
this.nav.scrollLeft = box.right
}
}
draw = () => {
}
render() {
const {
navs,
navActive,
titleImages,
rankIcons,
auditions,
auditionShowAll,
group,
groupShowAll,
stageCourses,
activityData,
team,
userAddress,
isShowUserAddress,
prizeData,
isShowPrizesRecords,
prizeRecords,
} = this.state
const {history} = this.props
const _auditions = auditionShowAll && auditions.length ? auditions : auditions.slice(0, 4)
const _group = groupShowAll && group.length ? group : group.slice(0, 4)
return (
<div className={'anniversary-2020'}>
<div className="banner">
<img src="" alt=""/>
</div>
<nav ref={el => this.nav = el}>
<ul>
{
navs.map((item, index) => {
return <li key={index} className={index === navActive ? 'active' : ''}>
<a href='javascript:void(0);' onClick={() => {
this.setState({
navActive: index,
});
window.scrollTo(0, this.state.sectionsPosition[index].top)
}}>{item.text}</a>
</li>
})
}
</ul>
</nav>
<section id={'group'} className="group block">
<h2 className="block-title"
style={{background: `url(${titleImages[0]}) no-repeat`, backgroundSize: 'contain'}}></h2>
<ul className={'course-container'}>
{
!!_group.length && _group.map((item, index) => {
let Button
if (activityData.stage === 1) {
Button = <button className={'unavailable'}>7月15日开始</button>
} else if (activityData.stage === 2) {
switch (item.is_assemble) {
case 0:
Button = <button className="main"><Link to={`/detail?id=${item.course_id}`}>立即拼团</Link></button>
break
case 1:
Button = <button className="main"><Link to={`/detail?id=${item.course_id}`}>继续拼团</Link></button>
break
default:
Button =
<button className={'study'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link></button>
}
} else {
Button = <button className={'unavailable'}>活动已结束</button>
}
return <li className={'course'} key={index} onClick={(e) => {
let nodeName = e.target.nodeName.toLowerCase()
if (nodeName !== 'a' || nodeName !== 'button') {
history.push(`/detail?id=${item.course_id}`)
}
}}>
<div className="cover">
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.is_buy
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div>
}
<div className="btn">
{Button}
</div>
</div>
</li>
})
}
{
group.length > 4 &&
<li>
<button className={'show-more'} onClick={() => {
this.setState({
groupShowAll: true,
})
}}>查看更多
</button>
</li>
}
</ul>
</section>
<section id={'lottery'} className={'lottery block'}>
<div className="block-title"
style={{background: `url(${titleImages[1]}) no-repeat`, backgroundSize: 'contain'}}></div>
<div className="rule">
<a href="javascript:void(0);" onClick={this.showRule.bind(this, prizeData.rule)}>规则</a>
</div>
<div className="prize-container">
<div className={'h-bar'}></div>
<div className={'h-bar'}></div>
<div className={'v-bar'}></div>
<div className={'v-bar'}></div>
<ul className="prizes">
{
Array(9).fill('a').map((item, index) => {
return <li key={index}
className={index === 4 ? (prizeData.odd_times ? 'available' : 'unavailable') : ''}>
{
index !== 4
? <div className={'prize'}>
<img src="" alt=""/>
</div>
: activityData.stage === 1 ?
<div className={'draw'} style={{lineHeight: '350%'}}>7月15日开始</div> : <div className={'draw'}>
<div>抽奖</div>
<div>剩余{prizeData.odd_times || 0}次机会</div>
</div>
}
</li>
})
}
</ul>
</div>
<div className="content">
<div className={'operations'}>
<a href="javascript:void(0);" onClick={() => {
this.setState({
isShowUserAddress: true,
})
}}>收货信息</a>
<a href="javascript:void(0);" onClick={() => {
document.body.style.overflow = 'hidden'
this.setState({
isShowPrizesRecords: true,
}, () => {
this.records && this.records.addEventListener('scroll', this.handleRecordsScroll)
});
}}>中奖纪录</a>
</div>
<div className="lottery-info">
<div className={'title'}><i></i>如何获取更多抽奖机会？</div>
<ul className={'rules'}>
{
prizeData.more_rule && prizeData.more_rule.split('\n').map((item, index) => {
return <li key={index}>
<span className={'index'}>{index + 1}</span>
{item}
</li>
})
}
</ul>
</div>
</div>
</section>
<section id={'group-answer'} className={'group-answer block'}>
<div className="block-title" style={{background: `url(${titleImages[2]})`, backgroundSize: 'contain'}}></div>
<div style={{textAlign: 'center', marginBottom: '10px'}}>
<a className="rule-btn" href="javascript:void(0);"
onClick={this.showRule.bind(this, this.answerRule)}>规则</a>
</div>
<div className="content">
<div className="team">
<div className="func">
<i className={'my-team-icon'}></i>
<div className="summary">
<span>共<span className={'count'}>{team.people_num}</span>人</span>
<span>排名<span className={'count'}>{team.ranking}</span></span>
</div>
<ul>
{
!!team.team_info && team.team_info.length && team.team_info.map((item, index) => {
return <li key={index}>
<img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
alt=""/>
</li>
})
}
{
activityData.stage !== 1 && <li className={'more'}>更多</li>
}
</ul>
<div className="invite">
{
activityData.stage === 1 ? <button className={'invite'}>7月15日开始</button> :
<button className={'invite'}>邀请好友加入队伍</button>
}
</div>
</div>
<div className="des">
<div className="title">组队答题抽奖</div>
<ol>
<li>
1. 邀请好友加入队伍，好友答对题可获得一次抽奖机会；
</li>
<li>
2. 每3个队员答对题，你可以获得N次抽奖机会，N=1，2，3（上限）。
</li>
</ol>
</div>
</div>
<div className="exercise">
<div className="func">
{
activityData.stage === 1
? <div className="btn">
<button>7月15日开始</button>
</div>
: <>
<div className="btn">
<button><i></i>开始练习</button>
</div>
< div className="chance">今日剩余<span>{activityData.practice_num}</span>次</div>
</>
}
</div>
<div className="des">
<div className="title">练一练</div>
<ol>
<li>1. 每日可练习 2 次 。每次 1 道题，从题库中随机抽取；</li>
<li> 2. 答对可增加1次抽奖机会。</li>
</ol>
</div>
</div>
<div className="rank-list">
<div className="title">测试排行榜</div>
<div className="description">仅展示前50名，队员越多、用时越短排名越靠前</div>
<div className="prize-display">
<ul>
<li className={'top-three'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top1.png" alt=""/>
</li>
<li className={'top-three'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top2.png" alt=""/>
</li>
<li className={'top-three'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top3.png" alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top4%EF%BD%9E7.png"
alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top8%EF%BD%9E15.png"
alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top16%EF%BD%9E30.png"
alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top31%EF%BD%9E50.png"
alt=""/>
</li>
</ul>
</div>
{
prizeData.stage !== 1 && <table>
<thead>
<tr>
<th>名次</th>
<th>队长</th>
<th>队员</th>
<th>奖品</th>
</tr>
</thead>
<tbody>
{
Array(5).fill('a').map((item, index) => {
return <tr key={index}>
<td>
{
index < 3 ? <img src={rankIcons[index]} alt=""/> : index + 1
}
</td>
<td>
<img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
alt="" className={'avatar'}/>
限制宽度比例限制宽度比例
</td>
<td>723</td>
<td>最多就显示这么多几个字吧</td>
</tr>
})
}
</tbody>
</table>
}
<div className="btn">
<button>查看更多</button>
</div>
</div>
</div>
</section>
<section id={'audition'} className={'audition'}>
<div className="block-title"
style={{background: `url(${titleImages[3]}) no-repeat`, backgroundSize: 'contain'}}></div>
<ul className="course-container">
{
!!_auditions.length && _auditions.map((item, index) => {
return <li className={'course'} key={index} onClick={(e) => {
if (e.target.nodeName.toLowerCase() !== 'a') {
history.push(`/detail?id=${item.course_id}`)
}
}}>
<div className="cover">
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.is_buy
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div>
}
<div className="btn">
{
item.is_buy
?
<button className={'study-btn'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link></button>
: <button className="audition-btn"><a
href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">免费试听</a></button>
}
{
!!item.is_dist &&
<button><Link to={`/detail?id=${item.course_id}`}>赚{item.dist_amount}元</Link></button>
}
</div>
</div>
</li>
})
}
{
auditions.length > 4 &&
<li>
<button className={'show-more'} onClick={() => {
this.setState({
auditionShowAll: true,
});
}}>查看更多
</button>
</li>
}
</ul>
</section>
<section id={'stage-course'} className={'stage-course'}>
<div className="block-title"
style={{background: `url(${titleImages[4]}) no-repeat`, backgroundSize: 'contain'}}></div>
<div className="course-container">
{
!isEmpty(stageCourses) && Object.keys(stageCourses).map(key => {
return <ul key={key}>
<li><span className={'stage'}>{this.stages[key]}</span></li>
{
!!stageCourses[key].length && stageCourses[key].map((item, index) => {
let Button = null
if (activityData.stage === 1) {
Button = <button className={'unavailable'}>7月15日开始</button>
} else if (activityData.stage === 2) {
switch (item.type) {
case 0:
Button = <button>立即报名</button>
break
case 1:
Button =
<button className={'study-btn'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link>
</button>
break
case 2:
Button = <button><Link to={`/detail?id=${item.course_id}`}>立即拼团</Link></button>
break
case 3:
Button = <button><Link to={`/detail?id=${item.course_id}`}>继续参团</Link></button>
break
case 4:
Button = <button><Link to={`/detail?id=${item.course_id}`}>继续砍价</Link></button>
break
case 5:
Button = <button><Link to={`/detail?id=${item.course_id}`}>我要砍价</Link></button>
break
}
} else {
Button = <button className={'unavailable'}>活动已结束</button>
}
return <li className={'course'} key={index}>
<div className="cover">
{
item.save && <span>立省{item.save}元</span>
}
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.type === 1
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price0}</span>
<span>¥{item.price1}</span>
</div>
}
<div className="btn">
{Button}
{
!!item.is_dist && <button>赚{item.dist_amount}元</button>
}
</div>
</div>
</li>
})
}
{
stageCourses[key].length === 4 && <li className={'show-more-box'}>
<button className={'show-more'}
onClick={() => this.getStageCourses(this.stageParams[key - 1])}>查看更多
</button>
</li>
}
</ul>
})
}
</div>
</section>
{
isShowUserAddress &&
<div className="modal-cover">
<div className="modal recipient">
<h4 className="title">收货信息</h4>
<div className="tip">获奖用户（以最终榜单为准）请及时填写收货信息</div>
<input type="text" name={'name'} value={userAddress.name} placeholder={'收件人'}
onChange={this.handleChange}/>
<input type="text" name={'phone'} value={userAddress.phone} placeholder={'联系方式'}
onChange={this.handleChange}/>
<input type="text" name={'address'} value={userAddress.address} placeholder={'收货地址'}
onChange={this.handleChange}/>
<button disabled={!userAddress.name || !userAddress.phone || !userAddress.address}
onClick={this.submitUserAddress}>提交
</button>
<i className={'iconfont iconiconfront-2 close'} onClick={() => {
this.setState({
isShowUserAddress: false,
})
}}></i>
</div>
</div>
}
{
isShowPrizesRecords && <div className={'modal-cover prize-records'}>
<div className="modal">
<h4 className="title">中奖纪录</h4>
<div className="content" ref={el => this.records = el}>
<div className="rule">
1. 现金红包自动发放到账户中，可前往 我的- 赚奖学金 中提现；<br/>
2. 代金券碎片自动发放到账户中，可前往优惠券 - 碎片合成 中兑换代金券；<br/>
3. 实物奖品请尽快填写收货信息，活动结束后统一邮寄。
</div>
<ul className={'records'}>
{
!!prizeRecords.length && prizeRecords.map((item, index) => {
return <li key={index}>
<div className="record">
<div className="name">
{item.prize_name} {(item.prize_type === 1 || item.prize_type === 2) && `${item.amount}元`}
</div>
<div className="time">{item.create_time}</div>
</div>
{
item.prize_type === 4 && <div className="contact">{item.prize_info}</div>
}
</li>
})
}
</ul>
<i className={'iconfont iconiconfront-2 close'} onClick={() => {
this.records.removeEventListener('scroll', this.handleRecordsScroll)
document.body.style.overflow = 'auto'
this.setState({
isShowPrizesRecords: false,
});
}}></i>
</div>
</div>
</div>
}
</div>
);
}
}
export default connect(
({user}) => ({user}),
null,
)(Anniversary2020);
\ No newline at end of file
src/components/activity/2020-717/index.scss → src/components/activity/2020-717/activity/index.scss
......@@ -259,7 +259,7 @@
transform: translateX(-50%);
width: 280px;
height: 6px;
background: url("./images/h-bar.png");
background: url("../images/h-bar.png");
background-size: contain;
& + .h-bar {
......@@ -274,7 +274,7 @@
left: 0;
width: 6px;
height: 198px;
background: url("./images/v-bar.png");
background: url("../images/v-bar.png");
background-size: contain;
& + .v-bar {
......@@ -304,11 +304,11 @@
background-size: contain;
&.available {
background: url("./images/lottery-button-available.png") no-repeat;
background: url("../images/lottery-button-available.png") no-repeat;
}
&.unavailable {
background: url("./images/draw.png") no-repeat !important;
background: url("../images/draw.png") no-repeat !important;
}
}
}
......@@ -380,7 +380,7 @@
width: 14px;
height: 16px;
margin-right: 9px;
background: url("./images/lottery-icon.png") no-repeat;
background: url("../images/lottery-icon.png") no-repeat;
background-size: contain;
}
}
......@@ -478,7 +478,7 @@
display: inline-block;
width: 84px;
height: 25px;
background: url("./images/my-team.png");
background: url("../images/my-team.png");
background-size: contain;
}
......@@ -570,7 +570,7 @@
width: 14px;
height: 14px;
margin-right: 8px;
background: url("./images/start-exercise.png");
background: url("../images/start-exercise.png");
background-size: contain;
}
}
......@@ -597,7 +597,7 @@
transform: translateY(-50%);
width: 25px;
height: 11px;
background: url("./images/rank-title-decorator.png");
background: url("../images/rank-title-decorator.png");
}
&::before {
......
src/components/activity/2020-717/index.js
import React, { Component } from 'react';
import { debounce, groupBy, isEmpty } from "lodash";
import { http } from "@/utils"
import { Toast } from "antd-mobile";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import './index.scss'
import { Popup } from "@common/index"
import { Switch, Route } from "react-router-dom";
import Anniversary2020 from "@components/activity/2020-717/activity"
import Question from "@components/activity/2020-717/question"
class Anniversary2020 extends Component {
nav = null
stages = {
1: '基础',
2: '进阶',
3: '高阶',
4: '拓展',
}
stageParams = ['one', 'two', 'three', 'four']
records = null
answerRule = `
1.邀请好友加入队伍，好友答对题你和好友均可增加抽奖机会
2.每增加3个队员答对题，你可以增加N次抽奖机会，N=1 ,2, 3 (有3个队员答对题，你可+1次抽奖机会；6个队员答对题，你再+2次抽奖机会，超过6个队员答对题时，每+3人答对题都可+3次抽奖机会)
3.被邀请好友答对题TA可+1次抽奖机会
4.每人只能当1次队员哦
`
state = {
navs: [
{
text: '一分拼团',
id: '#group',
},
{
text: '抽华为P40Pro+',
id: '#lottery',
},
{
text: '组队答题',
id: '#group-answer',
},
{
text: '免费试听',
id: '#audition',
},
{
text: '冰点秒杀',
id: '#stage-course',
},
],
titleImages: [
require('./images/title_1.png'),
require('./images/title_2.png'),
require('./images/title_3.png'),
require('./images/title_4.png'),
require('./images/title_5.png'),
],
rankIcons: [
require('./images/rank1.png'),
require('./images/rank2.png'),
require('./images/rank3.png'),
],
navActive: 0,
sectionsPosition: [],
auditions: [],
auditionShowAll: false,
group: [],
groupShowAll: false,
stageCourses: [],
activityData: {},
team: {},
userAddress: {
name: '',
phone: '',
address: '',
},
isShowUserAddress: false,
prizeData: {},
prizeRecords: [],
prizeRecordsPagination: 0,
isShowPrizesRecords: false,
}
componentDidMount() {
this.getActivityStage()
this.getTeam()
this.getUserAddress()
this.getPrizeData()
this.getPrizeRecords()
this.getAuditionCourses()
this.getGroupCourses()
this.getStageCourses('zero')
}
componentDidUpdate(prevProps, prevState) {
if (prevState.navActive !== this.state.navActive) {
this.showActiveNav()
}
}
getActivityStage = () => {
http.get(`${API.home}/activity/anniversary/activityStage`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
activityData: data,
}, this.bindNavAction);
} else {
Toast.info(msg)
}
})
}
getAuditionCourses = () => {
http.get(`${API.home}/activity/anniversary/big_course`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
auditions: data,
}, this.bindNavAction);
} else {
Toast.info(msg)
}
return 1
})
}
getGroupCourses = () => {
http.get(`${API.home}/activity/anniversary/point_course`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
group: data,
});
} else {
Toast.info(msg)
}
})
}
getStageCourses = (key) => {
http.get(`${API.home}/activity/anniversary/four_stage/${key}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState(state => {
if (key === 'zero') {
return {
stageCourses: groupBy(data, item => {
return item.stage
}),
}
} else {
const index = this.stageParams.findIndex(item => item === key) + 1
state.stageCourses[index] = data
return {
stageCourses: state.stageCourses,
}
}
}, this.bindNavAction)
} else {
Toast.info(msg)
}
})
}
getPrizeData = () => {
http.get(`${API.home}/activity/anniversary/prize_data`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
prizeData: data,
})
} else {
Toast.info(msg)
}
})
}
getTeam = () => {
http.get(`${API.home}/activity/anniversary/teamInfo`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
team: data,
}, this.bindNavAction);
} else {
Toast.info(msg)
}
})
}
getPrizeRecords = (() => {
let hasMore = true, isFetching = false
return () => {
if (isFetching || !hasMore) {
return
}
isFetching = true
http.get(`${API.home}/activity/anniversary/user_prizes/${this.state.prizeRecordsPagination}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
if (isEmpty(data)) {
hasMore = false
}
const _records = Array.isArray(data) ? data : []
this.setState(state => {
return {
prizeRecords: [...state.prizeRecords, ..._records],
prizeRecordsPagination: state.prizeRecordsPagination + 1,
}
}, () => {
setTimeout(() => {
isFetching = false
}, 100)
});
} else {
Toast.info(msg)
}
})
}
})()
handleRecordsScroll = debounce((e) => {
let scrollTop = e.target.scrollTop, scrollHeight = e.target.scrollHeight, height = e.target.clientHeight
if (scrollTop > scrollHeight - height - 120) {
this.getPrizeRecords()
}
}, 16)
componentWillUnmount() {
document.removeEventListener('scroll', this.setNavActive)
document.body.style.overflow = 'auto'
}
handleChange = e => {
let name = e.target.name, value = e.target.value
this.setState(state => {
return {
userAddress: {...state.userAddress, ...{[name]: value}},
}
});
}
submitUserAddress = () => {
http.post(`${API.home}/sys/update_address`, this.state.userAddress)
.then(res => {
const {code, msg} = res.data
if (code === 200) {
Toast.info('提交成功')
this.setState({
isShowUserAddress: false,
});
} else {
Toast.info(msg)
}
})
}
getUserAddress = () => {
http.get(`${API.home}/sys/user_address_info`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
userAddress: data,
});
}
})
}
bindNavAction = () => {
document.removeEventListener('scroll', this.setNavActive)
this.setNavActive()
this.setState({
sectionsPosition: this.state.navs.map(item => {
const el = document.querySelector(item.id)
return {
top: el.offsetTop - 50,
height: el.offsetHeight,
}
}),
}, () => {
document.addEventListener('scroll', this.setNavActive)
})
}
setNavActive = debounce(() => {
const {navActive, sectionsPosition} = this.state
const pageY = window.pageYOffset
for (let i = navActive; i < sectionsPosition.length; i++) {
const section = sectionsPosition[i]
const nextSection = sectionsPosition[i + 1]
const prevSection = i > 0 && sectionsPosition[i - 1]
if (pageY > section.top + section.height && nextSection) {
if (pageY < nextSection.top || pageY < nextSection.top + nextSection.height) {
this.setState({
navActive: i + 1,
});
break
}
} else {
if (pageY < section.top + section.height && prevSection && pageY < prevSection.top + prevSection.height) {
this.setState({
navActive: i - 1 ? i - 1 : 0,
})
break
}
}
}
}, 1000 / 60)
showRule = (content) => {
this.popupInstance = Popup({
className: 'rule-popup',
title: '活动规则',
content,
})
}
showActiveNav = () => {
const listItems = this.nav.querySelectorAll('li')
const activeItem = listItems[this.state.navActive]
const box = activeItem.getBoundingClientRect()
let offsetWidth = this.nav.offsetWidth, scrollLeft = this.nav.scrollLeft
if (box.left < 0) {
this.nav.scrollLeft = box.left
} else if (box.right > offsetWidth + scrollLeft) {
this.nav.scrollLeft = box.right
}
}
draw = () => {
}
class Anniversary2020Entry extends Component {
render() {
const {
navs,
navActive,
titleImages,
rankIcons,
auditions,
auditionShowAll,
group,
groupShowAll,
stageCourses,
activityData,
team,
userAddress,
isShowUserAddress,
prizeData,
isShowPrizesRecords,
prizeRecords,
} = this.state
const {history} = this.props
const _auditions = auditionShowAll && auditions.length ? auditions : auditions.slice(0, 4)
const _group = groupShowAll && group.length ? group : group.slice(0, 4)
const match = this.props.match
return (
<div className={'anniversary-2020'}>
<div className="banner">
<img src="" alt=""/>
</div>
<nav ref={el => this.nav = el}>
<ul>
{
navs.map((item, index) => {
return <li key={index} className={index === navActive ? 'active' : ''}>
<a href='javascript:void(0);' onClick={() => {
this.setState({
navActive: index,
});
window.scrollTo(0, this.state.sectionsPosition[index].top)
}}>{item.text}</a>
</li>
})
}
</ul>
</nav>
<section id={'group'} className="group block">
<h2 className="block-title"
style={{background: `url(${titleImages[0]}) no-repeat`, backgroundSize: 'contain'}}></h2>
<ul className={'course-container'}>
{
!!_group.length && _group.map((item, index) => {
let Button
if (activityData.stage === 1) {
Button = <button className={'unavailable'}>7月15日开始</button>
} else if (activityData.stage === 2) {
switch (item.is_assemble) {
case 0:
Button = <button className="main"><Link to={`/detail?id=${item.course_id}`}>立即拼团</Link></button>
break
case 1:
Button = <button className="main"><Link to={`/detail?id=${item.course_id}`}>继续拼团</Link></button>
break
default:
Button =
<button className={'study'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link></button>
}
} else {
Button = <button className={'unavailable'}>活动已结束</button>
}
return <li className={'course'} key={index} onClick={(e) => {
let nodeName = e.target.nodeName.toLowerCase()
if (nodeName !== 'a' || nodeName !== 'button') {
history.push(`/detail?id=${item.course_id}`)
}
}}>
<div className="cover">
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.is_buy
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div>
}
<div className="btn">
{Button}
</div>
</div>
</li>
})
}
{
group.length > 4 &&
<li>
<button className={'show-more'} onClick={() => {
this.setState({
groupShowAll: true,
})
}}>查看更多
</button>
</li>
}
</ul>
</section>
<section id={'lottery'} className={'lottery block'}>
<div className="block-title"
style={{background: `url(${titleImages[1]}) no-repeat`, backgroundSize: 'contain'}}></div>
<div className="rule">
<a href="javascript:void(0);" onClick={this.showRule.bind(this, prizeData.rule)}>规则</a>
</div>
<div className="prize-container">
<div className={'h-bar'}></div>
<div className={'h-bar'}></div>
<div className={'v-bar'}></div>
<div className={'v-bar'}></div>
<ul className="prizes">
{
Array(9).fill('a').map((item, index) => {
return <li key={index}
className={index === 4 ? (prizeData.odd_times ? 'available' : 'unavailable') : ''}>
{
index !== 4
? <div className={'prize'}>
<img src="" alt=""/>
</div>
: activityData.stage === 1 ?
<div className={'draw'} style={{lineHeight: '350%'}}>7月15日开始</div> : <div className={'draw'}>
<div>抽奖</div>
<div>剩余{prizeData.odd_times || 0}次机会</div>
</div>
}
</li>
})
}
</ul>
</div>
<div className="content">
<div className={'operations'}>
<a href="javascript:void(0);" onClick={() => {
this.setState({
isShowUserAddress: true,
})
}}>收货信息</a>
<a href="javascript:void(0);" onClick={() => {
document.body.style.overflow = 'hidden'
this.setState({
isShowPrizesRecords: true,
}, () => {
this.records && this.records.addEventListener('scroll', this.handleRecordsScroll)
});
}}>中奖纪录</a>
</div>
<div className="lottery-info">
<div className={'title'}><i></i>如何获取更多抽奖机会？</div>
<ul className={'rules'}>
{
prizeData.more_rule && prizeData.more_rule.split('\n').map((item, index) => {
return <li key={index}>
<span className={'index'}>{index + 1}</span>
{item}
</li>
})
}
</ul>
</div>
</div>
</section>
<section id={'group-answer'} className={'group-answer block'}>
<div className="block-title" style={{background: `url(${titleImages[2]})`, backgroundSize: 'contain'}}></div>
<div style={{textAlign: 'center', marginBottom: '10px'}}>
<a className="rule-btn" href="javascript:void(0);"
onClick={this.showRule.bind(this, this.answerRule)}>规则</a>
</div>
<div className="content">
<div className="team">
<div className="func">
<i className={'my-team-icon'}></i>
<div className="summary">
<span>共<span className={'count'}>{team.people_num}</span>人</span>
<span>排名<span className={'count'}>{team.ranking}</span></span>
</div>
<ul>
{
!!team.team_info && team.team_info.length && team.team_info.map((item, index) => {
return <li key={index}>
<img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
alt=""/>
</li>
})
}
{
activityData.stage !== 1 && <li className={'more'}>更多</li>
}
</ul>
<div className="invite">
{
activityData.stage === 1 ? <button className={'invite'}>7月15日开始</button> :
<button className={'invite'}>邀请好友加入队伍</button>
}
</div>
</div>
<div className="des">
<div className="title">组队答题抽奖</div>
<ol>
<li>
1. 邀请好友加入队伍，好友答对题可获得一次抽奖机会；
</li>
<li>
2. 每3个队员答对题，你可以获得N次抽奖机会，N=1，2，3（上限）。
</li>
</ol>
</div>
</div>
<div className="exercise">
<div className="func">
{
activityData.stage === 1
? <div className="btn">
<button>7月15日开始</button>
</div>
: <>
<div className="btn">
<button><i></i>开始练习</button>
</div>
< div className="chance">今日剩余<span>{activityData.practice_num}</span>次</div>
</>
}
</div>
<div className="des">
<div className="title">练一练</div>
<ol>
<li>1. 每日可练习 2 次 。每次 1 道题，从题库中随机抽取；</li>
<li> 2. 答对可增加1次抽奖机会。</li>
</ol>
</div>
</div>
<div className="rank-list">
<div className="title">测试排行榜</div>
<div className="description">仅展示前50名，队员越多、用时越短排名越靠前</div>
<div className="prize-display">
<ul>
<li className={'top-three'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top1.png" alt=""/>
</li>
<li className={'top-three'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top2.png" alt=""/>
</li>
<li className={'top-three'}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top3.png" alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top4%EF%BD%9E7.png"
alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top8%EF%BD%9E15.png"
alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top16%EF%BD%9E30.png"
alt=""/>
</li>
<li>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/top31%EF%BD%9E50.png"
alt=""/>
</li>
</ul>
</div>
{
prizeData.stage !== 1 && <table>
<thead>
<tr>
<th>名次</th>
<th>队长</th>
<th>队员</th>
<th>奖品</th>
</tr>
</thead>
<tbody>
{
Array(5).fill('a').map((item, index) => {
return <tr key={index}>
<td>
{
index < 3 ? <img src={rankIcons[index]} alt=""/> : index + 1
}
</td>
<td>
<img
src="https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png"
alt="" className={'avatar'}/>
限制宽度比例限制宽度比例
</td>
<td>723</td>
<td>最多就显示这么多几个字吧</td>
</tr>
})
}
</tbody>
</table>
}
<div className="btn">
<button>查看更多</button>
</div>
</div>
</div>
</section>
<section id={'audition'} className={'audition'}>
<div className="block-title"
style={{background: `url(${titleImages[3]}) no-repeat`, backgroundSize: 'contain'}}></div>
<ul className="course-container">
{
!!_auditions.length && _auditions.map((item, index) => {
return <li className={'course'} key={index} onClick={(e) => {
if (e.target.nodeName.toLowerCase() !== 'a') {
history.push(`/detail?id=${item.course_id}`)
}
}}>
<div className="cover">
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.is_buy
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price1}</span>
<span>¥{item.price0}</span>
</div>
}
<div className="btn">
{
item.is_buy
?
<button className={'study-btn'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link></button>
: <button className="audition-btn"><a
href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">免费试听</a></button>
}
{
!!item.is_dist &&
<button><Link to={`/detail?id=${item.course_id}`}>赚{item.dist_amount}元</Link></button>
}
</div>
</div>
</li>
})
}
{
auditions.length > 4 &&
<li>
<button className={'show-more'} onClick={() => {
this.setState({
auditionShowAll: true,
});
}}>查看更多
</button>
</li>
}
</ul>
</section>
<section id={'stage-course'} className={'stage-course'}>
<div className="block-title"
style={{background: `url(${titleImages[4]}) no-repeat`, backgroundSize: 'contain'}}></div>
<div className="course-container">
{
!isEmpty(stageCourses) && Object.keys(stageCourses).map(key => {
return <ul key={key}>
<li><span className={'stage'}>{this.stages[key]}</span></li>
{
!!stageCourses[key].length && stageCourses[key].map((item, index) => {
let Button = null
if (activityData.stage === 1) {
Button = <button className={'unavailable'}>7月15日开始</button>
} else if (activityData.stage === 2) {
switch (item.type) {
case 0:
Button = <button>立即报名</button>
break
case 1:
Button =
<button className={'study-btn'}><Link to={`/play?id=${item.v_course_id}`}>开始学习</Link>
</button>
break
case 2:
Button = <button><Link to={`/detail?id=${item.course_id}`}>立即拼团</Link></button>
break
case 3:
Button = <button><Link to={`/detail?id=${item.course_id}`}>继续参团</Link></button>
break
case 4:
Button = <button><Link to={`/detail?id=${item.course_id}`}>继续砍价</Link></button>
break
case 5:
Button = <button><Link to={`/detail?id=${item.course_id}`}>我要砍价</Link></button>
break
}
} else {
Button = <button className={'unavailable'}>活动已结束</button>
}
return <li className={'course'} key={index}>
<div className="cover">
{
item.save && <span>立省{item.save}元</span>
}
<img src={item.image_name}
alt=""/>
</div>
<div className="info">
<div className="title">{item.course_title}</div>
<div className="des">{item.simpledescription}</div>
{
item.type === 1
? <div className="purchased">已购买</div>
: <div className="prices">
<span>¥{item.price0}</span>
<span>¥{item.price1}</span>
</div>
}
<div className="btn">
{Button}
{
!!item.is_dist && <button>赚{item.dist_amount}元</button>
}
</div>
</div>
</li>
})
}
{
stageCourses[key].length === 4 && <li className={'show-more-box'}>
<button className={'show-more'}
onClick={() => this.getStageCourses(this.stageParams[key - 1])}>查看更多
</button>
</li>
}
</ul>
})
}
</div>
</section>
{
isShowUserAddress &&
<div className="modal-cover">
<div className="modal recipient">
<h4 className="title">收货信息</h4>
<div className="tip">获奖用户（以最终榜单为准）请及时填写收货信息</div>
<input type="text" name={'name'} value={userAddress.name} placeholder={'收件人'}
onChange={this.handleChange}/>
<input type="text" name={'phone'} value={userAddress.phone} placeholder={'联系方式'}
onChange={this.handleChange}/>
<input type="text" name={'address'} value={userAddress.address} placeholder={'收货地址'}
onChange={this.handleChange}/>
<button disabled={!userAddress.name || !userAddress.phone || !userAddress.address}
onClick={this.submitUserAddress}>提交
</button>
<i className={'iconfont iconiconfront-2 close'} onClick={() => {
this.setState({
isShowUserAddress: false,
})
}}></i>
</div>
</div>
}
{
isShowPrizesRecords && <div className={'modal-cover prize-records'}>
<div className="modal">
<h4 className="title">中奖纪录</h4>
<div className="content" ref={el => this.records = el}>
<div className="rule">
1. 现金红包自动发放到账户中，可前往 我的- 赚奖学金 中提现；<br/>
2. 代金券碎片自动发放到账户中，可前往优惠券 - 碎片合成 中兑换代金券；<br/>
3. 实物奖品请尽快填写收货信息，活动结束后统一邮寄。
</div>
<ul className={'records'}>
{
!!prizeRecords.length && prizeRecords.map((item, index) => {
return <li key={index}>
<div className="record">
<div className="name">
{item.prize_name} {(item.prize_type === 1 || item.prize_type === 2) && `${item.amount}元`}
</div>
<div className="time">{item.create_time}</div>
</div>
{
item.prize_type === 4 && <div className="contact">{item.prize_info}</div>
}
</li>
})
}
</ul>
<i className={'iconfont iconiconfront-2 close'} onClick={() => {
this.records.removeEventListener('scroll', this.handleRecordsScroll)
document.body.style.overflow = 'auto'
this.setState({
isShowPrizesRecords: false,
});
}}></i>
</div>
</div>
</div>
}
</div>
<Switch>
<Route path={`${match.path}/question/:assistId?`} render={routeProps => (<Question {...routeProps}></Question>)}></Route>
<Route path={'/anniversary_2020'}
render={routeProps => (<Anniversary2020 {...routeProps}></Anniversary2020>)}></Route>
</Switch>
);
}
}
export default connect(
({user}) => ({user}),
null,
)(Anniversary2020);
\ No newline at end of file
export default Anniversary2020Entry;
\ No newline at end of file
src/components/activity/2020-717/question/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { Toast } from "antd-mobile";
import classnames from 'classnames'
import { http } from "@/utils"
class Question extends Component {
state = {
question: {},
selectedIndex: 0,
correctIndex: 2,
wrongIndex: 3,
}
componentDidMount() {
this.getQuestion()
}
getQuestion = () => {
const assistId = this.props.match.params.assistId
http.get(`${API.home}/activity/anniversary/get_question/${assistId ? 2 : 1}/${assistId ? assistId : 0}`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
question: data,
});
} else {
Toast.info(msg)
}
})
}
render() {
const {question, selectedIndex, correctIndex, wrongIndex} = this.state
return (
<div id={'question'}>
<div className="banner"></div>
<div className={'question'}>
{question.ques && <div className="topic" dangerouslySetInnerHTML={{__html: question.ques}}></div>}
<ul>
{
question.options && !!question.options.length && question.options.map((item, index) => {
return <li key={item.id} className={classnames({
selected: selectedIndex === index,
correct: correctIndex === index,
wrong: wrongIndex === index,
})}>
<span>{String.fromCharCode(65 + index)}</span>
{item.des}
</li>
})
}
</ul>
</div>
<div className="answered">
<div className="analysis">
<div className="estimate">
您选择的是C，正确答案是D 回答错误
</div>
<div className="analysis-content">
<div className="title">
<i className={'icon'}></i>
解析
</div>
<div className="content">
解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容
</div>
</div>
</div>
<div className="recommends">
<div className="title">相关课程</div>
<ul>
<li>
</li>
</ul>
</div>
</div>
<div className="submit-bar">
<button className={'submit'}>提交</button>
{/*<button className={'lottery-related'}>去抽奖</button>*/}
</div>
</div>
);
}
}
export default Question;
\ No newline at end of file
src/components/activity/2020-717/question/index.scss 0 → 100644
html, body {
min-height: 100%;
}
#root {
min-height: 100%;
}
#question {
background: #F5F5F5;
min-height: 100%;
padding-bottom: 55px;
.banner {
height: 94px;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active20_717/m/question-banner.png");
background-size: contain;
}
.question {
padding: 15px 16px;
background: #fff;
margin-bottom: 8px;
.topic {
margin-bottom: 20px;
font-size: 16px;
color: #222;
}
li {
display: flex;
align-items: center;
width: 375px;
height: 49px;
margin-left: -16px;
margin-right: -16px;
padding: 0 16px;
font-size: 16px;
&.selected {
background-color: rgba(0, 153, 255, .05);
color: #09f;
span {
color: #fff;
background: #09f;
border: 1px solid #09f;
}
}
&.correct {
background-color: rgba(44, 219, 175, .05);
color: #2CDBAF;
span {
color: #fff;
background: rgba(44, 219, 175, 1);
border: rgba(44, 219, 175, .05);
}
}
&.wrong {
color: #FC3540;
span {
color: #FC3540;
border: 1px solid #FC3540;
}
}
span {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 15px;
border: 1px solid rgba(153, 153, 153, 1);
border-radius: 50%;
text-align: center;
}
}
}
.answered {
padding: 15px 16px;
background-color: #fff;
.estimate {
margin-bottom: 20px;
font-size: 14px;
color: #333;
}
.analysis-content {
margin-bottom: 22px;
.title {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #09f;
.icon {
display: inline-block;
width: 14px;
height: 16px;
margin-right: 6px;
background: url("../images/analysis-icon.png");
background-size: contain;
}
}
.content {
font-size: 14px;
color: #666;
}
}
.recommends {
.title {
color: #09f;
}
ul {
display: flex;
justify-content: space-between;
}
li {
width: 160px;
height: 115px;
}
img {
width: 100%;
height: 100%;
}
}
}
.submit-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 55px;
line-height: 55px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
text-align: center;
background: #fff;
button {
-webkit-appearance: none;
outline: 0;
border: 0;
font-size: 16px;
}
.submit {
width: 92px;
height: 34px;
background: #09f;
border-radius: 17px;
color: #fff;
}
.lottery-related {
height: 34px;
padding: 0 20px;
background: #FEE333;
border-radius: 3em;
color: #2636FB;
}
}
}
\ No newline at end of file
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