Skip to content

M
mr-julyedu
Commit d8a5cdc4 by xuzhenghua
Options

弹窗

parent 5fe4b21d
Showing with 256 additions and 217 deletions
src/components/activity/newyear-2019/preheat/YearCourse/index.js
...@@ -3,12 +3,14 @@ import './index.scss' ...@@ -3,12 +3,14 @@ import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils' import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../../common/commonContainer/index' import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index' import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom" import {withRouter} from "react-router-dom"
import CommonPopup from './../../common/commonPopup/index'
class YarnCourse extends Component { class YearCourse extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
tofreeStudy: false,
basic: { basic: {
course: [], course: [],
courseList: [], courseList: [],
...@@ -197,9 +199,19 @@ class YarnCourse extends Component { ...@@ -197,9 +199,19 @@ class YarnCourse extends Component {
} }
} }
// 免费学习
freeStudy = () => { freeStudy = () => {
this.setState({
tofreeStudy: true,
})
}
// 关闭弹框
closePopup = () => {
this.setState({
tofreeStudy: false,
})
} }
// 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单 // 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
addWishList = (id) => { addWishList = (id) => {
...@@ -209,7 +221,7 @@ class YarnCourse extends Component { ...@@ -209,7 +221,7 @@ class YarnCourse extends Component {
const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state
return ( return (
<div> <div className={'year-index-course'}>
<CommonContainer title='重磅好课'> <CommonContainer title='重磅好课'>
<div> <div>
{ {
...@@ -722,9 +734,22 @@ class YarnCourse extends Component { ...@@ -722,9 +734,22 @@ class YarnCourse extends Component {
} }
</div> </div>
</CommonContainer> </CommonContainer>
{
this.state.tofreeStudy &&
<CommonPopup top={100} closePopup={this.closePopup} mark={true}>
<div className='sub__code_container'>
<p className='sub__title'>提醒服务</p>
<p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p>
<img className='sub__qr_code' id={'live-qr-code'}
src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
<p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
</div>
</CommonPopup>
}
</div> </div>
) )
} }
} }
export default withRouter(YarnCourse) export default withRouter(YearCourse)
src/components/activity/newyear-2019/preheat/YearCourse/index.scss
.course-box { .year-index-course {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.course-container {
width: 158px;
margin: 15px 0 0 0;
text-align: center;
position: relative;
}
.group-num { .course-box {
width: 66px; display: flex;
height: 16px; justify-content: space-between;
position: absolute; flex-wrap: wrap;
left: 10px;
top: 10px;
line-height: 16px;
background: #CA161C;
opacity: 0.8;
border-radius: 1px;
font-size: 12px;
color: #fff;
text-align: center;
}
.coupon-course__footer { .course-container {
.course-title { width: 158px;
padding-left: 10px; margin: 15px 0 0 0;
font-size: 15px;
color: #333;
font-weight: 500;
margin-top: 7px;
}
.btn {
display: inline-block;
width: 138px;
height: 24px;
text-align: center; text-align: center;
line-height: 24px; position: relative;
border-radius: 2px;
font-size: 12px;
outline: none;
border: none;
letter-spacing: 1px;
}
.big-course {
background-color: #FEE41D;
border: 1px solid #090F08;
color: #090F08;
margin-top: 10px;
} }
.to-study { .group-num {
background-color: #09f; width: 66px;
color: #fff; height: 16px;
position: absolute; position: absolute;
left: 10px; left: 10px;
bottom: 10px; top: 10px;
} line-height: 16px;
background: #CA161C;
.free-study { opacity: 0.8;
background: linear-gradient(-90deg, #EB1612 0%, #F92927 100%); border-radius: 1px;
font-size: 12px;
color: #fff; color: #fff;
margin-top: 10px; text-align: center;
} }
.free-course-num { .coupon-course__footer {
font-size: 12px; .course-title {
color: #070F08; padding-left: 10px;
margin-top: 7px; font-size: 15px;
letter-spacing: 1px; color: #333;
font-weight: 500;
margin-top: 7px;
}
span { .btn {
font-size: 14px; display: inline-block;
color: #FF0002; width: 138px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 2px;
font-size: 12px;
outline: none;
border: none;
letter-spacing: 1px;
}
.big-course {
background-color: #FEE41D;
border: 1px solid #090F08;
color: #090F08;
margin-top: 10px;
}
.to-study {
background-color: #09f;
color: #fff;
position: absolute;
left: 10px;
bottom: 10px;
}
.free-study {
background: linear-gradient(-90deg, #EB1612 0%, #F92927 100%);
color: #fff;
margin-top: 10px;
}
.free-course-num {
font-size: 12px;
color: #070F08;
margin-top: 7px;
letter-spacing: 1px;
span {
font-size: 14px;
color: #FF0002;
}
} }
} }
}
.type { .type {
text-align: left; text-align: left;
padding-left: 7px; padding-left: 7px;
margin-top: 3px; margin-top: 3px;
.tag { .tag {
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
height: 14px; height: 14px;
line-height: 15px; line-height: 15px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: #FFF; color: #FFF;
position: relative; position: relative;
z-index: 0; z-index: 0;
}
.time {
display: inline-block;
height: 15px;
line-height: 15px;
padding: 0 6px;
margin-left: 5px;
position: relative;
font-size: 12px;
color: #555;
text-align: center;
z-index: 0;
}
.time:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #E6E6E6;
transform: skewX(-20deg);
z-index: -1;
}
.tag:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #FF0002;
transform: skewX(-20deg);
z-index: -1;
}
} }
.time { .price {
display: inline-block; text-align: left;
height: 15px; padding-left: 5px;
line-height: 15px; margin-top: 3px;
padding: 0 6px; color: #FF0002;
margin-left: 5px;
position: relative;
font-size: 12px; font-size: 12px;
color: #555;
text-align: center;
z-index: 0;
}
.time:before { .new-price {
content: ''; font-size: 18px;
position: absolute; }
top: 0;
right: 0; .old-price {
bottom: 0; font-size: 12px;
left: 0; color: #666;
background-color: #E6E6E6; margin-left: 8px;
transform: skewX(-20deg); }
z-index: -1;
} }
.tag:before { .status {
content: ''; text-align: left;
padding-left: 5px;
position: absolute; position: absolute;
top: 0; bottom: 10px;
right: 0;
bottom: 0;
left: 0;
background-color: #FF0002;
transform: skewX(-20deg);
z-index: -1;
}
}
.price { .status-btn {
text-align: left; display: inline-block;
padding-left: 5px; height: 22px;
margin-top: 3px; line-height: 22px;
color: #FF0002; border-radius: 2px;
font-size: 12px; text-align: center;
font-size: 12px;
color: #fff;
}
.new-price { .to-buy {
font-size: 18px; width: 55px;
} background-color: #FF8080;
}
.old-price { .add-wish, .add-wish-success {
font-size: 12px; width: 88px;
color: #666; margin-left: 5px;
margin-left: 8px; outline: none;
color: #FF0002;
background-color: #fff;
border: 1px solid #FF0002;
img {
width: 12px;
height: 11px;
margin-right: 2px;
position: relative;
top: 1px;
}
}
.add-wish-success {
color: #fff;
background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
}
} }
} }
.status { .bigcourse .course-container {
text-align: left; height: 156px;
padding-left: 5px; }
position: absolute;
bottom: 10px;
.status-btn {
display: inline-block;
height: 22px;
line-height: 22px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #fff;
}
.to-buy { .freecourse .course-container {
width: 55px; height: 177px;
background-color: #FF8080; }
}
.add-wish, .add-wish-success { .groupcourse .course-container {
width: 88px; height: 195px;
margin-left: 5px; }
outline: none;
color: #FF0002;
background-color: #fff;
border: 1px solid #FF0002;
img { .ai-course__subtitle {
width: 12px; width: 73px;
height: 11px; height: 24px;
margin-right: 2px; margin: 15px auto 0;
position: relative; border-radius: 12px;
top: 1px; font-size: 14px;
} font-weight: 500;
color: #070F08;
text-align: center;
line-height: 22px;
letter-spacing: 2px;
background-color: #FFE300;
border: 1px solid #070F08;
}
} .more-button {
display: block;
width: 75px;
height: 26px;
margin: 15px auto 5px;
padding: 0;
border-radius: 12px;
font-size: 12px;
font-weight: 400;
color: #fff;
line-height: 26px;
cursor: pointer;
outline: none;
background-color: #0F6237;
border: none;
letter-spacing: 1px;
}
.add-wish-success { .sub__code_container {
color: #fff; padding: 20px;
background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
}
} }
} }
\ No newline at end of file
.bigcourse .course-container {
height: 156px;
}
.freecourse .course-container {
height: 177px;
}
.groupcourse .course-container {
height: 195px;
}
.ai-course__subtitle {
width: 73px;
height: 24px;
margin: 15px auto 0;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: #070F08;
text-align: center;
line-height: 22px;
letter-spacing: 2px;
background-color: #FFE300;
border: 1px solid #070F08;
}
.more-button {
display: block;
width: 75px;
height: 26px;
margin: 15px auto 5px;
padding: 0;
border-radius: 12px;
font-size: 12px;
font-weight: 400;
color: #fff;
line-height: 26px;
cursor: pointer;
outline: none;
background-color: #0F6237;
border: none;
letter-spacing: 1px;
}
src/components/activity/newyear-2019/preheat/index.scss
...@@ -21,6 +21,12 @@ ...@@ -21,6 +21,12 @@
font-size: 14px; font-size: 14px;
color: #666; color: #666;
margin: 13px 0; margin: 13px 0;
letter-spacing: 1px;
i {
font-style: normal;
color: #FF0000;
font-size: 16px;
}
} }
.sub__rule { .sub__rule {
......
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