Skip to content

M
mr-julyedu
Commit 65adf51c by zhanghaozhe
Options

限时免费

parent 7a2dceef
Showing with 284 additions and 252 deletions
src/components/video/index.js
...@@ -10,7 +10,7 @@ import { Toast } from 'antd-mobile' ...@@ -10,7 +10,7 @@ import { Toast } from 'antd-mobile'
import videojs from 'video.js' import videojs from 'video.js'
import 'video.js/dist/video-js.min.css' import 'video.js/dist/video-js.min.css'
import { Modal } from "antd-mobile" import { Modal } from "antd-mobile"
import { Loading } from '@/common' import { Loading, Popup } from '@/common'
import { connect } from "react-redux" import { connect } from "react-redux"
import jsCookie from 'js-cookie' import jsCookie from 'js-cookie'
import Single from "@/components/detail/single"; import Single from "@/components/detail/single";
...@@ -133,6 +133,10 @@ class Video extends Component { ...@@ -133,6 +133,10 @@ class Video extends Component {
this.token = jsCookie.get('token') this.token = jsCookie.get('token')
this.getVideoList() this.getVideoList()
this.getDatumCatalog() this.getDatumCatalog()
this.showLimitFreePopup({
title: '想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!',
})
} }
// 直接购买 // 直接购买
...@@ -733,6 +737,15 @@ class Video extends Component { ...@@ -733,6 +737,15 @@ class Video extends Component {
} }
} }
showLimitFreePopup = (title, id) => {
Popup({
title: <span>想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!</span>,
className: 'free-popup',
content: <div className={'des'}>
<img className="qrcode" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"/>
</div>
})
}
render() { render() {
let {match, location, history} = this.props let {match, location, history} = this.props
...@@ -868,7 +881,6 @@ class Video extends Component { ...@@ -868,7 +881,6 @@ class Video extends Component {
closeShareModal={() => this.setState({isShowShareModal: false})} closeShareModal={() => this.setState({isShowShareModal: false})}
data={this.state.shareData} data={this.state.shareData}
/> />
</div> </div>
); );
} }
......
src/components/video/video.scss
$tabHeight: 44px; $tabHeight: 44px;
.play { .play {
.video { .video {
width: 100%; width: 100%;
height: 215px; height: 215px;
background-color: $black; background-color: $black;
position: relative; position: relative;
.video-js { .video-js {
width: 100%; width: 100%;
height: 100%; height: 100%;
.vjs-custom-play-button-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
.vjs-custom-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 27px;
background: url("./images/play.png") no-repeat;
background-size: contain;
}
}
&.vjs-has-started{
.vjs-custom-play-button-cover{
bottom: 2.9em;
}
}
&.vjs-playing {
.vjs-custom-play-button-cover {
display: none;
}
}
}
.purchase-box { .vjs-custom-play-button-cover {
width: 100%; position: absolute;
height: 100%; top: 0;
position: absolute; bottom: 0;
left: 0; left: 0;
top: 0; right: 0;
background-color: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.5);
display: flex;
flex-flow: column;
justify-content: center; .vjs-custom-play-button {
align-items: center; position: absolute;
top: 50%;
.hint { left: 50%;
font-size: $font_14; transform: translate(-50%, -50%);
color: $white; width: 27px;
margin-bottom: 20px; height: 27px;
} background: url("./images/play.png") no-repeat;
background-size: contain;
@mixin button {
display: block;
-webkit-appearance: none;
outline: none;
border: none;
background-color: transparent;
border-radius: 5px;
line-height: 30px;
font-size: 13px;
padding: 0 9px;
}
.btns {
width: 100%;
padding: 0 60px;
display: flex;
justify-content: space-around;
}
.purchase-class {
@include button;
background-color: $white;
color: $color_FF4000;
}
.purchase-episode {
@include button;
background-color: $bg_FF4000;
color: $white;
}
} }
}
.is-aist-box { &.vjs-has-started {
width: 100%; .vjs-custom-play-button-cover {
height: 100%; bottom: 2.9em;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: #fff;
i {
font-size: 34px;
}
.time {
font-size: 16px;
}
} }
}
video { &.vjs-playing {
width: 100%; .vjs-custom-play-button-cover {
height: 100%; display: none;
} }
}
} }
.tab { .purchase-box {
height: $tabHeight; width: 100%;
max-height: $tabHeight; height: 100%;
line-height: $tabHeight; position: absolute;
text-align: center; left: 0;
background: #fff; top: 0;
flex: 1 0 auto; background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.hint {
font-size: $font_14;
color: $white;
margin-bottom: 20px;
}
@mixin button {
display: block;
-webkit-appearance: none;
outline: none;
border: none;
background-color: transparent;
border-radius: 5px;
line-height: 30px;
font-size: 13px;
padding: 0 9px;
}
.btns {
width: 100%;
padding: 0 60px;
display: flex; display: flex;
justify-content: center; justify-content: space-around;
}
.purchase-class {
@include button;
background-color: $white;
color: $color_FF4000;
}
.purchase-episode {
@include button;
background-color: $bg_FF4000;
color: $white;
}
}
& > div { .is-aist-box {
flex: 1 0 auto; width: 100%;
} height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: #fff;
i {
font-size: 34px;
}
.time {
font-size: 16px;
}
}
a { video {
display: inline-block; width: 100%;
height: $tabHeight; height: 100%;
font-size: $font_16; }
border-bottom: 1px solid transparent; }
.tab {
height: $tabHeight;
max-height: $tabHeight;
line-height: $tabHeight;
text-align: center;
background: #fff;
flex: 1 0 auto;
display: flex;
justify-content: center;
& > div {
flex: 1 0 auto;
}
&.active { a {
border-bottom: 1px solid $active; display: inline-block;
} height: $tabHeight;
} font-size: $font_16;
border-bottom: 1px solid transparent;
&.active {
border-bottom: 1px solid $active;
}
} }
}
.active { .active {
color: $active; color: $active;
.iconiconfront-74 { .iconiconfront-74 {
color: $color_555; color: $color_555;
} }
}
.progress-share-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 290px;
height: 332px;
padding: 18px 15px;
background: url("./images/progress-share-bg.png");
background-size: contain;
& > .title {
font-size: 21px;
color: #00656F;
line-height: 30px;
text-align: center;
margin-bottom: 20px;
} }
.progress-share-modal { .progress-container {
position: absolute; display: flex;
top: 50%; justify-content: space-between;
left: 50%; margin-bottom: 20px;
transform: translate(-50%, -50%);
width: 290px; li {
height: 332px; flex: 1;
padding: 18px 15px;
background: url("./images/progress-share-bg.png"); .title {
background-size: contain; font-size: 14px;
color: #00838F;
& > .title { line-height: 20px;
font-size: 21px; text-align: center;
color: #00656F; flex: 1;
line-height: 30px; margin-bottom: 10px;
text-align: center;
margin-bottom: 20px;
} }
.progress-container { .number {
display: flex; font-size: 15px;
justify-content: space-between; color: #00656F;
margin-bottom: 20px; text-align: center;
li { .num {
flex: 1; font-size: 33px;
color: #00656F;
.title { }
font-size: 14px;
color: #00838F;
line-height: 20px;
text-align: center;
flex: 1;
margin-bottom: 10px;
}
.number {
font-size: 15px;
color: #00656F;
text-align: center;
.num {
font-size: 33px;
color: #00656F;
}
}
}
} }
}
}
.share-container { .share-container {
.title { .title {
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #00838F; color: #00838F;
margin-bottom: 25px; margin-bottom: 25px;
&::before { &::before {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 30px; left: 30px;
transform: translateY(-50%); transform: translateY(-50%);
content: ''; content: '';
display: block; display: block;
width: 70px; width: 70px;
height: 1px; height: 1px;
background: #77c4bf; background: #77c4bf;
}
&::after {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
content: '';
display: block;
width: 70px;
height: 1px;
background: #77c4bf;
}
}
ul {
display: flex;
justify-content: space-around;
padding: 0 20px;
text-align: center;
li {
font-size: 12px;
color: #00838F;
.iconfont {
font-size: 40px;
color: #00838f;
}
}
}
} }
.close { &::after {
position: absolute; position: absolute;
left: 50%; top: 50%;
transform: translateX(-50%); right: 30px;
bottom: -63px; transform: translateY(-50%);
color: #fff; content: '';
font-size: 30px; display: block;
width: 70px;
height: 1px;
background: #77c4bf;
} }
}
&-wrapper { ul {
position: fixed; display: flex;
top: 0; justify-content: space-around;
left: 0; padding: 0 20px;
width: 100%; text-align: center;
height: 100%;
background: rgba(0, 0, 0, 0.5);
touch-action: none;
z-index: 100;
li {
font-size: 12px;
color: #00838F;
.iconfont {
font-size: 40px;
color: #00838f;
}
} }
}
} }
.close {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -63px;
color: #fff;
font-size: 30px;
}
&-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
touch-action: none;
z-index: 100;
}
}
} }
.free-popup {
width: 290px;
height: 366px;
border-radius: 5px !important;
padding: 0 !important;
overflow: hidden;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/popup-bg.png") !important;
background-size: cover !important;
.title {
display: flex;
align-items: center;
height: 125px;
padding: 0 20px;
color: #fff !important;
font-size: 15px;
}
}
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