房间等级修改

view/molistar/activity/rechargeNew/index.html

@@ -42,7 +42,7 @@
     <!-- 我的充值 -->
     <div class="myRecharge">
         <div class="title text7"></div>
-        <p><b>$0</b><img style="display: none;" src="./images/why.png" alt=""></p>
+        <p><b>$0</b><img src="./images/why.png" alt=""></p>
         <div class="but text8"></div>
     </div>
     <!-- 充值档位到达10 -->
@@ -224,6 +224,121 @@
             <div class="but text10"></div>
         </div>
     </div>
+    <!-- 充值档位到达5000 -->
+    <div class="recharge5000 recharge7 recharges">
+        <div class="top">
+            <div class="title">Recharge $5000</div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <div class="rewardImg">
+                <div class="ts" id="txTop5000"></div>
+                <img src="./images/bo.png" alt="" class="bo">
+                <img src="./images/why.png" alt="" class="why">
+            </div>
+            <!-- 前三标题 -->
+            <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b class="text26"></b>
+                <img src="./images/right.png" alt="" class="right">
+            </div>
+            <!-- 前三信息 -->
+            <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达8000 -->
+    <div class="recharge8000 recharge8 recharges">
+        <div class="top">
+            <div class="title">Recharge $8000</div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <div class="rewardImg">
+                <div class="ts" id="txTop8000"></div>
+                <img src="./images/bo.png" alt="" class="bo">
+                <img src="./images/why.png" alt="" class="why">
+            </div>
+            <!-- 前三标题 -->
+            <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b class="text26"></b>
+                <img src="./images/right.png" alt="" class="right">
+            </div>
+            <!-- 前三信息 -->
+            <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
+    <!-- 充值档位到达10000 -->
+    <div class="recharge10000 recharge9 recharges">
+        <div class="top">
+            <div class="title">Recharge $10000</div>
+        </div>
+        <div class="content">
+            <!-- 奖励图片 -->
+            <div class="rewardImg">
+                <div class="ts" id="txTop10000"></div>
+                <img src="./images/bo.png" alt="" class="bo">
+                <img src="./images/why.png" alt="" class="why">
+                <img src="./images/why.png" alt="" class="why why2">
+            </div>
+            <!-- 前三标题 -->
+            <div class="topTitle">
+                <img src="./images/left.png" alt="" class="left">
+                <b class="text26"></b>
+                <img src="./images/right.png" alt="" class="right">
+            </div>
+            <!-- 前三信息 -->
+            <div class="topBox">
+                <div class="no2">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top2.png" alt="" class="ts">
+                </div>
+                <div class="no1">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top1.png" alt="" class="ts">
+                </div>
+                <div class="no3">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/top3.png" alt="" class="ts">
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="but text10"></div>
+        </div>
+    </div>
     <!-- 弹窗 -->
     <div class="pub">
         <div class="pub_in">
@@ -239,15 +354,32 @@
             </div>
         </div>
     </div>
-
     <!-- 免责声明 -->
     <div class="disclaimer text24"></div>
-    <div class="video">
+    <div class="video video3000">
         <video id="zjVideo" controls>
             <source src="./mp4/3000.mp4" type="video/mp4">
         </video>
         <img src="./images/close.png" alt="" class="close">
     </div>
+    <div class="video video5000">
+        <video id="zjVideo5000" controls>
+            <source src="./mp4/5000.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video video8000">
+        <video id="zjVideo8000" controls>
+            <source src="./mp4/8000.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video video10000">
+        <video id="zjVideo10000" controls>
+            <source src="./mp4/10000.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
 
 </body>
 
@@ -259,8 +391,9 @@
 <script src="../../common/js/vconsole.min.js"></script>
 <script src="../../common/js/route-constant.js"></script>
 <script src="../../common/js/svga.min.js"></script>
-<script src="./local/en.js"></script>
-<script src="./local/zh.js"></script>
-<script src="./local/ar.js"></script>
+<script src="./local/en.js?v=1.0"></script>
+<script src="./local/zh.js?v=1.0"></script>
+<script src="./local/ar.js?v=1.0"></script>
+<script src="./local/tr.js?v=1.0"></script>
 <script src="./js/index.js"></script>
 <script src="../../common/local/langHandler.js"></script>

view/molistar/activity/rechargeNew/js/index.js

@@ -81,6 +81,9 @@ document.addEventListener('DOMContentLoaded', function () {
     loadSVGA('ts500', './svga/500.svga');
     loadSVGA('ts1000', './svga/1000.svga');
     loadSVGA('ts3000', './svga/3000.svga');
+    loadSVGA('txTop5000', './svga/txTop.svga');
+    loadSVGA('txTop8000', './svga/txTop.svga');
+    loadSVGA('txTop10000', './svga/txTop.svga');
     loadSVGA('zj10', './svga/zj10.svga');
     loadSVGA('zj100', './svga/zj100.svga');
     loadSVGA('zj300', './svga/zj300.svga');
@@ -125,9 +128,9 @@ function getConfig() {
                 wealth = res.data.wealth;
                 limitWealth = res.data.limitWealth;
                 // 处理是否我的充值展示
-                if(res.data.rechargeUser){
+                if (res.data.rechargeUser) {
                     $('.myRecharge').hide();
-                }else{
+                } else {
                     $('.myRecharge').show();
                 }
                 // 处理倒计时
@@ -179,7 +182,6 @@ $('.myRecharge .but').click(function () {
         if (channel == "google") {
             window.androidJsObj.openChargePage(6);
         } else {
-            window.androidJsObj.openChargePage(6);
             window.location.href = urlPrefix + '/molistar/modules/pay/index.html?channelType=4';
         }
     } else if (browser.ios) {
@@ -187,7 +189,6 @@ $('.myRecharge .but').click(function () {
         if (channel == "appstore") {
             window.webkit.messageHandlers.openChargePage.postMessage(null);
         } else {
-            window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
             window.location.href = urlPrefix + '/molistar/modules/pay/index.html?channelType=4';
         }
     }
@@ -215,6 +216,38 @@ $('.recharge3000 .content .rewardImg .why').click(function () {
     $('.pub ').show();
     bodyScroolFun(true);
 })
+// 打开5000头饰弹窗
+$('.recharge5000 .content .rewardImg .why').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeTextWhy');
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.headdressTitle));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.headdressText));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
+// 打开8000头饰弹窗
+$('.recharge8000 .content .rewardImg .why').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeTextWhy');
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.headdressTitle));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.headdressText));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
+// 打开10000头饰弹窗
+$('.recharge10000 .content .rewardImg .why2').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeTextWhy');
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.headdressTitle));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.headdressText));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
+// 打开10000座驾弹窗
+$('.recharge10000 .content .rewardImg .why').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeTextWhy');
+    $('.pub .pub_in .title').html(langReplace(localLang.demoModule.carTitle));
+    $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.carText));
+    $('.pub ').show();
+    bodyScroolFun(true);
+})
 // 关闭弹窗
 $('.pub .pub_in .close').click(function () {
     $('.pub .pub_in .centent').removeClass('myRechargeText');
@@ -291,12 +324,39 @@ $('.recharge3000 .content .rewardImg .bo').click(function () {
     var video = document.getElementById('zjVideo');
     video.play();
     bodyScroolFun(true);
-    $('.video').show();
+    $('.video3000').show();
+})
+// 打开mp4弹窗
+$('.recharge5000 .content .rewardImg .bo').click(function () {
+    var video = document.getElementById('zjVideo5000');
+    video.play();
+    bodyScroolFun(true);
+    $('.video5000').show();
+})
+// 打开mp4弹窗
+$('.recharge8000 .content .rewardImg .bo').click(function () {
+    var video = document.getElementById('zjVideo8000');
+    video.play();
+    bodyScroolFun(true);
+    $('.video8000').show();
+})
+// 打开mp4弹窗
+$('.recharge10000 .content .rewardImg .bo').click(function () {
+    var video = document.getElementById('zjVideo10000');
+    video.play();
+    bodyScroolFun(true);
+    $('.video10000').show();
 })
 // 关闭mp4弹窗
 $('.video .close').click(function () {
     var video = document.getElementById('zjVideo');
+    var video5000 = document.getElementById('zjVideo5000');
+    var video8000 = document.getElementById('zjVideo8000');
+    var video10000 = document.getElementById('zjVideo10000');
     video.pause();
+    video5000.pause();
+    video8000.pause();
+    video10000.pause();
     bodyScroolFun(false);
     $('.video').hide();
 })

view/molistar/activity/rechargeNew/local/ar.js

@@ -23,13 +23,15 @@ langAr = {
         text16: `إعادة شحن $3000`,
         text17: `القواعد`,
         text18: `
-        <p>1، وقت نشاط إعادة الشحن: من 00:00:00 في اليوم الأول من كل شهر إلى 23:59:59 في اليوم الأخير من الشهر (GMT+3).</p>
-        <p>2، يمكنك الحصول على مكافأة كل درجة مرة واحدة فقط.</p>
-        <p>3، عند انتهاء كل جولة من الأنشطة، ستنتهي المكافآت تلقائيًا.</p>
-        <p>4، اتصل بخدمة العملاء الرسمية للحصول على معرفك الفريد!</p>
-        <p>5، لا يمكن لوكيل الشحن الانضمام إلى النشاط.</p>
-        <p>6، هذا الحدث ليس مرتبطًا بجوجل/أبل.</p>
-        `,
+<p>1. وقت نشاط الشحن: من الساعة 0:00:00 في اليوم الأول من كل شهر إلى الساعة 23:59:59 في آخر يوم من الشهر (GMT+3).</p>
+<p>2. يمكنك الحصول على كل مكافأة مرتبة مرة واحدة فقط.</p>
+<p>3. بعد انتهاء كل جولة من الأنشطة، ستنتهي صلاحية المكافآت تلقائيًا.</p>
+<p>4. تواصل مع خدمة العملاء الرسمية للحصول على معرفك الفريد!</p>
+<p>5. لا يمكن لوكلاء الشحن المشاركة في النشاط.</p>
+<p>6. يمكن للمستخدمين تخصيص هدية أو مركبة أو غطاء رأس مرة واحدة في الشهر إذا قاموا بالشحن إلى المستوى المطلوب.</p>
+<p>7. هذا الحدث غير مرتبط بجوجل/آبل.</p>
+`,
+
         text19: `إعادة شحن شهريتي`,
         text20: `
         <p>1، تشمل طرق إعادة الشحن Google وApple الداخلية وما إلى ذلك.</p>
@@ -41,5 +43,10 @@ langAr = {
         text24: `هذا الحدث غير مرتبط بشركة أبل.`,
         text25: `هذا الحدث غير مرتبط بشركة جوجل.`,
         text26: `أفضل 3 فائزين`,
+        headdressTitle: 'تاج مخصص',
+        headdressText: '<p>يمكنك إرسال لقبك الفريد إلى خدمة العملاء الرسمية لتخصيص تاجك المخصص</p>',
+        carTitle: 'سيارة مخصصة',
+        carText: '<p>يمكنك إرسال صورتك الرمزية الفريدة ولقبك إلى خدمة العملاء الرسمية لتخصيص سيارتك المخصصة</p>'
+
     }
 }

view/molistar/activity/rechargeNew/local/en.js

@@ -26,7 +26,8 @@ langEn = {
         <p>3. Each round of activities end, the rewards will automatically expire.</p>
         <p>4. Contact our official customer service to get your unique ID!</p>
         <p>5. Recharge agent can not join the activity.</p>
-        <p>6. This event is not related to Google/Apple.</p>
+        <p>6. Users can customize gift, vehicle or headwear once a month if they recharge to the corresponding level.</p>
+        <p>7. This event is not related to Google/Apple.</p>
     `,
         text19: `My Monthly Recharge`,
         text20: `
@@ -39,5 +40,9 @@ langEn = {
         text24: `This event is not related to Apple.`,
         text25: `This event is not related to Google.`,
         text26: `Top 3 Winner`,
+        headdressTitle: `Customized Headdress`,
+        headdressText: `<p>You can send your unique nickname to the official customer service to customize your customized headdress</p>`,
+        carTitle: `Customized Car`,
+        carText: `<p>You can send your unique avatar and nickname to the official customer service to customize your customized car</p>`,
     }
 }

view/molistar/activity/rechargeNew/local/tr.js

@@ -0,0 +1,49 @@
+langTr = {
+    demoModule: {
+        layerIndex1: 'Yükleniyor...',
+        layerIndex2: 'Başarılı',
+        layerIndex3: 'Ağ hatası',
+        text1: 'Aylık yeniden doldurma',
+        text2: 'Kurallar',
+        text3: 'Gün',
+        text4: 'Saat',
+        text5: 'Dakika',
+        text6: 'Saniye',
+        text7: 'Yeniden Doldurmam',
+        text8: 'Yeniden Doldur',
+        text9: '10$ Yeniden Doldur',
+        text10: 'Ödül Al',
+        text11: '100$ Yeniden Doldur',
+        text12: '300$ Yeniden Doldur',
+        text13: 'İlk 3 Kazanan',
+        text14: '500$ Yeniden Doldur',
+        text15: '1000$ Yeniden Doldur',
+        text16: '3000$ Yeniden Doldur',
+        text17: 'Kurallar',
+        text18: `
+<p>1. Şarj etkinliği süresi: Her ayın 1. günü saat 00:00:00'dan ayın son günü saat 23:59:59'a kadar (GMT+3).</p>
+<p>2. Her derece ödülünü yalnızca bir kez alabilirsiniz.</p>
+<p>3. Her etkinlik turu sona erdiğinde, ödüller otomatik olarak sona erecektir.</p>
+<p>4. Benzersiz kimliğinizi almak için resmi müşteri hizmetlerimizle iletişime geçin!</p>
+<p>5. Şarj acenteleri etkinliğe katılamaz.</p>
+<p>6. Kullanıcılar, ilgili seviyeye şarj ettikleri takdirde ayda bir hediye, araç veya başlık özelleştirebilirler.</p>
+<p>7. Bu etkinlik Google/Apple ile ilişkili değildir.</p>
+`,
+
+        text19: 'Aylık Yeniden Doldurmam',
+        text20: `
+            <p>1. Yeniden doldurma yöntemleri Google, Apple içi satın alma vb. içerir.</p>
+            <p>2. Yeniden doldurma aracısı etkinliğe katılamaz.</p>
+        `,
+        text21: 'Özelleştirilmiş Hediye',
+        text22: '<p>Özelleştirilmiş hediyenizi almak için özel videonuzu müşteri hizmetlerimize gönderebilirsiniz.</p>',
+        text23: 'Alındı',
+        text24: 'Bu etkinlik Apple ile ilişkili değildir.',
+        text25: 'Bu etkinlik Google ile ilişkili değildir.',
+        text26: 'İlk 3 Kazanan',
+        headdressTitle: 'Özelleştirilmiş Taç',
+        headdressText: '<p>Benzersiz takma adınızı resmi müşteri hizmetlerine göndererek özelleştirilmiş tacınızı oluşturabilirsiniz</p>',
+        carTitle: 'Özelleştirilmiş Araç',
+        carText: '<p>Benzersiz avatarınızı ve takma adınızı resmi müşteri hizmetlerine göndererek özelleştirilmiş aracınızı oluşturabilirsiniz</p>',
+    }
+}

view/molistar/activity/rechargeNew/local/zh.js

@@ -23,13 +23,15 @@ langZh = {
         text16: `充值 $3000`,
         text17: `規則`,
         text18: `
-        <p>1、充值活動時間：每月1日00:00:00到每月最後一天23:59:59（GMT+3）。</p>
-        <p>2、每個等級的獎勵只能獲得一次。</p>
-        <p>3、每輪活動結束後，獎勵將自動過期。</p>
-        <p>4、聯系客服獲取您的唯一ID！</p>
-        <p>5、充值代理不能參加活動。</p>
-        <p>6、該活動與谷歌/蘋果無關。</p>
-        `,
+<p>1. 充值活動時間：每月1日的0:00:00至每月最後一天的23:59:59（GMT+3）。</p>
+<p>2. 每個等級的獎勵只能獲得一次。</p>
+<p>3. 每輪活動結束後，獎勵將自動失效。</p>
+<p>4. 聯繫我們的官方客服以獲取您的專屬ID！</p>
+<p>5. 充值代理無法參與此活動。</p>
+<p>6. 用戶若充值至對應等級，每月可定制一次禮物、座駕或頭飾。</p>
+<p>7. 此活動與Google/Apple無關。</p>
+`,
+
         text19: `我的月度充值`,
         text20: `
         <p>1、充值方式包括Google、Apple內購等。</p>
@@ -41,5 +43,10 @@ langZh = {
         text24: `本活動與蘋果無關`,
         text25: `本活動與谷歌無關`,
         text26: `前3名獲獎者`,
+        headdressTitle: '定制頭飾',
+        headdressText: '<p>您可以將您的獨特暱稱發送給官方客服，來定制您的專屬頭飾</p>',
+        carTitle: '定制車輛',
+        carText: '<p>您可以將您的獨特頭像和暱稱發送給官方客服，來定制您的專屬車輛</p>'
+
     }
 }

view/molistar/common/local/langHandler.js

@@ -34,7 +34,7 @@ function initLocalLang() {
         window.lang.code = 'id'
         window.lang.defaults = false
     } else if (lang === 'tr' || window.location.href.match('=tr')) {
-        if (window.location.href.match('2024-newYear') || window.location.href.match('guild-ar') || window.location.href.match('2024-invitationFission') || window.location.href.match('inform') || window.location.href.match('superId') || window.location.href.match('newWeekStar') || window.location.href.match('home') || window.location.href.match('pay')) {
+        if (window.location.href.match('newRank') || window.location.href.match('roomLevel') || window.location.href.match('rechargeNew') || window.location.href.match('2024-newYear') || window.location.href.match('guild-ar') || window.location.href.match('2024-invitationFission') || window.location.href.match('inform') || window.location.href.match('superId') || window.location.href.match('newWeekStar') || window.location.href.match('home') || window.location.href.match('pay')) {
             // 土耳其
             console.log("langHandler" + '土耳其')
             window.lang = langTr

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

@@ -12,13 +12,13 @@ langAr = {
         text5: `ثانية`,
         text6: `استهلاك العملات`,
         text7: `استهلاك 70K-700K`,
-        text8: `استهلاك 210K-7M`,
+        text8: `استهلاك 2.1M-7M`,
         text9: `استهلاك 700K`,
         text10: `استهلاك 350K`,
         text11: `استهلاك 70K`,
         text12: `استهلاك 7M`,
-        text13: `استهلاك 3500K`,
-        text14: `استهلاك 210K`,
+        text13: `استهلاك 3.5M`,
+        text14: `استهلاك 2.1M`,
         text15: `هذا الحدث لا علاقة له بـ Apple`,
         text16: `هذا الحدث لا علاقة له بـ Google`,
         priorityWinners: `الفائزون ذوو الأولوية`,

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

@@ -10,13 +10,13 @@ langEn = {
         text5: `Sec`,
         text6: `Consume coins`,
         text7: `Consume 70K-700K`,
-        text8: `Consume 210K-7M`,
+        text8: `Consume 2.1M-7M`,
         text9: `Consume 700K`,
         text10: `Consume 350K`,
         text11: `Consume 70K`,
         text12: `Consume 7M`,
-        text13: `Consume 3500K`,
-        text14: `Consume 210K`,
+        text13: `Consume 3.5M`,
+        text14: `Consume 2.1M`,
         text15: `This event has nothing to do with Apple`,
         text16: `This event has nothing to do with Google`,
         priorityWinners: `Priority Winners`,

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

@@ -12,13 +12,13 @@ langZh = {
         text5: `秒`,
         text6: `消耗金幣`,
         text7: `消耗 70K-700K`,
-        text8: `消耗 210K-700萬`,
+        text8: `消耗 2.1M-700萬`,
         text9: `消耗 700K`,
         text10: `消耗 350K`,
         text11: `消耗 70K`,
         text12: `消耗 700萬`,
-        text13: `消耗 3500K`,
-        text14: `消耗 210K`,
+        text13: `消耗 3.5M`,
+        text14: `消耗 2.1M`,
         text15: `此活動與 Apple 無關`,
         text16: `此活動與 Google 無關`,
         priorityWinners: `優先獲勝者`,

view/molistar/modules/guild-ar/bill.html

@@ -59,7 +59,7 @@
     <script src="./local/zh.js"></script>
     <script src="./local/ar.js"></script>
     <script src="./local/tr.js"></script>
-    <script src="./js/bill.js"></script>
+    <script src="./js/bill.js?v=1.0"></script>
     <script src="../../common/local/langHandler.js"></script>
 </body>
 

view/molistar/modules/guild-ar/css/salary.css

@@ -590,7 +590,7 @@ html {
   display: flex;
   align-items: center;
   position: absolute;
-  top: 0.4rem;
+  top: 0.29333rem;
   left: 2.02667rem;
 }
 
@@ -616,6 +616,38 @@ html {
   height: 0.32rem;
 }
 
+.agent_pop .agent_pop_in .wrap li .starLevel,
+.agent_pop .president_pop_in .wrap li .starLevel,
+.president_pop .agent_pop_in .wrap li .starLevel,
+.president_pop .president_pop_in .wrap li .starLevel {
+  height: 0.4rem;
+  line-height: 0.4rem;
+  display: flex;
+  position: absolute;
+  left: 2.02667rem;
+  top: 1.28rem;
+}
+
+.agent_pop .agent_pop_in .wrap li .starLevel span,
+.agent_pop .president_pop_in .wrap li .starLevel span,
+.president_pop .agent_pop_in .wrap li .starLevel span,
+.president_pop .president_pop_in .wrap li .starLevel span {
+  height: 0.4rem;
+  margin-right: 0.10667rem;
+  color: #7B7B7D;
+  font-size: 0.34667rem;
+}
+
+.agent_pop .agent_pop_in .wrap li .starLevel img,
+.agent_pop .president_pop_in .wrap li .starLevel img,
+.president_pop .agent_pop_in .wrap li .starLevel img,
+.president_pop .president_pop_in .wrap li .starLevel img {
+  width: 0.4rem;
+  height: 0.4rem;
+  display: block;
+  margin: 0 0.04rem;
+}
+
 .agent_pop .agent_pop_in .wrap li .id,
 .agent_pop .president_pop_in .wrap li .id,
 .president_pop .agent_pop_in .wrap li .id,
@@ -624,7 +656,7 @@ html {
   font-size: 0.34667rem;
   color: #7b7b7d;
   position: absolute;
-  bottom: 0.45333rem;
+  top: 0.88rem;
   left: 2.02667rem;
 }
 
@@ -848,6 +880,10 @@ html {
   border-radius: 0.66667rem;
 }
 
+.arabic .agent_pop .agent_pop_in .wrap li {
+  direction: ltr;
+}
+
 .arabic .nav .back {
   right: 0.4rem;
   left: unset;

view/molistar/modules/guild-ar/css/salary.scss

@@ -560,7 +560,7 @@ html {
           display: flex;
           align-items: center;
           position: absolute;
-          top: px2rem(15);
+          top: px2rem(11);
           left: px2rem(76);
 
           p {
@@ -581,12 +581,35 @@ html {
           }
         }
 
+        .starLevel {
+          height: px2rem(15);
+          line-height: px2rem(15);
+          display: flex;
+          position: absolute;
+          left: px2rem(76);
+          top: px2rem(48);
+
+          span {
+            height: px2rem(15);
+            margin-right: px2rem(4);
+            color: #7B7B7D;
+            font-size: px2rem(13);
+          }
+
+          img {
+            width: px2rem(15);
+            height: px2rem(15);
+            display: block;
+            margin: 0 px2rem(1.5);
+          }
+        }
+
         .id {
           font-weight: 400;
           font-size: px2rem(13);
           color: #7b7b7d;
           position: absolute;
-          bottom: px2rem(17);
+          top: px2rem(33);
           left: px2rem(76);
         }
       }
@@ -806,6 +829,9 @@ html {
 }
 
 .arabic {
+  .agent_pop .agent_pop_in .wrap li{
+    direction: ltr;
+  }
   .nav {
     .back {
       right: px2rem(15);

view/molistar/modules/guild-ar/js/bill.js

@@ -107,7 +107,7 @@ function getData() {
                                 </div>
                                 <div>
                                         <span>${langReplace(localLang.bill.text4)}${item.beforeUsdNum}ÜS -> ${item.afterUsdNum}ÜS</span>
-                                        <span>${dateFormat(item.createTime, 'yyyy/MM/dd hh:mm:ss')}</span>
+                                        <span>${item.createTime}</span>
                                 </div>
                             </li>`
                     //     } else {

view/molistar/modules/guild-ar/js/salary.js

@@ -142,6 +142,10 @@ function getTab() {
                     <img src="" alt="" class="flag">
                   </dic>
                   <p class="id">ID:${res.erbanNo}</p>
+                  <div class="starLevel">
+                   <span>${langReplace(localLang.salary.textnew18)}</span>
+                   ${starFun(res)}
+                  </div>
                 </li>
             `
           })
@@ -191,6 +195,22 @@ function getTab() {
     }
   })
 }
+// 处理星级
+function starFun(res) {
+  var str = '';
+  var starNum = 5;
+  for (let index = 1; index <= res.starLevel; index++) {
+    str += `
+      <img src="./images/starAct.png" alt="" class="star">
+    `
+  }
+  for (let index = 1; index <= starNum - res.starLevel; index++) {
+    str += `
+      <img src="./images/star.png" alt="" class="star">
+    `
+  }
+  return str;
+}
 // 选择代理人列表
 $('.agent_pop .wrap').on('click', 'li', function () {
   var uid = $(this).attr('uid');

view/molistar/modules/guild-ar/local/ar.js

@@ -279,7 +279,8 @@ langAr = {
         textnew14: `أكثر من الحد الأقصى للمبلغ القابل للتحويل.`,
         textnew15: `نجاح`,
         textnew16: `وقت معالجة طلبات السحب يكون من اليوم الثالث إلى العاشر من كل شهر.`,
-        textnew17: `موافق`,
+        textnew17: `موافق`,textnew18: 'تقييم النجوم:',
+
     },
     bill: {
         text1: `الفاتورة`,

view/molistar/modules/guild-ar/local/en.js

@@ -280,6 +280,7 @@ langEn = {
         textnew15: `Success`,
         textnew16: `The processing time for withdrawal requests is from the 3rd to the 10th of every month.`,
         textnew17: `OK`,
+        textnew18: `Star rating:`,
     },
     bill: {
         text1: `Bill`,

view/molistar/modules/guild-ar/local/tr.js

@@ -279,7 +279,8 @@ langTr = {
         textnew14: `Maksimum transfer edilebilir miktardan fazla.`,
         textnew15: `Başarı`,
         textnew16: `Çekim taleplerinin işlenme süresi her ayın 3'ü ile 10'u arasındadır.`,
-        textnew17: `Tamam`,
+        textnew17: `Tamam`, textnew18: 'Yıldız puanı:',
+
     },
     bill: {
         text1: `Fatura`,

view/molistar/modules/guild-ar/local/zh.js

@@ -281,7 +281,8 @@ langZh = {
         textnew14: `超過最大可轉賬金額。`,
         textnew15: `成功`,
         textnew16: `提款申請的處理時間為每月3日至10日。`,
-        textnew17: `確定`,
+        textnew17: `確定`,textnew18: '星級評分：',
+
     },
     bill: {
         text1: `賬單`,

view/molistar/modules/guild-ar/salary_account.html

@@ -14,7 +14,7 @@
   <meta http-equiv="expires" content="" />
   <script src="../../common/js/flexible.js"></script>
   <link rel="stylesheet" href="../../common/css/reset.css" />
-  <link rel="stylesheet" href="css/salary.css" />
+  <link rel="stylesheet" href="css/salary.css?v=2.0" />
 </head>
 
 <body>

view/molistar/modules/myincome/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>molistar</title><link href=./static/css/app.d1c2b68dc5139c43e9ebe1829075d68c.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.272774d75bca469e2f4c.js></script><script type=text/javascript src=./static/js/vendor.ef63a6e67767f10f7bb6.js></script><script type=text/javascript src=./static/js/app.d54d862a2d7e9c963263.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>molistar</title><link href=./static/css/app.d1c2b68dc5139c43e9ebe1829075d68c.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.f8cc02553244364f2c4b.js></script><script type=text/javascript src=./static/js/vendor.ef63a6e67767f10f7bb6.js></script><script type=text/javascript src=./static/js/app.d54d862a2d7e9c963263.js></script></body></html>

view/molistar/modules/myincome/static/js/manifest.f8cc02553244364f2c4b.js

@@ -1,2 +1,2 @@
-!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var f,i,u,d=0,s=[];d<r.length;d++)i=r[d],t[i]&&s.push(t[i][0]),t[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(n&&n(r,a,c);s.length;)s.shift()();if(c)for(d=0;d<c.length;d++)u=o(o.s=c[d]);return u};var r={},t={15:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"30fbedff4ed0e375ac3d",1:"f7fd3566ec61ced38fe8",2:"48bde5b1f5f3eaa3c75f",3:"00bcf5022e7d98b672a2",4:"c9d5b75efaa28b779e79",5:"93d874959b80a4ee1da1",6:"de3228ef1e13c7d6649c",7:"a1746a1c89c587b75f6f",8:"67319477a4c5ac59b510",9:"cf187b6df4a386b203eb",10:"f6e85397f46b6b94d58d",11:"a5e798e367bdaa3003e9",12:"b8ac2b08a54dd44dc799"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
-//# sourceMappingURL=manifest.272774d75bca469e2f4c.js.map
+!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var f,i,u,d=0,b=[];d<r.length;d++)i=r[d],t[i]&&b.push(t[i][0]),t[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(n&&n(r,a,c);b.length;)b.shift()();if(c)for(d=0;d<c.length;d++)u=o(o.s=c[d]);return u};var r={},t={15:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"870a31b2b5a5125962ab",1:"f7fd3566ec61ced38fe8",2:"48bde5b1f5f3eaa3c75f",3:"00bcf5022e7d98b672a2",4:"c9d5b75efaa28b779e79",5:"93d874959b80a4ee1da1",6:"de3228ef1e13c7d6649c",7:"a1746a1c89c587b75f6f",8:"67319477a4c5ac59b510",9:"cf187b6df4a386b203eb",10:"f6e85397f46b6b94d58d",11:"a5e798e367bdaa3003e9",12:"b8ac2b08a54dd44dc799"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
+//# sourceMappingURL=manifest.f8cc02553244364f2c4b.js.map

view/molistar/modules/newRank/css/index.css

@@ -1,7 +1,8 @@
 html,
 body {
   width: 100%;
-  background: #fff;
+  background: #1C0E04;
+  overflow-x: hidden;
 }
 
 .back {
@@ -10,7 +11,7 @@ body {
   line-height: 0.58667rem;
   position: fixed;
   left: 0;
-  top: 0.86667rem;
+  top: 1.33333rem;
   text-align: center;
   color: #FFFFFF;
   font-size: 0.50667rem;
@@ -24,33 +25,54 @@ body {
   position: absolute;
   left: 0.24rem;
   top: 0rem;
+  z-index: 2;
+}
+
+.back p {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+  text-align: center;
+  color: #FFF8C2;
+  font-size: 0.42667rem;
+  font-weight: 600;
 }
 
 .header {
   width: 10rem;
-  height: 11.70667rem;
+  height: 17rem;
   position: relative;
   margin: 0 auto;
 }
 
 .header .tabBox {
-  width: 7.6rem;
-  height: 0.46667rem;
-  line-height: 0.46667rem;
+  width: 10rem;
+  height: 1.12rem;
+  line-height: 1.12rem;
   display: flex;
   justify-content: space-between;
   position: absolute;
-  top: 1.52rem;
+  top: 2.17333rem;
   left: 50%;
   transform: translateX(-50%);
+  box-sizing: border-box;
+  padding: 0 0.14667rem;
+  z-index: 2;
 }
 
 .header .tabBox div {
   position: relative;
-  width: 1.32rem;
-  color: #C3BEBA;
-  font-size: 0.42667rem;
-  font-weight: 400;
+  width: 2.32rem;
+  height: 1.12rem;
+  color: #FFF8C2;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
 }
 
 .header .tabBox div span {
@@ -66,8 +88,10 @@ body {
 }
 
 .header .tabBox .act {
-  color: #fff;
+  color: #000;
   font-weight: bold;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .header .tabBox .act span {
@@ -76,48 +100,79 @@ body {
 
 .header .sTab {
   position: absolute;
-  width: 6.13333rem;
-  height: 0.74667rem;
-  top: 2.77333rem;
+  min-width: 4.8rem;
+  height: 0.73333rem;
+  top: 3.6rem;
   left: 50%;
   transform: translateX(-50%);
-  background: rgba(255, 255, 255, 0.4);
+  background: rgba(0, 0, 0, 0.5);
   border-radius: 0.74667rem;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
+  z-index: 2;
 }
 
 .header .sTab div {
-  width: 3.06667rem;
+  min-width: 2.26667rem;
   height: 0.74667rem;
   line-height: 0.74667rem;
   border-radius: 0.74667rem;
-  color: #DBD6CF;
-  font-size: 0.4rem;
-  font-weight: 400;
+  color: #FFF8C2;
+  font-size: 0.37333rem;
+  font-weight: 500;
   text-align: center;
 }
 
 .header .sTab .act {
-  color: #6D6D6D;
-  background: #fff;
+  color: #000;
+  background: url(../images/butAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .monthlyRewards {
+  width: 3.46667rem;
+  height: 3.86667rem;
+  z-index: 3;
+  position: absolute;
+  top: 3.69333rem;
+  right: -0.5rem;
+  background: url(../images/Rewards_icon.png) no-repeat;
+  background-size: 100% 100%;
+  color: #000;
+  font-size: 0.34667rem;
+  font-weight: 500;
+}
+
+.header .monthlyRewards p {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  right: 0;
+  top: 2.69333rem;
+}
+
+.header .monthlyRewards b {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  right: 0;
+  top: 3.08rem;
 }
 
 .header .top {
-  width: 9.61333rem;
-  height: 4.02667rem;
+  width: 10rem;
+  height: 11.78667rem;
   position: absolute;
-  top: 7.86667rem;
+  top: 4.50667rem;
   left: 50%;
   transform: translateX(-50%);
 }
 
 .header .top .top1 {
   position: absolute;
-  top: -4rem;
-  width: 7.4rem;
-  height: 4.01333rem;
+  width: 10rem;
+  height: 6.66667rem;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -132,27 +187,29 @@ body {
 }
 
 .header .top .top1 .tx {
-  width: 2.34667rem;
-  height: 2.58667rem;
+  width: 2.77333rem;
+  height: 2.74667rem;
   position: absolute;
-  top: 0.93333rem;
+  top: 1.89333rem;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;
 }
 
 .header .top .top1 .nick {
-  width: 100%;
+  width: 50%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #fff;
+  color: #FFF8C2;
   font-size: 0.37333rem;
   text-align: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.46667rem;
+  top: 4.61333rem;
+  z-index: 3;
+  font-weight: 500;
 }
 
 .header .top .top1 .fist {
@@ -161,34 +218,44 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -2.88rem;
+  top: 4.8rem;
+  z-index: 3;
+  display: none;
 }
 
 .header .top .top1 .score {
   width: 100%;
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  color: #fff;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  color: #FFF8C2;
   font-size: 0.34667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -2.26667rem;
+  top: 4.8rem;
   text-align: center;
+  z-index: 3;
+  font-weight: 400;
+  display: flex;
+  justify-content: center;
 }
 
 .header .top .top1 .score img {
   display: inline-block;
-  width: 0.45333rem;
-  height: 0.45333rem;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.header .top .top1 .score span {
+  display: inline-block;
 }
 
 .header .top .top2 {
   position: absolute;
-  top: -1.52rem;
-  width: 2.82667rem;
-  height: 3.04rem;
-  left: 0.44rem;
+  top: 6.66667rem;
+  width: 5rem;
+  height: 5.12rem;
+  left: 0rem;
   z-index: 2;
 }
 
@@ -202,55 +269,61 @@ body {
 }
 
 .header .top .top2 .tx {
-  width: 1.78667rem;
-  height: 1.78667rem;
+  width: 1.86667rem;
+  height: 1.86667rem;
   position: absolute;
-  top: 0.88rem;
+  top: 1.22667rem;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;
 }
 
 .header .top .top2 .nick {
-  width: 100%;
+  width: 50%;
   height: 0.5rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #fff;
+  color: #FFF8C2;
+  font-weight: 500;
   font-size: 0.37333rem;
   text-align: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -0.68rem;
+  top: 3.01333rem;
+  z-index: 3;
 }
 
 .header .top .top2 .score {
   width: 100%;
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  color: #fff;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  color: #FFF8C2;
   font-size: 0.34667rem;
+  font-weight: 400;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.33333rem;
+  top: 3.38667rem;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  z-index: 3;
 }
 
 .header .top .top2 .score img {
   display: inline-block;
-  width: 0.45333rem;
-  height: 0.45333rem;
+  width: 0.4rem;
+  height: 0.4rem;
 }
 
 .header .top .top3 {
   position: absolute;
-  top: -1.52rem;
-  width: 2.82667rem;
-  height: 3.04rem;
-  right: 0.44rem;
+  top: 6.66667rem;
+  width: 5rem;
+  height: 5.12rem;
+  right: 0rem;
   z-index: 2;
 }
 
@@ -264,99 +337,93 @@ body {
 }
 
 .header .top .top3 .tx {
-  width: 1.78667rem;
-  height: 1.78667rem;
+  width: 1.86667rem;
+  height: 1.86667rem;
   position: absolute;
-  top: 0.88rem;
+  top: 1.22667rem;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;
 }
 
 .header .top .top3 .nick {
-  width: 100%;
+  width: 50%;
   height: 0.5rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #fff;
+  color: #FFF8C2;
+  font-weight: 500;
   font-size: 0.37333rem;
   text-align: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -0.68rem;
+  top: 3.01333rem;
+  z-index: 3;
 }
 
 .header .top .top3 .score {
   width: 100%;
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  color: #fff;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  color: #FFF8C2;
   font-size: 0.34667rem;
+  font-weight: 400;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.33333rem;
+  top: 3.38667rem;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  z-index: 3;
 }
 
 .header .top .top3 .score img {
   display: inline-block;
-  width: 0.45333rem;
-  height: 0.45333rem;
-}
-
-.header .tops1 {
-  background: url(../images/bg1.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-.header .tops2 {
-  background: url(../images/bg2.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-.header .tops3 {
-  background: url(../images/bg3.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-.header .tops4 {
-  background: url(../images/bg4.png) no-repeat;
-  background-size: 100% 100%;
+  width: 0.4rem;
+  height: 0.4rem;
 }
 
 .header1 {
   background: url(../images/header1.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: 100% 14.26667rem;
 }
 
 .header2 {
   background: url(../images/header2.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: 100% 14.26667rem;
 }
 
 .header3 {
   background: url(../images/header3.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: 100% 14.26667rem;
+}
+
+.header3 .top .top1 .tx,
+.header3 .top .top2 .tx,
+.header3 .top .top3 .tx {
+  border-radius: 0;
 }
 
 .header4 {
   background: url(../images/header4.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: 100% 14.26667rem;
+}
+
+.header4 .top .top1 .tx,
+.header4 .top .top2 .tx,
+.header4 .top .top3 .tx {
+  border-radius: 0;
 }
 
 ul {
   width: 10rem;
-  height: 12.16rem;
   position: relative;
   z-index: 2;
-  margin: -0.6rem auto 2.04rem;
-  border-radius: 0.72rem 0.72rem 0px 0px;
+  margin: 0rem auto 2.04rem;
   box-sizing: border-box;
-  padding-top: 0.50667rem;
-  padding: 0.50667rem 0.45333rem 0 0.45333rem;
   overflow-y: scroll;
 }
 
@@ -366,162 +433,197 @@ ul::-webkit-scrollbar {
 
 ul li {
   width: 100%;
-  height: 1.33333rem;
-  margin-bottom: 0.74667rem;
+  height: 2rem;
+  margin-bottom: 0.4rem;
+  background: url(../images/li.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
 }
 
 ul li .seqNo {
-  width: 0.66667rem;
-  height: 1.33333rem;
-  line-height: 1.33333rem;
+  width: 0.88rem;
+  height: 1.05333rem;
+  line-height: 1.05333rem;
   text-align: center;
-  color: #15132B;
-  margin-right: 0.49333rem;
-  font-weight: 500;
-  float: left;
+  color: #000;
+  font-size: 0.50667rem;
+  font-weight: 600;
+  position: absolute;
+  top: -0.10667rem;
+  left: 0.82667rem;
+  background: url(../images/num.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 ul li .tx {
   display: block;
   float: left;
-  width: 1.33333rem;
-  height: 1.33333rem;
+  width: 1.2rem;
+  height: 1.2rem;
   border-radius: 50%;
-  margin-right: 0.28rem;
+  margin-left: 1.94667rem;
+  margin-right: 0.24rem;
+  margin-top: 0.41333rem;
+  border: 0.02667rem solid #FFF8C2;
 }
 
 ul li .nick {
   width: 2.5rem;
-  height: 1.33333rem;
-  line-height: 1.33333rem;
+  height: 2rem;
+  line-height: 2rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   float: left;
+  color: #FFF8C2;
+  font-size: 0.37333rem;
+  font-weight: 500;
 }
 
 ul li .score {
-  height: 1.33333rem;
-  line-height: 1.33333rem;
+  height: 2rem;
+  line-height: 2rem;
   float: right;
-  color: #333333;
+  color: #FFF8C2;
   font-size: 0.34667rem;
-  font-weight: 500;
+  font-weight: 400;
+  margin-right: 1.17333rem;
 }
 
 ul li .score img {
   display: inline-block;
-  width: 0.42667rem;
-  height: 0.42667rem;
+  width: 0.4rem;
+  height: 0.4rem;
   vertical-align: middle;
 }
 
-ul li .score span {
+ul li .score span,
+ul li .score b {
   vertical-align: middle;
 }
 
-.ul1 {
-  background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%);
-}
-
-.ul2 {
-  background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
-}
-
-.ul3 {
-  background: linear-gradient(180deg, #FABBBB -57%, #FEF9F9 90%);
-}
-
-.ul4 {
-  background: linear-gradient(180deg, #FFC6F5 -57%, #F9F7F9 90%);
-  margin-bottom: 0;
+.ul3 li .tx,
+.ul4 li .tx {
+  border-radius: 0.24rem;
 }
 
 .my {
   width: 10rem;
-  height: 2.04rem;
+  height: 2rem;
   position: fixed;
   z-index: 9;
-  background: url(../images/myBg.png) no-repeat;
+  background: url(../images/myLi.png) no-repeat;
   background-size: 100% 100%;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   bottom: 0;
 }
 
 .my .box {
   width: 100%;
-  height: 1.33333rem;
-  margin-top: 0.46667rem;
-  box-sizing: border-box;
-  padding: 0 0.4rem;
+  height: 100%;
+  position: relative;
 }
 
 .my .box .seqNo {
-  width: 0.66667rem;
-  height: 1.33333rem;
-  line-height: 1.33333rem;
+  width: 0.88rem;
+  height: 1.05333rem;
+  line-height: 1.05333rem;
   text-align: center;
-  color: #15132B;
-  margin-right: 0.49333rem;
-  font-weight: 500;
-  float: left;
+  color: #000;
+  font-size: 0.50667rem;
+  font-weight: 600;
+  position: absolute;
+  top: -0.10667rem;
+  left: 0.82667rem;
+  background: url(../images/num.png) no-repeat;
+  background-size: 100% 100%;
 }
 
 .my .box .tx {
   display: block;
   float: left;
-  width: 1.33333rem;
-  height: 1.33333rem;
+  width: 1.2rem;
+  height: 1.2rem;
   border-radius: 50%;
-  margin-right: 0.28rem;
+  margin-left: 1.94667rem;
+  margin-right: 0.24rem;
+  margin-top: 0.41333rem;
 }
 
 .my .box .nick {
   width: 2.5rem;
-  height: 1.33333rem;
-  line-height: 1.33333rem;
+  height: 2rem;
+  line-height: 2rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   float: left;
+  color: #FFF8C2;
+  font-size: 0.37333rem;
+  font-weight: 500;
 }
 
 .my .box .score {
-  height: 1.33333rem;
-  line-height: 1.33333rem;
+  height: 2rem;
+  line-height: 2rem;
   float: right;
-  color: #333333;
+  color: #FFF8C2;
   font-size: 0.34667rem;
-  font-weight: 500;
+  font-weight: 400;
+  margin-right: 1.17333rem;
 }
 
 .my .box .score img {
   display: inline-block;
-  width: 0.42667rem;
-  height: 0.42667rem;
+  width: 0.4rem;
+  height: 0.4rem;
   vertical-align: middle;
 }
 
-.my .box .score span {
+.my .box .score span,
+.my .box .score b {
   vertical-align: middle;
 }
 
-.arabic .header .tabBox {
-  width: 90%;
+.arabic ul li .seqNo {
+  left: auto;
+  right: 0.82667rem;
 }
 
-.arabic .header .tabBox div {
-  width: 1.9rem;
-  font-size: 0.33333rem;
-  white-space: nowrap;
+.arabic ul li .tx {
+  float: right;
+  margin-left: 0.24rem;
+  margin-right: 1.94667rem;
 }
 
-.english .header .tabBox {
-  width: 90%;
+.arabic ul li .nick {
+  float: right;
 }
 
-.english .header .tabBox div {
-  font-size: 0.34667rem;
-  white-space: nowrap;
-  width: 1.7rem;
+.arabic ul li .score {
+  float: left;
+  margin-right: 0;
+  margin-left: 1.17333rem;
+}
+
+.arabic .my .box .seqNo {
+  left: auto;
+  right: 0.82667rem;
+}
+
+.arabic .my .box .tx {
+  float: right;
+  margin-left: 0.24rem;
+  margin-right: 1.94667rem;
+}
+
+.arabic .my .box .nick {
+  float: right;
+}
+
+.arabic .my .box .score {
+  float: left;
+  margin-right: 0;
+  margin-left: 1.17333rem;
 }

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

@@ -5,7 +5,8 @@
 html,
 body {
     width: 100%;
-    background: #fff;
+    background: #1C0E04;
+    overflow-x: hidden;
 }
 
 .back {
@@ -14,7 +15,7 @@ body {
     line-height: px2rem(44);
     position: fixed;
     left: 0;
-    top: px2rem(65);
+    top: px2rem(100);
     text-align: center;
     color: #FFFFFF;
     font-size: px2rem(38);
@@ -27,32 +28,54 @@ body {
         position: absolute;
         left: px2rem(18);
         top: px2rem(0);
+        z-index: 2;
+    }
+
+    p {
+        width: 100%;
+        height: px2rem(44);
+        line-height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+        text-align: center;
+        color: #FFF8C2;
+        font-size: px2rem(32);
+        font-weight: 600;
     }
 }
 
 .header {
     width: px2rem(750);
-    height: px2rem(878);
+    // height: px2rem(1229);
+    height: 17rem;
     position: relative;
     margin: 0 auto;
 
     .tabBox {
-        width: px2rem(570);
-        height: px2rem(35);
-        line-height: px2rem(35);
+        width: px2rem(750);
+        height: px2rem(84);
+        line-height: px2rem(84);
         display: flex;
         justify-content: space-between;
         position: absolute;
-        top: px2rem(114);
+        top: px2rem(163);
         left: 50%;
         transform: translateX(-50%);
+        box-sizing: border-box;
+        padding: 0 px2rem(11);
+        z-index: 2;
 
         div {
             position: relative;
-            width: px2rem(99);
-            color: #C3BEBA;
-            font-size: px2rem(32);
-            font-weight: 400;
+            width: px2rem(174);
+            height: px2rem(84);
+            color: #FFF8C2;
+            font-size: px2rem(28);
+            font-weight: 600;
+            background: url(../images/tab.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
 
             span {
                 width: px2rem(37);
@@ -68,8 +91,10 @@ body {
         }
 
         .act {
-            color: #fff;
+            color: #000;
             font-weight: bold;
+            background: url(../images/tabAct.png) no-repeat;
+            background-size: 100% 100%;
 
             span {
                 display: block;
@@ -79,47 +104,82 @@ body {
 
     .sTab {
         position: absolute;
-        width: px2rem(460);
-        height: px2rem(56);
-        top: px2rem(208);
+        // min-width: px2rem(510);
+        min-width: 4.8rem;
+        height: px2rem(55);
+        top: px2rem(270);
         left: 50%;
         transform: translateX(-50%);
-        background: rgba(255, 255, 255, .4);
+        background: rgba(0, 0, 0, .5);
         border-radius: px2rem(56);
         display: flex;
         justify-content: space-between;
         overflow: hidden;
+        z-index: 2;
 
         div {
-            width: px2rem(230);
+            min-width: px2rem(170);
             height: px2rem(56);
             line-height: px2rem(56);
             border-radius: px2rem(56);
-            color: #DBD6CF;
-            font-size: px2rem(30);
-            font-weight: 400;
+            color: #FFF8C2;
+            font-size: px2rem(28);
+            font-weight: 500;
             text-align: center;
         }
 
         .act {
-            color: #6D6D6D;
-            background: #fff;
+            color: #000;
+            background: url(../images/butAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .monthlyRewards {
+        width: px2rem(260);
+        height: px2rem(290);
+        z-index: 3;
+        position: absolute;
+        top: px2rem(277);
+        right: -0.5rem;
+        background: url(../images/Rewards_icon.png) no-repeat;
+        background-size: 100% 100%;
+        color: #000;
+        font-size: px2rem(26);
+        font-weight: 500;
+        // display: none;
+
+        p {
+            position: absolute;
+            width: 100%;
+            text-align: center;
+            right: 0;
+            top: px2rem(202);
+        }
+
+        b {
+            position: absolute;
+            width: 100%;
+            text-align: center;
+            right: 0;
+            top: 3.08rem;
         }
     }
 
     .top {
-        width: px2rem(721);
-        height: px2rem(302);
+        width: px2rem(750);
+        height: px2rem(884);
         position: absolute;
-        top: px2rem(590);
+        top: px2rem(338);
+        // top: 8.3rem;
         left: 50%;
         transform: translateX(-50%);
 
         .top1 {
             position: absolute;
-            top: px2rem(-300);
-            width: px2rem(555);
-            height: px2rem(301);
+            // top: px2rem(-300);
+            width: px2rem(750);
+            height: px2rem(500);
             left: 50%;
             transform: translateX(-50%);
 
@@ -133,27 +193,29 @@ body {
             }
 
             .tx {
-                width: px2rem(176);
-                height: px2rem(194);
+                width: px2rem(208);
+                height: px2rem(206);
                 position: absolute;
-                top: px2rem(70);
+                top: px2rem(142);
                 left: 50%;
                 transform: translateX(-50%);
                 border-radius: 50%;
             }
 
             .nick {
-                width: 100%;
+                width: 50%;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                color: #fff;
+                color: #FFF8C2;
                 font-size: px2rem(28);
                 text-align: center;
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-110);
+                top: px2rem(346);
+                z-index: 3;
+                font-weight: 500;
             }
 
             .fist {
@@ -162,36 +224,47 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-216);
+                top: px2rem(360);
+                z-index: 3;
+                display: none;
             }
+
             .score {
                 width: 100%;
-                height: px2rem(32);
-                line-height: px2rem(32);
-                color: #fff;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                color: #FFF8C2;
                 font-size: px2rem(26);
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-170);
+                top: px2rem(360);
                 text-align: center;
+                z-index: 3;
+                font-weight: 400;
+                display: flex;
+                justify-content: center;
 
                 img {
                     display: inline-block;
-                    width: px2rem(34);
-                    height: px2rem(34);
-                    // margin-top: -0.04rem;
+                    width: px2rem(30);
+                    height: px2rem(30);
+                }
+
+                span {
+                    display: inline-block;
                 }
             }
         }
 
         .top2 {
             position: absolute;
-            top: px2rem(-114);
-            width: px2rem(212);
-            height: px2rem(228);
-            left: px2rem(33);
+            top: px2rem(500);
+            width: px2rem(375);
+            height: px2rem(384);
+            left: px2rem(0);
             z-index: 2;
+            // display: none;
 
             .ts {
                 width: 100%;
@@ -203,58 +276,64 @@ body {
             }
 
             .tx {
-                width: px2rem(134);
-                height: px2rem(134);
+                width: px2rem(140);
+                height: px2rem(140);
                 position: absolute;
-                top: px2rem(66);
+                top: px2rem(92);
                 left: 50%;
                 transform: translateX(-50%);
                 border-radius: 50%;
             }
 
             .nick {
-                width: 100%;
+                width: 50%;
                 height: 0.5rem;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                color: #fff;
+                color: #FFF8C2;
+                font-weight: 500;
                 font-size: px2rem(28);
                 text-align: center;
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-51);
+                top: px2rem(226);
+                z-index: 3;
             }
 
             .score {
                 width: 100%;
-                height: px2rem(32);
-                line-height: px2rem(32);
-                color: #fff;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                color: #FFF8C2;
                 font-size: px2rem(26);
+                font-weight: 400;
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-100);
+                top: px2rem(254);
                 text-align: center;
+                display: flex;
+                justify-content: center;
+                z-index: 3;
 
                 img {
                     display: inline-block;
-                    width: px2rem(34);
-                    height: px2rem(34);
-                    // margin-top: -0.04rem;
+                    width: px2rem(30);
+                    height: px2rem(30);
                 }
             }
         }
 
         .top3 {
             position: absolute;
-            top: px2rem(-114);
-            width: px2rem(212);
-            height: px2rem(228);
-            right: px2rem(33);
+            top: px2rem(500);
+            width: px2rem(375);
+            height: px2rem(384);
+            right: px2rem(0);
             z-index: 2;
+            // display: none;
 
             .ts {
                 width: 100%;
@@ -266,103 +345,127 @@ body {
             }
 
             .tx {
-                width: px2rem(134);
-                height: px2rem(134);
+                width: px2rem(140);
+                height: px2rem(140);
                 position: absolute;
-                top: px2rem(66);
+                top: px2rem(92);
                 left: 50%;
                 transform: translateX(-50%);
                 border-radius: 50%;
             }
 
             .nick {
-                width: 100%;
+                width: 50%;
                 height: 0.5rem;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                color: #fff;
+                color: #FFF8C2;
+                font-weight: 500;
                 font-size: px2rem(28);
                 text-align: center;
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-51);
+                top: px2rem(226);
+                z-index: 3;
             }
 
             .score {
                 width: 100%;
-                height: px2rem(32);
-                line-height: px2rem(32);
-                color: #fff;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                color: #FFF8C2;
                 font-size: px2rem(26);
+                font-weight: 400;
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(-100);
+                top: px2rem(254);
                 text-align: center;
+                display: flex;
+                justify-content: center;
+                z-index: 3;
 
                 img {
                     display: inline-block;
-                    width: px2rem(34);
-                    height: px2rem(34);
-                    // margin-top: -0.04rem;
+                    width: px2rem(30);
+                    height: px2rem(30);
                 }
             }
         }
     }
 
-    .tops1 {
-        background: url(../images/bg1.png) no-repeat;
-        background-size: 100% 100%;
-    }
+    // .tops1 {
+    //     background: url(../images/bg1.png) no-repeat;
+    //     background-size: 100% 100%;
+    // }
 
-    .tops2 {
-        background: url(../images/bg2.png) no-repeat;
-        background-size: 100% 100%;
-    }
+    // .tops2 {
+    //     background: url(../images/bg2.png) no-repeat;
+    //     background-size: 100% 100%;
+    // }
 
-    .tops3 {
-        background: url(../images/bg3.png) no-repeat;
-        background-size: 100% 100%;
-    }
+    // .tops3 {
+    //     background: url(../images/bg3.png) no-repeat;
+    //     background-size: 100% 100%;
+    // }
 
-    .tops4 {
-        background: url(../images/bg4.png) no-repeat;
-        background-size: 100% 100%;
-    }
+    // .tops4 {
+    //     background: url(../images/bg4.png) no-repeat;
+    //     background-size: 100% 100%;
+    // }
 }
 
 .header1 {
     background: url(../images/header1.png) no-repeat;
-    background-size: 100% 100%;
+    background-size: 100% px2rem(1070);
 }
 
 .header2 {
     background: url(../images/header2.png) no-repeat;
-    background-size: 100% 100%;
+    background-size: 100% px2rem(1070);
 }
 
 .header3 {
     background: url(../images/header3.png) no-repeat;
-    background-size: 100% 100%;
+    background-size: 100% px2rem(1070);
+
+    .top {
+
+        .top1,
+        .top2,
+        .top3 {
+            .tx {
+                border-radius: 0;
+            }
+        }
+    }
 }
 
 .header4 {
     background: url(../images/header4.png) no-repeat;
-    background-size: 100% 100%;
+    background-size: 100% px2rem(1070);
+
+    .top {
+
+        .top1,
+        .top2,
+        .top3 {
+            .tx {
+                border-radius: 0;
+            }
+        }
+    }
 }
 
 ul {
     width: px2rem(750);
-    height: px2rem(912);
+    // height: px2rem(912);
     position: relative;
     z-index: 2;
-    margin: px2rem(-45) auto px2rem(153);
-    border-radius: px2rem(54) px2rem(54) 0px 0px;
+    margin: px2rem(0) auto px2rem(153);
     box-sizing: border-box;
-    padding-top: px2rem(38);
-    padding: px2rem(38) px2rem(34) 0 px2rem(34);
     overflow-y: scroll;
 
     &::-webkit-scrollbar {
@@ -371,143 +474,168 @@ ul {
 
     li {
         width: 100%;
-        height: px2rem(100);
-        margin-bottom: px2rem(56);
+        height: px2rem(150);
+        margin-bottom: px2rem(30);
+        background: url(../images/li.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
 
         .seqNo {
-            width: px2rem(50);
-            height: px2rem(100);
-            line-height: px2rem(100);
+            width: px2rem(66);
+            height: px2rem(79);
+            line-height: px2rem(79);
             text-align: center;
-            color: #15132B;
-            margin-right: px2rem(37);
-            font-weight: 500;
-            float: left;
+            color: #000;
+            font-size: px2rem(38);
+            font-weight: 600;
+            position: absolute;
+            top: px2rem(-8);
+            left: px2rem(62);
+            background: url(../images/num.png) no-repeat;
+            background-size: 100% 100%;
         }
 
         .tx {
             display: block;
             float: left;
-            width: px2rem(100);
-            height: px2rem(100);
+            width: px2rem(90);
+            height: px2rem(90);
             border-radius: 50%;
-            margin-right: px2rem(21);
+            margin-left: px2rem(146);
+            margin-right: px2rem(18);
+            margin-top: px2rem(31);
+            border: px2rem(2) solid #FFF8C2;
         }
 
         .nick {
             width: 2.5rem;
-            height: px2rem(100);
-            line-height: px2rem(100);
+            height: px2rem(150);
+            line-height: px2rem(150);
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             float: left;
+            color: #FFF8C2;
+            font-size: px2rem(28);
+            font-weight: 500;
         }
 
         .score {
-            height: px2rem(100);
-            line-height: px2rem(100);
+            height: px2rem(150);
+            line-height: px2rem(150);
             float: right;
-            color: #333333;
+            color: #FFF8C2;
             font-size: px2rem(26);
-            font-weight: 500;
+            font-weight: 400;
+            margin-right: px2rem(88);
 
             img {
                 display: inline-block;
-                width: px2rem(32);
-                height: px2rem(32);
+                width: px2rem(30);
+                height: px2rem(30);
                 vertical-align: middle;
                 // margin-top: -0.1rem;
             }
 
-            span {
+            span,
+            b {
                 vertical-align: middle;
             }
         }
     }
 }
 
-.ul1 {
-    background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%);
-}
+// .ul1 {
+//     background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%);
+// }
 
-.ul2 {
-    background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
-}
-
-.ul3 {
-    background: linear-gradient(180deg, #FABBBB -57%, #FEF9F9 90%);
-}
+// .ul2 {
+//     background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%);
+// }
 
+.ul3,
 .ul4 {
-    background: linear-gradient(180deg, #FFC6F5 -57%, #F9F7F9 90%);
-    margin-bottom: 0;
+    li {
+        .tx {
+            border-radius: px2rem(18);
+        }
+    }
 }
 
 .my {
     width: px2rem(750);
-    height: px2rem(153);
+    height: px2rem(150);
     position: fixed;
     z-index: 9;
-    background: url(../images/myBg.png) no-repeat;
+    background: url(../images/myLi.png) no-repeat;
     background-size: 100% 100%;
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
     bottom: 0;
 
     .box {
         width: 100%;
-        height: px2rem(100);
-        margin-top: px2rem(35);
-        box-sizing: border-box;
-        padding: 0 px2rem(30);
+        height: 100%;
+        position: relative;
 
         .seqNo {
-            width: px2rem(50);
-            height: px2rem(100);
-            line-height: px2rem(100);
+            width: px2rem(66);
+            height: px2rem(79);
+            line-height: px2rem(79);
             text-align: center;
-            color: #15132B;
-            margin-right: px2rem(37);
-            font-weight: 500;
-            float: left;
+            color: #000;
+            font-size: px2rem(38);
+            font-weight: 600;
+            position: absolute;
+            top: px2rem(-8);
+            left: px2rem(62);
+            background: url(../images/num.png) no-repeat;
+            background-size: 100% 100%;
         }
 
         .tx {
             display: block;
             float: left;
-            width: px2rem(100);
-            height: px2rem(100);
+            width: px2rem(90);
+            height: px2rem(90);
             border-radius: 50%;
-            margin-right: px2rem(21);
+            margin-left: px2rem(146);
+            margin-right: px2rem(18);
+            margin-top: px2rem(31);
         }
 
         .nick {
             width: 2.5rem;
-            height: px2rem(100);
-            line-height: px2rem(100);
+            height: px2rem(150);
+            line-height: px2rem(150);
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             float: left;
+            color: #FFF8C2;
+            font-size: px2rem(28);
+            font-weight: 500;
         }
 
         .score {
-            height: px2rem(100);
-            line-height: px2rem(100);
+            height: px2rem(150);
+            line-height: px2rem(150);
             float: right;
-            color: #333333;
+            color: #FFF8C2;
             font-size: px2rem(26);
-            font-weight: 500;
+            font-weight: 400;
+            margin-right: px2rem(88);
 
             img {
                 display: inline-block;
-                width: px2rem(32);
-                height: px2rem(32);
+                width: px2rem(30);
+                height: px2rem(30);
                 vertical-align: middle;
                 // margin-top: -0.1rem;
             }
 
-            span {
+            span,
+            b {
                 vertical-align: middle;
             }
         }
@@ -515,25 +643,49 @@ ul {
 }
 
 .arabic {
-    .header .tabBox {
-        width: 90%;
+    ul li {
+        .seqNo {
+            left: auto;
+            right: 0.82667rem;
+        }
 
-        div {
-            width: 1.9rem;
-            font-size: px2rem(25);
-            white-space: nowrap;
+        .tx {
+            float: right;
+            margin-left: 0.24rem;
+            margin-right: 1.94667rem;
+        }
+
+        .nick {
+            float: right;
+        }
+
+        .score {
+            float: left;
+            margin-right: 0;
+            margin-left: 1.17333rem;
         }
     }
-}
 
-.english {
+    .my .box {
+        .seqNo {
+            left: auto;
+            right: 0.82667rem;
+        }
 
-    .header .tabBox {
-        width: 90%;
-        div {
-            font-size: px2rem(26);
-            white-space: nowrap;
-            width: 1.7rem;
+        .tx {
+            float: right;
+            margin-left: 0.24rem;
+            margin-right: 1.94667rem;
+        }
+
+        .nick {
+            float: right;
+        }
+
+        .score {
+            float: left;
+            margin-right: 0;
+            margin-left: 1.17333rem;
         }
     }
 }

view/molistar/modules/newRank/css/monthlyRewards.css

@@ -0,0 +1,442 @@
+html,
+body {
+  width: 100%;
+  background: #1C0E04;
+  overflow-x: hidden;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 1.33333rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+  z-index: 2;
+}
+
+.back p {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+  text-align: center;
+  color: #FFF8C2;
+  font-size: 0.42667rem;
+  font-weight: 600;
+}
+
+.header {
+  width: 10rem;
+  height: 17rem;
+  position: relative;
+  margin: 0 auto;
+}
+
+.header .tabBox {
+  width: 10rem;
+  height: 1.12rem;
+  line-height: 1.12rem;
+  display: flex;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 2.17333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  padding: 0 0.14667rem;
+  z-index: 2;
+}
+
+.header .tabBox div {
+  position: relative;
+  width: 2.32rem;
+  height: 1.12rem;
+  color: #FFF8C2;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+}
+
+.header .tabBox div span {
+  width: 0.49333rem;
+  height: 0.10667rem;
+  border-radius: 0.10667rem;
+  background: #fff;
+  position: absolute;
+  bottom: -0.29333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: none;
+}
+
+.header .tabBox .act {
+  color: #000;
+  font-weight: bold;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .tabBox .act span {
+  display: block;
+}
+
+.header .lastMonthWealthTOP3 {
+  min-width: 5.06667rem;
+  height: 0.77333rem;
+  line-height: 0.77333rem;
+  text-align: center;
+  padding: 0 0.32rem;
+  background: url(../images/lastMonth.png) no-repeat;
+  background-size: 100% 100%;
+  color: #000;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  position: absolute;
+  top: 3.57333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.header .top {
+  width: 10rem;
+  height: 11.78667rem;
+  position: absolute;
+  top: 4.50667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.header .top .top1 {
+  position: absolute;
+  width: 10rem;
+  height: 6.66667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.header .top .top1 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.header .top .top1 .tx {
+  width: 2.77333rem;
+  height: 2.77333rem;
+  position: absolute;
+  top: 1.89333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.header .top .top1 .nick {
+  width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFF8C2;
+  font-size: 0.37333rem;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.61333rem;
+  z-index: 3;
+  font-weight: 500;
+}
+
+.header .top .top1 .fist {
+  width: 1.02667rem;
+  height: 1.24rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.8rem;
+  z-index: 3;
+  display: none;
+}
+
+.header .top .top1 .score {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  color: #FFF8C2;
+  font-size: 0.34667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.8rem;
+  text-align: center;
+  z-index: 3;
+  font-weight: 400;
+  display: flex;
+  justify-content: center;
+}
+
+.header .top .top1 .score img {
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.header .top .top1 .score span {
+  display: inline-block;
+}
+
+.header .top .top2 {
+  position: absolute;
+  top: 6.66667rem;
+  width: 5rem;
+  height: 5.12rem;
+  left: 0rem;
+  z-index: 2;
+}
+
+.header .top .top2 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.header .top .top2 .tx {
+  width: 1.86667rem;
+  height: 1.86667rem;
+  position: absolute;
+  top: 1.22667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.header .top .top2 .nick {
+  width: 50%;
+  height: 0.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFF8C2;
+  font-weight: 500;
+  font-size: 0.37333rem;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.01333rem;
+  z-index: 3;
+}
+
+.header .top .top2 .score {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  color: #FFF8C2;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.38667rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  z-index: 3;
+}
+
+.header .top .top2 .score img {
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.header .top .top3 {
+  position: absolute;
+  top: 6.66667rem;
+  width: 5rem;
+  height: 5.12rem;
+  right: 0rem;
+  z-index: 2;
+}
+
+.header .top .top3 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.header .top .top3 .tx {
+  width: 1.86667rem;
+  height: 1.86667rem;
+  position: absolute;
+  top: 1.22667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+
+.header .top .top3 .nick {
+  width: 50%;
+  height: 0.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFF8C2;
+  font-weight: 500;
+  font-size: 0.37333rem;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.01333rem;
+  z-index: 3;
+}
+
+.header .top .top3 .score {
+  width: 100%;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  color: #FFF8C2;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.38667rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  z-index: 3;
+}
+
+.header .top .top3 .score img {
+  display: inline-block;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.header1 {
+  background: url(../images/header1.png) no-repeat;
+  background-size: 100% 14.26667rem;
+}
+
+.header2 {
+  background: url(../images/header2.png) no-repeat;
+  background-size: 100% 14.26667rem;
+}
+
+.header3 {
+  background: url(../images/header3.png) no-repeat;
+  background-size: 100% 14.26667rem;
+}
+
+.header3 .top .top1 .tx,
+.header3 .top .top2 .tx,
+.header3 .top .top3 .tx {
+  border-radius: 0;
+}
+
+.header4 {
+  background: url(../images/header4.png) no-repeat;
+  background-size: 100% 14.26667rem;
+}
+
+.header4 .top .top1 .tx,
+.header4 .top .top2 .tx,
+.header4 .top .top3 .tx {
+  border-radius: 0;
+}
+
+.rewards {
+  width: 10rem;
+  margin: 0 auto 0.89333rem;
+}
+
+.reward1 {
+  height: 48.02667rem;
+  background: url(../images/reward1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.reward2 {
+  height: 34.56rem;
+  background: url(../images/reward2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.reward3 {
+  height: 47.68rem;
+  background: url(../images/reward3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.china .reward1 {
+  background: url(../images/reward1-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.china .reward2 {
+  background: url(../images/reward2-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.china .reward3 {
+  background: url(../images/reward3-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .reward1 {
+  background: url(../images/reward1-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .reward2 {
+  background: url(../images/reward2-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .reward3 {
+  background: url(../images/reward3-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .reward1 {
+  background: url(../images/reward1-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .reward2 {
+  background: url(../images/reward2-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .reward3 {
+  background: url(../images/reward3-ar.png) no-repeat;
+  background-size: 100% 100%;
+}

view/molistar/modules/newRank/css/monthlyRewards.scss

@@ -0,0 +1,468 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #1C0E04;
+    overflow-x: hidden;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(100);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+        z-index: 2;
+    }
+
+    p {
+        width: 100%;
+        height: px2rem(44);
+        line-height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+        text-align: center;
+        color: #FFF8C2;
+        font-size: px2rem(32);
+        font-weight: 600;
+    }
+}
+
+.header {
+    width: px2rem(750);
+    // height: px2rem(1229);
+    height: 17rem;
+    position: relative;
+    margin: 0 auto;
+
+    .tabBox {
+        width: px2rem(750);
+        height: px2rem(84);
+        line-height: px2rem(84);
+        display: flex;
+        justify-content: space-evenly;
+        position: absolute;
+        top: px2rem(163);
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+        padding: 0 px2rem(11);
+        z-index: 2;
+
+        div {
+            position: relative;
+            width: px2rem(174);
+            height: px2rem(84);
+            color: #FFF8C2;
+            font-size: px2rem(28);
+            font-weight: 600;
+            background: url(../images/tab.png) no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+
+            span {
+                width: px2rem(37);
+                height: px2rem(8);
+                border-radius: px2rem(8);
+                background: #fff;
+                position: absolute;
+                bottom: px2rem(-22);
+                left: 50%;
+                transform: translateX(-50%);
+                display: none;
+            }
+        }
+
+        .act {
+            color: #000;
+            font-weight: bold;
+            background: url(../images/tabAct.png) no-repeat;
+            background-size: 100% 100%;
+
+            span {
+                display: block;
+            }
+        }
+    }
+
+    .lastMonthWealthTOP3 {
+        min-width: px2rem(380);
+        height: px2rem(58);
+        line-height: px2rem(58);
+        text-align: center;
+        padding: 0 px2rem(24);
+        background: url(../images/lastMonth.png) no-repeat;
+        background-size: 100% 100%;
+        color: #000;
+        font-size: px2rem(28);
+        font-weight: 500;
+        position: absolute;
+        top: px2rem(268);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .top {
+        width: px2rem(750);
+        height: px2rem(884);
+        position: absolute;
+        top: px2rem(338);
+        // top: 8.3rem;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .top1 {
+            position: absolute;
+            // top: px2rem(-300);
+            width: px2rem(750);
+            height: px2rem(500);
+            left: 50%;
+            transform: translateX(-50%);
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(208);
+                height: px2rem(208);
+                position: absolute;
+                top: px2rem(142);
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+            }
+
+            .nick {
+                width: 50%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #FFF8C2;
+                font-size: px2rem(28);
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(346);
+                z-index: 3;
+                font-weight: 500;
+            }
+
+            .fist {
+                width: px2rem(77);
+                height: px2rem(93);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(360);
+                z-index: 3;
+                display: none;
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                color: #FFF8C2;
+                font-size: px2rem(26);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(360);
+                text-align: center;
+                z-index: 3;
+                font-weight: 400;
+                display: flex;
+                justify-content: center;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(30);
+                    height: px2rem(30);
+                }
+
+                span {
+                    display: inline-block;
+                }
+            }
+        }
+
+        .top2 {
+            position: absolute;
+            top: px2rem(500);
+            width: px2rem(375);
+            height: px2rem(384);
+            left: px2rem(0);
+            z-index: 2;
+            // display: none;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(140);
+                height: px2rem(140);
+                position: absolute;
+                top: px2rem(92);
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+            }
+
+            .nick {
+                width: 50%;
+                height: 0.5rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #FFF8C2;
+                font-weight: 500;
+                font-size: px2rem(28);
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(226);
+                z-index: 3;
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                color: #FFF8C2;
+                font-size: px2rem(26);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(254);
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                z-index: 3;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(30);
+                    height: px2rem(30);
+                }
+            }
+        }
+
+        .top3 {
+            position: absolute;
+            top: px2rem(500);
+            width: px2rem(375);
+            height: px2rem(384);
+            right: px2rem(0);
+            z-index: 2;
+            // display: none;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(140);
+                height: px2rem(140);
+                position: absolute;
+                top: px2rem(92);
+                left: 50%;
+                transform: translateX(-50%);
+                border-radius: 50%;
+            }
+
+            .nick {
+                width: 50%;
+                height: 0.5rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #FFF8C2;
+                font-weight: 500;
+                font-size: px2rem(28);
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(226);
+                z-index: 3;
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                color: #FFF8C2;
+                font-size: px2rem(26);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(254);
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                z-index: 3;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(30);
+                    height: px2rem(30);
+                }
+            }
+        }
+    }
+
+}
+
+.header1 {
+    background: url(../images/header1.png) no-repeat;
+    background-size: 100% px2rem(1070);
+}
+
+.header2 {
+    background: url(../images/header2.png) no-repeat;
+    background-size: 100% px2rem(1070);
+}
+
+.header3 {
+    background: url(../images/header3.png) no-repeat;
+    background-size: 100% px2rem(1070);
+
+    .top {
+
+        .top1,
+        .top2,
+        .top3 {
+            .tx {
+                border-radius: 0;
+            }
+        }
+    }
+}
+
+.header4 {
+    background: url(../images/header4.png) no-repeat;
+    background-size: 100% px2rem(1070);
+
+    .top {
+
+        .top1,
+        .top2,
+        .top3 {
+            .tx {
+                border-radius: 0;
+            }
+        }
+    }
+}
+
+.rewards {
+    width: px2rem(750);
+    margin: 0 auto px2rem(67);
+}
+
+.reward1 {
+    height: px2rem(3602);
+    background: url(../images/reward1.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.reward2 {
+    height: px2rem(2592);
+    background: url(../images/reward2.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.reward3 {
+    height: px2rem(3576);
+    background: url(../images/reward3.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.china {
+    .reward1 {
+        background: url(../images/reward1-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .reward2 {
+        background: url(../images/reward2-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .reward3 {
+        background: url(../images/reward3-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.Turkiye {
+    .reward1 {
+        background: url(../images/reward1-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .reward2 {
+        background: url(../images/reward2-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .reward3 {
+        background: url(../images/reward3-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.arabic {
+    .reward1 {
+        background: url(../images/reward1-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .reward2 {
+        background: url(../images/reward2-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .reward3 {
+        background: url(../images/reward3-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}