修复样式，以及进度异常问题

view/molistar/modules/dailyConsumption/css/index.css

@@ -266,12 +266,23 @@ body {
   background-size: 100% 100%;
 }
 
+.tab .tabbox {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .tab .act {
   color: #290C05;
   background: url(../images/act.png) no-repeat;
   background-size: 100% 100%;
 }
 
+.tab .act2 {
+  color: #290C05;
+  background: url(../images/tabact2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .content1 {
   width: 10rem;
   height: auto;
@@ -403,6 +414,7 @@ body {
   border-radius: 50%;
   left: 0;
   top: 0;
+  border: 0.04rem #FFED70 solid;
 }
 
 .content1 .contentBox1 .priorityWinnersBox div span,
@@ -420,6 +432,7 @@ body {
   position: absolute;
   left: 0;
   bottom: -0.6rem;
+  height: 0.4rem;
 }
 
 .content1 .contentBox2 .box {
@@ -731,6 +744,11 @@ body {
   margin-bottom: 0.45333rem;
 }
 
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .arabic .myBox .tetxBox {
   direction: ltr;
 }

view/molistar/modules/dailyConsumption/css/index.scss

@@ -269,11 +269,22 @@ body {
         background-size: 100% 100%;
     }
 
+    .tabbox {
+        background: url(../images/tab2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
     .act {
         color: #290C05;
         background: url(../images/act.png) no-repeat;
         background-size: 100% 100%;
     }
+
+    .act2 {
+        color: #290C05;
+        background: url(../images/tabact2.png) no-repeat;
+        background-size: 100% 100%;
+    }
 }
 
 .content1 {
@@ -382,6 +393,7 @@ body {
                     border-radius: 50%;
                     left: 0;
                     top: 0;
+                    border: px2rem(3) #FFED70 solid;
                 }
 
                 span {
@@ -397,6 +409,7 @@ body {
                     position: absolute;
                     left: 0;
                     bottom: -0.6rem;
+                    height: 0.4rem;
                 }
             }
         }
@@ -689,6 +702,11 @@ body {
 }
 
 .arabic {
+    .header {
+        background: url(../images/header-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
     .myBox .tetxBox {
         direction: ltr;
     }

view/molistar/modules/dailyConsumption/index.html

@@ -57,12 +57,12 @@
     </div>
     <!-- tab -->
     <div class="tab">
-        <div class="act text7"></div>
+        <div class="tabbox act text7"></div>
         <div class="text8"></div>
     </div>
     <!-- 档位1 -->
     <div class="content1">
-        <div class="contentBox1">
+        <div class="contentBox1 level3">
             <!-- 标题 -->
             <div class="title">
                 <span><strong class="text9"></strong></span><img src="./images/gold.png" alt="">
@@ -77,7 +77,7 @@
             <div class="priorityWinnersBox">
             </div>
         </div>
-        <div class="contentBox2">
+        <div class="contentBox2 level2">
             <!-- 标题 -->
             <div class="title">
                 <span><strong class="text10"></strong></span><img src="./images/gold.png" alt="">
@@ -100,7 +100,7 @@
                 </div> -->
             </div>
         </div>
-        <div class="contentBox3">
+        <div class="contentBox3 level1">
             <!-- 标题 -->
             <div class="title">
                 <span><strong class="text11"></strong></span><img src="./images/gold.png" alt="">
@@ -118,7 +118,7 @@
     </div>
     <!-- 档位2 -->
     <div class="content2">
-        <div class="contentBox1">
+        <div class="contentBox1 level6">
             <!-- 标题 -->
             <div class="title">
                 <span class="text12"></span><img src="./images/gold.png" alt="">
@@ -135,7 +135,7 @@
             <div class="priorityWinnersBox">
             </div>
         </div>
-        <div class="contentBox2">
+        <div class="contentBox2 level5">
             <!-- 标题 -->
             <div class="title">
                 <span><strong class="text13"></strong></span><img src="./images/gold.png" alt="">
@@ -160,7 +160,7 @@
                 </div> -->
             </div>
         </div>
-        <div class="contentBox3">
+        <div class="contentBox3 level4">
             <!-- 标题 -->
             <div class="title">
                 <span><strong class="text14"></strong></span><img src="./images/gold.png" alt="">
@@ -178,19 +178,19 @@
     </div>
     <div class="null"></div>
     <div class="video">
-        <video id="zjVideo" controls>
+        <video id="zjVideo" controls playsinline webkit-playsinline>
             <source src="./video/zj7.mp4" type="video/mp4">
         </video>
         <img src="./images/close.png" alt="" class="close">
     </div>
     <div class="video2">
-        <video id="zjVideo2" controls>
+        <video id="zjVideo2" controls playsinline webkit-playsinline>
             <source src="./video/xz7.mp4" type="video/mp4">
         </video>
         <img src="./images/close.png" alt="" class="close">
     </div>
     <div class="video3">
-        <video id="zjVideo3" controls>
+        <video id="zjVideo3" controls playsinline webkit-playsinline>
             <source src="./video/xz3500.mp4" type="video/mp4">
         </video>
         <img src="./images/close.png" alt="" class="close">

view/molistar/modules/dailyConsumption/js/index.js

@@ -116,7 +116,7 @@ function translateFun() {
         $('.null').text(langReplace(localLang.demoModule.text16));
     }
 }
-console.log(unitProcessingAr(210000, 1));
+console.log(unitProcessingAr(7000000, 1));
 // 配置接口
 function getConfig() {
     showLoading()
@@ -136,6 +136,7 @@ function getConfig() {
                 $('.myBox .tx').attr('src', res.data.avatar);
                 $('.myBox .name').text(res.data.nick);
                 $('.myBox .tetxBox .r b').text(res.data.goldNum);
+                console.log(res.data.goldNum < 700000);
                 if (res.data.goldNum < 700000) {
                     $('.myBox .tetxBox .r strong').text(700000);
                     $('.myBox .lineBox .box1 span b').text('70K');
@@ -144,39 +145,48 @@ function getConfig() {
                     $('.myBox .lineBox .box2').css('left', `${(350000 / 700000) * 100}%`);
                     $('.myBox .lineBox .box3 span b').text('700K');
                     $('.myBox .lineBox .box3').css('right', `0%`);
-                    $('.myBox .lineBox .line').css('width', `${(res.data.goldNum / 700000) * 100}%`);
+                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 700000) * 100) > 100 ? 100 : (res.data.goldNum / 700000) * 100}%`);
                     res.data.goldNum >= 70000 ? $('.myBox .lineBox .box1').addClass('act') : res.data.goldNum >= 350000 ? $('.myBox .lineBox .box2').addClass('act') : res.data.goldNum >= 700000 ? $('.myBox .lineBox .box3').addClass('act') : ''
                 } else {
                     $('.myBox .tetxBox .r strong').text(7000000);
-                    $('.myBox .lineBox .box1 span b').text('70K');
+                    $('.myBox .lineBox .box1 span b').text('210K');
                     $('.myBox .lineBox .box1').css('left', `${(70000 / 7000000) * 100}%`);
-                    $('.myBox .lineBox .box2 span b').text('350K');
+                    $('.myBox .lineBox .box2 span b').text('3500K');
                     $('.myBox .lineBox .box2').css('left', `${(3500000 / 7000000) * 100}%`);
-                    $('.myBox .lineBox .box3 span b').text('700K');
+                    $('.myBox .lineBox .box3 span b').text('7M');
                     $('.myBox .lineBox .box3').css('right', `0`);
-                    $('.myBox .lineBox .line').css('width', `${(res.data.goldNum / 7000000) * 100}%`);
+                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 7000000) * 100) > 100 ? 100 : (res.data.goldNum / 7000000) * 100}%`);
                     res.data.goldNum >= 210000 ? $('.myBox .lineBox .box1').addClass('act') : res.data.goldNum >= 3500000 ? $('.myBox .lineBox .box2').addClass('act') : res.data.goldNum >= 7000000 ? $('.myBox .lineBox .box3').addClass('act') : ''
                 }
                 // 处理每个档位的用户前四名
                 res.data.activityLevelUserVo.forEach((res, i) => {
                     var str = '';
-                    if ((i + 1) <= 3) {
+                    if ((res.level) <= 3) {
-                        $(`.content1 .contentBox${i + 1} .priorityWinnersBox div`).remove();
+                        $(`.content1 .level${res.level} .priorityWinnersBox div`).remove();
                     } else {
-                        $(`.content2 .contentBox${i + 1} .priorityWinnersBox div`).remove();
+                        $(`.content2 .level${res.level} .priorityWinnersBox div`).remove();
                     }
-                    res.userVos.forEach(val => {
+                    if (res.userVos.length > 0) {
-                        str += `
+                        res.userVos.forEach(val => {
+                            str += `
                                 <div>
                                     <img src="${val.avatar}" alt="">
                                     <span>${val.name}</span>
                                 </div>
                         `
-                    })
+                        })
-                    if ((i + 1) <= 3) {
-                        $(`.content1 .contentBox${i + 1} .priorityWinnersBox`).append(str);
                     } else {
-                        $(`.content2 .contentBox${i + 1} .priorityWinnersBox`).append(str);
+                        str += `
+                                <div>
+                                    <img src="./images/null.png" alt="">
+                                    <span>${localLang.demoModule.waiting}</span>
+                                </div>
+                        `
+                    }
+                    if ((res.level) <= 3) {
+                        $(`.content1 .level${res.level} .priorityWinnersBox`).append(str);
+                    } else {
+                        $(`.content2 .level${res.level} .priorityWinnersBox`).append(str);
                     }
                 })
             } else {
@@ -233,7 +243,7 @@ $('.tab div').click(function () {
     var i = $(this).index() + 1;
     $('.content1,.content2').hide();
     $(`.content${i}`).show();
-    $(this).addClass('act').siblings().removeClass('act')
+    $(this).addClass(`${i == 2 ? 'act2' : 'act'}`).siblings().removeClass('act').removeClass('act2')
 })
 // 打开mp4弹窗
 $('.content2 .contentBox1 .box .zjIcon').click(function () {

view/molistar/modules/dailyConsumption/local/ar.js

@@ -53,6 +53,7 @@ langAr = {
         ملاحظة:<br>
         1. هذا النشاط ليس له علاقة بـ Google و Apple.
     </p>
-        `
+        `,
+        waiting: `ي انتظار`,
     }
 }

view/molistar/modules/dailyConsumption/local/en.js

@@ -52,6 +52,7 @@ langEn = {
             Attention:<br>
             1. This activity has nothing to do with Google and Apple.
         </p>
-        `
+        `,
+        waiting: `Waiting`,
     }
 }

view/molistar/modules/dailyConsumption/local/zh.js

@@ -53,6 +53,7 @@ langZh = {
         注意：<br>
         1. 此活動與 Google 和 Apple 無關。
     </p>
-        `
+        `,
+        waiting: `等待中`,
     }
 }