Skip to content

M
mr-julyedu
Commit b8334bd8 by xuzhenghua
Options

直播间预约

parent ca26eade
Showing with 452 additions and 3 deletions
src/components/Index/index.js
...@@ -5,7 +5,45 @@ import Topscroll from './topscroll' ...@@ -5,7 +5,45 @@ import Topscroll from './topscroll'
import './index.scss'; import './index.scss';
class Index extends Component { class Index extends Component {
liveColse(){
this.setState(status => ({
isshow: !status.isshow,
}));
}
toSubscribe(){
this.setState(status => ({
isshow: !status.isshow,
toSubscribe: !status.toSubscribe
}));
}
subscribeColse(){
this.setState(status => ({
toSubscribe: !status.toSubscribe
}));
}
iphoneStep(){
this.setState(status => ({
step: 1
}));
}
serverStep(){
this.setState(status => ({
step: 2
}));
}
submit(){
this.setState(status => ({
success: true,
toSubscribe: !status.toSubscribe
}));
}
state = { state = {
issubscribe: 0,
toSubscribe: false,
isfollow: true,
isshow: true,
step: 0,
success: false,
dataList: [ dataList: [
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', 'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
...@@ -257,6 +295,94 @@ class Index extends Component { ...@@ -257,6 +295,94 @@ class Index extends Component {
<p>查看全部课程</p> <p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span> <span>数学基础、数学结构、大数据实战、Python...</span>
</div> </div>
{
this.state.isshow === true &&
<div className='live-room-box'>
<div className='live-room-content'>
<div className='course-banner'>
<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='right'><span></span></div>
</div>
<div className='course-dec'>
<h2 className='title'>第四课：概率论算法精透</h2>
<p className='teacher'>讲师：林奔</p>
<p className='time'>时间：明晚20:00—22:00</p>
</div>
<div className='course-info'>
<ul>
<li>简介：</li>
<li className='text-overflow-2'>
知识点1：图的定义 (有向图，无向图)定义四行。
</li>
<li className='text-overflow-2'>
知识点2：拓扑排序实战项目：最短路（Floyd，Dijkstra，Bellmanford）。
</li>
</ul>
</div>
<div className='course-subscribe'>
{
this.state.issubscribe === 0 &&
<button onClick={this.toSubscribe.bind(this)}>预约</button>
}
{
this.state.issubscribe === 1 &&
<span>直播尚未开始，敬请期待...</span>
}
</div>
</div>
<div className='live-room-close'>
<i onClick={this.liveColse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>
</div>
</div>
}
{
this.state.toSubscribe === true &&
<div className='subscribe-box'>
{ this.state.step === 0 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='subscribe-content'>
<span className='title'>请选择即将直播时通知您的方式</span>
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.serverStep.bind(this)}>微信服务号通知</button>
{
this.state.isfollow === true &&
<span className='tips'>关注服务号即代表预约成功</span>
}
<button className={this.state.isfollow ? 'follow' : 'nofollow'} onClick={this.iphoneStep.bind(this)}>手机短信通知</button>
</div>
</div>
}
{ this.state.step === 1 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content'>
<span className='title'>预约</span>
<p className='dec'>直播前会通过手机短信通知您，您可通过预留的手机号快捷登录参与学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>预约</button>
</div>
</div>
}
{ this.state.step === 2 &&
<div>
<div className='close-subscribe' onClick={this.subscribeColse.bind(this)}></div>
<div className='iphone-content server-content'>
<p className='title'><i className={'iconfont icondanseshixintubiao-5'}></i><span>预约成功</span></p>
<p className='dec'>直播开始前会通过微信“服务通知”提醒您。 推荐预留手机号，届时可通过手机号登录直播 间直接学习：</p>
<input type="text" placeholder='请输入手机号'/>
<button className='submit' onClick={this.submit.bind(this)}>提交</button>
</div>
</div>
}
</div>
}
{
this.state.success === true &&
<div className='success'>预约成功</div>
}
</div> </div>
); );
} }
......
src/components/Index/index.scss
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
.search { .search {
font-size: 22px!important; font-size: 22px !important;
float: right; float: right;
margin-top: -6px; margin-top: -6px;
} }
...@@ -107,11 +107,13 @@ ...@@ -107,11 +107,13 @@
overflow: auto; overflow: auto;
position: relative; position: relative;
margin-top: 15px; margin-top: 15px;
.scroll-list { .scroll-list {
height: 100%; height: 100%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
.scroll-item { .scroll-item {
display: inline-block; display: inline-block;
width: 301px; width: 301px;
...@@ -160,8 +162,10 @@ ...@@ -160,8 +162,10 @@
} }
} }
} }
}::-webkit-scrollbar{ }
display:none;
::-webkit-scrollbar {
display: none;
} }
...@@ -283,4 +287,322 @@ ...@@ -283,4 +287,322 @@
} }
} }
/*
直播间预约
*/
.live-room-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
.live-room-content {
background-color: $bg_fff;
width: 280px;
height: 400px;
border-radius: 10px;
margin: 110px auto 0 auto;
padding-top: 20px;
.course-banner {
width: 100%;
height: 118px;
display: flex;
justify-content: space-between;
.left {
width: 43px;
height: 73px;
background-color: #fdd9e9;
border-radius: 0 10px 10px 0;
margin-top: 22px;
span {
display: inline-block;
width: 37px;
height: 63px;
background-color: #FCC2DA;
border-radius: 0 10px 10px 0;
margin-top: 5px;
margin-right: 6px;
}
}
.right {
width: 43px;
height: 73px;
background-color: #fce4c4;
border-radius: 10px 0 0 10px;
margin-top: 22px;
span {
display: inline-block;
width: 37px;
height: 63px;
background-color: #FAD29F;
border-radius: 10px 0 0 10px;
margin-top: 5px;
margin-left: 6px;
}
}
.center {
img {
width: 165px;
height: 118px;
border-radius: 10px;
}
}
}
.course-dec {
text-align: center;
margin-top: 10px;
.title {
color: $color_333;
font-size: 14px;
}
.teacher {
color: $color_333;
font-size: 16px;
margin: 10px 0 5px 0;
}
.time {
color: $active;
font-size: 12px;
}
}
.course-info {
margin-top: 10px;
height: 115px;
padding: 13px 0;
border-top: 1px solid $border_e7eaf1;
border-bottom: 1px solid $border_e7eaf1;
ul {
margin: 0 auto;
width: 195px;
height: 90px;
overflow: hidden;
li {
color: $color_666;
font-size: 12px;
}
li:nth-child(1) {
color: $color_333;
font-size: 14px;
}
}
}
.course-subscribe {
text-align: center;
button {
margin-top: 12px;
width: 60px;
height: 27px;
background-color: $bg_active;
border-radius: 14px;
font-size: 14px;
color: $white;
border: none;
}
span {
display: inline-block;
margin-top: 12px;
font-size: 16px;
color: $redprice;
}
}
}
.live-room-close {
text-align: center;
margin-top: 20px;
.close {
font-size: 22px !important;
color: $white;
}
}
}
.subscribe-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .8);
.close-subscribe {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.subscribe-content {
width: 300px;
height: 155px;
background-color: $bg_fff;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
text-align: center;
padding-top: 20px;
button {
background-color: $bg_18B4ED;
font-size: 16px;
color: $white;
width: 135px;
height: 30px;
border-radius: 15px;
border: none;
display: block;
margin: auto;
}
.title {
font-size: 16px;
color: $color_333;
display: block;
height: 15px;
line-height: 15px;
}
.follow {
margin-top: 15px;
}
.nofollow {
margin-top: 20px;
}
.tips {
font-size: 12px;
color: $color_555;
display: block;
height: 12px;
line-height: 12px;
margin-top: 7px;
}
.iphone {
margin-top: 15px;
}
}
.iphone-content {
width: 300px;
height: 191px;
background-color: $bg_fff;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
text-align: center;
padding: 15px 20px;
.title {
font-size: 16px;
color: $color_333;
display: block;
height: 15px;
line-height: 15px;
}
.dec {
font-size: 14px;
color: $color_666;
display: block;
margin-top: 15px;
text-align: left;
height: 33px;
line-height: 18px;
}
input {
width: 100%;
height: 30px;
padding-left: 15px;
border: 1px solid $border_ccc;
margin-top: 15px;
}
input:focus {
border: 1px solid $bg_active;
}
.submit {
width: 260px;
height: 30px;
background-color: $bg_18B4ED;
border-radius: 3px;
font-size: 16px;
color: $white;
border: none;
margin-top: 20px;
}
}
.server-content {
height: 226px;
padding: 20px;
.title {
font-size: 18px;
color: $active;
height: 24px;
line-height: 24px;
i{
font-size: 24px;
margin-right: 10px;
}
span {
position: relative;
top: -3px;
}
}
.dec {
height: 53px;
}
}
}
.success {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 32px;
background-color: $bg_000;
border-radius: 15px;
margin-left: -50px;
margin-top: -16px;
opacity: .6;
color: $white;
font-size: 16px;
text-align: center;
line-height: 32px;
}
} }
src/styles/variable.scss
...@@ -56,6 +56,7 @@ $bg_FFE400: #FFE400; ...@@ -56,6 +56,7 @@ $bg_FFE400: #FFE400;
$bg_FFA200: #FFA200; $bg_FFA200: #FFA200;
$bg_FE2F2F: #FE2F2F; $bg_FE2F2F: #FE2F2F;
$bg_FADD29: #FADD29; $bg_FADD29: #FADD29;
$bg_18B4ED: #18B4ED;
/* /*
......
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