完善奖励资源

view/molistar/activity/2024-newYear/css/index.css

@@ -784,6 +784,26 @@ body {
   background: url(../images/rewardBg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0;
+  position: relative;
+}
+
+.page2 .content .box .bo {
+  position: absolute;
+  width: 0.69333rem;
+  height: 0.69333rem;
+  left: 1.88rem;
+}
+
+.page2 .content .box .bo1 {
+  top: 9.92rem;
+}
+
+.page2 .content .box .bo2 {
+  top: 23rem;
+}
+
+.page2 .content .box .bo3 {
+  top: 38.56rem;
 }
 
 .rules {
@@ -857,17 +877,60 @@ body {
   margin: 0.66667rem auto 2.4rem;
 }
 
+.video {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.video video {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 65%;
+}
+
+.video .close {
+  width: 0.90667rem;
+  height: 0.90667rem;
+  position: absolute;
+  top: 10%;
+  right: 0.93333rem;
+  z-index: 9;
+}
+
 .arabic .header {
   background: url(../images/header-ar.png) no-repeat;
   background-size: 100% 100%;
 }
 
+.arabic .page2 .content .box {
+  background: url(../images/rewardBg-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .china .header {
   background: url(../images/header-zh.png) no-repeat;
   background-size: 100% 100%;
 }
 
+.china .page2 .content .box {
+  background: url(../images/rewardBg-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .Turkiye .header {
   background: url(../images/header-tr.png) no-repeat;
   background-size: 100% 100%;
 }
+
+.Turkiye .page2 .content .box {
+  background: url(../images/rewardBg-tr.png) no-repeat;
+  background-size: 100% 100%;
+}

view/molistar/activity/2024-newYear/css/index.scss

@@ -790,6 +790,26 @@ body {
             background: url(../images/rewardBg.png) no-repeat;
             background-size: 100% 100%;
             margin: 0 auto 0;
+            position: relative;
+
+            .bo {
+                position: absolute;
+                width: px2rem(52);
+                height: px2rem(52);
+                left: px2rem(141);
+            }
+
+            .bo1 {
+                top: px2rem(744);
+            }
+
+            .bo2 {
+                top: px2rem(1725);
+            }
+
+            .bo3 {
+                top: px2rem(2892);
+            }
         }
     }
 }
@@ -865,11 +885,44 @@ body {
     margin: px2rem(50) auto px2rem(180);
 }
 
+.video {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    video {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 65%;
+    }
+
+    .close {
+        width: px2rem(68);
+        height: px2rem(68);
+        position: absolute;
+        top: 10%;
+        right: px2rem(70);
+        z-index: 9;
+    }
+}
+
 .arabic {
     .header {
         background: url(../images/header-ar.png) no-repeat;
         background-size: 100% 100%;
     }
+
+    .page2 .content .box {
+        background: url(../images/rewardBg-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
 }
 
 .china {
@@ -877,6 +930,11 @@ body {
         background: url(../images/header-zh.png) no-repeat;
         background-size: 100% 100%;
     }
+
+    .page2 .content .box {
+        background: url(../images/rewardBg-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
 }
 
 .Turkiye {
@@ -884,4 +942,9 @@ body {
         background: url(../images/header-tr.png) no-repeat;
         background-size: 100% 100%;
     }
+
+    .page2 .content .box {
+        background: url(../images/rewardBg-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
 }

view/molistar/activity/2024-newYear/index.html

@@ -149,7 +149,11 @@
             </div>
         </div>
         <div class="content">
-            <div class="box"></div>
+            <div class="box">
+                <img src="./images/bo.png" alt="" class="bo bo1">
+                <img src="./images/bo.png" alt="" class="bo bo2">
+                <img src="./images/bo.png" alt="" class="bo bo3">
+            </div>
         </div>
         <div class="bottom"></div>
     </div>
@@ -160,10 +164,29 @@
             <img src="./images/close.png" alt="" class="close">
             <div class="titles text133"></div>
             <div class="text text13">
-                
+
             </div>
         </div>
     </div>
+    <!-- MP4 -->
+    <div class="video video1">
+        <video id="zjVideo1" controls>
+            <source src="./mp4/1.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video video2">
+        <video id="zjVideo2" controls>
+            <source src="./mp4/2.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video video3">
+        <video id="zjVideo3" controls>
+            <source src="./mp4/3.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
 </body>
 
 </html>

view/molistar/activity/2024-newYear/js/index.js

@@ -137,9 +137,9 @@ function getConfig() {
                 listTo3.forEach((res, i) => {
                     $(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
                     $(`.page1 .top .top${i + 1} .name b`).text(res.name);
-                    $(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo.experUrl);
+                    $(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
                     $(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
-                    $(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum));
+                    $(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
                     if (res.erbanNo == null) {
                         $(`.page1 .top .top${i + 1} .name img`).hide();
                         $(`.page1 .top .top${i + 1} .id`).hide();
@@ -150,12 +150,12 @@ function getConfig() {
                 loadMore();
                 // 处理自己榜单数据
                 var my = res.data.myRank;
-                $('.page1 .my .tx').text("src", my.avatar);
+                $('.page1 .my .tx').attr("src", my.avatar);
                 $('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
                 $('.page1 .my .info p b').text(my.name);
                 $('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
                 $('.page1 .my .info span').text(`ID:${my.erbanNo}`);
-                $('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 1));
+                $('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
             } else {
                 toastMsg(res.message)
             }
@@ -189,7 +189,7 @@ function loadMore() {
                     </div>
                     <div class="score">
                         <img src="./images/box.png" alt="">
-                        <b>${unitProcessingAr(res.totalNum)}</b>
+                        <b>${unitProcessingAr(res.totalNum, 2)}</b>
                     </div>
                 </li>
         `
@@ -272,4 +272,35 @@ function getzf(num) {
         num = '0' + num;
     }
     return num;
-}
+}
+
+// 打开mp4弹窗
+$('.page2 .content .box .bo1').click(function () {
+    var video = document.getElementById('zjVideo1');
+    video.play();
+    bodyScroolFun(true);
+    $('.video1').show();
+})
+$('.page2 .content .box .bo2').click(function () {
+    var video = document.getElementById('zjVideo2');
+    video.play();
+    bodyScroolFun(true);
+    $('.video2').show();
+})
+$('.page2 .content .box .bo3').click(function () {
+    var video = document.getElementById('zjVideo3');
+    video.play();
+    bodyScroolFun(true);
+    $('.video3').show();
+})
+// 关闭mp4弹窗
+$('.video .close').click(function () {
+    var video1 = document.getElementById('zjVideo1');
+    var video2 = document.getElementById('zjVideo2');
+    var video3 = document.getElementById('zjVideo3');
+    video1.pause();
+    video2.pause();
+    video3.pause();;
+    bodyScroolFun(false);
+    $('.video').hide();
+})