限时免费

src/components/video/index.js

@@ -10,7 +10,7 @@ import { Toast } from 'antd-mobile'
 import videojs from 'video.js'
 import 'video.js/dist/video-js.min.css'
 import { Modal } from "antd-mobile"
-import { Loading } from '@/common'
+import { Loading, Popup } from '@/common'
 import { connect } from "react-redux"
 import jsCookie from 'js-cookie'
 import Single from "@/components/detail/single";
@@ -133,6 +133,10 @@ class Video extends Component {
         this.token = jsCookie.get('token')
         this.getVideoList()
         this.getDatumCatalog()
+        this.showLimitFreePopup({
+            title: '想领取【AI工程师必备干货礼包】? 想深入了解进阶课程？ 职业前景不明朗? 资深规划师免费为你服务!',
+
+        })
     }
 
     // 直接购买
@@ -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() {
         let {match, location, history} = this.props
@@ -868,7 +881,6 @@ class Video extends Component {
                                     closeShareModal={() => this.setState({isShowShareModal: false})}
                                     data={this.state.shareData}
                 />
-
             </div>
         );
     }

src/components/video/video.scss

@@ -20,7 +20,6 @@ $tabHeight: 44px;
         background: rgba(0, 0, 0, 0.5);
 
 
-
         .vjs-custom-play-button {
           position: absolute;
           top: 50%;
@@ -33,8 +32,8 @@ $tabHeight: 44px;
         }
       }
 
-            &.vjs-has-started{
-                .vjs-custom-play-button-cover{
+      &.vjs-has-started {
+        .vjs-custom-play-button-cover {
           bottom: 2.9em;
         }
       }
@@ -281,3 +280,24 @@ $tabHeight: 44px;
     }
   }
 }
+
+.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;
+  }
+
+}
+