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

2024-10-15 15:50:54 +08:00
parent 911f5b4788
commit deaf973b3e
11 changed files with 78 additions and 29 deletions
--- a/view/molistar/modules/dailyConsumption/css/index.css
+++ b/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;
 }
--- a/view/molistar/modules/dailyConsumption/css/index.scss
+++ b/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;
    }
--- a/view/molistar/modules/dailyConsumption/images/header-ar.png
+++ b/view/molistar/modules/dailyConsumption/images/header-ar.png
--- a/view/molistar/modules/dailyConsumption/images/null.png
+++ b/view/molistar/modules/dailyConsumption/images/null.png
--- a/view/molistar/modules/dailyConsumption/images/tab2.png
+++ b/view/molistar/modules/dailyConsumption/images/tab2.png
--- a/view/molistar/modules/dailyConsumption/images/tabact2.png
+++ b/view/molistar/modules/dailyConsumption/images/tabact2.png
--- a/view/molistar/modules/dailyConsumption/index.html
+++ b/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">
--- a/view/molistar/modules/dailyConsumption/js/index.js
+++ b/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) {
-                        $(`.content1 .contentBox${i + 1} .priorityWinnersBox div`).remove();
+                    if ((res.level) <= 3) {
+                        $(`.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 => {
-                        str += `
+                    if (res.userVos.length > 0) {
+                        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 () {
--- a/view/molistar/modules/dailyConsumption/local/ar.js
+++ b/view/molistar/modules/dailyConsumption/local/ar.js
@@ -53,6 +53,7 @@ langAr = {
        ملاحظة:<br>
        1. هذا النشاط ليس له علاقة بـ Google و Apple.
    </p>
-        `
+        `,
+        waiting: `ي انتظار`,
    }
 }
--- a/view/molistar/modules/dailyConsumption/local/en.js
+++ b/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`,
    }
 }
--- a/view/molistar/modules/dailyConsumption/local/zh.js
+++ b/view/molistar/modules/dailyConsumption/local/zh.js
@@ -53,6 +53,7 @@ langZh = {
        注意：<br>
        1. 此活動與 Google 和 Apple 無關。
    </p>
-        `
+        `,
+        waiting: `等待中`,
    }
 }