完成boom分区规则

view/molistar/home/css/index.css

@@ -62,6 +62,16 @@
     font-size: 0.25333rem;
     font-weight: bold;
   }
+  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;
@@ -94,7 +104,11 @@
   html .bootom p {
     margin-top: 0.1rem;
     font-size: 0.15rem;
-    color: #B8B7BF;
+    color: #fff;
+  }
+  body .bootom p a,
+  html .bootom p a {
+    color: #fff;
   }
 }
 

view/molistar/home/css/index.scss

@@ -224,7 +224,8 @@
                     margin-top: -0.01rem;
                 }
             }
-            .language{
+
+            .language {
                 color: #fff;
                 position: absolute;
                 height: 0.5rem;
@@ -235,6 +236,16 @@
                 font-weight: bold;
             }
 
+            .privacy {
+                color: #fff;
+                position: absolute;
+                height: 0.5rem;
+                line-height: 0.5rem;
+                left: 6.4rem;
+                top: .3rem;
+                width: 3rem;
+            }
+
             .pcIos {
                 width: 2.9rem;
                 height: 0.64rem;
@@ -271,7 +282,11 @@
                 margin-top: 0.1rem;
                 // margin-bottom: 0.1rem;
                 font-size: 0.15rem;
-                color: #B8B7BF;
+                color: #fff;
+
+                a {
+                    color: #fff;
+                }
             }
         }
     }
@@ -979,4 +994,5 @@
             }
         }
     }
-}
+}
+

view/molistar/home/index.html

@@ -28,13 +28,15 @@
                 <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>Vele Network Technology Limited</p>
+                <p>Molistar Team</p>
             </div>
         </div>
     </div>
@@ -113,6 +115,10 @@
                     <span class="text6"></span>
                     <img src="./images/rightIcon.png" alt="">
                 </li>
+                <li>
+                    <a href=""><span class="text7"></span></a>
+                    <img src="./images/rightIcon.png" alt="">
+                </li>
             </ul>
         </div>
 

view/molistar/home/js/index.js

@@ -62,7 +62,7 @@ $(function () {
     ];
     setTimeout(function () {
         function getUserLanguage() {
-            console.log('ssss',navigator,navigator.language, navigator.userLanguage);
+            console.log('ssss', navigator, navigator.language, navigator.userLanguage);
             return navigator.language || navigator.userLanguage; // 兼容不同浏览器的方式
         }
         // var langCode = getLanguageCode(getUserLanguage());
@@ -91,8 +91,10 @@ $(function () {
         if (langCode == 'zh') {
             $('.language').html('<b>中文</b> ▼')
         } else if (langCode == 'ar') {
+            $('.privacy').css('left', '7.4rem')
             $('.language').html('<b>العربية</b> ▼')
         } else {
+            $('.privacy').css('left', '7.4rem')
             $('.language').html('<b>English</b> ▼')
         }
         history.replaceState(null, null, updateQueryStringParameter(window.location.href, 'lang', langCode));
@@ -114,6 +116,7 @@ function translateFun() {
     $('.text4').text(langReplace(localLang.demoModule.text4))
     $('.text5').text(langReplace(localLang.demoModule.text5))
     $('.text6').text(langReplace(localLang.demoModule.text6))
+    $('.text7').text(langReplace(localLang.demoModule.text7))
     $('.textss').text(langReplace(localLang.demoModule.textss))
     $('.homePc').attr('style', langReplace(localLang.demoModule.homePc))
     $('#img2').html(langReplace(localLang.demoModule.img2))
@@ -168,9 +171,11 @@ function translateFun() {
             index = 0;
         } else if (i == 2) {
             window.location = `${urlPrefix}/molistar/modules/h5Income/login.html`
-        } else {
+        } else if (i == 3) {
             $('.menu').css("height", "0%");
             $('.contactUs_pub').show();
+        } else {
+            location.href = `../modules/rule/privacy-wap.html`
         }
     })
     // 關閉聯繫我們彈窗
@@ -364,6 +369,6 @@ function handleResize() {
     location.reload()
     // 这里可以添加更多的逻辑，比如检查窗口的新尺寸
 }
- 
+
 // 监听窗口大小变化事件
 window.addEventListener('resize', handleResize);

view/molistar/home/local/ar.js

@@ -8,6 +8,7 @@ langAr = {
         text4: `الصفحة الرئيسية`,
         text5: `المحفظة`,
         text6: `اتصل بنا`,
+        text7: `سياسة الخصوصية `,
         textss: `الرجاء تحديد لغة.`,
         homePc: `background:url(./images/pcBgBig-ar.png) no-repeat;background-size:100% 100%;`,
         img2: `
@@ -49,7 +50,7 @@ langAr = {
         <img src="./images/downioad-ar.png" alt="" class="downioad animate__animated">
         <!-- <img src="./images/down.png" alt="" class="down"> -->
         <div class="bootom">
-            <p>Vele Network Technology Limited</p>
+            <p>Molistar Team</p>
         </div>`,
     }
 }

view/molistar/home/local/en.js

@@ -7,6 +7,7 @@ langEn = {
         text4: `Home`,
         text5: `Wallet`,
         text6: `Contact Us`,
+        text7: `Privacy Policy  `,
         textss: `Please select a language.`,
         homePc: `background:url(./images/pcBgBig-en.png) no-repeat;background-size:100% 100%;`,
         img2: `
@@ -48,7 +49,7 @@ langEn = {
         <img src="./images/downioad-en.png" alt="" class="downioad animate__animated">
         <!-- <img src="./images/down.png" alt="" class="down"> -->
         <div class="bootom">
-            <p>Vele Network Technology Limited</p>
+            <p>Molistar Team</p>
         </div>`,
     }
 }

view/molistar/home/local/zh.js

@@ -8,6 +8,7 @@ langZh = {
         text4: `首頁`,
         text5: `錢包`,
         text6: `聯繫我們`,
+        text7: `隱私政策 `,
         textss: `请选择语言`,
         homePc: `background:url(./images/pcBgBig.png) no-repeat;background-size:100% 100%;`,
         img2: `
@@ -46,7 +47,7 @@ langZh = {
             <img src="./images/downioad.png" alt="" class="downioad animate__animated">
             <!-- <img src="./images/down.png" alt="" class="down"> -->
             <div class="bootom">
-                <p>Vele Network Technology Limited</p>
+                <p>Molistar Team</p>
             </div>`,
     }
 }

view/molistar/modules/dailyConsumption/css/index.css

@@ -0,0 +1,815 @@
+html,
+body {
+  width: 100%;
+  background: #290C05;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.header {
+  width: 10rem;
+  height: 12.53333rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.header .rule_icon {
+  width: 1.86667rem;
+  height: 0.66667rem;
+  line-height: 0.6rem;
+  background: url(../images/rule_cion.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  position: absolute;
+  top: 5.49333rem;
+  right: 0rem;
+  text-align: center;
+  text-indent: 2px;
+}
+
+.header .timeBox {
+  width: 7.16rem;
+  height: 1.62667rem;
+  box-sizing: border-box;
+  padding: 0 0.66667rem;
+  position: absolute;
+  top: 8.48rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .timeBox div {
+  width: 1.33333rem;
+  height: 1.33333rem;
+  background: url(../images/time.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  text-align: center;
+  line-height: 1.33333rem;
+}
+
+.header .timeBox div b {
+  color: #FFED70;
+  font-size: 0.58667rem;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+
+.header .timeBox div span {
+  width: 2.4rem;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -0.54667rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  font-family: PingFang SC;
+  background: url(../images/timeBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .timeBox .day {
+  margin-right: 0.78667rem;
+}
+
+.header .timeBox .colon {
+  width: 0.21333rem;
+  height: 0.53333rem;
+  background: url(../images/colon.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 0.22667rem;
+  margin-top: 0.54667rem;
+}
+
+.myBox {
+  width: 10rem;
+  height: 8.05333rem;
+  background: url(../images/box.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -1.1rem auto 0.46667rem;
+  position: relative;
+}
+
+.myBox .ts {
+  width: 1.70667rem;
+  height: 1.70667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.44rem;
+  z-index: 2;
+}
+
+.myBox .tx {
+  width: 1.70667rem;
+  height: 1.70667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.44rem;
+  z-index: 1;
+  border-radius: 50%;
+}
+
+.myBox .name {
+  width: 4.8rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 600;
+}
+
+.myBox .lineBox {
+  width: 8.26667rem;
+  height: 0.21333rem;
+  border-radius: 0.21333rem;
+  background: #824115;
+  position: absolute;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.85333rem;
+  border-radius: 0.21333rem;
+}
+
+.myBox .lineBox .line {
+  width: 0%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: linear-gradient(90deg, #FBF392, #FCB41B);
+  border-radius: 0.21333rem;
+}
+
+.myBox .lineBox .boxs {
+  width: 0.82667rem;
+  height: 0.82667rem;
+  background: url(../images/false.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.myBox .lineBox .boxs span {
+  height: 0.45333rem;
+  line-height: 0.45333rem;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  top: -0.66667rem;
+  display: flex;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 400;
+}
+
+.myBox .lineBox .boxs span img {
+  display: block;
+  width: 0.45333rem;
+  height: 0.45333rem;
+  margin: 0 0.06667rem;
+}
+
+.myBox .lineBox .box1 {
+  left: 2rem;
+}
+
+.myBox .lineBox .box2 {
+  left: 4.52rem;
+}
+
+.myBox .lineBox .box3 {
+  right: 0rem;
+}
+
+.myBox .lineBox .act {
+  background: url(../images/true.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myBox .tetxBox {
+  width: 8.26667rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 6.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFED70;
+  font-weight: 400;
+}
+
+.myBox .tetxBox .left {
+  font-size: 0.34667rem;
+}
+
+.myBox .tetxBox .rirgt {
+  font-size: 0.37333rem;
+}
+
+.tab {
+  width: 9.73333rem;
+  height: 1.33333rem;
+  margin: 0 auto 0.41333rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tab div {
+  width: 4.8rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  text-align: center;
+  color: #EBC9B2;
+  font-size: 0.4rem;
+  font-weight: 600;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tabbox {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act {
+  color: #290C05;
+  background: url(../images/act.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act2 {
+  color: #290C05;
+  background: url(../images/tabact2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content1 {
+  width: 10rem;
+  height: auto;
+  margin: 0 auto 0.41333rem;
+}
+
+.content1 .contentBox1,
+.content1 .contentBox2,
+.content1 .contentBox3 {
+  width: 100%;
+  height: 16.58667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.53333rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.content1 .contentBox1 .title,
+.content1 .contentBox2 .title,
+.content1 .contentBox3 .title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 5.22667rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content1 .contentBox1 .title span,
+.content1 .contentBox2 .title span,
+.content1 .contentBox3 .title span {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.content1 .contentBox1 .title img,
+.content1 .contentBox2 .title img,
+.content1 .contentBox3 .title img {
+  width: 0.53333rem;
+  height: 0.53333rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.06667rem;
+}
+
+.content1 .contentBox1 .box,
+.content1 .contentBox2 .box,
+.content1 .contentBox3 .box {
+  width: 8.93333rem;
+  height: 10.66667rem;
+  margin: 2.10667rem auto 0.13333rem;
+  background: url(../images/700.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.content1 .contentBox1 .box .ts,
+.content1 .contentBox2 .box .ts,
+.content1 .contentBox3 .box .ts {
+  width: 2.13333rem;
+  height: 2.13333rem;
+  position: absolute;
+  right: 0.5rem;
+  top: 5.9rem;
+}
+
+.content1 .contentBox1 .box .zj,
+.content1 .contentBox2 .box .zj,
+.content1 .contentBox3 .box .zj {
+  width: 5.2rem;
+  height: 8.5rem;
+  position: absolute;
+  left: 0.35rem;
+  top: 0.3rem;
+  overflow: hidden;
+}
+
+.content1 .contentBox1 .box .zj canvas,
+.content1 .contentBox2 .box .zj canvas,
+.content1 .contentBox3 .box .zj canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.content1 .contentBox1 .priorityWinners,
+.content1 .contentBox2 .priorityWinners,
+.content1 .contentBox3 .priorityWinners {
+  width: 100%;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  margin-bottom: 0.36rem;
+}
+
+.content1 .contentBox1 .priorityWinnersBox,
+.content1 .contentBox2 .priorityWinnersBox,
+.content1 .contentBox3 .priorityWinnersBox {
+  height: 1.6rem;
+  width: 83%;
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.content1 .contentBox1 .priorityWinnersBox div,
+.content1 .contentBox2 .priorityWinnersBox div,
+.content1 .contentBox3 .priorityWinnersBox div {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+}
+
+.content1 .contentBox1 .priorityWinnersBox div img,
+.content1 .contentBox2 .priorityWinnersBox div img,
+.content1 .contentBox3 .priorityWinnersBox div img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  border: 0.04rem #FFED70 solid;
+}
+
+.content1 .contentBox1 .priorityWinnersBox div span,
+.content1 .contentBox2 .priorityWinnersBox div span,
+.content1 .contentBox3 .priorityWinnersBox div span {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: -0.6rem;
+  height: 0.4rem;
+}
+
+.content1 .contentBox2 .box {
+  background: url(../images/350.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content1 .contentBox3 .box {
+  background: url(../images/70.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 {
+  width: 10rem;
+  height: auto;
+  margin: 0 auto 0.41333rem;
+  display: none;
+}
+
+.content2 .contentBox1,
+.content2 .contentBox2,
+.content2 .contentBox3 {
+  width: 100%;
+  height: 16.58667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.53333rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.content2 .contentBox1 .title,
+.content2 .contentBox2 .title,
+.content2 .contentBox3 .title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 5.22667rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 .contentBox1 .title span,
+.content2 .contentBox2 .title span,
+.content2 .contentBox3 .title span {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.content2 .contentBox1 .title img,
+.content2 .contentBox2 .title img,
+.content2 .contentBox3 .title img {
+  width: 0.53333rem;
+  height: 0.53333rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.06667rem;
+}
+
+.content2 .contentBox1 .box,
+.content2 .contentBox2 .box,
+.content2 .contentBox3 .box {
+  width: 8.93333rem;
+  height: 10.66667rem;
+  margin: 2.10667rem auto 0.13333rem;
+  background: url(../images/7.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.content2 .contentBox1 .box .ts,
+.content2 .contentBox2 .box .ts,
+.content2 .contentBox3 .box .ts {
+  width: 2.13333rem;
+  height: 2.13333rem;
+  position: absolute;
+  right: 0.5rem;
+  top: 3.6rem;
+}
+
+.content2 .contentBox1 .box .zj,
+.content2 .contentBox2 .box .zj,
+.content2 .contentBox3 .box .zj {
+  width: 5.2rem;
+  height: 8.5rem;
+  position: absolute;
+  left: 0.35rem;
+  top: 0.3rem;
+  overflow: hidden;
+}
+
+.content2 .contentBox1 .box .zj canvas,
+.content2 .contentBox2 .box .zj canvas,
+.content2 .contentBox3 .box .zj canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.content2 .contentBox1 .box .zjIcon,
+.content2 .contentBox2 .box .zjIcon,
+.content2 .contentBox3 .box .zjIcon {
+  width: 0.61333rem;
+  height: 0.61333rem;
+  position: absolute;
+  left: 2.6rem;
+  top: 8.94667rem;
+  z-index: 2;
+}
+
+.content2 .contentBox1 .box .xzIcon,
+.content2 .contentBox2 .box .xzIcon,
+.content2 .contentBox3 .box .xzIcon {
+  width: 0.61333rem;
+  height: 0.61333rem;
+  position: absolute;
+  right: 1.2rem;
+  top: 8.94667rem;
+  z-index: 2;
+}
+
+.content2 .contentBox1 .priorityWinners,
+.content2 .contentBox2 .priorityWinners,
+.content2 .contentBox3 .priorityWinners {
+  width: 100%;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  margin-bottom: 0.36rem;
+}
+
+.content2 .contentBox1 .priorityWinnersBox,
+.content2 .contentBox2 .priorityWinnersBox,
+.content2 .contentBox3 .priorityWinnersBox {
+  height: 1.6rem;
+  width: 83%;
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.content2 .contentBox1 .priorityWinnersBox div,
+.content2 .contentBox2 .priorityWinnersBox div,
+.content2 .contentBox3 .priorityWinnersBox div {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+}
+
+.content2 .contentBox1 .priorityWinnersBox div img,
+.content2 .contentBox2 .priorityWinnersBox div img,
+.content2 .contentBox3 .priorityWinnersBox div img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  border: 0.04rem #FFED70 solid;
+}
+
+.content2 .contentBox1 .priorityWinnersBox div span,
+.content2 .contentBox2 .priorityWinnersBox div span,
+.content2 .contentBox3 .priorityWinnersBox div span {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: -0.6rem;
+}
+
+.content2 .contentBox2 .box {
+  background: url(../images/3500.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 .contentBox3 .box {
+  background: url(../images/210.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 .contentBox3 .box .ts {
+  top: 5.9rem;
+}
+
+.null {
+  width: 100%;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  opacity: 0.6;
+  margin-bottom: 0.53333rem;
+}
+
+.video,
+.video2,
+.video3 {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.video video,
+.video2 video,
+.video3 video {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 65%;
+}
+
+.video .close,
+.video2 .close,
+.video3 .close {
+  width: 0.90667rem;
+  height: 0.90667rem;
+  position: absolute;
+  top: 10%;
+  right: 0.93333rem;
+  z-index: 9;
+}
+
+.rule {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.rule .rule_in {
+  width: 9.33333rem;
+  height: 11.06667rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .close {
+  width: 0.88rem;
+  height: 0.88rem;
+  position: absolute;
+  right: 0;
+  top: -0.93333rem;
+}
+
+.rule .rule_in .title {
+  width: 4.66667rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  top: -0.16rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/ruleTitle.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box {
+  width: 7.53333rem;
+  height: 8rem;
+  position: absolute;
+  top: 2.36rem;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow-y: scroll;
+}
+
+.rule .rule_in .box::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .rule_in .box p {
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  line-height: 0.53333rem;
+  margin-bottom: 0.45333rem;
+}
+
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .myBox .tetxBox {
+  direction: ltr;
+}
+
+.arabic .content1 .contentBox1 .box {
+  background: url(../images/700ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content1 .contentBox1 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content1 .contentBox2 .box {
+  background: url(../images/350ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content1 .contentBox2 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content1 .contentBox3 .box {
+  background: url(../images/70ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content1 .contentBox3 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content2 .contentBox1 .box {
+  background: url(../images/7ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content2 .contentBox1 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content2 .contentBox2 .box {
+  background: url(../images/3500ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content2 .contentBox2 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content2 .contentBox3 .box {
+  background: url(../images/210ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content2 .contentBox3 .box .ts {
+  direction: ltr;
+}
+
+.arabic .back img {
+  left: auto;
+  right: 0.24rem;
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,790 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #290C05;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(940);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto;
+    position: relative;
+
+    .rule_icon {
+        width: px2rem(140);
+        height: px2rem(50);
+        line-height: px2rem(45);
+        background: url(../images/rule_cion.png) no-repeat;
+        background-size: 100% 100%;
+        color: #FFED70;
+        font-size: px2rem(28);
+        font-weight: 500;
+        position: absolute;
+        top: px2rem(412);
+        right: px2rem(0);
+        text-align: center;
+        text-indent: 2px;
+    }
+
+    .timeBox {
+        width: 7.16rem;
+        height: px2rem(122);
+        box-sizing: border-box;
+        padding: 0 px2rem(50);
+        position: absolute;
+        top: px2rem(636);
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(100);
+            height: px2rem(100);
+            background: url(../images/time.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            text-align: center;
+            line-height: px2rem(100);
+
+            b {
+                color: #FFED70;
+                font-size: px2rem(44);
+                font-weight: 600;
+                font-family: PingFang SC;
+            }
+
+            span {
+                width: px2rem(180);
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-41);
+                text-align: center;
+                color: #FFED70;
+                font-size: px2rem(28);
+                font-weight: 400;
+                font-family: PingFang SC;
+                background: url(../images/timeBg.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .day {
+            margin-right: px2rem(59);
+        }
+
+        .colon {
+            width: px2rem(16);
+            height: px2rem(40);
+            background: url(../images/colon.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0 px2rem(17);
+            margin-top: px2rem(41);
+        }
+    }
+}
+
+.myBox {
+    width: px2rem(750);
+    height: px2rem(604);
+    background: url(../images/box.png) no-repeat;
+    background-size: 100% 100%;
+    margin: -1.1rem auto px2rem(35);
+    position: relative;
+
+    .ts {
+        width: px2rem(128);
+        height: px2rem(128);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(183);
+        z-index: 2;
+    }
+
+    .tx {
+        width: px2rem(128);
+        height: px2rem(128);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(183);
+        z-index: 1;
+        border-radius: 50%;
+    }
+
+    .name {
+        width: px2rem(360);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(321);
+        text-align: center;
+        color: #FFED70;
+        font-size: px2rem(28);
+        font-weight: 600;
+    }
+
+    .lineBox {
+        width: px2rem(620);
+        height: px2rem(16);
+        border-radius: px2rem(16);
+        background: #824115;
+        position: absolute;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(439);
+        border-radius: px2rem(16);
+
+        .line {
+            width: 0%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: linear-gradient(90deg, #FBF392, #FCB41B);
+            border-radius: px2rem(16);
+        }
+
+        .boxs {
+            width: px2rem(62);
+            height: px2rem(62);
+            background: url(../images/false.png) no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+
+            span {
+                height: px2rem(34);
+                line-height: px2rem(34);
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%);
+                top: px2rem(-50);
+                display: flex;
+                color: #FFED70;
+                font-size: px2rem(26);
+                font-weight: 400;
+
+                img {
+                    display: block;
+                    width: px2rem(34);
+                    height: px2rem(34);
+                    margin: 0 px2rem(5);
+                }
+            }
+        }
+
+        .box1 {
+            left: px2rem(150);
+        }
+
+        .box2 {
+            left: px2rem(339);
+        }
+
+        .box3 {
+            right: px2rem(0);
+        }
+
+        .act {
+            background: url(../images/true.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .tetxBox {
+        width: px2rem(620);
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: px2rem(480);
+        left: 50%;
+        transform: translateX(-50%);
+        color: #FFED70;
+        font-weight: 400;
+
+        .left {
+            font-size: px2rem(26);
+        }
+
+        .rirgt {
+            font-size: px2rem(28);
+        }
+    }
+}
+
+.tab {
+    width: px2rem(730);
+    height: px2rem(100);
+    margin: 0 auto px2rem(31);
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: px2rem(360);
+        height: px2rem(100);
+        line-height: px2rem(100);
+        text-align: center;
+        color: #EBC9B2;
+        font-size: px2rem(30);
+        font-weight: 600;
+        background: url(../images/tab.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tabbox {
+        background: url(../images/tab2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act {
+        color: #290C05;
+        background: url(../images/act.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act2 {
+        color: #290C05;
+        background: url(../images/tabact2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.content1 {
+    width: px2rem(750);
+    height: auto;
+    margin: 0 auto px2rem(31);
+    // display: none;
+
+    .contentBox1,
+    .contentBox2,
+    .contentBox3 {
+        width: 100%;
+        height: px2rem(1244);
+        background: url(../images/bg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto px2rem(40);
+        position: relative;
+        overflow: hidden;
+
+        .title {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 0;
+            width: px2rem(392);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 600;
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+
+            span {
+                vertical-align: middle;
+                display: inline-block;
+            }
+
+            img {
+                width: px2rem(40);
+                height: px2rem(40);
+                display: inline-block;
+                vertical-align: middle;
+                margin: 0 px2rem(5);
+            }
+        }
+
+        .box {
+            width: px2rem(670);
+            height: px2rem(800);
+            margin: px2rem(158) auto px2rem(10);
+            background: url(../images/700.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+
+            .ts {
+                width: px2rem(160);
+                height: px2rem(160);
+                position: absolute;
+                right: 0.5rem;
+                top: 5.9rem;
+            }
+
+            .zj {
+                width: 5.2rem;
+                height: 8.5rem;
+                position: absolute;
+                left: 0.35rem;
+                top: 0.3rem;
+                overflow: hidden;
+
+                canvas {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
+        .priorityWinners {
+            width: 100%;
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 500;
+            margin-bottom: px2rem(27);
+        }
+
+        .priorityWinnersBox {
+            height: px2rem(120);
+            width: 83%;
+            display: flex;
+            justify-content: space-around;
+            margin: 0 auto;
+
+            div {
+                width: px2rem(120);
+                height: px2rem(120);
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    border-radius: 50%;
+                    left: 0;
+                    top: 0;
+                    border: px2rem(3) #FFED70 solid;
+                }
+
+                span {
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #FFED70;
+                    font-size: px2rem(26);
+                    font-weight: 500;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    bottom: -0.6rem;
+                    height: 0.4rem;
+                }
+            }
+        }
+    }
+
+    .contentBox2 {
+        .box {
+            background: url(../images/350.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .contentBox3 {
+        .box {
+            background: url(../images/70.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+.content2 {
+    width: px2rem(750);
+    height: auto;
+    margin: 0 auto px2rem(31);
+    display: none;
+
+    .contentBox1,
+    .contentBox2,
+    .contentBox3 {
+        width: 100%;
+        height: px2rem(1244);
+        background: url(../images/bg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto px2rem(40);
+        position: relative;
+        overflow: hidden;
+
+        .title {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 0;
+            width: px2rem(392);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 600;
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+
+            span {
+                vertical-align: middle;
+                display: inline-block;
+            }
+
+            img {
+                width: px2rem(40);
+                height: px2rem(40);
+                display: inline-block;
+                vertical-align: middle;
+                margin: 0 px2rem(5);
+            }
+        }
+
+        .box {
+            width: px2rem(670);
+            height: px2rem(800);
+            margin: px2rem(158) auto px2rem(10);
+            background: url(../images/7.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+
+            .ts {
+                width: px2rem(160);
+                height: px2rem(160);
+                position: absolute;
+                right: 0.5rem;
+                top: 3.6rem;
+            }
+
+            .zj {
+                width: 5.2rem;
+                height: 8.5rem;
+                position: absolute;
+                left: 0.35rem;
+                top: 0.3rem;
+                overflow: hidden;
+
+                canvas {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+
+            .zjIcon {
+                width: px2rem(46);
+                height: px2rem(46);
+                position: absolute;
+                left: px2rem(195);
+                top: px2rem(671);
+                z-index: 2;
+            }
+
+            .xzIcon {
+                width: px2rem(46);
+                height: px2rem(46);
+                position: absolute;
+                right: px2rem(90);
+                top: px2rem(671);
+                z-index: 2;
+            }
+        }
+
+        .priorityWinners {
+            width: 100%;
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 500;
+            margin-bottom: px2rem(27);
+        }
+
+        .priorityWinnersBox {
+            height: px2rem(120);
+            width: 83%;
+            display: flex;
+            justify-content: space-around;
+            margin: 0 auto;
+
+            div {
+                width: px2rem(120);
+                height: px2rem(120);
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    border-radius: 50%;
+                    left: 0;
+                    top: 0;
+                    border: px2rem(3) #FFED70 solid;
+                }
+
+                span {
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #FFED70;
+                    font-size: px2rem(26);
+                    font-weight: 500;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    bottom: -0.6rem;
+                }
+            }
+        }
+    }
+
+    .contentBox2 {
+        .box {
+            background: url(../images/3500.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .contentBox3 {
+        .box {
+            background: url(../images/210.png) no-repeat;
+            background-size: 100% 100%;
+
+            .ts {
+                top: 5.9rem;
+            }
+        }
+    }
+}
+
+.null {
+    width: 100%;
+    text-align: center;
+    color: #FFED70;
+    font-size: px2rem(26);
+    font-weight: 400;
+    opacity: 0.6;
+    margin-bottom: px2rem(40);
+}
+
+.video,
+.video2,
+.video3 {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    video {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 65%;
+    }
+
+    .close {
+        width: px2rem(68);
+        height: px2rem(68);
+        position: absolute;
+        top: 10%;
+        right: px2rem(70);
+        z-index: 9;
+    }
+}
+
+.rule {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    .rule_in {
+        width: px2rem(700);
+        height: px2rem(830);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+
+        .close {
+            width: px2rem(66);
+            height: px2rem(66);
+            position: absolute;
+            right: 0;
+            top: px2rem(-70);
+        }
+
+        .title {
+            width: px2rem(350);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            top: px2rem(-12);
+            left: 50%;
+            transform: translateX(-50%);
+            background: url(../images/ruleTitle.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .box {
+            width: px2rem(565);
+            height: 8rem;
+            position: absolute;
+            top: px2rem(177);
+            left: 50%;
+            transform: translateX(-50%);
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            p {
+                color: #FFED70;
+                font-size: px2rem(28);
+                font-weight: 400;
+                line-height: px2rem(40);
+                margin-bottom: px2rem(34);
+            }
+        }
+    }
+}
+
+.arabic {
+    .header {
+        background: url(../images/header-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .myBox .tetxBox {
+        direction: ltr;
+    }
+
+    .content1 {
+        .contentBox1 {
+            .box {
+                background: url(../images/700ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox2 {
+            .box {
+                background: url(../images/350ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox3 {
+            .box {
+                background: url(../images/70ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+    }
+
+    .content2 {
+        .contentBox1 {
+            .box {
+                background: url(../images/7ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox2 {
+            .box {
+                background: url(../images/3500ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox3 {
+            .box {
+                background: url(../images/210ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+    }
+
+    .back img {
+        left: auto;
+        right: 0.24rem;
+        transform: rotate(180deg);
+    }
+}

view/molistar/modules/dailyConsumption/index.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="text1"></title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 头部 -->
+    <div class="header">
+        <div class="rule_icon text2"></div>
+        <!-- 倒计时 -->
+        <div class="timeBox">
+            <div class="hour">
+                <b>00</b>
+                <span class="text3"></span>
+            </div>
+            <div class="min">
+                <b>00</b>
+                <span class="text4"></span>
+            </div>
+            <div class="sec">
+                <b>00</b>
+                <span class="text5"></span>
+            </div>
+        </div>
+    </div>
+    <!--我的消费进度  -->
+    <div class="myBox">
+        <img src="./images/txk.png" alt="" class="ts">
+        <img src="" alt="" class="tx">
+        <div class="name"></div>
+        <div class="lineBox">
+            <div class="line"></div>
+            <div class="box1 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+            <div class="box2 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+            <div class="box3 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+        </div>
+        <div class="tetxBox">
+            <div class="l text6"></div>
+            <div class="r"><b>0</b>/<strong></strong></div>
+        </div>
+    </div>
+    <!-- tab -->
+    <div class="tab">
+        <div class="tabbox act text7"></div>
+        <div class="text8"></div>
+    </div>
+    <!-- 档位1 -->
+    <div class="content1">
+        <div class="contentBox1 level3">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text9"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts ts350" id="ts350"></div>
+                <div class="zj zj700" id="zj700"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+        <div class="contentBox2 level2">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text10"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts ts70" id="ts70"></div>
+                <div class="zj zj350" id="zj350"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+                <!-- <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div>
+                <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div> -->
+            </div>
+        </div>
+        <div class="contentBox3 level1">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text11"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts ts700" id="ts700"></div>
+                <div class="zj zj70" id="zj70"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+    </div>
+    <!-- 档位2 -->
+    <div class="content2">
+        <div class="contentBox1 level6">
+            <!-- 标题 -->
+            <div class="title">
+                <span class="text12"></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts" id="ts7"></div>
+                <!-- 播放图标 -->
+                <img src="./images/bf.png" alt="" class="zjIcon">
+                <img src="./images/bf.png" alt="" class="xzIcon">
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+        <div class="contentBox2 level5">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text13"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts" id="ts3500"></div>
+                <div class="zj" id="zj3500"></div>
+                <!-- 播放图标 -->
+                <img src="./images/bf.png" alt="" class="xzIcon">
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+                <!-- <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div>
+                <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div> -->
+            </div>
+        </div>
+        <div class="contentBox3 level4">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text14"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts" id="ts210"></div>
+                <div class="zj" id="zj210"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+    </div>
+    <div class="null"></div>
+    <div class="video">
+        <video id="zjVideo" controls playsinline webkit-playsinline>
+            <source src="./video/zj7.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video2">
+        <video id="zjVideo2" controls playsinline webkit-playsinline>
+            <source src="./video/xz7.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video3">
+        <video id="zjVideo3" controls playsinline webkit-playsinline>
+            <source src="./video/xz3500.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+
+    <!-- 规则 -->
+    <div class="rule">
+        <div class="rule_in">
+            <img src="./images/close.png" alt="" class="close">
+            <div class="title text2">Rules</div>
+            <div class="box"></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="../../common/js/svga.min.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/modules/dailyConsumption/js/index.js

@@ -0,0 +1,315 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var countupTime;//倒计时容器
+var page = 0;
+var maxPage = 0;
+var arr = [];
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getConfig();
+    }, 100)
+})
+// 处理SVGA
+document.addEventListener('DOMContentLoaded', function () {
+    function loadSVGA(containerId, svgaPath) {
+        var container = document.getElementById(containerId);
+        var player = new SVGA.Player(container);
+
+        var parser = new SVGA.Parser();
+        parser.load(svgaPath, function (videoItem) {
+            player.setVideoItem(videoItem);
+            player.startAnimation();
+        });
+    }
+
+    loadSVGA('ts700', './svga/ts700.svga');
+    loadSVGA('ts350', './svga/ts350.svga');
+    loadSVGA('ts70', './svga/ts70.svga');
+    loadSVGA('zj700', './svga/zj350.svga');
+    loadSVGA('zj350', './svga/zj210.svga');
+    loadSVGA('zj70', './svga/zj70.svga');
+
+    loadSVGA('ts7', './svga/ts210.svga');
+    loadSVGA('ts3500', './svga/ts3500.svga');
+    loadSVGA('ts210', './svga/ts7.svga');
+
+
+    loadSVGA('zj3500', './svga/zj3500.svga');
+    loadSVGA('zj210', './svga/zj700.svga');
+});
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.text1').text(langReplace(localLang.demoModule.text1));
+    $('.text2').text(langReplace(localLang.demoModule.text2));
+    $('.text3').text(langReplace(localLang.demoModule.text3));
+    $('.text4').text(langReplace(localLang.demoModule.text4));
+    $('.text5').text(langReplace(localLang.demoModule.text5));
+    $('.text6').text(langReplace(localLang.demoModule.text6));
+    $('.text7').text(langReplace(localLang.demoModule.text7));
+    $('.text8').text(langReplace(localLang.demoModule.text8));
+    $('.text9').text(langReplace(localLang.demoModule.text9));
+    $('.text10').text(langReplace(localLang.demoModule.text10));
+    $('.text11').text(langReplace(localLang.demoModule.text11));
+    $('.text12').text(langReplace(localLang.demoModule.text12));
+    $('.text13').text(langReplace(localLang.demoModule.text13));
+    $('.text14').text(langReplace(localLang.demoModule.text14));
+    $('.text17').text(langReplace(localLang.demoModule.text17));
+    $('.text18').text(langReplace(localLang.demoModule.text18));
+    $('.text19').text(langReplace(localLang.demoModule.text19));
+    $('.priorityWinners').text(langReplace(localLang.demoModule.priorityWinners));
+    if (browser.ios) {
+        $('.null').text(langReplace(localLang.demoModule.text15));
+    } else {
+
+        $('.null').text(langReplace(localLang.demoModule.text16));
+    }
+}
+console.log(unitProcessingAr(7000000, 1));
+// 配置接口
+function getConfig() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/dayConsume',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code === 200) {
+                // 分区规则
+                $('.rule .rule_in .box').html(res.data.partitionId == 2 ? langReplace(localLang.demoModule.arRule) : langReplace(localLang.demoModule.enRule));
+                // 处理是否代理人
+                res.data.rechargeUser ? $('.myBox').hide() : $('.myBox').show();
+                // 处理等级不足不显示榜单
+                res.data.wealth <= 7 ? $('.priorityWinners,.priorityWinnersBox').hide() : $('.priorityWinners,.priorityWinnersBox').show()
+                // 处理倒计时
+                countup(res.data.endTime - res.timestamp);
+                // 处理顶部进度以及个人信息
+                $('.myBox .tx').attr('src', res.data.avatar);
+                $('.myBox .name').text(res.data.nick);
+                $('.myBox .tetxBox .r b').text(res.data.goldNum);
+                console.log(res.data.goldNum < 700000);
+                if (res.data.goldNum < 700000) {
+                    $('.myBox .tetxBox .r strong').text(700000);
+                    $('.myBox .lineBox .box1 span b').text('70K');
+                    $('.myBox .lineBox .box1').css('left', `${(70000 / 700000) * 100}%`);
+                    $('.myBox .lineBox .box2 span b').text('350K');
+                    $('.myBox .lineBox .box2').css('left', `${(350000 / 700000) * 100}%`);
+                    $('.myBox .lineBox .box3 span b').text('700K');
+                    $('.myBox .lineBox .box3').css('right', `0%`);
+                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 700000) * 100) > 100 ? 100 : (res.data.goldNum / 700000) * 100}%`);
+                    if (res.data.goldNum >= 70000) { $('.myBox .lineBox .box1').addClass('act') }
+                    if (res.data.goldNum >= 350000) { $('.myBox .lineBox .box2').addClass('act') }
+                    if (res.data.goldNum >= 700000) { $('.myBox .lineBox .box3').addClass('act') }
+                } else {
+                    $('.myBox .tetxBox .r strong').text(7000000);
+                    $('.myBox .lineBox .box1 span b').text('210K');
+                    $('.myBox .lineBox .box1').css('left', `${(70000 / 7000000) * 100}%`);
+                    $('.myBox .lineBox .box2 span b').text('3500K');
+                    $('.myBox .lineBox .box2').css('left', `${(3500000 / 7000000) * 100}%`);
+                    $('.myBox .lineBox .box3 span b').text('7M');
+                    $('.myBox .lineBox .box3').css('right', `0`);
+                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 7000000) * 100) > 100 ? 100 : (res.data.goldNum / 7000000) * 100}%`);
+                    if (res.data.goldNum >= 210000) { $('.myBox .lineBox .box1').addClass('act') }
+                    if (res.data.goldNum >= 3500000) { $('.myBox .lineBox .box2').addClass('act') }
+                    if (res.data.goldNum >= 7000000) { $('.myBox .lineBox .box3').addClass('act') }
+                }
+                // 处理每个档位的用户前四名
+                res.data.activityLevelUserVo.forEach((res, i) => {
+                    var str = '';
+                    if ((res.level) <= 3) {
+                        $(`.content1 .level${res.level} .priorityWinnersBox div`).remove();
+                    } else {
+                        $(`.content2 .level${res.level} .priorityWinnersBox div`).remove();
+                    }
+                    if (res.userVos.length > 0) {
+                        res.userVos.forEach(val => {
+                            str += `
+                                <div>
+                                    <img src="${val.avatar}" alt="">
+                                    <span>${val.name}</span>
+                                </div>
+                        `
+                        })
+                    } else {
+                        str += `
+                                <div>
+                                    <img src="./images/null.png" alt="">
+                                    <span>${localLang.demoModule.waiting}</span>
+                                </div>
+                        `
+                    }
+                    if ((res.level) <= 3) {
+                        $(`.content1 .level${res.level} .priorityWinnersBox`).append(str);
+                    } else {
+                        $(`.content2 .level${res.level} .priorityWinnersBox`).append(str);
+                    }
+                })
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 倒計時
+function countup(leftTime) {
+    clearTimeout(countupTime)
+    //獲取當前時間
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定義變數 d,h,m,s保存倒計時的時間
+    var d, h, m, s;
+    //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 
+    if (leftTime > 0) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //將倒計時賦值到div中
+        $('.header .timeBox .hour b').text(h);
+        $('.header .timeBox .min b').text(m);
+        $('.header .timeBox .sec b').text(s);
+    } else {
+        getConfig();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    countupTime = setTimeout(function () {
+        countup(leftTime);
+    }, 1000);
+}
+//补0操作  
+function getzf(num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+// tab切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.content1,.content2').hide();
+    $(`.content${i}`).show();
+    $(this).addClass(`${i == 2 ? 'act2' : 'act'}`).siblings().removeClass('act').removeClass('act2')
+})
+// 打开mp4弹窗
+$('.content2 .contentBox1 .box .zjIcon').click(function () {
+    var video = document.getElementById('zjVideo');
+    video.play();
+    bodyScroolFun(true);
+    $('.video').show();
+})
+$('.content2 .contentBox1 .box .xzIcon').click(function () {
+    var video = document.getElementById('zjVideo2');
+    video.play();
+    bodyScroolFun(true);
+    $('.video2').show();
+})
+$('.content2 .contentBox2 .box .xzIcon').click(function () {
+    var video = document.getElementById('zjVideo3');
+    video.play();
+    bodyScroolFun(true);
+    $('.video3').show();
+})
+// 关闭mp4弹窗
+$('.video .close,.video2 .close,.video3 .close').click(function () {
+    var video = document.getElementById('zjVideo');
+    var video2 = document.getElementById('zjVideo2');
+    var video3 = document.getElementById('zjVideo3');
+    video.pause();
+    video2.pause();
+    video3.pause();
+    bodyScroolFun(false);
+    $('.video,.video2,.video3').hide();
+})
+// 监听播放完毕事件
+var video = document.getElementById('zjVideo');
+video.addEventListener('ended', function () {
+    video.pause();
+    bodyScroolFun(false);
+    $('.video').hide();
+});
+// 监听播放完毕事件
+var video2 = document.getElementById('zjVideo2');
+video.addEventListener('ended', function () {
+    video2.pause();
+    bodyScroolFun(false);
+    $('.video2').hide();
+});
+// 监听播放完毕事件
+var video3 = document.getElementById('zjVideo3');
+video.addEventListener('ended', function () {
+    video3.pause();
+    bodyScroolFun(false);
+    $('.video3').hide();
+});
+
+// 打开规则
+$('.header .rule_icon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.rule .rule_in .close').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+})

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

@@ -0,0 +1,59 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جاري التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+        text1: `الاستهلاك اليومي`,
+        text2: `القواعد`,
+        text3: `ساعة`,
+        text4: `دقيقة`,
+        text5: `ثانية`,
+        text6: `استهلاك العملات`,
+        text7: `استهلاك 70K-700K`,
+        text8: `استهلاك 210K-7M`,
+        text9: `استهلاك 700K`,
+        text10: `استهلاك 350K`,
+        text11: `استهلاك 70K`,
+        text12: `استهلاك 7M`,
+        text13: `استهلاك 3500K`,
+        text14: `استهلاك 210K`,
+        text15: `هذا الحدث لا علاقة له بـ Apple`,
+        text16: `هذا الحدث لا علاقة له بـ Google`,
+        priorityWinners: `الفائزون ذوو الأولوية`,
+        enRule: `
+        <p>
+        1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).<br>
+        2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.<br>
+        3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.<br>
+        </p>
+        <p>
+            القيود:<br>
+            1. وكلاء الشحن لا يشاركون في هذا النشاط.<br>
+            2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.<br>
+        </p>
+        <p>
+            ملاحظة:<br>
+            1. هذا النشاط ليس له علاقة بـ Google و Apple.
+        </p>
+        `,
+        arRule: `
+        <p>
+        1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).<br>
+        2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.<br>
+        3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.<br>
+    </p>
+    <p>
+        القيود:<br>
+        1. وكلاء الشحن لا يشاركون في هذا النشاط.<br>
+        2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.<br>
+    </p>
+    <p>
+        ملاحظة:<br>
+        1. هذا النشاط ليس له علاقة بـ Google و Apple.
+    </p>
+        `,
+        waiting: `ي انتظار`,
+    }
+}

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

@@ -0,0 +1,58 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1: `Daily Consumption`,
+        text2: `Rules`,
+        text3: `Hour`,
+        text4: `Min`,
+        text5: `Sec`,
+        text6: `Consume coins`,
+        text7: `Consume 70K-700K`,
+        text8: `Consume 210K-7M`,
+        text9: `Consume 700K`,
+        text10: `Consume 350K`,
+        text11: `Consume 70K`,
+        text12: `Consume 7M`,
+        text13: `Consume 3500K`,
+        text14: `Consume 210K`,
+        text15: `This event has nothing to do with Apple`,
+        text16: `This event has nothing to do with Google`,
+        priorityWinners: `Priority Winners`,
+        enRule: `
+            <p>
+                1. Activity time: daily 0:00-23:59 (GMT+8).<br>
+                2. Daily calculation of your spending in the platform, send 1 coin gift = 1 coin value; 1 coin lucky
+                gift = 0.02 coin value.<br>
+                3. When you reach the corresponding level, you will get the corresponding level reward.<br>
+                </p>
+                <p>
+                    Restrictions:<br>
+                    1. Recharge agent do not participate in this activity.<br>
+                    2. The input of game is not counted as consumption of coins.<br>
+                </p>
+                <p>
+                    Attention:<br>
+                    1. This activity has nothing to do with Google and Apple.
+                </p>
+        `,
+        arRule: `
+        <p>
+            1. Activity time: daily 0:00-23:59 (GMT+3).<br>
+            2. Daily calculation of your spending on the platform, send 1 coin gift = 1 coin value; 1 coin lucky gift = 0.05 coin value.<br>
+            3. When you reach the corresponding level, you will get the corresponding level reward.<br>
+        </p>
+        <p>
+            Restrictions:<br>
+            1. Recharge agents do not participate in this activity.<br>
+            2. Game input is not counted as coin consumption.<br>
+        </p>
+        <p>
+            Attention:<br>
+            1. This activity has nothing to do with Google and Apple.
+        </p>
+        `,
+        waiting: `Waiting`,
+    }
+}

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

@@ -0,0 +1,59 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+        text1: `每日消費`,
+        text2: `規則`,
+        text3: `小時`,
+        text4: `分`,
+        text5: `秒`,
+        text6: `消耗金幣`,
+        text7: `消耗 70K-700K`,
+        text8: `消耗 210K-700萬`,
+        text9: `消耗 700K`,
+        text10: `消耗 350K`,
+        text11: `消耗 70K`,
+        text12: `消耗 700萬`,
+        text13: `消耗 3500K`,
+        text14: `消耗 210K`,
+        text15: `此活動與 Apple 無關`,
+        text16: `此活動與 Google 無關`,
+        priorityWinners: `優先獲勝者`,
+        enRule: `
+        <p>
+        1. 活動時間：每日 0:00-23:59（GMT+8）。<br>
+        2. 每日計算您在平台上的消費，送 1 枚金幣禮物 = 1 枚金幣價值；1 枚金幣幸運禮物 = 0.02 枚金幣價值。<br>
+        3. 當您達到相應級別時，您將獲得相應級別的獎勵。<br>
+        </p>
+        <p>
+            限制：<br>
+            1. 充值代理不參加此活動。<br>
+            2. 遊戲的投入不計為金幣消費。<br>
+        </p>
+        <p>
+            注意：<br>
+            1. 此活動與 Google 和 Apple 無關。
+        </p>
+        `,
+        arRule: `
+        <p>
+        1. 活動時間：每日 0:00-23:59（GMT+3）。<br>
+        2. 每日計算您在平台上的消費，送 1 枚金幣禮物 = 1 枚金幣價值；1 枚金幣幸運禮物 = 0.05 枚金幣價值。<br>
+        3. 當您達到相應級別時，您將獲得相應級別的獎勵。<br>
+    </p>
+    <p>
+        限制：<br>
+        1. 充值代理不參加此活動。<br>
+        2. 遊戲的投入不計為金幣消費。<br>
+    </p>
+    <p>
+        注意：<br>
+        1. 此活動與 Google 和 Apple 無關。
+    </p>
+        `,
+        waiting: `等待中`,
+    }
+}

view/molistar/modules/guild-ar/BANK.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>Bank</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="">Bank</b>
+    </div>
+    <!-- 账户信息 -->
+    <div class="box currencyType">
+        <input type="text" disabled placeholder="Currency Type:USD">
+        <!-- <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="text5">
+        <img src="./images/right.png" alt="" class="right">
+    </div>
+    <p class="p "><span>*</span> <b class="p2"></b></p>
+    <div class="box payeeAccountNo">
+        <input type="text" placeholder="payeeAccountNo" class="text6">
+    </div>
+    <p class="p "><span>*</span> <b class="p3"></b></p>
+    <div class="box bankName">
+        <input type="text" placeholder="Bank Name" class="text7"
+            onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
+    </div>
+    <p class="p "><span>*</span> <b class="p4"></b></p>
+    <div class="box sWIFTCode">
+        <input type="text" placeholder="SWIFT Code" class="text8"
+            onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
+    </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>
+    <p class="p "><span>*</span> <b class="p6"></b></p>
+    <div class="box Address">
+        <input type="text" placeholder="Address" class="text10"
+            onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+        <!-- 确认按钮 -->
+        <div class="ok text1"></div>
+        <!-- 解绑按钮 -->
+        <div class="determine text2"></div>
+    </div>
+    <!-- 选择弹窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <div class="title text3"></div>
+            <div class="soure text4"></div>
+            <div class="countryPub"></div>
+        </div>
+    </div>
+    <div class="null"></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="./js/BANK.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+
+</html>

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

@@ -0,0 +1,65 @@
+<!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="./js/PAYONNER.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+
+</html>

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

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>USDT</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="text2">USDT</b>
+    </div>
+    <!-- 账户信息 -->
+    <div class="box currencyType">
+        <span></span>
+        <input type="text" disabled placeholder="Currency Type:USD">
+        <!-- <img src="./images/right.png" alt="" class="right"> -->
+    </div>
+    <div class="box country">
+        <span>*</span>
+        <input type="text" readonly placeholder="Country">
+        <img src="./images/right.png" alt="" class="right">
+    </div>
+    <div class="box payeeAccountNo">
+        <span>*</span>
+        <input type="text" placeholder="payeeAccountNo">
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+        <!-- 确认按钮 -->
+        <div class="ok">Confirm</div>
+        <!-- 解绑按钮 -->
+        <div class="determine">Determine</div>
+    </div>
+    <!-- 选择弹窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <div class="title">Country</div>
+            <div class="soure">OK</div>
+            <div class="countryPub">asdasdasd</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="./js/USDT.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+
+</html>

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

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="">Vodafone</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="">Vodafone</b>
+    </div>
+    <!-- 账户信息 -->
+    <div class="box currencyType">
+        <input type="text" disabled placeholder="Currency Type:USD">
+        <!-- <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="p2"></b></p>
+    <div class="box payeeAccountNo">
+        <input type="text" placeholder="payeeAccountNo" class="text8">
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+        <!-- 确认按钮 -->
+        <div class="ok text2">Confirm</div>
+        <!-- 解绑按钮 -->
+        <div class="determine text3">Determine</div>
+    </div>
+    <!-- 选择弹窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <div class="title text4">Country</div>
+            <div class="soure text5">OK</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="./js/VODAFONE.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+
+</html>

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

@@ -0,0 +1,232 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.back {
+  width: 100%;
+  height: 2.66667rem;
+  line-height: 3.46667rem;
+  position: fixed;
+  left: 0;
+  top: 0rem;
+  text-align: center;
+  color: #333333;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+  background: #fff;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 54%;
+}
+
+.box {
+  width: 9.2rem;
+  height: 1.49333rem;
+  border-radius: 0.21333rem;
+  background: #F2F3F7;
+  margin: 0 auto 0.32rem;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 0.26667rem;
+}
+
+.box span {
+  color: #ED4343;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  height: 100%;
+  line-height: 1.49333rem;
+  display: block;
+  float: left;
+  margin: 0 0.26667rem;
+}
+
+.box input {
+  display: block;
+  float: left;
+  width: 7rem;
+  height: 100%;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  outline: none;
+  border: 0;
+  background: none;
+  font-weight: bold;
+}
+
+.box input::placeholder {
+  color: #7B7B7D;
+  font-weight: 400;
+}
+
+.box .right {
+  display: block;
+  width: 0.56rem;
+  height: 0.56rem;
+  float: right;
+  margin: 0.48rem 0.26667rem 0;
+}
+
+.p {
+  width: 9.2rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  margin: 0 auto 0.21333rem;
+}
+
+.p span {
+  color: #ED4343;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  height: 100%;
+  display: block;
+  float: left;
+  margin: 0 0.10667rem;
+}
+
+.p b {
+  font-size: 0.37333rem;
+  color: #313131;
+  font-weight: 500;
+}
+
+.currencyType {
+  margin-top: 3.1rem;
+}
+
+.but {
+  width: 9.2rem;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto 0.45333rem;
+}
+
+.but .ok {
+  width: 4.45333rem;
+  height: 1.22667rem;
+  border-radius: 1.22667rem;
+  line-height: 1.22667rem;
+  color: #FFFFFF;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  text-align: center;
+  background: #04D5C6;
+  margin: 0 0.14667rem;
+}
+
+.but .determine {
+  width: 4.45333rem;
+  height: 1.22667rem;
+  border-radius: 1.22667rem;
+  line-height: 1.22667rem;
+  color: #FFFFFF;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  text-align: center;
+  background: #FF6A6A;
+  margin: 0 0.14667rem;
+}
+
+.pub {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  display: none;
+}
+
+.pub .pub_in {
+  width: 10rem;
+  height: auto;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  background: #fff;
+  border-radius: 0.42667rem 0.42667rem 0 0;
+  box-sizing: border-box;
+  padding-top: 1.49333rem;
+  padding-bottom: 0.26667rem;
+}
+
+.pub .pub_in .title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #313131;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  top: 0.32rem;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+}
+
+.pub .pub_in .soure {
+  z-index: 2;
+  color: #04D5C6;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  position: absolute;
+  right: 0.42667rem;
+  top: 0.37333rem;
+}
+
+.pub .pub_in .countryPub {
+  width: 100%;
+  height: 0.85333rem;
+  line-height: 0.85333rem;
+  text-align: center;
+  color: #7B7B7D;
+  font-size: 0.4rem;
+  font-weight: 400;
+}
+
+.pub .pub_in .act {
+  background: #F4F4F4;
+  color: #313131;
+}
+
+.arabic .back img {
+  right: 0.2rem;
+  left: unset;
+  transform: rotate(180deg);
+}
+
+.arabic .box span {
+  float: right;
+}
+
+.arabic .box input {
+  float: right;
+}
+
+.arabic .box .right {
+  float: left;
+  transform: rotate(180deg);
+}
+
+.arabic .pub .pub_in .soure {
+  right: auto;
+  left: 0.42667rem;
+}
+
+.arabic .p span {
+  float: right;
+}
+
+.null {
+  height: 6rem;
+}

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

@@ -0,0 +1,244 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    box-sizing: border-box;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(200);
+    line-height: px2rem(260);
+    position: fixed;
+    left: 0;
+    top: px2rem(0);
+    text-align: center;
+    color: #333333;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+    background: #fff;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: 54%;
+    }
+}
+
+.box {
+    width: px2rem(690);
+    height: px2rem(112);
+    border-radius: px2rem(16);
+    background: #F2F3F7;
+    margin: 0 auto px2rem(24);
+    position: relative;
+    box-sizing: border-box;
+    padding: 0 px2rem(20);
+
+    span {
+        color: #ED4343;
+        font-size: px2rem(28);
+        font-weight: 600;
+        height: 100%;
+        line-height: px2rem(112);
+        display: block;
+        float: left;
+        margin: 0 px2rem(20);
+    }
+
+    input {
+        display: block;
+        float: left;
+        width: 7rem;
+        height: 100%;
+        font-size: px2rem(28);
+        font-weight: 400;
+        outline: none;
+        border: 0;
+        background: none;
+        font-weight: bold;
+
+        &::placeholder {
+            color: #7B7B7D;
+            font-weight: 400;
+        }
+    }
+
+    .right {
+        display: block;
+        width: px2rem(42);
+        height: px2rem(42);
+        float: right;
+        margin: px2rem(36) px2rem(20) 0;
+    }
+}
+
+.p {
+    width: px2rem(690);
+    height: px2rem(40);
+    line-height: px2rem(40);
+    margin: 0 auto px2rem(16);
+
+    span {
+        color: #ED4343;
+        font-size: px2rem(28);
+        font-weight: 600;
+        height: 100%;
+        display: block;
+        float: left;
+        margin: 0 px2rem(8);
+    }
+
+    b {
+        font-size: px2rem(28);
+        color: #313131;
+        font-weight: 500;
+
+    }
+}
+
+.currencyType {
+    margin-top: 3.1rem;
+}
+
+.but {
+    width: px2rem(690);
+    display: flex;
+    justify-content: center;
+    margin: 0 auto px2rem(34);
+
+    .ok {
+        width: px2rem(334);
+        height: px2rem(92);
+        border-radius: px2rem(92);
+        line-height: px2rem(92);
+        color: #FFFFFF;
+        font-size: px2rem(32);
+        font-weight: 500;
+        text-align: center;
+        background: #04D5C6;
+        margin: 0 px2rem(11);
+    }
+
+    .determine {
+        width: px2rem(334);
+        height: px2rem(92);
+        border-radius: px2rem(92);
+        line-height: px2rem(92);
+        color: #FFFFFF;
+        font-size: px2rem(32);
+        font-weight: 500;
+        text-align: center;
+        background: #FF6A6A;
+        margin: 0 px2rem(11);
+    }
+}
+
+.pub {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 999;
+    display: none;
+
+    .pub_in {
+        width: px2rem(750);
+        height: auto;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 0;
+        background: #fff;
+        border-radius: px2rem(32) px2rem(32) 0 0;
+        box-sizing: border-box;
+        padding-top: px2rem(112);
+        padding-bottom: px2rem(20);
+
+        .title {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #313131;
+            font-size: px2rem(32);
+            font-weight: 500;
+            top: px2rem(24);
+            height: px2rem(44);
+            line-height: px2rem(44);
+        }
+
+        .soure {
+            z-index: 2;
+            color: #04D5C6;
+            font-size: px2rem(32);
+            font-weight: 500;
+            position: absolute;
+            right: px2rem(32);
+            top: px2rem(28);
+        }
+
+        .countryPub {
+            width: 100%;
+            height: px2rem(64);
+            line-height: px2rem(64);
+            text-align: center;
+            color: #7B7B7D;
+            font-size: px2rem(30);
+            font-weight: 400;
+        }
+
+        .act {
+            background: #F4F4F4;
+            color: #313131;
+        }
+    }
+}
+
+
+.arabic {
+    .back img {
+        right: px2rem(15);
+        left: unset;
+        transform: rotate(180deg);
+    }
+
+    .box {
+        span {
+            float: right;
+        }
+
+        input {
+            float: right;
+        }
+
+        .right {
+            float: left;
+            transform: rotate(180deg);
+        }
+    }
+
+    .pub .pub_in .soure {
+        right: auto;
+        left: px2rem(32);
+    }
+
+    .p {
+        span {
+            float: right;
+        }
+    }
+}
+
+.null {
+    height: 6rem;
+}

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

@@ -118,6 +118,43 @@ ul li div span {
   margin-top: 0.26667rem;
 }
 
+ul .actLi {
+  height: 2.45333rem;
+  position: relative;
+  overflow: hidden;
+}
+
+ul .actLi p,
+ul .actLi b {
+  margin-top: 0.66667rem;
+}
+
+ul .actLi i {
+  font-style: normal;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 0.50667rem;
+  line-height: 0.50667rem;
+  padding: 0 0.21333rem;
+  border-radius: 0px 0.26667rem 0px 0.26667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.32rem;
+}
+
+ul .actLi .sp0 {
+  background: #FCAC3A;
+}
+
+ul .actLi .sp1 {
+  background: #04D5C6;
+}
+
+ul .actLi .sp2 {
+  background: #FF605A;
+}
+
 .arLang .nav .back {
   right: 0.4rem;
   left: unset;

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

@@ -124,6 +124,43 @@ ul {
       // }
     }
   }
+
+  .actLi {
+    height: px2rem(92);
+    position: relative;
+    overflow: hidden;
+
+    p,
+    b {
+      margin-top: px2rem(25);
+    }
+
+    i {
+      font-style: normal;
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: px2rem(19);
+      line-height: px2rem(19);
+      padding: 0 px2rem(8);
+      border-radius: 0px px2rem(10) 0px px2rem(10);
+      text-align: center;
+      color: #FFFFFF;
+      font-size: px2rem(12);
+    }
+
+    .sp0 {
+      background: #FCAC3A;
+    }
+
+    .sp1 {
+      background: #04D5C6;
+    }
+
+    .sp2 {
+      background: #FF605A;
+    }
+  }
 }
 
 .arLang {

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

@@ -193,6 +193,12 @@ html {
   width: 0.42667rem;
   height: 0.42667rem;
   margin-top: 0.05333rem;
+}
+
+.transfer_method li .wenhao,
+.transfer_dollars li .wenhao {
+  width: 0.58667rem;
+  height: 0.58667rem;
   display: inline-block;
 }
 
@@ -240,23 +246,234 @@ html {
 .transfer_method .agent_settlement .pop,
 .transfer_dollars .official_withdraw .pop,
 .transfer_dollars .agent_settlement .pop {
-  width: 4.8rem;
-  height: 1.12rem;
-  background: url(../images/pop.png) no-repeat;
-  background-size: 100% 100%;
+  min-width: 5.76rem;
   position: absolute;
-  top: -0.42667rem;
-  left: 3.52rem;
+  top: -0.4rem;
+  left: 2.9rem;
   font-size: 0.32rem;
   line-height: 0.42667rem;
   color: #ffffff;
-  padding: 0.10667rem 0.21333rem 0;
+  padding: 0.21333rem;
+  background: #04D5C6;
+  border-radius: 0.21333rem;
 }
 
 .transfer_dollars {
   margin-bottom: 2.13333rem;
 }
 
+.withdrawalAccount {
+  width: 9.2rem;
+  height: 1.49333rem;
+  line-height: 1.49333rem;
+  box-sizing: border-box;
+  background: #F2F3F7;
+  border-radius: 0.21333rem;
+  margin: 0.26667rem auto 0.26667rem;
+  padding: 0 0.53333rem;
+  display: none;
+}
+
+.withdrawalAccount .left {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  float: left;
+}
+
+.withdrawalAccount .left b {
+  color: #ED4343;
+  margin-right: 0.10667rem;
+}
+
+.withdrawalAccount .right {
+  color: #7B7B7D;
+  font-size: 0.37333rem;
+  float: right;
+}
+
+.withdrawalAccount .right img {
+  display: inline-block;
+  width: 0.56rem;
+  height: 0.56rem;
+  margin-top: 0.48rem;
+}
+
+.selectAccount {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+
+.selectAccount .selectAccount_in {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  width: 10rem;
+  min-height: 6.10667rem;
+  background: #fff;
+  border-radius: 0.42667rem 0.42667rem 0rem 0rem;
+}
+
+.selectAccount .selectAccount_in .title {
+  width: 100%;
+  text-align: center;
+  color: #313131;
+  font-size: 0.42667rem;
+  margin-top: 0.34667rem;
+  margin-bottom: 0.34667rem;
+  font-weight: 600;
+}
+
+.selectAccount .selectAccount_in .accountBox {
+  margin: 0 auto;
+  width: 9.14667rem;
+}
+
+.selectAccount .selectAccount_in .accountBox .account {
+  width: 100%;
+  height: 1.06667rem;
+  line-height: 1.06667rem;
+  background: #F4F4F4;
+  border-radius: 0.21333rem;
+  margin-bottom: 0.42667rem;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+}
+
+.selectAccount .selectAccount_in .accountBox .account .sel {
+  width: 0.48rem;
+  height: 0.48rem;
+  margin-top: 0.29333rem;
+  margin-right: 0.13333rem;
+  display: block;
+  float: left;
+}
+
+.selectAccount .selectAccount_in .accountBox .account b,
+.selectAccount .selectAccount_in .accountBox .account span {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  float: left;
+}
+
+.selectAccount .selectAccount_in .accountBox .account .eid {
+  display: block;
+  float: right;
+  margin-top: 0.24rem;
+  width: 0.58667rem;
+  height: 0.58667rem;
+}
+
+.pubWithdrawal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+
+.pubWithdrawal .pubWithdrawal_in {
+  width: 9.14667rem;
+  min-height: 10.72rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border-radius: 0.42667rem;
+}
+
+.pubWithdrawal .pubWithdrawal_in .title {
+  width: 100%;
+  text-align: center;
+  color: #313131;
+  font-size: 0.45333rem;
+  font-weight: 500;
+  margin-top: 0.53333rem;
+  margin-bottom: 0.37333rem;
+}
+
+.pubWithdrawal .pubWithdrawal_in .boxw {
+  width: 8.08rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  margin: 0 auto 0.53333rem;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.pubWithdrawal .pubWithdrawal_in .boxw .left {
+  color: #7B7B7D;
+  font-size: 0.37333rem;
+  font-weight: 500;
+}
+
+.pubWithdrawal .pubWithdrawal_in .boxw .left b,
+.pubWithdrawal .pubWithdrawal_in .boxw .left p {
+  color: #7B7B7D;
+  font-size: 0.37333rem;
+  font-weight: 500;
+}
+
+.pubWithdrawal .pubWithdrawal_in .boxw .right {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+}
+
+.pubWithdrawal .pubWithdrawal_in .box3 {
+  height: auto;
+}
+
+.pubWithdrawal .pubWithdrawal_in .box3 b {
+  margin-bottom: 0.16rem;
+  display: block;
+}
+
+.pubWithdrawal .pubWithdrawal_in .text {
+  color: #7B7B7D;
+  font-size: 0.37333rem;
+  width: 8.08rem;
+  margin: 0 auto 0.45333rem;
+  font-weight: 400;
+}
+
+.pubWithdrawal .pubWithdrawal_in .ok {
+  width: 8.08rem;
+  height: 1.22667rem;
+  line-height: 1.22667rem;
+  border-radius: 1.22667rem;
+  background: #04D5C6;
+  margin: 0 auto 0.32rem;
+  color: #FFFFFF;
+  font-size: 0.42667rem;
+  text-align: center;
+}
+
+.pubWithdrawal .pubWithdrawal_in .close {
+  width: 8.08rem;
+  height: 1.22667rem;
+  line-height: 1.22667rem;
+  border-radius: 1.22667rem;
+  background: #F2F3F7;
+  margin: 0 auto 0;
+  color: #7B7B7D;
+  font-size: 0.42667rem;
+  text-align: center;
+}
+
 .confirm {
   width: 9.17333rem;
   height: 1.06667rem;
@@ -576,6 +793,61 @@ html {
   color: #7b7b7d;
 }
 
+.success {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: none;
+}
+
+.success .success_in {
+  width: 9.14667rem;
+  min-height: 4.64rem;
+  background: #fff;
+  border-radius: 0.42667rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.success .success_in .title {
+  width: 100%;
+  text-align: center;
+  color: #313131;
+  font-size: 0.45333rem;
+  height: 0.64rem;
+  margin-top: 0.4rem;
+  margin-bottom: 0.37333rem;
+  font-weight: 500;
+}
+
+.success .success_in p {
+  width: 8.08rem;
+  margin: 0 auto 0.37333rem;
+  color: #7B7B7D;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  line-height: 0.53333rem;
+}
+
+.success .success_in .but {
+  width: 8.08rem;
+  height: 1.22667rem;
+  line-height: 1.22667rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  margin: 0 auto;
+  background: #04D5C6;
+  border-radius: 0.66667rem;
+}
+
 .arabic .nav .back {
   right: 0.4rem;
   left: unset;
@@ -584,7 +856,8 @@ html {
 
 .arabic .transfer_method .official_withdraw .pop {
   left: unset;
-  right: 3.52rem;
+  right: 3.2rem;
+  top: -0.8rem;
 }
 
 .arabic .my_salary p img {
@@ -601,9 +874,16 @@ html {
   padding-left: unset;
 }
 
-.arabic .transfer_method .official_withdraw .pop, .arabic .transfer_method .agent_settlement .pop, .arabic .transfer_dollars .official_withdraw .pop, .arabic .transfer_dollars .agent_settlement .pop {
-  background: url(../images/pop-ar.png) no-repeat;
-  background-size: 100% 100%;
-  left: auto;
-  right: 3.52rem;
+.arabic .pubWithdrawal .pubWithdrawal_in {
+  height: 11.6rem;
+}
+
+.arabic .pubWithdrawal .pubWithdrawal_in .boxw .right {
+  float: left;
+  white-space: nowrap;
+}
+
+.english .transfer_method .official_withdraw .pop {
+  top: -0.8rem;
+  left: 2.9rem;
 }

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

@@ -1,5 +1,5 @@
-@function px2rem($px, $rem: 37.5) {
-  @return $px / $rem +rem;
+@function px2rem($px) {
+  @return $px / 37.5+rem;
 }
 
 body,
@@ -189,6 +189,11 @@ html {
       width: px2rem(16);
       height: px2rem(16);
       margin-top: px2rem(2);
+    }
+
+    .wenhao {
+      width: px2rem(22);
+      height: px2rem(22);
       display: inline-block;
     }
 
@@ -228,17 +233,19 @@ html {
     // display: none;
 
     .pop {
-      width: px2rem(180);
-      height: px2rem(42);
-      background: url(../images/pop.png) no-repeat;
-      background-size: 100% 100%;
+      min-width: px2rem(216);
+      // height: px2rem(42);
+      // background: url(../images/pop.png) no-repeat;
+      // background-size: 100% 100%;
       position: absolute;
-      top: px2rem(-16);
-      left: px2rem(132);
+      top: -0.4rem;
+      left: 2.9rem;
       font-size: px2rem(12);
       line-height: px2rem(16);
       color: #ffffff;
-      padding: px2rem(4) px2rem(8) 0;
+      padding: px2rem(8);
+      background: #04D5C6;
+      border-radius: px2rem(8);
     }
   }
 }
@@ -247,6 +254,221 @@ html {
   margin-bottom: px2rem(80);
 }
 
+.withdrawalAccount {
+  width: px2rem(345);
+  height: px2rem(56);
+  line-height: px2rem(56);
+  box-sizing: border-box;
+  background: #F2F3F7;
+  border-radius: px2rem(8);
+  margin: px2rem(10) auto px2rem(10);
+  padding: 0 px2rem(20);
+  display: none;
+
+  .left {
+    color: #313131;
+    font-size: px2rem(14);
+    font-weight: 600;
+    float: left;
+
+    b {
+      color: #ED4343;
+      margin-right: px2rem(4);
+    }
+  }
+
+  .right {
+    color: #7B7B7D;
+    font-size: px2rem(14);
+    float: right;
+
+    img {
+      display: inline-block;
+      width: px2rem(21);
+      height: px2rem(21);
+      margin-top: px2rem(18);
+    }
+  }
+}
+
+.selectAccount {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+
+  .selectAccount_in {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+    width: px2rem(375);
+    min-height: px2rem(229);
+    background: #fff;
+    border-radius: px2rem(16) px2rem(16) px2rem(0) px2rem(0);
+
+    .title {
+      width: 100%;
+      text-align: center;
+      color: #313131;
+      font-size: px2rem(16);
+      margin-top: px2rem(13);
+      margin-bottom: px2rem(13);
+      font-weight: 600;
+    }
+
+    .accountBox {
+      margin: 0 auto;
+      width: px2rem(343);
+
+      .account {
+        width: 100%;
+        height: px2rem(40);
+        line-height: px2rem(40);
+        background: #F4F4F4;
+        border-radius: px2rem(8);
+        margin-bottom: px2rem(16);
+        box-sizing: border-box;
+        padding: 0 px2rem(12);
+
+        .sel {
+          width: px2rem(18);
+          height: px2rem(18);
+          margin-top: px2rem(11);
+          margin-right: px2rem(5);
+          display: block;
+          float: left;
+        }
+
+        b,
+        span {
+          color: #313131;
+          font-size: px2rem(14);
+          font-weight: 400;
+          float: left;
+        }
+
+        .eid {
+          display: block;
+          float: right;
+          margin-top: px2rem(9);
+          width: px2rem(22);
+          height: px2rem(22);
+        }
+      }
+    }
+  }
+}
+
+.pubWithdrawal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+
+  // display: none;
+  .pubWithdrawal_in {
+    width: px2rem(343);
+    min-height: px2rem(402);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    border-radius: px2rem(16);
+
+    .title {
+      width: 100%;
+      text-align: center;
+      color: #313131;
+      font-size: px2rem(17);
+      font-weight: 500;
+      margin-top: px2rem(20);
+      margin-bottom: px2rem(14);
+    }
+
+    .boxw {
+      width: px2rem(303);
+      height: px2rem(20);
+      line-height: px2rem(20);
+      margin: 0 auto px2rem(20);
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
+
+      .left {
+        color: #7B7B7D;
+        font-size: px2rem(14);
+        font-weight: 500;
+
+        b,
+        p {
+          color: #7B7B7D;
+          font-size: px2rem(14);
+          font-weight: 500;
+        }
+      }
+
+      .right {
+        color: #313131;
+        font-size: px2rem(14);
+        font-weight: 500;
+      }
+    }
+
+    .box3 {
+      height: auto;
+
+      b {
+        margin-bottom: px2rem(6);
+        display: block;
+      }
+    }
+
+    .text {
+      color: #7B7B7D;
+      font-size: px2rem(14);
+      width: px2rem(303);
+      margin: 0 auto px2rem(17);
+      font-weight: 400;
+    }
+
+    .ok {
+      width: px2rem(303);
+      height: px2rem(46);
+      line-height: px2rem(46);
+      border-radius: px2rem(46);
+      background: #04D5C6;
+      margin: 0 auto px2rem(12);
+      color: #FFFFFF;
+      font-size: px2rem(16);
+      text-align: center;
+    }
+
+    .close {
+      width: px2rem(303);
+      height: px2rem(46);
+      line-height: px2rem(46);
+      border-radius: px2rem(46);
+      background: #F2F3F7;
+      margin: 0 auto 0;
+      color: #7B7B7D;
+      font-size: px2rem(16);
+      text-align: center;
+
+    }
+  }
+
+}
+
 .confirm {
   width: px2rem(344);
   height: px2rem(40);
@@ -410,6 +632,7 @@ html {
       }
     }
   }
+
   // .agent_pop_in{
   //   width: px2rem(580);
   //   height: px2rem(988);
@@ -527,6 +750,61 @@ html {
   }
 }
 
+.success {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: none;
+
+  .success_in {
+    width: px2rem(343);
+    min-height: px2rem(174);
+    background: #fff;
+    border-radius: px2rem(16);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    .title {
+      width: 100%;
+      text-align: center;
+      color: #313131;
+      font-size: px2rem(17);
+      height: px2rem(24);
+      margin-top: px2rem(15);
+      margin-bottom: px2rem(14);
+      font-weight: 500;
+    }
+
+    p {
+      width: px2rem(303);
+      margin: 0 auto px2rem(14);
+      color: #7B7B7D;
+      font-size: px2rem(14);
+      font-weight: 400;
+      line-height: px2rem(20);
+    }
+
+    .but {
+      width: px2rem(303);
+      height: px2rem(46);
+      line-height: px2rem(46);
+      text-align: center;
+      color: #fff;
+      font-size: px2rem(16);
+      font-weight: 500;
+      margin: 0 auto;
+      background: #04D5C6;
+      border-radius: px2rem(25);
+    }
+  }
+}
+
 .arabic {
   .nav {
     .back {
@@ -538,7 +816,8 @@ html {
 
   .transfer_method .official_withdraw .pop {
     left: unset;
-    right: 3.52rem;
+    right: 3.2rem;
+    top: -0.8rem;
   }
 
   .my_salary p img {
@@ -556,10 +835,29 @@ html {
       padding-left: unset;
     }
   }
-  .transfer_method .official_withdraw .pop, .transfer_method .agent_settlement .pop, .transfer_dollars .official_withdraw .pop, .transfer_dollars .agent_settlement .pop{
-    background: url(../images/pop-ar.png) no-repeat;
-    background-size: 100% 100%;
-    left: auto;
-    right: 3.52rem;
+
+  // .transfer_method .official_withdraw .pop,
+  // .transfer_method .agent_settlement .pop,
+  // .transfer_dollars .official_withdraw .pop,
+  // .transfer_dollars .agent_settlement .pop {
+  //   background: url(../images/pop-ar.png) no-repeat;
+  //   background-size: 100% 100%;
+  //   left: auto;
+  //   right: 3.52rem;
+  // }
+  .pubWithdrawal .pubWithdrawal_in {
+    height: 11.6rem;
+
+    .boxw .right {
+      float: left;
+      white-space: nowrap;
+    }
+  }
+}
+
+.english {
+  .transfer_method .official_withdraw .pop {
+    top: -0.8rem;
+    left: 2.9rem;
   }
 }

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

@@ -0,0 +1,221 @@
+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.bank.text1));
+    $('.text2').text(langReplace(localLang.bank.text2));
+    $('.text3').text(langReplace(localLang.bank.text3));
+    $('.text4').text(langReplace(localLang.bank.text4));
+    $('.text5').attr('placeholder', langReplace(localLang.bank.text5));
+    $('.text6').attr('placeholder', langReplace(localLang.bank.text6));
+    $('.text7').attr('placeholder', langReplace(localLang.bank.text7));
+    $('.text8').attr('placeholder', langReplace(localLang.bank.text8));
+    $('.text9').attr('placeholder', langReplace(localLang.bank.text9));
+    $('.text10').attr('placeholder', langReplace(localLang.bank.text10));
+    $('.p1').text(langReplace(localLang.pTitle.p1));
+    $('.p2').text(langReplace(localLang.pTitle.p2));
+    $('.p3').text(langReplace(localLang.pTitle.p3));
+    $('.p4').text(langReplace(localLang.pTitle.p4));
+    $('.p5').text(langReplace(localLang.pTitle.p5));
+    $('.p6').text(langReplace(localLang.pTitle.p6));
+}
+// 获取
+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);
+                $('.bankName input').val(fields.bank_name);
+                $('.sWIFTCode input').val(fields.swift_code);
+                $('.payeeName input').val(fields.full_name);
+                $('.Address input').val(fields.address);
+                // 渲染国家
+                $('.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 nameval;
+$('.pub .pub_in').on('click', '.countryPub', function (params) {
+    $(this).addClass('act').siblings().removeClass('act');
+    nameval = $(this).attr('name');
+    var country = $(this).attr('country');
+    fields.country = country;
+    return false;
+})
+// 确认选中国家
+$('.pub .pub_in .soure').click(function (params) {
+    $('.country input').val(nameval);
+    $('.pub').hide();
+})
+// 确认绑定按钮
+$('.but .ok').click(function (params) {
+    console.log(fields);
+    var obj = {}
+    obj.country = fields.country;
+    obj.bank_account = $('.payeeAccountNo input').val();
+    obj.bank_name = $('.bankName input').val();
+    obj.swift_code = $('.sWIFTCode input').val();
+    obj.full_name = $('.payeeName input').val();
+    obj.address = $('.Address input').val();
+    if (obj.country && obj.bank_account && obj.bank_name && obj.swift_code && obj.full_name && obj.address != '') {
+        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/PAYONNER.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.payonner.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.pTitle.p7));
+    $('.text9').attr('placeholder', langReplace(localLang.payonner.text9));
+    $('.p1').text(langReplace(localLang.pTitle.p1));
+    $('.p7').text(langReplace(localLang.pTitle.p7));
+    $('.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/VODAFONE.js

@@ -0,0 +1,206 @@
+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;
+    $('.text2').text(langReplace(localLang.payonner.text2));
+    $('.text3').text(langReplace(localLang.payonner.text3));
+    $('.text4').text(langReplace(localLang.payonner.text4));
+    $('.text5').text(langReplace(localLang.payonner.text5));
+    $('.text7').attr('placeholder', langReplace(localLang.payonner.text7));
+    $('.text8').attr('placeholder', langReplace(localLang.payonner.text8));
+    $('.p1').text(langReplace(localLang.pTitle.p1));
+    $('.p2').text(langReplace(localLang.pTitle.p2));
+
+}
+// 获取
+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);
+                // 渲染国家
+                $('.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();
+    if (obj.country && obj.bank_account) {
+        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/bill.js

@@ -98,16 +98,18 @@ function getData() {
                 list.forEach(item => {
                     // tradeType 1 收入 2支出
                     // if (item.tradeType == 1) {
-                    str += `<li>
-                            <div>
-                                    <p>${item.type == 1 ? `${langReplace(localLang.bill.text5)}` : item.type == 2 ? `${langReplace(localLang.bill.text6)}` : item.type == 3 ? `${langReplace(localLang.bill.text7)}` : item.type == 4 ? `ID:${type == 1 ? item.target.erbanNo : item.me.erbanNo} ${langReplace(localLang.bill.text8)} ID: ${type == 1 ? item.me.erbanNo : item.target.erbanNo}` : `${langReplace(localLang.bill.text9)}`}</p>
-                                    <b dir="ltr">${type == 1 ? '+ ' + item.operateUsdNum.toLocaleString() : item.operateUsdNum.toLocaleString()} ÜS</b>
-                            </div>
-                            <div>
-                                    <span>${langReplace(localLang.bill.text4)}${item.beforeUsdNum}ÜS -> ${item.afterUsdNum}ÜS</span>
-                                    <span>${dateFormat(item.createTime, 'yyyy/MM/dd hh:mm:ss')}</span>
-                            </div>
-                        </li>`
+                    str += `
+                            <li class="${item.type == 5 || item.type == 6 ? 'actLi' : ''}">
+                                <div>
+                                        ${(item.type == 5 || item.type == 6) ? `<i class="sp${item.status}">${(item.status == 0 ? langReplace(localLang.bill.text10) : item.status == 1 ? langReplace(localLang.bill.text11) : langReplace(localLang.bill.text12))}</i>` : ''}
+                                        <p>${item.type == 1 ? `${langReplace(localLang.bill.text5)}` : item.type == 2 ? `${langReplace(localLang.bill.text6)}` : item.type == 3 ? `${langReplace(localLang.bill.text7)}` : item.type == 4 ? `ID:${type == 1 ? item.target.erbanNo : item.me.erbanNo} ${langReplace(localLang.bill.text8)} ID: ${type == 1 ? item.me.erbanNo : item.target.erbanNo}` : `${langReplace(localLang.bill.text9)}`}</p>
+                                        <b dir="ltr">${type == 1 ? '+ ' + item.operateUsdNum.toLocaleString() : item.operateUsdNum.toLocaleString()} ÜS</b>
+                                </div>
+                                <div>
+                                        <span>${langReplace(localLang.bill.text4)}${item.beforeUsdNum}ÜS -> ${item.afterUsdNum}ÜS</span>
+                                        <span>${dateFormat(item.createTime, 'yyyy/MM/dd hh:mm:ss')}</span>
+                                </div>
+                            </li>`
                     //     } else {
                     //         str += `<li>
                     //       <div>

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

@@ -46,6 +46,9 @@ var transfer_dollars_ArrType;
 var typeTabType = '';
 var ratio;
 var usGold;
+var accountListName;
+var accountObj = {};
+var withdrawRate;
 $(function () {
   getInfoFromClient();
   fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
@@ -90,6 +93,21 @@ $(function () {
     $('.text16').text(langReplace(localLang.salary.text16));
     $('.text17').html(langReplace(localLang.salary.text17));
     $('.text18').html(langReplace(localLang.salary.text18));
+    $('.textnew1').html(langReplace(localLang.salary.textnew1));
+    $('.textnew2').html(langReplace(localLang.salary.textnew2));
+    $('.textnew3').html(langReplace(localLang.salary.textnew3));
+    $('.textnew4').html(langReplace(localLang.salary.textnew4));
+    $('.textnew5').html(langReplace(localLang.salary.textnew5));
+    $('.textnew6').html(langReplace(localLang.salary.textnew6));
+    $('.textnew7').html(langReplace(localLang.salary.textnew7));
+    $('.textnew8').html(langReplace(localLang.salary.textnew8));
+    $('.textnew9').html(langReplace(localLang.salary.textnew9));
+    $('.textnew10').html(langReplace(localLang.salary.textnew10));
+    $('.textnew11').html(langReplace(localLang.salary.textnew11));
+    $('.textnew12').html(langReplace(localLang.salary.textnew12));
+    $('.textnew15').html(langReplace(localLang.salary.textnew15));
+    $('.textnew16').html(langReplace(localLang.salary.textnew16));
+    $('.textnew17').html(langReplace(localLang.salary.textnew17));
   }
 });
 // 获取usd操作的功能标签tab
@@ -129,6 +147,20 @@ function getTab() {
           })
           $('.agent_pop .wrap').append(agent_popStr);
           $('.agent_pop .sure').attr('uid', rechargeUserList[0].uid);
+          // 渲染账户列表
+          var accountListStr = '';
+          withdrawRate = res.data.withdrawAccountVo.withdrawRate;
+          $('.selectAccount .selectAccount_in .accountBox .account').remove();
+          res.data.withdrawAccountVo.accountList.forEach(res => {
+            accountListStr += `
+                  <div class="account">
+                    <img style="display:${res.hasBound ? 'block' : 'none'}" src="./images/not.png" alt="" class="sel" name=${res.name} type=${res.type} obj='${JSON.stringify(res)}'>
+                    <b>${res.name}</b><span>${res.hasBound ? '' : '(Unbound)'}</span>
+                    <img  src="./images/eidIcon.png" alt="" class="eid" type=${res.type}>
+                  </div>
+            `
+          })
+          $('.selectAccount .selectAccount_in .accountBox').append(accountListStr);
         }
         // 当前可提现余额
         usGold = res.data.guildUsdNum
@@ -146,7 +178,7 @@ function getTab() {
           tabStr += `<div tabKey=${res.tabKey} class="item ${i == 0 ? 'act' : ''}">${res.tabKey == 'personal' ? langReplace(localLang.salary.text4) : langReplace(localLang.salary.text5)}</div>`
         })
         $('.tab').append(tabStr);
-        typeTabType =  res.data.typeTab[0].tabKey
+        typeTabType = res.data.typeTab[0].tabKey
         typeTabFun(typeTabType);
       } else {
         toastMsg(res.message)
@@ -175,6 +207,7 @@ function typeTabFun(type) {
   transfer_dollars_Arr = {};
   $('.transfer_method li').remove();
   $('.transfer_dollars li').remove();
+  $('.withdrawalAccount').hide();
   var str = '';
   var arr = type == 'personal' ? tabPersonalArr[0] : tabAgentArr[0];
   // 处理方式
@@ -207,14 +240,16 @@ function typeTabFun(type) {
           </li>
       `
     } else if (res.type == 5) {
+      $('.withdrawalAccount').show();
       str += `
           <li class="official_withdraw ${i == 0 ? 'li_act' : ''}" type="${res.type}" ratio="${res.ratio}">
             <p>
               <img src="./images/dollar.png" class="dollar" alt="">
               <e>${langReplace(localLang.salary.text20)}</e>
+              <img class="wenhao" src="./images/wenhao.png" />
             </p>
-            <div class="pop">
-            ${langReplace(localLang.salary.text21)}
+            <div class="pop" style="display:none">
+             ${langReplace(localLang.salary.text21)}
             </div>
           </li>
       `
@@ -225,7 +260,7 @@ function typeTabFun(type) {
               <img src="./images/dollar.png" class="dollar" alt="">
               <e>${langReplace(localLang.salary.text22)}</e>
             </p>
-            <div class="pop">
+            <div class="pop" style="display:none">
             ${langReplace(localLang.salary.text21)}
             </div>
           </li>
@@ -249,6 +284,7 @@ function typeTabFun(type) {
 }
 // 处理金额
 function dollarsFun(type) {
+  $('.withdrawalAccount').hide();
   $('.transfer_dollars li').remove();
   var str2 = '';
   if (transfer_dollars_Arr[type].canCustom) {
@@ -268,6 +304,9 @@ function dollarsFun(type) {
       $('.president_pop .btn_wrap .sure').attr('guildusdnum', res.guildUsdNum);
       $('.agent_pop .btn_wrap .sure').attr('guildusdnum', res.guildUsdNum);
     }
+    if (res.type == 5) {
+      $('.withdrawalAccount').show();
+    }
     if (res.type == 2) {
       str2 += `
         <li class="${i == 0 ? 'li_act' : ''}" guildusdnum=${res.guildUsdNum}>
@@ -350,6 +389,12 @@ $('.transfer_method').on('click', 'li', function () {
   transfer_dollars_ArrType = type;
   dollarsFun(transfer_dollars_ArrType);
 })
+$('.transfer_method').on('click', 'li .wenhao', function () {
+  $('.pop').show();
+})
+$('.transfer_method').on('click', 'li .pop', function () {
+  $('.pop').hide();
+})
 // 选择金额方式
 $('.transfer_dollars').on('click', 'li', function () {
   $(this).addClass('li_act').siblings().removeClass('li_act');
@@ -458,6 +503,26 @@ function operateValue(than) {
   } else if (type == 4) {
     $('.president_pop').show();
     bodyScroolFun(true);
+  } else if (type == 5) {
+    if (accountListName) {
+      $('.pubWithdrawal .pubWithdrawal_in .ok').attr('guildusdnum', guildUsdNum);
+      $('.pubWithdrawal .pubWithdrawal_in .ok').attr('type', type);
+      $('.pubWithdrawal .pubWithdrawal_in .ok').attr('accountType', accountObj.type);
+      if (accountObj.type == 'VODAFONE') {
+        $('.pubWithdrawal .pubWithdrawal_in .box3 .left p').show();
+        $('.pubWithdrawal .pubWithdrawal_in .box3 .left p span').text(accountObj.usdRatio);
+        $('.pubWithdrawal .pubWithdrawal_in .box4 .right').text(`${((than.attr('guildUsdNum')) - (than.attr('guildUsdNum') * withdrawRate)) * 50} ${accountObj.currency}`);
+      } else {
+        $('.pubWithdrawal .pubWithdrawal_in .box3 .left p').hide();
+        $('.pubWithdrawal .pubWithdrawal_in .box4 .right').text(`${((than.attr('guildUsdNum')) - (than.attr('guildUsdNum') * withdrawRate))} ${accountObj.currency}`);
+      }
+      $('.pubWithdrawal .pubWithdrawal_in .box1 .right').text(`${than.attr('guildUsdNum')} USD`);
+      $('.pubWithdrawal .pubWithdrawal_in .box2 .right').text(withdrawRate * 100 + '%');
+      $('.pubWithdrawal .pubWithdrawal_in .box3 .right').text(`${than.attr('guildUsdNum') * withdrawRate} USD`);
+      $('.pubWithdrawal').show();
+    } else {
+      toastMsg(langReplace(localLang.salary.textnew13))
+    }
   } else {
     var obj = {
       guildUsdNum,
@@ -467,6 +532,26 @@ function operateValue(than) {
     operate(obj)
   }
 }
+// 确认提现按钮
+$('.pubWithdrawal .pubWithdrawal_in .ok').click(function () {
+  var guildUsdNum = $(this).attr('guildUsdNum');
+  var type = $(this).attr('type');
+  var accountType = $(this).attr('accountType');
+  var obj = {
+    guildUsdNum,
+    accountType,
+    type,
+  };
+  if ($(this).attr('accountType') == 'VODAFONE' && $(this).attr('guildUsdNum') > 1000) {
+    toastMsg(langReplace(localLang.salary.textnew14))
+  } else {
+    operate(obj)
+  }
+})
+// 取消提现按钮
+$('.pubWithdrawal .pubWithdrawal_in .close').click(function () {
+  $('.pubWithdrawal').hide();
+})
 // 确认提交接口
 function operate(obj) {
   showLoading()
@@ -478,7 +563,12 @@ function operate(obj) {
       if (res.code === 200) {
         getTab();
         // window.location.href = `./salary_account.html?type=${obj.type}&createTime=${dateFormat(res.data.createTime,'yyyy/MM/dd hh:mm:ss')}&guildUsdNum=${res.data.guildUsdNum}`
-        window.location.href = `./successful.html?type=${obj.type}&data=${JSON.stringify(res.data)}`
+        if (obj.type == 5) {
+          $('.pubWithdrawal').hide();
+          $('.success').show();
+        } else {
+          window.location.href = `./successful.html?type=${obj.type}&data=${JSON.stringify(res.data)}`
+        }
       } else {
         toastMsg(res.message)
       }
@@ -489,4 +579,34 @@ function operate(obj) {
       toastMsg(langReplace(localLang.demoModule.layerIndex3))
     }
   })
-}
+}
+// 打开账户按钮
+$('.withdrawalAccount').click(function name(params) {
+  $('.selectAccount').show();
+})
+// 关闭账户按钮
+$('.selectAccount').click(function () {
+  $('.selectAccount').hide();
+})
+// 选择账户按钮
+$('.selectAccount .selectAccount_in .accountBox').on('click', ' .account', function () {
+  return false;
+})
+// 选择账户按钮
+$('.selectAccount .selectAccount_in .accountBox').on('click', ' .account .sel', function () {
+  $('.selectAccount .selectAccount_in .accountBox .account .sel').attr("src", './images/not.png');
+  $(this).attr("src", './images/yes.png');
+  accountListName = $(this).attr("name");
+  accountObj = JSON.parse($(this).attr('obj'));
+  $('.withdrawalAccount .right b').text(accountListName);
+  $('.selectAccount').hide();
+})
+// 选择账户编辑
+$('.selectAccount .selectAccount_in .accountBox').on('click', ' .account .eid', function () {
+  var type = $(this).attr('type');
+  location.href = `./${type}.html?type=${type}`
+})
+// 关闭成功按钮
+$('.success .success_in .but').click(function () {
+  $('.success').hide();
+})

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

@@ -225,11 +225,28 @@ langAr = {
         text18: `(نسبة التبادل 1:<b>7000</b>)`,
         text19: `تبادل العملات`,
         text20: `السحب الرسمي`,
-        text21: `يمكن التسوية في الأول و 16 من كل شهر`,
+        text21: `تفتح قناة السحب في اليومين الأول والثاني من كل شهر.`,
         text22: `تسوية الوكيل`,
         text23: `تسوية وكلاء الشحن`,
         text24: `يرجى إدخال المبلغ المراد استرداده`,
-        text25: `عملات`
+        text25: `عملات`,
+        textnew1: `حساب السحب`,
+        textnew2: `غير مرتبط`,
+        textnew3: `اختر الحساب`,
+        textnew4: `سحب`,
+        textnew5: `مبلغ السحب`,
+        textnew6: `معدل رسوم المعالجة`,
+        textnew7: `رسوم المعالجة`,
+        textnew8: `سعر الصرف من الدولار الأمريكي إلى الجنيه المصري: 1:`,
+        textnew9: `المبلغ المقدر`,
+        textnew10: `ملاحظة: قد يتأثر المبلغ المتوقع الوصول بسعر صرف البنك وما إلى ذلك.`,
+        textnew11: `سحب`,
+        textnew12: `إلغاء`,
+        textnew13: `يرجى اختيار حساب السحب`,
+        textnew14: `أكثر من الحد الأقصى للمبلغ القابل للتحويل.`,
+        textnew15: `نجاح`,
+        textnew16: `وقت معالجة طلبات السحب يكون من اليوم الثالث إلى العاشر من كل شهر.`,
+        textnew17: `موافق`,
     },
     bill: {
         text1: `الفاتورة`,
@@ -241,6 +258,9 @@ langAr = {
         text7: `تحويل الراتب إلى عملات`,
         text8: `تحويل الراتب`,
         text9: `راتب الوكيل`,
+        text10: `قيد المراجعة`,
+        text11: `تم الإصدار`,
+        text12: `مرفوض`,
     },
     success: {
         text1: `التسوية ناجحة`,
@@ -259,5 +279,38 @@ langAr = {
         text14: `حساب التسوية`,
         text15: `الوقت`,
         text16: `طلب`
+    },
+    payonner: {
+        text1: `Payonner`,
+        text2: `تأكيد`,
+        text3: `إلغاء الربط`,
+        text4: `البلد`,
+        text5: `موافق`,
+        text6: `نوع العملة:`,
+        text7: `البلد`,
+        text8: `رقم حساب المستلم`,
+        text9: `اسم المستلم`,
+        text10: `لا يمكن ترك الحقول الإلزامية فارغة`,
+    },
+    bank: {
+        text1: `تأكيد`,
+        text2: `إلغاء الربط`,
+        text3: `البلد`,
+        text4: `موافق`,
+        text5: `البلد`,
+        text6: `رقم حساب المستلم`,
+        text7: `اسم البنك`,
+        text8: `رمز SWIFT`,
+        text9: `اسم المستلم`,
+        text10: `العنوان`,
+    },
+    pTitle: {
+        p1: `البلد`,
+        p2: `رقم حساب المستلم`,
+        p3: `اسم البنك (أدخل الإنجليزية فقط)`,
+        p4: `رمز SWIFT (أدخل الإنجليزية فقط)`,
+        p5: `اسم المستلم (أدخل الإنجليزية فقط)`,
+        p6: `العنوان (أدخل الإنجليزية فقط)`,
+        p7: `حساب المستلم (صيغة البريد الإلكتروني)`,  
     }
 }

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

@@ -222,12 +222,29 @@ langEn = {
         text17: `Can be exchanged for <b>0</b> gold coin`,
         text18: `(Exchange at a ratio of 1:<b>7000</b>)`,
         text19: `Exchange coins`,
-        text20: `Official withdraw`,
-        text21: `Settlement available on the 1st and 16th of each month`,
+        text20: `Withdraw`,
+        text21: `The withdrawal channel opens on the 1st and 2nd of every month.`,
         text22: `Agent settlement`,
         text23: `Recharge agent settlement`,
         text24: `Please enter the amount to be redeemed`,
         text25: `Coins`,
+        textnew1: `Withdrawal account`,
+        textnew2: `Unbound`,
+        textnew3: `Select Account`,
+        textnew4: `Withdrawal`,
+        textnew5: `Withdrawal amount `,
+        textnew6: `Handling Fee rate`,
+        textnew7: `Handling Fee`,
+        textnew8: `USD to EGP exchange rate: 1:`,
+        textnew9: `Estimated amount`,
+        textnew10: `Note: Estimated arrival amount may be affected by bank exchange rate, etc.`,
+        textnew11: `Withdraw`,
+        textnew12: `Cancel`,
+        textnew13: `Please select a withdrawal account`,
+        textnew14: `More than the maximum transferable amount.`,
+        textnew15: `Success`,
+        textnew16: `The processing time for withdrawal requests is from the 3rd to the 10th of every month.`,
+        textnew17: `OK`,
     },
     bill: {
         text1: `Bill`,
@@ -239,6 +256,10 @@ langEn = {
         text7: `Salary exchange for coins`,
         text8: `Salary transfer`,
         text9: `Agent salary`,
+        text10: `In Review  `,
+        text11: `Issued`,
+        text12: `Rejected`,
+        text13: ``,
     },
     success: {
         text1: `Settlement successful`,
@@ -258,4 +279,37 @@ langEn = {
         text15: `Time`,
         text16: `Order`,
     },
+    payonner: {
+        text1: `Payonner `,
+        text2: `Confirm`,
+        text3: `Unbind `,
+        text4: `Country`,
+        text5: `OK`,
+        text6: `Currency Type:`,
+        text7: `Country`,
+        text8: `payeeAccountNo`,
+        text9: `payeeName`,
+        text10: `Mandatory fields cannot be blank`,
+    },
+    bank: {
+        text1: `Confirm`,
+        text2: `Unbind `,
+        text3: `Country`,
+        text4: `OK`,
+        text5: `Country`,
+        text6: `payeeAccountNo`,
+        text7: `Bank Name`,
+        text8: `SWIFT Code`,
+        text9: `payeeName`,
+        text10: `Address`,
+    },
+    pTitle: {
+        p1: `Country`,
+        p2: `payeeAccountNo`,
+        p3: `Bank Name(Only Enter English)`,
+        p4: `SWIFT Code(Only Enter English)`,
+        p5: `payeeName(Only Enter English)`,
+        p6: `Address(Only Enter English)`,
+        p7: `payeeAccount(E-mail fomat)`,
+    }
 }

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

@@ -226,11 +226,28 @@ langZh = {
         text18: `(兌換比例為 1:<b>7000</b>)`,
         text19: `兌換硬幣`,
         text20: `官方提現`,
-        text21: `每月的 1 日和 16 日可結算`,
+        text21: `提款通道每月1日和2日開放。`,
         text22: `代理結算`,
         text23: `充值代理結算`,
         text24: `請輸入要贖回的金額`,
-        text25: `金幣`
+        text25: `金幣`,
+        textnew1: `提款賬戶`,
+        textnew2: `未綁定`,
+        textnew3: `選擇賬戶`,
+        textnew4: `提款`,
+        textnew5: `提款金額`,
+        textnew6: `手續費率`,
+        textnew7: `手續費`,
+        textnew8: `美元兌埃及鎊匯率：1：`,
+        textnew9: `預估金額`,
+        textnew10: `注意：預估到賬金額可能會受銀行匯率等影響。`,
+        textnew11: `提款`,
+        textnew12: `取消`,
+        textnew13: `請選擇提款賬戶`,
+        textnew14: `超過最大可轉賬金額。`,
+        textnew15: `成功`,
+        textnew16: `提款申請的處理時間為每月3日至10日。`,
+        textnew17: `確定`,
     },
     bill: {
         text1: `賬單`,
@@ -242,6 +259,9 @@ langZh = {
         text7: `薪資兌換為硬幣`,
         text8: `薪資轉賬`,
         text9: `代理薪資`,
+        text10: `審核中`,
+        text11: `已發放`,
+        text12: `已拒絕`,
     },
     success: {
         text1: `結算成功`,
@@ -261,4 +281,37 @@ langZh = {
         text15: `時間`,
         text16: `訂單`
     },
+    payonner: {
+        text1: `Payonner`,
+        text2: `確認`,
+        text3: `解绑`,
+        text4: `國家`,
+        text5: `確定`,
+        text6: `貨幣類型：`,
+        text7: `國家`,
+        text8: `收款人賬號`,
+        text9: `收款人姓名`,
+        text10: `必填字段不能為空`,
+    },
+    bank: {
+        text1: `確認`,
+        text2: `解绑`,
+        text3: `國家`,
+        text4: `確定`,
+        text5: `國家`,
+        text6: `收款人賬號`,
+        text7: `銀行名稱`,
+        text8: `SWIFT 代碼`,
+        text9: `收款人姓名`,
+        text10: `地址`,
+    },
+    pTitle: {
+        p1: `國家`,
+        p2: `收款人賬號`,
+        p3: `銀行名稱(僅輸入英文)`,
+        p4: `SWIFT 代碼(僅輸入英文)`,
+        p5: `收款人姓名(僅輸入英文)`,
+        p6: `地址(僅輸入英文)`,
+        p7: `收款人賬號（電子郵件格式）`,  
+    }
 }

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

@@ -70,6 +70,12 @@
       </div>
     </li> -->
   </ul>
+  <!-- 绑定账户 -->
+  <div class="withdrawalAccount">
+    <div class="left"><b>*</b><span class="textnew1"></span></div>
+    <!-- textnew2 -->
+    <div class="right"><b class=""> </b><img src="./images/right.png" alt=""></div>
+  </div>
   <!-- 转增金额 -->
   <div class="transfer_dollars_tit">
     <div class="title text7"></div>
@@ -157,6 +163,58 @@
     </div>
   </div>
 
+  <!-- 选择账户弹窗 -->
+  <div class="selectAccount">
+    <div class="selectAccount_in">
+      <div class="title textnew3"></div>
+      <div class="accountBox">
+        <!-- <div class="account">
+          <img src="./images/not.png" alt="" class="sel">
+          <b>Vodafone</b><span>(Unbound)</span>
+          <img src="./images/eidIcon.png" alt="" class="eid">
+        </div> -->
+      </div>
+    </div>
+  </div>
+
+  <!-- 确认提现账户弹窗 -->
+  <div class="pubWithdrawal">
+    <div class="pubWithdrawal_in">
+      <div class="title textnew4"></div>
+      <div class="boxw box1">
+        <div class="left textnew5"></div>
+        <div class="right">0USD</div>
+      </div>
+      <div class="boxw box2">
+        <div class="left textnew6"></div>
+        <div class="right">6%</div>
+      </div>
+      <div class="boxw box3">
+        <div class="left">
+          <b class="textnew7"></b>
+          <p><strong class="textnew8"></strong><span>50</span></p>
+        </div>
+        <div class="right">0USD</div>
+      </div>
+      <div class="boxw box4">
+        <div class="left textnew9"></div>
+        <div class="right">0USD</div>
+      </div>
+      <div class="text textnew10"></div>
+      <div class="ok textnew11"></div>
+      <div class="close textnew12 "></div>
+    </div>
+  </div>
+
+  <!-- 提现账户成功弹窗 -->
+  <div class="success">
+    <div class="success_in">
+      <div class="title textnew15">Success</div>
+      <p class="textnew16">The processing time for withdrawal requests is from the 3rd to the 10th of every month.</p>
+      <div class="but textnew17">OK</div>
+    </div>
+  </div>
+
   <script src="../../common/js/jquery-3.2.1.min.js"></script>
   <script src="../../common/js/flexible.js"></script>
   <script src="../../common/js/vconsole.min.js"></script>

view/molistar/modules/guildAr/css/guildInfoSet.css

@@ -4,7 +4,7 @@ body {
   height: 17.78667rem;
   background: #F5F7F9;
   box-sizing: border-box;
-  padding: 1.73333rem 0rem 0 0;
+  padding: 2.13333rem 0rem 0 0;
 }
 
 .back {

view/molistar/modules/guildAr/css/guildInfoSet.scss

@@ -8,7 +8,7 @@ body {
     height: px2rem(1334);
     background: #F5F7F9;
     box-sizing: border-box;
-    padding: px2rem(130) px2rem(0) 0 0;
+    padding: px2rem(160) px2rem(0) 0 0;
 }
 
 .back {

view/molistar/modules/guildAr/css/incomeStatistics.css

@@ -0,0 +1,338 @@
+body {
+  width: 100%;
+  height: 17.78667rem;
+  background: #fff;
+  padding-top: 2.56rem;
+}
+
+.back {
+  width: 100%;
+  height: 2.34667rem;
+  position: fixed;
+  left: 0;
+  top: 0rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+  background: #fff;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  top: 1.33333rem;
+  left: 0.42667rem;
+  z-index: 2;
+}
+
+.back b {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 1.33333rem;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  color: #313131;
+  font-size: 0.42667rem;
+  font-weight: 500;
+}
+
+.income {
+  width: 9.14667rem;
+  height: 3.01333rem;
+  background: #F2F3F7;
+  border-radius: 0.21333rem;
+  margin: 0 auto 0.37333rem;
+  box-sizing: border-box;
+  padding: 0.32rem 0.32rem;
+}
+
+.income .time {
+  width: 100%;
+  height: 0.48rem;
+  margin-bottom: 0.24rem;
+}
+
+.income .time b {
+  display: inline-block;
+  color: #04D5C6;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  vertical-align: middle;
+}
+
+.income .time img {
+  display: inline-block;
+  width: 0.48rem;
+  height: 0.48rem;
+  margin: 0 0.10667rem;
+  vertical-align: middle;
+}
+
+.income h3 {
+  width: 100%;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  margin-bottom: 0.29333rem;
+}
+
+.income .gold {
+  width: 100%;
+  height: 0.74667rem;
+  line-height: 0.74667rem;
+}
+
+.income .gold img {
+  display: inline-block;
+  width: 0.74667rem;
+  height: 0.74667rem;
+  vertical-align: middle;
+}
+
+.income .gold b {
+  display: inline-block;
+  vertical-align: middle;
+  color: #313131;
+  font-size: 0.64rem;
+  font-weight: 600;
+  margin: 0 0.10667rem;
+}
+
+.tab {
+  width: 9.14667rem;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  margin: 0 auto 0.26667rem;
+}
+
+.tab div {
+  margin-right: 0.82667rem;
+  float: left;
+  color: #313131;
+  font-size: 0.42667rem;
+  font-weight: 600;
+}
+
+.tab .act {
+  color: #04D5C6;
+}
+
+.titleInfo {
+  width: 9.14667rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto 0;
+  background: #E4F6F1;
+  padding: 0 0.69333rem;
+  box-sizing: border-box;
+}
+
+.titleInfo div {
+  text-align: center;
+  width: 33%;
+}
+
+.titleInfoAct {
+  padding: 0;
+}
+
+.userInfo {
+  width: 9.14667rem;
+  margin: 0 auto 1.6rem;
+  display: none;
+}
+
+.userInfo li {
+  width: 100%;
+  height: 1.6rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 0.61333rem 0 0.32rem;
+}
+
+.userInfo li .tx {
+  width: 1.09333rem;
+  height: 1.09333rem;
+  position: relative;
+  margin-top: 0.24rem;
+  float: left;
+  margin-right: 0.10667rem;
+}
+
+.userInfo li .tx img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 50%;
+}
+
+.userInfo li .tx span {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.77333rem;
+  min-width: 0.61333rem;
+  height: 0.37333rem;
+  line-height: 0.37333rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  font-weight: 500;
+  background: #04D5C6;
+  border-radius: 0.37333rem;
+}
+
+.userInfo li .user {
+  float: left;
+  width: 1.86667rem;
+  height: 1.09333rem;
+  margin-top: 0.24rem;
+  margin-right: 0.24rem;
+}
+
+.userInfo li .user p {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  margin-top: 0.12rem;
+  margin-bottom: 0.2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.userInfo li .user b {
+  color: #7B7B7D;
+  font-size: 0.34667rem;
+  font-weight: 400;
+}
+
+.userInfo li .incomes {
+  width: 2.42667rem;
+  height: 100%;
+  text-align: center;
+  color: #313131;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  margin-top: 0.66667rem;
+  float: left;
+}
+
+.userInfo li .duration {
+  width: 1.73333rem;
+  text-align: center;
+  height: 100%;
+  color: #313131;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  margin-top: 0.66667rem;
+  float: right;
+}
+
+.userInfo .act {
+  background: #F2F3F7;
+}
+
+.dayDate {
+  width: 9.14667rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  margin: 0 auto 0;
+}
+
+.dayDate li {
+  color: #313131;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.69333rem;
+  box-sizing: border-box;
+}
+
+.dayDate li div {
+  text-align: center;
+  width: 33%;
+}
+
+.dayDate .act {
+  background: #F2F3F7;
+}
+
+.cycle {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+
+.cycle .cycle_in {
+  width: 100%;
+  height: 7.01333rem;
+  left: 0;
+  bottom: 0;
+  border-radius: 0.42667rem 0.42667rem 0 0;
+  background: #fff;
+  position: absolute;
+}
+
+.cycle .cycle_in ul {
+  width: 100%;
+  text-align: center;
+  margin-top: 0.53333rem;
+  height: 5.5rem;
+  overflow-y: scroll;
+}
+
+.cycle .cycle_in ul::-webkit-scrollbar {
+  display: none;
+}
+
+.cycle .cycle_in ul li {
+  height: 0.8rem;
+  line-height: 0.8rem;
+  color: #7B7B7D;
+  font-weight: 400;
+  font-size: 0.37333rem;
+}
+
+.cycle .cycle_in ul .act {
+  background: #F4F4F4;
+  color: #313131;
+}
+
+.arabic .userInfo li .tx {
+  float: right;
+  margin-right: 0;
+  margin-left: 0.10667rem;
+}
+
+.arabic .userInfo li .user {
+  float: right;
+  margin-right: 0;
+  margin-left: 0.24rem;
+}
+
+.arabic .userInfo li .incomes {
+  float: right;
+}
+
+.arabic .userInfo li .duration {
+  float: left;
+}

view/molistar/modules/guildAr/css/incomeStatistics.scss

@@ -0,0 +1,347 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+body {
+    width: 100%;
+    height: px2rem(1334);
+    background: #fff;
+    padding-top: px2rem(192);
+}
+
+.back {
+    width: 100%;
+    height: px2rem(176);
+    position: fixed;
+    left: 0;
+    top: px2rem(0);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+    background: #fff;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        top: px2rem(100);
+        left: px2rem(32);
+        z-index: 2;
+    }
+
+    b {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: px2rem(100);
+        height: px2rem(44);
+        line-height: px2rem(44);
+        color: #313131;
+        font-size: px2rem(32);
+        font-weight: 500;
+    }
+}
+
+.income {
+    width: px2rem(686);
+    height: px2rem(226);
+    background: #F2F3F7;
+    border-radius: px2rem(16);
+    margin: 0 auto px2rem(28);
+    box-sizing: border-box;
+    padding: px2rem(24) px2rem(24);
+
+    .time {
+        width: 100%;
+        height: px2rem(36);
+        margin-bottom: px2rem(18);
+
+        b {
+            display: inline-block;
+            color: #04D5C6;
+            font-size: px2rem(26);
+            font-weight: 500;
+            vertical-align: middle;
+        }
+
+        img {
+            display: inline-block;
+            width: px2rem(36);
+            height: px2rem(36);
+            margin: 0 px2rem(8);
+            vertical-align: middle;
+        }
+    }
+
+    h3 {
+        width: 100%;
+        height: px2rem(40);
+        line-height: px2rem(40);
+        color: #313131;
+        font-size: px2rem(28);
+        font-weight: 600;
+        margin-bottom: px2rem(22);
+    }
+
+    .gold {
+        width: 100%;
+        height: px2rem(56);
+        line-height: px2rem(56);
+
+        img {
+            display: inline-block;
+            width: px2rem(56);
+            height: px2rem(56);
+            vertical-align: middle;
+        }
+
+        b {
+            display: inline-block;
+            vertical-align: middle;
+            color: #313131;
+            font-size: px2rem(48);
+            font-weight: 600;
+            margin: 0 px2rem(8);
+        }
+    }
+}
+
+.tab {
+    width: px2rem(686);
+    height: px2rem(44);
+    line-height: px2rem(44);
+    margin: 0 auto px2rem(20);
+
+    div {
+        margin-right: px2rem(62);
+        float: left;
+        color: #313131;
+        font-size: px2rem(32);
+        font-weight: 600;
+    }
+
+    .act {
+        color: #04D5C6;
+    }
+}
+
+.titleInfo {
+    width: px2rem(686);
+    height: px2rem(76);
+    line-height: px2rem(76);
+    color: #313131;
+    font-size: px2rem(28);
+    font-weight: 500;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto 0;
+    background: #E4F6F1;
+    padding: 0 px2rem(52);
+    box-sizing: border-box;
+
+    div {
+        text-align: center;
+        width: 33%;
+    }
+}
+.titleInfoAct{
+    padding: 0;
+}
+
+.userInfo {
+    width: px2rem(686);
+    margin: 0 auto px2rem(120);
+    display: none;
+
+    li {
+        width: 100%;
+        height: px2rem(120);
+        overflow: hidden;
+        box-sizing: border-box;
+        padding: 0 px2rem(46) 0 px2rem(24);
+
+        .tx {
+            width: px2rem(82);
+            height: px2rem(82);
+            position: relative;
+            margin-top: px2rem(18);
+            float: left;
+            margin-right: px2rem(8);
+
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+                border-radius: 50%;
+            }
+
+            span {
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(58);
+                min-width: px2rem(46);
+                height: px2rem(28);
+                line-height: px2rem(28);
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(20);
+                font-weight: 500;
+                background: #04D5C6;
+                border-radius: px2rem(28);
+            }
+        }
+
+        .user {
+            float: left;
+            width: px2rem(140);
+            height: px2rem(82);
+            margin-top: px2rem(18);
+            margin-right: px2rem(18);
+
+            p {
+                color: #313131;
+                font-size: px2rem(28);
+                font-weight: 600;
+                margin-top: px2rem(9);
+                margin-bottom: px2rem(15);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+            }
+
+            b {
+                color: #7B7B7D;
+                font-size: px2rem(26);
+                font-weight: 400;
+            }
+        }
+
+        .incomes {
+            width: px2rem(182);
+            height: 100%;
+            text-align: center;
+            color: #313131;
+            font-size: px2rem(26);
+            font-weight: 400;
+            margin-top: px2rem(50);
+            float: left;
+        }
+
+        .duration {
+            width: px2rem(130);
+            text-align: center;
+            height: 100%;
+            color: #313131;
+            font-size: px2rem(26);
+            font-weight: 400;
+            margin-top: px2rem(50);
+            float: right;
+        }
+    }
+
+    .act {
+        background: #F2F3F7;
+    }
+}
+
+.dayDate {
+    width: px2rem(686);
+    height: px2rem(76);
+    line-height: px2rem(76);
+    margin: 0 auto 0;
+    // display: none;
+
+    li {
+        color: #313131;
+        font-size: px2rem(28);
+        font-weight: 500;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 px2rem(52);
+        box-sizing: border-box;
+
+        div {
+            text-align: center;
+            width: 33%;
+        }
+    }
+
+    .act {
+        background: #F2F3F7;
+    }
+}
+
+.cycle {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, .5);
+    display: none;
+
+    .cycle_in {
+        width: 100%;
+        height: px2rem(526);
+        left: 0;
+        bottom: 0;
+        border-radius: px2rem(32) px2rem(32) 0 0;
+        background: #fff;
+        position: absolute;
+
+        ul {
+            width: 100%;
+            text-align: center;
+            margin-top: px2rem(40);
+            height: 5.5rem;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            li {
+                height: px2rem(60);
+                line-height: px2rem(60);
+                color: #7B7B7D;
+                font-weight: 400;
+                font-size: px2rem(28);
+            }
+
+            .act {
+                background: #F4F4F4;
+                color: #313131;
+            }
+        }
+    }
+}
+
+.arabic {
+    .userInfo li {
+        .tx {
+            float: right;
+            margin-right: 0;
+            margin-left: 0.10667rem;
+        }
+
+        .user {
+            float: right;
+            margin-right: 0;
+            margin-left: 0.24rem;
+        }
+
+        .incomes {
+            float: right;
+        }
+
+        .duration {
+            float: left;
+        }
+    }
+}

view/molistar/modules/guildAr/css/index.css

@@ -1,8 +1,7 @@
 html,
 body {
   width: 100%;
-  height: 17.78667rem;
-  background: #e4e4e7;
+  background: #fff;
 }
 
 .back {
@@ -11,7 +10,7 @@ body {
   line-height: 0.58667rem;
   position: fixed;
   left: 0;
-  top: 0.93333rem;
+  top: 1.46667rem;
   text-align: center;
   color: #FFFFFF;
   font-size: 0.50667rem;
@@ -37,21 +36,21 @@ body {
 
 .header {
   width: 10rem;
-  height: 8.98667rem;
+  height: 5.86667rem;
   background: url(../images/header.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: cover;
   position: relative;
   margin: 0 auto 0rem;
 }
 
 .header .tx {
-  width: 2.64rem;
-  height: 2.53333rem;
+  width: 2.05333rem;
+  height: 2.05333rem;
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 1.85333rem;
+  left: 0.45333rem;
+  top: 2.88rem;
   border-radius: 50%;
+  border: 0.02667rem solid #FFE8A9;
 }
 
 .header .ts {
@@ -62,36 +61,33 @@ body {
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
+  display: none;
 }
 
 .header .nick {
-  width: 80%;
+  width: 55%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-align: center;
   color: #fff;
   font-size: 0.53333rem;
   font-weight: bold;
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 4.85333rem;
+  top: 3.22667rem;
+  left: 2.93333rem;
 }
 
 .header .id {
-  width: 80%;
+  width: 55%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-align: center;
   color: #fff;
   font-size: 0.34667rem;
   font-weight: 500;
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 5.64rem;
+  top: 4.10667rem;
+  left: 2.93333rem;
 }
 
 .header .guildNick {
@@ -106,50 +102,197 @@ body {
   display: none;
 }
 
-.header .headerBox {
-  width: 8.86667rem;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  position: absolute;
-  top: 6.37333rem;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.header .headerBox div {
-  width: 3.62667rem;
-  height: 0.74667rem;
-  line-height: 0.74667rem;
-  color: #fff;
-  font-size: 0.34667rem;
+.header .inveMember {
+  min-width: 1.57333rem;
+  height: 0.72rem;
+  border-radius: 0.72rem;
+  line-height: 0.72rem;
   text-align: center;
-  background: linear-gradient(90deg, rgba(128, 146, 255, 0.8) 0%, rgba(108, 208, 255, 0.8) 100%);
-  border-radius: 0.18667rem;
-  margin-bottom: 0.33333rem;
+  background: linear-gradient(90deg, #7CDD9B, #62D0A8);
+  color: #fff;
+  font-size: 0.37333rem;
+  position: absolute;
+  top: 3.54667rem;
+  right: 0.42667rem;
+  z-index: 5;
+  padding: 0 0.13333rem;
+}
+
+.header .inveMember img {
+  display: inline-block;
+  width: 0.50667rem;
+  height: 0.56rem;
+  vertical-align: middle;
+  margin-top: -0.1rem;
+  display: none;
+}
+
+.header .inveMember span {
+  display: block;
+}
+
+.headerBox {
+  width: 10rem;
+  border-radius: 0.26667rem;
+  margin: -0.4rem auto 0rem;
+  position: relative;
+  background: #fff;
   overflow: hidden;
-  white-space: nowrap;
-  margin: 0 auto 0.33333rem;
 }
 
-.header .headerBox div img {
-  width: 0.42667rem;
-  height: 0.42667rem;
-  margin-right: 0.17333rem;
-  float: left;
-  margin-top: 0.16rem;
-  margin-left: 0.38667rem;
+.headerBox .headerBox_in {
+  width: 9.14667rem;
+  max-height: 3.06667rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0.32rem auto 0;
 }
 
-.header .headerBox div span {
+.headerBox .headerBox_in div {
+  width: 4.45333rem;
+  height: 1.38667rem;
+  line-height: 1.38667rem;
+  margin-bottom: 0.24rem;
+  background: #F2F3F7;
+  border-radius: 0.32rem;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 0 0.13333rem;
+}
+
+.headerBox .headerBox_in div img {
+  display: inline-block;
+  width: 0.69333rem;
+  height: 0.69333rem;
+  vertical-align: middle;
+}
+
+.headerBox .headerBox_in div span {
+  display: inline-block;
+  color: #313131;
+  font-size: 0.4rem;
+  vertical-align: middle;
+}
+
+.headerBox .headerBox_in .incomeStatistics {
+  background: #E3F2FF;
+}
+
+.headerBox .headerBox_in .E3F2FF {
+  background: #E3F2FF;
+}
+
+.headerBox .headerBox_in .FFEFE5 {
+  background: #FFEFE5;
+}
+
+.agencylevel {
+  width: 10rem;
+  height: 3.62667rem;
+  margin: 0.34667rem auto 0;
+  display: none;
+}
+
+.agencylevel .top {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 0.33333rem;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  margin-top: 0.41333rem;
+  position: relative;
+}
+
+.agencylevel .top span {
   float: left;
+  width: 0.10667rem;
+  height: 0.45333rem;
+  background: #04D5C6;
+  border-radius: 9.22667rem;
+  margin: 0.10667rem 0.13333rem 0;
+  display: block;
+}
+
+.agencylevel .top b {
+  float: left;
+  font-size: 0.48rem;
+  color: #313131;
+  font-weight: bold;
+  display: block;
+  margin-right: 0.09333rem;
+}
+
+.agencylevel .top i {
+  display: block;
+  font-size: 0.48rem;
+  color: #313131;
+  float: left;
+  font-style: normal;
+}
+
+.agencylevel .agencylevelInfo {
+  width: 9.14667rem;
+  height: 2.69333rem;
+  background: #EBFFF6;
+  border-radius: 0.21333rem;
+  margin: 0.26667rem auto 0;
+  box-sizing: border-box;
+  padding: 0.24rem;
+}
+
+.agencylevel .agencylevelInfo h3 {
+  width: 100%;
+  display: block;
+  color: #313131;
+  font-size: 0.34667rem;
+  margin-bottom: 0.26667rem;
+  font-weight: 600;
+}
+
+.agencylevel .agencylevelInfo h3 b {
+  color: #313131;
+  font-size: 0.34667rem;
+}
+
+.agencylevel .agencylevelInfo h4 {
+  color: #7B7B7D;
+  font-weight: 400;
+  margin-bottom: 0.26667rem;
+}
+
+.agencylevel .agencylevelInfo .line {
+  width: 8.66667rem;
+  height: 0.13333rem;
+  position: relative;
+  background: #B2E8D0;
+  border-radius: 0.13333rem;
+  overflow: hidden;
+  margin-bottom: 0.26667rem;
+}
+
+.agencylevel .agencylevelInfo .line .line_in {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 10%;
+  background: #04D5C6;
+  height: 100%;
+}
+
+.agencylevel .agencylevelInfo .bottom {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: #7B7B7D;
+  font-size: 0.32rem;
+  font-weight: 400;
 }
 
 .guildList {
-  width: 9.25333rem;
-  height: 11rem;
+  width: 10rem;
   border-radius: 0.26667rem;
-  margin: -0.3rem auto 0rem;
+  margin: 0rem auto 0;
   position: relative;
   background: #fff;
   overflow: hidden;
@@ -159,16 +302,26 @@ body {
   width: 100%;
   box-sizing: border-box;
   padding: 0 0.33333rem;
-  height: 0.4rem;
-  line-height: 0.4rem;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
   margin-top: 0.41333rem;
   position: relative;
 }
 
+.guildList .top span {
+  float: left;
+  width: 0.10667rem;
+  height: 0.45333rem;
+  background: #04D5C6;
+  border-radius: 9.22667rem;
+  margin: 0.10667rem 0.13333rem 0;
+  display: block;
+}
+
 .guildList .top b {
   float: left;
-  font-size: 0.32rem;
-  color: #333;
+  font-size: 0.48rem;
+  color: #313131;
   font-weight: bold;
   display: block;
   margin-right: 0.09333rem;
@@ -176,8 +329,8 @@ body {
 
 .guildList .top i {
   display: block;
-  color: #666;
-  font-size: 0.29333rem;
+  font-size: 0.48rem;
+  color: #313131;
   float: left;
   font-style: normal;
 }
@@ -188,7 +341,7 @@ body {
   width: 0.42667rem;
   height: 0.42667rem;
   position: absolute;
-  left: 3.68rem;
+  left: 6.45rem;
   top: 51%;
   transform: translateY(-50%);
   z-index: 2;
@@ -199,17 +352,14 @@ body {
   border: none;
   outline: none;
   background: #F5F7F9;
-  width: 5.4rem;
+  width: 3.46667rem;
   height: 0.66667rem;
   border-radius: 0.66667rem;
   box-sizing: border-box;
   padding-left: 0.72rem;
-  position: absolute;
-  left: 3.49333rem;
-  top: 50%;
-  transform: translateY(-50%);
   color: #333;
   display: none;
+  float: right;
 }
 
 .guildList .top input::placeholder {
@@ -219,8 +369,8 @@ body {
 
 .guildList ul {
   width: 100%;
-  height: 11rem;
-  margin: 0.52rem auto 0;
+  height: 10.7rem;
+  margin: 0.25333rem auto 0;
   overflow-y: scroll;
 }
 
@@ -229,24 +379,27 @@ body {
 }
 
 .guildList ul li {
-  width: 100%;
-  height: 1.33333rem;
+  width: 9.14667rem;
+  height: 1.94667rem;
   box-sizing: border-box;
   overflow: hidden;
-  margin-bottom: 0.44rem;
+  margin: 0 auto 0.44rem;
   position: relative;
   box-sizing: border-box;
   padding-left: 0.13333rem;
+  background: #F2F3F7;
+  border-radius: 0.32rem;
 }
 
 .guildList ul li .tx {
-  width: 1.06667rem;
-  height: 1.06667rem;
-  border-radius: 1.06667rem;
+  width: 1.46667rem;
+  height: 1.46667rem;
+  border-radius: 50%;
   float: left;
   margin-right: 0.14667rem;
   margin-left: 0.13333rem;
   display: block;
+  margin-top: 0.24rem;
 }
 
 .guildList ul li .user {
@@ -260,13 +413,13 @@ body {
   font-weight: bold;
   display: inline-block;
   margin-right: 0.10667rem;
-  margin-bottom: 0.18667rem;
-  width: 2.7rem;
+  margin-bottom: 0.06667rem;
+  max-width: 2.7rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   box-sizing: border-box;
-  padding-top: 0.10667rem;
+  padding-top: 0.6rem;
 }
 
 .guildList ul li .user b {
@@ -279,7 +432,7 @@ body {
   width: 0.24rem;
   height: 0.24rem;
   display: inline-block;
-  margin-top: 0.16rem;
+  margin-top: 0.6rem;
   margin-right: 0.10667rem;
 }
 
@@ -288,16 +441,17 @@ body {
   display: inline-block;
   width: 0.96rem;
   height: 0.48rem;
+  margin-top: 0.49333rem;
 }
 
 .guildList ul li .but {
   width: 1.17333rem;
   height: 0.56rem;
-  background: #62D0A8;
+  background: #CDCED6;
   border-radius: 0.56rem;
   position: absolute;
   right: 0.34667rem;
-  top: 0.09333rem;
+  top: 0.69rem;
   text-align: center;
   color: #fff;
   line-height: 0.56rem;
@@ -306,33 +460,33 @@ body {
 }
 
 .guildList ul li .chairman {
-  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;
+  color: #fff;
   font-size: 0.29333rem;
   font-weight: 400;
   position: absolute;
-  left: 0.26667rem;
-  top: 0.94667rem;
-  background: linear-gradient(90deg, #FFEB67, #FFFCE7);
+  left: 0.37333rem;
+  top: 1.30667rem;
+  background: #04D5C6;
   display: none;
 }
 
 .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;
+  color: #fff;
   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;
 }
@@ -394,33 +548,25 @@ body {
   color: #fff;
 }
 
-.inveMember {
-  width: 4.08rem;
-  height: 1.28rem;
-  border-radius: 1.28rem;
-  line-height: 1.22667rem;
-  text-align: center;
-  background: linear-gradient(90deg, #7CDD9B, #62D0A8);
-  color: #fff;
-  font-size: 0.45333rem;
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 5;
-  bottom: 1.06667rem;
+.arabic .back img {
+  left: auto;
+  right: 0.24rem;
+  transform: rotate(180deg);
 }
 
-.inveMember img {
-  display: inline-block;
-  width: 0.50667rem;
-  height: 0.56rem;
-  vertical-align: middle;
-  margin-top: -0.1rem;
+.arabic .header .tx {
+  left: auto;
+  right: 0.45333rem;
 }
 
-.inveMember span {
-  display: inline-block;
-  vertical-align: middle;
+.arabic .header .nick {
+  left: auto;
+  right: 2.93333rem;
+}
+
+.arabic .header .id {
+  left: auto;
+  right: 2.93333rem;
 }
 
 .arabic .guildList .top img {
@@ -438,7 +584,7 @@ body {
 
 .arabic .guildList ul li .chairman,
 .arabic .guildList ul li .administrator {
-  right: 0.1rem;
+  right: 0.37333rem;
   left: auto;
 }
 
@@ -459,6 +605,10 @@ body {
   float: right;
 }
 
+.arabic .headerBox .headerBox_in div span {
+  font-size: 0.33333rem;
+}
+
 .english .header .headerBox {
   width: 8rem;
 }
@@ -471,6 +621,15 @@ body {
   font-size: 0.21333rem;
 }
 
+.arabic .header .inveMember {
+  right: auto;
+  left: 0.42667rem;
+}
+
+.arabic .headerBox .headerBox_in div {
+  text-align: right;
+}
+
 .arabic .header .headerBox {
   width: 8rem;
 }
@@ -482,3 +641,32 @@ body {
 .arabic .header .headerBox div span {
   font-size: 0.29333rem;
 }
+
+.arabic .guildList .top b {
+  float: right;
+}
+
+.arabic .guildList .top i {
+  float: right;
+}
+
+.arabic .guildList .top input {
+  float: left;
+}
+
+.arabic .guildList .top img {
+  right: 6.3rem;
+  left: auto;
+  transform: rotate(100deg);
+  top: 0.1rem;
+}
+
+.arabic .guildList .top span {
+  float: right;
+  display: block;
+}
+
+.arabic .agencylevel .agencylevelInfo .line .line_in {
+  left: auto;
+  right: 0;
+}

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

@@ -5,8 +5,8 @@
 html,
 body {
     width: 100%;
-    height: px2rem(1334);
-    background: #e4e4e7;
+    // height: px2rem(1334);
+    background: #fff;
 }
 
 .back {
@@ -15,7 +15,7 @@ body {
     line-height: px2rem(44);
     position: fixed;
     left: 0;
-    top: px2rem(70);
+    top: px2rem(110);
     text-align: center;
     color: #FFFFFF;
     font-size: px2rem(38);
@@ -42,20 +42,20 @@ body {
 
 .header {
     width: px2rem(750);
-    height: px2rem(674);
+    height: px2rem(440);
     background: url(../images/header.png) no-repeat;
-    background-size: 100% 100%;
+    background-size: cover;
     position: relative;
     margin: 0 auto px2rem(0);
 
     .tx {
-        width: px2rem(198);
-        height: px2rem(190);
+        width: px2rem(154);
+        height: px2rem(154);
         position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        top: px2rem(139);
+        left: px2rem(34);
+        top: px2rem(216);
         border-radius: 50%;
+        border: px2rem(2) solid #FFE8A9;
     }
 
     .ts {
@@ -66,117 +66,35 @@ body {
         left: 50%;
         transform: translateX(-50%);
         z-index: 2;
+        display: none;
     }
 
     .nick {
-        width: 80%;
+        width: 55%;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        text-align: center;
         color: #fff;
         font-size: px2rem(40);
         font-weight: bold;
         position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        top: px2rem(364);
+        top: px2rem(242);
+        left: px2rem(220);
     }
 
     .id {
-        width: 80%;
+        width: 55%;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        text-align: center;
         color: #fff;
         font-size: px2rem(26);
         font-weight: 500;
         position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        top: px2rem(423);
+        top: px2rem(308);
+        left: px2rem(220);
     }
 
-    // .adminSet {
-    //     padding: px2rem(0) px2rem(16);
-    //     box-sizing: border-box;
-    //     height: px2rem(44);
-    //     line-height: px2rem(44);
-    //     color: #fff;
-    //     font-size: px2rem(32);
-    //     font-weight: 400;
-    //     background: linear-gradient(90deg, rgba(82, 59, 85, 0.98), rgba(21, 5, 16, 0.98));
-    //     border-radius: px2rem(44) 0px 0px px2rem(44);
-    //     position: absolute;
-    //     right: 0;
-    //     top: px2rem(184);
-    //     display: none;
-    // }
-
-    // .guildInfoSet {
-    //     padding: px2rem(0) px2rem(16);
-    //     box-sizing: border-box;
-    //     height: px2rem(44);
-    //     line-height: px2rem(44);
-    //     color: #fff;
-    //     font-size: px2rem(32);
-    //     font-weight: 400;
-    //     background: linear-gradient(90deg, rgba(82, 59, 85, 0.7), rgba(21, 5, 16, 0.7));
-    //     border-radius: px2rem(44) 0px 0px px2rem(44);
-    //     position: absolute;
-    //     right: 0;
-    //     top: px2rem(239);
-    //     display: none;
-    // }
-
-    // .memberFlow {
-    //     width: px2rem(208);
-    //     height: px2rem(56);
-    //     line-height: px2rem(56);
-    //     text-align: center;
-    //     color: #fff;
-    //     font-size: px2rem(32);
-    //     font-weight: 400;
-    //     background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%);
-    //     border-radius: px2rem(14);
-    //     position: absolute;
-    //     left: px2rem(156);
-    //     top: px2rem(466);
-    //     display: none;
-    // }
-
-    // .memberFlowMy {
-    //     width: px2rem(208);
-    //     height: px2rem(56);
-    //     line-height: px2rem(56);
-    //     text-align: center;
-    //     color: #fff;
-    //     font-size: px2rem(32);
-    //     font-weight: 400;
-    //     background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%);
-    //     border-radius: px2rem(14) 0 0 px2rem(14);
-    //     position: absolute;
-    //     right: px2rem(0);
-    //     top: px2rem(218);
-    //     display: none;
-    // }
-
-    // .inveMember {
-    //     width: px2rem(208);
-    //     height: px2rem(56);
-    //     line-height: px2rem(56);
-    //     text-align: center;
-    //     color: #fff;
-    //     font-size: px2rem(32);
-    //     font-weight: 400;
-    //     background: linear-gradient(90deg, rgba(128, 146, 255, .6) 0%, rgba(108, 208, 255, .6) 100%);
-    //     border-radius: px2rem(14);
-    //     position: absolute;
-    //     right: px2rem(156);
-    //     top: px2rem(466);
-    //     display: none;
-    // }
 
     .guildNick {
         width: 100%;
@@ -190,52 +108,200 @@ body {
         display: none;
     }
 
-    .headerBox {
-        width: px2rem(665);
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
+    .inveMember {
+        min-width: px2rem(118);
+        height: px2rem(54);
+        border-radius: px2rem(54);
+        line-height: px2rem(54) ;
+        text-align: center;
+        background: linear-gradient(90deg, #7CDD9B, #62D0A8);
+        color: #fff;
+        font-size: px2rem(28);
         position: absolute;
-        top: px2rem(478);
-        // left: px2rem(93);
-        left: 50%;
-        transform: translateX(-50%);
+        top: px2rem(266);
+        right: px2rem(32);
+        z-index: 5;
+        padding: 0 px2rem(10);
+
+        img {
+            display: inline-block;
+            width: px2rem(38);
+            height: px2rem(42);
+            vertical-align: middle;
+            margin-top: -0.1rem;
+            display: none;
+        }
+
+        span {
+            display: block;
+        }
+    }
+}
+
+.headerBox {
+    width: px2rem(750);
+    border-radius: px2rem(20);
+    margin: px2rem(-30) auto px2rem(0);
+    position: relative;
+    background: #fff;
+    overflow: hidden;
+
+    .headerBox_in {
+        width: px2rem(686);
+        max-height: px2rem(230);
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin: px2rem(24) auto 0;
 
         div {
-            width: px2rem(272);
-            height: px2rem(56);
-            line-height: px2rem(56);
-            color: #fff;
-            font-size: px2rem(26);
-            text-align: center;
-            background: linear-gradient(90deg, rgba(128, 146, 255, .8) 0%, rgba(108, 208, 255, .8) 100%);
-            border-radius: px2rem(14);
-            margin-bottom: px2rem(25);
-            overflow: hidden;
-            white-space: nowrap;
-            margin: 0 auto px2rem(25);
+            width: px2rem(334);
+            height: px2rem(104);
+            line-height: px2rem(104);
+            margin-bottom: px2rem(18);
+            background: #F2F3F7;
+            border-radius: px2rem(24);
+            text-align: left;
+            box-sizing: border-box;
+            padding: 0 px2rem(10);
 
             img {
-                width: px2rem(32);
-                height: px2rem(32);
-                margin-right: px2rem(13);
-                float: left;
-                margin-top: px2rem(12);
-                margin-left: px2rem(29);
+                display: inline-block;
+                width: px2rem(52);
+                height: px2rem(52);
+                // margin-top: px2rem(30);
+                vertical-align: middle;
             }
 
             span {
-                float: left;
+                display: inline-block;
+                color: #313131;
+                font-size: px2rem(30);
+                vertical-align: middle;
             }
         }
+        .incomeStatistics{
+            background: #E3F2FF;
+        }
+
+        .E3F2FF {
+            background: #E3F2FF;
+        }
+
+        .FFEFE5 {
+            background: #FFEFE5;
+        }
+    }
+}
+
+.agencylevel {
+    width: px2rem(750);
+    height: px2rem(272);
+    margin: px2rem(26) auto 0;
+    display: none;
+
+    .top {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(25);
+        height: px2rem(50);
+        line-height: px2rem(50);
+        margin-top: px2rem(31);
+        position: relative;
+
+        span {
+            float: left;
+            width: px2rem(8);
+            height: px2rem(34);
+            background: #04D5C6;
+            border-radius: px2rem(692);
+            margin: px2rem(8) px2rem(10) 0;
+            display: block;
+        }
+
+        b {
+            float: left;
+            font-size: px2rem(36);
+            color: #313131;
+            font-weight: bold;
+            display: block;
+            margin-right: px2rem(7);
+        }
+
+        i {
+            display: block;
+            font-size: px2rem(36);
+            color: #313131;
+            float: left;
+            font-style: normal;
+        }
+    }
+
+    .agencylevelInfo {
+        width: px2rem(686);
+        height: px2rem(202);
+        background: #EBFFF6;
+        border-radius: px2rem(16);
+        margin: px2rem(20) auto 0;
+        box-sizing: border-box;
+        padding: px2rem(18);
+
+        h3 {
+            width: 100%;
+            display: block;
+            color: #313131;
+            font-size: px2rem(26);
+            margin-bottom: px2rem(20);
+            font-weight: 600;
+
+            b {
+                color: #313131;
+                font-size: px2rem(26);
+            }
+        }
+
+        h4 {
+            color: #7B7B7D;
+            font-weight: 400;
+            margin-bottom: px2rem(20);
+        }
+
+        .line {
+            width: px2rem(650);
+            height: px2rem(10);
+            position: relative;
+            background: #B2E8D0;
+            border-radius: px2rem(10);
+            overflow: hidden;
+            margin-bottom: px2rem(20);
+
+            .line_in {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 10%;
+                background: #04D5C6;
+                height: 100%;
+            }
+        }
+
+        .bottom {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            color: #7B7B7D;
+            font-size: px2rem(24);
+            font-weight: 400;
+        }
     }
 }
 
 .guildList {
-    width: px2rem(694);
-    height: 11rem;
+    width: px2rem(750);
+    // height: 11rem;
+    // height: 6.7rem;
     border-radius: px2rem(20);
-    margin: -0.3rem auto px2rem(0);
+    margin: px2rem(0) auto 0;
     position: relative;
     background: #fff;
     overflow: hidden;
@@ -244,16 +310,26 @@ body {
         width: 100%;
         box-sizing: border-box;
         padding: 0 px2rem(25);
-        height: px2rem(30);
-        line-height: px2rem(30);
+        height: px2rem(50);
+        line-height: px2rem(50);
         margin-top: px2rem(31);
         position: relative;
+
         // margin-left: px2rem(-13);
+        span {
+            float: left;
+            width: px2rem(8);
+            height: px2rem(34);
+            background: #04D5C6;
+            border-radius: px2rem(692);
+            margin: px2rem(8) px2rem(10) 0;
+            display: block;
+        }
 
         b {
             float: left;
-            font-size: px2rem(24);
-            color: #333;
+            font-size: px2rem(36);
+            color: #313131;
             font-weight: bold;
             display: block;
             margin-right: px2rem(7);
@@ -261,8 +337,8 @@ body {
 
         i {
             display: block;
-            color: #666;
-            font-size: px2rem(22);
+            font-size: px2rem(36);
+            color: #313131;
             float: left;
             font-style: normal;
         }
@@ -273,7 +349,7 @@ body {
             width: px2rem(32);
             height: px2rem(32);
             position: absolute;
-            left: 3.68rem;
+            left: 6.45rem;
             top: 51%;
             transform: translateY(-50%);
             z-index: 2;
@@ -284,17 +360,18 @@ body {
             border: none;
             outline: none;
             background: #F5F7F9;
-            width: 5.4rem;
+            width: px2rem(260);
             height: px2rem(50);
             border-radius: px2rem(50);
             box-sizing: border-box;
             padding-left: px2rem(54);
-            position: absolute;
-            left: 3.49333rem;
-            top: 50%;
-            transform: translateY(-50%);
+            // position: absolute;
+            // left: 3.7rem;
+            // top: 50%;
+            // transform: translateY(-50%);
             color: #333;
             display: none;
+            float: right;
 
             &::placeholder {
                 color: #BCBDCB;
@@ -305,8 +382,9 @@ body {
 
     ul {
         width: 100%;
-        height: 11rem;
-        margin: px2rem(39) auto 0;
+        height: 10.7rem;
+        // height: 6.7rem;
+        margin: px2rem(19) auto 0;
         overflow-y: scroll;
 
         &::-webkit-scrollbar {
@@ -314,23 +392,26 @@ body {
         }
 
         li {
-            width: 100%;
-            height: px2rem(100);
+            width: px2rem(686);
+            height: px2rem(146);
             box-sizing: border-box;
             overflow: hidden;
-            margin-bottom: px2rem(33);
+            margin: 0 auto px2rem(33);
             position: relative;
             box-sizing: border-box;
             padding-left: px2rem(10);
+            background: #F2F3F7;
+            border-radius: px2rem(24);
 
             .tx {
-                width: px2rem(80);
-                height: px2rem(80);
-                border-radius: px2rem(80);
+                width: px2rem(110);
+                height: px2rem(110);
+                border-radius: 50%;
                 float: left;
                 margin-right: px2rem(11);
                 margin-left: px2rem(10);
                 display: block;
+                margin-top: px2rem(18)
             }
 
             .user {
@@ -343,13 +424,13 @@ body {
                     font-weight: bold;
                     display: inline-block;
                     margin-right: px2rem(8);
-                    margin-bottom: px2rem(14);
-                    width: 2.7rem;
+                    margin-bottom: px2rem(5);
+                    max-width: 2.7rem;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     box-sizing: border-box;
-                    padding-top: px2rem(8);
+                    padding-top: px2rem(45);
                 }
 
                 b {
@@ -362,7 +443,7 @@ body {
                     width: px2rem(18);
                     height: px2rem(18);
                     display: inline-block;
-                    margin-top: px2rem(12);
+                    margin-top: px2rem(45);
                     margin-right: px2rem(8);
                 }
 
@@ -371,17 +452,18 @@ body {
                     display: inline-block;
                     width: px2rem(72);
                     height: px2rem(36);
+                    margin-top: px2rem(37);
                 }
             }
 
             .but {
                 width: px2rem(88);
                 height: px2rem(42);
-                background: #62D0A8;
+                background: #CDCED6;
                 border-radius: px2rem(42);
                 position: absolute;
                 right: px2rem(26);
-                top: px2rem(7);
+                top: 0.69rem;
                 text-align: center;
                 color: #fff;
                 line-height: px2rem(42);
@@ -390,33 +472,33 @@ body {
             }
 
             .chairman {
-                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;
+                color: #fff;
                 font-size: px2rem(22);
                 font-weight: 400;
                 position: absolute;
-                left: px2rem(20);
-                top: px2rem(71);
-                background: linear-gradient(90deg, #FFEB67, #FFFCE7);
+                left: px2rem(28);
+                top: px2rem(98);
+                background: #04D5C6;
                 display: none;
             }
 
             .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;
+                color: #fff;
                 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;
             }
@@ -481,36 +563,29 @@ body {
     }
 }
 
-.inveMember {
-    width: px2rem(306);
-    height: px2rem(96);
-    border-radius: px2rem(96);
-    line-height: px2rem(92);
-    text-align: center;
-    background: linear-gradient(90deg, #7CDD9B, #62D0A8);
-    color: #fff;
-    font-size: px2rem(34);
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 5;
-    bottom: px2rem(80);
-
-    img {
-        display: inline-block;
-        width: px2rem(38);
-        height: px2rem(42);
-        vertical-align: middle;
-        margin-top: -0.1rem;
-    }
-
-    span {
-        display: inline-block;
-        vertical-align: middle;
-    }
-}
 
 .arabic {
+    .back img {
+        left: auto;
+        right: 0.24rem;
+        transform: rotate(180deg);
+    }
+
+    .header .tx {
+        left: auto;
+        right: 0.45333rem;
+    }
+
+    .header .nick {
+        left: auto;
+        right: 2.93333rem;
+    }
+
+    .header .id {
+        left: auto;
+        right: 2.93333rem;
+    }
+
     .guildList .top img {
         right: px2rem(30);
     }
@@ -526,7 +601,7 @@ body {
 
     .guildList ul li .chairman,
     .guildList ul li .administrator {
-        right: 0.1rem;
+        right: px2rem(28);
         left: auto;
     }
 
@@ -547,6 +622,10 @@ body {
         float: right;
     }
 
+    .headerBox .headerBox_in div span {
+        font-size: px2rem(25);
+    }
+
 }
 
 .english {
@@ -561,9 +640,22 @@ body {
             }
         }
     }
+
+    .headerBox .headerBox_in .guildInfoSet span,
+    .headerBox .headerBox_in .adminSet span {
+        // font-size: px2rem(20);
+    }
 }
 
 .arabic {
+    .header .inveMember {
+        right: auto;
+        left: px2rem(32);
+    }
+    .headerBox .headerBox_in div{
+        text-align: right;
+    }
+
     .header .headerBox {
         width: 8rem;
 
@@ -575,4 +667,33 @@ body {
             }
         }
     }
+
+    .guildList .top b {
+        float: right;
+    }
+
+    .guildList .top i {
+        float: right;
+    }
+
+    .guildList .top input {
+        float: left;
+    }
+
+    .guildList .top img {
+        right: 6.3rem;
+        left: auto;
+        transform: rotate(100deg);
+        top: 0.1rem;
+    }
+
+    .guildList .top span {
+        float: right;
+        display: block;
+    }
+
+    .agencylevel .agencylevelInfo .line .line_in {
+        left: auto;
+        right: 0;
+    }
 }