更改时间字段

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

@@ -32,7 +32,7 @@ body {
 
 .header {
   width: 10rem;
-  height: 10.02667rem;
+  height: 10.01333rem;
   background: url(../images/header.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0;
@@ -43,9 +43,9 @@ body {
   position: absolute;
   left: 52%;
   transform: translateX(-50%);
-  top: 3.64rem;
-  height: 1.30667rem;
-  width: 6.48rem;
+  top: 3.76rem;
+  height: 1.70667rem;
+  width: 7.38667rem;
 }
 
 .header .rule_rule {
@@ -55,7 +55,7 @@ body {
   font-size: 0.34667rem;
   font-weight: bold;
   position: absolute;
-  top: 1rem;
+  top: 8.92rem;
   right: 0rem;
   color: #703900;
   box-sizing: border-box;
@@ -114,7 +114,7 @@ body {
   height: 4.98667rem;
   background: url(../images/myInfo.png) no-repeat;
   background-size: 100% 100%;
-  margin: 1.12rem auto 0.26667rem;
+  margin: 0.66667rem auto 0rem;
   position: relative;
 }
 
@@ -159,6 +159,7 @@ body {
   font-weight: 400;
   background: url(../images/myInfoBut.png) no-repeat;
   background-size: 100% 100%;
+  display: none;
 }
 
 .bg .myInfo .skip img {
@@ -170,7 +171,8 @@ body {
 
 .bg .myInfo .copy {
   position: absolute;
-  right: 0.66667rem;
+  left: 50%;
+  transform: translateX(-50%);
   bottom: 0.66667rem;
   width: 3.92rem;
   height: 0.90667rem;
@@ -194,7 +196,7 @@ body {
   width: 9.36rem;
   height: 1.01333rem;
   position: relative;
-  margin: 0 auto 0.26667rem;
+  margin: 0.7rem auto 0.26667rem;
   background: url(../images/myIncomeBg.png) no-repeat;
   background-size: 100% 100%;
 }
@@ -227,6 +229,19 @@ body {
   font-size: 0.48rem;
 }
 
+.bg .myIncome .text {
+  width: 2.4rem;
+  height: 0.65rem;
+  line-height: 0.65rem;
+  position: absolute;
+  left: 2.9rem;
+  top: 0.2rem;
+  text-align: center;
+  color: #312200;
+  font-size: 0.37333rem;
+  font-weight: 600;
+}
+
 .bg .ul_pub {
   width: 100%;
   height: 100vh;
@@ -359,6 +374,7 @@ body {
   display: flex;
   justify-content: space-between;
   margin: 0 auto 0rem;
+  white-space: nowrap;
 }
 
 .bg .ul_pub .incomeBox .sTab div {
@@ -387,13 +403,14 @@ body {
 .bg .ul_pub .incomeBox .tableTitle {
   width: 8.8rem;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   margin-bottom: 0;
   position: absolute;
   top: 6.15rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
+  white-space: nowrap;
 }
 
 .bg .ul_pub .incomeBox .tableTitle div {
@@ -408,8 +425,8 @@ body {
 
 .bg .ul_pub .incomeBox ul {
   width: 8.8rem;
-  height: 6rem;
-  margin: 0 auto 0;
+  height: 5.5rem;
+  margin: 0.8rem auto 0;
   overflow-y: scroll;
   position: relative;
 }
@@ -444,11 +461,7 @@ body {
   height: 0.66667rem;
   margin-bottom: 0.24rem;
   display: flex;
-  justify-content: space-between;
-}
-
-.bg .ul_pub .incomeBox ul li:nth-child(1) {
-  margin-top: 0.66667rem;
+  justify-content: space-around;
 }
 
 .bg .ul_pub .incomeBox ul li div {
@@ -482,7 +495,7 @@ body {
 
 .bg .rule {
   width: 9.74667rem;
-  height: 23.74667rem;
+  height: 18.8rem;
   margin: 0 auto 1.33333rem;
   position: relative;
   background: url(../images/ruleBoxBg.png) no-repeat;
@@ -704,7 +717,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 14.56rem;
+  top: 9.56rem;
   z-index: 2;
 }
 
@@ -725,7 +738,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 15.6rem;
+  top: 10.6rem;
   z-index: 2;
 }
 
@@ -746,7 +759,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 16.4rem;
+  top: 11.4rem;
   z-index: 2;
 }
 
@@ -767,7 +780,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 17.15rem;
+  top: 12.15rem;
   z-index: 2;
 }
 
@@ -788,7 +801,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 19.8rem;
+  top: 14.8rem;
   z-index: 2;
 }
 
@@ -809,7 +822,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 20.8rem;
+  top: 15.8rem;
   z-index: 2;
 }
 
@@ -830,7 +843,7 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 21.7rem;
+  top: 16.7rem;
   z-index: 2;
 }
 
@@ -1042,3 +1055,11 @@ body {
   top: 50%;
   transform: translate(-50%, -50%);
 }
+
+.Turkiye .bg .ul_pub .incomeBox .sTab div {
+  font-size: 0.24rem;
+}
+
+.Turkiye .bg .ul_pub .incomeBox .tableTitle div {
+  font-size: 0.24rem;
+}

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

@@ -38,7 +38,7 @@ body {
 
 .header {
     width: px2rem(750);
-    height: px2rem(752);
+    height: px2rem(751);
     background: url(../images/header.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto 0;
@@ -48,9 +48,9 @@ body {
         position: absolute;
         left: 52%;
         transform: translateX(-50%);
-        top: px2rem(273);
-        height: px2rem(98);
-        width: px2rem(486);
+        top: px2rem(282);
+        height: px2rem(128);
+        width: px2rem(554);
     }
 
     .rule_rule {
@@ -60,7 +60,7 @@ body {
         font-size: px2rem(26);
         font-weight: bold;
         position: absolute;
-        top: 1rem;
+        top: 8.92rem;
         right: 0rem;
         color: #703900;
         box-sizing: border-box;
@@ -124,7 +124,7 @@ body {
         height: px2rem(374);
         background: url(../images/myInfo.png) no-repeat;
         background-size: 100% 100%;
-        margin: px2rem(84) auto px2rem(20);
+        margin: px2rem(50) auto px2rem(0);
         position: relative;
 
         .tx {
@@ -168,6 +168,7 @@ body {
             font-weight: 400;
             background: url(../images/myInfoBut.png) no-repeat;
             background-size: 100% 100%;
+            display: none;
 
             img {
                 display: inline-block;
@@ -179,7 +180,8 @@ body {
 
         .copy {
             position: absolute;
-            right: px2rem(50);
+            left: 50%;
+            transform: translateX(-50%);
             bottom: px2rem(50);
             width: px2rem(294);
             height: px2rem(68);
@@ -204,7 +206,7 @@ body {
         width: px2rem(702);
         height: px2rem(76);
         position: relative;
-        margin: 0 auto px2rem(20);
+        margin: 0.7rem auto px2rem(20);
         background: url(../images/myIncomeBg.png) no-repeat;
         background-size: 100% 100%;
 
@@ -235,6 +237,19 @@ body {
             color: #0C0538;
             font-size: px2rem(36);
         }
+
+        .text {
+            width: 2.4rem;
+            height: 0.65rem;
+            line-height: 0.65rem;
+            position: absolute;
+            left: 2.9rem;
+            top: 0.2rem;
+            text-align: center;
+            color: #312200;
+            font-size: px2rem(28);
+            font-weight: 600;
+        }
     }
 
     .ul_pub {
@@ -375,6 +390,7 @@ body {
                 display: flex;
                 justify-content: space-between;
                 margin: 0 auto px2rem(0);
+                white-space: nowrap;
 
                 div {
                     width: 50%;
@@ -403,13 +419,14 @@ body {
             .tableTitle {
                 width: px2rem(660);
                 display: flex;
-                justify-content: space-between;
+                justify-content: space-around;
                 margin-bottom: 0;
                 position: absolute;
                 top: 6.15rem;
                 left: 50%;
                 transform: translateX(-50%);
                 z-index: 2;
+                white-space: nowrap;
                 // background: #fff;
 
                 div {
@@ -425,8 +442,8 @@ body {
 
             ul {
                 width: px2rem(660);
-                height: 6rem;
-                margin: 0 auto 0;
+                height: 5.5rem;
+                margin: 0.8rem auto 0;
                 overflow-y: scroll;
                 position: relative;
 
@@ -460,10 +477,10 @@ body {
                     height: px2rem(50);
                     margin-bottom: px2rem(18);
                     display: flex;
-                    justify-content: space-between;
+                    justify-content: space-around;
 
                     &:nth-child(1) {
-                        margin-top: px2rem(50);
+                        // margin-top: px2rem(50);
                     }
 
                     div {
@@ -502,7 +519,7 @@ body {
 
     .rule {
         width: px2rem(731);
-        height: px2rem(1781);
+        height: px2rem(1410);
         // border-radius: px2rem(20);
         // border: px2rem(4) solid #FE7835;
         margin: 0 auto px2rem(100);
@@ -727,7 +744,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 14.56rem;
+                top: 9.56rem;
                 z-index: 2;
 
                 div {
@@ -748,7 +765,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 15.6rem;
+                top: 10.6rem;
                 z-index: 2;
 
                 div {
@@ -769,7 +786,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 16.4rem;
+                top: 11.4rem;
                 z-index: 2;
 
                 div {
@@ -790,7 +807,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 17.15rem;
+                top: 12.15rem;
                 z-index: 2;
 
                 div {
@@ -811,7 +828,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 19.8rem;
+                top: 14.8rem;
                 z-index: 2;
 
                 div {
@@ -832,7 +849,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 20.8rem;
+                top: 15.8rem;
                 z-index: 2;
 
                 div {
@@ -853,7 +870,7 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: 21.7rem;
+                top: 16.7rem;
                 z-index: 2;
 
                 div {
@@ -1040,30 +1057,47 @@ body {
         color: #89421A;
     }
 }
-.arabic{
-    .bg .ul_pub .incomeBox .sTab div{
+
+.arabic {
+    .bg .ul_pub .incomeBox .sTab div {
         font-size: px2rem(18);
     }
-    .header .rule_rule{
+
+    .header .rule_rule {
         font-size: px2rem(20);
         text-indent: -10px;
     }
-    .bg .rule .rule2 .table2_2{
+
+    .bg .rule .rule2 .table2_2 {
         width: 9rem;
     }
-    .bg .rule .rule2 .table1_3_div{
+
+    .bg .rule .rule2 .table1_3_div {
         font-size: px2rem(10);
     }
 }
-.toatstsEnd{
+
+.toatstsEnd {
     padding: px2rem(20) px2rem(30);
     text-align: center;
     color: #fff;
     font-size: px2rem(24);
     position: fixed;
     z-index: 99999;
-    background: rgba(0,0,0,.8);
+    background: rgba(0, 0, 0, .8);
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
+}
+
+.Turkiye {
+    .bg .ul_pub .incomeBox .sTab div {
+        font-size: px2rem(18);
+    }
+
+    .bg .ul_pub .incomeBox .tableTitle {
+        div {
+            font-size: px2rem(18);
+        }
+    }
 }

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

@@ -18,19 +18,19 @@
     </div>
     <!-- 頭部 -->
     <div class="header">
-        <img id="img1" src="./images/header_h3.png" alt="" class="h3">
+        <img id="img1" src="./images/header_h3-tr.png" alt="" class="h3">
         <div class="rule_rule text67"></div>
-        <div id="text1" class="text"></div>
+        <!-- <div id="text1" class="text"></div> -->
         <!-- <img src="./images/gold.png" alt=""> -->
     </div>
     <!-- 容器 -->
     <div class="bg">
         <!-- 自己信息 -->
-        <div class="myInfo">
+        <div class="myInfo" >
             <img src="./images/logo.png" alt="" class="tx">
             <p id="text2"></p>
             <b class="invitationCode"></b>
-            <div class="skip img5" >
+            <div class="skip img5">
                 <!-- <img src="./images/skip.png" alt=""> <b id="text3"></b> -->
             </div>
             <div class="copy img6" id="copy">
@@ -42,6 +42,7 @@
             <img src="./images/gold.png" alt="">
             <p id="text5"></p>
             <b>0</b>
+            <div class="text myIncomeText"></div>
         </div>
         <!-- 收益tab -->
 
@@ -179,14 +180,14 @@
                     </div> -->
                 </div>
             </div>
-            <div class="wishingStar" id="text28"></b></a>
+            <div class="wishingStar" style="display: none;" id="text28"></b></a>
             </div>
         </div>
     </div>
     <!-- 展開分享 -->
     <div class="openShare" id="text31"></div>
     <!-- 保存二維碼 -->
-    <div class="code">
+    <div class="code" style="display: none;">
         <div class="rule_icon"></div>
         <div class="p1" id="text32"></div>
         <div class="p2" id="text33"></div>
@@ -227,5 +228,6 @@
 <script src="./local/en.js?v=1.1"></script>
 <script src="./local/zh.js?v=1.1"></script>
 <script src="./local/ar.js?v=1.2"></script>
+<script src="./local/tr.js?v=1.2"></script>
 <script src="./js/index.js?v=1.4"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -113,8 +113,9 @@ function translateFun() {
     $('#text32').html(langReplace(localLang.demoModule.text32));
     $('#text33').html(langReplace(localLang.demoModule.text33));
     $('#text34').html(langReplace(localLang.demoModule.text34));
-    $('#text66').html(langReplace(localLang.demoModule.text66));
+    // $('#text66').html(langReplace(localLang.demoModule.text66));
     $('.text67').text(langReplace(localLang.demoModule.text67));
+    $('.bg .myIncome .text').text(langReplace(localLang.demoModule.myIncomeText));
     $('#img1').attr('src', langReplace(localLang.demoModule.img1))
     $('#img2').attr('src', langReplace(localLang.demoModule.img2))
     $('#img3').attr('src', langReplace(localLang.demoModule.img3))
@@ -168,6 +169,30 @@ function getConfig() {
         }
     })
 }
+// 领取接口
+function inviteReceive() {
+    showLoading()
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/user/invite/receive',
+        success(res) {
+            if (res.code === 200) {
+                getMySelf();
+                toastMsg(langReplace(localLang.demoModule.claimed));
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.share.text8))
+        }
+    })
+}
+$('.bg .myIncome .text').click(function(){
+    inviteReceive();
+})
 // 獲取收益接口
 function getMySelf() {
     showLoading()
@@ -327,8 +352,8 @@ function profitPage() {
                             str += `
                             <li>
                                 <div class="act">
-                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
-                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                    <p>${res.inviteTimeYMD}</p>
+                                    <b>${res.inviteTimeHMS}</b>
                                 </div>
                                 <div>+${res.rewardNum} <img src="./images/${res.rewardType == 1 ? 'diamond' : 'magicStick'}.png" alt=""></div>
                                 <div>${res.type == 1 && res.rewardType == 1 ? langReplace(localLang.demoModule.text52) : res.type == 3 && res.rewardType == 1 ? langReplace(localLang.demoModule.text53) : res.type == 3 && res.rewardType == 2 ? langReplace(localLang.demoModule.text54) : langReplace(localLang.demoModule.text55)}</div>
@@ -344,14 +369,14 @@ function profitPage() {
                             str += `
                             <li>
                                 <div class="act">
-                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
-                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                    <p>${res.inviteTimeYMD}</p>
+                                    <b>${res.inviteTimeHMS}</b>
                                 </div>
                                 <div>+${res.rewardNum} <img src="./images/${res.rewardType == 1 ? 'diamond' : 'magicStick'}.png" alt=""></div>
                                 <div>${res.type == 1 && res.rewardType == 1 ? langReplace(localLang.demoModule.text52) : res.type == 3 && res.rewardType == 1 ? langReplace(localLang.demoModule.text53) : res.type == 3 && res.rewardType == 2 ? langReplace(localLang.demoModule.text54) : langReplace(localLang.demoModule.text55)}</div>
                                 <div class="act">
-                                    <p>${res.inviteNick}</p>
-                                    <b>ID:${res.inviteErBanNo}</b>
+                                    <p>${res.inviteNick[0]+'*****'}</p>
+                                    <b>ID:******</b>
                                 </div>
                             </li>
                             `
@@ -385,10 +410,10 @@ function userPage() {
                 var str = '';
                 if (text == langReplace(localLang.demoModule.text39) && typeStr == "1") {
                     $('.bg .incomeBox .tableTitle div').remove();
-                    $('.bg .incomeBox .tableTitle').append(`<div>${langReplace(localLang.demoModule.text56)}</div><div>${langReplace(localLang.demoModule.text57)}</div><div>${langReplace(localLang.demoModule.text58)}</div>`);
+                    $('.bg .incomeBox .tableTitle').append(`<div>${langReplace(localLang.demoModule.text56)}</div><div>${langReplace(localLang.demoModule.text57)}</div>`);
                 } else if (text == langReplace(localLang.demoModule.text40) && typeStr == "2") {
                     $('.bg .incomeBox .tableTitle div').remove();
-                    $('.bg .incomeBox .tableTitle').append(`<div>${langReplace(localLang.demoModule.text59)}</div><div>${langReplace(localLang.demoModule.text60)}</div><div style="font-size: 0.24rem;">${langReplace(localLang.demoModule.text61)}</div><div>${langReplace(localLang.demoModule.text62)}</div>`);
+                    $('.bg .incomeBox .tableTitle').append(`<div>${langReplace(localLang.demoModule.text59)}</div><div>${langReplace(localLang.demoModule.text60)}</div><div style="font-size: 0.24rem;">${langReplace(localLang.demoModule.text61)}</div>`);
                 }
                 if (res.data.records.length == 0) {
                     if (page == 1) {
@@ -407,14 +432,15 @@ function userPage() {
                             str += `
                             <li>
                                 <div class="act">
-                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
-                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                    <p>${res.inviteTimeYMD}</p>
+                                    <b>${res.inviteTimeHMS}</b>
                                 </div>
                                 <div class="act">
                                     <p>${res.inviteNick}</p>
                                     <b>ID:${res.inviteErBanNo}</b>
                                 </div>
-                                <div>${res.charge30Amount ? res.charge30Amount : 0} <img src="./images/gold.png" alt=""></div>
+                                <!-- <div>${res.charge30Amount ? res.charge30Amount : 0} <img src="./images/gold.png" alt=""></div> -->
+                                
                             </li>
                             `
                         });
@@ -423,18 +449,18 @@ function userPage() {
                             str += `
                             <li>
                                 <div class="act">
-                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
-                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                    <p>${res.inviteTimeYMD}</p>
+                                    <b>${res.inviteTimeHMS}</b>
                                 </div>
                                 <div class="act">
                                     <p>${res.inviteNick}</p>
                                     <b>ID:${res.inviteErBanNo}</b>
                                 </div>
                                 <div class="act">
-                                    <p>${res.indirectNick}</p>
-                                    <b>ID:${res.indirectErBanNo}</b>
+                                    <p>${typeStr == "2" ? res.indirectNick[0] + '*****' : res.indirectNick}</p>
+                                    <b>ID:******</b>
                                 </div>
-                                <div>${res.charge30Amount ? res.charge30Amount : 0} <img src="./images/gold.png" alt=""></div>
+                                <!-- <div>${res.charge30Amount ? res.charge30Amount : 0} <img src="./images/gold.png" alt=""></div> -->
                             </li>
                             `
                         });

view/molistar/activity/2024-invitationFission/local/ar.js

@@ -2,7 +2,7 @@
 langAr = {
     // 模块
     demoModule: {
-        endTimes:'انتهاء الفعالية',
+        endTimes: 'انتهاء الفعالية',
         img1: `./images/header_h3-ar.png`,
         img2: `./images/rule_rule-ar.png`,
         img3: `./images/rule1_in-ar.png`,
@@ -83,39 +83,42 @@ langAr = {
         text61: `المستخدم غير مباشر`,
         text62: `شحن في 30 يومًا`,
         text66: `<div class="table1_1">
-                    <div style="line-height: 0.4rem;">مبلغ الشحن<br>(خلال 30 يومًا، الوحدة: العملات)</div>
-                    <div>الأرباح</div>
-                </div>
-                <div class="table1_2">
-                    <div>الشحن &lt;10000</div>
-                    <div style="line-height: 0.4rem;">سيحصل المدعو المباشر علي ٢ عصا سحرية,وستحصل أنت علي ١ عصا سحرية</div>
-                </div>
-                <div class="table1_3">
-                    <div>10000 ≤ الشحن &lt;50000</div>
-                    <div class="table1_3_div" style="line-height: 0.4rem;">في كل مرة سيشحن المدعو المباشر 1000 عملة ذهبية ستحصل انت علي مكافأة 30 عملة أي(3٪)</div>
-                </div>
-                <div class="table1_4">
-                    <div>الشحن ≥50000 </div>
-                    <div style="line-height: 0.4rem;">عن كل 1000 شحن من قبل المستخدم المدعو مباشرة، أنت +50 (5.00%)</div>
-                </div>
-                <div class="table2_1">
-                    <div style="line-height: 0.4rem;">مبلغ الشحن<br>(خلال 30 يومًا، الوحدة: العملات)</div>
-                    <div>الأرباح</div>
-                </div>
-                <div class="table2_2">
-                    <div>10000 ≤ الشحن &lt;50000</div>
-                    <div style="line-height: 0.4rem;" class="table1_3_div">في كل مرة سيشحن المدعو الغير المباشر 1000 عملة ذهبية ستحصل انت علي مكافأة ١٠ عملات ذهبية أي(١٪)</div>
-                </div>
-                <div class="table2_3">
-                    <div>الشحن ≥50000</div>
-                    <div style="line-height: 0.34rem;"  class="table1_3_div">في كل مرة سيشحن المدعو الغير المباشر 1000 عملة ذهبية ستحصل انت علي مكافأة ٢٠ عملة ذهبية أي(٢٪)</div>
-                </div>`,
+        <div style="line-height: 0.4rem;font-size: 0.2rem;">مقدار الإيداع الفردي<br> (الوقت: خلال 30 يومًا، الوحدة: العملات الذهبية)</div>
+        <div>الأرباح المكتسبة</div>
+    </div>
+    <div class="table1_2">
+        <div>إيداع < 70000 عملة ذهبية</div>
+        <div style="line-height: 0.4rem;font-size: 0.2rem;">عند قيام الشخص المدعو مباشرةً بالإيداع، ستحصل على مكافأة بنسبة 1% من مبلغ الإيداع;</div>
+    </div>
+    <div class="table1_3">
+        <div style="line-height: 0.4rem;">70000 عملة ذهبية ≤ إيداع < 700000 عملة ذهبية</div>
+        <div style="line-height: 0.4rem;font-size: 0.15rem;">عند قيام الشخص المدعو مباشرةً بالإيداع أكثر من 70000 عملة ذهبية، ستحصل على مكافأة بنسبة 2% من مبلغ الإيداع;</div>
+    </div>
+    <div class="table1_4">
+        <div>إيداع ≥ 700000 عملة ذهبية</div>
+        <div style="line-height: 0.4rem;font-size: 0.15rem;">عند قيام الشخص المدعو مباشرةً بالإيداع أكثر من 700000 عملة ذهبية، ستحصل على مكافأة بنسبة 4% من مبلغ الإيداع;</div>
+    </div>
+    <div class="table2_1">
+        <div style="line-height: 0.4rem;font-size: 0.2rem;">مقدار الإيداع الفردي<br> (الوقت: خلال 30 يومًا، الوحدة: العملات الذهبية)</div>
+        <div>الأرباح المكتسبة</div>
+    </div>
+    <div class="table2_2">
+        <div style="line-height: 0.4rem;">70000 عملة ذهبية ≤ إيداع < 700000 عملة ذهبية</div>
+        <div style="line-height: 0.4rem;font-size: 0.15rem;">عند قيام الشخص المدعو غير مباشر بالإيداع أكثر من 70000 عملة ذهبية، ستحصل على مكافأة بنسبة 0.5% من مبلغ الإيداع;</div>
+    </div>
+    <div class="table2_3">
+        <div>إيداع ≥ 700000 عملة ذهبية</div>
+        <div style="line-height: 0.34rem;font-size: 0.15rem;">عند قيام الشخص المدعو غير مباشر بالإيداع أكثر من 700000 عملة ذهبية، ستحصل على مكافأة بنسبة 1% من مبلغ الإيداع;</div>
+    </div>
+    `,
 
         text67: `تفاصيل الأرباح`,
         img5: `background: url(./images/myInfoBut-ar.png) no-repeat;background-size: 100% 100%;`,
         img6: `background: url(./images/myInfoBut2-ar.png) no-repeat;background-size: 100% 100%;`,
         img7: `background: url(./images/ruleBoxBg-ar.png) no-repeat;background-size: 100% 100%;`,
         img8: `./images/rule_inNew-ar.png`,
+        myIncomeText: `الحصول`,
+        claimed:'تم الاستلام بنجاح',
     },
     share: {
         img1: `background: url(./images/share/header-ar.png) no-repeat;background-size: 100% 100%;`,

view/molistar/activity/2024-invitationFission/local/en.js

@@ -83,38 +83,41 @@ langEn = {
         text61: `Indirect Invitee`,
         text62: `30-Day Top-Up`,
         text66: `<div class="table1_1">
-                    <div style="line-height: 0.4rem;">Top-Up Amount<br>(Within 30 Days, Unit: Coins)</div>
-                    <div>Earnings</div>
-                </div>
-                <div class="table1_2">
-                    <div>Top-Up &lt;10000</div>
-                    <div style="line-height: 0.4rem;">Directly Invited User +2 Magic Wands, You +1 Magic Wand</div>
-                </div>
-                <div class="table1_3">
-                    <div>10000≤ Top-Up &lt;50000</div>
-                    <div style="line-height: 0.4rem;">For every 1000 top-up by Directly Invited User, You +30 (3.00%)</div>
-                </div>
-                <div class="table1_4">
-                    <div>Top-Up ≥50000 </div>
-                    <div style="line-height: 0.4rem;">For every 1000 top-up by Directly Invited User, You +50 (5.00%)</div>
-                </div>
-                <div class="table2_1">
-                    <div style="line-height: 0.4rem;">Top-Up Amount<br>(Within 30 Days, Unit: Coins)</div>
-                    <div>Earnings</div>
-                </div>
-                <div class="table2_2">
-                    <div>10000≤ Top-Up &lt;50000</div>
-                    <div style="line-height: 0.4rem;">For every 1000 top-up by Indirectly Invited User, You +10 (1.00%)</div>
-                </div>
-                <div class="table2_3">
-                    <div>Top-Up ≥50000</div>
-                    <div style="line-height: 0.34rem;">For every 1000 top-up by Indirectly Invited User, You +20 (2.00%)</div>
-                </div>`,
+        <div style="line-height: 0.4rem;">Single Deposit Amount<br> (Time: Within 30 days, Unit: Gold Coins)</div>
+        <div>Earnings</div>
+    </div>
+    <div class="table1_2">
+        <div>Deposit < 70000 Gold Coins</div>
+        <div style="line-height: 0.4rem;font-size: 0.15rem;">For each deposit made by the directly invited person, you earn 1% of the deposited amount as reward;</div>
+    </div>
+    <div class="table1_3">
+        <div>70000 Gold Coins ≤ Deposit < 700000 Gold Coins</div>
+        <div style="line-height: 0.4rem;font-size: 0.15rem;">For each deposit made by the directly invited person exceeding 70000 Gold Coins, you earn 2% of the deposited amount as reward;</div>
+    </div>
+    <div class="table1_4">
+        <div>Deposit ≥ 700000 Gold Coins</div>
+        <div style="line-height: 0.4rem;font-size: 0.2rem;">For each deposit made by the directly invited person exceeding 700000 Gold Coins, you earn 4% of the deposited amount as reward;</div>
+    </div>
+    <div class="table2_1">
+        <div style="line-height: 0.4rem;">Single Deposit Amount<br> (Time: Within 30 days, Unit: Gold Coins)</div>
+        <div>Earnings</div>
+    </div>
+    <div class="table2_2">
+        <div>70000 Gold Coins ≤ Deposit < 700000 Gold Coins</div>
+        <div style="line-height: 0.4rem;">For each deposit made by the indirectly invited person exceeding 70000 Gold Coins, you earn 0.5% of the deposited amount as reward;</div>
+    </div>
+    <div class="table2_3">
+        <div>Deposit ≥ 700000 Gold Coins</div>
+        <div style="line-height: 0.34rem;">For each deposit made by the indirectly invited person exceeding 700000 Gold Coins, you earn 1% of the deposited amount as reward;</div>
+    </div>
+    `,
         text67: `Profit `,
         img5: `background: url(./images/myInfoBut-en.png) no-repeat;background-size: 100% 100%;`,
         img6: `background: url(./images/myInfoBut2-en.png) no-repeat;background-size: 100% 100%;`,
         img7: `background: url(./images/ruleBoxBg-en.png) no-repeat;background-size: 100% 100%;`,
         img8: `./images/rule_inNew-en.png`,
+        myIncomeText: `Obtain`,
+        claimed:'Successfully claimed',
     },
     share: {
         img1: `background: url(./images/share/header-en.png) no-repeat;background-size: 100% 100%;`,

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

@@ -0,0 +1,142 @@
+// 英文
+langTr = {
+    // 模块
+    demoModule: {
+        endTimes: 'Etkinlik sona erdi',
+        img1: `./images/header_h3-tr.png`,
+        img2: `./images/rule_rule-tr.png`,
+        img3: `./images/rule1_in-tr.png`,
+        img4: `./images/rule_2in-tr.png`,
+        title: `Davet Ederek Coin Kazan`,
+        text1: `Her davet için <b>500</b> <img src="./images/gold.png" alt=""> kazan`,
+        text2: `Benim Kodum`,
+        text3: `Arkadaşlarla Paylaş`,
+        text4: `Davet Kodunu Kopyala`,
+        text5: `Kazançlar`,
+        texts5: `Kazançlar`,
+        text6: `Doğrudan Davet Kazançları`,
+        text7: `Dolaylı Davet Kazançları`,
+        text8: `Doğrudan Davet Kazançları Kaydı`,
+        text9: `Doğrudan Davet Kullanıcı Kaydı`,
+        text10: `Zaman`,
+        text11: `Kazanç`,
+        text12: `Kazanç Türü`,
+        text13: `Davet Edilen Kullanıcı`,
+        text14: `Etkinlik Kuralları`,
+        text15: `Bir arkadaşı kaydettirerek başarıyla davet ederseniz, her iki taraf da 500 coin kazanır, sınırsız!`,
+        text16: `Davet Eden: Siz`,
+        text17: `Doğrudan Davet Edilen`,
+        text18: `Arkadaşlarınızı top-up yapmaya davet edin ve 30 gün boyunca %7'ye kadar geri ödeme kazanın!`,
+        text19: `Davet Eden: Siz`,
+        text20: `Doğrudan Davet Edilen`,
+        text21: `Dolaylı Davet Edilen`,
+        text22: `Doğrudan Davet Edilen: Davet kodunuzu kullanarak kaydolanlar`,
+        text23: `Dolaylı Davet Edilen: Kayıtlı arkadaşlarınız tarafından davet edilenler`,
+        text24: `Yatırım Tutarı`,
+        text25: `Kazançlar`,
+        text26: `Yatırım Tutarı`,
+        text27: `Kazançlar`,
+        text28: `*Büyülü asa, <a href="../../modules/act-wishingStar/index.html?lang=tr"><b>Dilek Yıldızı etkinliği>>`,
+        text29: `Diğer Talimatlar`,
+        text30: `<li class="title">Davet Ödüllerinin Dağıtımı Hakkında</li>
+            <li>1. Davet Edilen Kullanıcının Kazançları: Sistem, yeni kullanıcı davet kodunu doldurduktan sonra ödülleri ilgili hesaba otomatik olarak dağıtır.</li>
+            <li>2. Davet Edenin Kazançları: Sistem, yeni kullanıcı davet kodunu doldurduktan sonra ödülleri ilgili hesaba otomatik olarak dağıtır.</li>
+            <li>3. Yatırım Ödülü: Sadece doğrudan yapılan yatırımlar sayılır; Yeni kullanıcı davet kodunu doldurduktan sonra ilk 30 günlük yatırımlarını tamamladığında, bir büyülü asa ödülü kazanabilir, bu ödül, Dilek Yıldızı oyununda nadir hediyeler almak için kullanılabilir; Davet edenler belirli bir yatırım miktarını tamamlayarak ek kazançlar elde edebilir ve kazançlar gerçek zamanlı olarak yatırılır.</li>
+            <li class="title">Geçersiz Davetler Hakkında</li>
+            <li>1. Aynı cihaz, aynı telefon numarası ve aynı kimlik bilgileriyle kaydolan kullanıcılar aynı kullanıcı olarak kabul edilir ve ödüller tekrar verilemez; Eğer davet eden ve davet edilen aynı cihazı, kimlik bilgilerini ve telefon numarasını kullanıyorsa, davet eden ödül alamaz.</li>
+            <li>2. Her yeni kullanıcı yalnızca bir kez davet kodu doldurabilir ve doldurduktan sonra değiştirilemez, dikkat! Davet kodu daha sonra doldurulamaz, lütfen yeni kullanıcıyı kaydolurken davet kodunu zamanında doldurması için bilgilendirin, aksi takdirde bu davet geçersizdir.</li>
+            <li>3. Herhangi bir dolandırıcılık davranışı durumunda, resmi yetkililer dolandırıcıların elde ettiği tüm ödülleri iptal etme ve hesabı yasaklama hakkına sahiptir.</li>
+            <li>4. Sanal telefon numaraları ve yasaklı kullanıcılar etkinliğe katılamazlar.</li>
+            <li class="title">Diğerleri</li>
+            <li>1. Herhangi bir sorunuz varsa, lütfen WhatsApp ile iletişime geçin: 8618984433556</li>
+            <li>2. Bu etkinliğin nihai yorumlama hakkı resmiye aittir ve Apple Inc./Google Inc. ile ilgisi yoktur.</li>`,
+        text31: `QR Kodunu Paylaş >`,
+        text32: `Arkadaşlar QR Kodunu Tarayarak İndirip Kaydolabilir`,
+        text33: `Get <b>500</b><img src="./images/gold.png" alt="" class="diamond">`,
+        text34: `Yerel Olarak Kaydet`,
+        text35: `Doğrudan`,
+        text36: `Molistar'ı indirip Kaydınızı Yaparak 500 coin Kazanın!`,
+        text37: `Molistar, Kalp Atışıyla Tanışın`,
+        text38: `Molistar'da Sohbet Edin, Oyunlar Oynayın, Arkadaş Edinin, Her Zaman ve Her Yerde`,
+        text39: `Doğrudan`,
+        text40: `Dolaylı`,
+        text41: `Davet Kazançları Kaydı`,
+        text42: `Davet Edilen Kullanıcı Kaydı`,
+        text43: `Yok`,
+        text44: `Zaman`,
+        text45: `Kazanç`,
+        text46: `Kazanç Türü`,
+        text47: `Doğrudan Davet Edilen`,
+        text48: `Zaman`,
+        text49: `Kazanç`,
+        text50: `Kazanç Türü`,
+        text51: `Dolaylı Davet Edilen`,
+        text52: `Arkadaşları Kaydetmeye Davet Et`,
+        text53: `Arkadaşların Yatırım Geri Ödemesi`,
+        text54: `Arkadaşın İlk Yatırımı`,
+        text55: `Dolaylı Davet Yatırım Geri Ödemesi`,
+        text56: `Zaman`,
+        text57: `Doğrudan Davet Edilen`,
+        text58: `30 Günlük Yatırım`,
+        text59: `Zaman`,
+        text60: `Doğrudan Davet Edilen`,
+        text61: `Dolaylı Davet Edilen`,
+        text62: `30 Günlük Yatırım`,
+        text66: `<div class="table1_1">
+        <div style="line-height: 0.4rem;">Tek Yatırım Miktarı<br> (Zaman: Son 30 gün, Birim: Altın Paralar)</div>
+        <div>Kazanılan Gelir</div>
+    </div>
+    <div class="table1_2">
+        <div>Yatırım < 70000 Altın Para</div>
+        <div style="line-height: 0.4rem;">Doğrudan davet edilen kişi yatırım yaparsa, yatırılan miktarın %1'ini kazanırsınız;</div>
+    </div>
+    <div class="table1_3">
+        <div>70000 Altın Para ≤ Yatırım < 700000 Altın Para</div>
+        <div style="line-height: 0.4rem;">Doğrudan davet edilen kişi 70000 Altın Paradan fazla yatırım yaparsa, yatırılan miktarın %2'sini kazanırsınız;</div>
+    </div>
+    <div class="table1_4">
+        <div>Yatırım ≥ 700000 Altın Para</div>
+        <div style="line-height: 0.4rem;">Doğrudan davet edilen kişi 700000 Altın Paradan fazla yatırım yaparsa, yatırılan miktarın %4'ünü kazanırsınız;</div>
+    </div>
+    <div class="table2_1">
+        <div style="line-height: 0.4rem;">Tek Yatırım Miktarı<br> (Zaman: Son 30 gün, Birim: Altın Paralar)</div>
+        <div>Kazanılan Gelir</div>
+    </div>
+    <div class="table2_2">
+        <div>70000 Altın Para ≤ Yatırım < 700000 Altın Para</div>
+        <div style="line-height: 0.4rem;">Dolaylı davet edilen kişi 70000 Altın Paradan fazla yatırım yaparsa, yatırılan miktarın %0.5'ini kazanırsınız;</div>
+    </div>
+    <div class="table2_3">
+        <div>Yatırım ≥ 700000 Altın Para</div>
+        <div style="line-height: 0.34rem;">Dolaylı davet edilen kişi 700000 Altın Paradan fazla yatırım yaparsa, yatırılan miktarın %1'ini kazanırsınız;</div>
+    </div>
+    `,
+        text67: `Kar`,
+        img5: `background: url(./images/myInfoBut-tr.png) no-repeat;background-size: 100% 100%;`,
+        img6: `background: url(./images/myInfoBut2-tr.png) no-repeat;background-size: 100% 100%;`,
+        img7: `background: url(./images/ruleBoxBg-tr.png) no-repeat;background-size: 100% 100%;`,
+        img8: `./images/rule_inNew-tr.png`,
+        myIncomeText: `Kazan`,
+        claimed:'Başarıyla alındı',
+    },
+    share: {
+        img1: `background: url(./images/share/header-tr.png) no-repeat;background-size: 100% 100%;`,
+        img2: `background: url(./images/share/codeBg-tr.png) no-repeat;background-size: 100% 100%;`,
+        title: `Molistar'a katıl, eğlence seni bekliyor!`,
+        text1: `Molistar'da beklenmedik bağlantılar keşfet.`,
+        text2: `Sohbet et, oyun oyna ve Molistar'da her zaman, her yerde arkadaş edin.`,
+        xz_id: `Molistar'ı şimdi indir!`,
+        text4: `Molistar'a davet kodumla kaydol ve hemen 500 altın coin kazan!`,
+        text5: `Yükleniyor...`,
+        text6: `İşlem tamamlandı`,
+        text7: `Başarıyla kopyalandı`,
+        text8: `Ağ hatası, lütfen daha sonra tekrar deneyin`,
+        inviteCodes: `text-align: right;`,
+        imgs1: `./images/share/1-tr.png`,
+        imgs2: `./images/share/2-tr.png`,
+        imgs3: `./images/share/3-tr.png`,
+        imgs4: `./images/share/4-tr.png`,
+        imgs5: `./images/share/5-tr.png`,
+    }
+
+}

view/molistar/activity/2024-invitationFission/local/zh.js

@@ -2,7 +2,7 @@
 langZh = {
     // 模塊
     demoModule: {
-        endTimes:'活動已結束',
+        endTimes: '活動已結束',
         img1: `./images/header_h3.png`,
         img2: `./images/rule_rule.png`,
         img3: `./images/rule1_in.png`,
@@ -86,38 +86,41 @@ langZh = {
         text64: `金幣`,
         text65: `直接邀請對象+2魔法棒，妳+1魔法棒`,
         text66: `<div class="table1_1">
-                    <div style="line-height: 0.4rem;">儲值數額<br>（時間：30天內，單位：金幣）</div>
+                    <div style="line-height: 0.4rem;">單筆充值金額<br>（時間：30天內 單位：金幣）</div>
                     <div>獲得收益</div>
                 </div>
                 <div class="table1_2">
-                    <div>儲值&lt;10000</div>
-                    <div style="line-height: 0.4rem;">直接邀請對象 +2 魔法棒，妳 +1 魔法棒</div>
+                    <div>充值<70000金幣</div>
+                    <div style="line-height: 0.4rem;">直接邀請對象充值，你獲得充值金額1%金幣獎勳；</div>
                 </div>
                 <div class="table1_3">
-                    <div>10000≤儲值&lt50000</div>
-                    <div style="line-height: 0.4rem;">直接邀請對象每儲值1000，妳+30（3.00%）</div>
+                    <div>70000金幣=<充值<700000金幣</div>
+                    <div style="line-height: 0.4rem;">直接邀請對象充值>70000金幣，你將獲得充值金額2%金幣獎勳；</div>
                 </div>
                 <div class="table1_4">
-                    <div>儲值≥50000 </div>
-                    <div style="line-height: 0.4rem;">直接邀請對象每儲值1000，妳+50（5.00%）</div>
+                    <div>充值>=700000金幣</div>
+                    <div style="line-height: 0.4rem;">直接邀請對象充值>700000金幣，你獲得充值金額4%金幣獎勳；</div>
                 </div>
                 <div class="table2_1">
-                    <div style="line-height: 0.4rem;">儲值數額<br>（時間：30天內，單位：金幣）</div>
+                    <div style="line-height: 0.4rem;">單筆充值金額<br>（時間：30天內 單位：金幣）</div>
                     <div>獲得收益</div>
                 </div>
                 <div class="table2_2">
-                    <div>10000≤儲值&lt;50000</div>
-                    <div style="line-height: 0.4rem;">間接邀請對象每儲值1000，妳+10（1.00%）</div>
+                    <div>70000金幣=<充值<700000金幣</div>
+                    <div style="line-height: 0.4rem;">間接邀請對象充值>70000金幣，你將獲得充值金額0.5%金幣獎勳；</div>
                 </div>
                 <div class="table2_3">
-                    <div>儲值≥50000</div>
-                    <div style="line-height: 0.34rem;">間接邀請對象每儲值1000，妳+20（2.00%）</div>
-                </div>`,
+                    <div>充值>=700000金幣</div>
+                    <div style="line-height: 0.34rem;">間接邀請對象充值>700000金幣，你獲得充值金額1%金幣獎勳；</div>
+                </div>
+    `,
         text67: `收益明細`,
         img5: `background: url(./images/myInfoBut.png) no-repeat;background-size: 100% 100%;`,
         img6: `background: url(./images/myInfoBut2.png) no-repeat;background-size: 100% 100%;`,
         img7: `background: url./images/ruleBoxBg.png) no-repeat;background-size: 100% 100%;`,
         img7: `./images/rule_inNew.png`,
+        myIncomeText: `獲取`,
+        claimed:'領取成功',
     },
     share: {
         img1: `background: url(./images/share/header.png) no-repeat;background-size: 100% 100%;`,

view/molistar/activity/customizedGift/index.html

@@ -0,0 +1,257 @@
+<!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="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- header -->
+    <div class="header"></div>
+    <!-- 标题盒子 -->
+    <div class="activityIntroduction">
+        <div class="title text2"></div>
+        <div class="box text3">
+            
+        </div>
+    </div>
+    <!-- 上周前三榜单 -->
+    <div class="lastWeek">
+        <div class="top">
+            <div class="title text4"></div>
+            <div class="top1">
+                <img src="./images/null.png" alt="" class="tx">
+                <div class="name"><b class="text5"></b><strong></strong></div>
+                <div class="giftedTime"><b class="text6"></b><strong></strong></div>
+            </div>
+            <div class="top2">
+                <img src="./images/null.png" alt="" class="tx">
+                <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
+            </div>
+            <div class="top3">
+                <img src="./images/null.png" alt="" class="tx">
+                <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
+            </div>
+        </div>
+        <div class="content">
+        </div>
+        <div class="bottom"></div>
+    </div>
+    <!-- tab切换 -->
+    <div class="tabBox">
+        <div class="text7"></div>
+        <div class="act text8"></div>
+    </div>
+    <!-- 本周榜单 -->
+    <div class="page1">
+        <div class="thisWeek">
+            <div class="top">
+                <!-- 规则 -->
+                <div class="rule text9"></div>
+                <!-- 奖励 -->
+                <div class="reward">
+                    <span class="text10"></span>
+                </div>
+                <!-- 倒计时 -->
+                <div class="countdownText text11"></div>
+                <div class="countdown">
+                    <div class="day">
+                        <span>0</span>
+                        <b class="text12"></b>
+                    </div>
+                    <div class="hours">
+                        <span>0</span>
+                        <b class="text13"></b>
+                    </div>
+                    <div class="mins">
+                        <span>0</span>
+                        <b class="text14"></b>
+                    </div>
+                    <div class="secs">
+                        <span>0</span>
+                        <b class="text15"></b>
+                    </div>
+                </div>
+                <div class="top1">
+                    <img src="./images/null.png" alt="" class="tx">
+                    <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                    <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
+                </div>
+                <div class="top2">
+                    <img src="./images/null.png" alt="" class="tx">
+                    <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                    <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
+                </div>
+                <div class="top3">
+                    <img src="./images/null.png" alt="" class="tx">
+                    <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                    <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
+                </div>
+            </div>
+            <div class="content">
+                <ul>
+                    <li>
+                        <div class="num">0</div>
+                        <img src="./images/null.png" alt="" class="tx">
+                        <div class="giftInfo">
+                            <p>Gift name:GAÚCHA</p>
+                            <b>Gifted time:500</b>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="bottom"></div>
+        </div>
+    </div>
+    <!-- 自己榜单 -->
+    <div class="page2">
+        <div class="myList">
+            <div class="top">
+                <!-- 规则 -->
+                <div class="rule text9">Rule</div>
+                <!-- 奖励 -->
+                <div class="reward">
+                    <span class="text10">Reward</span>
+                </div>
+                <!-- 倒计时 -->
+                <div class="countdownText text16"></div>
+                <div class="countdown">
+                    <div class="day">
+                        <span>0</span>
+                        <b class="text12">Day</b>
+                    </div>
+                    <div class="hours">
+                        <span>0</span>
+                        <b class="text13">Hours</b>
+                    </div>
+                    <div class="mins">
+                        <span>0</span>
+                        <b class="text14">Mins</b>
+                    </div>
+                    <div class="secs">
+                        <span>0</span>
+                        <b class="text15">Secs</b>
+                    </div>
+                </div>
+                <div class="my">
+                    <img src="./images/null.png" alt="" class="tx">
+                    <div>
+                        <p>Momo</p>
+                        <b>Gifted time:0</b>
+                        <span>Coins of Gifted:0</span>
+                    </div>
+                </div>
+            </div>
+            <div class="content">
+                <ul>
+                    <li>
+                        <div class="num">0</div>
+                        <img src="./images/ts1.png" alt="" class="ts">
+                        <img src="./images/null.png" alt="" class="tx">
+                        <span>名称</span>
+                        <div class="giftInfo">
+                            <p>Gifted time:500</p>
+                            <b>Coins of Gifted:900</b>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="bottom"></div>
+        </div>
+    </div>
+    <!-- 规则 -->
+    <div class="ruleBox">
+        <div class="rule_in">
+            <div class="title text9">Rule</div>
+            <img src="./images/close.png" alt="" class="close">
+            <div class="box text17">
+                
+            </div>
+        </div>
+    </div>
+    <!-- 规则 -->
+    <div class="ruleBox2">
+        <div class="rule_in">
+            <div class="title text9">Rule</div>
+            <img src="./images/close.png" alt="" class="close">
+            <div class="box text18">
+                
+            </div>
+        </div>
+    </div>
+    <!-- 奖励 -->
+    <div class="rewardBox">
+        <div class="rule_in">
+            <div class="title text10">Reward</div>
+            <img src="./images/close.png" alt="" class="close">
+            <div class="box">
+                <p class="text19"></p>
+                <img src="./images/reward1.png" alt="" class="img1">
+                <p class="text20"></p>
+                <img src="./images/reward2.png" alt="" class="img2">
+                <p class="text21" style="margin-bottom: .3rem;"></p>
+                <p class="text22"></p>
+                <img src="./images/reward3.png" alt="" class="img3">
+            </div>
+        </div>
+    </div>
+    <!-- 奖励2 -->
+    <div class="rewardBox2">
+        <div class="rule_in">
+            <div class="title text10">Reward</div>
+            <img src="./images/close.png" alt="" class="close">
+            <div class="stabBox">
+                <div>700</div>
+                <div>2100</div>
+                <div>3500</div>
+                <div>4900</div>
+                <div>5600</div>
+                <div class="act">7000</div>
+            </div>
+            <div class="box">
+                <p class="text23" style="text-align: center;"></p>
+                <img src="./images/1.png" alt="" class="img1">
+                <img src="./images/2.png" alt="" class="img2">
+                <img src="./images/3.png" alt="" class="img3">
+                <div style="display: none;" class="img4 boxs">
+                    <div class="why">
+                        <span class="text24"></span>
+                    </div>
+                </div>
+                <div style="display: none;" class="img5 boxs">
+                    <div class="why">
+                        <span class="text244"></span>
+                    </div>
+                </div>
+                <div class="img6 boxs">
+                    <div class="why">
+                        <span class="text2444"></span>
+                    </div>
+                </div>
+            </div>
+        </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="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="./js/index.js?v=1.0"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/activity/customizedGift/js/index.js

@@ -0,0 +1,348 @@
+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 countupTime1;//倒计时容器
+var countupTime2;//倒计时容器
+// 初始化函數
+$(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();
+        rankGift();
+        giftRank();
+    }, 100)
+})
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.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));
+    $('.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));
+    $('.text21').html(langReplace(localLang.demoModule.text21));
+    $('.text22').html(langReplace(localLang.demoModule.text22));
+    $('.text23').html(langReplace(localLang.demoModule.text23));
+    $('.text24').html(langReplace(localLang.demoModule.text24));
+    $('.text244').html(langReplace(localLang.demoModule.text244));
+    $('.text2444').html(langReplace(localLang.demoModule.text2444));
+    $('.text25').html(langReplace(localLang.demoModule.text25));
+    $('.rewardBox .rule_in .box .img1').attr('src', langReplace(localLang.demoModule.img1));
+    $('.rewardBox2 .rule_in .box .img1').attr('src', langReplace(localLang.demoModule.img2));
+    $('.rewardBox2 .rule_in .box .img2').attr('src', langReplace(localLang.demoModule.img3));
+    $('.rewardBox2 .rule_in .box .img3').attr('src', langReplace(localLang.demoModule.img4));
+}
+// 第一Tab接口
+function rankGift() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/special/gift/rank/gift',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code === 200) {
+                // 处理倒计时
+                countup1(res.data.endTime - res.timestamp);
+                var listTo3 = res.data.lastWeekTop.slice(0, 3);
+                if (listTo3.length < 3) {
+                    let arr = new Array(3 - listTo3.length).fill({
+                        picUrl: './images/null.png',
+                        giftName: 'Vacant',
+                        giftNum: "Vacant"
+                    })
+                    listTo3.push(...arr)
+                }
+                // 处理上周数据
+                listTo3.forEach((res, i) => {
+                    $(`.lastWeek .top .top${i + 1} .tx`).attr('src', res.picUrl);
+                    $(`.lastWeek .top .top${i + 1} .name strong`).text(res.giftName);
+                    $(`.lastWeek .top .top${i + 1} .giftedTime strong`).text(res.giftNum);
+                })
+                var thisListTo3 = res.data.thisWeekTop.slice(0, 3);
+                var notThisListTo3 = res.data.thisWeekTop.slice(3);
+                if (thisListTo3.length < 3) {
+                    let arr = new Array(3 - thisListTo3.length).fill({
+                        picUrl: './images/null.png',
+                        giftName: 'Vacant',
+                        giftNum: "Vacant"
+                    })
+                    thisListTo3.push(...arr)
+                }
+                // 处理本周前三
+                thisListTo3.forEach((res, i) => {
+                    $(`.page1 .thisWeek .top .top${i + 1} .tx`).attr('src', res.picUrl);
+                    $(`.page1 .thisWeek .top .top${i + 1} .name strong`).text(res.giftName);
+                    $(`.page1 .thisWeek .top .top${i + 1} .giftedTime strong`).text(res.giftNum);
+                })
+                // 本周非前三
+                $('.page1 .thisWeek .content ul li').remove();
+                var str = '';
+                notThisListTo3.forEach(res => {
+                    str += `
+                        <li>
+                            <div class="num">${res.rank}</div>
+                            <img src="${res.picUrl}" alt="" class="tx">
+                            <div class="giftInfo">
+                                <p>${langReplace(localLang.demoModule.text5)}${res.giftName}</p>
+                                <b>${langReplace(localLang.demoModule.text6)}${res.giftNum}</b>
+                            </div>
+                        </li>
+                    `
+                })
+                $('.page1 .thisWeek .content ul').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 第二Tab接口
+function giftRank() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/special/gift/rank',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code === 200) {
+                // 处理倒计时
+                countup2(res.data.endTime - res.timestamp);
+                // 处理自己
+                $('.page2 .myList .top .my .tx').attr('src', res.data.myRank.avatar);
+                $('.page2 .myList .top .my p').text(res.data.myRank.name);
+                $('.page2 .myList .top .my b').text(langReplace(localLang.demoModule.text6) + unitProcessingAr(res.data.myRank.totalNum, 1));
+                $('.page2 .myList .top .my span').text(langReplace(localLang.demoModule.text25) + unitProcessingAr(res.data.myRank.totalGoldNum, 1));
+                // 处理列表
+                $('.page2 .myList .content ul li').remove();
+                var str = '';
+                res.data.rankList.forEach(res => {
+                    str += `
+                        <li>
+                            <div class="num">${res.rank}</div>
+                            <img style="display:${res.rank <= 3 ? 'block' : 'none'}" src="./images/ts${res.rank}.png" alt="" class="ts">
+                            <img src="${res.avatar}" alt="" class="tx">
+                            <span>${res.name}</span>
+                            <div class="giftInfo">
+                                <p>${langReplace(localLang.demoModule.text6)}${unitProcessingAr(res.totalNum, 1)}</p>
+                                <b>${langReplace(localLang.demoModule.text25)}${unitProcessingAr(res.totalGoldNum, 1)}</b>
+                            </div>
+                        </li>
+                    `
+                })
+                $('.page2 .myList .content ul').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// tab切换
+$('.tabBox div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    $(`.page1,.page2`).hide();
+    $(`.page${i}`).show();
+})
+// 倒計時
+function countup1(leftTime, type) {
+    clearTimeout(countupTime1)
+    //獲取當前時間
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定義變數 d,h,m,s保存倒計時的時間
+    var d, h, m, s;
+    //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 
+    if (leftTime > 0) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //將倒計時賦值到div中
+        $(`.page1 .thisWeek .top .countdown .day span`).text(d);
+        $(`.page1 .thisWeek .top .countdown .hours span`).text(h);
+        $(`.page1 .thisWeek .top .countdown .mins span`).text(m);
+        $(`.page1 .thisWeek .top .countdown .secs span`).text(s);
+    } else {
+        rankGift();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    countupTime1 = setTimeout(function () {
+        countup1(leftTime);
+    }, 1000);
+}
+function countup2(leftTime, type) {
+    clearTimeout(countupTime2)
+    //獲取當前時間
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定義變數 d,h,m,s保存倒計時的時間
+    var d, h, m, s;
+    //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 
+    if (leftTime > 0) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //將倒計時賦值到div中
+        $(`.page2 .myList .top .countdown .day span`).text(d);
+        $(`.page2 .myList .top .countdown .hours span`).text(h);
+        $(`.page2 .myList .top .countdown .mins span`).text(m);
+        $(`.page2 .myList .top .countdown .secs span`).text(s);
+    } else {
+        giftRank();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    countupTime2 = setTimeout(function () {
+        countup2(leftTime);
+    }, 1000);
+}
+//补0操作  
+function getzf(num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+// 打开规则
+$('.page2 .myList .top .rule').click(function () {
+    $('.ruleBox').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.ruleBox .rule_in .close').click(function () {
+    $('.ruleBox').hide();
+    bodyScroolFun(false);
+})
+// 打开规则
+$('.page1 .thisWeek .top .rule').click(function () {
+    $('.ruleBox2').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.ruleBox2 .rule_in .close').click(function () {
+    $('.ruleBox2').hide();
+    bodyScroolFun(false);
+})
+// 打开奖励
+$('.page1 .thisWeek .top .reward').click(function () {
+    $('.rewardBox').show();
+    bodyScroolFun(true);
+})
+// 关闭奖励
+$('.rewardBox .rule_in .close').click(function () {
+    $('.rewardBox').hide();
+    bodyScroolFun(false);
+})
+// 打开奖励
+$('.page2 .myList .top .reward').click(function () {
+    $('.rewardBox2').show();
+    bodyScroolFun(true);
+})
+// 关闭奖励
+$('.rewardBox2 .rule_in .close').click(function () {
+    $('.rewardBox2').hide();
+    $('.rewardBox2 .rule_in .box .img6 .why span,.rewardBox2 .rule_in .box .img5 .why span,.rewardBox2 .rule_in .box .img4 .why span').hide();
+    bodyScroolFun(false);
+})
+
+// 奖励tab切换
+$('.rewardBox2 .rule_in .stabBox div').click(function () {
+    var i = $(this).index() + 1;
+    $('.text23').text(langReplace(localLang.demoModule[`texts${i}`]));
+    $(this).addClass('act').siblings().removeClass();
+    $('.rewardBox2 .rule_in .box img').hide();
+    $('.rewardBox2 .rule_in .box .boxs').hide();
+    $(`.rewardBox2 .rule_in .box .img${i}`).css('display', 'block');
+})
+$('.rewardBox2 .rule_in .box img,.rewardBox2 .rule_in .box div').click(function(){
+    $('.rewardBox2 .rule_in .box .img6 .why span').hide();
+    $('.rewardBox2 .rule_in .box .img5 .why span').hide();
+    $('.rewardBox2 .rule_in .box .img4 .why span').hide();
+    return false;
+})
+$('.rewardBox2 .rule_in .box .img6 .why,.rewardBox2 .rule_in .box .img5 .why,.rewardBox2 .rule_in .box .img4 .why').click(function () {
+    $('.rewardBox2 .rule_in .box .img6 .why span,.rewardBox2 .rule_in .box .img5 .why span,.rewardBox2 .rule_in .box .img4 .why span').css('display', 'block');
+    return false;
+})

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

@@ -0,0 +1,51 @@
+// 阿拉伯
+langAr = {
+        // 模块
+        demoModule: {
+                layerIndex1: `جار التحميل...`,
+                layerIndex2: `نجاح`,
+                layerIndex3: `خطأ في الشبكة`,
+                text1: `مسابقة الهدايا المخصصة`,
+                text2: `مقدمة النشاط`,
+                text3: `<p>هل فكرت يومًا في إرسال هدية مخصصة تعبر عن مشاعرك؟</p>
+<p>الآن، الفرصة قد جاءت! مسابقتنا للهدايا المخصصة تتيح لك تحميل هداياك المخصصة والحصول على التقدير في المسابقة. نتطلع إلى إبداعك وحماسك!</p>`,
+                text4: `أفضل 3 هدايا الأسبوع الماضي`,
+                text5: `اسم الهدية:`,
+                text6: `وقت الإهداء:`,
+                text7: `الهدايا المخصصة الشائعة`,
+                text8: `داعمي الهدايا المخصصة`,
+                text9: `القواعد`,
+                text10: `المكافأة`,
+                text11: `العد التنازلي`,
+                text12: `يوم`,
+                text13: `ساعة`,
+                text14: `دقيقة`,
+                text15: `ثانية`,
+                text16: `العد التنازلي`,
+                text17: `<p>1. وقت النشاط: من اليوم الأول من هذا الشهر إلى نهاية الشهر الثاني (GMT+3)</p>
+<p>2. احتساب عدد الهدايا المخصصة المرسلة خلال الحدث. كلما زادت الهدايا المرسلة، زادت المكافآت التي ستحصل عليها.</p>
+<p>3. هذا الحدث لا علاقة له بـ Google أو Apple</p>`,
+                text18: `<p>1. وقت بدء الحدث: من الساعة 00:00 كل يوم اثنين إلى الساعة 23:59 كل يوم أحد (GMT+3)</p>
+<p>2. أفضل 3 هدايا مخصصة شائعة ستفوز بجوائز سخية.</p>
+<p>3. هذا الحدث لا علاقة له بـ Google أو Apple</p>`,
+                text19: `المكافأة 1: عندما تحتل الهدية المخصصة المرتبة الأولى في قائمة هدايا هذا الأسبوع، سيتم تخصيص الهدية كصفحة بداية وبانر.`,
+                text20: `المكافأة 2: عندما تكون الهدايا المخصصة ضمن المراكز الثلاثة الأولى لهذا الأسبوع، سيتم تحديثها في لوحة الهدايا كهدية حصرية مخصصة.`,
+                text21: `المكافأة 3: عندما تكون الهدايا المخصصة ضمن المراكز الثلاثة الأولى لهذا الأسبوع، سيكون هناك منطقة مخصصة في صفحة الحدث لعرض الهدايا المقابلة.`,
+                text22: `المكافأة 4: عندما تكون الهدايا المخصصة ضمن المراكز الثلاثة الأولى لهذا الأسبوع، ستحظى هذه الهدايا الثلاثة بظهور خاص على لوحة الهدايا المخصصة.`,
+                text23: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 7000، يمكنك الحصول على المكافآت التالية!`,
+                texts6: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 7000 مرة، يمكنك الحصول على المكافآت التالية!`,
+                texts5: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 5600 مرة، يمكنك الحصول على المكافآت التالية!`,
+                texts4: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 4900 مرة، يمكنك الحصول على المكافآت التالية!`,
+                texts3: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 3500 مرة، يمكنك الحصول على المكافآت التالية!`,
+                texts2: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 2100 مرة، يمكنك الحصول على المكافآت التالية!`,
+                texts1: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 700 مرة، يمكنك الحصول على المكافآت التالية!`,
+                text24: `يرجى الاتصال بخدمة العملاء لدينا، وتحميل فيديو سيارة مدته 5 ثوانٍ، وتخصيص سيارتك الخاصة.`,
+                text244: `يرجى الاتصال بخدمة العملاء لدينا، وتحميل فيديو سيارة مدته 8 ثوانٍ، وتخصيص سيارتك الخاصة.`,
+                text2444: `يرجى الاتصال بخدمة العملاء لدينا، وتحميل فيديو سيارة مدته 10 ثوانٍ، وتخصيص سيارتك الخاصة.`,
+                text25: `عدد عملات الهدايا:`,
+                img1: `./images/reward1-ar.png`,
+                img2: `./images/1-ar.png`,
+                img3: `./images/2-ar.png`,
+                img4: `./images/3-ar.png`,
+        }
+}

view/molistar/activity/customizedGift/local/en.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/customizedGift/local/zh.js

@@ -0,0 +1,51 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+        text1: `客製禮物競賽`,
+        text2: `活動介紹`,
+        text3: `<p>您是否曾想過送出一份能表達您情感的客製禮物？</p>
+<p>現在，機會來了！我們的客製禮物競賽允許您上傳自己的客製禮物，並在競賽中獲得認可。期待您的創意和熱情！</p>`,
+        text4: `上週前三名禮物`,
+        text5: `禮物名稱：`,
+        text6: `送出時間：`,
+        text7: `熱門客製禮物`,
+        text8: `客製禮物支持者`,
+        text9: `規則`,
+        text10: `獎勵`,
+        text11: `倒計時`,
+        text12: `天`,
+        text13: `小時`,
+        text14: `分鐘`,
+        text15: `秒`,
+        text16: `倒計時`,
+        text17: `<p>1. 活動時間：本月1日至第二個月月底（GMT+3）</p>
+<p>2. 計算活動期間送出的客製禮物數量。送出的禮物越多，獲得的獎勵越多。</p>
+<p>3. 此活動與 Google 和 Apple 無關</p>`,
+        text18: `<p>1. 活動開始時間：每週一 00:00 - 每週日 23:59（GMT+3）</p>
+<p>2. 最受歡迎的前三名客製禮物將獲得豐厚禮品。</p>
+<p>3. 此活動與 Google 和 Apple 無關</p>`,
+        text19: `獎勵1：當客製禮物在本週的禮物榜上排名第一時，該禮物將被客製為起始頁面和橫幅。`,
+        text20: `獎勵2：當客製禮物進入本週前三名時，將被更新到禮物面板，作為專屬的客製幸運禮物。`,
+        text21: `獎勵3：當客製禮物進入本週前三名時，活動頁面上將有專屬區域展示相應禮物。`,
+        text22: `獎勵4：當客製禮物為本週前三名時，這三份禮物將在客製禮物面板上有特別展示。`,
+        text23: `活動期間，如果客製禮物的送出次數達到7000次，您將獲得以下獎勵！`,
+        texts6: `在活動期間，如果送出的定制禮物次數達到 7000 次，您可以獲得以下獎勵！`,
+        texts5: `在活動期間，如果送出的定制禮物次數達到 5600 次，您可以獲得以下獎勵！`,
+        texts4: `在活動期間，如果送出的定制禮物次數達到 4900 次，您可以獲得以下獎勵！`,
+        texts3: `在活動期間，如果送出的定制禮物次數達到 3500 次，您可以獲得以下獎勵！`,
+        texts2: `在活動期間，如果送出的定制禮物次數達到 2100 次，您可以獲得以下獎勵！`,
+        texts1: `在活動期間，如果送出的定制禮物次數達到 700 次，您可以獲得以下獎勵！`,
+        text24: `請聯繫我們的客服，並上傳一段5秒的汽車影片，客製化您的專屬汽車。`,
+        text244: `請聯繫我們的客服，並上傳一段8秒的汽車影片，客製化您的專屬汽車。`,
+        text2444: `請聯繫我們的客服，並上傳一段10秒的汽車影片，客製化您的專屬汽車。`,
+        text25: `禮物的硬幣數：`,
+        img1: `./images/reward1.png`,
+        img2: `./images/1.png`,
+        img3: `./images/2.png`,
+        img4: `./images/3.png`,
+    }
+}

view/molistar/common/local/langHandler.js

@@ -1,7 +1,7 @@
 /**
  * 初始化当前语言 
  */
-function initLocalLang () {
+function initLocalLang() {
     const lang = localStorage.getItem('lang')
     // if (lang === 'zh' || window.location.href.match('=zh-CN')) {
     //     console.log("langHandler" + '简体')
@@ -10,7 +10,7 @@ function initLocalLang () {
     //     window.lang.code = 'zh-CN'
     //     window.lang.defaults = false
     // } else
-     if (lang === 'zh' || window.location.href.match('=zh')) {
+    if (lang === 'zh' || window.location.href.match('=zh')) {
         console.log("langHandler" + '繁体')
         window.lang = langZh
         window.lang.code = 'zh'
@@ -33,16 +33,19 @@ function initLocalLang () {
         window.lang = langId
         window.lang.code = 'id'
         window.lang.defaults = false
-    }else if (lang === 'tr' || window.location.href.match('=tr')) {
-        // 土耳其
-        // console.log("langHandler" + '土耳其')
-        // window.lang = langTr
-        // window.lang.code = 'tr'
-        // window.lang.defaults = false
-        console.log("langHandler" + '英语/土耳其')
-        window.lang = langEn
-        window.lang.code = 'en'
-        window.lang.defaults = false
+    } else if (lang === 'tr' || window.location.href.match('=tr')) {
+        if (window.location.href.match('2024-invitationFission') || window.location.href.match('inform') || window.location.href.match('superId') || window.location.href.match('newWeekStar') || window.location.href.match('home') || window.location.href.match('pay')) {
+            // 土耳其
+            console.log("langHandler" + '土耳其')
+            window.lang = langTr
+            window.lang.code = 'tr'
+            window.lang.defaults = false
+        } else {
+            console.log("langHandler" + '英语/土耳其')
+            window.lang = langEn
+            window.lang.code = 'en'
+            window.lang.defaults = false
+        }
     } else {
         console.log("langHandler" + '默认英语')
         window.lang = langEn

view/molistar/home/css/index.css

@@ -6,109 +6,244 @@
   html {
     width: 100%;
     height: 100%;
-    background: linear-gradient(180deg, #61C9A0 0%, #309470 100%);
     font-family: Avenir, Avenir;
     cursor: pointer;
   }
   body .container,
   html .container {
-    position: relative;
-  }
-  body .pc-bg,
-  html .pc-bg {
-    display: none;
-  }
-  body .homePc,
-  html .homePc {
     width: 100%;
-    height: 10rem;
-    background: url(../images/pcBgBig.png) no-repeat;
-    background-size: 100% 100%;
+    height: 100vh;
+    position: relative;
+    overflow-y: hidden;
+  }
+  body .container .pagesBox,
+  html .container .pagesBox {
+    width: 100%;
+    height: 100vh;
+    transition: all .5s;
+    transform: translateY(0%);
+  }
+  body .container .pagesBox .page1,
+  html .container .pagesBox .page1 {
+    width: 100%;
+    height: 100%;
+    background: url(../images/pc1.png) no-repeat center center;
+    background-size: cover;
     position: relative;
   }
-  body .homePc .diamound,
-  html .homePc .diamound {
-    padding: 0 0.26667rem;
-    height: 0.5rem;
-    line-height: 0.46667rem;
-    color: #FFFFFF;
-    font-size: 0.25rem;
-    text-align: center;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 0.53333rem;
-    box-sizing: border-box;
-    border: 1px solid #fff;
+  body .container .pagesBox .page1 .logoPc,
+  html .container .pagesBox .page1 .logoPc {
+    width: 2.69333rem;
+    height: 0.93333rem;
     position: absolute;
-    right: 3.46667rem;
-    top: 0.3rem;
-    vertical-align: middle;
+    left: 0.85333rem;
+    top: 0.37333rem;
   }
-  body .homePc .diamound img,
-  html .homePc .diamound img {
+  body .container .pagesBox .page1 .tab,
+  html .container .pagesBox .page1 .tab {
+    width: 4.26667rem;
+    height: 0.41333rem;
+    line-height: 0.41333rem;
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 0.29333rem;
+    font-weight: 500;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0.6rem;
+  }
+  body .container .pagesBox .page1 .tab p,
+  html .container .pagesBox .page1 .tab p {
+    position: relative;
+  }
+  body .container .pagesBox .page1 .tab p span,
+  html .container .pagesBox .page1 .tab p span {
+    width: 0.46667rem;
+    height: 0.09333rem;
+    border-radius: 0.09333rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -0.26667rem;
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+  }
+  body .container .pagesBox .page1 .tab .tex,
+  html .container .pagesBox .page1 .tab .tex {
+    opacity: 0.5;
+  }
+  body .container .pagesBox .page1 .recharge,
+  html .container .pagesBox .page1 .recharge {
+    width: 1.62667rem;
+    height: 0.48rem;
+    line-height: 0.42667rem;
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+    text-align: center;
+    color: #fff;
+    font-size: 0.21333rem;
+    border-radius: 0.48rem;
+    position: absolute;
+    top: 0.6rem;
+    right: 2.44rem;
+  }
+  body .container .pagesBox .page1 .recharge img,
+  html .container .pagesBox .page1 .recharge img {
+    width: 0.29333rem;
+    height: 0.29333rem;
     display: inline-block;
-    width: 0.50667rem;
-    height: 0.50667rem;
     vertical-align: middle;
-    margin-top: -0.01rem;
+    margin-right: 0.02667rem;
   }
-  body .homePc .language,
-  html .homePc .language {
+  body .container .pagesBox .page1 .recharge span,
+  html .container .pagesBox .page1 .recharge span {
+    vertical-align: middle;
+  }
+  body .container .pagesBox .page1 .language,
+  html .container .pagesBox .page1 .language {
+    position: absolute;
+    right: 0.85333rem;
+    top: 0.6rem;
+    width: 1.32rem;
+    height: 0.48rem;
+    border-radius: 0.48rem;
+    line-height: 0.48rem;
+    background: rgba(255, 255, 255, 0.2);
     color: #fff;
-    position: absolute;
-    height: 0.5rem;
-    line-height: 0.5rem;
-    right: 1rem;
-    top: .3rem;
-    font-size: 0.25333rem;
-    font-weight: bold;
+    text-align: center;
+    font-size: 0.21333rem;
+    font-weight: 400;
   }
-  body .homePc .privacy,
-  html .homePc .privacy {
-    color: #fff;
-    position: absolute;
-    height: 0.5rem;
-    line-height: 0.5rem;
-    left: 6.4rem;
-    top: .3rem;
-    width: 3rem;
-  }
-  body .homePc .pcIos,
-  html .homePc .pcIos {
-    width: 2.9rem;
-    height: 0.64rem;
-    position: absolute;
-    right: 5rem;
-    top: 5.855rem;
-  }
-  body .homePc .pcAnd,
-  html .homePc .pcAnd {
-    width: 2.9rem;
-    height: 0.64rem;
-    position: absolute;
-    right: 5rem;
-    top: 6.79rem;
-  }
-  body .bootom,
-  html .bootom {
+  body .container .pagesBox .page1 .title,
+  html .container .pagesBox .page1 .title {
     width: 100%;
-    position: fixed;
+    text-align: center;
+    font-size: 0.8rem;
+    color: #fff;
+    font-weight: 600;
+    position: absolute;
     left: 0;
-    bottom: 0;
-    background: #0F0B27;
+    top: 5.26667rem;
+  }
+  body .container .pagesBox .page1 h3,
+  html .container .pagesBox .page1 h3 {
+    width: 100%;
+    text-align: center;
+    font-size: 0.58667rem;
+    color: #fff;
+    font-weight: 400;
+    position: absolute;
+    left: 0;
+    top: 6.66667rem;
+  }
+  body .container .pagesBox .page1 .h5Ios,
+  html .container .pagesBox .page1 .h5Ios {
+    width: 4.44rem;
+    height: 1.06667rem;
+    position: absolute;
+    left: 7.33333rem;
+    top: 8.45333rem;
+  }
+  body .container .pagesBox .page1 .h5And,
+  html .container .pagesBox .page1 .h5And {
+    width: 4.44rem;
+    height: 1.06667rem;
+    position: absolute;
+    right: 7.33333rem;
+    top: 8.45333rem;
+  }
+  body .container .pagesBox .page1 .team,
+  html .container .pagesBox .page1 .team {
+    width: 100%;
     text-align: center;
     color: #fff;
-    padding-bottom: 0.2rem;
-    padding-top: 0.1rem;
+    opacity: 0.6;
+    font-size: 0.21333rem;
+    font-weight: 400;
+    position: absolute;
+    left: 0;
+    bottom: 0.4rem;
   }
-  body .bootom p,
-  html .bootom p {
-    margin-top: 0.1rem;
-    font-size: 0.15rem;
-    color: #fff;
+  body .container .pagesBox .page2,
+  html .container .pagesBox .page2 {
+    width: 100%;
+    height: 100%;
+    background: url(../images/pc2.png) no-repeat center center;
+    background-size: cover;
+    position: relative;
   }
-  body .bootom p a,
-  html .bootom p a {
+  body .container .pagesBox .page2 .title,
+  html .container .pagesBox .page2 .title {
+    width: 100%;
+    text-align: center;
+    font-size: 0.8rem;
     color: #fff;
+    font-weight: 600;
+    position: absolute;
+    left: 0;
+    top: 0.86667rem;
+  }
+  body .container .pagesBox .page2 img,
+  html .container .pagesBox .page2 img {
+    position: absolute;
+    width: 16rem;
+    top: 2.66667rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  body .container .pagesBox .page3,
+  html .container .pagesBox .page3 {
+    width: 100%;
+    height: 100%;
+    background: url(../images/pc3.png) no-repeat center center;
+    background-size: cover;
+    position: relative;
+  }
+  body .container .pagesBox .page3 .title,
+  html .container .pagesBox .page3 .title {
+    width: 100%;
+    text-align: center;
+    font-size: 0.8rem;
+    color: #fff;
+    font-weight: 600;
+    position: absolute;
+    left: 0;
+    top: 0.86667rem;
+  }
+  body .container .pagesBox .page3 img,
+  html .container .pagesBox .page3 img {
+    position: absolute;
+    width: 16rem;
+    top: 2.66667rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  body .container .pagesBox .page4,
+  html .container .pagesBox .page4 {
+    width: 100%;
+    height: 100%;
+    background: url(../images/pc4.png) no-repeat center center;
+    background-size: cover;
+    position: relative;
+  }
+  body .container .pagesBox .page4 .title,
+  html .container .pagesBox .page4 .title {
+    width: 100%;
+    text-align: center;
+    font-size: 0.8rem;
+    color: #fff;
+    font-weight: 600;
+    position: absolute;
+    left: 0;
+    top: 0.86667rem;
+  }
+  body .container .pagesBox .page4 img,
+  html .container .pagesBox .page4 img {
+    position: absolute;
+    width: 16rem;
+    top: 2.66667rem;
+    left: 50%;
+    transform: translateX(-50%);
   }
 }
 
@@ -130,7 +265,7 @@
     width: 100%;
     height: 1.2rem;
     box-sizing: border-box;
-    padding: 0 0.53333rem;
+    padding: 0 0.42667rem;
     margin: 0.26667rem auto 0;
     z-index: 3;
   }
@@ -144,6 +279,7 @@
     left: 50%;
     transform: translateX(-50%);
     bottom: 0;
+    display: none;
   }
   body .header .logo,
   html .header .logo {
@@ -164,18 +300,18 @@
   body .header .diamound,
   html .header .diamound {
     padding: 0 0.26667rem;
-    height: 0.74667rem;
-    line-height: 0.74667rem;
+    height: 0.8rem;
+    line-height: 0.8rem;
     box-sizing: border-box;
-    border: 1px solid #fff;
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
     vertical-align: middle;
     color: #fff;
     font-size: 0.32rem;
     float: right;
     margin-top: 0.05333rem;
-    margin-right: 0.42667rem;
+    margin-right: 0.24rem;
     text-align: center;
-    border-radius: 0.74667rem;
+    border-radius: 0.8rem;
   }
   body .header .diamound img,
   html .header .diamound img {
@@ -192,15 +328,24 @@
     height: 0.53333rem;
     display: block;
     margin-top: 0.16rem;
+    display: none;
   }
   body .header .language,
   html .header .language {
     float: right;
-    color: #fff;
-    height: 0.53333rem;
-    line-height: 0.53333rem;
-    margin-top: 0.16rem;
+    width: 2.18667rem;
+    height: 0.8rem;
+    border-radius: 0.8rem;
+    line-height: 0.8rem;
+    margin-top: 0.05333rem;
     margin-right: 0.26667rem;
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    text-align: center;
+  }
+  body .header .language b,
+  html .header .language b {
+    font-size: 0.32rem;
   }
   body .h5,
   html .h5 {
@@ -225,6 +370,80 @@
     background: url(../images/h51.png) no-repeat center;
     background-size: 10rem 100%;
   }
+  body .h5 .pagesBox .page1 .tab,
+  html .h5 .pagesBox .page1 .tab {
+    width: 70%;
+    display: flex;
+    position: absolute;
+    top: 2.13333rem;
+    height: 0.58667rem;
+    line-height: 0.58667rem;
+    left: 50%;
+    transform: translateX(-50%);
+    justify-content: space-evenly;
+  }
+  body .h5 .pagesBox .page1 .tab p,
+  html .h5 .pagesBox .page1 .tab p {
+    color: #FFFFFF;
+    opacity: 0.2;
+    position: relative;
+    font-size: 0.42667rem;
+    white-space: nowrap;
+  }
+  body .h5 .pagesBox .page1 .tab p span,
+  html .h5 .pagesBox .page1 .tab p span {
+    width: 0.58667rem;
+    height: 0.13333rem;
+    border-radius: 0.13333rem;
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -0.26667rem;
+    font-size: 0.42667rem;
+    font-weight: 500;
+  }
+  body .h5 .pagesBox .page1 .tab .act,
+  html .h5 .pagesBox .page1 .tab .act {
+    opacity: 1;
+  }
+  body .h5 .pagesBox .page1 .title,
+  html .h5 .pagesBox .page1 .title {
+    width: 100%;
+    height: 1.12rem;
+    text-align: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 0.8rem;
+    position: absolute;
+    top: 7.78667rem;
+    left: 0;
+  }
+  body .h5 .pagesBox .page1 .tex,
+  html .h5 .pagesBox .page1 .tex {
+    width: 9.14667rem;
+    height: 1.49333rem;
+    line-height: 0.74667rem;
+    position: absolute;
+    top: 9.25333rem;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #fff;
+    text-align: center;
+    opacity: 0.6;
+    font-size: 0.53333rem;
+    font-weight: 400;
+  }
+  body .h5 .pagesBox .page1 .team,
+  html .h5 .pagesBox .page1 .team {
+    width: 100%;
+    left: 0;
+    bottom: 1.09333rem;
+    text-align: center;
+    color: #fff;
+    opacity: 0.8;
+    position: absolute;
+  }
   body .h5 .pagesBox .page1 .pageTxte1,
   html .h5 .pagesBox .page1 .pageTxte1 {
     width: 6.42667rem;
@@ -243,8 +462,8 @@
   }
   body .h5 .pagesBox .page1 .downioad,
   html .h5 .pagesBox .page1 .downioad {
-    width: 5.52rem;
-    height: 1.22667rem;
+    width: 4.44rem;
+    height: 1.06667rem;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -265,61 +484,37 @@
     height: 100%;
     position: relative;
     overflow: hidden;
-    background: url(../images/h51.png) no-repeat center;
+    background: url(../images/h52.png) no-repeat center;
     background-size: 10rem 100%;
   }
-  body .h5 .pagesBox .page2 .pageText2,
-  html .h5 .pagesBox .page2 .pageText2 {
-    width: 10rem;
-    height: 10.85333rem;
-    position: relative;
-    top: 3.44rem;
-    margin: 0 auto;
-    display: block;
-    display: none;
-  }
-  body .h5 .pagesBox .page2 .page2_in,
-  html .h5 .pagesBox .page2 .page2_in {
-    width: 10rem;
-    height: 11.65333rem;
+  body .h5 .pagesBox .page2 .title,
+  html .h5 .pagesBox .page2 .title {
+    width: 100%;
+    height: 1.12rem;
+    text-align: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 0.8rem;
     position: absolute;
+    top: 3.06667rem;
+    left: 0;
+  }
+  body .h5 .pagesBox .page2 .img,
+  html .h5 .pagesBox .page2 .img {
+    position: absolute;
+    width: 10rem;
+    top: 4.77333rem;
     left: 50%;
     transform: translateX(-50%);
-    top: 2.50667rem;
-  }
-  body .h5 .pagesBox .page2 .pagetx1,
-  html .h5 .pagesBox .page2 .pagetx1 {
-    width: 6.34667rem;
-    height: 4.10667rem;
-    position: absolute;
-    left: 3.12rem;
-    top: 4.56rem;
-  }
-  body .h5 .pagesBox .page2 .pagetx2,
-  html .h5 .pagesBox .page2 .pagetx2 {
-    width: 6.34667rem;
-    height: 4.10667rem;
-    position: absolute;
-    left: 0.53333rem;
-    top: 9.17333rem;
   }
   body .h5 .pagesBox .page2 .downioad,
   html .h5 .pagesBox .page2 .downioad {
-    width: 5.52rem;
-    height: 1.12rem;
+    width: 4.44rem;
+    height: 1.06667rem;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 1.66667rem;
-    display: block;
-  }
-  body .h5 .pagesBox .page2 .down,
-  html .h5 .pagesBox .page2 .down {
-    width: 0.50667rem;
-    height: 0.37333rem;
-    position: absolute;
-    left: 48%;
-    bottom: 0.26667rem;
   }
   body .h5 .pagesBox .page3,
   html .h5 .pagesBox .page3 {
@@ -327,77 +522,37 @@
     height: 100%;
     position: relative;
     overflow: hidden;
-    background: url(../images/h51.png) no-repeat center;
+    background: url(../images/h53.png) no-repeat center;
     background-size: 10rem 100%;
   }
-  body .h5 .pagesBox .page3 .pageText3,
-  html .h5 .pagesBox .page3 .pageText3 {
-    width: 6.82667rem;
-    height: 1.52rem;
-    position: relative;
-    display: block;
-    margin: 0 auto;
-    top: 2.8rem;
-    display: none;
-  }
-  body .h5 .pagesBox .page3 .page3_in,
-  html .h5 .pagesBox .page3 .page3_in {
-    width: 10rem;
-    height: 11.65333rem;
+  body .h5 .pagesBox .page3 .title,
+  html .h5 .pagesBox .page3 .title {
+    width: 100%;
+    height: 1.12rem;
+    text-align: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 0.8rem;
     position: absolute;
+    top: 3.06667rem;
+    left: 0;
+  }
+  body .h5 .pagesBox .page3 .img,
+  html .h5 .pagesBox .page3 .img {
+    position: absolute;
+    width: 10rem;
+    top: 4.77333rem;
     left: 50%;
     transform: translateX(-50%);
-    top: 2.50667rem;
-  }
-  body .h5 .pagesBox .page3 .page3Icon1,
-  html .h5 .pagesBox .page3 .page3Icon1 {
-    width: 4.09333rem;
-    height: 2.93333rem;
-    position: absolute;
-    left: 5.68rem;
-    top: 5.65333rem;
-  }
-  body .h5 .pagesBox .page3 .page3Icon2,
-  html .h5 .pagesBox .page3 .page3Icon2 {
-    width: 4.32rem;
-    height: 3.09333rem;
-    position: absolute;
-    left: 0rem;
-    top: 4.85333rem;
-  }
-  body .h5 .pagesBox .page3 .page3Icon3,
-  html .h5 .pagesBox .page3 .page3Icon3 {
-    width: 4.32rem;
-    height: 3.09333rem;
-    position: absolute;
-    right: 0rem;
-    top: 10rem;
-  }
-  body .h5 .pagesBox .page3 .page3Icon4,
-  html .h5 .pagesBox .page3 .page3Icon4 {
-    width: 3.78667rem;
-    height: 2.72rem;
-    position: absolute;
-    left: 0rem;
-    top: 11.14667rem;
   }
   body .h5 .pagesBox .page3 .downioad,
   html .h5 .pagesBox .page3 .downioad {
-    width: 5.52rem;
-    height: 1.12rem;
+    width: 4.44rem;
+    height: 1.06667rem;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 1.66667rem;
-    display: block;
-  }
-  body .h5 .pagesBox .page3 .down,
-  html .h5 .pagesBox .page3 .down {
-    width: 0.50667rem;
-    height: 0.37333rem;
-    position: absolute;
-    left: 48%;
-    bottom: 0.26667rem;
   }
   body .h5 .pagesBox .page4,
   html .h5 .pagesBox .page4 {
@@ -405,61 +560,37 @@
     height: 100%;
     position: relative;
     overflow: hidden;
-    background: url(../images/h51.png) no-repeat center;
+    background: url(../images/h54.png) no-repeat center;
     background-size: 10rem 100%;
   }
-  body .h5 .pagesBox .page4 .pageText4,
-  html .h5 .pagesBox .page4 .pageText4 {
-    width: 6.4rem;
-    height: 1.52rem;
-    position: relative;
-    top: 2.8rem;
-    display: block;
-    margin: 0 auto;
-    display: none;
-  }
-  body .h5 .pagesBox .page4 .page4_in,
-  html .h5 .pagesBox .page4 .page4_in {
-    width: 10rem;
-    height: 11.65333rem;
+  body .h5 .pagesBox .page4 .title,
+  html .h5 .pagesBox .page4 .title {
+    width: 100%;
+    height: 1.12rem;
+    text-align: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 0.8rem;
     position: absolute;
+    top: 3.06667rem;
+    left: 0;
+  }
+  body .h5 .pagesBox .page4 .img,
+  html .h5 .pagesBox .page4 .img {
+    position: absolute;
+    width: 10rem;
+    top: 4.77333rem;
     left: 50%;
     transform: translateX(-50%);
-    top: 2.50667rem;
-  }
-  body .h5 .pagesBox .page4 .page4Icon1,
-  html .h5 .pagesBox .page4 .page4Icon1 {
-    width: 5.57333rem;
-    height: 5.12rem;
-    position: absolute;
-    left: 0rem;
-    top: 5.12rem;
-  }
-  body .h5 .pagesBox .page4 .page4Icon2,
-  html .h5 .pagesBox .page4 .page4Icon2 {
-    width: 5.57333rem;
-    height: 5.12rem;
-    position: absolute;
-    right: 0rem;
-    top: 8.58667rem;
   }
   body .h5 .pagesBox .page4 .downioad,
   html .h5 .pagesBox .page4 .downioad {
-    width: 5.52rem;
-    height: 1.12rem;
+    width: 4.44rem;
+    height: 1.06667rem;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 1.66667rem;
-    display: block;
-  }
-  body .h5 .pagesBox .page4 .down,
-  html .h5 .pagesBox .page4 .down {
-    width: 0.50667rem;
-    height: 0.37333rem;
-    position: absolute;
-    left: 48%;
-    bottom: 0.26667rem;
   }
   body .h5 .pagesBox .page5,
   html .h5 .pagesBox .page5 {
@@ -582,7 +713,7 @@
     height: 0.74667rem;
     line-height: 0.74667rem;
     box-sizing: border-box;
-    border: 1px solid #fff;
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
     vertical-align: middle;
     color: #fff;
     font-size: 0.32rem;
@@ -728,7 +859,7 @@
 
 .language_pub .language_pub_in {
   width: 7.8rem;
-  height: 6.4rem;
+  height: 7.2rem;
   left: 50%;
   top: 50%;
   position: absolute;

view/molistar/home/css/index.scss

@@ -20,272 +20,242 @@
     html {
         width: 100%;
         height: 100%;
-        // background: linear-gradient(180deg, #8C80F3 0%, #D070F2 100%);
-        background: linear-gradient(180deg, #61C9A0 0%, #309470 100%);
         font-family: Avenir, Avenir;
         cursor: pointer;
 
-        // .pc {
-        //     width: 100%;
-        //     height: 100%;
-        //     // background: url(../images/pcBg.png) no-repeat center;
-        //     // background-size: px2rem(1920) px2rem(1080);
-        //     position: relative;
-        //     // display: block;
-        //     display: none;
-
-        //     .header {
-        //         width: 1400px;
-        //         height: 108px;
-        //         position: absolute;
-        //         left: 50%;
-        //         top: 0;
-        //         transform: translateX(-50%);
-
-        //         .logo {
-        //             width: px2rem(54);
-        //             height: px2rem(54);
-        //             position: absolute;
-        //             top: px2rem(27);
-        //             // left: px2rem(360);
-        //             left: 3.8rem;
-        //         }
-
-        //         .name {
-        //             height: 100%;
-        //             line-height: px2rem(108);
-        //             font-size: px2rem(40);
-        //             color: #FFFFFF;
-        //             font-weight: 800;
-        //             position: absolute;
-        //             top: 0;
-        //             // left: px2rem(430);
-        //             left: 4.73333rem;
-        //         }
-
-        //         .index {
-        //             height: 100%;
-        //             line-height: px2rem(108);
-        //             font-family: PingFangSC, PingFang SC;
-        //             font-weight: 500;
-        //             position: absolute;
-        //             top: 0;
-        //             left: 7.76rem;
-        //             font-size: px2rem(28);
-        //             color: #fff;
-
-        //             span {
-        //                 width: px2rem(28);
-        //                 height: px2rem(6);
-        //                 background: #9168FA;
-        //                 border-radius: px2rem(6);
-        //                 position: absolute;
-        //                 left: 50%;
-        //                 transform: translateX(-50%);
-        //                 top: px2rem(76);
-        //             }
-        //         }
-
-        //         .diamound {
-        //             width: px2rem(118);
-        //             height: px2rem(48);
-        //             line-height: px2rem(48);
-        //             color: #FFFFFF;
-        //             font-size: px2rem(24);
-        //             text-align: center;
-        //             background: rgba(255, 255, 255, 0.2);
-        //             border-radius: px2rem(48);
-        //             box-sizing: border-box;
-        //             border: 1px solid #fff;
-        //             position: absolute;
-        //             right: 3.06667rem;
-        //             top: px2rem(30);
-        //             vertical-align: middle;
-
-        //             img {
-        //                 display: inline-block;
-        //                 width: px2rem(30);
-        //                 height: px2rem(30);
-        //                 vertical-align: middle;
-        //             }
-        //         }
-        //     }
-
-        //     .Box {
-        //         position: relative;
-        //         // width: px2rem(2720);
-        //         width: 28.08rem;
-        //         height: px2rem(1506);
-        //         overflow: hidden;
-        //         top: px2rem(140);
-        //         left: 50%;
-        //         transform: translateX(-50%);
-        //     }
-
-        //     .pcMarket1 {
-        //         width: px2rem(1542/2);
-        //         height: px2rem(1506/2);
-        //         position: absolute;
-        //         left: px2rem(0);
-        //         top: px2rem(0);
-        //     }
-
-        //     .pcText {
-        //         width: px2rem(1060/2);
-        //         height: px2rem(320/2);
-        //         position: absolute;
-        //         // left: px2rem(1092);
-        //         right: px2rem(0);
-        //         top: px2rem(400/2);
-        //     }
-
-        //     .pcIos {
-        //         width: px2rem(284);
-        //         height: px2rem(64);
-        //         position: absolute;
-        //         // left: px2rem(1091);
-        //         right: px2rem(484/2);
-        //         top: px2rem(816/2);
-        //     }
-
-        //     .pcAnd {
-        //         width: px2rem(284);
-        //         height: px2rem(64);
-        //         position: absolute;
-        //         // left: px2rem(1091);
-        //         right: px2rem(484/2);
-        //         top: px2rem(1000/2);
-        //     }
-
-        //     .code {
-        //         width: px2rem(160);
-        //         height: px2rem(166);
-        //         position: absolute;
-        //         // left: px2rem(1373);
-        //         right: px2rem(100/2);
-        //         top: px2rem(806/2);
-        //     }
-
-        //     .bottom {
-        //         text-align: center;
-        //         color: #B7B6BE;
-        //         font-size: px2rem(16);
-        //         width: 100%;
-        //         padding: px2rem(29) 0;
-        //         position: fixed;
-        //         left: 0;
-        //         bottom: 0;
-        //         background: #0E0B24;
-        //         min-height: 1rem;
-
-        //         p {
-        //             margin-bottom: px2rem(16);
-        //         }
-        //     }
-        // }
-
         .container {
-            position: relative;
-        }
-
-        .pc-bg {
-            display: none;
-        }
-
-        .homePc {
             width: 100%;
-            height: 10rem;
-            background: url(../images/pcBgBig.png) no-repeat;
-            background-size: 100% 100%;
+            height: 100vh;
             position: relative;
+            overflow-y: hidden;
 
-            .diamound {
-                // width: 1.2rem;
-                padding: 0 px2rem(20);
-                height: 0.5rem;
-                line-height: px2rem(35);
-                color: #FFFFFF;
-                font-size: 0.25rem;
-                text-align: center;
-                background: rgba(255, 255, 255, 0.2);
-                border-radius: px2rem(40);
-                box-sizing: border-box;
-                border: 1px solid #fff;
-                position: absolute;
-                right: px2rem(260);
-                top: 0.3rem;
-                vertical-align: middle;
+            .pagesBox {
+                width: 100%;
+                height: 100vh;
+                // overflow: hidden;
+                transition: all .5s;
+                transform: translateY(-0%);
 
-                img {
-                    display: inline-block;
-                    width: px2rem(38);
-                    height: px2rem(38);
-                    vertical-align: middle;
-                    margin-top: -0.01rem;
+                .page1 {
+                    width: 100%;
+                    height: 100%;
+                    background: url(../images/pc1.png) no-repeat center center;
+                    background-size: cover;
+                    position: relative;
+
+                    .logoPc {
+                        width: px2rem(202);
+                        height: px2rem(70);
+                        position: absolute;
+                        left: px2rem(64);
+                        top: px2rem(28);
+                    }
+
+                    .tab {
+                        width: px2rem(320);
+                        height: px2rem(31);
+                        line-height: px2rem(31);
+                        display: flex;
+                        justify-content: space-between;
+                        color: #fff;
+                        font-size: px2rem(22);
+                        font-weight: 500;
+                        position: absolute;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        top: px2rem(45);
+
+                        p {
+                            position: relative;
+
+                            span {
+                                width: px2rem(35);
+                                height: px2rem(7);
+                                border-radius: px2rem(7);
+                                position: absolute;
+                                left: 50%;
+                                transform: translateX(-50%);
+                                bottom: px2rem(-20);
+                                background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+                            }
+                        }
+
+                        .tex {
+                            opacity: 0.5;
+                        }
+                    }
+
+                    .recharge {
+                        width: px2rem(122);
+                        height: px2rem(36);
+                        line-height: px2rem(32);
+                        background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+                        text-align: center;
+                        color: #fff;
+                        font-size: px2rem(16);
+                        border-radius: px2rem(36);
+                        position: absolute;
+                        top: px2rem(45);
+                        right: px2rem(183);
+
+                        img {
+                            width: px2rem(22);
+                            height: px2rem(22);
+                            display: inline-block;
+                            vertical-align: middle;
+                            margin-right: px2rem(2);
+                        }
+
+                        span {
+                            vertical-align: middle;
+                        }
+                    }
+
+                    .language {
+                        position: absolute;
+                        right: px2rem(64);
+                        top: px2rem(45);
+                        width: px2rem(99);
+                        height: px2rem(36);
+                        border-radius: px2rem(36);
+                        line-height: px2rem(36);
+                        background: rgba(255, 255, 255, .2);
+                        color: #fff;
+                        text-align: center;
+                        font-size: px2rem(16);
+                        font-weight: 400;
+                    }
+
+                    .title {
+                        width: 100%;
+                        text-align: center;
+                        font-size: px2rem(60);
+                        color: #fff;
+                        font-weight: 600;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(395);
+                    }
+
+                    h3 {
+                        width: 100%;
+                        text-align: center;
+                        font-size: px2rem(44);
+                        color: #fff;
+                        font-weight: 400;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(500);
+                    }
+
+                    .h5Ios {
+                        width: px2rem(333);
+                        height: px2rem(80);
+                        position: absolute;
+                        left: px2rem(550);
+                        top: px2rem(634);
+                    }
+
+                    .h5And {
+                        width: px2rem(333);
+                        height: px2rem(80);
+                        position: absolute;
+                        right: px2rem(550);
+                        top: px2rem(634);
+                    }
+
+                    .team {
+                        width: 100%;
+                        text-align: center;
+                        color: #fff;
+                        opacity: 0.6;
+                        font-size: px2rem(16);
+                        font-weight: 400;
+                        position: absolute;
+                        left: 0;
+                        bottom: px2rem(30);
+                    }
                 }
-            }
 
-            .language {
-                color: #fff;
-                position: absolute;
-                height: 0.5rem;
-                line-height: 0.5rem;
-                right: 1rem;
-                top: .3rem;
-                font-size: px2rem(19);
-                font-weight: bold;
-            }
+                .page2 {
+                    width: 100%;
+                    height: 100%;
+                    background: url(../images/pc2.png) no-repeat center center;
+                    background-size: cover;
+                    position: relative;
 
-            .privacy {
-                color: #fff;
-                position: absolute;
-                height: 0.5rem;
-                line-height: 0.5rem;
-                left: 6.4rem;
-                top: .3rem;
-                width: 3rem;
-            }
+                    .title {
+                        width: 100%;
+                        text-align: center;
+                        font-size: px2rem(60);
+                        color: #fff;
+                        font-weight: 600;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(65);
+                    }
 
-            .pcIos {
-                width: 2.9rem;
-                height: 0.64rem;
-                position: absolute;
-                right: 5rem;
-                top: 5.855rem;
-                // background: url(../images/pcIos.png) no-repeat;
-                // background-size: 100% 100%;
-            }
+                    img {
+                        position: absolute;
+                        width: px2rem(1200);
+                        top: px2rem(200);
+                        left: 50%;
+                        transform: translateX(-50%);
+                    }
+                }
 
-            .pcAnd {
-                width: 2.9rem;
-                height: 0.64rem;
-                position: absolute;
-                right: 5rem;
-                top: 6.79rem;
-                // background: url(../images/pcAnd.png) no-repeat;
-                // background-size: 100% 100%;
-            }
-        }
+                .page3 {
+                    width: 100%;
+                    height: 100%;
+                    background: url(../images/pc3.png) no-repeat center center;
+                    background-size: cover;
+                    position: relative;
 
-        .bootom {
-            width: 100%;
-            position: fixed;
-            left: 0;
-            bottom: 0;
-            background: #0F0B27;
-            text-align: center;
-            color: #fff;
-            padding-bottom: 0.2rem;
-            padding-top: 0.1rem;
+                    .title {
+                        width: 100%;
+                        text-align: center;
+                        font-size: px2rem(60);
+                        color: #fff;
+                        font-weight: 600;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(65);
+                    }
 
-            p {
-                margin-top: 0.1rem;
-                // margin-bottom: 0.1rem;
-                font-size: 0.15rem;
-                color: #fff;
+                    img {
+                        position: absolute;
+                        width: px2rem(1200);
+                        top: px2rem(200);
+                        left: 50%;
+                        transform: translateX(-50%);
+                    }
+                }
 
-                a {
-                    color: #fff;
+                .page4 {
+                    width: 100%;
+                    height: 100%;
+                    background: url(../images/pc4.png) no-repeat center center;
+                    background-size: cover;
+                    position: relative;
+
+                    .title {
+                        width: 100%;
+                        text-align: center;
+                        font-size: px2rem(60);
+                        color: #fff;
+                        font-weight: 600;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(65);
+                    }
+
+                    img {
+                        position: absolute;
+                        width: px2rem(1200);
+                        top: px2rem(200);
+                        left: 50%;
+                        transform: translateX(-50%);
+                    }
                 }
             }
         }
@@ -314,7 +284,7 @@
             width: 100%;
             height: px2rem(90);
             box-sizing: border-box;
-            padding: 0 px2rem(40);
+            padding: 0 px2rem(32);
             margin: px2rem(20) auto 0;
             z-index: 3;
 
@@ -328,6 +298,7 @@
                 left: 50%;
                 transform: translateX(-50%);
                 bottom: 0;
+                display: none;
             }
 
             .logo {
@@ -349,18 +320,18 @@
             .diamound {
                 // width: px2rem(140);
                 padding: 0 px2rem(20);
-                height: px2rem(56);
-                line-height: px2rem(56);
+                height: px2rem(60);
+                line-height: px2rem(60);
                 box-sizing: border-box;
-                border: 1px solid #fff;
+                background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
                 vertical-align: middle;
                 color: #fff;
                 font-size: px2rem(24);
                 float: right;
                 margin-top: px2rem(4);
-                margin-right: px2rem(32);
+                margin-right: px2rem(18);
                 text-align: center;
-                border-radius: px2rem(56);
+                border-radius: px2rem(60);
 
                 img {
                     vertical-align: middle;
@@ -377,15 +348,24 @@
                 height: px2rem(40);
                 display: block;
                 margin-top: px2rem(12);
+                display: none;
             }
 
             .language {
                 float: right;
-                color: #fff;
-                height: px2rem(40);
-                line-height: px2rem(40);
-                margin-top: px2rem(12);
+                width: px2rem(164);
+                height: px2rem(60);
+                border-radius: px2rem(60);
+                line-height: px2rem(60);
+                margin-top: px2rem(4);
                 margin-right: px2rem(20);
+                background: rgba(255, 255, 255, .2);
+                color: #fff;
+                text-align: center;
+
+                b {
+                    font-size: px2rem(24);
+                }
             }
         }
 
@@ -411,6 +391,80 @@
                     background: url(../images/h51.png) no-repeat center;
                     background-size: px2rem(750) 100%;
 
+                    .tab {
+                        width: 70%;
+                        display: flex;
+                        position: absolute;
+                        top: px2rem(160);
+                        height: px2rem(44);
+                        line-height: px2rem(44);
+                        left: 50%;
+                        transform: translateX(-50%);
+                        justify-content: space-evenly;
+
+                        p {
+                            color: #FFFFFF;
+                            opacity: 0.2;
+                            position: relative;
+                            font-size: px2rem(32);
+                            white-space: nowrap;
+
+                            span {
+                                width: px2rem(44);
+                                height: px2rem(10);
+                                border-radius: px2rem(10);
+                                background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+                                position: absolute;
+                                left: 50%;
+                                transform: translateX(-50%);
+                                bottom: px2rem(-20);
+                                font-size: px2rem(32);
+                                font-weight: 500;
+                            }
+                        }
+
+                        .act {
+                            opacity: 1;
+                        }
+                    }
+
+                    .title {
+                        width: 100%;
+                        height: px2rem(84);
+                        text-align: center;
+                        color: #fff;
+                        font-weight: 600;
+                        font-size: px2rem(60);
+                        position: absolute;
+                        top: px2rem(584);
+                        left: 0;
+                    }
+
+                    .tex {
+                        width: px2rem(686);
+                        height: px2rem(112);
+                        line-height: px2rem(56);
+                        position: absolute;
+                        top: px2rem(694);
+                        left: 50%;
+                        transform: translateX(-50%);
+                        color: #fff;
+                        text-align: center;
+                        opacity: 0.6;
+                        font-size: px2rem(40);
+                        font-weight: 400;
+                    }
+
+                    .team {
+                        width: 100%;
+                        left: 0;
+                        bottom: px2rem(82);
+                        text-align: center;
+                        color: #fff;
+                        opacity: 0.8;
+                        position: absolute;
+                    }
+
                     .pageTxte1 {
                         width: px2rem(482);
                         height: px2rem(100);
@@ -428,8 +482,8 @@
                     }
 
                     .downioad {
-                        width: px2rem(414);
-                        height: px2rem(92);
+                        width: px2rem(333);
+                        height: px2rem(80);
                         position: absolute;
                         left: 50%;
                         transform: translateX(-50%);
@@ -453,65 +507,37 @@
                     height: 100%;
                     position: relative;
                     overflow: hidden;
-                    background: url(../images/h51.png) no-repeat center;
+                    background: url(../images/h52.png) no-repeat center;
                     background-size: px2rem(750) 100%;
-                    // display: none;
 
-                    .pageText2 {
-                        width: px2rem(750);
-                        height: px2rem(814);
-                        position: relative;
-                        top: px2rem(258);
-                        margin: 0 auto;
-                        display: block;
-                        display: none;
+                    // display: none;
+                    .title {
+                        width: 100%;
+                        height: px2rem(84);
+                        text-align: center;
+                        color: #fff;
+                        font-weight: 600;
+                        font-size: px2rem(60);
+                        position: absolute;
+                        top: px2rem(230);
+                        left: 0;
                     }
 
-                    .page2_in {
-                        width: px2rem(750);
-                        height: px2rem(874);
+                    .img {
                         position: absolute;
+                        width: px2rem(750);
+                        top: px2rem(358);
                         left: 50%;
                         transform: translateX(-50%);
-                        // bottom: px2rem(194);
-                        top: px2rem(188);
-                    }
-
-                    .pagetx1 {
-                        width: px2rem(476);
-                        height: px2rem(308);
-                        position: absolute;
-                        left: px2rem(234);
-                        top: px2rem(342);
-                        // bottom: px2rem(620);
-                    }
-
-                    .pagetx2 {
-                        width: px2rem(476);
-                        height: px2rem(308);
-                        position: absolute;
-                        left: px2rem(40);
-                        top: px2rem(688);
-                        // bottom: px2rem(300);
                     }
 
                     .downioad {
-                        width: px2rem(414);
-                        height: px2rem(84);
+                        width: px2rem(333);
+                        height: px2rem(80);
                         position: absolute;
                         left: 50%;
                         transform: translateX(-50%);
                         bottom: px2rem(125);
-                        display: block;
-                    }
-
-                    .down {
-                        width: px2rem(38);
-                        height: px2rem(28);
-                        position: absolute;
-                        left: 48%;
-                        // transform: translateX(-50%);
-                        bottom: px2rem(20);
                     }
                 }
 
@@ -520,86 +546,37 @@
                     height: 100%;
                     position: relative;
                     overflow: hidden;
-                    background: url(../images/h51.png) no-repeat center;
+                    background: url(../images/h53.png) no-repeat center;
                     background-size: px2rem(750) 100%;
-                    // display: none;
 
-                    .pageText3 {
-                        width: px2rem(512);
-                        height: px2rem(114);
-                        position: relative;
-                        // left: 50%;
-                        // transform: translateX(-50%);
-                        display: block;
-                        margin: 0 auto;
-                        top: px2rem(210);
-                        display: none;
+                    // display: none;
+                    .title {
+                        width: 100%;
+                        height: px2rem(84);
+                        text-align: center;
+                        color: #fff;
+                        font-weight: 600;
+                        font-size: px2rem(60);
+                        position: absolute;
+                        top: px2rem(230);
+                        left: 0;
                     }
 
-                    .page3_in {
-                        width: px2rem(750);
-                        height: px2rem(874);
+                    .img {
                         position: absolute;
+                        width: px2rem(750);
+                        top: px2rem(358);
                         left: 50%;
                         transform: translateX(-50%);
-                        top: px2rem(188);
-                        // bottom: px2rem(194);
-                    }
-
-                    .page3Icon1 {
-                        width: px2rem(307);
-                        height: px2rem(220);
-                        position: absolute;
-                        left: px2rem(426);
-                        top: px2rem(424);
-                        // bottom: px2rem(648);
-                    }
-
-                    .page3Icon2 {
-                        width: px2rem(324);
-                        height: px2rem(232);
-                        position: absolute;
-                        left: px2rem(0);
-                        top: px2rem(364);
-                        // bottom: px2rem(738);
-                    }
-
-                    .page3Icon3 {
-                        width: px2rem(324);
-                        height: px2rem(232);
-                        position: absolute;
-                        // left: px2rem(440);
-                        right: px2rem(0);
-                        top: px2rem(750);
-                        // bottom: px2rem(376);
-                    }
-
-                    .page3Icon4 {
-                        width: px2rem(284);
-                        height: px2rem(204);
-                        position: absolute;
-                        left: px2rem(0);
-                        top: px2rem(836);
-                        // bottom: px2rem(284);
                     }
 
                     .downioad {
-                        width: px2rem(414);
-                        height: px2rem(84);
+                        width: px2rem(333);
+                        height: px2rem(80);
                         position: absolute;
                         left: 50%;
                         transform: translateX(-50%);
                         bottom: px2rem(125);
-                        display: block;
-                    }
-
-                    .down {
-                        width: px2rem(38);
-                        height: px2rem(28);
-                        position: absolute;
-                        left: 48%;
-                        // transform: translateX(-50%);
-                        bottom: px2rem(20);
                     }
                 }
 
@@ -608,65 +585,37 @@
                     height: 100%;
                     position: relative;
                     overflow: hidden;
-                    background: url(../images/h51.png) no-repeat center;
+                    background: url(../images/h54.png) no-repeat center;
                     background-size: px2rem(750) 100%;
                     // display: none;
 
-                    .pageText4 {
-                        width: px2rem(480);
-                        height: px2rem(114);
-                        position: relative;
-                        top: px2rem(210);
-                        display: block;
-                        margin: 0 auto;
-                        display: none;
+                    .title {
+                        width: 100%;
+                        height: px2rem(84);
+                        text-align: center;
+                        color: #fff;
+                        font-weight: 600;
+                        font-size: px2rem(60);
+                        position: absolute;
+                        top: px2rem(230);
+                        left: 0;
                     }
 
-                    .page4_in {
-                        width: px2rem(750);
-                        height: px2rem(874);
+                    .img {
                         position: absolute;
+                        width: px2rem(750);
+                        top: px2rem(358);
                         left: 50%;
                         transform: translateX(-50%);
-                        top: px2rem(188);
-                        // bottom: px2rem(194);
-                    }
-
-                    .page4Icon1 {
-                        width: px2rem(418);
-                        height: px2rem(384);
-                        position: absolute;
-                        left: px2rem(0);
-                        top: px2rem(384);
-                        // bottom: px2rem(224);
-                    }
-
-                    .page4Icon2 {
-                        width: px2rem(418);
-                        height: px2rem(384);
-                        position: absolute;
-                        right: px2rem(0);
-                        top: px2rem(644);
-                        // bottom: px2rem(224);
                     }
 
                     .downioad {
-                        width: px2rem(414);
-                        height: px2rem(84);
+                        width: px2rem(333);
+                        height: px2rem(80);
                         position: absolute;
                         left: 50%;
                         transform: translateX(-50%);
                         bottom: px2rem(125);
-                        display: block;
-                    }
-
-                    .down {
-                        width: px2rem(38);
-                        height: px2rem(28);
-                        position: absolute;
-                        left: 48%;
-                        // transform: translateX(-50%);
-                        bottom: px2rem(20);
                     }
                 }
 
@@ -800,7 +749,8 @@
                         height: px2rem(56);
                         line-height: px2rem(56);
                         box-sizing: border-box;
-                        border: 1px solid #fff;
+                        // border: 1px solid #fff;
+                        background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
                         vertical-align: middle;
                         color: #fff;
                         font-size: px2rem(24);
@@ -952,7 +902,7 @@
 
     .language_pub_in {
         width: 7.8rem;
-        height: px2rem(480);
+        height: px2rem(540);
         left: 50%;
         top: 50%;
         position: absolute;
@@ -994,5 +944,4 @@
             }
         }
     }
-}
-
+}

view/molistar/home/index.html

@@ -16,28 +16,14 @@
     <meta property="og:image:type" content="image/png">
     <link rel="stylesheet" href="../common/css/reset.css">
     <link rel="stylesheet" href="./css/animate.css">
-    <link rel="stylesheet" href="./css/index.css?v=1.2">
+    <link rel="stylesheet" href="./css/index.css?v=1.22">
 </head>
 
 <body>
     <!-- pc端 -->
     <div class="container pc">
-        <div class="pc-bg">
-            <!-- <img src="./images/homePc.png" alt=""> -->
-            <div class="homePc">
-                <div class="diamound">
-                    <img src="./images/diamond.png" alt=""> <b class="text3"></b>
-                </div>
-                <!-- 隐私政策 -->
-                <a class="privacy" href="../modules/rule/privacy-wap.html"></a>
-                <!-- 语言 -->
-                <div class="language"><b></b> ▼</div>
-                <div class="pcIos"></div>
-                <div class="pcAnd"></div>
-            </div>
-            <div class="bootom">
-                <p>Molistar Team</p>
-            </div>
+        <div class="pagesBox pcText">
+            
         </div>
     </div>
     <!-- h5端 -->
@@ -50,41 +36,28 @@
             <div class="name">MoliStar</div>
             <!-- 更多 -->
             <img src="./images/more.png" alt="" class="more">
+            <!-- 语言 -->
+            <div class="language"><b></b> ▼</div>
             <!-- 儲值 -->
             <div class="diamound">
                 <img src="./images/diamond.png" alt=""> <b class="text3"></b>
             </div>
-            <!-- 语言 -->
-            <div class="language"><b></b> ▼</div>
             <!-- 線 -->
             <div class="line"></div>
 
         </div>
         <div class="pagesBox">
             <!-- 頁面1 -->
-            <div class="pages page1 animate__animated" id="img2">
-
-            </div>
+            <div class="pages page1" id="img2"></div>
 
             <!-- 頁面2 -->
-            <div class="pages page2" id="img3">
-
-            </div>
+            <div class="pages page2" id="img3"></div>
 
             <!-- 頁面3 -->
-            <div class="pages page3" id="img4">
-
-            </div>
+            <div class="pages page3" id="img4"></div>
 
             <!-- 頁面4 -->
-            <div class="pages page4" id="img5">
-
-            </div>
-
-            <!-- 頁面5 -->
-            <div class="pages page5" id="img6">
-
-            </div>
+            <div class="pages page4" id="img5"></div>
         </div>
 
         <!-- 菜單 -->
@@ -155,6 +128,7 @@
                 <li data="zh">中文</li>
                 <li data="en">English</li>
                 <li data="ar">العربية</li>
+                <li data="tr">Türkiye</li>
             </ul>
         </div>
     </div>
@@ -167,7 +141,8 @@
     <script src="./local/ar.js?v=1.0"></script>
     <script src="./local/en.js?v=1.0"></script>
     <script src="./local/zh.js?v=1.0"></script>
-    <script src="./js/index.js?v=2.123"></script>
+    <script src="./local/tr.js?v=1.0"></script>
+    <script src="./js/index.js?v=2.1231"></script>
     <script src="../common/local/langHandler.js"></script>
 </body>
 

view/molistar/home/js/index.js

@@ -40,16 +40,15 @@ $(function () {
     $(document).ready(function () {
         var deviceWidth = document.documentElement.clientWidth;
         if (deviceWidth > 768) {
-            document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
+            document.documentElement.style.fontSize = deviceWidth / 25 + 'px';
         } else {
             // document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
         }
     });
     window.onresize = function () {
         var deviceWidth = document.documentElement.clientWidth;
-        // console.log('deviceWidth', deviceWidth);
         if (deviceWidth > 768) {
-            document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
+            document.documentElement.style.fontSize = deviceWidth / 25 + 'px';
         } else {
             // document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
         }
@@ -93,6 +92,9 @@ $(function () {
         } else if (langCode == 'ar') {
             $('.privacy').css('left', '7.4rem')
             $('.language').html('<b>العربية</b> ▼')
+        } else if (langCode == 'tr') {
+            $('.privacy').css('left', '7.4rem')
+            $('.language').html('<b>Türkiye</b> ▼')
         } else {
             $('.privacy').css('left', '7.4rem')
             $('.language').html('<b>English</b> ▼')
@@ -108,6 +110,9 @@ $(function () {
 })
 
 function translateFun() {
+    var langCode = getQueryString().lang ? getQueryString().lang : getLanguageCode(getUserLanguage());
+    langCode = getLanguageCode(langCode);
+    langCodes = langCode
     var langReplace = window.lang.replace;
     var localLang = window.lang;
     $('.text1').text(langReplace(localLang.demoModule.text1))
@@ -124,10 +129,61 @@ function translateFun() {
     $('#img4').html(langReplace(localLang.demoModule.img4))
     $('#img5').html(langReplace(localLang.demoModule.img5))
     $('#img6').html(langReplace(localLang.demoModule.img6))
+    $('.pcText').html(langReplace(localLang.demoModule.pcText))
+    // 选择语言
+    $('.language').click(function () {
+        $('.language_pub').show();
+    })
+    if (langCode == 'zh') {
+        $('.language').html('<b>中文</b> ▼')
+    } else if (langCode == 'ar') {
+        // $('.privacy').css('left', '7.4rem')
+        $('.language').html('<b>العربية</b> ▼')
+    } else if (langCode == 'tr') {
+        // $('.privacy').css('left', '7.4rem')
+        $('.language').html('<b>Türkiye</b> ▼')
+    } else {
+        // $('.privacy').css('left', '7.4rem')
+        $('.language').html('<b>English</b> ▼')
+    }
+    // 监听滚轮事件
+    var timeInterval = null;
+    var pcIndex = 0;
+    var pcTouchLength = 100;
+    var pcLength = $('body .container .pagesBox .pagesPc').length - 1;
+    window.addEventListener('wheel', function (event) {
+        // 清除上一次的定时器
+        clearTimeout(timeInterval);
 
+        // 设置新的定时器，延迟执行滚动处理
+        timeInterval = setTimeout(function () {
+            // 阻止默认的滚动行为（如果需要）
+            event.preventDefault();
+            // 检测滚动方向
+            if (event.deltaY > 0) {
+                // 向下滚动
+                console.log('向下滚动');
+                if (index > pcLength - 1) {
+                    return;
+                } else {
+                    index = index + 1;
+                    $('body .container .pagesBox').css("transform", `translateY(-${index * pcTouchLength}%)`);
+                    // animatedImplementFun(index);
+                }
+            } else {
+                // 向上滚动
+                console.log('向上滚动');
+                if (index > 0) {
+                    index = index - 1;
+                    $('body .container .pagesBox').css("transform", `translateY(-${index * pcTouchLength}%)`);
+                    // animatedImplementFun(index);
+                }
+            }
+        }, 100);  // 100ms 的延迟，可以根据需要调整
+    }, { passive: false });  // 禁止默认滚动行为
     // pc跳轉充值
-    $('body .pc .header .diamound, html .pc .header .diamound,body .homePc .diamound, html .homePc .diamound').click(function () {
-        window.location = `${urlPrefix}/molistar/modules/payPc/index.html?channelType=4&lang=${langCodes}`
+    $('body .container .pagesBox').on('click', '.page1 .recharge', function () {
+        window.location = `${urlPrefix}/molistar/modules/pay/index.html?channelType=4&lang=${langCodes}`
     })
     // PC蘋果下載按鈕
     $('html .pc .pcIos').click(function () {
@@ -178,6 +234,9 @@ function translateFun() {
             location.href = `../modules/rule/privacy-wap.html`
         }
     })
+    $('html .h5 .pagesBox .page1 .tab .privacy').click(function () {
+        location.href = `../modules/rule/privacy-wap.html`
+    })
     // 關閉聯繫我們彈窗
     $('body .contactUs_pub .contactUs_pub_in .sClose').click(function () {
         $('.contactUs_pub').hide();
@@ -249,7 +308,7 @@ function getConfig() {
                 url = and;
                 $('body .h5 .pagesBox .pages .downioad').attr('src', './images/h5And.png');
             }
-            $('body .h5 .pagesBox .page2 .downioad,body .h5 .pagesBox .page3 .downioad,body .h5 .pagesBox .page4 .downioad').attr('src', './images/downioad.png');
+            // $('body .h5 .pagesBox .page2 .downioad,body .h5 .pagesBox .page3 .downioad,body .h5 .pagesBox .page4 .downioad').attr('src', './images/downioad.png');
             $('.pc-bg').show();
             hideLoading(layerIndex)
             animatedImplementFun(0);
@@ -259,10 +318,13 @@ function getConfig() {
         }
     })
 }
-// 选择语言
-$('.language').click(function () {
-    $('.language_pub').show();
+$('body .container .pagesBox').on('click', '.page1 .h5Ios', function () {
+    window.location.href = ios;
 })
+$('body .container .pagesBox').on('click', '.page1 .h5And', function () {
+    window.location.href = and;
+})
+
 // 关闭语言
 $('.language_pub .language_pub_in .sClose').click(function () {
     $('.language_pub').hide();
@@ -302,7 +364,7 @@ $('body .h5').on('touchend', function (e) {
         } else {
             index = index + 1;
             $('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
-            animatedImplementFun(index);
+            // animatedImplementFun(index);
         }
     }
     //下滑
@@ -310,7 +372,7 @@ $('body .h5').on('touchend', function (e) {
         if (index > 0) {
             index = index - 1;
             $('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
-            animatedImplementFun(index);
+            // animatedImplementFun(index);
         }
     }
 })
@@ -350,14 +412,14 @@ function animatedImplementFun(index) {
 }
 // 處理動畫
 function animatedFun(dom, arrClass) {
-    // 獲取元素
-    const element = dom;
-    // 添加動畫
-    element.addClass(...arrClass);
-    // 監聽動畫結束
-    element[0].addEventListener('animationend', () => {
-        element.removeClass(...arrClass);
-    });
+    // // // 獲取元素
+    // const element = dom;
+    // // 添加動畫
+    // element.addClass(...arrClass);
+    // // 監聽動畫結束
+    // element[0].addEventListener('animationend', () => {
+    //     element.removeClass(...arrClass);
+    // });
 }
 
 // 禁止瀏覽器下拉刷新
@@ -369,6 +431,7 @@ function handleResize() {
     location.reload()
     // 这里可以添加更多的逻辑，比如检查窗口的新尺寸
 }
-
 // 监听窗口大小变化事件
-window.addEventListener('resize', handleResize);
+window.addEventListener('resize', handleResize);
+
+

view/molistar/home/local/ar.js

@@ -2,55 +2,74 @@
 langAr = {
     // 模块
     demoModule: {
-        text1: `MoliStar، اللقاء مع الصوت المؤثر بالقلب بشكل غير متوقع`,
-        text2: `الدردشة، واللعب، وتكوين الصداقات، في أي وقت وفي أي مكان على MoliStar`,
-        text3: `إعادة الشحن`,
+        text1: `MoliStar, لقاء مع الصوت المؤثر بشكل غير متوقع`,
+        text2: `الدردشة، اللعب، تكوين صداقات، في أي وقت، في أي مكان على MoliStar`,
+        text3: `إعادة شحن`,
         text4: `الصفحة الرئيسية`,
         text5: `المحفظة`,
         text6: `اتصل بنا`,
-        text7: `سياسة الخصوصية `,
-        textss: `الرجاء تحديد لغة.`,
+        text7: `سياسة الخصوصية`,
+        textss: `يرجى اختيار اللغة.`,
         homePc: `background:url(./images/pcBgBig-ar.png) no-repeat;background-size:100% 100%;`,
         img2: `
-        <img style="width: 7.42667rem;" src="./images/pageTxte1-ar.png" alt="" class="pageTxte1 animate__animated animate__slow__3s">
-        <img style="width: 7.42667rem;" src="./images/pageTxte2-ar.png" alt="" class="pageTxte2 animate__animated animate__slow__3s">
-        <!-- <img src="./images/h5And-ar.png" alt="" class="h5And animate__animated animate__slow__1.8s"> -->
-        <img style="display: none;" src="" alt="" class="downioad animate__animated animate__slow__1.8s">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow">
+        <div class="tab">
+            <p class="act">الصفحة الرئيسية<span></span></p>
+            <p class="privacy">سياسة الخصوصية</p>
+        </div>
+        <div class="title">انضم إلى MoliStar</div>
+        <div class="tex">استمع إلى الأصوات الجميلة وابحث عن رفقة جديدة</div>
+        <img src="./images/downioad.png" alt="" class="downioad  animate__animated ">
+        <div class="team">فريق Molistar</div>
     `,
         img3: `
-        <img src="./images/pageText2-ar.png" alt="" class="pageText2 animate__animated ">
-        <img src="./images/page2-ar.png" alt="" class="page2_in">
-        <img src="./images/pagetx1-ar.png" alt="" class="pagetx1  animate__animated ">
-        <img src="./images/pagetx2-ar.png" alt="" class="pagetx2  animate__animated ">
-        <img src="./images/downioad-ar.png" alt="" class="downioad  animate__animated ">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow  ">
-    `,
+        <div class="title">انضم إلى MoliStar</div>
+        <img class="img" src="./images/h2img.png" alt="">`,
         img4: `
-        <img src="./images/pageText3-ar.png" alt="" class="pageText3 animate__animated">
-        <img src="./images/page3-ar.png" alt="" class="page3_in">
-        <img src="./images/page3Icon1-ar.png" alt="" class="page3Icon1 animate__animated animate__delay-2s">
-        <img src="./images/page3Icon2-ar.png" alt="" class="page3Icon2 animate__animated animate__delay-1s">
-        <img src="./images/page3Icon3-ar.png" alt="" class="page3Icon3 animate__animated animate__delay-4s">
-        <img src="./images/page3Icon4-ar.png" alt="" class="page3Icon4 animate__animated animate__delay-3s">
-        <img src="./images/downioad-ar.png" alt="" class="downioad animate__animated">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow  ">
-    `,
+        <div class="title">استمتع</div>
+        <img class="img" src="./images/h3img.png" alt="">`,
         img5: `
-        <img src="./images/pageText4-ar.png" alt="" class="pageText4 animate__animated">
-        <img src="./images/page4-ar.png" alt="" class="page4_in">
-        <img src="./images/page4Icon2-ar.png" alt="" class="page4Icon2 animate__animated">
-        <img src="./images/page4Icon1-ar.png" alt="" class="page4Icon1 animate__animated">
-        <img src="./images/downioad-ar.png" alt="" class="downioad animate__animated">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow  ">
-    `,
+        <div class="title">حفلة صوتية</div>
+        <img class="img" src="./images/h4img.png" alt="">`,
         img6: `
-        <img style="width: 6.61333rem;"  src="./images/pageTxte5-ar.png" alt="" class="pageTxte5 animate__animated">
-        <img style="width: 4.62667rem;" src="./images/contactUs-ar.png" alt="" class="contactUs animate__animated">
+        <img style="width: 6.61333rem;" src="./images/pageTxte5-ar.png" alt="" class="pageTxte5 animate__animated">
+        <img style="width: 4.2rem;" src="./images/contactUs-ar.png" alt="" class="contactUs animate__animated">
         <img src="./images/downioad-ar.png" alt="" class="downioad animate__animated">
-        <!-- <img src="./images/down.png" alt="" class="down"> -->
         <div class="bootom">
-            <p>Molistar Team</p>
-        </div>`,
+            <p>فريق Molistar</p>
+        </div>`, pcText: `
+        <div class="page1 pagesPc">
+                <img src="./images/logoPc.png" alt="" class="logoPc">
+                <div class="tab">
+                    <p class="act">الصفحة الرئيسية <span></span></p>
+                    <a href="../modules/rule/privacy-wap.html">
+                        <p class="tex">سياسة الخصوصية</p>
+                    </a>
+                </div>
+
+                <div class="recharge">
+                    <img src="./images/diamond.png" alt=""><span>إعادة شحن</span>
+                </div>
+                <!-- اللغة -->
+                <div class="language"><b></b> ▼</div>
+                <div class="title">انضم إلى MoliStar</div>
+                <h3>استمع إلى الأصوات الجميلة وابحث عن رفقة جديدة</h3>
+                <img src="./images/h5Ios.png" alt="" class="h5Ios">
+                <img src="./images/h5And.png" alt="" class="h5And">
+                <div class="team">Molistar Team</div>
+            </div>
+            <div class="page2 pagesPc">
+                <div class="title">روح مثيرة للاهتمام</div>
+                <img src="./images/pc2img.png" alt="">
+            </div>
+            <div class="page3 pagesPc">
+                <div class="title">استمتع</div>
+                <img src="./images/pc3img.png" alt="">
+            </div>
+            <div class="page4 pagesPc">
+                <div class="title">حفلة صوتية</div>
+                <img src="./images/pc4img.png" alt="">
+            </div>
+        `,
     }
-}
+}
+

view/molistar/home/local/en.js

@@ -11,38 +11,24 @@ langEn = {
         textss: `Please select a language.`,
         homePc: `background:url(./images/pcBgBig-en.png) no-repeat;background-size:100% 100%;`,
         img2: `
-        <img style="width: 7.6rem;" src="./images/pageTxte1-en.png" alt="" class="pageTxte1 animate__animated animate__slow__3s">
-        <img style="width: 8.1rem;" src="./images/pageTxte2-en.png" alt="" class="pageTxte2 animate__animated animate__slow__3s">
-        <!-- <img src="./images/h5And-en.png" alt="" class="h5And animate__animated animate__slow__1.8s"> -->
-        <img style="display: none;" src="" alt="" class="downioad animate__animated animate__slow__1.8s">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow">
+        <div class="tab">
+            <p class="act">Homepage<span></span></p>
+            <p class="privacy">Privacy Policy</p>
+        </div>
+        <div class="title">Join MoliStar</div>
+        <div class="tex">Hear good voices and find new companionship</div>
+        <img src="./images/downioad.png" alt="" class="downioad  animate__animated ">
+        <div class="team">Molistar Team</div>
     `,
         img3: `
-        <img src="./images/pageText2-en.png" alt="" class="pageText2 animate__animated ">
-        <img src="./images/page2-en.png" alt="" class="page2_in">
-        <img src="./images/pagetx1-en.png" alt="" class="pagetx1  animate__animated ">
-        <img src="./images/pagetx2-en.png" alt="" class="pagetx2  animate__animated ">
-        <img src="./images/downioad-en.png" alt="" class="downioad  animate__animated ">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow  ">
-    `,
+        <div class="title">Join MoliStar</div>
+        <img class="img" src="./images/h2img.png" alt="">`,
         img4: `
-        <img src="./images/pageText3-en.png" alt="" class="pageText3 animate__animated">
-        <img src="./images/page3-en.png" alt="" class="page3_in">
-        <img src="./images/page3Icon1-en.png" alt="" class="page3Icon1 animate__animated animate__delay-2s">
-        <img src="./images/page3Icon2-en.png" alt="" class="page3Icon2 animate__animated animate__delay-1s">
-        <img src="./images/page3Icon3-en.png" alt="" class="page3Icon3 animate__animated animate__delay-4s">
-        <img src="./images/page3Icon4-en.png" alt="" class="page3Icon4 animate__animated animate__delay-3s">
-        <img src="./images/downioad-en.png" alt="" class="downioad animate__animated">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow  ">
-    `,
+        <div class="title">Have Fun</div>
+        <img class="img" src="./images/h3img.png" alt="">`,
         img5: `
-        <img src="./images/pageText4-en.png" alt="" class="pageText4 animate__animated">
-        <img src="./images/page4-en.png" alt="" class="page4_in">
-        <img src="./images/page4Icon2-en.png" alt="" class="page4Icon2 animate__animated">
-        <img src="./images/page4Icon1-en.png" alt="" class="page4Icon1 animate__animated">
-        <img src="./images/downioad-en.png" alt="" class="downioad animate__animated">
-        <img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow  ">
-    `,
+        <div class="title">Voice Party</div>
+        <img class="img" src="./images/h4img.png" alt="">`,
         img6: `
         <img style="width: 6.61333rem;" src="./images/pageTxte5-en.png" alt="" class="pageTxte5 animate__animated">
         <img style="width: 4.2rem;" src="./images/contactUs-en.png" alt="" class="contactUs animate__animated">
@@ -51,5 +37,39 @@ langEn = {
         <div class="bootom">
             <p>Molistar Team</p>
         </div>`,
+        pcText: `
+        <div class="page1 pagesPc">
+                <img src="./images/logoPc.png" alt="" class="logoPc">
+                <div class="tab">
+                    <p class="act">Homepage <span></span></p>
+                    <a href="../modules/rule/privacy-wap.html">
+                        <p class="tex">Privacy Policy</p>
+                    </a>
+                </div>
+
+                <div class="recharge">
+                    <img src="./images/diamond.png" alt=""><span>Recharge</span>
+                </div>
+                <!-- 语言 -->
+                <div class="language"><b></b> ▼</div>
+                <div class="title">Join MoliStar</div>
+                <h3>Hear good voices and find new companionship</h3>
+                <img src="./images/h5Ios.png" alt="" class="h5Ios">
+                <img src="./images/h5And.png" alt="" class="h5And">
+                <div class="team">Molistar Team</div>
+            </div>
+            <div class="page2 pagesPc">
+                <div class="title">Interesting Soul</div>
+                <img src="./images/pc2img.png" alt="">
+            </div>
+            <div class="page3 pagesPc">
+                <div class="title">Have Fun</div>
+                <img src="./images/pc3img.png" alt="">
+            </div>
+            <div class="page4 pagesPc">
+                <div class="title">Voice Party</div>
+                <img src="./images/pc4img.png" alt="">
+            </div>
+        `,
     }
 }

view/molistar/home/local/tr.js

@@ -0,0 +1,75 @@
+// 英文
+langTr = {
+    demoModule: {
+        text1: `MoliStar, kalp kırıcı sesle beklenmedik bir karşılaşma`,
+        text2: `Sohbet et, oyun oyna, arkadaşlar edin, MoliStar'da her zaman, her yerde`,
+        text3: `Yükle`,
+        text4: `Anasayfa`,
+        text5: `Cüzdan`,
+        text6: `Bize Ulaşın`,
+        text7: `Gizlilik Politikası`,
+        textss: `Lütfen bir dil seçin.`,
+        homePc: `background:url(./images/pcBgBig-tr.png) no-repeat;background-size:100% 100%;`,
+        img2: `
+        <div class="tab">
+            <p class="act">Anasayfa<span></span></p>
+            <p class="privacy">Gizlilik Politikası</p>
+        </div>
+        <div class="title">MoliStar'a Katıl</div>
+        <div class="tex">İyi sesler dinleyin ve yeni bir arkadaşlık bulun</div>
+        <img src="./images/downioad.png" alt="" class="downioad  animate__animated ">
+        <div class="team">Molistar Ekibi</div>
+    `,
+        img3: `
+        <div class="title">MoliStar'a Katıl</div>
+        <img class="img" src="./images/h2img.png" alt="">`,
+        img4: `
+        <div class="title">Eğlen</div>
+        <img class="img" src="./images/h3img.png" alt="">`,
+        img5: `
+        <div class="title">Sesli Parti</div>
+        <img class="img" src="./images/h4img.png" alt="">`,
+        img6: `
+        <img style="width: 6.61333rem;" src="./images/pageTxte5-tr.png" alt="" class="pageTxte5 animate__animated">
+        <img style="width: 4.2rem;" src="./images/contactUs-tr.png" alt="" class="contactUs animate__animated">
+        <img src="./images/downioad-tr.png" alt="" class="downioad animate__animated">
+        <div class="bootom">
+            <p>Molistar Ekibi</p>
+        </div>`,
+        pcText: `
+            <div class="page1 pagesPc">
+                    <img src="./images/logoPc.png" alt="" class="logoPc">
+                    <div class="tab">
+                        <p class="act">Anasayfa <span></span></p>
+                        <a href="../modules/rule/privacy-wap.html">
+                            <p class="tex">Gizlilik Politikası</p>
+                        </a>
+                    </div>
+    
+                    <div class="recharge">
+                        <img src="./images/diamond.png" alt=""><span>Yükle</span>
+                    </div>
+                    <!-- Dil -->
+                    <div class="language"><b></b> ▼</div>
+                    <div class="title">MoliStar'a Katıl</div>
+                    <h3>İyi sesler dinleyin ve yeni bir arkadaşlık bulun</h3>
+                    <img src="./images/h5Ios.png" alt="" class="h5Ios">
+                    <img src="./images/h5And.png" alt="" class="h5And">
+                    <div class="team">Molistar Team</div>
+                </div>
+                <div class="page2 pagesPc">
+                    <div class="title">İlginç Ruh</div>
+                    <img src="./images/pc2img.png" alt="">
+                </div>
+                <div class="page3 pagesPc">
+                    <div class="title">Eğlen</div>
+                    <img src="./images/pc3img.png" alt="">
+                </div>
+                <div class="page4 pagesPc">
+                    <div class="title">Sesli Parti</div>
+                    <img src="./images/pc4img.png" alt="">
+                </div>
+            `,
+    },
+
+}