更改时间字段

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/css/index.css

@@ -127,7 +127,10 @@ body {
 }
 
 .lastWeek .top .top1 .name {
-  width: 100%;
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 0.34667rem;
   font-size: 0.37333rem;
   color: #FDF565;
@@ -172,7 +175,10 @@ body {
 }
 
 .lastWeek .top .top2 .name {
-  width: 100%;
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 0.34667rem;
   font-size: 0.37333rem;
   color: #FDF565;
@@ -217,7 +223,10 @@ body {
 }
 
 .lastWeek .top .top3 .name {
-  width: 100%;
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 0.34667rem;
   font-size: 0.37333rem;
   color: #FDF565;
@@ -411,7 +420,10 @@ body {
 }
 
 .page1 .thisWeek .top .top1 .name {
-  width: 100%;
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 0.34667rem;
   font-size: 0.37333rem;
   color: #FDF565;
@@ -456,7 +468,10 @@ body {
 }
 
 .page1 .thisWeek .top .top2 .name {
-  width: 100%;
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 0.34667rem;
   font-size: 0.37333rem;
   color: #FDF565;
@@ -501,7 +516,10 @@ body {
 }
 
 .page1 .thisWeek .top .top3 .name {
-  width: 100%;
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   height: 0.34667rem;
   font-size: 0.37333rem;
   color: #FDF565;

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

@@ -128,7 +128,10 @@ body {
             }
 
             .name {
-                width: 100%;
+                width: 90%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
                 height: px2rem(26);
                 font-size: px2rem(28);
                 color: #FDF565;
@@ -173,7 +176,10 @@ body {
             }
 
             .name {
-                width: 100%;
+                width: 90%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
                 height: px2rem(26);
                 font-size: px2rem(28);
                 color: #FDF565;
@@ -218,7 +224,10 @@ body {
             }
 
             .name {
-                width: 100%;
+                width: 90%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
                 height: px2rem(26);
                 font-size: px2rem(28);
                 color: #FDF565;
@@ -411,7 +420,10 @@ body {
                 }
 
                 .name {
-                    width: 100%;
+                    width: 90%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                     height: px2rem(26);
                     font-size: px2rem(28);
                     color: #FDF565;
@@ -456,7 +468,10 @@ body {
                 }
 
                 .name {
-                    width: 100%;
+                    width: 90%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                     height: px2rem(26);
                     font-size: px2rem(28);
                     color: #FDF565;
@@ -501,7 +516,10 @@ body {
                 }
 
                 .name {
-                    width: 100%;
+                    width: 90%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                     height: px2rem(26);
                     font-size: px2rem(28);
                     color: #FDF565;

view/molistar/activity/customizedGift/index.html

@@ -253,5 +253,5 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
-<script src="./js/index.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

@@ -177,7 +177,7 @@ function giftRank() {
                 // 处理自己
                 $('.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.text5) + unitProcessingAr(res.data.myRank.totalNum, 1));
+                $('.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();
@@ -190,7 +190,7 @@ function giftRank() {
                             <img src="${res.avatar}" alt="" class="tx">
                             <span>${res.name}</span>
                             <div class="giftInfo">
-                                <p>${langReplace(localLang.demoModule.text5)}${unitProcessingAr(res.totalNum, 1)}</p>
+                                <p>${langReplace(localLang.demoModule.text6)}${unitProcessingAr(res.totalNum, 1)}</p>
                                 <b>${langReplace(localLang.demoModule.text25)}${unitProcessingAr(res.totalGoldNum, 1)}</b>
                             </div>
                         </li>

view/molistar/common/local/langHandler.js

@@ -34,7 +34,7 @@ function initLocalLang() {
         window.lang.code = 'id'
         window.lang.defaults = false
     } else if (lang === 'tr' || window.location.href.match('=tr')) {
-        if (window.location.href.match('guild-ar')) {
+        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

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>
+            `,
+    },
+
+}

view/molistar/home/local/zh.js

@@ -2,52 +2,75 @@
 langZh = {
     // 模块
     demoModule: {
-        text1: `MoliStar，與心動聲音不期而遇`,
-        text2: `聊天玩遊戲交朋友，隨時隨地在MoliStar`,
-        text3: `儲值`,
+        text1: `MoliStar，與觸動心靈的聲音意外相遇`,
+        text2: `聊天、玩遊戲、交朋友，在 MoliStar 隨時隨地`,
+        text3: `充值`,
         text4: `首頁`,
         text5: `錢包`,
         text6: `聯繫我們`,
-        text7: `隱私政策 `,
-        textss: `请选择语言`,
-        homePc: `background:url(./images/pcBgBig.png) no-repeat;background-size:100% 100%;`,
+        text7: `隱私政策`,
+        textss: `請選擇語言。`,
+        homePc: `background:url(./images/pcBgBig-zh.png) no-repeat;background-size:100% 100%;`,
         img2: `
-            <img src="./images/pageTxte1.png" alt="" class="pageTxte1 animate__animated animate__slow__3s">
-            <img src="./images/pageTxte2.png" alt="" class="pageTxte2 animate__animated animate__slow__3s">
-            <!-- <img src="./images/h5And.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.png" alt="" class="pageText2 animate__animated ">
-            <img src="./images/page2.png" alt="" class="page2_in">
-            <img src="./images/pagetx1.png" alt="" class="pagetx1  animate__animated ">
-            <img src="./images/pagetx2.png" alt="" class="pagetx2  animate__animated ">
-            <img src="./images/downioad.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.png" alt="" class="pageText3 animate__animated">
-            <img src="./images/page3.png" alt="" class="page3_in">
-            <img src="./images/page3Icon1.png" alt="" class="page3Icon1 animate__animated animate__delay-2s">
-            <img src="./images/page3Icon2.png" alt="" class="page3Icon2 animate__animated animate__delay-1s">
-            <img src="./images/page3Icon3.png" alt="" class="page3Icon3 animate__animated animate__delay-4s">
-            <img src="./images/page3Icon4.png" alt="" class="page3Icon4 animate__animated animate__delay-3s">
-            <img src="./images/downioad.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.png" alt="" class="pageText4 animate__animated">
-            <img src="./images/page4.png" alt="" class="page4_in">
-            <img src="./images/page4Icon2.png" alt="" class="page4Icon2 animate__animated">
-            <img src="./images/page4Icon1.png" alt="" class="page4Icon1 animate__animated">
-            <img src="./images/downioad.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 src="./images/pageTxte5.png" alt="" class="pageTxte5 animate__animated">
-            <img src="./images/contactUs.png" alt="" class="contactUs animate__animated">
-            <img src="./images/downioad.png" alt="" class="downioad animate__animated">
-            <!-- <img src="./images/down.png" alt="" class="down"> -->
-            <div class="bootom">
-                <p>Molistar Team</p>
-            </div>`,
-    }
+        <img style="width: 6.61333rem;" src="./images/pageTxte5-zh.png" alt="" class="pageTxte5 animate__animated">
+        <img style="width: 4.2rem;" src="./images/contactUs-zh.png" alt="" class="contactUs animate__animated">
+        <img src="./images/downioad-zh.png" alt="" class="downioad animate__animated">
+        <div class="bootom">
+            <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/modules/guild-ar/BANK_TRANSFER_LIRA.html

@@ -0,0 +1,66 @@
+<!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/BANK.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back3.png" alt="">
+        <b class="text1"></b>
+    </div>
+    <!-- 账户信息 -->
+    <div class="box currencyType">
+        <input type="text" disabled placeholder="Currency Type:USD" class="text6">
+        <!-- <img src="./images/right.png" alt="" class="right"> -->
+    </div>
+    <p class="p "><span>*</span> <b class="p1"></b></p>
+    <div class="box country">
+        <input type="text" readonly placeholder="Country" class="text7">
+        <img src="./images/right.png" alt="" class="right">
+    </div>
+    <p class="p "><span>*</span> <b class="p7"></b></p>
+    <div class="box payeeAccountNo">
+        <input type="text" placeholder="payeeAccountNo" class="text8">
+    </div>
+    <p class="p 5"><span>*</span> <b class="p5"></b></p>
+    <div class="box payeeName">
+        <input type="text" placeholder="payeeName" class="text9"
+            onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+        <!-- 确认按钮 -->
+        <div class="ok text2"></div>
+        <!-- 解绑按钮 -->
+        <div class="determine text3"></div>
+    </div>
+    <!-- 选择弹窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <div class="title text4"></div>
+            <div class="soure text5"></div>
+            <div class="countryPub"></div>
+        </div>
+    </div>
+</body>
+<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="./local/tr.js"></script>
+<script src="./js/bankTransferLira.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+
+</html>

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

@@ -0,0 +1,66 @@
+<!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/BANK.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back3.png" alt="">
+        <b class="text1"></b>
+    </div>
+    <!-- 账户信息 -->
+    <div class="box currencyType">
+        <input type="text" disabled placeholder="Currency Type:USD" class="text6">
+        <!-- <img src="./images/right.png" alt="" class="right"> -->
+    </div>
+    <p class="p "><span>*</span> <b class="p1"></b></p>
+    <div class="box country">
+        <input type="text" readonly placeholder="Country" class="text7">
+        <img src="./images/right.png" alt="" class="right">
+    </div>
+    <p class="p "><span>*</span> <b class="p7"></b></p>
+    <div class="box payeeAccountNo">
+        <input type="text" placeholder="payeeAccountNo" class="text8">
+    </div>
+    <p class="p 5"><span>*</span> <b class="p5"></b></p>
+    <div class="box payeeName">
+        <input type="text" placeholder="payeeName" class="text9"
+            onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+        <!-- 确认按钮 -->
+        <div class="ok text2"></div>
+        <!-- 解绑按钮 -->
+        <div class="determine text3"></div>
+    </div>
+    <!-- 选择弹窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <div class="title text4"></div>
+            <div class="soure text5"></div>
+            <div class="countryPub"></div>
+        </div>
+    </div>
+</body>
+<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="./local/tr.js"></script>
+<script src="./js/CARD_USD.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+
+</html>

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

@@ -0,0 +1,81 @@
+<!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/createGuild.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/backB.png" alt="">
+        <b class="text1"></b>
+    </div>
+    <!-- 我的信息 -->
+    <div class="myInfo">
+        <img src="./images/logo.png" alt="" class="tx">
+        <p></p>
+        <b></b>
+    </div>
+    <!-- 公会信息 -->
+    <div class="info">
+        <input class="agencyAvatarInput" type="file" id="backImageUpload" accept="image/*" onchange="fileChangeF(event)"
+            class="upload" style="opacity: 0;">
+        <img src="./images/createGuildNull.png" alt="" class="agencyAvatar">
+        <p class="p1"><strong class="text2"></strong><b>*</b></p>
+        <div class="agencyName">
+            <div class="left"><strong class="text3"></strong><b>*</b></div>
+            <input class="right placeholder" type="text" placeholder="">
+        </div>
+        <div class="agentContactInfo">
+            <div class="left"><strong class="text4"></strong><b>*</b></div>
+            <input class="right placeholder" type="text" placeholder="">
+        </div>
+        <div class="agentIDCard"><strong class="text5"></strong><b>*</b></div>
+        <input class="agentIDCardImgInput" type="file" id="backImageUpload2" accept="image/*"
+            onchange="fileChangeF2(event)" class="upload" style="opacity: 0;">
+        <img src="./images/createGuildNull.png" alt="" class="agentIDCardImg">
+    </div>
+    <!-- 邀请人信息 -->
+    <div class="inviterInfo">
+        <div class="InviterId">
+            <div class="left"><strong class="text6"></strong></div>
+            <input class="right placeholder" type="text" placeholder="">
+        </div>
+        <div class="inviterPic"><strong class="text7"></strong></div>
+        <input class="inviterPicImgInput" type="file" id="backImageUpload3" accept="image/*"
+            onchange="fileChangeF3(event)" class="upload" style="opacity: 0;">
+        <img src="./images/createGuildNull.png" alt="" class="inviterPicImg">
+    </div>
+    <!-- 按钮 -->
+    <div class="butBox">Submit</div>
+    <div class="null"></div>
+    <!-- 提交成功弹窗 -->
+    <div class="submitSuccessfully">
+        <div class="submitSuccessfully_in">
+            <div class="title text8"></div>
+            <p class="text9"></p>
+            <div class="but text10"></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="./local/tr.js"></script>
+<script src="./js/cos-js-sdk-v5.min.js"></script>
+<script src="./js/createGuild.js"></script>
+<script src="../../common/local/langHandler.js"></script>

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

@@ -0,0 +1,369 @@
+html,
+body {
+  width: 100%;
+  height: 17.78667rem;
+  background: #FFFFFF;
+}
+
+.back {
+  width: 100%;
+  height: 2.38667rem;
+  line-height: 3.2rem;
+  position: fixed;
+  left: 0;
+  top: 0rem;
+  text-align: center;
+  color: #333333;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  z-index: 10;
+  background: #fff;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 58%;
+}
+
+.myInfo {
+  width: 9.14667rem;
+  height: 2.13333rem;
+  background: #F7F7F7;
+  border-radius: 0.26667rem;
+  margin: 2.6rem auto 0.42667rem;
+  position: relative;
+}
+
+.myInfo .tx {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: absolute;
+  left: 0.32rem;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 50%;
+}
+
+.myInfo p {
+  width: 4.5rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #313131;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  position: absolute;
+  top: 0.50667rem;
+  left: 2.18667rem;
+}
+
+.myInfo b {
+  color: #7B7B7D;
+  font-weight: 400;
+  position: absolute;
+  left: 2.18667rem;
+  top: 1.17333rem;
+  font-size: 0.34667rem;
+}
+
+.info {
+  width: 9.14667rem;
+  height: 11.6rem;
+  background: #F7F7F7;
+  border-radius: 0.26667rem;
+  margin: 0 auto 0.42667rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.info .agencyAvatar {
+  width: 3.01333rem;
+  height: 3.01333rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.info .agencyAvatarInput {
+  width: 3.01333rem;
+  height: 3.01333rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.info .p1 {
+  width: 100%;
+  top: 3.62667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #313131;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  text-align: center;
+}
+
+.info .p1 b {
+  color: #FF2C2C;
+}
+
+.info .agencyName {
+  width: 100%;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  border-bottom: 0.01333rem solid #D6D6D6;
+  margin-top: 4.34667rem;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.info .agencyName .left {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.info .agencyName .left b {
+  color: #FF2C2C;
+}
+
+.info .agencyName input {
+  background: none;
+  outline: none;
+  border: none;
+  text-align: right;
+  width: 5rem;
+}
+
+.info .agentContactInfo {
+  width: 100%;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  border-bottom: 0.01333rem solid #D6D6D6;
+  margin-top: 0rem;
+  margin: 0 auto 0.4rem;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.info .agentContactInfo .left {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.info .agentContactInfo .left b {
+  color: #FF2C2C;
+}
+
+.info .agentContactInfo input {
+  background: none;
+  outline: none;
+  border: none;
+  text-align: right;
+  width: 5rem;
+}
+
+.info .agentIDCard {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  margin-bottom: 0.32rem;
+  white-space: nowrap;
+}
+
+.info .agentIDCard b {
+  color: #FF2C2C;
+}
+
+.info .agentIDCardImg {
+  width: 2.93333rem;
+  height: 2.93333rem;
+  display: inline-block;
+  margin: 0 0.32rem;
+}
+
+.info .agentIDCardImgInput {
+  width: 2.93333rem;
+  height: 2.93333rem;
+  display: inline-block;
+  left: 0.3rem;
+  z-index: 2;
+  position: absolute;
+}
+
+.inviterInfo {
+  width: 9.14667rem;
+  height: 5.92rem;
+  border-radius: 0.26667rem;
+  background: #F7F7F7;
+  margin: 0 auto 0.21333rem;
+}
+
+.inviterInfo .InviterId {
+  width: 100%;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  border-bottom: 0.01333rem solid #D6D6D6;
+  margin-top: 0rem;
+  margin: 0 auto 0.4rem;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.inviterInfo .InviterId .left {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.inviterInfo .InviterId .left b {
+  color: #FF2C2C;
+}
+
+.inviterInfo .InviterId input {
+  background: none;
+  outline: none;
+  border: none;
+  text-align: right;
+  width: 5rem;
+}
+
+.inviterInfo .inviterPic {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  margin-bottom: 0.32rem;
+}
+
+.inviterInfo .inviterPicImg {
+  width: 2.93333rem;
+  height: 2.93333rem;
+  display: inline-block;
+  margin: 0 0.32rem;
+}
+
+.inviterInfo .inviterPicImgInput {
+  width: 2.93333rem;
+  height: 2.93333rem;
+  display: inline-block;
+  left: 0.8rem;
+  z-index: 2;
+  position: absolute;
+}
+
+.butBox {
+  width: 8.85333rem;
+  height: 1.22667rem;
+  line-height: 1.22667rem;
+  text-align: center;
+  color: #fff;
+  background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+  margin: 0 auto 0;
+  border-radius: 1.22667rem;
+}
+
+.null {
+  height: 0.26667rem;
+}
+
+.submitSuccessfully {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+
+.submitSuccessfully .submitSuccessfully_in {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 7.73333rem;
+  background: #fff;
+  border-radius: 0.42667rem;
+  padding: 0.37333rem 0.61333rem 0.48rem;
+}
+
+.submitSuccessfully .submitSuccessfully_in .title {
+  color: #313131;
+  font-size: 0.4rem;
+  font-weight: 500;
+  height: 0.56rem;
+  line-height: 0.56rem;
+  margin: 0rem auto 0.32rem;
+  text-align: center;
+}
+
+.submitSuccessfully .submitSuccessfully_in p {
+  width: 100%;
+  color: #313131;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  line-height: 0.48rem;
+}
+
+.submitSuccessfully .submitSuccessfully_in .but {
+  width: 6.50667rem;
+  height: 0.96rem;
+  line-height: 0.96rem;
+  text-align: center;
+  border-radius: 0.96rem;
+  margin: 0.32rem auto 0;
+  color: #fff;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+}
+
+.arabic .info .agentIDCardImgInput {
+  left: auto;
+  right: 0.3rem;
+}
+
+.arabic .inviterInfo .inviterPicImgInput {
+  left: auto;
+  right: 0.8rem;
+}
+
+.arabic .myInfo .tx {
+  left: auto;
+  right: 0.32rem;
+}
+
+.arabic .myInfo b {
+  left: auto;
+  right: 2.18667rem;
+}
+
+.arabic .info .agencyName input,
+.arabic .info .agentContactInfo input,
+.arabic .inviterInfo .InviterId input {
+  text-align: left;
+}

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

@@ -0,0 +1,375 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    height: px2rem(1334);
+    background: #FFFFFF;
+
+}
+
+.back {
+    width: 100%;
+    height: px2rem(179);
+    line-height: px2rem(240);
+    position: fixed;
+    left: 0;
+    top: px2rem(0);
+    text-align: center;
+    color: #333333;
+    font-size: px2rem(34);
+    font-weight: bold;
+    z-index: 10;
+    background: #fff;
+    // background: url(../images/topBg.png) no-repeat top;
+    // background-size: 100% 7rem;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: 58%;
+    }
+}
+
+.myInfo {
+    width: px2rem(686);
+    height: px2rem(160);
+    background: #F7F7F7;
+    border-radius: px2rem(20);
+    margin: 2.6rem auto px2rem(32);
+    position: relative;
+
+    .tx {
+        width: px2rem(120);
+        height: px2rem(120);
+        position: absolute;
+        left: px2rem(24);
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: 50%;
+    }
+
+    p {
+        width: 4.5rem;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: #313131;
+        font-size: px2rem(32);
+        font-weight: 500;
+        position: absolute;
+        top: px2rem(38);
+        left: px2rem(164);
+    }
+
+    b {
+        color: #7B7B7D;
+        font-weight: 400;
+        position: absolute;
+        left: px2rem(164);
+        top: px2rem(88);
+        font-size: px2rem(26);
+    }
+}
+
+.info {
+    width: px2rem(686);
+    height: px2rem(870);
+    background: #F7F7F7;
+    border-radius: px2rem(20);
+    margin: 0 auto px2rem(32);
+    position: relative;
+    overflow: hidden;
+
+    .agencyAvatar {
+        width: px2rem(226);
+        height: px2rem(226);
+        position: absolute;
+        top: px2rem(30);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .agencyAvatarInput {
+        width: px2rem(226);
+        height: px2rem(226);
+        position: absolute;
+        top: px2rem(30);
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+    }
+
+    .p1 {
+        width: 100%;
+        top: px2rem(272);
+        left: 50%;
+        transform: translateX(-50%);
+        color: #313131;
+        font-size: px2rem(24);
+        font-weight: 500;
+        position: absolute;
+        text-align: center;
+
+        b {
+            color: #FF2C2C;
+        }
+    }
+
+    .agencyName {
+        width: 100%;
+        height: px2rem(100);
+        line-height: px2rem(100);
+        border-bottom: px2rem(1) solid #D6D6D6;
+        margin-top: px2rem(326);
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            color: #313131;
+            font-size: px2rem(28);
+            font-weight: 500;
+            white-space: nowrap;
+            b {
+                color: #FF2C2C;
+            }
+        }
+
+        input {
+            background: none;
+            outline: none;
+            border: none;
+            text-align: right;
+            width: 5rem;
+        }
+    }
+
+    .agentContactInfo {
+        width: 100%;
+        height: px2rem(100);
+        line-height: px2rem(100);
+        border-bottom: px2rem(1) solid #D6D6D6;
+        margin-top: px2rem(0);
+        margin: 0 auto px2rem(30);
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            color: #313131;
+            font-size: px2rem(28);
+            font-weight: 500;
+            white-space: nowrap;
+            b {
+                color: #FF2C2C;
+            }
+        }
+
+        input {
+            background: none;
+            outline: none;
+            border: none;
+            text-align: right;
+            width: 5rem;
+        }
+    }
+
+    .agentIDCard {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+        color: #313131;
+        font-size: px2rem(28);
+        font-weight: 500;
+        margin-bottom: px2rem(24);
+        white-space: nowrap;
+        b {
+            color: #FF2C2C;
+        }
+    }
+
+    .agentIDCardImg {
+        width: px2rem(220);
+        height: px2rem(220);
+        display: inline-block;
+        margin: 0 px2rem(24);
+    }
+
+    .agentIDCardImgInput {
+        width: px2rem(220);
+        height: px2rem(220);
+        display: inline-block;
+        left: 0.3rem;
+        z-index: 2;
+        position: absolute;
+    }
+}
+
+.inviterInfo {
+    width: px2rem(686);
+    height: px2rem(444);
+    border-radius: px2rem(20);
+    background: #F7F7F7;
+    margin: 0 auto px2rem(16);
+
+    .InviterId {
+        width: 100%;
+        height: px2rem(100);
+        line-height: px2rem(100);
+        border-bottom: px2rem(1) solid #D6D6D6;
+        margin-top: px2rem(0);
+        margin: 0 auto px2rem(30);
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            color: #313131;
+            font-size: px2rem(28);
+            font-weight: 500;
+            white-space: nowrap;
+            b {
+                color: #FF2C2C;
+            }
+        }
+
+        input {
+            background: none;
+            outline: none;
+            border: none;
+            text-align: right;
+            width: 5rem;
+        }
+    }
+
+    .inviterPic {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+        color: #313131;
+        font-size: px2rem(28);
+        font-weight: 500;
+        margin-bottom: px2rem(24);
+    }
+
+    .inviterPicImg {
+        width: px2rem(220);
+        height: px2rem(220);
+        display: inline-block;
+        margin: 0 px2rem(24);
+    }
+
+    .inviterPicImgInput {
+        width: px2rem(220);
+        height: px2rem(220);
+        display: inline-block;
+        left: 0.8rem;
+        z-index: 2;
+        position: absolute;
+    }
+}
+
+.butBox {
+    width: px2rem(664);
+    height: px2rem(92);
+    line-height: px2rem(92);
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+    margin: 0 auto 0;
+    border-radius: px2rem(92);
+}
+
+.null {
+    height: px2rem(20);
+}
+
+.submitSuccessfully {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    background: rgba(0, 0, 0, .5);
+    display: none;
+
+    .submitSuccessfully_in {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: px2rem(580);
+        // height: px2rem(406);
+        background: #fff;
+        border-radius: px2rem(32);
+        padding: px2rem(28) px2rem(46) px2rem(36);
+
+        .title {
+            color: #313131;
+            font-size: px2rem(30);
+            font-weight: 500;
+            height: px2rem(42);
+            line-height: px2rem(42);
+            margin: px2rem(0) auto px2rem(24);
+            text-align: center;
+        }
+
+        p {
+            width: 100%;
+            color: #313131;
+            font-size: px2rem(26);
+            font-weight: 400;
+            line-height: px2rem(36);
+        }
+
+        .but {
+            width: px2rem(488);
+            height: px2rem(72);
+            line-height: px2rem(72);
+            text-align: center;
+            border-radius: px2rem(72);
+            margin: px2rem(24) auto 0;
+            color: #fff;
+            font-size: px2rem(28);
+            font-weight: 500;
+            background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+        }
+    }
+}
+
+.arabic {
+    .info .agentIDCardImgInput {
+        left: auto;
+        right: 0.3rem;
+    }
+
+    .inviterInfo .inviterPicImgInput {
+        left: auto;
+        right: 0.8rem;
+    }
+
+    .myInfo .tx {
+        left: auto;
+        right: 0.32rem;
+    }
+
+    .myInfo b {
+        left: auto;
+        right: 2.18667rem;
+    }
+
+    .info .agencyName input,
+    .info .agentContactInfo input,
+    .inviterInfo .InviterId input {
+        text-align: left;
+    }
+}

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

@@ -2,7 +2,7 @@ html,
 body {
   width: 100%;
   height: 17.78667rem;
-  background: #F5F7F9;
+  background: #FFFFFF;
 }
 
 .back {
@@ -17,8 +17,7 @@ body {
   font-size: 0.45333rem;
   font-weight: bold;
   z-index: 10;
-  background: url(../images/topBg.png) no-repeat top;
-  background-size: 100% 7rem;
+  background: #fff;
 }
 
 .back img {
@@ -30,16 +29,17 @@ body {
 }
 
 .top {
-  width: 9.25333rem;
-  height: 1.18667rem;
-  line-height: 0.78667rem;
-  background: #fff;
-  border-radius: 0.26667rem 0.26667rem 0 0;
+  width: 9.2rem;
+  height: 0.90667rem;
+  line-height: 0.90667rem;
+  background: #F7F7F7;
+  border-radius: 0.90667rem;
   margin: 2.5rem auto 0;
   color: #333;
   font-size: 0.42667rem;
   box-sizing: border-box;
   padding: 0 0.4rem;
+  position: relative;
 }
 
 .top .left {
@@ -48,21 +48,41 @@ body {
   float: left;
 }
 
+.top input {
+  width: 8.13333rem;
+  height: 0.90667rem;
+  background: none;
+  position: absolute;
+  left: 0.98667rem;
+  top: 0;
+  font-size: 0.37333rem;
+  border: none;
+  outline: none;
+  color: #313131;
+}
+
+.top input::placeholder {
+  color: #AFB1B3;
+}
+
 .top img {
-  float: right;
-  display: block;
-  width: 0.58667rem;
-  height: 0.58667rem;
-  margin-top: 0.33333rem;
+  position: absolute;
+  left: 0.32rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.53333rem;
+  height: 0.53333rem;
 }
 
 ul {
   width: 9.25333rem;
   height: 16.81333rem;
   overflow-y: scroll;
-  margin: 0 auto;
+  margin: 0.53333rem auto 0;
   border-radius: 0 0 0.26667rem 0.26667rem;
   background: #fff;
+  padding-top: 0.26667rem;
+  box-sizing: border-box;
 }
 
 ul::-webkit-scrollbar {
@@ -70,119 +90,122 @@ ul::-webkit-scrollbar {
 }
 
 ul li {
-  width: 100%;
-  height: 2.13333rem;
-  overflow: hidden;
-  box-sizing: border-box;
-  padding: 0 0.26667rem 0 0.2rem;
+  width: 9.14667rem;
+  height: 2.24rem;
+  background: url(../images/guildLiBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 0.66667rem;
   position: relative;
-}
-
-ul li .num {
-  color: #000000;
-  font-size: 0.4rem;
-  font-weight: bold;
-  width: 1.01333rem;
-  height: 1.01333rem;
-  line-height: 1.01333rem;
-  text-align: center;
-  float: left;
-  margin-top: 0.66667rem;
-}
-
-ul li .ts {
-  width: 1.54667rem;
-  height: 1.54667rem;
-  position: absolute;
-  z-index: 2;
-  left: 1.09333rem;
-  top: 0.49333rem;
+  overflow: visible;
 }
 
 ul li .tx {
-  width: 1.4rem;
-  height: 1.45rem;
+  width: 2.21333rem;
+  height: 2.21333rem;
+  border-radius: 0.21333rem;
+  border: 0.04rem solid #FFD65E;
   position: absolute;
-  left: 1.2rem;
-  top: 0.46rem;
-  border-radius: 0.1rem;
+  left: 0.26667rem;
+  top: -0.24rem;
 }
 
-ul li .user {
-  float: left;
-  margin-left: 1.66667rem;
-}
-
-ul li .user p {
-  width: 2.5rem;
+ul li p {
+  width: 4rem;
+  position: absolute;
+  top: 0.26667rem;
+  left: 2.8rem;
+  color: #FFDD7A;
+  font-size: 0.42667rem;
+  font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: #515665;
-  font-size: 0.32rem;
-  margin-bottom: 0.38667rem;
-  font-weight: bold;
-  box-sizing: border-box;
-  padding-top: 0.70667rem;
 }
 
-ul li .user b {
-  color: #A4ABB2;
+ul li span {
+  width: 4rem;
+  height: 0.42667rem;
+  line-height: 0.42667rem;
+  position: absolute;
+  top: 1.33333rem;
+  left: 2.8rem;
+}
+
+ul li span img {
+  display: inline-block;
+  width: 0.42667rem;
+  height: 0.42667rem;
+}
+
+ul li span b {
+  display: inline-block;
+  color: #FFDD7A;
   font-size: 0.32rem;
-  font-weight: 500;
+  font-weight: 400;
+}
+
+ul li strong {
+  position: absolute;
+  color: #FFDD7A;
+  font-weight: 400;
+  position: absolute;
+  left: 2.8rem;
+  top: 0.86667rem;
+}
+
+ul li .level {
+  width: 0.8rem;
+  height: 0.8rem;
+  position: absolute;
+  right: 0.69333rem;
+  top: 0.26667rem;
 }
 
 ul li .but {
-  width: 1.54667rem;
-  height: 0.56rem;
-  line-height: 0.56rem;
-  background: #7F95FF;
-  border-radius: 0.56rem;
-  float: right;
-  margin-top: 0.76rem;
+  width: 1.6rem;
+  height: 0.69333rem;
+  line-height: 0.64rem;
   text-align: center;
   color: #fff;
-  font-size: 0.26667rem;
+  font-size: 0.37333rem;
+  position: absolute;
+  right: 0.29333rem;
+  top: 1.22667rem;
+  border-radius: 0.69333rem;
+  background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
 }
 
-ul li:nth-child(odd) {
-  background: rgba(50, 39, 79, 0.06);
+ul li .act {
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-ul li:nth-child(1) .num {
-  background: url(../images/no1.png) no-repeat;
-  background-size: 100% 100%;
+ul .null {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: none;
 }
 
-ul li:nth-child(1) .ts {
-  width: 1.78667rem;
-  height: 1.78667rem;
-  left: 1.05333rem;
-  top: 0.18667rem;
+ul .null img {
+  width: 1.96rem;
+  height: 2.01333rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
-ul li:nth-child(2) .num {
-  background: url(../images/no2.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-ul li:nth-child(2) .ts {
-  width: 1.78667rem;
-  height: 1.78667rem;
-  left: 1.05333rem;
-  top: 0.18667rem;
-}
-
-ul li:nth-child(3) .num {
-  background: url(../images/no3.png) no-repeat;
-  background-size: 100% 100%;
-}
-
-ul li:nth-child(3) .ts {
-  width: 1.78667rem;
-  height: 1.78667rem;
-  left: 1.05333rem;
-  top: 0.18667rem;
+ul .null span {
+  width: 100%;
+  left: 0;
+  top: 55%;
+  transform: translateY(-50%);
+  color: #A9A9A9;
+  font-size: 0.4rem;
+  font-weight: 400;
+  position: absolute;
+  text-align: center;
 }
 
 .pub {
@@ -241,28 +264,29 @@ ul li:nth-child(3) .ts {
   color: #fff;
 }
 
-.arabic ul li .num,
-.arabic ul li .user {
-  float: right;
-}
-
-.arabic ul li .user {
-  margin-left: 0;
-  margin-right: 1.8rem;
-}
-
 .arabic ul li .but {
-  float: left;
+  right: auto;
+  left: 0.29333rem;
 }
 
-.arabic ul li .ts {
-  left: 0;
-  right: 1.05333rem;
+.arabic ul li .level {
+  right: auto;
+  left: 0.69333rem;
 }
 
 .arabic ul li .tx {
-  left: 0;
-  right: 1.28rem;
+  right: 0.26667rem;
+  left: auto;
+}
+
+.arabic ul li p {
+  right: 2.8rem;
+  left: auto;
+}
+
+.arabic ul li span {
+  right: 2.8rem;
+  left: auto;
 }
 
 .arabic .top .left {
@@ -272,3 +296,73 @@ ul li:nth-child(3) .ts {
 .arabic .top img {
   float: left;
 }
+
+.create {
+  position: fixed;
+  z-index: 2;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.88rem;
+  background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+  width: 6.24rem;
+  height: 1.17333rem;
+  line-height: 1.17333rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.42667rem;
+  border-radius: 1.17333rem;
+}
+
+.submitSuccessfully {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+
+.submitSuccessfully .submitSuccessfully_in {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 7.73333rem;
+  background: #fff;
+  border-radius: 0.42667rem;
+  padding: 0.37333rem 0.61333rem 0.48rem;
+}
+
+.submitSuccessfully .submitSuccessfully_in .title {
+  color: #313131;
+  font-size: 0.4rem;
+  font-weight: 500;
+  height: 0.56rem;
+  line-height: 0.56rem;
+  margin: 0rem auto 0.32rem;
+  text-align: center;
+}
+
+.submitSuccessfully .submitSuccessfully_in p {
+  width: 100%;
+  color: #313131;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  line-height: 0.48rem;
+  text-align: center;
+}
+
+.submitSuccessfully .submitSuccessfully_in .but {
+  width: 6.50667rem;
+  height: 0.96rem;
+  line-height: 0.96rem;
+  text-align: center;
+  border-radius: 0.96rem;
+  margin: 0.32rem auto 0;
+  color: #fff;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+}

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

@@ -6,7 +6,7 @@ html,
 body {
     width: 100%;
     height: px2rem(1334);
-    background: #F5F7F9;
+    background: #FFFFFF;
 
 }
 
@@ -22,8 +22,9 @@ body {
     font-size: px2rem(34);
     font-weight: bold;
     z-index: 10;
-    background: url(../images/topBg.png) no-repeat top;
-    background-size: 100% 7rem;
+    background: #fff;
+    // background: url(../images/topBg.png) no-repeat top;
+    // background-size: 100% 7rem;
 
     img {
         width: px2rem(44);
@@ -35,16 +36,17 @@ body {
 }
 
 .top {
-    width: px2rem(694);
-    height: px2rem(89);
-    line-height: px2rem(59);
-    background: #fff;
-    border-radius: px2rem(20) px2rem(20) 0 0;
+    width: px2rem(690);
+    height: px2rem(68);
+    line-height: px2rem(68);
+    background: #F7F7F7;
+    border-radius: px2rem(68);
     margin: 2.5rem auto 0;
     color: #333;
     font-size: px2rem(32);
     box-sizing: border-box;
     padding: 0 px2rem(30);
+    position: relative;
 
     .left {
         height: px2rem(89);
@@ -52,12 +54,30 @@ body {
         float: left;
     }
 
+    input {
+        width: px2rem(610);
+        height: px2rem(68);
+        background: none;
+        position: absolute;
+        left: px2rem(74);
+        top: 0;
+        font-size: px2rem(28);
+        border: none;
+        outline: none;
+        color: #313131;
+
+        &::placeholder {
+            color: #AFB1B3;
+        }
+    }
+
     img {
-        float: right;
-        display: block;
-        width: px2rem(44);
-        height: px2rem(44);
-        margin-top: px2rem(25);
+        position: absolute;
+        left: px2rem(24);
+        top: 50%;
+        transform: translateY(-50%);
+        width: px2rem(40);
+        height: px2rem(40);
     }
 }
 
@@ -65,135 +85,131 @@ ul {
     width: px2rem(694);
     height: px2rem(1261);
     overflow-y: scroll;
-    margin: 0 auto;
+    margin: px2rem(40) auto 0;
     border-radius: 0 0 px2rem(20) px2rem(20);
     background: #fff;
+    padding-top: px2rem(20);
+    box-sizing: border-box;
 
     &::-webkit-scrollbar {
         display: none;
     }
 
     li {
-        width: 100%;
-        height: px2rem(160);
-        overflow: hidden;
-        box-sizing: border-box;
-        padding: 0 px2rem(20) 0 px2rem(15);
+        width: px2rem(686);
+        height: px2rem(168);
+        background: url(../images/guildLiBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: px2rem(50);
         position: relative;
-
-        .num {
-            color: #000000;
-            font-size: px2rem(30);
-            font-weight: bold;
-            width: px2rem(76);
-            height: px2rem(76);
-            line-height: px2rem(76);
-            text-align: center;
-            float: left;
-            margin-top: px2rem(50);
-        }
-
-        .ts {
-            width: px2rem(116);
-            height: px2rem(116);
-            position: absolute;
-            z-index: 2;
-            left: px2rem(82);
-            top: px2rem(37);
-        }
+        overflow: visible;
 
         .tx {
-            width: 1.4rem;
-            height: 1.45rem;
+            width: px2rem(166);
+            height: px2rem(166);
+            border-radius: px2rem(16);
+            border: px2rem(3) solid #FFD65E;
             position: absolute;
-            left: 1.2rem;
-            top: 0.46rem;
-            border-radius: 0.1rem;
+            left: px2rem(20);
+            top: px2rem(-18);
         }
 
-        .user {
-            float: left;
-            margin-left: px2rem(125);
+        p {
+            width: 4rem;
+            position: absolute;
+            top: px2rem(20);
+            left: px2rem(210);
+            color: #FFDD7A;
+            font-size: px2rem(32);
+            font-weight: 500;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
 
-            p {
-                width: 2.5rem;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                color: #515665;
-                font-size: px2rem(24);
-                margin-bottom: px2rem(29);
-                font-weight: bold;
-                box-sizing: border-box;
-                padding-top: px2rem(53);
+        span {
+            width: 4rem;
+            height: px2rem(32);
+            line-height: px2rem(32);
+            position: absolute;
+            top: px2rem(100);
+            left: px2rem(210);
+
+            img {
+                display: inline-block;
+                width: px2rem(32);
+                height: px2rem(32);
             }
 
             b {
-                color: #A4ABB2;
+                display: inline-block;
+                color: #FFDD7A;
                 font-size: px2rem(24);
-                font-weight: 500;
+                font-weight: 400;
             }
         }
+        strong{
+            position: absolute;
+            color: #FFDD7A;
+            font-weight: 400;
+            position: absolute;
+            left: 2.8rem;
+            top: px2rem(65);
+        }
+        .level {
+            width: px2rem(60);
+            height: px2rem(60);
+            position: absolute;
+            right: px2rem(52);
+            top: px2rem(20);
+        }
 
         .but {
-            width: px2rem(116);
-            height: px2rem(42);
-            line-height: px2rem(42);
-            background: #7F95FF;
-            border-radius: px2rem(42);
-            float: right;
-            margin-top: px2rem(57);
+            width: px2rem(120);
+            height: px2rem(52);
+            line-height: px2rem(48);
             text-align: center;
             color: #fff;
-            font-size: px2rem(20);
+            font-size: px2rem(28);
+            position: absolute;
+            right: px2rem(22);
+            top: px2rem(92);
+            border-radius: px2rem(52);
+            background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
         }
 
-        &:nth-child(odd) {
-            background: rgba(50, 39, 79, .06);
+        .act {
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
+    .null {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: none;
+
+        img {
+            width: px2rem(147);
+            height: px2rem(151);
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
         }
 
-        &:nth-child(1) {
-            .num {
-                background: url(../images/no1.png) no-repeat;
-                background-size: 100% 100%;
-            }
-
-            .ts {
-                width: px2rem(134);
-                height: px2rem(134);
-                left: px2rem(79);
-                top: px2rem(14);
-            }
+        span {
+            width: 100%;
+            left: 0;
+            top: 55%;
+            transform: translateY(-50%);
+            color: #A9A9A9;
+            font-size: px2rem(30);
+            font-weight: 400;
+            position: absolute;
+            text-align: center;
         }
-
-        &:nth-child(2) {
-            .num {
-                background: url(../images/no2.png) no-repeat;
-                background-size: 100% 100%;
-            }
-
-            .ts {
-                width: px2rem(134);
-                height: px2rem(134);
-                left: px2rem(79);
-                top: px2rem(14);
-            }
-        }
-
-        &:nth-child(3) {
-            .num {
-                background: url(../images/no3.png) no-repeat;
-                background-size: 100% 100%;
-            }
-
-            .ts {
-                width: px2rem(134);
-                height: px2rem(134);
-                left: px2rem(79);
-                top: px2rem(14);
-            }
-        }
-
     }
 }
 
@@ -254,29 +270,27 @@ ul {
 }
 
 .arabic {
-
-    ul li .num,
-    ul li .user {
-        float: right;
-    }
-
-    ul li .user {
-        margin-left: 0;
-        margin-right: 1.8rem;
-    }
-
     ul li .but {
-        float: left;
+        right: auto;
+        left: 0.29333rem;
     }
 
-    ul li .ts {
-        left: 0;
-        right: 1.05333rem;
+    ul li .level {
+        right: auto;
+        left: 0.69333rem;
     }
 
     ul li .tx {
-        left: 0;
-        right: 1.28rem;
+        right: 0.26667rem;
+        left: auto;
+    }
+    ul li p{
+        right: 2.8rem;
+        left: auto;
+    }
+    ul li span{
+        right: 2.8rem;
+        left: auto;
     }
 
     .top .left {
@@ -286,4 +300,75 @@ ul {
     .top img {
         float: left;
     }
+}
+
+.create {
+    position: fixed;
+    z-index: 2;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: px2rem(66);
+    background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+    width: px2rem(468);
+    height: px2rem(88);
+    line-height: px2rem(88);
+    text-align: center;
+    color: #fff;
+    font-size: px2rem(32);
+    border-radius: px2rem(88);
+}
+
+.submitSuccessfully {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    background: rgba(0, 0, 0, .5);
+    display: none;
+
+    .submitSuccessfully_in {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: px2rem(580);
+        // height: px2rem(406);
+        background: #fff;
+        border-radius: px2rem(32);
+        padding: px2rem(28) px2rem(46) px2rem(36);
+
+        .title {
+            color: #313131;
+            font-size: px2rem(30);
+            font-weight: 500;
+            height: px2rem(42);
+            line-height: px2rem(42);
+            margin: px2rem(0) auto px2rem(24);
+            text-align: center;
+        }
+
+        p {
+            width: 100%;
+            color: #313131;
+            font-size: px2rem(26);
+            font-weight: 400;
+            line-height: px2rem(36);
+            text-align: center;
+        }
+
+        .but {
+            width: px2rem(488);
+            height: px2rem(72);
+            line-height: px2rem(72);
+            text-align: center;
+            border-radius: px2rem(72);
+            margin: px2rem(24) auto 0;
+            color: #fff;
+            font-size: px2rem(28);
+            font-weight: 500;
+            background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+        }
+    }
 }

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

@@ -181,6 +181,7 @@ body {
   padding: 0 0.13333rem;
   position: relative;
   word-spacing: normal;
+  white-space: nowrap;
 }
 
 .headerBox .headerBox_in div img {
@@ -720,17 +721,17 @@ body {
 }
 
 .guildList ul li .administrator {
-  width: 1.04rem;
-  height: 0.34667rem;
-  line-height: 0.34667rem;
-  border-radius: 0.34667rem;
+  width: 1.2rem;
+  height: 0.45333rem;
+  line-height: 0.45333rem;
+  border-radius: 0.45333rem;
   text-align: center;
   color: #333;
   font-size: 0.29333rem;
   font-weight: 400;
   position: absolute;
-  left: 0.26667rem;
-  top: 0.94667rem;
+  left: 0.37333rem;
+  top: 1.30667rem;
   background: linear-gradient(-90deg, #FBE1FF, #F090FF);
   display: none;
 }

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

@@ -186,6 +186,7 @@ body {
             padding: 0 px2rem(10);
             position: relative;
             word-spacing: normal;
+            white-space: nowrap;
 
             img {
                 display: inline;
@@ -736,17 +737,17 @@ body {
             }
 
             .administrator {
-                width: px2rem(78);
-                height: px2rem(26);
-                line-height: px2rem(26);
-                border-radius: px2rem(26);
+                width: px2rem(90);
+                height: px2rem(34);
+                line-height: px2rem(34);
+                border-radius: px2rem(34);
                 text-align: center;
                 color: #333;
                 font-size: px2rem(22);
                 font-weight: 400;
                 position: absolute;
-                left: px2rem(20);
-                top: px2rem(71);
+                left: px2rem(28);
+                top: px2rem(98);
                 background: linear-gradient(-90deg, #FBE1FF, #F090FF);
                 display: none;
             }

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

@@ -7,7 +7,7 @@
     <title class="text1"></title>
     <!-- 未加入公会首页 -->
     <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./css/guild.css?v=1.1">
+    <link rel="stylesheet" href="./css/guild.css">
 </head>
 
 <body>
@@ -18,52 +18,21 @@
     </div>
     <!-- 头部 -->
     <div class="top">
-        <div class="left text3"></div>
+        <input class="placeholder" type="text" placeholder="Please enter the Agency ID/Agent ID to search">
         <img src="./images/fdj.png" alt="">
     </div>
     <!-- 列表 -->
     <ul>
         <!-- <li>
-            <div class="num"></div>
-            <img src="./images/ts1.png" alt="" class="ts">
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="user">
-                <p>名称</p>
-                <b>ID:0</b>
-            </div>
-            <div class="but">طلب إضافة </div>
-        </li>
-        <li>
-            <div class="num"></div>
-            <img src="./images/ts2.png" alt="" class="ts">
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="user">
-                <p>名称</p>
-                <b>ID:0</b>
-            </div>
-            <div class="but">طلب إضافة </div>
-        </li>
-        <li>
-            <div class="num"></div>
-            <img src="./images/ts3.png" alt="" class="ts">
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="user">
-                <p>名称</p>
-                <b>ID:0</b>
-            </div>
-            <div class="but">طلب إضافة </div>
-        </li>
-        <li>
-            <div class="num">4</div>
-            <img src="./images/txK.png" alt="" class="ts">
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="user">
-                <p>名称</p>
-                <b>ID:0</b>
-            </div>
-            <div class="but">طلب إضافة </div>
+            <img class="tx" src="./images/null.png" alt="">
+            <p>名字</p>
+            <span><img src="./images/xren.png" alt=""> <b>0/100</b></span>
+            <img class="level" src="./images/SS.png" alt="">
+            <div class="but">Join</div>
         </li> -->
     </ul>
+    <!-- 创建公会 -->
+    <div class="create newText1"></div>
     <!-- 确认加入公会弹窗 -->
     <div class="pub">
         <div class="pub_in">
@@ -74,6 +43,14 @@
             </div>
         </div>
     </div>
+    <!-- 提交成功弹窗 -->
+    <div class="submitSuccessfully">
+        <div class="submitSuccessfully_in">
+            <div class="title newText2"></div>
+            <p class="newText3"></p>
+            <div class="but text6">OK</div>
+        </div>
+    </div>
 </body>
 
 </html>
@@ -87,5 +64,5 @@
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
 <script src="./local/tr.js"></script>
-<script src="./js/guild.js?v=1.0"></script>
+<script src="./js/guild.js?v=2"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -69,5 +69,5 @@
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
 <script src="./local/tr.js"></script>
-<script src="./js/guildInfoSet.js"></script>
+<script src="./js/guildInfoSet.js?v=1.0"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -7,7 +7,7 @@
     <title class="text1"></title>
     <!-- 公会首页 -->
     <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./css/index.css?v1.11">
+    <link rel="stylesheet" href="./css/index.css?v1.112">
 </head>
 
 <body>
@@ -190,5 +190,5 @@
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
 <script src="./local/tr.js"></script>
-<script src="./js/index.js?v=1.11"></script>
+<script src="./js/index.js?v=3"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -0,0 +1,212 @@
+const urlData = getQueryString();
+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 fields = {};
+$(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(() => {
+            window.history.back();
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        get()
+    }, 100);
+
+});
+function translateFun() {
+    langReplace = window.lang.replace;
+    localLang = window.lang;
+    $('.text1').text(langReplace(localLang.CARD_USD.text1));
+    $('.text2').text(langReplace(localLang.payonner.text2));
+    $('.text3').text(langReplace(localLang.payonner.text3));
+    $('.text4').text(langReplace(localLang.payonner.text4));
+    $('.text5').text(langReplace(localLang.payonner.text5));
+    $('.text6').attr('placeholder', langReplace(localLang.payonner.text6));
+    $('.text7').attr('placeholder', langReplace(localLang.payonner.text7));
+    $('.text8').attr('placeholder', langReplace(localLang.CARD_USD.text8));
+    $('.text9').attr('placeholder', langReplace(localLang.payonner.text9));
+    $('.p1').text(langReplace(localLang.pTitle.p1));
+    $('.p7').text(langReplace(localLang.CARD_USD.text11));
+    $('.p5').text(langReplace(localLang.pTitle.p5));
+
+}
+// 获取
+function get() {
+    showLoading();
+    networkRequest({
+        type: "GET",
+        url: urlPrefix + "/guild/usd/withdrawAccount/get",
+        data: { type: getQueryString().type },
+        success: function (res) {
+            if (res.code == 200) {
+                // 回显数据
+                $('.currencyType input').val(langReplace(localLang.payonner.text6) + res.data.currency);
+                fields = res.data.fields;
+                if (fields.country == '') {
+                    $('.but .determine').hide();
+                    $('.but .ok').show();
+                    $('.box input').attr('disabled', false)
+                } else {
+                    $('.but .determine').show();
+                    $('.but .ok').hide();
+                    $('.box input').attr('disabled', true)
+                }
+                $('.currencyType input').attr('disabled', true)
+                $('.country input').val(fields.country);
+                $('.payeeAccountNo input').val(fields.bank_account);
+                $('.payeeName input').val(fields.full_name);
+                // 渲染国家
+                $('.pub .pub_in .countryPub').remove();
+                var str = '';
+                res.data.countryOptionalList.forEach(res => {
+                    str += `
+                    <div country='${res.value}' name="${res.name}" class="countryPub">${res.name}</div>
+                    `
+                })
+                $('.pub .pub_in').append(str);
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex);
+        },
+        error: function (res) {
+            console.log(res, "报错啦");
+            hideLoading(layerIndex);
+        },
+    });
+}
+// 选择国家
+$('.country').click(function () {
+    $('.pub').show();
+})
+// 关闭选择国家
+$('.pub').click(function (params) {
+    $('.pub').hide();
+})
+// 选中国家
+var nameTitle
+$('.pub .pub_in').on('click', '.countryPub', function name(params) {
+    $(this).addClass('act').siblings().removeClass('act');
+    nameTitle = $(this).attr('name');
+    var country = $(this).attr('country');
+    fields.country = country;
+    return false;
+})
+// 确认选中国家
+$('.pub .pub_in .soure').click(function name(params) {
+    $('.country input').val(nameTitle);
+    $('.pub').hide();
+})
+// 确认绑定按钮
+$('.but .ok').click(function (params) {
+    console.log(fields);
+    var obj = {}
+    obj.country = fields.country;
+    obj.bank_account = $('.payeeAccountNo input').val();
+    obj.full_name = $('.payeeName input').val();
+    if (obj.country && obj.bank_account && obj.full_name) {
+        fields = obj;
+        var objJson = {
+            uid: pubInfo.uid,
+            type: getQueryString().type,
+            fields,
+        }
+        update(JSON.stringify(objJson));
+    } else {
+        toastMsg(langReplace(localLang.payonner.text10));
+    }
+})
+// 绑定更新信息
+function update(obj) {
+    showLoading();
+    networkRequest({
+        type: "post",
+        url: urlPrefix + "/guild/usd/withdrawAccount/bound",
+        contentType: 'application/json;charset=UTF-8',
+        data: obj,
+        success: function (res) {
+            if (res.code == 200) {
+                get();
+                toastMsg('success');
+                location.href = './salary_account.html'
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex);
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    });
+}
+// 解绑
+$('.but .determine').click(function () {
+    var objJson = {
+        uid: pubInfo.uid,
+        type: getQueryString().type,
+    }
+    unbound(JSON.stringify(objJson));
+})
+// 解绑
+function unbound(obj) {
+    showLoading();
+    networkRequest({
+        type: "post",
+        url: urlPrefix + "/guild/usd/withdrawAccount/unbound",
+        contentType: 'application/json;charset=UTF-8',
+        data: obj,
+        success: function (res) {
+            if (res.code == 200) {
+                get();
+                toastMsg('success');
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex);
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    });
+}

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

@@ -0,0 +1,212 @@
+const urlData = getQueryString();
+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 fields = {};
+$(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(() => {
+            window.history.back();
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        get()
+    }, 100);
+
+});
+function translateFun() {
+    langReplace = window.lang.replace;
+    localLang = window.lang;
+    $('.text1').text(langReplace(localLang.bankTransferLira.text1));
+    $('.text2').text(langReplace(localLang.payonner.text2));
+    $('.text3').text(langReplace(localLang.payonner.text3));
+    $('.text4').text(langReplace(localLang.payonner.text4));
+    $('.text5').text(langReplace(localLang.payonner.text5));
+    $('.text6').attr('placeholder', langReplace(localLang.payonner.text6));
+    $('.text7').attr('placeholder', langReplace(localLang.payonner.text7));
+    $('.text8').attr('placeholder', langReplace(localLang.bankTransferLira.text8));
+    $('.text9').attr('placeholder', langReplace(localLang.payonner.text9));
+    $('.p1').text(langReplace(localLang.pTitle.p1));
+    $('.p7').text(langReplace(localLang.bankTransferLira.text11));
+    $('.p5').text(langReplace(localLang.pTitle.p5));
+
+}
+// 获取
+function get() {
+    showLoading();
+    networkRequest({
+        type: "GET",
+        url: urlPrefix + "/guild/usd/withdrawAccount/get",
+        data: { type: getQueryString().type },
+        success: function (res) {
+            if (res.code == 200) {
+                // 回显数据
+                $('.currencyType input').val(langReplace(localLang.payonner.text6) + res.data.currency);
+                fields = res.data.fields;
+                if (fields.country == '') {
+                    $('.but .determine').hide();
+                    $('.but .ok').show();
+                    $('.box input').attr('disabled', false)
+                } else {
+                    $('.but .determine').show();
+                    $('.but .ok').hide();
+                    $('.box input').attr('disabled', true)
+                }
+                $('.currencyType input').attr('disabled', true)
+                $('.country input').val(fields.country);
+                $('.payeeAccountNo input').val(fields.bank_account);
+                $('.payeeName input').val(fields.full_name);
+                // 渲染国家
+                $('.pub .pub_in .countryPub').remove();
+                var str = '';
+                res.data.countryOptionalList.forEach(res => {
+                    str += `
+                    <div country='${res.value}' name="${res.name}" class="countryPub">${res.name}</div>
+                    `
+                })
+                $('.pub .pub_in').append(str);
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex);
+        },
+        error: function (res) {
+            console.log(res, "报错啦");
+            hideLoading(layerIndex);
+        },
+    });
+}
+// 选择国家
+$('.country').click(function () {
+    $('.pub').show();
+})
+// 关闭选择国家
+$('.pub').click(function (params) {
+    $('.pub').hide();
+})
+// 选中国家
+var nameTitle
+$('.pub .pub_in').on('click', '.countryPub', function name(params) {
+    $(this).addClass('act').siblings().removeClass('act');
+    nameTitle = $(this).attr('name');
+    var country = $(this).attr('country');
+    fields.country = country;
+    return false;
+})
+// 确认选中国家
+$('.pub .pub_in .soure').click(function name(params) {
+    $('.country input').val(nameTitle);
+    $('.pub').hide();
+})
+// 确认绑定按钮
+$('.but .ok').click(function (params) {
+    console.log(fields);
+    var obj = {}
+    obj.country = fields.country;
+    obj.bank_account = $('.payeeAccountNo input').val();
+    obj.full_name = $('.payeeName input').val();
+    if (obj.country && obj.bank_account && obj.full_name) {
+        fields = obj;
+        var objJson = {
+            uid: pubInfo.uid,
+            type: getQueryString().type,
+            fields,
+        }
+        update(JSON.stringify(objJson));
+    } else {
+        toastMsg(langReplace(localLang.payonner.text10));
+    }
+})
+// 绑定更新信息
+function update(obj) {
+    showLoading();
+    networkRequest({
+        type: "post",
+        url: urlPrefix + "/guild/usd/withdrawAccount/bound",
+        contentType: 'application/json;charset=UTF-8',
+        data: obj,
+        success: function (res) {
+            if (res.code == 200) {
+                get();
+                toastMsg('success');
+                location.href = './salary_account.html'
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex);
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    });
+}
+// 解绑
+$('.but .determine').click(function () {
+    var objJson = {
+        uid: pubInfo.uid,
+        type: getQueryString().type,
+    }
+    unbound(JSON.stringify(objJson));
+})
+// 解绑
+function unbound(obj) {
+    showLoading();
+    networkRequest({
+        type: "post",
+        url: urlPrefix + "/guild/usd/withdrawAccount/unbound",
+        contentType: 'application/json;charset=UTF-8',
+        data: obj,
+        success: function (res) {
+            if (res.code == 200) {
+                get();
+                toastMsg('success');
+            } else {
+                toastMsg(res.message);
+            }
+            hideLoading(layerIndex);
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    });
+}

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

@@ -0,0 +1,237 @@
+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'
+    })
+}
+// 初始化函數
+$(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(() => {
+            window.history.back();
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        h5User();
+    }, 100)
+})
+var agencySubmit = false;
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.text1').text(langReplace(localLang.createGuild.text1));
+    $('.text2').text(langReplace(localLang.createGuild.text2));
+    $('.text3').text(langReplace(localLang.createGuild.text3));
+    $('.text4').text(langReplace(localLang.createGuild.text4));
+    $('.text5').text(langReplace(localLang.createGuild.text5));
+    $('.text6').text(langReplace(localLang.createGuild.text6));
+    $('.text7').text(langReplace(localLang.createGuild.text7));
+    $('.text8').text(langReplace(localLang.createGuild.text8));
+    $('.text9').text(langReplace(localLang.createGuild.text9));
+    $('.text10').text(langReplace(localLang.createGuild.text10));
+    $('.placeholder').attr('placeholder', langReplace(localLang.createGuild.placeholder));
+}
+$('.submitSuccessfully .submitSuccessfully_in .but').click(function () {
+    $('.submitSuccessfully').hide();
+    if (browser.android) {
+        window.androidJsObj.closeWebView()
+    } else {
+        window.webkit.messageHandlers.closeWebView.postMessage(null)
+    }
+})
+function fileChangeF(e) {
+    var file = document.querySelector('#backImageUpload').files[0];
+    if (file.length == 0) {
+        return;
+    }
+    var fileType = file.type;
+    // 判断是否是动图
+    if (fileType == 'image/gif' || file.name.includes('.gif')) {
+        toastMsg(langReplace(localLang.guildInfoSet.toastMsgText1))
+    } else {
+        getToken(file, 1)
+    }
+}
+function fileChangeF2(e) {
+    var file = document.querySelector('#backImageUpload2').files[0];
+    if (file.length == 0) {
+        return;
+    }
+    var fileType = file.type;
+    // 判断是否是动图
+    if (fileType == 'image/gif' || file.name.includes('.gif')) {
+        toastMsg(langReplace(localLang.guildInfoSet.toastMsgText1))
+    } else {
+        getToken(file, 2)
+    }
+}
+function fileChangeF3(e) {
+    var file = document.querySelector('#backImageUpload3').files[0];
+    if (file.length == 0) {
+        return;
+    }
+    var fileType = file.type;
+    // 判断是否是动图
+    if (fileType == 'image/gif' || file.name.includes('.gif')) {
+        toastMsg(langReplace(localLang.guildInfoSet.toastMsgText1))
+    } else {
+        getToken(file, 3)
+    }
+}
+// 上傳图片接口
+function getToken(file, type) {
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/tencent/cos/getToken',
+        success(res) {
+            if (res.code === 200) {
+                let cos = new COS({
+                    SecretId: res.data.secretId,
+                    SecretKey: res.data.secretKey,
+                    SecurityToken: res.data.sessionToken,
+                    StartTime: res.data.startTime,
+                    ExpiredTime: res.data.expireTime,
+                });
+                console.log(cos);
+                var customDomain = res.data.customDomain;
+                cos.uploadFile({
+                    Bucket: res.data.bucket, /* 填写自己的 bucket，必须字段 */
+                    Region: res.data.region,     /* 存储桶所在地域，必须字段 */
+                    Key: file.name,              /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+                    Body: file, // 上传文件对象
+                    SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
+                    onProgress: function (progressData) {
+                        console.log(JSON.stringify(progressData));
+                    }
+                }).then(res => {
+                    if (type == 1) {//背景
+                        $('.info .agencyAvatar').attr('src', `${customDomain}/${file.name}`);
+                    } else if (type == 2) {//背景
+                        $('.info .agentIDCardImg').attr('src', `${customDomain}/${file.name}`);
+                    } else {
+                        $('.inviterInfo .inviterPicImg').attr('src', `${customDomain}/${file.name}`);
+                    }
+                }).catch(err => {
+                    console.log('上传失败', err);
+                    hideLoading(layerIndex)
+                    toastMsg(err.message);
+                });
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+var erbanNo;
+
+// 自己信息接口
+function h5User() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/web-user',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code == 200) {
+                $('.myInfo .tx').attr('src', res.data.avatar);
+                $('.myInfo p').text(res.data.nick);
+                $('.myInfo b').text(`ID:${res.data.erbanNo}`);
+                erbanNo = res.data.erbanNo;
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 创建接口
+function apply(obj) {
+    showLoading()
+    networkRequest({
+        type: 'post',
+        contentType: 'application/json',
+        url: urlPrefix + '/guild/apply',
+        data: obj,
+        success(res) {
+            if (res.code == 200) {
+                $('.submitSuccessfully').show();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+$('.butBox').click(function () {
+    var guildAvatar = $('.info .agencyAvatar').attr('src');
+    var guildName = $('.info .agencyName input').val();
+    var guildContact = $('.info .agentContactInfo input').val();
+    var idCard = $('.info .agentIDCardImg').attr('src');
+    var inviteErbanNo = $('.inviterInfo .InviterId input').val();
+    var inviteCheck = $('.inviterInfo .inviterPicImg').attr('src');
+    var obj = {};
+    obj.guildAvatar = guildAvatar;
+    obj.guildName = guildName;
+    obj.guildContact = guildContact;
+    obj.idCard = idCard;
+    obj.inviteErbanNo = inviteErbanNo;
+    obj.inviteCheck = inviteCheck;
+    obj.erbanNo = erbanNo;
+    obj.applyUid = pubInfo.uid;
+    if (guildName != '' && guildContact != '' && guildAvatar != './images/createGuildNull.png' && idCard != './images/createGuildNull.png') {
+        apply(JSON.stringify(obj))
+    } else {
+        toastMsg(localLang.createGuild.null)
+    }
+})

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

@@ -28,6 +28,7 @@ const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time
         skin: 'msg'
     })
 }
+var inputTime = null;
 // 初始化函數
 $(function () {
     getInfoFromClient();
@@ -53,7 +54,8 @@ $(function () {
         langReplace = window.lang.replace;
         localLang = window.lang;
         translateFun();
-        listRank();
+        applyExist();
+        // listRank();
     }, 100)
 })
 function translateFun() {
@@ -65,10 +67,15 @@ function translateFun() {
     $('.text4').text(langReplace(localLang.guild.text4));
     $('.text5').text(langReplace(localLang.guild.text5));
     $('.text6').text(langReplace(localLang.guild.text6));
+    $('.newText1').text(langReplace(localLang.guild.newText1));
+    $('.newText2').text(langReplace(localLang.guild.newText2));
+    $('.newText3').text(langReplace(localLang.guild.newText3));
+    $('.newText4').text(langReplace(localLang.guild.newText4));
+    $('.placeholder').attr('placeholder', langReplace(localLang.guild.placeholder));
 }
 // 搜索按钮
 $('.top img').click(function () {
-    window.location.href = './search.html'
+    // window.location.href = './search.html'
 })
 // 配置接口
 function listRank() {
@@ -80,40 +87,18 @@ function listRank() {
         success(res) {
             if (res.code === 200) {
                 var str = '';
-                if (res.data.length > 6) {//
-                    var arr = generateUniqueRandomNumbers(6, 0, res.data.length - 1);
-                    var currArr = res.data;
-                    console.log(arr);
-                    arr.forEach((val, i) => {
-                        str += `
-                        <li>
-                            <div class="num">${i > 2 ? i + 1 : ''}</div>
-                            ${i <= 2 ? `<img src="./images/ts${i + 1}.png" class="ts">` : ''}
-                            <img src="${currArr[val].owner.avatar}" alt="" class="tx">
-                            <div class="user">
-                                <p>${currArr[val].guildName}</p>
-                                <b>ID:${currArr[val].owner.erbanNo}</b>
-                            </div>
-                            <div class="but" familyId=${currArr[val].guildId}>${langReplace(localLang.guild.text7)}</div>
-                        </li>
-                    `
-                    })
-                } else {
-                    res.data.forEach((res, i) => {
-                        str += `
-                        <li>
-                            <div class="num">${i > 2 ? i + 1 : ''}</div>
-                            ${i <= 2 ? `<img src="./images/ts${i + 1}.png" class="ts">` : ''}
-                            <img src="${res.owner.avatar}" alt="" class="tx">
-                            <div class="user">
-                                <p>${res.guildName}</p>
-                                <b>ID:${res.owner.erbanNo}</b>
-                            </div>
-                            <div class="but" familyId=${res.guildId}>${langReplace(localLang.guild.text7)}</div>
-                        </li>
-                    `
-                    })
-                }
+                res.data.forEach((val, i) => {
+                    str += `
+                            <li>
+                                <img class="tx" src="${val.owner.avatar}" alt="">
+                                <p>${val.guildName}</p>
+                                <strong>${langReplace(localLang.guild.newText5)} ${val.owner.erbanNo}</strong>
+                                <span><img src="./images/xren.png" alt=""> <b>${val.memberNum ? val.memberNum : 0}/${val.memberNumLimit}</b></span>
+                                <img class="level" style="display:${val.ssLevel == 0 ? 'none' : 'block'}" src="./images/${val.markScore}.png" alt="">
+                                <div class="but" style="top:${val.ssLevel == 0 ? '0.8rem' : '1.22667rem'}" familyId=${val.guildId}>${langReplace(localLang.guild.newText4)}</div>
+                            </li>
+                        `
+                })
                 $('ul').append(str);
             } else {
                 toastMsg(res.message)
@@ -126,6 +111,31 @@ function listRank() {
         }
     })
 }
+// 公会申请校验
+function applyExist() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/guild/apply/applyExist',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code === 200) {
+                if (res.data) {
+                    $('.submitSuccessfully').show();
+                } else {
+                    listRank();
+                }
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
 // 随机数
 function generateUniqueRandomNumbers(count, min, max) {
     const uniqueNumbers = new Set();
@@ -163,6 +173,74 @@ function apply(familyId) {
         success(res) {
             if (res.code === 200) {
                 toastMsg(langReplace(localLang.guild.text8))
+                applyExist();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 创建按钮
+$('.create').click(function () {
+    window.location.href = './createGuild.html';
+})
+// 弹窗按钮
+$('.submitSuccessfully .submitSuccessfully_in .but').click(function () {
+    if (browser.android) {
+        window.androidJsObj.closeWebView()
+    } else {
+        window.webkit.messageHandlers.closeWebView.postMessage(null)
+    }
+})
+// 监听输入框
+$('.top input').on('input', function () {
+    var val = $(this).val();
+    clearTimeout(inputTime);
+    if (val == '') {
+        listRank();
+    } else {
+        inputTime = setTimeout(() => {
+            searchFamily(val);
+        }, 500);
+    }
+});
+
+// 配置接口
+function searchFamily(erbanNo) {
+    $('ul li').remove();
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/guild/searchGuild',
+        data: { erbanNo },
+        success(res) {
+            if (res.code == 200) {
+                var str = '';
+                console.log(res.data);
+                str += `
+                        <li>
+                            <img class="tx" src="${res.data.avatar}" alt="">
+                            <p>${res.data.guildName}</p>
+                            <strong>${langReplace(localLang.guild.newText5)} ${res.data.erbanNo}</strong>
+                            <span><img src="./images/xren.png" alt=""> <b>${res.data.memberNum}/${res.data.memberNumLimit}</b></span>
+                            <img class="level" style="display:${res.data.ssLevel == 0 ? 'none' : 'block'}" src="./images/${res.data.markScore}.png" alt="">
+                            <div class="but" style="top:${res.data.ssLevel == 0 ? '0.8rem' : '1.22667rem'}" familyId=${res.data.guildId}>Join</div>
+                        </li>
+                        `
+                $('ul').append(str);
+            } else if (res.code == 1404) {
+                var str = '';
+                str += `
+                    <li class="null">
+                        <img src="./images/null.png" alt="">
+                        <span>${langReplace(localLang.search.text4)}</span>
+                    </li>`
+                $('ul').append(str);
             } else {
                 toastMsg(res.message)
             }

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

@@ -60,7 +60,8 @@ $(function () {
         $('.payoneer input').val(urlDate.payoneer == undefined ? urlDate.payoneer : '');
         $('.usdt input').val(urlDate.usdt == undefined ? urlDate.usdt : '');
         $('.paypal input').val(urlDate.payPal == undefined ? urlDate.payPal : '');
-        $('.background img').attr('src', urlDate.backgroundUrl);
+        $('.backgrounds2 img').attr('src', urlDate.avatar);
+        $('.backgrounds img').attr('src', urlDate.backgroundUrl);
         newBg = urlDate.backgroundUrl;
         if ($('.payoneer input').val() != '') {
             $('.payoneer span').hide();

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

@@ -31,6 +31,7 @@ const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time
 var roleTypes;
 var searTime;
 var guildNick;
+var avatar;
 var backgroundUrl;
 var payoneer;
 var usdt;
@@ -95,7 +96,11 @@ function translateFun() {
     $('.newtext7').text(langReplace(localLang.demoModule.newtext7));
     $('.audit').text(langReplace(localLang.demoModule.audit));
     $('.weeklyRewardsText1').text(langReplace(localLang.demoModule.weeklyRewardsText1));
-    $('.weeklyRewardsText2').text(langReplace(localLang.demoModule.weeklyRewardsText2));
+    if (window.localStorage.getItem('partitionId') == 2) {
+        $('.weeklyRewardsText2').text(langReplace(localLang.demoModule.weeklyRewardsText2));
+    } else if (window.localStorage.getItem('partitionId') == 8) {
+        $('.weeklyRewardsText2').text(langReplace(localLang.demoModule.weeklyRewardsText22));
+    }
     $('.weeklyRewardsText3').text(langReplace(localLang.demoModule.weeklyRewardsText3));
     $('.weeklyRewardsText4').text(langReplace(localLang.demoModule.weeklyRewardsText4));
     $('.weeklyRewardsText5').text(langReplace(localLang.demoModule.weeklyRewardsText5));
@@ -138,6 +143,8 @@ function get() {
         url: urlPrefix + '/guild/get',
         success(res) {
             if (res.code === 200) {
+                // 存储分区id partitionId
+                window.localStorage.setItem('partitionId', res.data.partitionId);
                 // 判断身份
                 roleTypes = res.data.roleType;
                 if (roleTypes == 1 && res.data.isReview == true) {
@@ -180,6 +187,7 @@ function get() {
                 $('.header .tx').attr('src', res.data.avatar);
                 $('.header .nick').text(res.data.name);
                 guildNick = res.data.name;
+                avatar = res.data.avatar;
                 backgroundUrl = res.data.backgroundUrl;
                 if (res.data.payAccount) {
                     payoneer = res.data.payAccount.payoneer;
@@ -384,7 +392,7 @@ $('.adminSet').click(function () {
 })
 // 公会信息设置
 $('.guildInfoSet').click(function () {
-    window.location.href = `./guildInfoSet.html?guildNick=${guildNick}&backgroundUrl=${backgroundUrl}&payoneer=${payoneer}&usdt=${usdt}&payPal=${payPal}`
+    window.location.href = `./guildInfoSet.html?guildNick=${guildNick}&avatar=${avatar}&backgroundUrl=${backgroundUrl}&payoneer=${payoneer}&usdt=${usdt}&payPal=${payPal}`
 })
 // 我的收入
 $('.memberFlow').click(function (params) {

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

@@ -63,7 +63,11 @@ function translateFun() {
     var langReplace = window.lang.replace;
     var localLang = window.lang;
     $('.text1').text(langReplace(localLang.weeklyRewards.text1));
-    $('.text2').html(langReplace(localLang.weeklyRewards.text2));
+    if (window.localStorage.getItem('partitionId') == 2) {
+        $('.text2').html(langReplace(localLang.weeklyRewards.text2));
+    } else if (window.localStorage.getItem('partitionId') == 8) {
+        $('.text2').html(langReplace(localLang.weeklyRewards.text22));
+    }
     $('.text3').text(langReplace(localLang.weeklyRewards.text3));
     $('.text4').text(langReplace(localLang.weeklyRewards.text4));
     $('.text5').text(langReplace(localLang.weeklyRewards.text5));

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

@@ -61,5 +61,10 @@ function translateFun() {
     var localLang = window.lang;
     $('.text1').text(langReplace(localLang.weeklyRewardsRule.text1));
     $('.text2').html(langReplace(localLang.weeklyRewardsRule.text2));
-    $('.text3').attr('src', langReplace(localLang.weeklyRewardsRule.text3));
+    if (window.localStorage.getItem('partitionId') == 2) {
+        $('.text3').attr('src', langReplace(localLang.weeklyRewardsRule.text3));
+    } else if (window.localStorage.getItem('partitionId') == 8) {
+        $('.text3').attr('src', langReplace(localLang.weeklyRewardsRule.text33));
+    }
+
 }

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

@@ -38,6 +38,7 @@ langAr = {
         audit: 'قيد المراجعة',
         weeklyRewardsText1: 'مكافآت المضيف الأسبوعية',
         weeklyRewardsText2: 'يمكنك الحصول على 2240000 عملة بالمجموع.',
+        weeklyRewardsText22: 'يمكنك الحصول على 3000000 عملة بالمجموع.',
         weeklyRewardsText3: 'احصل على',
         weeklyRewardsText33: `تم الاستلام`,
         weeklyRewardsText4: 'مستوى المضيف',
@@ -75,6 +76,26 @@ langAr = {
         text6: `تأكيد`,
         text7: `طلب إضافة `,
         text8: 'تم تقديم الطلب بنجاح',
+        newText1: 'إنشاء نقابة',
+        newText2: 'قيد المراجعة',
+        newText3: 'يرجى الانتظار بصبر~',
+        newText4: `انضمام`,
+        newText5: 'معرّف الوكيل:',
+        placeholder: 'يرجى إدخال معرّف الوكيل للبحث',
+    },
+    createGuild: {
+        text1: `طلب تسجيل الوكالة`,
+        text2: `صورة الوكالة`,
+        text3: `اسم الوكالة`,
+        text4: `معلومات الاتصال بالوكيل`,
+        text5: `بطاقة هوية الوكيل`,
+        text6: `معرّف الداعي`,
+        text7: `صورة الداعي`,
+        text8: `تم الإرسال بنجاح`,
+        text9: `شكرًا لتقديم طلبك لإنشاء نقابة. سنقوم بمراجعة الطلب خلال 3 أيام عمل. يرجى الانتظار بصبر، وسنوافيك بالرد في أقرب وقت ممكن.`,
+        text10: `تأكيد`,
+        placeholder: `يرجى الإدخال`,
+        null: `لا يمكن ترك الحقول الإلزامية فارغة`,
     },
     guildInfoSet: {
         text1: `إعدادات معلومات الوكالة `,
@@ -326,6 +347,7 @@ langAr = {
     weeklyRewards: {
         text1: `مكافآت المضيف الأسبوعية`,
         text2: `يمكنك الحصول على <b>2240000</b> عملة بالمجموع.`,
+        text22: `يمكنك الحصول على <b>3000000</b> عملة بالمجموع.`,
         text3: `احصل على`,
         text4: `مستوى المضيف`,
         text5: `تم الاستلام`,
@@ -336,6 +358,7 @@ langAr = {
         <p>2 مكافآت العملات: يتم حساب دخل المستخدم من الألماس أسبوعيًا، ويمكنك الحصول على العملات عند الوصول إلى مستوى معين.</p>  
         <p>3 تدرج مكافآت العملات</p>`,
         text3: `./images/weeklyRewardsRule2-ar.png`,
+        text33: `./images/weeklyRewardsRule2-trar.png`,
     },
     agencyDiamondIncome: {
         text1: `إيرادات الألماس للوكالة`, // 阿拉伯文
@@ -345,5 +368,32 @@ langAr = {
         text5: `اختيار التاريخ`, // 阿拉伯文
         text6: `تأكيد`, // 阿拉伯文
         text7: `يبحث`,
-    }
+    },
+    bankTransferLira: {
+        text1: `تحويل بنكي بالليرة`,
+        text2: `تأكيد`,
+        text3: `إلغاء الربط`,
+        text4: `الدولة`,
+        text5: `موافق`,
+        text6: `نوع العملة:`,
+        text7: `الدولة`,
+        text8: `TR+24رقم`,
+        text9: `اسم المستلم`,
+        text10: `لا يمكن ترك الحقول الإجبارية فارغة`,
+        text11: `حساب المستلم(IBAN)`,
+    },
+    CARD_USD: {
+        text1: `بطاقة بالدولار الأمريكي`,
+        text2: `تأكيد`,
+        text3: `إلغاء الربط`,
+        text4: `الدولة`,
+        text5: `موافق`,
+        text6: `نوع العملة:`,
+        text7: `الدولة`,
+        text8: `حساب المستلم`,
+        text9: `اسم المستلم`,
+        text10: `لا يمكن ترك الحقول الإجبارية فارغة`,
+        text11: `حساب المستلم`,
+    },
+
 }

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

@@ -13,7 +13,7 @@ langEn = {
         text8: `Agency Name`,
         text9: `Cancel`,
         text10: `Confirm`,
-        text11: 'Guild Name:',
+        text11: 'Agency Name:',
         text12: `Master`,
         text13: `Admin`,
         text14: `Delete`,
@@ -26,8 +26,8 @@ langEn = {
         texts5: "My Salary",
         newtext1: "My Income",
         newtext2: "Salary Account",
-        newtext3: "Guild Information",
-        newtext4: "Guild Admin",
+        newtext3: "Agency Information",
+        newtext4: "Agency Admin",
         newtext5: "Agency level",
         newtext6: "Current Agency Lv:",
         newtext7: "Next level need:",
@@ -36,6 +36,7 @@ langEn = {
         audit: 'In Audit',
         weeklyRewardsText1: 'Host weekly rewards',
         weeklyRewardsText2: 'You can get 2240000 coins totally.',
+        weeklyRewardsText22: 'You can get 3000000 coins totally.',
         weeklyRewardsText3: 'Get',
         weeklyRewardsText33: 'Got',
         weeklyRewardsText4: 'Host Lv',
@@ -73,6 +74,28 @@ langEn = {
         text6: `Confirm`,
         text7: `Add`,
         text8: 'Submitted',
+        newText1: 'Create a Agency',
+        newText2: 'Under review',
+        newText3: 'Please wait patiently~',
+        newText4: 'Join',
+        newText5: 'Agent ID:',
+        placeholder: 'Please enter the Agent ID to search',
+    },
+    createGuild: {
+        text1: `Agency Registration Application`,
+        text2: `Agency Avatar`,
+        text3: `Agency Name`,
+        text4: `Agent Contact Info`,
+        text5: `Agent ID Card`,
+        text6: `Inviter ID`,
+        text7: `Inviter Pic.`,
+        text8: `Submit Successfully`,
+        text9: `Thank you for submitting your application to create a guild. We will review it within 3 working days.
+        Please
+        wait patiently and we will give you a reply as soon as possible.`,
+        text10: `Confirm`,
+        placeholder: `Please enter`,
+        null: `Mandatory fields cannot be blank`,
     },
     guildInfoSet: {
         text1: `Agency Settings`,
@@ -87,7 +110,7 @@ langEn = {
         textConte2: `Edit`,
         textConte3: `Add`,
         textConte4: `Payment Account`,
-        text55: `Guild Avatar`,
+        text55: `Agency Avatar`,
         toastMsgText1: `GIF upload is not supported at the moment`,
     },
     invitation: {
@@ -95,7 +118,7 @@ langEn = {
         text2: `Find MoliStarID`,
         text3: `Find`,
         text4: `No content`,
-        text5: `Invite to guild?`,
+        text5: `Invite to agency?`,
         text6: `Cancel`,
         text7: `Confirm`,
         text8: `Add`,
@@ -325,6 +348,7 @@ langEn = {
     weeklyRewards: {
         text1: `Host weekly rewards`,
         text2: `You can get <b>2240000</b> coins totally.`,
+        text22: `You can get <b>3000000</b> coins totally.`,
         text3: `Get`,
         text4: `Host Lv`,
         text5: `Got`,
@@ -336,14 +360,41 @@ langEn = {
             reach a certain level.</p>
         <p>3 Coin reward gradient</p>`,
         text3: `./images/weeklyRewardsRule2.png`,
+        text33: `./images/weeklyRewardsRule2-tren.png`,
     },
     agencyDiamondIncome: {
         text1: `Agency Diamond Income`,
-        text2: `Building a guild, you can search for diamond income at any time.`,
+        text2: `Building a agency, you can search for diamond income at any time.`,
         text3: `User exit agency may result in data changes.`,
         text4: `To`,
         text5: `Date selection`,
         text6: `Confirm`,
         text7: `Search`,
-    }
+    },
+    bankTransferLira: {
+        text1: `BankTransfer lira `,
+        text2: `Confirm`,
+        text3: `Unbind `,
+        text4: `Country`,
+        text5: `OK`,
+        text6: `Currency Type:`,
+        text7: `Country`,
+        text8: `TR+24Numbers`,
+        text9: `payeeName`,
+        text10: `Mandatory fields cannot be blank`,
+        text11: `payeeAccount(IBAN)`,
+    },
+    CARD_USD: {
+        text1: `Card usd`,
+        text2: `Confirm`,
+        text3: `Unbind `,
+        text4: `Country`,
+        text5: `OK`,
+        text6: `Currency Type:`,
+        text7: `Country`,
+        text8: `payeeAccount`,
+        text9: `payeeName`,
+        text10: `Mandatory fields cannot be blank`,
+        text11: `payeeAccount`,
+    },
 }

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

@@ -36,6 +36,7 @@ langTr = {
         audit: 'Denetim Aşamasında',
         weeklyRewardsText1: 'Yayıncıya Haftalık Ödüller',
         weeklyRewardsText2: 'Toplamda 2240000 jeton kazanabilirsiniz.',
+        weeklyRewardsText22: 'Toplamda 3000000 jeton kazanabilirsiniz.',
         weeklyRewardsText3: 'Al',
         weeklyRewardsText33: 'Alındı',
         weeklyRewardsText4: ' Seviyesi',
@@ -73,6 +74,27 @@ langTr = {
         text6: `Onayla`,
         text7: `Ekle`,
         text8: 'Gönderildi',
+        newText1: 'Bir Lonca Oluştur',
+        newText2: 'İncelemede',
+        newText3: 'Lütfen sabırla bekleyin~',
+        newText4: `Katıl`,
+        newText5: 'Temsilci Kimliği:',
+        placeholder: 'Aramak için Temsilci Kimliğini giriniz',
+
+    },
+    createGuild: {
+        text1: `Ajans Kayıt Başvurusu`,
+        text2: `Ajans Avatarı`,
+        text3: `Ajans Adı`,
+        text4: `Ajan İletişim Bilgileri`,
+        text5: `Ajan Kimlik Kartı`,
+        text6: `Davet Edenin Kimliği`,
+        text7: `Davet Edenin Fotoğrafı`,
+        text8: `Başarıyla Gönderildi`,
+        text9: `Bir lonca oluşturmak için başvurunuzu gönderdiğiniz için teşekkür ederiz. Başvurunuzu 3 iş günü içinde inceleyeceğiz. Lütfen sabırlı olun, mümkün olan en kısa sürede size bir yanıt vereceğiz.`,
+        text10: `Onayla`,
+        placeholder: `Lütfen girin`,
+        null: `Zorunlu alanlar boş bırakılamaz`,
     },
     guildInfoSet: {
         text1: `Ajans Ayarları`,
@@ -326,6 +348,7 @@ langTr = {
     weeklyRewards: {
         text1: `Yayıncıya Haftalık Ödüller`,
         text2: `Toplamda <b>2240000</b> jeton kazanabilirsiniz.`,
+        text22: `Toplamda <b>3000000</b> jeton kazanabilirsiniz.`,
         text3: `Al`,
         text4: ` Seviyesi`,
         text5: `Alındı`,
@@ -336,6 +359,7 @@ langTr = {
         <p>2 jeton Ödülleri: Kullanıcının elmas gelirleri her hafta hesaplanır, belirli bir seviyeye ulaştığında karşılık gelen madeni paralar verilir.</p>
         <p>3 jeton Ödül Gradyanı</p>`,
         text3: `./images/weeklyRewardsRule2.png`,
+        text33: `./images/weeklyRewardsRule2-trtr.png`,
     },
     agencyDiamondIncome: {
         text1: `Ajans Elmas Geliri`,
@@ -345,6 +369,33 @@ langTr = {
         text5: `Tarih Seçimi`,
         text6: `Onayla`,
         text7: `Ara`,
-    }
+    },
+    bankTransferLira: {
+        text1: `Banka Transferi Lira`,
+        text2: `Onayla`,
+        text3: `Bağlantıyı Kes`,
+        text4: `Ülke`,
+        text5: `Tamam`,
+        text6: `Para Birimi Türü:`,
+        text7: `Ülke`,
+        text8: `TR+24Numara`,
+        text9: `Alıcı Adı`,
+        text10: `Zorunlu alanlar boş bırakılamaz`,
+        text11: `Alıcı Hesabı(IBAN)`,
+    },
+    CARD_USD: {
+        text1: `Kart USD`,
+        text2: `Onayla`,
+        text3: `Bağlantıyı Kes`,
+        text4: `Ülke`,
+        text5: `Tamam`,
+        text6: `Para Birimi Türü:`,
+        text7: `Ülke`,
+        text8: `Alıcı Hesabı`,
+        text9: `Alıcı Adı`,
+        text10: `Zorunlu alanlar boş bırakılamaz`,
+        text11: `Alıcı Hesabı`,
+    },
+
 
 };

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

@@ -38,6 +38,7 @@ langZh = {
         audit: '審核中',
         weeklyRewardsText1: '主播每週獎勵',
         weeklyRewardsText2: '您可以總共獲得 2240000 金幣。',
+        weeklyRewardsText22: '您可以總共獲得 3000000 金幣。',
         weeklyRewardsText3: '領取',
         weeklyRewardsText33: '已獲得',
         weeklyRewardsText4: '主播等級',
@@ -75,6 +76,27 @@ langZh = {
         text6: `確認`,
         text7: `添加請求`,
         text8: '請求成功提交',
+        newText1: '創建公會',
+        newText2: '審核中',
+        newText3: '請耐心等待~',
+        newText4: `加入`,
+        newText5: '代理人ID:',
+        placeholder: '請輸入代理人ID進行搜尋',
+
+    },
+    createGuild: {
+        text1: `代理註冊申請`,
+        text2: `代理頭像`,
+        text3: `代理名稱`,
+        text4: `代理聯絡資訊`,
+        text5: `代理身份證`,
+        text6: `邀請人ID`,
+        text7: `邀請人照片`,
+        text8: `提交成功`,
+        text9: `感謝您提交創建公會的申請。我們將在3個工作日內審核您的申請。請耐心等待，我們將盡快給您回覆。`,
+        text10: `確認`,
+        placeholder: `請輸入`,
+        null: `必填項不能為空`,
     },
     guildInfoSet: {
         text1: `公會信息設置`,
@@ -327,6 +349,7 @@ langZh = {
     weeklyRewards: {
         text1: `主播每週獎勵`,
         text2: `您可以總共獲得 <b>2240000</b> 金幣。`,
+        text22: `您可以總共獲得 <b>3000000</b> 金幣。`,
         text3: `領取`,
         text4: `主播等級`,
         text5: `已獲得`,
@@ -337,6 +360,7 @@ langZh = {
         <p>2 金幣獎勵：每週計算用戶的鑽石收入，達到特定級別時可以獲得相應的金幣獎勵。</p>  
         <p>3 金幣獎勵梯度</p>`,
         text3: `./images/weeklyRewardsRule2.png`,
+        text33: `./images/weeklyRewardsRule2-trtr.png`,
     },
     agencyDiamondIncome: {
         text1: `公會鑽石收入`, // 繁體中文
@@ -346,5 +370,32 @@ langZh = {
         text5: `日期選擇`, // 繁體中文
         text6: `確認`, // 繁體中文
         text7: `查詢`,
-    }
+    },
+    bankTransferLira: {
+        text1: `銀行轉帳里拉`,
+        text2: `確認`,
+        text3: `解除綁定`,
+        text4: `國家`,
+        text5: `確定`,
+        text6: `貨幣類型：`,
+        text7: `國家`,
+        text8: `TR+24數字`,
+        text9: `收款人名稱`,
+        text10: `必填欄位不能為空`,
+        text11: `收款人帳號(IBAN)`,
+    },
+    CARD_USD: {
+        text1: `卡片美元`,
+        text2: `確認`,
+        text3: `解除綁定`,
+        text4: `國家`,
+        text5: `確定`,
+        text6: `貨幣類型：`,
+        text7: `國家`,
+        text8: `收款人帳號`,
+        text9: `收款人名稱`,
+        text10: `必填欄位不能為空`,
+        text11: `收款人帳號`,
+    },
+
 }

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

@@ -220,11 +220,11 @@
   <script src="../../common/js/vconsole.min.js"></script>
   <script src="../../common/js/common2.js"></script>
   <script src="../../common/js/layer.js"></script>
-  <script src="./local/en.js"></script>
-  <script src="./local/zh.js"></script>
-  <script src="./local/ar.js"></script>
-  <script src="./local/tr.js"></script>
-  <script src="./js/salary.js"></script>
+  <script src="./local/en.js?v=1.0"></script>
+  <script src="./local/zh.js?v=1.0"></script>
+  <script src="./local/ar.js?v=1.0"></script>
+  <script src="./local/tr.js?v=1.0"></script>
+  <script src="./js/salary.js?v=1.0"></script>
   <script src="../../common/local/langHandler.js"></script>
 </body>
 

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

@@ -59,5 +59,5 @@
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
 <script src="./local/tr.js"></script>
-<script src="./js/weeklyRewards.js?v=1.11"></script>
+<script src="./js/weeklyRewards.js?v=2"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -35,5 +35,5 @@
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
 <script src="./local/tr.js"></script>
-<script src="./js/weeklyRewardsRule.js"></script>
+<script src="./js/weeklyRewardsRule.js?v=2"></script>
 <script src="../../common/local/langHandler.js"></script>

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

@@ -13,7 +13,7 @@ langEn = {
         text8: `Agency Name`,
         text9: `Cancel`,
         text10: `Confirm`,
-        text11: 'Guild Name:',
+        text11: 'Agency Name:',
         text12: `Master`,
         text13: `Admin`,
         text14: `Delete`,
@@ -81,7 +81,7 @@ langEn = {
         textConte2: `Edit`,
         textConte3: `Add`,
         textConte4: `Payment Account`,
-        text55: `Guild Avatar`,
+        text55: `Agency Avatar`,
         toastMsgText1: `GIF upload is not supported at the moment`,  
     },
     invitation: {
@@ -89,7 +89,7 @@ langEn = {
         text2: `Find MoliStarID`,
         text3: `Find`,
         text4: `No content`,
-        text5: `Invite to guild?`,
+        text5: `Invite to Agency?`,
         text6: `Cancel`,
         text7: `Confirm`,
         text8: `Add`,

view/molistar/modules/inform/index.html

@@ -19,7 +19,9 @@
 
   <div class="inform">
     <div class="inform-radio">
-      <div class="radio-box"><span class="radio active" data-id="0"></span><span
+      <div class="radio-box"><span class="radio active" data-id="9"></span><span
+          class="title" id="text21"></span></div>
+      <div class="radio-box"><span class="radio " data-id="0"></span><span
           class="title" id="text1"></span></div>
       <div class="radio-box"><span class="radio" data-id="1"></span><span
           class="title" id="text2"></span></div>
@@ -96,10 +98,11 @@
 <script src="../../common/js/common2.js"></script>
 <script src="../../common/js/vconsole.min.js"></script>
 <script src="../../common/js/template-web.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.2"></script>
+<script src="./local/en.js?v=1.0"></script>
+<script src="./local/zh.js?v=1.0"></script>
+<script src="./local/ar.js?v=1.0"></script>
+<script src="./local/tr.js?v=1.0"></script>
+<script src="./js/index.js?v=2"></script>
 <script src="../../common/local/langHandler.js"></script>
 
 </html>

view/molistar/modules/inform/js/index.js

@@ -45,6 +45,7 @@ function translateFun() {
   $('#text11').html(langReplace(localLang.demoModule.text13));
   $('#text14').html(langReplace(localLang.demoModule.text14));
   $('#text15').html(langReplace(localLang.demoModule.text15));
+  $('#text21').html(langReplace(localLang.demoModule.text21));
 }
 function requestUidFromNative() {
   target = locateObj.reportUid; //获取别举报人id

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

@@ -2,26 +2,27 @@
 langAr = {
     // 模块
     demoModule: {
-        title: `البلاغ`,
-        text1: `محتوى إباحي أو مقزز`,
+        title: `الإبلاغ`,
+        text1: `محتوى إباحي أو مبتذل`,
         text2: `حساسية سياسية`,
-        text3: `إعلانات سخيفة`,
-        text4: `اعتداء لفظي`,
-        text5: `تعاملات غير قانونية`,
+        text3: `إعلانات غير مرغوب فيها`,
+        text4: `إساءة لفظية`,
+        text5: `معاملات غير قانونية`,
         text6: `انتهاك الخصوصية`,
-        text7: `عنف أو إرهاب`,
-        text8: `انتهاك حقوق الملكية`,
-        text9: `آخر`,
-        text10: `أدخل محتوى البلاغ`,
-        text11: `تحميل لقطة شاشة (حد أقصى 1 ميجابايت)`,
+        text7: `العنف أو الإرهاب`,
+        text8: `انتهاك حقوق النشر`,
+        text9: `أخرى`,
+        text10: `أدخل محتوى الإبلاغ`,
+        text11: `رفع لقطة شاشة (بحد أقصى 1 ميجابايت)`,
         text12: `إعادة التحميل`,
-        text13: `يرجى تحميل على الأقل لقطة شاشة ذات صلة لضمان الدقة.`,
+        text13: `يرجى تحميل لقطة شاشة واحدة على الأقل لتحسين الدقة.`,
         text14: `إرسال`,
-        text15: `تم تقديم البلاغ`,
-        text16: `تحميل الصورة`,
-        text17: `تم التحميل بنجاح`,
-        text18: `فشل التحميل، يرجى إعادة المحاولة`,
-        text19: `أدخل محتوى البلاغ`,
-        text20: `تم التقديم`,
-    }
+        text15: `تم إرسال الإبلاغ`,
+        text16: `جارٍ رفع الصورة`,
+        text17: `تم الرفع بنجاح`,
+        text18: `فشل الرفع، يرجى المحاولة مرة أخرى`,
+        text19: `أدخل محتوى الإبلاغ`,
+        text20: `تم الإرسال`,
+        text21: `محتوى أو سلوك غير لائق يتعلق بالقاصرين (بما في ذلك على سبيل المثال لا الحصر): كشف خصوصية القاصرين؛ التحريض أو التحرش غير اللائق؛ قضايا أخرى تتعلق بالمستخدمين القاصرين`,
+    }    
 }

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

@@ -23,5 +23,6 @@ langEn = {
         text18: `Upload Failed, Please Retry`,
         text19: `Enter Report Content`,
         text20: `Submitted`,
+        text21: `Improper content or behavior involving minors (including but not limited to): exposing minors' privacy; inappropriate inducement or harassment; other issues involving minor users`,
     }
 }

view/molistar/modules/inform/local/tr.js

@@ -0,0 +1,29 @@
+// tr
+langTr = {
+    // 模块
+    demoModule: {
+        title: `Rapor Et`,
+        text1: `Pornografik veya Kaba İçerik`,
+        text2: `Politik Hassasiyet`,
+        text3: `Spam Reklam`,
+        text4: `Sözlü Taciz`,
+        text5: `Yasadışı İşlemler`,
+        text6: `Gizlilik İhlali`,
+        text7: `Şiddet veya Terörizm`,
+        text8: `Telif Hakkı İhlali`,
+        text9: `Diğer`,
+        text10: `Rapor İçeriğini Girin`,
+        text11: `Ekran Görüntüsü Yükle (Maksimum 1MB)`,
+        text12: `Tekrar Yükle`,
+        text13: `Doğruluğu artırmak için en az bir ilgili ekran görüntüsü yükleyin.`,
+        text14: `Gönder`,
+        text15: `Rapor Gönderildi`,
+        text16: `Resim Yükleniyor`,
+        text17: `Yükleme Başarılı`,
+        text18: `Yükleme Başarısız, Lütfen Tekrar Deneyin`,
+        text19: `Rapor İçeriğini Girin`,
+        text20: `Gönderildi`,
+        text21: `Reşit olmayanları içeren uygunsuz içerik veya davranışlar (bunlarla sınırlı olmamak üzere): reşit olmayanların gizliliğini ifşa etmek; uygunsuz yönlendirme veya taciz; reşit olmayan kullanıcılarla ilgili diğer sorunlar`,
+    }
+    
+}

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

@@ -2,26 +2,28 @@
 langZh = {
     // 模塊
     demoModule: {
-        title:`舉報`,
-        text1:`色情低俗，以任何形式傳播淫穢、色情、低俗擦邊的內容`,
-        text2:`政治敏感，進行反黨反政府或帶有侮辱詆毀黨和國家的內容`,
-        text3:`垃圾廣告，傳播垃圾廣告或違法違規廣告信息`,
-        text4:`言語攻擊，惡意抹黑、詆毀或辱罵他人`,
-        text5:`違規交易，發佈線下交易或可能涉及詐騙的內容`,
-        text6:`泄露隱私，以任何形式泄露他人隱私`,
-        text7:`暴力恐怖，傳播暴力、血腥、威脅生命健康的內容或展示槍支、刀具`,
-        text8:`侵權盜版，侵犯他人合法版權`,
-        text9:`其它`,
-        text10:`請輸入舉報內容`,
-        text11:`上傳截圖 (圖片不能超過1M)`,
-        text12:`重新上傳`,
-        text13:`需要至少上傳一張相關截圖證明，以提高舉報的准確度`,
-        text14:`提交`,
-        text15:`舉報成功`,
-        text16:`上傳圖片中`,
-        text17:`上傳成功`,
-        text18:`上傳失敗，請重新上傳`,
-        text19:`請輸入舉報內容`,
-        text20:`已提交`,
+        title: `舉報`,
+        text1: `色情或低俗內容`,
+        text2: `政治敏感性`,
+        text3: `垃圾廣告`,
+        text4: `言語辱罵`,
+        text5: `非法交易`,
+        text6: `隱私侵犯`,
+        text7: `暴力或恐怖主義`,
+        text8: `版權侵權`,
+        text9: `其他`,
+        text10: `輸入舉報內容`,
+        text11: `上傳截圖（最大1MB）`,
+        text12: `重新上傳`,
+        text13: `請上傳至少一張相關截圖以提高準確性。`,
+        text14: `提交`,
+        text15: `舉報已提交`,
+        text16: `正在上傳圖片`,
+        text17: `上傳成功`,
+        text18: `上傳失敗，請重試`,
+        text19: `輸入舉報內容`,
+        text20: `已提交`,
+        text21: `涉及未成年的不當內容或行為（包括但不限於）：暴露未成年隱私；進行不當誘導或騷擾；其他涉及未成年用戶的問題`,
     }
+    
 }

view/molistar/modules/level/css/index.css

@@ -1,245 +1,313 @@
 html,
 body {
   width: 100%;
+  background: #0F0900;
+}
+
+html .page1 .back,
+body .page1 .back {
+  width: 10rem;
+  height: 6.96rem;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  z-index: 10;
+  overflow: hidden;
+  background: url(../images/top.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+html .page1 .back .backIcon,
+body .page1 .back .backIcon {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.4rem;
+  top: 1.46667rem;
+  z-index: 2;
+}
+
+html .page1 .back .tab,
+body .page1 .back .tab {
+  width: 80%;
+  height: 0.64rem;
+  line-height: 0.64rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 1.36rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.45333rem;
+  font-weight: 400;
+  z-index: 2;
+}
+
+html .page1 .back .tab div,
+body .page1 .back .tab div {
+  width: 50%;
+  text-align: center;
+}
+
+html .page1 .back .tab .act,
+body .page1 .back .tab .act {
+  color: #fff;
+  font-weight: 500;
+}
+
+html .page1 .back .myInfo,
+body .page1 .back .myInfo {
+  width: 9.02667rem;
+  height: 4.57333rem;
+  background: url(../images/myInfoBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 2.4rem auto;
+  position: relative;
+}
+
+html .page1 .back .myInfo .tx,
+body .page1 .back .myInfo .tx {
+  width: 1.68rem;
+  height: 1.68rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.72rem;
+  left: 0.56rem;
+}
+
+html .page1 .back .myInfo .top,
+body .page1 .back .myInfo .top {
+  position: absolute;
+  top: 0.90667rem;
+  left: 2.48rem;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  width: 3rem;
+}
+
+html .page1 .back .myInfo .top .level,
+body .page1 .back .myInfo .top .level {
+  color: #613B00;
+  font-size: 0.48rem;
+  font-weight: 600;
+  display: inline-block;
+}
+
+html .page1 .back .myInfo .top .level b,
+body .page1 .back .myInfo .top .level b {
+  font-weight: bold;
+}
+
+html .page1 .back .myInfo .top .levelIcon,
+body .page1 .back .myInfo .top .levelIcon {
+  display: inline-block;
+  width: 1.30667rem;
+  height: 0.66667rem;
+}
+
+html .page1 .back .myInfo .bootom,
+body .page1 .back .myInfo .bootom {
+  position: absolute;
+  left: 2.48rem;
+  font-size: 0.34667rem;
+  color: #613B00;
+  font-weight: 500;
+  top: 1.70667rem;
+}
+
+html .page1 .back .myInfo .lineBox,
+body .page1 .back .myInfo .lineBox {
+  width: 7.92rem;
+  height: 0.16rem;
+  border-radius: 0.16rem;
+  background: #fff;
+  position: absolute;
+  top: 3.12rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+html .page1 .back .myInfo .lineBox .line,
+body .page1 .back .myInfo .lineBox .line {
+  width: 0%;
   height: 100%;
-  background-color: #F4F4FB;
-}
-
-img {
-  width: 100%;
-  vertical-align: top;
-}
-
-.level-head {
-  width: 100%;
-  height: 1.33333rem;
+  position: absolute;
   top: 0;
   left: 0;
-  z-index: 9;
-  display: flex;
-  display: -moz-box;
-  position: fixed;
-  background: #F4F4FB;
+  background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
+  border-radius: 0.16rem;
 }
 
-.level-head .level {
-  position: relative;
-  display: flex;
-  display: -moz-box;
-  -ms-justify-content: center;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  width: 50%;
-  height: 1.06667rem;
-  font-size: 0.42667rem;
-  color: #999999;
+html .page1 .back .myInfo .lineBox .thisLevel,
+body .page1 .back .myInfo .lineBox .thisLevel {
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  top: -0.50667rem;
 }
 
-.level-head .level.active {
-  font-weight: bold;
-  color: #333333;
+html .page1 .back .myInfo .lineBox .thisLevel b,
+body .page1 .back .myInfo .lineBox .thisLevel b {
+  font-size: 0.32rem;
+  font-weight: 500;
 }
 
-.level-head .level.active span {
+html .page1 .back .myInfo .lineBox .nextLevel,
+body .page1 .back .myInfo .lineBox .nextLevel {
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  right: 0;
+  top: -0.50667rem;
+}
+
+html .page1 .back .myInfo .lineBox .nextLevel b,
+body .page1 .back .myInfo .lineBox .nextLevel b {
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+html .page1 .back .myInfo p,
+body .page1 .back .myInfo p {
+  text-align: center;
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 5.33333rem;
+  width: 100%;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 0;
-  width: 0.24rem;
-  height: 0.13333rem;
-  background-color: #FFA936;
-  border-radius: 0.06667rem;
+  top: 3.44rem;
 }
 
-.swiper-container {
-  margin-top: 1.33333rem;
+html .page1 .rule,
+body .page1 .rule {
+  width: 100%;
+  margin-top: 7.3rem;
 }
 
-.user-content,
-.user-charm {
-  width: 8.93333rem;
-  margin: 0 auto 1.01333rem;
-}
-
-.user-content .user-head,
-.user-charm .user-head {
-  height: 2.66667rem;
-  display: flex;
-  display: -moz-box;
-  -ms-justify-content: center;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.user-content .user-head .user-avatar,
-.user-charm .user-head .user-avatar {
-  width: 1.6rem;
-  height: 1.6rem;
-  border-radius: 50%;
-  border: 0.08rem solid #FFA027;
-}
-
-.user-content .treasure,
-.user-charm .treasure {
-  font-size: 0.29333rem;
-  display: flex;
-  display: -moz-box;
-  justify-content: space-between;
-}
-
-.user-content .treasure .treasure-now,
-.user-charm .treasure .treasure-now {
-  color: #B15C00;
-}
-
-.user-content .treasure .treasure-upgrade,
-.user-charm .treasure .treasure-upgrade {
-  color: #666;
-}
-
-.user-content .progress-bar,
-.user-charm .progress-bar {
+html .page1 .rule .ruleText,
+body .page1 .rule .ruleText {
+  width: 9.2rem;
+  padding: 0.98667rem 0.32rem 0.42667rem;
   position: relative;
-  width: 8.93333rem;
-  height: 0.42667rem;
-  background: #FFF0CC;
-  border-radius: 0.25333rem;
-  margin-bottom: 0.32rem;
+  background: linear-gradient(180deg, #432405 0%, #201201 100%);
+  border: 0.01333rem solid #C98853;
+  border-radius: 0.26667rem;
+  margin: 0 auto 0.50667rem;
+  box-sizing: border-box;
 }
 
-.user-content .progress-bar .treasure-now,
-.user-charm .progress-bar .treasure-now {
+html .page1 .rule .ruleText .title,
+body .page1 .rule .ruleText .title {
   position: absolute;
+  top: 0;
   left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 0.32rem;
-  color: #B15C00;
+  transform: translateX(-50%);
+  padding: 0rem 0.45333rem;
+  text-align: center;
+  color: #3E2000;
+  height: 0.69333rem;
+  line-height: 0.64rem;
+  background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
+  border-top-left-radius: 0rem;
+  border-top-right-radius: 0rem;
+  border-bottom-left-radius: 0.26667rem;
+  border-bottom-right-radius: 0.26667rem;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  white-space: nowrap;
 }
 
-.user-content .progress-bar .progress-bar-now,
-.user-charm .progress-bar .progress-bar-now {
-  width: 10%;
-  float: left;
+html .page1 .rule .ruleText p,
+body .page1 .rule .ruleText p {
+  color: #FCD19D;
+  font-weight: 400;
+  font-size: 0.34667rem;
+  line-height: 0.48rem;
+}
+
+html .page1 .rule .ruleText img,
+body .page1 .rule .ruleText img {
   display: block;
-  height: inherit;
-  border-radius: inherit;
-  background: #FFB606;
+  margin: 0.37333rem auto 0rem;
+  width: 8.56rem;
 }
 
-.user-content .grade,
-.user-charm .grade {
-  position: relative;
-  display: flex;
-  display: -moz-box;
-  justify-content: space-between;
-  font-size: 0.32rem;
-  color: #999;
+html .page1 .rule .ruleText .img2,
+body .page1 .rule .ruleText .img2 {
+  width: 7.14667rem;
+  margin: 0.37333rem 0 0 0;
 }
 
-.user-content .grade .treasure-upgrade,
-.user-charm .grade .treasure-upgrade {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+html .page2 .back,
+body .page2 .back {
+  background: url(../images/top2.png) no-repeat;
+  background-size: 100% 100%;
 }
 
-.user-content .grade .treasure-upgrade .num,
-.user-charm .grade .treasure-upgrade .num {
-  color: #FFAE45;
+html .page2 .back .myInfo,
+body .page2 .back .myInfo {
+  background: url(../images/myInfoBg2.png) no-repeat;
+  background-size: 100% 100%;
 }
 
-.user-content .grade .grade-now,
-.user-charm .grade .grade-now {
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  border-radius: 0.21333rem;
-  padding: 0 0.24rem;
-  background-color: #FFF0CC;
-  color: #FFA027;
+html .page2 .back .myInfo .top .level,
+body .page2 .back .myInfo .top .level {
+  color: #571E6D;
 }
 
-.user-content .grade .grade-next,
-.user-charm .grade .grade-next {
-  height: 0.42667rem;
-  line-height: 0.42667rem;
-  border-radius: 0.21333rem;
-  padding: 0 0.24rem;
-  background-image: linear-gradient(to right, #FFDCBB, #FFB810);
-  color: #FFFFFF;
+html .page2 .back .myInfo .bootom,
+body .page2 .back .myInfo .bootom {
+  color: #571E6D;
 }
 
-.user-content.user-charm .user-head .user-avatar,
-.user-charm.user-charm .user-head .user-avatar {
-  border: 0.08rem solid #BD80FF;
+html .page2 .back .myInfo .lineBox .line,
+body .page2 .back .myInfo .lineBox .line {
+  background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
 }
 
-.user-content.user-charm .progress-bar,
-.user-charm.user-charm .progress-bar {
-  background: #EFECFF;
+html .page2 .back .myInfo .lineBox .thisLevel,
+body .page2 .back .myInfo .lineBox .thisLevel {
+  color: #571E6D;
 }
 
-.user-content.user-charm .progress-bar .treasure-now,
-.user-charm.user-charm .progress-bar .treasure-now {
-  color: #8400AC;
+html .page2 .back .myInfo .lineBox .nextLevel,
+body .page2 .back .myInfo .lineBox .nextLevel {
+  color: #571E6D;
 }
 
-.user-content.user-charm .progress-bar .progress-bar-now,
-.user-charm.user-charm .progress-bar .progress-bar-now {
-  background: #BD80FF;
+html .page2 .back .myInfo p,
+body .page2 .back .myInfo p {
+  color: #571E6D;
 }
 
-.user-content.user-charm .grade,
-.user-charm.user-charm .grade {
-  position: relative;
-  display: flex;
-  display: -moz-box;
-  justify-content: space-between;
-  font-size: 0.32rem;
-  color: #999;
+html .page2 .rule2,
+body .page2 .rule2 {
+  display: none;
 }
 
-.user-content.user-charm .grade .treasure-upgrade .num,
-.user-charm.user-charm .grade .treasure-upgrade .num {
-  color: #BD80FF;
+html .page2 .rule2 .ruleText,
+body .page2 .rule2 .ruleText {
+  background: linear-gradient(180deg, #220543 0%, #160120 100%);
+  border: 0.01333rem solid #7E53C9;
 }
 
-.user-content.user-charm .grade .grade-now,
-.user-charm.user-charm .grade .grade-now {
-  background-color: #EFECFF;
-  color: #D16FF2;
+html .page2 .rule2 .ruleText .title,
+body .page2 .rule2 .ruleText .title {
+  background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
 }
 
-.user-content.user-charm .grade .grade-next,
-.user-charm.user-charm .grade .grade-next {
-  background-image: linear-gradient(to right, #E1DBFF, #BD80FF);
+html .page2 .rule2 .ruleText p,
+body .page2 .rule2 .ruleText p {
+  color: #E7B8FF;
 }
 
-.explain {
-  width: 9.04rem;
-  margin: 0.53333rem auto 0;
-}
-
-.explain .explain-tit {
-  font-size: 0.4rem;
-  color: #333;
-}
-
-.explain .explain-title {
-  margin-top: 0.13333rem;
-  font-size: 0.29333rem;
-  color: #666;
-  line-height: 0.53333rem;
-}
-
-.explain-img {
-  margin-top: 0.26667rem;
-}
-
-.effects-img {
-  margin-top: 0.53333rem;
+.rule2 {
+  display: none;
 }

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

@@ -1,223 +1,290 @@
-@function px2rem($px, $rem:75) {
-  @return $px / $rem+rem
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 html,
 body {
-  width: 100%;
-  height: 100%;
-  background-color: #F4F4FB;
-}
+    width: 100%;
+    background: #0F0900;
 
-img {
-  width: 100%;
-  vertical-align: top;
-}
+    .page1 {
+        .back {
+            width: px2rem(750);
+            height: px2rem(522);
+            position: fixed;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(0);
+            z-index: 10;
+            overflow: hidden;
+            background: url(../images/top.png) no-repeat;
+            background-size: 100% 100%;
 
-@import '../../../common/css/flex.scss';
+            .backIcon {
+                width: px2rem(44);
+                height: px2rem(44);
+                position: absolute;
+                left: px2rem(30);
+                top: px2rem(110);
+                z-index: 2;
+            }
 
-.level-head {
-  width: 100%;
-  height: px2rem(100);
-  top: 0;
-  left: 0;
-  z-index: 9;
-  @include flex();
-  position: fixed;
-  background: #F4F4FB;
+            .tab {
+                width: 80%;
+                height: px2rem(48);
+                line-height: px2rem(48);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                top: px2rem(102);
+                left: 50%;
+                transform: translateX(-50%);
+                color: rgba(255, 255, 255, .5);
+                font-size: px2rem(34);
+                font-weight: 400;
+                z-index: 2;
 
-  .level {
-    position: relative;
-    @include flex();
-    @include flex-justify-center();
-    @include flex-align-center();
-    width: 50%;
-    height: px2rem(80);
-    font-size: px2rem(32);
-    color: #999999;
+                div {
+                    width: 50%;
+                    text-align: center;
+                }
 
-    &.active {
-      font-weight: bold;
-      color: #333333;
+                .act {
+                    color: #fff;
+                    font-weight: 500;
+                }
+            }
 
-      span {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 0;
-        width: px2rem(18);
-        height: px2rem(10);
-        background-color: #FFA936;
-        border-radius: px2rem(5);
-      }
-    }
-  }
-}
+            .myInfo {
+                width: px2rem(677);
+                height: px2rem(343);
+                background: url(../images/myInfoBg.png) no-repeat;
+                background-size: 100% 100%;
+                margin: px2rem(180) auto;
+                position: relative;
 
-.swiper-container{
-  margin-top: px2rem(100);
-}
-.user-content,
-.user-charm {
+                .tx {
+                    width: px2rem(126);
+                    height: px2rem(126);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(54);
+                    left: px2rem(42);
+                }
 
-  width: px2rem(670);
-  // height: px2rem(340);
-  margin: 0 auto px2rem(76, );
-  .user-head {
-    height: px2rem(200);
-    @include flex();
-    @include flex-justify-center();
-    @include flex-align-center();
-    flex-direction: column;
+                .top {
+                    position: absolute;
+                    top: px2rem(68);
+                    left: px2rem(186);
+                    height: px2rem(50);
+                    line-height: px2rem(50);
+                    width: 3rem;
 
-    .user-avatar {
-      width: px2rem(120);
-      height: px2rem(120);
-      border-radius: 50%;
-      border: px2rem(6) solid #FFA027;
-    }
-  }
+                    .level {
+                        color: #613B00;
+                        font-size: px2rem(36);
+                        font-weight: 600;
+                        display: inline-block;
+                        b{
+                            font-weight: bold;
+                        }
+                    }
 
-  .treasure {
-    font-size: px2rem(22);
-    @include flex();
-    justify-content: space-between;
-    // margin-bottom: px2rem(19);
+                    .levelIcon {
+                        display: inline-block;
+                        width: px2rem(98);
+                        height: px2rem(50);
+                    }
+                }
 
-    .treasure-now {
-      color: #B15C00;
-    }
+                .bootom {
+                    position: absolute;
+                    left: px2rem(186);
+                    font-size: px2rem(26);
+                    color: #613B00;
+                    font-weight: 500;
+                    top: px2rem(128);
+                }
 
-    .treasure-upgrade {
-      color: #666;
-    }
-  }
+                .lineBox {
+                    width: px2rem(594);
+                    height: px2rem(12);
+                    border-radius: px2rem(12);
+                    background: #fff;
+                    position: absolute;
+                    top: px2rem(234);
+                    left: 50%;
+                    transform: translateX(-50%);
 
-  .progress-bar {
-    position: relative;
-    width: px2rem(670);
-    height: px2rem(32);
-    background: #FFF0CC;
-    border-radius: px2rem(19);
-    margin-bottom: px2rem(24);
+                    .line {
+                        width: 0%;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
+                        border-radius: px2rem(12);
+                    }
 
-    .treasure-now {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: px2rem(24, );
-      color: #B15C00;
-    }
+                    .thisLevel {
+                        color: #613B00;
+                        font-size: px2rem(24);
+                        font-weight: 500;
+                        position: absolute;
+                        left: 0;
+                        top: px2rem(-38);
 
-    .progress-bar-now {
-      width: 10%;
-      float: left;
-      display: block;
-      height: inherit;
-      border-radius: inherit;
-      background: #FFB606;
-    }
-  }
+                        b {
+                            font-size: px2rem(24);
+                            font-weight: 500;
+                        }
+                    }
 
-  .grade {
-    position: relative;
-    @include flex();
-    justify-content: space-between;
-    font-size: px2rem(24, );
-    color: #999;
-    .treasure-upgrade{
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      .num{
-        color: #FFAE45;
-      }
-    }
-    .grade-now{
-      height: px2rem(32, );
-      line-height: px2rem(32, );
-      border-radius: px2rem(16, );
-      padding: 0 px2rem(18, );
-      background-color: #FFF0CC;
-      color: #FFA027;
-    }
-    .grade-next{
-      height: px2rem(32, );
-      line-height: px2rem(32, );
-      border-radius: px2rem(16, );
-      padding: 0 px2rem(18, );
-      background-image: linear-gradient(to right, #FFDCBB, #FFB810);
-      color: #FFFFFF;
-    }
-  }
+                    .nextLevel {
+                        color: #613B00;
+                        font-size: px2rem(24);
+                        font-weight: 500;
+                        position: absolute;
+                        right: 0;
+                        top: px2rem(-38);
 
-  &.user-charm{
-    .user-head {
-      .user-avatar {
-        border: px2rem(6) solid #BD80FF;
-      }
-    }
-    .progress-bar {
-      background: #EFECFF;
-  
-      .treasure-now {
-        color: #8400AC;
-      }
-  
-      .progress-bar-now {
-        background: #BD80FF;
-      }
-    }
-    .grade {
-      position: relative;
-      @include flex();
-      justify-content: space-between;
-      font-size: px2rem(24, );
-      color: #999;
-      .treasure-upgrade{
-        .num{
-          color: #BD80FF;
+                        b {
+                            font-size: px2rem(24);
+                            font-weight: 500;
+                        }
+                    }
+                }
+
+                p {
+                    text-align: center;
+                    color: #613B00;
+                    font-size: px2rem(24);
+                    font-weight: px2rem(400);
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    top: px2rem(258);
+                }
+            }
+        }
+
+        .rule {
+            width: 100%;
+            margin-top: 7.3rem;
+            // display: none;
+            .ruleText {
+                width: px2rem(690);
+                padding: px2rem(74) px2rem(24) px2rem(32);
+                position: relative;
+                background: linear-gradient(180deg, #432405 0%, #201201 100%);
+                border: px2rem(1) solid #C98853;
+                border-radius: px2rem(20);
+                margin: 0 auto px2rem(38);
+                box-sizing: border-box;
+
+                .title {
+                    position: absolute;
+                    top: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    padding: px2rem(0) px2rem(34);
+                    text-align: center;
+                    color: #3E2000;
+                    height: px2rem(52);
+                    line-height: px2rem(48);
+                    background: linear-gradient(270deg, #FFB761 0%, #FFE8CC 47%, #FFB761 100%);
+                    border-top-left-radius: px2rem(0);
+                    border-top-right-radius: px2rem(0);
+                    border-bottom-left-radius: px2rem(20);
+                    border-bottom-right-radius: px2rem(20);
+                    font-size: px2rem(28);
+                    font-weight: 500;
+                    white-space: nowrap;
+                }
+
+                p {
+                    color: #FCD19D;
+                    font-weight: 400;
+                    font-size: px2rem(26);
+                    line-height: px2rem(36);
+                }
+
+                img {
+                    display: block;
+                    margin: px2rem(28) auto px2rem(0);
+                    width: px2rem(642);
+                }
+
+                .img2 {
+                    width: px2rem(536);
+                    margin: px2rem(28) 0 0 0;
+                }
+            }
+        }
+    }
+
+    .page2 {
+        .back {
+            background: url(../images/top2.png) no-repeat;
+            background-size: 100% 100%;
+
+            .myInfo {
+                background: url(../images/myInfoBg2.png) no-repeat;
+                background-size: 100% 100%;
+
+                .tx {}
+
+                .top {
+
+                    .level {
+                        color: #571E6D;
+                    }
+                }
+
+                .bootom {
+                    color: #571E6D;
+                }
+
+                .lineBox {
+
+                    .line {
+                        background: linear-gradient(90deg, #A964FF 0%, #CC99FF 98%);
+                    }
+
+                    .thisLevel {
+                        color: #571E6D;
+                    }
+
+                    .nextLevel {
+                        color: #571E6D;
+                    }
+                }
+
+                p {
+                    color: #571E6D;
+                }
+            }
+        }
+
+        .rule2 {
+            display: none;
+
+            .ruleText {
+                background: linear-gradient(180deg, #220543 0%, #160120 100%);
+                border: px2rem(1) solid #7E53C9;
+
+                .title {
+                    background: linear-gradient(270deg, #D0B1FF 3%, #F8F4FF 47%, #D0B1FF 100%);
+                }
+
+                p {
+                    color: #E7B8FF;
+                }
+            }
         }
-      }
-      .grade-now{
-        background-color: #EFECFF;
-        color: #D16FF2;
-      }
-      .grade-next{
-        background-image: linear-gradient(to right, #E1DBFF, #BD80FF);
-      }
     }
-  }
 }
-
-.explain {
-  width: px2rem(678);
-  margin: px2rem(40) auto 0;
-
-  .explain-tit {
-    font-size: px2rem(30);
-    color: #333;
-  }
-
-  .explain-title {
-    margin-top: px2rem(10);
-    font-size: px2rem(22);
-    color: #666;
-    line-height: px2rem(40);
-  }
-}
-
-.explain-img{
-  margin-top: px2rem(20);
-}
-.effects-img{
-  margin-top: px2rem(40);
-}
-
-// .swiper-slide{
-//   height: px2rem(1900);
-//   overflow: auto;
-// }
-
+.rule2{
+    display: none;
+}