落地页新增需求-增加app购买浮层

Application/Home/View/default/Home/landingPage.html

@@ -42,11 +42,31 @@
 
 
 <div class="home">
+
+  <div class="home-fiexd" <?php if (empty($game['flooring_page_video'])):?> style="height: 0" <?php endif;?> >
+    <div class="home-fiexdBox">
+
       <?php if (!empty($game['flooring_page_video'])):?>
       <div class="home-video">
         <video id="shakeVideo" src="{$game['flooring_page_video']}" autoplay controls muted webkit-playsinline="true" playsinline="true"></video>
       </div>
       <?php endif;?>
+
+      <div class="fiexd-heard">
+        <div class="fiexd-heardBox" style="display: none;">
+<!--          <div>完成</div>-->
+          <img src="" alt="">
+          <div class="fiexd-pay">
+            <span>App购买</span>
+            <div class="download">下载</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
   <div class="home-box">
     <div class="heard">
       <div style="height: 2.5rem;width: 2.5rem">
@@ -304,7 +324,26 @@
 </html>
 <script src="__STATIC__/ios9/js/layer/layer.js?VerNo=20190923" type="text/javascript"></script>
 <script>
-  <?php if (!empty($game['flooring_page_video'])):?>
+  $(window).scroll(function () {
+    var v = ($(this).scrollTop()) / 100;
+    //为什么除以100是因为我希望当$(this).scrollTop()为100的过程中，
+    //透明度由0变为1，$(this).scrollTop()/100得到的值正好与opacity的范围[0,1]相符合。
+    $(".fiexd-heardBox").show();
+    $('.fiexd-heard').css('backgroundColor', 'rgba(255, 255, 255,' + v + ')');
+
+    var t = $(window).scrollTop();
+    if (t < 10) {
+      console.log(111)
+      $(".fiexd-heardBox").hide();
+    }
+  })
+
+</script>
+
+<script>
+
+
+  <?php if(!empty($game['flooring_page_video'])):?>
     var video = document.getElementById("shakeVideo");
     video.play();
     document.addEventListener('WeixinJSBridgeReady',function(){
@@ -567,3 +606,4 @@
 
 
 </script>
+

Public/Home/css/index2.css

@@ -1,3 +1,21 @@
+
+.home{
+    width: 100%;
+    font-family:PingFang SC;
+}
+.home-box{
+    padding: 0.5rem 0.37rem 0 0.31rem;
+}
+.home-fiexd{
+    height: 4.22rem;
+    width: 100%;
+}
+.home-fiexdBox{
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+}
 .home-video{
     width: 100%;
     height: 4.22rem;
@@ -6,12 +24,45 @@
     width: 100%;
     height: 100%;
 }
-.home{
+.fiexd-heard{
     width: 100%;
-    font-family:PingFang SC;
+    height: 1.2rem;
+    background: rgba(255, 255, 255, 0);
 }
-.home-box{
-    padding: 0.5rem 0.37rem 0 0.31rem;
+.fiexd-heardBox{
+    padding: 0 0.3rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.32rem;
+    color: #007AFF;
+    line-height: 1.2rem;
+}
+.fiexd-heardBox>img{
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 0.1rem;
+    margin-left: 1rem;
+}
+.fiexd-pay{
+    display: flex;
+    align-items: center;
+}
+.fiexd-pay>span{
+    color: #A9A9A9;
+    font-size: 0.2rem;
+    margin-right: 0.14rem;
+}
+.fiexd-pay>div{
+    width: 1.5rem;
+    height: 0.6rem;
+    background-color: #007AFF;
+    border-radius: 0.3rem;
+    color: 0.32rem;
+    text-align: center;
+    line-height: 0.6rem;
+    color: #fff;
+    font-weight: 500;
 }
 .heard{
     width: 100%;
@@ -519,3 +570,5 @@
     font-weight: 500;
 }
 
+
+