Skip to content

M
mr-julyedu
Commit 0727b44d by xuzhenghua
Options

单集购买

parents 66d2ccd1 f5b2c545
Showing with 724 additions and 5 deletions
src/assets/css/variable.scss
......@@ -59,6 +59,9 @@ $bg_FFA200: #FFA200;
$bg_FE2F2F: #FE2F2F;
$bg_FADD29: #FADD29;
$bg_E7E7E7: #E7E7E7;
$bg_18B4ED: #18B4ED;
$bg_FF4000: #FF4000;
/*
......
src/components/Index/index.js
......@@ -5,7 +5,45 @@ import Topscroll from './topscroll'
import './index.scss';
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 = {
issubscribe: 0,
toSubscribe: false,
isfollow: true,
isshow: true,
step: 0,
success: false,
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
......@@ -257,6 +295,94 @@ class Index extends Component {
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</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>
);
}
......
src/components/Index/index.scss
......@@ -26,7 +26,7 @@
}
.search {
font-size: 22px!important;
font-size: 22px !important;
float: right;
margin-top: -6px;
}
......@@ -107,11 +107,13 @@
overflow: auto;
position: relative;
margin-top: 15px;
.scroll-list {
height: 100%;
display: flex;
overflow: hidden;
position: absolute;
.scroll-item {
display: inline-block;
width: 301px;
......@@ -160,8 +162,10 @@
}
}
}
}::-webkit-scrollbar{
display:none;
}
::-webkit-scrollbar {
display: none;
}
......@@ -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/components/detail/index.scss
......@@ -155,18 +155,22 @@
display: flex;
position: relative;
font-size: 12px;
.title {
font-size: 14px;
margin-right: 12px;
}
.ranking-mess {
margin-right: 20px;
img {
width: 22px;
height: 22px;
border-radius: 50%;
vertical-align: middle;
}
i {
display: inline-block;
margin-left: 5px;
......@@ -174,17 +178,19 @@
font-style: normal;
}
}
.ranking-ellipsis {
width: 22px;
height: 22px;
border-radius: 50%;
}
.share {
position: absolute;
right: 12px;
padding: 5px 6px;
border:1px solid $red;
border-radius:3px;
border: 1px solid $red;
border-radius: 3px;
color: $red;
background-color: $bg_fff;
}
......@@ -249,6 +255,7 @@
padding-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
position: relative;
}
.points {
......@@ -261,6 +268,267 @@
.red {
color: $color_FE2F2F;
}
.icon-right-22 {
position: absolute;
right: 22px;
}
.iconiconfront-74 {
font-size: 19px;
}
.icondanseshixintubiao-23 {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: $bg_active;
color: $white;
text-align: center;
line-height: 22px;
font-size: 14px;
top: 6px;
margin-left: 5px;
}
.live {
color: $active;
font-size: 12px;
}
.btn-right-10 {
position: absolute;
right: 10px;
top: 6px;
display: inline-block;
min-width: 44px;
padding: 0 5px;
height: 22px;
line-height: 22px;
text-align: center;
color: $white;
font-size: 12px;
border-radius: 11px;
}
.audition {
background: linear-gradient(90deg, $bg_0078FF 0%, $bg_active 100%);
}
.singleset {
background-color: $bg_FE2F2F;
}
}
}
.popup-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1;
.content {
width: 300px;
position: relative;
margin-left: -150px;
background-color: $white;
left: 50%;
padding-top: 20px;
border-radius: 3px;
}
.close {
position: absolute;
top: 380px;
color: #fff;
font-size: 22px;
left: 50%;
margin-left: -11px;
}
.btn {
position: absolute;
bottom: 24px;
left: 83px;
width: 135px;
height: 30px;
border-radius: 3px;
font-size: 16px;
color: $white;
text-align: center;
line-height: 30px;
}
.btn-18B4ED {
background-color: $bg_18B4ED;
}
.btn-FF4000 {
background-color: $bg_FF4000;
}
.header {
color: $active;
height: 24px;
line-height: 24px;
text-align: center;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.audition-box {
height: 144px;
top: 212px;
text-align: center;
.audition-header {
font-size: 16px;
color: $color_333;
}
.audition-dec {
font-size: 14px;
color: $color_666;
margin-top: 10px;
}
}
.singleset-payment {
height: 305px;
top: 140px;
padding: 17px 20px;
.price-box {
padding-bottom: 15px;
border-bottom: 1px solid $sp_ddd;
span {
font-size: 12px;
color: $color_666;
}
p {
height: 22px;
line-height: 22px;
color: $color_FF4000;
font-size: 22px;
text-align: center;
margin-top: 5px;
}
}
.course-info {
font-size: 14px;
p {
height: 14px;
line-height: 14px;
margin-top: 10px;
color: $color_333;
span {
color: $color_666;
}
}
}
.payment-type {
margin-top: 20px;
label {
display: inline-block;
width: 100%;
border-bottom: 1px solid $sp_ddd;
color: $color_666;
font-size: 12px;
padding-bottom: 5px;
}
p {
height: 22px;
line-height: 22px;
margin-top: 10px;
position: relative;
.iconzhifubaox- {
font-size: 22px;
}
.iconweixinzhifu {
font-size: 22px;
}
span {
display: inline-block;
margin-left: 10px;
color: $color_333;
font-size: 14px;
vertical-align: text-bottom;
}
.redio {
position: absolute;
right: 0;
font-size: 20px;
}
}
}
}
.zero {
height: 147px;
top: 213px;
text-align: center;
.header {
color: $active;
height: 24px;
line-height: 24px;
i {
font-size: 24px;
}
span {
font-size: 18px;
margin-left: 10px;
vertical-align: text-bottom;
}
}
.dec {
height: 14px;
line-height: 14px;
color: $color_666;
font-size: 14px;
margin-top: 15px;
}
}
.payment-success {
height: 258px;
top: 143px;
padding: 20px 24px;
.dec {
height: 33px;
line-height: 20px;
color: $color_666;
font-size: 14px;
margin-top: 12px;
}
.btn-18B4ED {
bottom: 70px;
}
}
}
......
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