完成vip页面逻辑和展示，还差多语言

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

@@ -71,5 +71,6 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
 <script src="./js/index.js"></script>
 <script src="../../common/local/langHandler.js"></script>

view/molistar/activity/2024-loginGift/local/tr.js

@@ -0,0 +1,5 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {}
+}

view/molistar/activity/act-guard-planet/index.html

@@ -258,6 +258,7 @@
     <script src="../../common/js/svga.min.js"></script>
     <script src="../../common/js/route-constant.js"></script>
     <script src="./local/ar.js"></script>
+    <script src="./local/tr.js"></script>
     <script src="./local/en.js"></script>
     <script src="./local/zh.js"></script>
     <script src="./js/index.js?v=2.7"></script> 

view/molistar/activity/act-guard-planet/local/tr.js

@@ -0,0 +1,5 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {}
+}

view/molistar/activity/act-kitchen/index.html

@@ -321,5 +321,6 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
 <script src="./js/index.js?v=1.3"></script>
 <script src="../../common/local/langHandler.js"></script>

view/molistar/activity/act-kitchen/local/tr.js

@@ -0,0 +1,61 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        img1: `background:url(./images/header-en.png) no-repeat;background-size:100% 100%`,
+        img6: `background:url(./images/resultText-en.png) no-repeat;background-size:100% 100%`,
+        img7: `background:url(./images/result_popup-en.png) no-repeat;background-size:100% 100%`,
+        img2: `./images/rule_icon-en.png`,
+        img3: `./images/record_icon-en.png`,
+        img4: `./images/rank_icon-en.png`,
+        img5: `./images/wljg-en.png`,
+        title: 'Crazy Zoo',
+        text1: `The final interpretation right of this event belongs to molistar<br>
+        <b>Event rewards are unrelated to Google Play/Apple Store</b>`,
+        text2: 'Results of this round <b></b>',
+        text3: `<div class="cyfs">
+                <p class="title">How to Participate</p>
+                Players can participate in the "Crazy Zoo" game with gold coins, requiring a minimum spend of 100 gold coins per play, with each round lasting 30 seconds.
+                <p class="jietu"><img src="./images/t1-en.png" alt=""></p>
+            </div>
+            <div class="lwff">
+                <p class="title">Gift Distribution</p>
+                Each participation in the game will result in one gift draw.;
+                <p class="jietu t2"><img src="./images/t2-en.png" alt=""></p>
+                Each time, one of 8 types of small animals is randomly selected as the winning ingredient. Winners receive a gold coin reward equal to (the gold coins spent on the winning item * the corresponding multiplier of the winning animal), which is directly deposited into the account.
+                <p class="jietu t3"><img src="./images/t3-en.png" alt=""></p>
+                For example, purchasing a 5x elephant for 100 gold coins will result in a win of 100*5 gold coins.
+            </div>
+            <div class="qtsm">
+                <p class="title">Other Information</p>
+                If the above information does not answer your questions, please contact customer service for specific answers to difficult questions.
+                <p>This event and the event rewards are unrelated to Google/Apple Inc</p>
+            </div>`,
+        text4: `Today's Reward List`,
+        text5: `Today's Luckiest Players`,
+        text6: `Insufficient Gold Coin Balance`,
+        text7: `Current Gold Coins Insufficient`,
+        text8: `Cancel`,
+        text9: `Get Gold Coins`,
+        text10: `Your device is detected to have permission issues and cannot play music, please turn on music in the top right corner`,
+        text11: `Today's Reward:`,
+        text12: `Gold Coin Balance:`,
+        text13: `Network Error, Please Exit and Re-enter`,
+        text14: `The server is currently under maintenance...`,
+        text15: `None`,
+        text16: `Please Select:`,
+        text17: `Drawing:`,
+        text18: `Next Round:`,
+        text19: `Not Listed`,
+        text20: ` `,//Guessed Correctly
+        text21: `times`,
+        text22: `Selected`,
+        text23: `No more available!`,
+        text24: `Wrong guess! o(╥﹏╥)o`,
+        text25: `You're correct ୧(๑•̀◡•́๑)૭`,
+        text26: `Round result`,
+        text27: `Rewards:`,
+        text28: `Bet placed:`,
+        titlesss: `Game Record`,
+    }
+}

view/molistar/activity/act-kitchen/record.html

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

view/molistar/activity/act-nameplate/index.html

@@ -118,6 +118,7 @@
   <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"></script>
   <script src="./js/public.js?v=11"></script>
   <script src="../../common/local/langHandler.js"></script>
 </body>

view/molistar/activity/act-nameplate/local/tr.js

@@ -0,0 +1,40 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Operation completed`,
+        layerIndex3: `Network error`,
+        max: `background:url("./images/max-en.png?v=1.0") no-repeat;background-size:100% 100%;`,
+        img4: `background-image: url(./images/new-bg-en.png?v=1.0);`,
+        img44: `background-image: url(./images/select-bg-en.png?v=1.0);`,
+        img5: `background: url('./images/apply-new-en.png?v=1.0') no-repeat 0 0/100% 100%;`,
+        img2: `./images/disabled-btn-en.png?v=1.0`,
+        img3: `./images/apply-btn-basics-en.png?v=1.0`,
+        img6: `./images/record-en.png?v=1.0`,
+        img7: `./images/delay-btn-en.png?v=1.0`,
+        title_t: `Customized`,
+        text1: `Style: `,
+        text2: `Duration: `,
+        text3: `days`,
+        text4: `Text: `,
+        text5: `please enter...`,
+        text55: `13`,
+        text6: `Minimum 7 days required`,
+        text7: `Maximum duration reached`,
+        text8: `Select a style`,
+        text9: `Add text`,
+        text10: `Add 4 characters of text`,
+        text11: `No nameplates available`,
+        text12: `Successful`,
+        text13: 'Remaining',
+        text14: 'Application Records',
+        text15: 'No Application Records',
+        text16: 'Apply',
+        text17: 'Extend',
+        text18: 'In Progress',
+        text19: 'Rejected',
+        text20: 'Approved',
+    }
+
+}

view/molistar/activity/act-nameplate/record.html

@@ -33,6 +33,7 @@
   <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"></script>
   <script src="./js/record.js?v=1.0"></script>
   <script src="../../common/local/langHandler.js"></script>
 </body>

view/molistar/activity/act-nameplateNew/index.html

@@ -118,6 +118,7 @@
   <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"></script>
   <script src="./js/public.js?v=11"></script>
   <script src="../../common/local/langHandler.js"></script>
 </body>

view/molistar/activity/act-nameplateNew/local/tr.js

@@ -0,0 +1,40 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Operation completed`,
+        layerIndex3: `Network error`,
+        max: `background:url("./images/max-en.png?v=1.0") no-repeat;background-size:100% 100%;`,
+        img4: `background-image: url(./images/new-bg-en.png?v=1.0);`,
+        img44: `background-image: url(./images/select-bg-en.png?v=1.0);`,
+        img5: `background: url('./images/apply-new-en.png?v=1.0') no-repeat 0 0/100% 100%;`,
+        img2: `./images/disabled-btn-en.png?v=1.0`,
+        img3: `./images/apply-btn-basics-en.png?v=1.0`,
+        img6: `./images/record-en.png?v=1.0`,
+        img7: `./images/delay-btn-en.png?v=1.0`,
+        title_t: `Customized`,
+        text1: `Style: `,
+        text2: `Duration: `,
+        text3: `days`,
+        text4: `Text: `,
+        text5: `please enter...`,
+        text55: `13`,
+        text6: `Minimum 7 days required`,
+        text7: `Maximum duration reached`,
+        text8: `Select a style`,
+        text9: `Add text`,
+        text10: `Add 4 characters of text`,
+        text11: `No nameplates available`,
+        text12: `Successful`,
+        text13: 'Remaining',
+        text14: 'Application Records',
+        text15: 'No Application Records',
+        text16: 'Apply',
+        text17: 'Extend',
+        text18: 'In Progress',
+        text19: 'Rejected',
+        text20: 'Approved',
+    }
+
+}

view/molistar/activity/act-nameplateNew/record.html

@@ -33,6 +33,7 @@
   <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"></script>
   <script src="./js/record.js?v=1.0"></script>
   <script src="../../common/local/langHandler.js"></script>
 </body>

view/molistar/activity/customizedGift/index.html

@@ -253,5 +253,6 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
 <script src="./js/index.js?v=1.0"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -0,0 +1,79 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1: `Custom Gift Competition`,
+        text2: `Activity introduction`,
+        text3: `<p>Have you ever thought about sending a custom gift that expresses your feelings?</p>
+        <p>Now, the opportunity has come! Our customized gift competition allows you to upload your own customized
+            gifts and gain recognition in the competition. Looking forward to your creativity and enthusiasm!</p>`,
+        text4: `Top 3 Gifts Last Week`,
+        text5: `Gift name:`,
+        text6: `Gifted time:`,
+        text7: `Popular Custom Gifts`,
+        text8: `Custom Gifts Supporter`,
+        text9: `Rule`,
+        text10: `Reward`,
+        text11: `Countdown`,
+        text12: `Day`,
+        text13: `Hours`,
+        text14: `Mins`,
+        text15: `Secs`,
+        text16: `Countdown`,
+        text17: `<p>1. Event time: the 1st of this month to the end of the second month(GMT+3)</p>
+        <p>2. Calculate the number of customized gifts sent during the event. The more gifts sent, the more you
+            will get.</p>
+        <p>3. This event has nothing to do with Google and Apple</p>`,
+        text18: `<p>1 Event start time: 00:00 every Monday - 23:59 every Sunday (GMT+3)</p>
+        <p>2. The Top3 popular customized gifts will get generous gifts.</p>
+        <p>3 This event has nothing to do with Google and Apple</p>`,
+        text19: `Reward 1: When the customized gift ranks first on this week’s gift list, the gift will
+        be customized
+        as a start page and banner.`,
+        text20: `Reward 2: When the customized gifts are among the top three of the week, they will be
+        updated to the
+        gift panel as an exclusive customized lucky gift.`,
+        text21: `Reward 3: When the customized gifts are among the top
+        three of the
+        week, there will be a specific area on the event page to display the corresponding gifts.`,
+        text22: `Reward 4: When the customized gifts are the top three of the week, these three gifts
+        will have a
+        special presence on the customized gift panel.`,
+        text23: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 7000, you can get the following rewards!`,
+        texts6: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 7000, you can get the following rewards!`,
+        texts5: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 5600, you can get the following rewards!`,
+        texts4: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 4900, you can get the following rewards!`,
+        texts3: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 3500, you can get the following rewards!`,
+        texts2: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 2100, you can get the following rewards!`,
+        texts1: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 700, you can get the following rewards!`,
+        text24: `Please contact our customer service, upload a 5-second car video, and
+        customize your own
+        car.`,
+        text244: `Please contact our customer service, upload a 8-second car video, and
+        customize your own
+        car.`,
+        text2444: `Please contact our customer service, upload a 10-second car video, and
+        customize your own
+        car.`,
+        text25: `Coins of Gifted:`,
+        img1: `./images/reward1.png`,
+        img2: `./images/1.png`,
+        img3: `./images/2.png`,
+        img4: `./images/3.png`,
+    }
+}

view/molistar/activity/exp/index.html

@@ -330,5 +330,6 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
 <script src="./js/index.js?v=1.1"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -0,0 +1,84 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        img1: `background: url(./images/header_en.png) no-repeat;background-size: 100% 100%;`,
+        img2: `background: url(./images/giftBg_en.png) no-repeat;background-size: 100% 100%;`,
+        img5: `background: url(./images/topReward_en.png) no-repeat;background-size: 100% 100%;`,
+        img3: `./images/rule1_en.png`,
+        img4: `./images/rule2_en.png`,
+        newIMg1:`./images/giftList1_en.png`,
+        newIMg2:`./images/giftList2_en.png`,
+        newIMg3:`./images/giftList3_en.png`,
+        newIMg4:`./images/giftList4_en.png`,
+        text1: `level event`,
+        text2: `rule`,
+        text3: `the time of event :2024.08.13-2024.08.22`,
+        text4: `Send following gifts to get EXP`,
+        text5: ` VIP5-9 can get additional EXP, UP TO`,
+        text6: `1001000EXP!`,
+        text7: `Moon ring`,
+        text8: `Crystal Moon`,
+        text9: `Interstellar`,
+        text10: `Interstellar Overlord`,
+        text11: `level`,
+        text12: `reward`,
+        text13: `Level`,
+        text14: `AvatarFr`,
+        text15: `Chat bubble`,
+        text16: `Mount`,
+        text17: `Medal`,
+        text18: `Chat bubble`,
+        text19: `Level's rewards`,
+        text20: `Ranking`,
+        text21: `(When u reach these levels ,u can get these gifts)`,
+        text22: `days`,
+        // text23: `u still need ....exp to reach the next level`,
+        text23: ` `,
+        text24: `Current:LV.`,
+        text25: `more detalis`,
+        text26: `Ranked according to the EXP increased by sending event gifts. the higher the EXP, the higher the rank`,
+        text27: `(The top 50 will receive more rewards)`,
+        text28: `EXP Points`,
+        text29: `(Send following gifts to get EXP ,and get rewards)`,
+        text30: `The all expx points`,
+        text31: `The event rules`,
+        text32: `Leaderboard rewards`,
+        text33: `End of event`,
+        text34: `get it`,
+        text35: `Received`,
+        text36: ` `,
+        text37: `EXP value`,
+        text38: `u still need points to surpass the next user:`,
+        text39: `u still need points to surpass the next user:`,
+        text40: `u are Ahead of second place by points `,
+        text41: `u still need points to be in the ranking list:`,
+        text42: `not ranked`,
+        text43: `You've successfully claimed your reward!`,
+        text44: `1333`,
+        text45: `5000`,
+        text46: `12000`,
+        text47: `27500`,
+        text48: `13330 EXP`,
+        text49: `75000 EXP`,
+        text50: `264000 EXP`,
+        text51: `770000 EXP`,
+        newtext1:`7`,
+        newtexts1:`7`,
+        newtext2:`7`,
+        newtext3:`14`,
+        newtext4:`14`,
+        newtext5:`30`,
+        newtext6:`30`,
+        newtext7:`30`,
+        newtext8:`30`,
+        newText11:`*50`,
+        newText22:`*100`,
+        newText33:`*300`,
+        newText44:`*500`,
+        newText55:`*1000`,
+        newText66:`*1500`,
+        newText77:`*2000`,
+    }
+}

view/molistar/activity/gameChallenge/css/countNumber.css

@@ -0,0 +1,42 @@
+.dataNums {
+    width: 8rem;
+    height: 0.74rem;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dataNums .dataOne {
+    width: 0.45rem;
+    height: 100%;
+    text-align: center;
+}
+
+.dataNums .dataBoc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.dataNums .dataBoc .tt {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.dataNums .tt span {
+    width: 100%;
+    height: 100%;
+    font-weight: 600;
+    font-size: 0.7466666667rem;
+    color: #fff783;
+    background: linear-gradient(0deg, #ffed26 0%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    line-height: 0.74rem;
+    float: left;
+}

view/molistar/activity/gameChallenge/css/index.css

@@ -0,0 +1,881 @@
+html,
+body {
+  width: 100%;
+  background: #3c0101; }
+
+.back {
+  width: 100%;
+  height: 0.5866666667rem;
+  line-height: 0.5866666667rem;
+  position: fixed;
+  left: 0;
+  top: 0.8666666667rem;
+  text-align: center;
+  color: #ffffff;
+  font-size: 0.5066666667rem;
+  font-weight: bold;
+  z-index: 10; }
+  .back img {
+    width: 0.5866666667rem;
+    height: 0.5866666667rem;
+    position: absolute;
+    left: 0.24rem;
+    top: 0rem; }
+
+.header {
+  width: 10rem;
+  height: 13.3066666667rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative; }
+  .header .rule {
+    width: 1.7866666667rem;
+    height: 0.8rem;
+    line-height: 0.8rem;
+    text-indent: 0.2rem;
+    text-align: center;
+    color: #fff783;
+    font-size: 0.3733333333rem;
+    font-weight: 500;
+    background: url(../images/rule_icon.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    right: 0;
+    top: 5.5466666667rem; }
+  .header .coin_bg {
+    width: 2.9866666667rem;
+    height: 3.3333333333rem;
+    position: absolute;
+    bottom: 1.1733333333rem;
+    right: 0;
+    display: none; }
+  .header .receive {
+    width: 2.5333333333rem;
+    height: 0.8rem;
+    background: url(../images/receive.png) no-repeat center/100% 100%;
+    font-weight: 500;
+    font-size: 0.3466666667rem;
+    color: #000000;
+    line-height: 0.8rem;
+    text-align: center;
+    position: absolute;
+    bottom: 0.96rem;
+    right: 0.2rem;
+    display: none; }
+  .header .done {
+    background: url(../images/done.png) no-repeat center/100% 100%; }
+
+.descBox {
+  position: relative;
+  width: 10rem;
+  height: 5.7066666667rem;
+  background: url(../images/desc.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.8rem auto 0.4266666667rem;
+  overflow: hidden; }
+  .descBox .content {
+    width: 8.2666666667rem;
+    color: #fff783;
+    font-size: 0.3466666667rem;
+    font-weight: 400;
+    line-height: 0.56rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
+
+.poolBox {
+  position: relative;
+  width: 10rem;
+  height: 7.76rem;
+  background: url(../images/pool.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0.5333333333rem auto 0.4266666667rem;
+  overflow: hidden; }
+  .poolBox .title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+    text-align: center;
+    width: 5.5733333333rem;
+    height: 1.5733333333rem;
+    line-height: 1.3rem;
+    color: #fff783;
+    font-size: 0.4266666667rem;
+    font-weight: 600;
+    background: url(../images/pool_tit.png) no-repeat;
+    background-size: 100% 100%; }
+  .poolBox p {
+    color: #fff783;
+    font-size: 0.3466666667rem;
+    font-weight: 400;
+    line-height: 0.56rem;
+    padding: 0 1.6rem;
+    text-align: center; }
+  .poolBox .update {
+    padding-top: 1.4rem; }
+  .poolBox .coins_pool {
+    width: 80%;
+    margin: 2.4666666667rem auto 0.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .poolBox .coins_pool #dataNums {
+      width: 8rem;
+      height: 0.74rem; }
+    .poolBox .coins_pool img {
+      width: 0.6933333333rem;
+      height: 0.6933333333rem;
+      margin: 0 0.0666666667rem; }
+
+.tab {
+  width: 9.5333333333rem;
+  height: 1.7866666667rem;
+  line-height: 1.7866666667rem;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.7333333333rem auto 0.32rem; }
+  .tab div {
+    width: 4.72rem;
+    height: 1.7866666667rem;
+    color: #d3c611;
+    font-size: 0.4533333333rem;
+    font-weight: 600;
+    background: url(../images/tab.png) no-repeat;
+    background-size: 100% 100%; }
+  .tab .act {
+    background: url(../images/tabAct.png) no-repeat;
+    background-size: 100% 100%;
+    color: #000000; }
+
+.timeBox {
+  width: 6.9333333333rem;
+  height: 1.3866666667rem;
+  margin: 0 auto 0.6rem;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  display: flex;
+  justify-content: space-between; }
+  .timeBox div {
+    width: 1.3333333333rem;
+    height: 1.3333333333rem;
+    box-sizing: border-box;
+    text-align: center;
+    background: url(../images/time_bg.png) no-repeat;
+    background-size: 100% 100%; }
+    .timeBox div span {
+      display: block;
+      color: #fff783;
+      font-size: 0.4533333333rem;
+      font-weight: 500;
+      margin: 0.4rem auto 0.5066666667rem; }
+    .timeBox div b {
+      display: block;
+      color: #fff783;
+      font-size: 0.32rem;
+      font-weight: 400; }
+
+.page1 {
+  margin: -0.2rem auto 0; }
+  .page1 .top {
+    width: 10rem;
+    height: 20.2666666667rem;
+    position: relative;
+    background: url(../images/topBg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    overflow: hidden; }
+    .page1 .top .gift {
+      width: 8.6666666667rem;
+      display: block;
+      margin: 1.9733333333rem auto 0; }
+    .page1 .top .rewards {
+      font-weight: 500;
+      font-size: 0.3733333333rem;
+      color: #fff783;
+      line-height: 0.4266666667rem;
+      text-decoration-line: underline;
+      width: 100%;
+      text-align: center;
+      padding: 0.4rem 0; }
+    .page1 .top .top1 {
+      width: 8.2666666667rem;
+      height: 4.9333333333rem;
+      position: relative;
+      margin: 0 auto; }
+      .page1 .top .top1 .ts {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1; }
+      .page1 .top .top1 .tx {
+        width: 2.2rem;
+        height: 2.2rem;
+        border-radius: 50%;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 1.8rem; }
+      .page1 .top .top1 .icon {
+        width: 1.7733333333rem;
+        height: 0.8533333333rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 3.75rem;
+        z-index: 2; }
+      .page1 .top .top1 .name {
+        position: absolute;
+        top: 4.75rem;
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 2.6rem;
+        text-align: right;
+        color: #fff783;
+        font-size: 0.4rem;
+        font-weight: 500;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
+      .page1 .top .top1 .id {
+        width: 100%;
+        position: absolute;
+        top: 5.25rem;
+        text-align: center;
+        left: 0;
+        z-index: 3;
+        color: #fff783;
+        font-size: 0.3733333333rem;
+        font-weight: 400; }
+    .page1 .top .top2,
+    .page1 .top .top3 {
+      width: 4.2666666667rem;
+      height: 3.8666666667rem;
+      position: absolute;
+      left: 0.5333333333rem;
+      top: 14.7rem;
+      margin: 0 auto 0; }
+      .page1 .top .top2 .ts,
+      .page1 .top .top3 .ts {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1; }
+      .page1 .top .top2 .tx,
+      .page1 .top .top3 .tx {
+        width: 1.7333333333rem;
+        height: 1.7333333333rem;
+        border-radius: 50%;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 1.3rem; }
+      .page1 .top .top2 .icon,
+      .page1 .top .top3 .icon {
+        width: 1.7733333333rem;
+        height: 0.8533333333rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 2.75rem;
+        z-index: 2; }
+      .page1 .top .top2 .name,
+      .page1 .top .top3 .name {
+        position: absolute;
+        top: 3.7rem;
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 2.6rem;
+        text-align: right;
+        color: #fff783;
+        font-size: 0.4rem;
+        font-weight: 500;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
+      .page1 .top .top2 .id,
+      .page1 .top .top3 .id {
+        width: 100%;
+        position: absolute;
+        top: 4.2rem;
+        text-align: center;
+        left: 0;
+        z-index: 3;
+        color: #fff783;
+        font-size: 0.3733333333rem;
+        font-weight: 400; }
+      .page1 .top .top2 .score,
+      .page1 .top .top3 .score {
+        padding: 0.0666666667rem 0.1333333333rem;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 0.3333333333rem;
+        position: absolute;
+        top: 4.75rem;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center; }
+        .page1 .top .top2 .score b,
+        .page1 .top .top3 .score b {
+          color: #fff783;
+          font-size: 0.3733333333rem;
+          font-weight: 400;
+          white-space: nowrap; }
+        .page1 .top .top2 .score img,
+        .page1 .top .top3 .score img {
+          width: 0.5333333333rem;
+          height: 0.5333333333rem;
+          margin-left: 0.0666666667rem; }
+    .page1 .top .top3 {
+      width: 4.2666666667rem;
+      height: 3.8666666667rem;
+      position: absolute;
+      right: 0.5333333333rem;
+      top: 14.7rem;
+      left: unset; }
+  .page1 .bottom {
+    width: 10rem;
+    height: 0.6666666667rem;
+    background: url(../images/bottomBg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: -0.2rem auto 0;
+    position: relative;
+    z-index: 2; }
+  .page1 .content {
+    width: 10rem;
+    height: auto;
+    margin: 0 auto 0;
+    background: url(../images/centerBg.png) no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden; }
+    .page1 .content ul {
+      width: 8.6666666667rem;
+      margin: 0.3733333333rem auto 0rem; }
+      .page1 .content ul li {
+        width: 100%;
+        height: 1.9733333333rem;
+        background: url(../images/lis.png) no-repeat center/100% 100%;
+        margin-bottom: 0.24rem;
+        overflow: hidden;
+        box-sizing: border-box;
+        position: relative; }
+        .page1 .content ul li .num {
+          float: left;
+          width: 0.5333333333rem;
+          height: 100%;
+          line-height: 1.9733333333rem;
+          color: #fff783;
+          font-size: 0.4266666667rem;
+          font-weight: 600;
+          margin: 0 0.2666666667rem 0 0.4rem;
+          text-align: center; }
+        .page1 .content ul li .tx {
+          float: left;
+          width: 1.1066666667rem;
+          height: 1.1066666667rem;
+          border-radius: 50%;
+          border: 0.0266666667rem solid #fff783;
+          display: block;
+          margin-top: 0.4rem;
+          margin-right: 0.2rem; }
+        .page1 .content ul li .icon {
+          width: 0.9066666667rem;
+          height: 0.44rem;
+          position: absolute;
+          bottom: 0.3466666667rem;
+          left: 1.3066666667rem; }
+        .page1 .content ul li .info {
+          float: left;
+          margin-top: 0.5333333333rem; }
+          .page1 .content ul li .info p {
+            max-width: 2rem;
+            height: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #fff783;
+            font-size: 0.4rem;
+            font-weight: 500;
+            line-height: 0.6rem; }
+          .page1 .content ul li .info span {
+            color: #fff783;
+            font-size: 0.3733333333rem;
+            font-weight: 400;
+            display: block; }
+        .page1 .content ul li .score {
+          padding: 0.0666666667rem 0.1333333333rem;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 0.3333333333rem;
+          float: right;
+          margin: 0.64rem 0.4666666667rem 0 0;
+          display: flex;
+          justify-content: center;
+          align-items: center; }
+          .page1 .content ul li .score b {
+            color: #fff783;
+            font-size: 0.3733333333rem;
+            font-weight: 400;
+            white-space: nowrap; }
+          .page1 .content ul li .score img {
+            width: 0.5333333333rem;
+            height: 0.5333333333rem;
+            margin-left: 0.0666666667rem; }
+    .page1 .content .more {
+      width: 1.6533333333rem;
+      height: 0.5866666667rem;
+      line-height: 0.5866666667rem;
+      text-align: center;
+      padding: 0 0.4533333333rem;
+      margin: 0 auto 0.3rem;
+      color: #fff783;
+      border: 0.0266666667rem solid #fff783;
+      border-radius: 0.5866666667rem;
+      box-sizing: border-box;
+      font-size: 0.32rem;
+      font-weight: 500; }
+  .page1 .my {
+    position: fixed;
+    z-index: 9;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 10rem;
+    height: 2.2133333333rem;
+    background: url(../images/lis.png) no-repeat center/100% 100%; }
+    .page1 .my .num {
+      float: left;
+      width: 0.8rem;
+      height: 100%;
+      line-height: 1.9733333333rem;
+      color: #fff783;
+      font-size: 0.4266666667rem;
+      font-weight: 600;
+      margin: 0 0.4rem;
+      text-align: center; }
+    .page1 .my .tx {
+      float: left;
+      width: 1.1066666667rem;
+      height: 1.1066666667rem;
+      border-radius: 50%;
+      border: 0.0266666667rem solid #fff783;
+      display: block;
+      margin-top: 0.4rem;
+      margin-right: 0.2rem; }
+    .page1 .my .icon {
+      width: 0.9066666667rem;
+      height: 0.44rem;
+      position: absolute;
+      bottom: 0.4666666667rem;
+      left: 1.6666666667rem; }
+    .page1 .my .info {
+      float: left;
+      margin-top: 0.5333333333rem; }
+      .page1 .my .info p {
+        max-width: 2rem;
+        height: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: #fff783;
+        font-size: 0.4rem;
+        font-weight: 500;
+        line-height: 0.6rem; }
+      .page1 .my .info span {
+        color: #fff783;
+        font-size: 0.3733333333rem;
+        font-weight: 400;
+        display: block; }
+    .page1 .my .score {
+      padding: 0.0666666667rem 0.1333333333rem;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 0.3333333333rem;
+      float: right;
+      margin: 0.7333333333rem 0.4666666667rem 0 0;
+      display: flex;
+      justify-content: center;
+      align-items: center; }
+      .page1 .my .score b {
+        color: #fff783;
+        font-size: 0.3733333333rem;
+        font-weight: 400;
+        white-space: nowrap; }
+      .page1 .my .score img {
+        width: 0.5333333333rem;
+        height: 0.5333333333rem;
+        margin-left: 0.0666666667rem; }
+
+.page2 {
+  display: none;
+  margin: -0.5rem auto 0; }
+  .page2 .top {
+    width: 10rem;
+    height: 2.4rem;
+    position: relative;
+    background: url(../images/topBg2.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0.7333333333rem auto -0.2rem;
+    overflow: hidden; }
+  .page2 .bottom {
+    width: 10rem;
+    height: 0.6666666667rem;
+    background: url(../images/bottomBg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: -0.4rem auto 0; }
+  .page2 .content {
+    width: 10rem;
+    margin: 0 auto 0;
+    background: url(../images/centerBg.png) no-repeat;
+    background-size: 100% 100%; }
+    .page2 .content .box {
+      width: 8.8rem;
+      margin: 0.2rem auto 0;
+      position: relative; }
+      .page2 .content .box h1 {
+        font-weight: 400;
+        font-size: 0.3466666667rem;
+        color: #fff783;
+        line-height: 0.4533333333rem;
+        text-align: center;
+        margin-top: -0.7rem; }
+      .page2 .content .box .none {
+        width: 3.2666666667rem;
+        display: block;
+        margin: 0.3333333333rem auto; }
+      .page2 .content .box .history_week {
+        width: 100%;
+        padding-bottom: 0.2rem; }
+        .page2 .content .box .history_week .title {
+          padding: 0.4rem 0;
+          display: flex;
+          align-items: center;
+          justify-content: center; }
+          .page2 .content .box .history_week .title img {
+            width: 1.2rem; }
+          .page2 .content .box .history_week .title b {
+            font-weight: 600;
+            font-size: 0.4rem;
+            color: #fff783;
+            padding: 0 0.2rem; }
+        .page2 .content .box .history_week ul {
+          width: 8.8rem;
+          margin: 0 auto;
+          overflow-x: auto;
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap; }
+          .page2 .content .box .history_week ul li {
+            width: 3.0666666667rem;
+            height: 4.8rem;
+            margin-right: 0.1333333333rem;
+            position: relative; }
+            .page2 .content .box .history_week ul li .avatar {
+              width: 2rem;
+              height: 2rem;
+              border-radius: 50%;
+              margin: 0.5333333333rem; }
+            .page2 .content .box .history_week ul li .tx {
+              width: 3.0666666667rem;
+              height: 3.0666666667rem;
+              position: absolute;
+              top: 0;
+              left: 0; }
+            .page2 .content .box .history_week ul li .icon {
+              width: 1.5333333333rem;
+              height: 0.7333333333rem;
+              position: absolute;
+              top: 2.16rem;
+              left: 0.76rem; }
+            .page2 .content .box .history_week ul li .name {
+              font-weight: 500;
+              font-size: 0.4rem;
+              color: #fff783;
+              line-height: 0.5333333333rem;
+              width: 100%;
+              text-align: center;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis; }
+            .page2 .content .box .history_week ul li .id {
+              font-weight: 400;
+              font-size: 0.3733333333rem;
+              color: #fff783;
+              line-height: 0.5066666667rem;
+              width: 100%;
+              text-align: center; }
+            .page2 .content .box .history_week ul li .score {
+              padding: 0.0666666667rem 0.1333333333rem;
+              background: rgba(0, 0, 0, 0.5);
+              border-radius: 0.3333333333rem;
+              position: absolute;
+              bottom: 0;
+              left: 50%;
+              transform: translateX(-50%);
+              display: flex;
+              justify-content: center;
+              align-items: center; }
+              .page2 .content .box .history_week ul li .score b {
+                color: #fff783;
+                font-size: 0.3733333333rem;
+                font-weight: 400;
+                white-space: nowrap; }
+              .page2 .content .box .history_week ul li .score img {
+                width: 0.5333333333rem;
+                height: 0.5333333333rem;
+                margin-left: 0.0666666667rem; }
+
+.rules {
+  position: fixed;
+  z-index: 999;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: none; }
+  .rules .rule_in {
+    width: 10rem;
+    height: 12.16rem;
+    background: url(../images/rule_pop.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
+    .rules .rule_in .close {
+      position: absolute;
+      width: 0.9066666667rem;
+      height: 0.9066666667rem;
+      right: 0.35rem;
+      top: -0.55rem; }
+    .rules .rule_in .titles {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 0;
+      text-align: center;
+      width: 5.5733333333rem;
+      height: 1.5733333333rem;
+      line-height: 1.3rem;
+      color: #fff783;
+      font-size: 0.4266666667rem;
+      font-weight: 600;
+      background: url(../images/pool_tit.png) no-repeat;
+      background-size: 100% 100%; }
+    .rules .rule_in .text {
+      width: 8.2666666667rem;
+      height: 9.6rem;
+      overflow-y: scroll;
+      color: #fff783;
+      font-size: 0.3733333333rem;
+      font-weight: 400;
+      line-height: 0.56rem;
+      margin: 2.2rem auto 0; }
+      .rules .rule_in .text::-webkit-scrollbar {
+        display: none; }
+      .rules .rule_in .text strong {
+        font-weight: 600;
+        font-size: 0.3733333333rem;
+        color: #ffffff;
+        line-height: 0.56rem; }
+      .rules .rule_in .text p {
+        font-weight: 400;
+        font-size: 0.3733333333rem;
+        color: #fff783;
+        line-height: 0.56rem; }
+        .rules .rule_in .text p b {
+          font-weight: 600; }
+
+.coins_pop {
+  position: fixed;
+  z-index: 999;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: none; }
+  .coins_pop .coins_pop_in {
+    width: 10rem;
+    height: 11.84rem;
+    background: url(../images/coin_pop.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); }
+    .coins_pop .coins_pop_in .fadein {
+      width: 7.3333333333rem;
+      padding: 0.1333333333rem 0.2666666667rem;
+      background: #ffd21d;
+      border-radius: 0.36rem;
+      margin: -0.65rem auto 0;
+      display: none;
+      font-weight: 500;
+      font-size: 0.3733333333rem;
+      color: #000000;
+      text-align: center; }
+    .coins_pop .coins_pop_in .svga {
+      width: 10rem;
+      height: 9.3333333333rem;
+      position: absolute;
+      top: -0.6rem;
+      left: 0;
+      z-index: 9; }
+      .coins_pop .coins_pop_in .svga .svga_in {
+        width: 100%;
+        height: 100%; }
+    .coins_pop .coins_pop_in .close {
+      position: absolute;
+      width: 0.9066666667rem;
+      height: 0.9066666667rem;
+      right: 0.1rem;
+      top: 1.6rem;
+      z-index: 10; }
+    .coins_pop .coins_pop_in .titles {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 2.4rem;
+      text-align: center;
+      width: 5.5733333333rem;
+      height: 1.5733333333rem;
+      line-height: 1.3rem;
+      color: #fff783;
+      font-size: 0.4266666667rem;
+      font-weight: 600;
+      background: url(../images/pool_tit.png) no-repeat;
+      background-size: 100% 100%; }
+    .coins_pop .coins_pop_in h1 {
+      font-weight: 500;
+      font-size: 0.3733333333rem;
+      color: #fff783;
+      line-height: 0.4rem;
+      width: 100%;
+      text-align: center;
+      padding-top: 4rem; }
+    .coins_pop .coins_pop_in .coins {
+      width: 3.7333333333rem;
+      display: block;
+      margin: 0 auto; }
+    .coins_pop .coins_pop_in .text {
+      width: 80%;
+      margin: -0.4rem auto 0.2666666667rem;
+      display: flex;
+      align-items: center;
+      justify-content: center; }
+      .coins_pop .coins_pop_in .text b {
+        font-weight: 600;
+        font-size: 0.7466666667rem;
+        color: #fff783;
+        background: linear-gradient(0deg, #ffed26 0%, #ffffff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent; }
+      .coins_pop .coins_pop_in .text img {
+        width: 0.6933333333rem;
+        margin: 0 0.0666666667rem; }
+    .coins_pop .coins_pop_in .btn {
+      width: 3.3866666667rem;
+      height: 1.2rem;
+      background: url(../images/receive.png) no-repeat center/100% 100%;
+      margin: 0 auto;
+      font-weight: 500;
+      font-size: 0.3466666667rem;
+      color: #000000;
+      line-height: 1.2rem;
+      text-align: center; }
+    .coins_pop .coins_pop_in .done {
+      background: url(../images/done.png) no-repeat center/100% 100%; }
+    .coins_pop .coins_pop_in h2 {
+      font-weight: 400;
+      font-size: 0.32rem;
+      color: rgba(255, 247, 131, 0.8);
+      line-height: 0.4rem;
+      padding: 0.3333333333rem 0.8rem;
+      text-align: center; }
+
+.bottomText {
+  width: 100%;
+  text-align: center;
+  color: #fff783;
+  font-size: 0.32rem;
+  font-weight: 400;
+  margin: 0.6666666667rem auto 2.4rem; }
+
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%; }
+.arabic .coins_pop,
+.arabic .header,
+.arabic #dataNums {
+  direction: ltr; }
+.arabic .page1 .top .score img {
+  margin-right: 0.0666666667rem;
+  margin-left: unset; }
+.arabic .page1 .my .score img {
+  margin-right: 0.0666666667rem;
+  margin-left: unset; }
+.arabic .page1 .content ul li .num {
+  float: right;
+  margin: 0 0.4rem 0 0.2666666667rem; }
+.arabic .page1 .content ul li .tx {
+  float: right;
+  margin-top: 0.4rem;
+  margin-left: 0.2rem;
+  margin-right: unset; }
+.arabic .page1 .content ul li .info {
+  float: right;
+  margin-top: 0.5333333333rem; }
+.arabic .page1 .content ul li .icon {
+  position: absolute;
+  bottom: 0.3466666667rem;
+  right: 1.3066666667rem;
+  left: unset; }
+.arabic .page1 .content ul li .score {
+  float: left;
+  margin: 0.64rem 0 0 0.4666666667rem; }
+  .arabic .page1 .content ul li .score img {
+    margin-right: 0.0666666667rem;
+    margin-left: unset; }
+.arabic .page1 .my .num {
+  float: right;
+  margin: 0 0.4rem; }
+.arabic .page1 .my .tx {
+  float: right;
+  margin-left: 0.2rem;
+  margin-right: unset; }
+.arabic .page1 .my .icon {
+  position: absolute;
+  bottom: 0.4666666667rem;
+  right: 1.7333333333rem;
+  left: unset; }
+.arabic .page1 .my .info {
+  float: right;
+  margin-top: 0.5333333333rem; }
+.arabic .page1 .my .score {
+  float: left;
+  margin: 0.64rem 0 0 0.4666666667rem; }
+.arabic .page2 .content .box .history_week ul li .score img {
+  margin-right: 0.0666666667rem;
+  margin-left: unset; }
+
+.china .header {
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%; }
+
+.Turkiye .header {
+  background: url(../images/header-tr.png) no-repeat;
+  background-size: 100% 100%; }
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0; }
+
+/*# sourceMappingURL=index.css.map */

view/molistar/activity/gameChallenge/index.html

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="text1"></title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="../../common/css/animate.css">
+    <link rel="stylesheet" href="./css/countNumber.css">
+    <link rel="stylesheet" href="./css/index.css?v=1.1">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 头部 -->
+    <div class="header">
+        <div class="rule text3"></div>
+        <img src="./images/coin_bg.png" alt="" class="coin_bg">
+        <div class="receive">Receive</div>
+    </div>
+    <!-- 说明 -->
+    <div class="descBox">
+        <p class="content text2"></p>
+    </div>
+    <!-- 金币奖池 -->
+    <div class="poolBox">
+        <div class="title text4"></div>
+        <p class="update text5"></p>
+        <div class="coins_pool">
+            <div id="dataNums"></div>
+            <!-- <img src="./images/m.png" alt=""> -->
+        </div>
+        <p class="text55">The coins must be claimed within 7 days. Otherwise, they will be invalid.</p>
+    </div>
+    <div class="tab">
+        <div class="act text10"></div>
+        <div class="text11"></div>
+    </div>
+    <div class="page1">
+        <div class="top">
+            <!-- 礼物 -->
+            <img src="./images/gift.png" alt="" class="gift">
+            <h1 class="rewards text20">View all Rewards</h1>
+            <!-- 倒计时 -->
+            <div class="timeBox">
+                <div class="days">
+                    <span>00</span>
+                    <b class="text6"></b>
+                </div>
+                <div class="hours">
+                    <span>00</span>
+                    <b class="text7"></b>
+                </div>
+                <div class="mins">
+                    <span>00</span>
+                    <b class="text8"></b>
+                </div>
+                <div class="secs">
+                    <span>00</span>
+                    <b class="text9"></b>
+                </div>
+            </div>
+            <!-- 前三 -->
+            <div class="top1">
+                <img src="./images/top1.png" alt="" class="ts">
+                <img src="./images/null.png" alt="" class="tx">
+                <img src="" alt="" class="icon">
+                <div class="name"> </div>
+                <div class="id">ID:0</div>
+            </div>
+            <div class="top2">
+                <img src="./images/top2.png" alt="" class="ts">
+                <img src="./images/null.png" alt="" class="tx">
+                <img src="" alt="" class="icon">
+                <div class="name"> </div>
+                <div class="id">ID:0</div>
+                <div class="score">
+                    <b>Behind 0K</b>
+                    <img src="./images/m.png" alt="">
+                </div>
+            </div>
+            <div class="top3">
+                <img src="./images/top3.png" alt="" class="ts">
+                <img src="./images/null.png" alt="" class="tx">
+                <img src="" alt="" class="icon">
+                <div class="name"> </div>
+                <div class="id">ID:0</div>
+                <div class="score">
+                    <b>Behind 0K</b>
+                    <img src="./images/m.png" alt="">
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <ul>
+                <!-- <li>
+                    <div class="num">04</div>
+                    <img src="./images/null.png" alt="" class="tx">
+                    <img src="" alt="" class="icon">
+                    <div class="info">
+                        <p> </p>
+                        <span>ID:1234567</span>
+                    </div>
+                    <div class="score">
+                        <b>0K</b>
+                        <img src="./images/m.png" alt="">
+                    </div>
+                </li> -->
+            </ul>
+            <div class="more">More</div>
+        </div>
+        <div class="bottom"></div>
+        <div class="my">
+            <div class="num">30+</div>
+            <img src="./images/null.png" alt="" class="tx">
+            <img src="" alt="" class="icon">
+            <div class="info">
+                <p> </p>
+                <span>ID:1234567</span>
+            </div>
+            <div class="score">
+                <b>0K</b>
+                <img src="./images/m.png" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="page2">
+        <div class="top"></div>
+        <div class="content">
+            <div class="box">
+                <h1 class="text15">
+                    Ranking only shows theTop10 users in the history.<br>
+                    (Regardless of whether they have received coins)
+                </h1>
+                <!-- <img src="./images/none.png" class="none" alt=""> -->
+                <!-- <div class="history_week">
+                    <div class="title">
+                        <img src="./images/left.png" alt="">
+                        <b>01/01/2024-03/01/2024</b>
+                        <img src="./images/right.png" alt="">
+                    </div>
+                    <ul>
+                        <li>
+                            <img src="./images/null.png" alt="" class="avatar">
+                            <img src="./images/h1.png" alt="" class="tx">
+                            <img src="" alt="" class="icon">
+                            <p class="name">waiting</p>
+                            <P class="id">ID:-</P>
+                            <div class="score">
+                                <b>Win 0K</b>
+                                <img src="./images/m.png" alt="">
+                            </div>
+                        </li>
+                        <li>
+                            <img src="./images/null.png" alt="" class="avatar">
+                            <img src="./images/h2.png" alt="" class="tx">
+                            <img src="" alt="" class="icon">
+                            <p class="name">waiting</p>
+                            <P class="id">ID:-</P>
+                            <div class="score">
+                                <b>Win 0K</b>
+                                <img src="./images/m.png" alt="">
+                            </div>
+                        </li>
+                        <li>
+                            <img src="./images/null.png" alt="" class="avatar">
+                            <img src="./images/h3.png" alt="" class="tx">
+                            <img src="" alt="" class="icon">
+                            <p class="name">waiting</p>
+                            <P class="id">ID:-</P>
+                            <div class="score">
+                                <b>Win 0K</b>
+                                <img src="./images/m.png" alt="">
+                            </div>
+                        </li>
+                        <li>
+                            <img src="./images/null.png" alt="" class="avatar">
+                            <img src="./images/h.png" alt="" class="tx">
+                            <img src="" alt="" class="icon">
+                            <p class="name">waiting</p>
+                            <P class="id">ID:-</P>
+                            <div class="score">
+                                <b>Win 0K</b>
+                                <img src="./images/m.png" alt="">
+                            </div>
+                        </li>
+                    </ul>
+                </div> -->
+            </div>
+        </div>
+        <div class="bottom"></div>
+    </div>
+    <div class="bottomText text12"></div>
+    <!-- 规则 -->
+    <div class="rules">
+        <div class="rule_in">
+            <img src="./images/close.png" alt="" class="close">
+            <div class="titles text13"></div>
+            <div class="text text14">
+                <!-- <img src="./images/reward.png" alt=""> -->
+                <strong>1. Activity Time</strong>
+                <p><b>Period:</b> Every Monday 00:00 starts and ends at Sunday 23:59.</p>
+                <p><b>Description:</b> Only those who participate in the games of the activity within the specified time period can get points and coins to enter the coins pool.</p>
+                <strong>2. Game Participation and Reward Mechanism</strong>
+                <p><b>Points Acquisition:</b> 1 point can be obtained for every 1 coin invested in the game.</p>
+                <p><b>Coin investment and coins pool:</b> Each time you invest 1,000 coins, the system will randomly draw 1 to 10 coins and add them to the coins pool for this week. This means that the more players invest, the more the bonus pool will accumulate.</p>
+                <strong>3. Points ranking</strong>
+                <p><b>Ranking basis:</b> Ranking based on the points accumulated by players during the event.</p>
+                <p><b>Reward qualification: </b>At the end of the actibity, the top 10 users on the points ranking are eligible to share the coins in the coins pool.</p>
+                <p><b>Update frequency: </b>The ranking is updated daily, and players can check their ranking at any time.</p>
+                <strong>4. Coins pool division logic</strong>
+                <p><b>Distribution principle:</b> The coins in the coins pool will be distributed to the Top 10 users according to the total investment ratio of the top 10 players during the activity. That is, the more you invest, the greater the proportion, and thus you can share more bonuses.</p>
+                <p><b>Settlement time: </b>00:30 on Monday to settle the coins of the previous week. Coins must be claimed within 7 days, otherwise they will be deemed invalid.</p>
+                <strong>5. Notes</strong>
+                <p>All interpretation rights of this activity belong to the platform and have nothing to do with Google/Apple</p>
+            </div>
+        </div>
+    </div>
+    <!-- 领取金币 -->
+    <div class="coins_pop">
+        <div class="coins_pop_in">
+            <!-- 领取提示 -->
+            <div class="fadein text16 animate__animated">Coins have been sent to your wallet!</div>
+            <!-- 领取动画 -->
+            <div class="svga">
+                <div class="svga_in"></div>
+            </div>
+            <img src="./images/close.png" alt="" class="close">
+            <div class="titles text17">Congratulations</div>
+            <h1 class="text18">Congratulations on Getting</h1>
+            <img src="./images/coins.png" alt="" class="coins">
+            <div class="text">
+                <b>0</b>
+                <img src="./images/m.png" alt="">
+            </div>
+            <div class="btn">Done</div>
+            <h2 class="text19">The coins must be claimed within 7 days. Otherwise, they will be invalid.</h2>
+        </div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<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/tr.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/countNumber.js"></script>
+<script src="./js/index.js?v=1.112"></script>

view/molistar/activity/gameChallenge/js/countNumber.js

@@ -0,0 +1,127 @@
+//数字滚动
+; (function ($, window, document) {
+    "use strict";
+    var defaults = {
+        deVal: 0,       //传入值
+        className: 'dataNums',   //样式名称
+        digit: ''    //默认显示几位数字
+    };
+    function rollNum(obj, options) {
+        this.obj = obj;
+        this.options = $.extend(defaults, options);
+        this.init = function () {
+            this.initHtml(obj, defaults);
+        }
+    }
+    rollNum.prototype = {
+        initHtml: function (obj, options) {
+            // console.log(obj, options.deVal)
+            // var nameDeVal = options.deVal.split('');
+            var nameDeVal = options.deVal.toString().split('');
+            
+            var strHtml = '<ul class="' + options.className + ' inrow">';
+            var valLen = options.digit || (options.deVal + '').length;
+            if (obj.find('.' + options.className).length <= 0) {
+                for (var i = 0; i < valLen; i++) {
+                    if (nameDeVal[i] == ",") {
+                        strHtml += '<li class="dataOne dataLine" style="width:0.4rem;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" style="font-family:\'微软雅黑\';"><em style="color:#fff5a1;font-family: "微软雅黑";" class="num0">,</em></div></div></li>';
+                    }
+                    if (nameDeVal[i] == ".") {
+                        strHtml += '<li class="dataOne dataLine" style="width:0.4rem;background:none;font-size:69px;"><div class="dataBoc"><div class="tt" t="38" style="font-family:\'微软雅黑\';"><em style="color:#fff5a1;font-family: "微软雅黑";" class="num0">.</em></div></div></li>';
+                    }
+                    if (nameDeVal[i] != "," && nameDeVal[i] != ".") {
+                        strHtml += '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num10">,</span><span class="num11">.</span></div></div></li>';
+                    }
+                }
+                strHtml += '<img src="./images/m.png" alt="">';
+                strHtml += '</ul>';
+                obj.html(strHtml);
+            }
+            this.scroNum(obj, options);
+        },
+        // scroNum: function(obj, options){
+        //     var number = options.deVal;
+        // 	var $num_item = $(obj).find('.' + options.className).find('.tt');
+        //     var h = $(obj).find('.dataBoc').height(); 
+        //     $num_item.css('transition','all 2s ease-in-out');
+        //     var numberStr = number.toString();
+        //     if(numberStr.length <= $num_item.length - 1){
+        //         var tempStr = '';
+        //         for(var a = 0; a < $num_item.length - numberStr.length; a++){
+        //             tempStr += '0';
+        //         }
+        //         numberStr = tempStr + numberStr;
+        //     }
+
+        //     var numberArr = numberStr.split('');
+        //     $num_item.each(function(i, item) {
+        //         setTimeout(function(){
+        //             if(numberArr[i]==","){
+        //                 $num_item.eq(i).html(",")
+        //                 $num_item.eq(i).css({'font-size':'69px','background':'none','transition':'none','color':'#fff5a1','font-family': "微软雅黑"})
+        //             }
+        //             if(numberArr[i]=='.'){
+        //                 $num_item.eq(i).html(".").css({'font-size':'69px','background':'none','transition':'none','color':'#fff5a1','font-family': "微软雅黑"})
+        //                 // $num_item.eq(i)
+        //             }
+        //             if(numberArr[i] !="," && numberArr[i] !="."){
+        //                 $num_item.eq(i).css('top',-parseInt(numberArr[i])*h - h*10 + 'px');
+        //             }
+        //         },i*150)
+        //     });
+        // }
+
+        /**
+         * 设置最高位不滚动
+         */
+        scroNum: function (obj, options) {
+            var number = options.deVal.toString(); // 目标值转换为字符串
+            var $num_item = $(obj).find('.' + options.className).find('.tt');
+            var h = $(obj).find('.dataBoc').height();
+            $num_item.css('transition', 'all 2s ease-in-out');
+
+            var numberArr = number.split('');
+            var maxDigitIndex = 0; // 最高位索引（默认0，即第一位）
+
+            // 找到第一个非逗号、非小数点的索引，确定最高位数字
+            for (var i = 0; i < numberArr.length; i++) {
+                if (numberArr[i] !== ',' && numberArr[i] !== '.') {
+                    maxDigitIndex = i;
+                    break;
+                }
+            }
+
+            // 遍历每个数字，并处理滚动
+            $num_item.each(function (i, item) {
+                setTimeout(function () {
+                    if (numberArr[i] === ",") {
+                        // 逗号直接显示
+                        $num_item.eq(i).html(",")
+                            .css({ 'font-size': '0.7466666667rem', 'background': 'none', 'transition': 'none', 'color': '#fff5a1', 'font-family': "微软雅黑" });
+                    } else if (numberArr[i] === ".") {
+                        // 小数点直接显示
+                        $num_item.eq(i).html(".")
+                            .css({ 'font-size': '0.7466666667rem', 'background': 'none', 'transition': 'none', 'color': '#fff5a1', 'font-family': "微软雅黑" });
+                    } else {
+                        if (i === maxDigitIndex) {
+                            // 最高位的数字不滚动，去除 transition
+                            $num_item.eq(i).css({
+                                'top': -parseInt(numberArr[i]) * h - h * 10 + 'px',
+                                'transition': 'none' // 移除动画
+                            });
+                        } else {
+                            // 其他位数进行滚动
+                            $num_item.eq(i).css('top', -parseInt(numberArr[i]) * h - h * 10 + 'px');
+                        }
+                    }
+                }, i * 400);
+            });
+        }
+
+    }
+    $.fn.rollNum = function (options) {
+        var $that = this;
+        var rollNumObj = new rollNum($that, options);
+        rollNumObj.init();
+    };
+})(jQuery, window, document);

view/molistar/activity/gameChallenge/js/index.js

@@ -0,0 +1,493 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var countupTime;//倒计时容器
+var loadedCount = 0; // 已加載的數據數量
+var pageSize = 7; // 每次加載的數據數量
+var listTo3 = [];
+var notListTo3 = []; // 每次加載的數據數量
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getInit();
+        getHisRank()
+        // render()
+    }, 100)
+
+})
+
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.header .receive').html(langReplace(localLang.demoModule.receive));
+    $('.coins_pop .btn').html(langReplace(localLang.demoModule.receive));
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+    $('.text2').html(langReplace(localLang.demoModule.text2));
+    $('.text3').html(langReplace(localLang.demoModule.text3));
+    $('.text4').html(langReplace(localLang.demoModule.text4));
+    $('.text5').html(langReplace(localLang.demoModule.text5));
+    $('.text55').html(langReplace(localLang.demoModule.text55));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
+    $('.text8').html(langReplace(localLang.demoModule.text8));
+    $('.text9').html(langReplace(localLang.demoModule.text9));
+    $('.text10').html(langReplace(localLang.demoModule.text10));
+    $('.text11').html(langReplace(localLang.demoModule.text11));
+    $('.text12').html(langReplace(localLang.demoModule.text12));
+    // $('.text13').html(langReplace(localLang.demoModule.text13));
+    // $('.text14').html(langReplace(localLang.demoModule.text14));
+    $('.text15').html(langReplace(localLang.demoModule.text15));
+    $('.text16').html(langReplace(localLang.demoModule.text16));
+    $('.text17').html(langReplace(localLang.demoModule.text17));
+    $('.text18').html(langReplace(localLang.demoModule.text18));
+    $('.text19').html(langReplace(localLang.demoModule.text19));
+    $('.text20').html(langReplace(localLang.demoModule.text20));
+    $('.more').html(langReplace(localLang.demoModule.more));
+    $('.gift').attr('src', langReplace(localLang.demoModule.gift));
+    if (browser.ios) {
+        $('.bottomText').text(langReplace(localLang.demoModule.text12))
+    } else {
+        $('.bottomText').text(langReplace(localLang.demoModule.text122))
+    }
+}
+
+var jackpotNum = null // 可领取奖金 0不能领取 大于0可领取 小于0已领取
+var jackpotPool = 0 //奖池金币数
+var countdownSecond = 0 //本周倒计时秒数
+function getInit() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/miniGame/weekJackpotRank/getRank',
+        success(res) {
+            if (res.code === 200) {
+                // 处理倒计时
+                countdownSecond = res.data.countdownSecond;
+                countTime();
+                // 处理奖金
+                jackpotNum = res.data.jackpot || 0;
+                $('.coins_pop .text b').html(Math.abs(jackpotNum).toLocaleString());
+                if (jackpotNum <= 0) {
+                    $('.header .receive').html(langReplace(localLang.demoModule.done));
+                    $('.header .receive').addClass('done');
+                    $('.coins_pop .btn').html(langReplace(localLang.demoModule.done));
+                    $('.coins_pop .btn').addClass('done');
+                }
+                if (jackpotNum !== 0) {
+                    $('.header .coin_bg').show()
+                    $('.header .receive').show()
+                }
+                jackpotPool = res.data.jackpotPool.toLocaleString();
+                $(window).scroll(function () {
+                    if (($("#dataNums").offset().top - $(window).scrollTop()) < $(window).height()) {
+                        $("#dataNums").rollNum({
+                            deVal: jackpotPool
+                        });
+                    };
+                });
+                // 处理榜单
+                let rankList = res.data.rankList;
+                listTo3 = rankList.slice(0, 3);
+                notListTo3 = rankList.slice(3);
+                // 处理前三
+                if (listTo3.length < 3) {
+                    let arr = new Array(3 - listTo3.length).fill({
+                        avatar: './images/null.png',
+                        name: langReplace(localLang.demoModule.waiting),
+                        erbanNo: null,
+                        score: null
+                    })
+                    listTo3.push(...arr)
+                }
+                let prevScore = null; // 记录上一名的score
+                listTo3.forEach((res, i) => {
+                    $(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
+                    $(`.page1 .top .top${i + 1} .name`).html(res.nick);
+                    $(`.page1 .top .top${i + 1} .icon`).attr('src', res.vipLevel ? `./images/vip/${res.vipLevel}.png` : '');
+                    $(`.page1 .top .top${i + 1} .id`).html('ID:' + res.erbanNo);
+                    // 计算当前与上一名的差值
+                    let diff = prevScore !== null ? prevScore - res.score : 0; // 计算差值
+                    prevScore = res.score; // 更新上一名的分数
+                    $(`.page1 .top .top${i + 1} .score b`).html(langReplace(localLang.demoModule.Behind) + unitProcessingAr((diff), 2));
+                    if (res.erbanNo == null) {
+                        $(`.page1 .top .top${i + 1} .icon`).hide();
+                        $(`.page1 .top .top${i + 1} .id`).hide();
+                        $(`.page1 .top .top${i + 1} .score`).hide();
+                    }
+                    if (res.vipLevel == 0) {
+                        $(`.page1 .top .top${i + 1} .icon`).hide()
+                    }
+                })
+                // 非前三
+                loadMore();
+                // 处理自己榜单数据
+                var my = res.data.meRank;
+                $('.page1 .my .tx').attr("src", my.avatar);
+                $('.page1 .my .num').text(my.ranking == 0 ? '30+' : my.ranking);
+                $('.page1 .my .info p').text(my.nick);
+                $('.page1 .my .icon').attr('src', `./images/vip/${my.vipLevel}.png`);
+                $('.page1 .my .info span').text(`ID:${my.erbanNo}`);
+                if (my.ranking == 0) {
+                    let lastScore = rankList[rankList.length - 1].score;
+                    $('.page1 .my .score b').text(langReplace(localLang.demoModule.Behind) + unitProcessingAr(lastScore - my.score, 2));
+                } else if(my.ranking == 1){
+                    $('.page1 .my .score').hide();
+                }else {
+                    let lastScore = rankList[my.ranking - 2].score;
+                    console.log('lastScore', lastScore);
+                    $('.page1 .my .score b').text(langReplace(localLang.demoModule.Behind) + unitProcessingAr((lastScore - my.score), 2));
+                }
+                if (my.vipLevel == 0) {
+                    $('.page1 .my .icon').hide();
+                }
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+
+// 加載數據函數
+function loadMore() {
+    // 計算加載範圍
+    pageSize = loadedCount == 0 ? 7 : 10;
+    const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize);
+    let str = '';
+    // 拼接 HTML
+    let prevScore = loadedCount == 0 ? listTo3[2].score : notListTo3[loadedCount - 1].score;
+    nextItems.forEach((res, i) => {
+        // 计算当前与上一名的差值
+        let diff = prevScore - res.score;
+        prevScore = res.score;
+        str += `
+                <li>
+                    <div class="num">${res.ranking}</div>
+                    <img src="${res.avatar}" alt="" class="tx">
+                    <img src="./images/vip/${res.vipLevel}.png" alt="" class="icon" style="display: ${res.vipLevel == 0 ? 'none' : 'block'}">
+                    <div class="info">
+                        <p>${res.nick}</p>
+                        <span>ID:${res.erbanNo}</span>
+                    </div>
+                    <div class="score">
+                        <b>${langReplace(localLang.demoModule.Behind) + unitProcessingAr(diff, 2)}</b>
+                        <img src="./images/m.png" alt="">
+                    </div>
+                </li>
+        `
+    })
+    // 將數據插入到列表中
+    $('.page1 .content ul').append(str);
+    // 更新已加載的數據數量
+    loadedCount += nextItems.length;
+    // 如果數據全部加載完成，隱藏按鈕
+    console.log(loadedCount >= notListTo3.length);
+    console.log(notListTo3.length);
+    if (loadedCount >= notListTo3.length) {
+        $('.page1 .content .more').hide();
+    }
+}
+// 綁定按鈕點擊事件
+$('.page1 .content .more').click(function () {
+    loadMore();
+})
+
+// 获取历史排行榜
+function getHisRank() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/miniGame/weekJackpotRank/listHistory',
+        success(res) {
+            if (res.code === 200) {
+                // 处理榜单
+                let hisRank = res.data;
+                if (hisRank.length == 0) {
+                    $(".page2 .content .box").append(`<img src="./images/none.png" class="none" alt="">`);
+                } else {
+                    hisRank.forEach(function (weekData) {
+                        var historyHtml = `
+                            <div class="history_week">
+                                <div class="title">
+                                    <img src="./images/left.png" alt="">
+                                    <b>${weekData.startDate} - ${weekData.endDate}</b>
+                                    <img src="./images/right.png" alt="">
+                                </div>
+                                <ul>
+                        `;
+
+                        // 遍历 rankList 生成排名列表
+                        weekData.rankList.forEach(user => {
+                            historyHtml += `
+                                <li>
+                                    <img src="${user.avatar}" alt="" class="avatar">
+                                    <img src="./images/h${user.rank > 3 ? "" : user.rank}.png" alt="" class="tx">
+                                    <p class="name">${user.nick}</p>
+                                    <P class="id">ID: ${user.erbanNo}</P>
+                                    <div class="score">
+                                        <b>${langReplace(localLang.demoModule.win)} ${unitProcessingAr(user.jackpot,2)}</b>
+                                        <img src="./images/m.png" alt="">
+                                    </div>
+                                </li>
+                            `;
+                        })
+
+                        historyHtml += `
+                                </ul>
+                            </div>
+                        `;
+
+                        // 添加到容器
+                        $(".page2 .content .box").append(historyHtml);
+                    });
+
+                }
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+var hisRank = [
+    {
+        endDate: "03/01/2024",
+        partitionId: 1,
+        rankList: [
+            {
+                avatar: "./images/null.png",
+                erbanNo: "12345",
+                gender: "male",
+                jackpot: 5000,
+                nick: "User1",
+                rank: 1,
+                uid: "UID123",
+                vipLevel: 0
+            },
+            {
+                avatar: "./images/null.png",
+                erbanNo: "67890",
+                gender: "female",
+                jackpot: 4000,
+                nick: "User2",
+                rank: 2,
+                uid: "UID456",
+                vipLevel: 0
+            }
+        ],
+        startDate: "01/01/2024"
+    },
+    {
+        endDate: "10/01/2024",
+        partitionId: 2,
+        rankList: [
+            {
+                avatar: "./images/null.png",
+                erbanNo: "54321",
+                gender: "male",
+                jackpot: 7000,
+                nick: "User3",
+                rank: 1,
+                uid: "UID789",
+                vipLevel: 0
+            }
+        ],
+        startDate: "08/01/2024"
+    }
+];
+
+// 领取金币
+function getJackpot() {
+    showLoading()
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/miniGame/weekJackpotRank/getJackpot',
+        success(res) {
+            if (res.code === 200) {
+                $('.header .receive').html(langReplace(localLang.demoModule.done));
+                $('.header .receive').addClass('done');
+                $('.coins_pop .btn').html(langReplace(localLang.demoModule.done));
+                $('.coins_pop .btn').addClass('done');
+                $(`.coins_pop .fadein`).show()
+                $(`.coins_pop .fadein`).addClass('animate__bounceInRight')
+                setTimeout(() => {
+                    svgaFun()
+                }, 1000);
+                jackpotNum = -Math.abs(jackpotNum)
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+
+// tab切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.page1,.page2').hide();
+    $(`.page${i}`).show();
+    $(this).addClass('act');
+    $(this).siblings().removeClass('act');
+    if (i == 1) {
+        $('.bottomText').css('margin', '0.66667rem auto 2.4rem');
+    } else {
+        $('.bottomText').css('margin', '0.66667rem auto 0.66667rem');
+    }
+})
+// 打开规则
+$('.rule').click(function () {
+    $('.text13').html(langReplace(localLang.demoModule.text13));
+    $('.text14').html(langReplace(localLang.demoModule.text14));
+    $('.rules').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.rules .rule_in .close').click(function () {
+    $('.rules').hide();
+    bodyScroolFun(false);
+})
+
+$(".coins_pop .close").click(function () {
+    $('.coins_pop').hide();
+    $(`.coins_pop .fadein`).hide()
+    $(`.coins_pop .fadein`).removeClass('animate__bounceInRight');
+    bodyScroolFun(false);
+})
+$(".header .receive").click(function () {
+    bodyScroolFun(false);
+    $('.coins_pop').show();
+
+})
+$(".coins_pop .btn").click(function () {
+    if (jackpotNum != 0) {
+        getJackpot()
+    }
+
+})
+
+// 查看奖励
+$(".page1 .rewards").click(function () {
+    $('.text13').html(langReplace(localLang.demoModule.rewards));
+    $('.text14').html(langReplace(localLang.demoModule.text144));
+    $('.rules').show();
+    bodyScroolFun(false);
+})
+
+// 播放svga
+function svgaFun() {
+    // $(`.svga`).hide();
+    let player1 = new SVGA.Player(`.svga .svga_in`);
+    let parser1 = new SVGA.Parser(`.svga .svga_in`);
+    parser1.load(`./images/coins.svga`, function (videoItem) {
+        player1.loops = 1;
+        player1.clearsAfterStop = false;
+        player1.setVideoItem(videoItem);
+        player1.startAnimation();
+        player1.setContentMode('AspectFill')
+        // player1.onFrame((frame) => {
+        //     if (frame == 1) {
+        //         draw()
+        //     }
+        // })
+        player1.onFinished(() => {
+            // $(`.svga`).hide();
+        })
+    })
+}
+
+// 倒计时函数
+let time = null;
+function countTime() {
+    clearTimeout(time);
+
+    if (countdownSecond <= 0) {
+        console.log("倒计时结束");
+        clearTimeout(time);
+        return;
+    }
+
+    // 计算 d, h, m, s
+    let d = Math.floor(countdownSecond / 86400); // 1天 = 86400秒
+    let h = Math.floor((countdownSecond % 86400) / 3600);
+    let m = Math.floor((countdownSecond % 3600) / 60);
+    let s = countdownSecond % 60;
+
+    // 更新页面元素
+    $(".page1 .timeBox .days span").html(d < 10 ? "0" + d : d);
+    $(".page1 .timeBox .hours span").html(h < 10 ? "0" + h : h);
+    $(".page1 .timeBox .mins span").html(m < 10 ? "0" + m : m);
+    $(".page1 .timeBox .secs span").html(s < 10 ? "0" + s : s);
+
+    // 递减秒数
+    countdownSecond--;
+
+    // 递归调用
+    time = setTimeout(countTime, 1000);
+}
+
+// 启动倒计时
+countTime();

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

@@ -0,0 +1,58 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: "جارٍ التحميل...",
+        layerIndex2: "نجاح",
+        layerIndex3: "خطأ في الشبكة",
+        text1: "تحدي اللعبة الفائق",
+        text2: "مرحبًا بك في \"تحدي اللعبة الفائق\"! خلال الحدث، يجمع المشاركون النقاط من خلال المشاركة في الألعاب. كلما زادت نقاطك، زاد استثمارك، وزادت المكافآت التي تحصل عليها. سيحصل أولئك الذين يؤدون أداءً جيدًا على ترتيب شرفي، ويتمتعون بمكانة مرموقة، ويحصلون على فرصة للفوز بجائزة رائعة!",
+        text3: "القواعد",
+        text4: "مخزون العملات",
+        text5: "يتم التحديث كل 5 دقائق",
+        text55: "يجب المطالبة بالعملات خلال 7 أيام، وإلا ستصبح غير صالحة.",
+        text6: "أيام",
+        text7: "ساعات",
+        text8: "دقائق",
+        text9: "ثوانٍ",
+        text10: "الترتيب",
+        text11: "السجل",
+        text12: "هذا الحدث ليس له أي علاقة بشركة Apple.",
+        text122: "هذا الحدث ليس له أي علاقة بشركة Google.",
+        text13: "القواعد",
+        text14: `<strong>1. مدة الحدث</strong>
+                 <p><b>الفترة:</b> يبدأ كل يوم اثنين الساعة 00:00 وينتهي يوم الأحد الساعة 23:59.</p>
+                 <p><b>الوصف:</b> فقط الذين يشاركون في ألعاب الحدث خلال الفترة المحددة يمكنهم كسب النقاط والعملات وإضافتها إلى مخزون العملات.</p>
+                 <strong>2. المشاركة في الألعاب وآلية المكافآت</strong>
+                 <p><b>اكتساب النقاط:</b> يتم الحصول على نقطة واحدة مقابل كل عملة واحدة يتم استثمارها في اللعبة.</p>
+                 <p><b>استثمار العملات ومخزون العملات:</b> عند استثمار 1000 عملة، يقوم النظام بسحب عشوائي بين 1 إلى 10 عملات وإضافتها إلى مخزون العملات لهذا الأسبوع. مما يعني أنه كلما زاد استثمار اللاعبين، زاد حجم المخزون.</p>
+                 <strong>3. ترتيب النقاط</strong>
+                 <p><b>أساس الترتيب:</b> يعتمد الترتيب على النقاط التي يجمعها اللاعبون خلال الحدث.</p>
+                 <p><b>أهلية المكافأة:</b> في نهاية الحدث، يكون المستخدمون العشرة الأوائل في الترتيب مؤهلين لتقاسم العملات في المخزون.</p>
+                 <p><b>تكرار التحديث:</b> يتم تحديث الترتيب يوميًا، ويمكن للاعبين التحقق من ترتيبهم في أي وقت.</p>
+                 <strong>4. آلية توزيع مخزون العملات</strong>
+                 <p><b>مبدأ التوزيع:</b> يتم توزيع العملات في المخزون على أفضل 10 مستخدمين بناءً على نسبة استثماراتهم خلال الحدث. أي أنه كلما زاد استثمارك، زادت حصتك من المكافأة.</p>
+                 <p><b>وقت التسوية:</b> يتم تسوية العملات الخاصة بالأسبوع السابق في الساعة 00:30 من يوم الاثنين. يجب المطالبة بالعملات خلال 7 أيام وإلا ستعتبر غير صالحة.</p>
+                 <strong>5. ملاحظات</strong>
+                 <p>جميع حقوق تفسير هذا الحدث تعود إلى المنصة، وليس له أي علاقة بـ Google/Apple.</p>`,
+        text144: `<img src="./images/reward-ar.png" alt="">`,
+        rewards: "المكافآت",
+        receive: "استلام",
+        done: "تم",
+        Behind: "خلف",
+        win: `الفوز`,
+        more: "المزيد",
+        month: "شهر",
+        day: "يوم",
+        waiting: "في الانتظار",
+        text15: `يعرض الترتيب فقط أفضل 10 مستخدمين في السجل.<br> 
+                 (بغض النظر عما إذا كانوا قد حصلوا على العملات أم لا)`,
+        text16: "تم إرسال العملات إلى محفظتك!",
+        text17: "تهانينا",
+        text18: "تهانينا! لقد حصلت على",
+        text19: "يجب المطالبة بالعملات خلال 7 أيام، وإلا ستصبح غير صالحة.",
+        text20: "عرض جميع المكافآت",
+        gift: "./images/gift-ar.png",
+    }
+
+}

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

@@ -0,0 +1,55 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1: `Super game challenge`,
+        text2: `Welcome to the "Super Game Challenge"! During the event, participants accumulate points by participating in games.The more points you have, the more you invest, and the more rewards you get. Those who perform well will also be on the honor ranking, enjoy a distinguished ranking, and have the opportunity to win an enviable prize!`,
+        text3: `Rule`,
+        text4: `Coins Pool`,
+        text5: `Update every 5 minutes`,
+        text55: `The coins must be claimed within 7 days. Otherwise, they will be invalid.`,
+        text6: `Days`,
+        text7: `Hours`,
+        text8: `Mins`,
+        text9: `Secs`,
+        text10: `Ranking`,
+        text11: `History`,
+        text12: `Event has nothing to do with Apple.`,
+        text122: `Event has nothing to do with Google.`,
+        text13: `Rules`,
+        text14: `<strong>1. Activity Time</strong>
+                <p><b>Period:</b> Every Monday 00:00 starts and ends at Sunday 23:59.</p>
+                <p><b>Description:</b> Only those who participate in the games of the activity within the specified time period can get points and coins to enter the coins pool.</p>
+                <strong>2. Game Participation and Reward Mechanism</strong>
+                <p><b>Points Acquisition:</b> 1 point can be obtained for every 1 coin invested in the game.</p>
+                <p><b>Coin investment and coins pool:</b> Each time you invest 1,000 coins, the system will randomly draw 1 to 10 coins and add them to the coins pool for this week. This means that the more players invest, the more the bonus pool will accumulate.</p>
+                <strong>3. Points ranking</strong>
+                <p><b>Ranking basis:</b> Ranking based on the points accumulated by players during the event.</p>
+                <p><b>Reward qualification: </b>At the end of the actibity, the top 10 users on the points ranking are eligible to share the coins in the coins pool.</p>
+                <p><b>Update frequency: </b>The ranking is updated daily, and players can check their ranking at any time.</p>
+                <strong>4. Coins pool division logic</strong>
+                <p><b>Distribution principle:</b> The coins in the coins pool will be distributed to the Top 10 users according to the total investment ratio of the top 10 players during the activity. That is, the more you invest, the greater the proportion, and thus you can share more bonuses.</p>
+                <p><b>Settlement time: </b>00:30 on Monday to settle the coins of the previous week. Coins must be claimed within 7 days, otherwise they will be deemed invalid.</p>
+                <strong>5. Notes</strong>
+                <p>All interpretation rights of this activity belong to the platform and have nothing to do with Google/Apple</p>`,
+        text144: `<img src="./images/reward.png" alt="">`,
+        rewards: `Rewards`,
+        receive: `Receive`,
+        done: `Done`,
+        Behind: `Behind`,
+        win: `Win`,
+        more: 'More',
+        month: 'Month',
+        day: 'Day',
+        waiting: 'Waiting',
+        text15: `Ranking only shows theTop10 users in the history.<br>
+                    (Regardless of whether they have received coins)`,
+        text16: `Coins have been sent to your wallet!`,
+        text17: `Congratulations`,
+        text18: `Congratulations on Getting`,
+        text19: `The coins must be claimed within 7 days. Otherwise, they will be invalid.`,
+        text20: `View all Rewards`,
+        gift: "./images/gift.png",
+    },
+}

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

@@ -0,0 +1,56 @@
+langTr = {
+    demoModule: {
+        layerIndex1: "Yükleniyor...",
+        layerIndex2: "Başarılı",
+        layerIndex3: "Ağ hatası",
+        text1: "Süper Oyun Mücadelesi",
+        text2: "\"Süper Oyun Mücadelesi\"ne hoş geldiniz! Etkinlik süresince katılımcılar oyunlara katılarak puan toplar. Ne kadar çok puanınız olursa, o kadar çok yatırım yaparsınız ve daha fazla ödül kazanırsınız. İyi performans gösterenler onur sıralamasında yer alacak, prestijli bir konuma sahip olacak ve kıskanılacak ödülleri kazanma şansı elde edecek!",
+        text3: "Kurallar",
+        text4: "Jeton Havuzu",
+        text5: "Her 5 dakikada bir güncellenir",
+        text55: "Jetonlar 7 gün içinde talep edilmelidir, aksi takdirde geçersiz hale gelir.",
+        text6: "Gün",
+        text7: "Saat",
+        text8: "Dakika",
+        text9: "Saniye",
+        text10: "Sıralama",
+        text11: "Geçmiş",
+        text12: "Etkinliğin Apple ile hiçbir ilgisi yoktur.",
+        text122: "Etkinliğin Google ile hiçbir ilgisi yoktur.",
+        text13: "Kurallar",
+        text14: `<strong>1. Etkinlik Süresi</strong> 
+                 <p><b>Dönem:</b> Her Pazartesi 00:00'da başlar ve Pazar 23:59'da sona erer.</p> 
+                 <p><b>Açıklama:</b> Belirtilen süre içinde etkinlik oyunlarına katılanlar puan ve jeton kazanarak jeton havuzuna ekleyebilir.</p> 
+                 <strong>2. Oyun Katılımı ve Ödül Mekanizması</strong> 
+                 <p><b>Puan Kazanımı:</b> Oyunda yatırılan her 1 jeton için 1 puan kazanılır.</p> 
+                 <p><b>Jeton yatırımı ve jeton havuzu:</b> Her 1.000 jeton yatırıldığında, sistem rastgele 1 ila 10 jeton çeker ve o haftanın jeton havuzuna ekler. Bu, oyuncuların yatırımı arttıkça ödül havuzunun büyüyeceği anlamına gelir.</p> 
+                 <strong>3. Puan Sıralaması</strong> 
+                 <p><b>Sıralama Kriteri:</b> Etkinlik boyunca oyuncuların topladığı puanlara göre sıralama yapılır.</p> 
+                 <p><b>Ödül Hakkı:</b> Etkinlik sonunda, puan sıralamasındaki ilk 10 kullanıcı jeton havuzundaki jetonları paylaşmaya hak kazanır.</p> 
+                 <p><b>Güncelleme Sıklığı:</b> Sıralama günlük olarak güncellenir ve oyuncular sıralamalarını istedikleri zaman kontrol edebilirler.</p> 
+                 <strong>4. Jeton Havuzu Dağıtım Mantığı</strong> 
+                 <p><b>Dağıtım İlkesi:</b> Jeton havuzundaki jetonlar, etkinlik süresince en çok yatırım yapan ilk 10 oyuncunun toplam yatırım oranına göre dağıtılır. Yani, ne kadar çok yatırım yaparsanız, o kadar büyük bir pay alırsınız.</p> 
+                 <p><b>Ödeme Zamanı:</b> Önceki haftanın jetonları Pazartesi günü saat 00:30'da ödenir. Jetonlar 7 gün içinde talep edilmelidir, aksi takdirde geçersiz sayılır.</p> 
+                 <strong>5. Notlar</strong> 
+                 <p>Bu etkinliğin tüm yorumlama hakları platforma aittir ve Google/Apple ile ilgisi yoktur.</p>`,
+        text144: `<img src="./images/reward-tr.png" alt="">`,
+        rewards: "Ödüller",
+        receive: "Al",
+        done: "Tamamlandı",
+        Behind: "Geride",
+        win: `Kazan`,
+        more: "Daha fazla",
+        month: "Ay",
+        day: "Gün",
+        waiting: "Bekleniyor",
+        text15: `Sıralama yalnızca geçmişteki en iyi 10 kullanıcıyı gösterir.<br> 
+                 (Jeton alıp almadıklarına bakılmaksızın)`,
+        text16: "Jetonlar cüzdanınıza gönderildi!",
+        text17: "Tebrikler",
+        text18: "Şunu Kazandınız",
+        text19: "Jetonlar 7 gün içinde talep edilmelidir, aksi takdirde geçersiz hale gelir.",
+        text20: "Tüm Ödülleri Görüntüle",
+        gift: "./images/gift-tr.png",
+    }
+
+}

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

@@ -0,0 +1,59 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: "加载中...",
+        layerIndex2: "成功",
+        layerIndex3: "网络错误",
+        text1: "超级游戏挑战",
+        text2: "欢迎来到“超级游戏挑战”！在活动期间，参与者通过参加游戏累积积分。积分越多，投入越多，获得的奖励就越多。表现优秀的玩家还将登上荣誉排行榜，享受尊贵排名，并有机会赢得令人羡慕的奖品！",
+        text3: "规则",
+        text4: "金币池",
+        text5: "每5分钟更新一次",
+        text55: "金币需在7天内领取，否则将失效。",
+        text6: "天",
+        text7: "小时",
+        text8: "分钟",
+        text9: "秒",
+        text10: "排行榜",
+        text11: "历史记录",
+        text12: "活动与 Apple 无关。",
+        text122: "活动与 Google 无关。",
+        text13: "活动规则",
+        text14: `<strong>1. 活动时间</strong>
+                 <p><b>周期：</b> 每周一00:00开始，周日23:59结束。</p>
+                 <p><b>说明：</b> 只有在规定时间内参与活动游戏的用户，才能获得积分和金币，并将其计入金币池。</p>
+                 <strong>2. 游戏参与与奖励机制</strong>
+                 <p><b>积分获取：</b> 每投入1枚金币可获得1点积分。</p>
+                 <p><b>金币投入与金币池：</b> 每投入1000枚金币，系统将随机抽取1到10枚金币，并加入本周的金币池。这意味着玩家投入越多，奖金池累积越多。</p>
+                 <strong>3. 积分排行榜</strong>
+                 <p><b>排名依据：</b> 根据玩家在活动期间累积的积分进行排名。</p>
+                 <p><b>奖励资格：</b> 活动结束后，排行榜前10名的用户有资格瓜分金币池中的金币。</p>
+                 <p><b>更新频率：</b> 排行榜每日更新，玩家可随时查看自己的排名。</p>
+                 <strong>4. 金币池分配规则</strong>
+                 <p><b>分配原则：</b> 金币池中的金币将根据前10名玩家的总投入比例进行分配。投入越多，所占比例越大，因此可获得的奖金也越多。</p>
+                 <p><b>结算时间：</b> 每周一00:30结算上一周的金币。金币需在7天内领取，否则将视为无效。</p>
+                 <strong>5. 备注</strong>
+                 <p>本活动的最终解释权归平台所有，与 Google/Apple 无关。</p>`,
+        text144: `<img src="./images/reward.png" alt="">`,
+        rewards: "奖励",
+        receive: "领取",
+        done: "完成",
+        Behind: "落后",
+        win: `赢得`,
+        more: "更多",
+        month: "月",
+        day: "日",
+        waiting: "等待中",
+        text15: `排行榜仅显示历史前10名用户。<br> 
+                 （无论是否领取金币）`,
+        text16: "金币已发放至您的钱包！",
+        text17: "恭喜",
+        text18: "恭喜获得",
+        text19: "金币需在7天内领取，否则将失效。",
+        text20: "查看所有奖励",
+        gift: "./images/gift.png",
+
+    }
+
+}

view/molistar/activity/shortLink/css/index.css

@@ -0,0 +1,340 @@
+@charset "UTF-8";
+html,
+body {
+  width: 100%;
+  background: #E01F3F;
+}
+
+.header {
+  position: relative;
+}
+.header .headerImg {
+  width: 100%;
+}
+.header .info {
+  background-image: url("../images/touxiang.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  border-radius: 0.4266666667rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  position: absolute;
+  top: 1.2rem;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 0.08rem 0;
+}
+.header .info span {
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 0.3466666667rem;
+  color: #000000;
+}
+.header .info img {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  margin-left: 0.16rem;
+}
+
+.zh_content {
+  padding-bottom: 2.6666666667rem;
+  position: absolute;
+  top: 5.3333333333rem;
+}
+
+.wai_content {
+  position: absolute;
+  top: 5.2rem;
+}
+
+.game_boxwrap {
+  margin: 0 0.4rem;
+  position: relative;
+}
+.game_boxwrap .gameImg {
+  width: 100%;
+}
+.game_boxwrap .wrap {
+  background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+  border-radius: 0.4266666667rem;
+  position: absolute;
+  top: 90%;
+  left: 0;
+  right: 0;
+}
+.game_boxwrap .wrap .game_item {
+  background: linear-gradient(0deg, #FFFCED, #FEF3BD);
+  border-radius: 0.3466666667rem;
+  border: 0.0266666667rem solid #FFAB6B;
+  margin: 0.2666666667rem;
+  margin-bottom: 0;
+}
+.game_boxwrap .wrap .swiper {
+  height: 2.6666666667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.game_boxwrap .wrap .swiper .swiper-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.game_boxwrap .wrap .game_content {
+  margin: 0.2666666667rem 0.2666666667rem 0.2666666667rem 0.4rem;
+}
+.game_boxwrap .wrap .game_content .flex_box {
+  display: flex;
+  align-items: center;
+}
+.game_boxwrap .wrap .game_content .flex_box .info {
+  text-align: center;
+  overflow: visible;
+}
+.game_boxwrap .wrap .game_content .flex_box .info img {
+  width: 1.0666666667rem;
+  height: 1.0666666667rem;
+  border-radius: 50%;
+}
+.game_boxwrap .wrap .game_content .flex_box .info .name {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 0.32rem;
+  color: #381600;
+  margin-top: 0.1066666667rem;
+  width: 0.9066666667rem;
+}
+.game_boxwrap .wrap .game_content .flex_box .right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.game_boxwrap .wrap .game_content .flex_box .right .win {
+  width: 1.3333333333rem;
+  height: 0.5333333333rem;
+  margin: 0 0.2133333333rem;
+}
+.game_boxwrap .wrap .game_content .flex_box .right .game_link {
+  width: 1.28rem;
+  height: 1.28rem;
+}
+.game_boxwrap .wrap .game_content .flex_box .right .coins {
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 0.6666666667rem;
+  color: #D9000A;
+  margin: 0 0.2133333333rem;
+}
+.game_boxwrap .wrap .game_content .flex_box .right .coins_img img {
+  width: 0.6933333333rem;
+  height: 0.6933333333rem;
+}
+.game_boxwrap .wrap .game_content .tip {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 0.32rem;
+  color: #A7A493;
+  text-align: center;
+  margin-top: 0.2666666667rem;
+}
+
+.gift_boxwrap {
+  margin: 0 0.4rem;
+  position: relative;
+  margin-top: 11.3333333333rem;
+}
+.gift_boxwrap .giftImg {
+  width: 100%;
+}
+.gift_boxwrap .wrap {
+  background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+  border-radius: 0.4266666667rem;
+  position: absolute;
+  top: 90%;
+}
+.gift_boxwrap .wrap .swiper {
+  height: 2.6666666667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.gift_boxwrap .wrap .swiper .swiper-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.gift_boxwrap .wrap .gift_content {
+  position: relative;
+  transition: top 1s ease-in-out;
+  will-change: transform;
+  margin-top: 0.3466666667rem;
+}
+.gift_boxwrap .wrap .gift_content .flex_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0.64rem;
+  left: 0.4rem;
+  z-index: 99;
+}
+.gift_boxwrap .wrap .gift_content .flex_box .left img {
+  width: 1.1733333333rem;
+  height: 1.1733333333rem;
+  border-radius: 50%;
+}
+.gift_boxwrap .wrap .gift_content .flex_box .right {
+  margin-left: 0.2666666667rem;
+}
+.gift_boxwrap .wrap .gift_content .flex_box .right .txt,
+.gift_boxwrap .wrap .gift_content .flex_box .right .txt2 {
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 0.3733333333rem;
+  color: #FFFFFF;
+}
+.gift_boxwrap .wrap .gift_content .flex_box .right .txt2 {
+  margin-top: 0.1333333333rem;
+}
+.gift_boxwrap .wrap .gift_content .yuan_box {
+  position: absolute;
+  left: 6.6666666667rem;
+  bottom: -0.1333333333rem;
+}
+.gift_boxwrap .wrap .gift_content .yuan_box .gift_yuan {
+  width: 2.4533333333rem;
+  position: relative;
+}
+.gift_boxwrap .wrap .gift_content .yuan_box .yuan_txt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.gift_boxwrap .wrap .gift_content .yuan_box .yuan_txt .yuan_num {
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 0.48rem;
+  color: #FDF565;
+}
+.gift_boxwrap .wrap .gift_content .yuan_box .yuan_txt .yuan_coins {
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 0.32rem;
+  color: #FFFFFF;
+  text-align: center;
+}
+
+.wealth_boxwrap {
+  margin: 0 0.4rem;
+  position: relative;
+  margin-top: 5.3333333333rem;
+}
+.wealth_boxwrap .wrap {
+  background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+  border-radius: 0.4266666667rem;
+  position: absolute;
+  top: 90%;
+}
+.wealth_boxwrap .wrap .wealth_content {
+  padding-top: 0.3466666667rem;
+}
+
+.invite_boxwrap {
+  margin: 5.3333333333rem 0.4rem;
+  position: relative;
+}
+.invite_boxwrap .wrap {
+  background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+  border-radius: 0.4266666667rem;
+  position: absolute;
+  top: 90%;
+  width: 100%;
+}
+.invite_boxwrap .wrap .invite_content {
+  padding: 0.4533333333rem 0.2933333333rem;
+}
+.invite_boxwrap .wrap .invite_content .txt {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 0.4rem;
+  color: #381600;
+  line-height: 0.64rem;
+}
+.invite_boxwrap .wrap .invite_content #txt9,
+.invite_boxwrap .wrap .invite_content #txt11 {
+  color: #D9000A;
+  box-shadow: 0 -0.2133333333rem 0 #FFDF6F inset;
+  font-weight: 600;
+}
+
+.bottom_boxwrap {
+  background: linear-gradient(0deg, #FFE4A2, #FFE755);
+  border-radius: 0.4266666667rem 0.4266666667rem 0px 0px;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  padding: 0 0 0 0.4rem;
+  z-index: 99;
+}
+.bottom_boxwrap .logo img {
+  width: 1.4133333333rem;
+  height: 1.4133333333rem;
+}
+.bottom_boxwrap .detail {
+  margin-left: 0.2666666667rem;
+}
+.bottom_boxwrap .detail .title {
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 0.4266666667rem;
+  color: #381600;
+}
+.bottom_boxwrap .detail .txt {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 0.3733333333rem;
+  color: #381600;
+  margin-top: 0.2666666667rem;
+}
+.bottom_boxwrap .detail .txt img {
+  width: 0.3466666667rem;
+  height: 0.3466666667rem;
+}
+.bottom_boxwrap .open {
+  background-image: url("../images/btn.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  /* 居中 */
+  width: 3.1466666667rem;
+  height: 2.1333333333rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.24rem;
+  margin-left: auto;
+  margin-right: 0.1333333333rem;
+}
+.bottom_boxwrap .open .txt {
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 0.4533333333rem;
+  color: #FFFFFF;
+}
+
+.txt_bottom {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 0.3466666667rem;
+  color: #A7A493;
+  padding: 0.4266666667rem 0.2933333333rem;
+}
+.txt_bottom div {
+  margin-bottom: 0.1333333333rem;
+}

view/molistar/activity/shortLink/css/index.scss

@@ -0,0 +1,435 @@
+@function px2rem($px) {
+  @return $px / 75+rem;
+}
+
+html,
+body {
+  width: 100%;
+  background: #E01F3F;
+  // padding: 0 px2rem(30);
+}
+
+.header {
+  position: relative;
+
+  .headerImg {
+    width: 100%;
+    // height: px2rem(458);
+  }
+
+  .info {
+    background-image: url('../images/touxiang.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: px2rem(32);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    position: absolute;
+    top: px2rem(90);
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: px2rem(6) 0;
+
+    span {
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-size: px2rem(26);
+      color: #000000;
+    }
+
+    img {
+      width: px2rem(60);
+      height: px2rem(60);
+      border-radius: 50%;
+      margin-left: px2rem(12);
+    }
+  }
+}
+
+.zh_content {
+  padding-bottom: px2rem(200);
+  position: absolute;
+  top: px2rem(400);
+}
+.wai_content{
+  position: absolute;
+  top: px2rem(390);
+}
+
+.game_boxwrap {
+  margin: 0 px2rem(30);
+  position: relative;
+
+  // height: px2rem(500);
+  .gameImg {
+    width: 100%;
+  }
+
+  .wrap {
+    background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+    border-radius: px2rem(32);
+    position: absolute;
+    top: 90%;
+    // width: px2rem(690);
+    left: 0;
+    right: 0;
+
+    .game_item {
+      background: linear-gradient(0deg, #FFFCED, #FEF3BD);
+      border-radius: px2rem(26);
+      border: px2rem(2) solid #FFAB6B;
+      margin: px2rem(20);
+      margin-bottom: 0;
+      // height: px2rem(198);
+      // /* 设置一个固定高度 */
+      // overflow: hidden;
+      // position: relative;
+
+    }
+
+    .swiper {
+      height: px2rem(200);
+      left: 50%;
+      transform: translateX(-50%);
+
+      .swiper-wrapper {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .game_content {
+
+      margin: px2rem(20) px2rem(20) px2rem(20) px2rem(30);
+
+      .flex_box {
+        display: flex;
+        align-items: center;
+
+        .info {
+          text-align: center;
+          overflow: visible;
+          img {
+            width: px2rem(80);
+            height: px2rem(80);
+            border-radius: 50%;
+          }
+
+          .name {
+            font-family: PingFang SC;
+            font-weight: 400;
+            font-size: px2rem(24);
+            color: #381600;
+            margin-top: px2rem(8);
+            width: px2rem(68);
+          }
+          
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .win {
+            width: px2rem(100);
+            height: px2rem(40);
+            margin: 0 px2rem(16);
+          }
+
+          .game_link {
+            width: px2rem(96);
+            height: px2rem(96);
+          }
+
+          .coins {
+            font-family: PingFang SC;
+            font-weight: 600;
+            font-size: px2rem(50);
+            color: #D9000A;
+            margin: 0 px2rem(16);
+          }
+          .coins_img{
+            img{
+              width: px2rem(52);
+              height: px2rem(52);
+            }
+          }
+        }
+      }
+
+      .tip {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: px2rem(24);
+        color: #A7A493;
+        text-align: center;
+        margin-top: px2rem(20);
+      }
+
+    }
+  }
+}
+
+.gift_boxwrap {
+  margin: 0 px2rem(30);
+  position: relative;
+  margin-top: px2rem(850);
+
+  .giftImg {
+    width: 100%;
+  }
+
+  .wrap {
+    background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+    border-radius: px2rem(32);
+    position: absolute;
+    top: 90%;
+    // width: px2rem(690);
+
+    #gift_item {
+      // height: px2rem(200);
+      // /* 设置一个固定高度 */
+      // overflow: hidden;
+
+    }
+
+    .swiper {
+      height: px2rem(200);
+      left: 50%;
+      transform: translateX(-50%);
+
+      .swiper-wrapper {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .gift_content {
+      // margin-top: px2rem(30);
+      position: relative;
+      transition: top 1s ease-in-out;
+      will-change: transform;
+      // transition: transform 1s ease;
+      // transform: translateY(0);
+      margin-top: px2rem(26);
+
+      .flex_box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: px2rem(48);
+        left: px2rem(30);
+        z-index: 99;
+
+        .left {
+          img {
+            width: px2rem(88);
+            height: px2rem(88);
+            border-radius: 50%;
+          }
+        }
+
+        .right {
+          margin-left: px2rem(20);
+
+          .txt,
+          .txt2 {
+            font-family: PingFang SC;
+            font-weight: 500;
+            font-size: px2rem(28);
+            color: #FFFFFF;
+          }
+
+          .txt2 {
+            margin-top: px2rem(10);
+          }
+        }
+      }
+
+      .gift_chang {}
+
+
+      .yuan_box {
+        position: absolute;
+        left: px2rem(500);
+        bottom: px2rem(-10);
+
+        .gift_yuan {
+          width: px2rem(184);
+          position: relative;
+        }
+
+        .yuan_txt {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+
+          .yuan_num {
+            font-family: PingFang SC;
+            font-weight: 500;
+            font-size: px2rem(36);
+            color: #FDF565;
+          }
+
+          .yuan_coins {
+            font-family: PingFang SC;
+            font-weight: 500;
+            font-size: px2rem(24);
+            color: #FFFFFF;
+            text-align: center;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+.wealth_boxwrap {
+  margin: 0 px2rem(30);
+  position: relative;
+  margin-top: px2rem(400);
+
+  .wrap {
+    background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+    border-radius: px2rem(32);
+    position: absolute;
+    top: 90%;
+
+    .wealth_content {
+      padding-top: px2rem(26);
+    }
+  }
+}
+
+.invite_boxwrap {
+  margin: px2rem(400) px2rem(30);
+  position: relative;
+
+  .wrap {
+    background: linear-gradient(0deg, #FEFEFD, #FFF4CD);
+    border-radius: px2rem(32);
+    position: absolute;
+    top: 90%;
+    width: 100%;
+
+    .invite_content {
+      padding: px2rem(34) px2rem(22);
+
+      .txt {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: px2rem(30);
+        color: #381600;
+        line-height: px2rem(48);
+      }
+
+      #txt9,
+      #txt11 {
+        color: #D9000A;
+        box-shadow: 0 px2rem(-16) 0 #FFDF6F inset;
+        font-weight: 600;
+
+      }
+
+      // #txt9 ,#txt11::after{
+      //   content: '';
+      //   position: absolute;
+      //   left: 0;
+      //   bottom: 0;
+      //   width: 100%;
+      //   height: 0.2rem;
+      //   background-color: red;
+      //   transform: translateY(-50%);
+      // }
+    }
+  }
+}
+
+.bottom_boxwrap {
+  background: linear-gradient(0deg, #FFE4A2, #FFE755);
+  border-radius: px2rem(32) px2rem(32) 0px 0px;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  padding: 0 0 0 px2rem(30);
+  z-index: 99;
+
+  .logo {
+    img {
+      width: px2rem(106);
+      height: px2rem(106);
+    }
+  }
+
+  .detail {
+    margin-left: px2rem(20);
+
+    .title {
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-size: px2rem(32);
+      color: #381600;
+    }
+
+    .txt {
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-size: px2rem(28);
+      color: #381600;
+      margin-top: px2rem(20);
+
+      img {
+        width: px2rem(26);
+        height: px2rem(26);
+      }
+    }
+
+  }
+
+  .open {
+    background-image: url('../images/btn.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    /* 居中 */
+    width: px2rem(236);
+    height: px2rem(160);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: px2rem(18);
+    margin-left: auto;
+    margin-right: px2rem(10);
+
+    .txt {
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-size: px2rem(34);
+      color: #FFFFFF;
+    }
+  }
+}
+
+.txt_bottom {
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: px2rem(26);
+  color: #A7A493;
+  padding: px2rem(32) px2rem(22);
+
+  div {
+    margin-bottom: px2rem(10);
+  }
+}