修改bug-爱的告白

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

@@ -12,7 +12,7 @@
 
 .max {
   width: 10rem;
-  height: 30.84rem;
+  height: 34.02667rem;
   background: url("../images/max.png?v=1.0") no-repeat;
   background-size: 100% 100%;
   font-family: 'pingfang-bold';
@@ -21,10 +21,10 @@
 .max .record {
   position: absolute;
   position: absolute;
-  top: 5.9rem;
+  top: 6.61333rem;
   right: 0;
-  width: 1.5rem;
-  height: 1.4rem;
+  width: 1.64rem;
+  height: 0.57333rem;
 }
 
 .max .record img {
@@ -34,23 +34,23 @@
 
 .max .btn {
   position: absolute;
-  top: 15.8rem;
-  left: 1.68rem;
-  width: 2.53333rem;
-  height: 1.01333rem;
+  top: 16.1rem;
+  left: 1.61rem;
+  width: 2.94667rem;
+  height: 1.46667rem;
 }
 
 .max .btn.basics-receive {
-  left: 5.6rem;
+  left: 5rem;
 }
 
 .max .btn.advance-send {
-  top: 22.34667rem;
+  top: 23.34667rem;
 }
 
 .max .btn.advance-receive {
-  top: 22.34667rem;
-  left: 5.6rem;
+  top: 23.34667rem;
+  left: 5rem;
 }
 
 .max .btn img {
@@ -257,8 +257,8 @@
 .max .shade-mask-new .shade-content .apply-btn,
 .max .shade-mask-new .shade-content-delay .apply-btn,
 .max .shade-mask-new .shade-content-new .apply-btn {
-  width: 4.90667rem;
-  height: 1.2rem;
+  width: 6.37333rem;
+  height: 0.82667rem;
   background: url("../images/apply-new.png") no-repeat 0 0/100% 100%;
   margin: 0.64rem auto 0;
 }
@@ -367,9 +367,9 @@
 }
 
 .max .shade-mask-delay .shade-content-delay .apply-btn {
-  width: 4.90667rem;
-  height: 1.2rem;
-  background: url("../images/confirm.png") no-repeat 0 0/100% 100%;
+  width: 6.37333rem;
+  height: 0.82667rem;
+  background: url("../images/apply-new.png") no-repeat 0 0/100% 100%;
   margin: 0.85333rem auto 0;
 }
 
@@ -484,9 +484,9 @@
 }
 
 .max .shade-mask-new .shade-content-new .apply-btn {
-  width: 4.90667rem;
-  height: 1.2rem;
-  background: url("../images/confirm.png") no-repeat 0 0/100% 100%;
+  width: 6.37333rem;
+  height: 0.82667rem;
+  background: url("../images/apply-new.png") no-repeat 0 0/100% 100%;
   margin: 0.61333rem auto 0;
 }
 
@@ -510,3 +510,7 @@
 ::-webkit-scrollbar {
   display: none;
 }
+
+.english .max {
+  height: 35.76rem;
+}

view/molistar/activity/act-nameplate/css/index.scss

@@ -21,7 +21,7 @@
 // @import '../../../common/css/flex.scss';
 .max {
   width: px2rem(750);
-  height: px2rem(2313);
+  height: px2rem(2552);
   background: url('../images/max.png?v=1.0') no-repeat;
   background-size: 100% 100%;
   font-family: 'pingfang-bold';
@@ -29,10 +29,10 @@
   .record {
     position: absolute;
     position: absolute;
-    top: 5.9rem;
+    top: px2rem(496);
     right: 0;
-    width: 1.5rem;
-    height: 1.4rem;
+    width: px2rem(123);
+    height: px2rem(43);
 
     img {
       width: 100%;
@@ -42,22 +42,22 @@
 
   .btn {
     position: absolute;
-    top: 15.8rem;
-    left: px2rem(126);
-    width: px2rem(190);
-    height: px2rem(76);
+    top: 16.1rem;
+    left: 1.61rem;
+    width: px2rem(221);
+    height: px2rem(110);
 
     &.basics-receive {
-      left: 5.6rem;
+      left: 5rem;
     }
 
     &.advance-send {
-      top: 22.34667rem;
+      top: 23.34667rem;
     }
 
     &.advance-receive {
-      top: 22.34667rem;
-      left: 5.6rem;
+      top: 23.34667rem;
+      left: 5rem;
     }
 
     img {
@@ -181,8 +181,8 @@
       }
 
       .apply-btn {
-        width: px2rem(368);
-        height: px2rem(90);
+        width: px2rem(478);
+        height: px2rem(62);
         background: url('../images/apply-new.png') no-repeat 0 0/100% 100%;
         margin: px2rem(48) auto 0;
       }
@@ -277,9 +277,9 @@
       }
 
       .apply-btn {
-        width: px2rem(368);
-        height: px2rem(90);
-        background: url('../images/confirm.png') no-repeat 0 0/100% 100%;
+        width: px2rem(478);
+        height: px2rem(62);
+        background: url('../images/apply-new.png') no-repeat 0 0/100% 100%;
         margin: px2rem(64) auto 0;
       }
     }
@@ -397,9 +397,9 @@
       }
 
       .apply-btn {
-        width: px2rem(368);
-        height: px2rem(90);
-        background: url('../images/confirm.png') no-repeat 0 0/100% 100%;
+        width: px2rem(478);
+        height: px2rem(62);
+        background: url('../images/apply-new.png') no-repeat 0 0/100% 100%;
         margin: px2rem(46) auto 0;
       }
     }
@@ -425,4 +425,10 @@
 
 ::-webkit-scrollbar {
   display: none;
+}
+
+.english{
+  .max{
+    height: px2rem(2682);
+  }
 }

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

@@ -17,7 +17,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="viewport"
     content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
-  <title>精美铭牌送不停</title>
+  <title class="title_t"></title>
+  <!-- 私人訂製 -->
 
   <link rel="stylesheet" href="../../common/css/reset.css">
   <link rel="stylesheet" href="./css/index.css?v=11">
@@ -28,7 +29,7 @@
 <body>
   <div class="max">
     <div class="record">
-      <!-- <img src="./images/record.png" alt=""> -->
+      <img src="./images/record.png" alt="">
     </div>
     
     <div class="btn basics-send"><img src="./images/disabled-btn.png" alt=""></div>
@@ -62,7 +63,7 @@
       <div class="shade-content-delay">
         <!-- <div class="top">延期期限</div> -->
         <div class="nameplate-style">
-          <span>铭牌样式：</span>
+          <span class="text1">铭牌样式：</span>
           <div>
             <p>
               <img alt="">
@@ -71,10 +72,10 @@
           </div>
         </div>
         <div class="delay-time">
-            <span>申请时长：</span>
+            <span class="text2">申请时长：</span>
             <div>
               <img src="./images/decrease.png" alt="" class="decrease">
-              <p><span></span>天</p>
+              <p><span></span><b class="text3">天</b></p>
               <img src="./images/increase.png" alt="" class="increase">
             </div>
         </div>
@@ -88,20 +89,20 @@
       <div class="shade-content-new">
         <!-- <div class="top">申请新铭牌</div> -->
         <div class="nameplate-style">
-          <span>铭牌样式：</span>
+          <span class="text1"></span>
           <ul class="apply-new-ul">
             
           </ul>
         </div>
         <div class="new-nameplate-desc-wrap">
-          <span>铭牌文字：</span>
-          <input type="text" class="new-nameplate-desc" placeholder="请输入4个字" maxlength="4">
+          <span class="text4"></span>
+          <input class="text5" type="text" class="new-nameplate-desc" placeholder="" maxlength="">
         </div>
         <div class="delay-time">
-            <span>申请时长：</span>
+            <span class="text2"></span>
             <div>
               <img src="./images/decrease.png" alt="" class="decrease">
-              <p><span></span>天</p>
+              <p><span></span><b class="text3"></b></p>
               <img src="./images/increase.png" alt="" class="increase">
             </div>
         </div>
@@ -114,7 +115,11 @@
   <script src="../../common/js/common2.js"></script>
   <script src="../../common/js/layer.js"></script>
   <script src="../../common/js/vconsole.min.js"></script>
+  <script src="./local/en.js"></script>
+  <script src="./local/zh.js"></script>
+  <script src="./local/ar.js"></script>
   <script src="./js/public.js?v=10"></script>
+  <script src="../../common/local/langHandler.js"></script>
 </body>
 
 </html>

view/molistar/activity/act-nameplate/js/public.js

@@ -4,31 +4,210 @@ var browser = checkVersion();
 var info = {};
 if (EnvCheck() === 'test') new VConsole
 // 封裝layer消息提醒框
-let layerIndex
-const showLoading = (content = '加載中...') => {
-    layer.open({
-        type: 2,
-        shadeClose: false,
-        content,
-        success(e) {
-            layerIndex = $(e).attr('index')
-        }
-    })
+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)
+  layer.close(index)
 }
-const toastMsg = (content = '操作完成', time = 2) => {
-    layer.open({
-        content,
-        time,
-        skin: 'msg'
-    })
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+  layer.open({
+    content,
+    time,
+    skin: 'msg'
+  })
 }
 
 let delayLock = false, newApplyLock = false
-
 let btnStatus = []
+var partitionId = null;
+$(function () {
+  getInfoFromClient()
+  fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+  setTimeout(() => {
+    langReplace = window.lang.replace;
+    localLang = window.lang;
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    translateFun();
+    getUserNameplateInfo()
+    userGet()
+  }, 50)
+  function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.max').attr('style', langReplace(localLang.demoModule.max))
+    $('.max .shade-mask-new .shade-content-new').attr('style', langReplace(localLang.demoModule.img4))
+    $('.max .shade-mask .shade-content, .max .shade-mask-delay .shade-content-delay').attr('style', langReplace(localLang.demoModule.img44))
+    $('.apply-btn').attr('style', langReplace(localLang.demoModule.img5))
+    $('.max .btn img').attr('src', langReplace(localLang.demoModule.img2))
+    $('.max .record img').attr('src', langReplace(localLang.demoModule.img6))
+    $('.title_t').html(langReplace(localLang.demoModule.title_t));
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+    $('.text2').html(langReplace(localLang.demoModule.text2));
+    $('.text3').html(langReplace(localLang.demoModule.text3));
+    $('.text4').html(langReplace(localLang.demoModule.text4));
+    $('.text5').attr('placeholder', langReplace(localLang.demoModule.text5));
+  }
+  if (browser.app) {
+    _hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
+  }
+
+  // 點擊申請記錄按鈕
+  $('.record').on('click', function () {
+    window.location.href = './record.html'
+  })
+
+  // 關閉彈窗
+  $('.shade-mask .close').on('click', () => {
+    $('.shade-mask').hide()
+    $('body').css('overflow', 'auto')
+  })
+  $('.shade-mask-delay .close').on('click', () => {
+    $('.shade-mask-delay').hide()
+    $('body').css('overflow', 'auto')
+  })
+  $('.shade-mask-new .close').on('click', () => {
+    $('.shade-mask-new').hide()
+    $('body').css('overflow', 'auto')
+    newNameplateId = ''
+    $(this).find('input').val('')
+  })
+
+  let maxApplyDay, nameplateId, type, text
+  // 監聽 延長期限 按鈕點擊事件
+  $('.select-ul').on('click', '.delay-btn', function () {
+    let li = $(this).parent();
+    let src = li.find('.nameplate img').attr('src');
+    let desc = li.find('.nameplate span').html();
+    maxApplyDay = li.data('applyDay');
+    nameplateId = li.data('nameplateId');
+    type = li.data('type');
+    text = li.data('text');
+
+    $('.shade-mask-delay .nameplate-style img').attr('src', src);
+    $('.shade-mask-delay .nameplate-style p span').html(desc);
+    $('.shade-mask-delay .delay-time p span').html(maxApplyDay);
+
+    $('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
+  })
+
+  // 延期彈窗 點擊減按鈕
+  $('.shade-mask-delay').on('click', '.decrease', function () {
+    let applyDay = parseInt($(this).parent().find('span').html());
+    if (applyDay > 7) {
+      applyDay -= 7;
+    } else {
+      toastMsg(langReplace(localLang.demoModule.text6))
+    }
+    $('.shade-mask-delay .delay-time p span').html(applyDay);
+  })
+  //延期彈窗 點擊加按鈕
+  $('.shade-mask-delay').on('click', '.increase', function () {
+    let applyDay = parseInt($(this).parent().find('span').html());
+    if (applyDay >= maxApplyDay) {
+      toastMsg(langReplace(localLang.demoModule.text7))
+    } else {
+      applyDay += 7;
+    }
+    $('.shade-mask-delay .delay-time p span').html(applyDay);
+  })
+  // 監聽申請延期確定按鈕點擊事件
+  $('.shade-mask-delay').on('click', '.apply-btn', function () {
+    // applyType 1申請新銘牌，2延長
+    if (!delayLock) {
+      delayLock = true
+      let params = {
+        type,
+        nameplateId,
+        applyDay: parseInt($(this).parent().find('.delay-time div p span').html()),
+        applyType: 2,
+        text
+      };
+      delayNamaplateConfirm(params)
+    }
+  })
+
+  /*************************           ******************************/
+
+  // 監聽 申請新銘牌 按鈕點擊事件
+  $('.shade-mask').on('click', '.apply-btn', function () {
+    let type = $(this).parent().find('.select-ul li').eq(0).data('type');
+    getNewNameplateList(type)
+  })
+
+  // 申請新銘牌彈窗 點擊減按鈕
+  $('.shade-mask-new').on('click', '.decrease', function () {
+    let applyDay = parseInt($(this).parent().find('span').html());
+    if (applyDay > 7) {
+      applyDay -= 7;
+    } else {
+      toastMsg(langReplace(localLang.demoModule.text6))
+    }
+    $('.shade-mask-new .delay-time p span').html(applyDay);
+  })
+  // 申請新銘牌彈窗 點擊加按鈕
+  $('.shade-mask-new').on('click', '.increase', function () {
+    let applyDay = parseInt($(this).parent().find('span').html());
+    let maxApplyDay = parseInt($(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay'));
+    if (applyDay >= maxApplyDay) {
+      toastMsg(langReplace(localLang.demoModule.text7))
+    } else {
+      applyDay += 7;
+    }
+    $('.shade-mask-new .delay-time p span').html(applyDay);
+  })
+
+  // 申請新銘牌彈窗 點擊銘牌列錶事件
+  $('.shade-mask-new').on('click', 'li', function () {
+    $(this).addClass('active').siblings('li').removeClass('active');
+    newNameplateId = $(this).data('nameplateId');
+  })
+
+  // 申請新銘牌彈窗 確定申請 按鈕點擊事件
+  $('.shade-mask-new').on('click', '.apply-btn', function () {
+    let content = $(this).parent();
+    // let ipt = content.find('input.new-nameplate-desc').val()
+    let ipt = $('.text5').val();
+    if (!newNameplateId) {
+      toastMsg(langReplace(localLang.demoModule.text8));
+      return
+    }
+    if (!ipt) {
+      toastMsg(langReplace(localLang.demoModule.text9));
+      return
+    }
+    // else {
+    // if (ipt.length !== 4) {
+    //   toastMsg(langReplace(localLang.demoModule.text10));
+    //   return
+    // }
+    // }
+
+    // applyType 1申請新銘牌，2延長
+    if (!newApplyLock) {
+      newApplyLock = true
+      let params = {
+        applyType: 1,
+        nameplateId: newNameplateId,
+        text: ipt,
+        type: parseInt(content.find('ul.apply-new-ul li').eq(0).data('type')),
+        applyDay: parseInt(content.find('.delay-time div p span').html())
+      }
+      applyNewNamaplateConfirm(params)
+    }
+  })
+
+});
 // 獲取用戶銘牌狀態
 const getUserNameplateInfo = () => {
   showLoading()
@@ -38,42 +217,70 @@ const getUserNameplateInfo = () => {
     data: {
       uid: pubInfo.uid
     },
-    success(res){
+    success(res) {
       hideLoading(layerIndex);
-      if(res.code === 200){
+      if (res.code === 200) {
         btnStatus = res.data
         renderBtnStatus()
-      }else{
+      } else {
         toastMsg(res.message)
       }
     },
-    error(){
+    error() {
       hideLoading(layerIndex);
-      toastMsg('網絡錯誤')
+      toastMsg(langReplace(localLang.demoModule.layerIndex3))
+    }
+  })
+}
+const userGet = () => {
+  showLoading()
+  networkRequest({
+    type: 'GET',
+    url: urlPrefix + '/user/get',
+    data: {
+      uid: pubInfo.uid
+    },
+    success(res) {
+      hideLoading(layerIndex);
+      if (res.code === 200) {
+        partitionId = res.data.partitionId
+        if (partitionId == 1 || partitionId == 2) {
+          $('.text5').attr('maxlength', 13);
+        } else {
+          $('.text5').attr('maxlength', 4);
+        }
+        renderBtnStatus()
+      } else {
+        toastMsg(res.message)
+      }
+    },
+    error() {
+      hideLoading(layerIndex);
+      toastMsg(langReplace(localLang.demoModule.layerIndex3))
     }
   })
 }
 
 // 渲染首頁按鈕狀態
 const renderBtnStatus = () => {
-  btnStatus.map( (item,index) => {
-      if(index > 1){
-        // 進階款式
-        $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
-        if(item > 0){
-          $('.btn').eq(index).on('click', () => {
-            getUserNameplateList(index+1)
-          })
-        }
-      }else{
-        // 基礎款式
-        $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
-        if(item > 0){
-          $('.btn').eq(index).on('click', () => {
-            getUserNameplateList(index+1)
-          })
-        }
+  btnStatus.map((item, index) => {
+    if (index > 1) {
+      // 進階款式
+      $('.btn').eq(index).find('img').attr('src', `${item > 0 ? langReplace(localLang.demoModule.img3) : langReplace(localLang.demoModule.img2)}`)
+      if (item > 0) {
+        $('.btn').eq(index).on('click', () => {
+          getUserNameplateList(index + 1)
+        })
       }
+    } else {
+      // 基礎款式
+      $('.btn').eq(index).find('img').attr('src', `${item > 0 ? langReplace(localLang.demoModule.img3) : langReplace(localLang.demoModule.img2)}`)
+      if (item > 0) {
+        $('.btn').eq(index).on('click', () => {
+          getUserNameplateList(index + 1)
+        })
+      }
+    }
   })
 }
 
@@ -88,22 +295,22 @@ const getUserNameplateList = (type) => {
       uid: pubInfo.uid,
       type
     },
-    success(res){
+    success(res) {
       hideLoading(layerIndex)
-      if(res.code === 200){
-        if(!res.data.length){
+      if (res.code === 200) {
+        if (!res.data.length) {
           getNewNameplateList(type)
-        }else{
+        } else {
           userNameplateList = res.data
           renderNameplateList()
         }
-      }else{
+      } else {
         toastMsg(res.message)
       }
     },
-    error(){
+    error() {
       hideLoading(layerIndex);
-      toastMsg('網絡錯誤')
+      toastMsg(langReplace(localLang.demoModule.layerIndex3))
     }
   })
 }
@@ -111,16 +318,16 @@ const getUserNameplateList = (type) => {
 // 渲染銘牌列錶(選擇彈窗)
 const renderNameplateList = () => {
   let str = ''
-  userNameplateList.map( item => {
+  userNameplateList.map(item => {
     str += `
       <li data-apply-day=${item.applyDay} data-nameplate-id=${item.nameplateId} data-type=${item.type} data-text=${item.fixedWord}>
-        <p>剩余${item.expireDays}天</p>
+        <p>${langReplace(localLang.demoModule.text13)}${item.expireDays}${langReplace(localLang.demoModule.text3)}</p>
         <div class="nameplate">
           <img src="${item.nameplateImage}" alt="">
           <span>${item.word}</span>
         </div>
         <div class="delay-btn">
-          <img src="./images/delay-btn.png" alt="">
+          <img src="${langReplace(localLang.demoModule.img7)}" alt="">
         </div>
       </li>
     `
@@ -143,22 +350,22 @@ const getNewNameplateList = (type) => {
       uid: pubInfo.uid,
       type
     },
-    success(res){
+    success(res) {
       hideLoading(layerIndex)
-      if(res.code === 200){
-        if(!res.data.length){
-          toastMsg('暫時沒有銘牌可申請')
+      if (res.code === 200) {
+        if (!res.data.length) {
+          toastMsg(langReplace(localLang.demoModule.text11))
           return
         }
         newNameplateList = res.data
         renderNewNameplateList()
-      }else{
+      } else {
         toastMsg(res.message)
       }
     },
-    error(){
+    error() {
       hideLoading(layerIndex);
-      toastMsg('網絡錯誤')
+      toastMsg(langReplace(localLang.demoModule.layerIndex3))
     }
   })
 }
@@ -167,7 +374,7 @@ let newNameplateId  //只有一個可選時，默認選中
 // 渲染申請新銘牌彈窗
 const renderNewNameplateList = () => {
   let str = '';
-  newNameplateList.map( item => {
+  newNameplateList.map(item => {
     str += `
       <li data-apply-day=${item.applyDay} data-nameplate-id=${item.id} data-type=${item.type}>
         <div>
@@ -177,7 +384,7 @@ const renderNewNameplateList = () => {
     `
   })
   $('.apply-new-ul').html(str)
-  if(newNameplateList.length === 1){
+  if (newNameplateList.length === 1) {
     let onlyLi = $('.apply-new-ul').find('li').eq(0);
     newNameplateId = onlyLi.data('nameplateId');
     onlyLi.addClass('active')
@@ -201,23 +408,23 @@ const delayNamaplateConfirm = (params) => {
       applyType: params.applyType,
       text: params.text
     },
-    success(res){
+    success(res) {
       hideLoading(layerIndex)
-      if(res.code === 200){
-        toastMsg('申請成功')
+      if (res.code === 200) {
+        toastMsg(langReplace(localLang.demoModule.text12))
         $('.shade-mask-delay').hide()
         $('body').css('overflow', 'auto')
         delayLock = false
-        setTimeout(()=>{
+        setTimeout(() => {
           location.reload()
         }, 500)
-      }else{
+      } else {
         toastMsg(res.message)
       }
     },
-    error(){
+    error() {
       hideLoading(layerIndex);
-      toastMsg('網絡錯誤')
+      toastMsg(langReplace(localLang.demoModule.layerIndex3))
     }
   })
 }
@@ -236,180 +443,26 @@ const applyNewNamaplateConfirm = (params) => {
       applyType: params.applyType,
       text: params.text
     },
-    success(res){
+    success(res) {
       hideLoading(layerIndex)
-      if(res.code === 200){
-        toastMsg('申請成功')
+      if (res.code === 200) {
+        toastMsg(langReplace(localLang.demoModule.text12))
         $('.shade-mask-new').hide()
         $('body').css('overflow', 'auto')
-        newApplyLock  = false
-        setTimeout(()=>{
+        newApplyLock = false
+        setTimeout(() => {
           location.reload()
         }, 500)
-      }else{
-        newApplyLock  = false
+      } else {
+        newApplyLock = false
         toastMsg(res.message)
       }
     },
-    error(){
+    error() {
       hideLoading(layerIndex);
-      toastMsg('網絡錯誤,請退出重進')
+      toastMsg(langReplace(localLang.demoModule.layerIndex3))
     }
   })
 }
 
-$(function () {
-  getInfoFromClient()
-  setTimeout( () => {
-    getUserNameplateInfo()
-  }, 50)
-
-  if (browser.app) {
-    _hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
-  }
-
-  // 點擊申請記錄按鈕
-  $('.record').on('click', function(){
-    window.location.href = './record.html'
-  })
-
-  // 關閉彈窗
-  $('.shade-mask .close').on('click', () => {
-    $('.shade-mask').hide()
-    $('body').css('overflow', 'auto')
-  })
-  $('.shade-mask-delay .close').on('click', () => {
-    $('.shade-mask-delay').hide()
-    $('body').css('overflow', 'auto')
-  })
-  $('.shade-mask-new .close').on('click', () => {
-    $('.shade-mask-new').hide()
-    $('body').css('overflow', 'auto')
-    newNameplateId = ''
-    $(this).find('input').val('')
-  })
-
-  let maxApplyDay, nameplateId, type, text
-  // 監聽 延長期限 按鈕點擊事件
-  $('.select-ul').on('click', '.delay-btn', function() {
-    let li = $(this).parent();
-    let src = li.find('.nameplate img').attr('src');
-    let desc = li.find('.nameplate span').html();
-    maxApplyDay = li.data('applyDay');
-    nameplateId = li.data('nameplateId');
-    type = li.data('type');
-    text = li.data('text');
-    
-    $('.shade-mask-delay .nameplate-style img').attr('src', src);
-    $('.shade-mask-delay .nameplate-style p span').html(desc);
-    $('.shade-mask-delay .delay-time p span').html(maxApplyDay);
-
-    $('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
-  })
-
-  // 延期彈窗 點擊減按鈕
-  $('.shade-mask-delay').on('click', '.decrease', function(){
-    let applyDay = parseInt( $(this).parent().find('span').html() );
-    if(applyDay > 7){
-      applyDay -= 7;
-    }else{
-      toastMsg('銘牌至少申請7天')
-    }
-    $('.shade-mask-delay .delay-time p span').html(applyDay);
-  })
-  //延期彈窗 點擊加按鈕
-  $('.shade-mask-delay').on('click', '.increase', function(){
-    let applyDay = parseInt( $(this).parent().find('span').html() );
-    if(applyDay >= maxApplyDay){
-      toastMsg('已達最大申請時長')
-    }else{
-      applyDay += 7;
-    }
-    $('.shade-mask-delay .delay-time p span').html(applyDay);
-  })
-  // 監聽申請延期確定按鈕點擊事件
-  $('.shade-mask-delay').on('click', '.apply-btn', function(){
-    // applyType 1申請新銘牌，2延長
-    if(!delayLock){
-      delayLock = true
-      let params = {
-        type,
-        nameplateId,
-        applyDay: parseInt( $(this).parent().find('.delay-time div p span').html() ),
-        applyType: 2,
-        text
-      };
-      delayNamaplateConfirm(params)
-    }
-  })
-
-  /*************************           ******************************/
-
-  // 監聽 申請新銘牌 按鈕點擊事件
-  $('.shade-mask').on('click', '.apply-btn', function(){
-    let type = $(this).parent().find('.select-ul li').eq(0).data('type');
-    getNewNameplateList(type)
-  })
-
-  // 申請新銘牌彈窗 點擊減按鈕
-  $('.shade-mask-new').on('click', '.decrease', function(){
-    let applyDay = parseInt( $(this).parent().find('span').html() );
-    if(applyDay > 7){
-      applyDay -= 7;
-    }else{
-      toastMsg('銘牌至少申請7天')
-    }
-    $('.shade-mask-new .delay-time p span').html(applyDay);
-  })
-  // 申請新銘牌彈窗 點擊加按鈕
-  $('.shade-mask-new').on('click', '.increase', function(){
-    let applyDay = parseInt( $(this).parent().find('span').html() );
-    let maxApplyDay = parseInt( $(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay') );
-    if(applyDay >= maxApplyDay){
-      toastMsg('已達最大申請時長')
-    }else{
-      applyDay += 7;
-    }
-    $('.shade-mask-new .delay-time p span').html(applyDay);
-  })
-  
-  // 申請新銘牌彈窗 點擊銘牌列錶事件
-  $('.shade-mask-new').on('click', 'li', function(){
-    $(this).addClass('active').siblings('li').removeClass('active');
-    newNameplateId = $(this).data('nameplateId');
-  })
-
-  // 申請新銘牌彈窗 確定申請 按鈕點擊事件
-  $('.shade-mask-new').on('click', '.apply-btn', function(){
-    let content = $(this).parent();
-    let ipt = content.find('input.new-nameplate-desc').val()
-    if(!newNameplateId){
-      toastMsg('請選擇樣式');
-      return
-    }
-    if(!ipt){
-      toastMsg('請添加銘牌文字');
-      return
-    }else{
-      if(ipt.length !== 4){
-        toastMsg('請添加4個字的銘牌文字');
-        return
-      }
-    }
-    
-    // applyType 1申請新銘牌，2延長
-    if(!newApplyLock){
-      newApplyLock = true
-      let params = {
-        applyType: 1,
-        nameplateId: newNameplateId,
-        text: ipt,
-        type: parseInt( content.find('ul.apply-new-ul li').eq(0).data('type') ),
-        applyDay: parseInt( content.find('.delay-time div p span').html() )
-      }
-      applyNewNamaplateConfirm(params)
-    }
-  })
-
-});
 

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

@@ -1,9 +1,11 @@
 let urlPrefix = getUrlPrefix();
 if (EnvCheck() === 'test') new VConsole
 
-// 封装layer消息提醒框
-let layerIndex
-const showLoading = (content = '加載中...') => {
+// 封裝layer消息提醒框
+let layerIndex;
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
     layer.open({
         type: 2,
         shadeClose: false,
@@ -16,7 +18,7 @@ const showLoading = (content = '加載中...') => {
 const hideLoading = (index) => {
     layer.close(index)
 }
-const toastMsg = (content = '操作完成', time = 2) => {
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
     layer.open({
         content,
         time,
@@ -40,53 +42,52 @@ const getUserApplyRecord = () => {
             pageNumber,
             pageSize
         },
-        success(res){
+        success(res) {
             hideLoading(layerIndex)
-            if(res.code === 200){
-                if(!res.data.length){
+            if (res.code === 200) {
+                if (!res.data.length) {
                     $('.max').hide()
-                }else{
+                } else {
                     $('.no-record-wrap').hide()
                 }
 
-                if(res.data.length === pageSize){
+                if (res.data.length === pageSize) {
                     // 能够继续请求下一页
                     canNext = true
-                }else{
+                } else {
                     canNext = false
                 }
                 recordList.push(...res.data)
                 renderRecord()
                 isLock = true
-            }else{
-              toastMsg(res.message)
+            } else {
+                toastMsg(res.message)
             }
-          },
-          error(){
+        },
+        error() {
             hideLoading(layerIndex);
-            toastMsg('網絡錯誤')
-          }
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
     })
 }
 // 渲染申请记录
 const renderRecord = () => {
     let str = '';
-    recordList.map( item => {
+    recordList.map(item => {
         str += `
             <li>
                 <div class="nameplate-style"><img src="${item.iconPic}" alt=""></div>
                 <div class="nameplate-desc-wrap">
                     <span class="nameplate-desc">${item.text}</span>
                     <p>
-                        <span>${item.applyType === 1 ? '申请' : '延长'}${item.applyDay}天</span>
+                        <span>${item.applyType === 1 ? langReplace(localLang.demoModule.text16) : langReplace(localLang.demoModule.text17)}${item.applyDay}${langReplace(localLang.demoModule.text3)}</span>
                         <span>${dateFormat(item.createTime, "yyyy-MM-dd")}</span>
                     </p>
                 </div>
                 <div class="isPass">
-                    <p class='${item.auditType === 1 ? 'not-pass' : ''}'>${item.auditType === 0 ? '申请中' : (item.auditType === 1 ? '不通过' : '已通过')}</p>
-                    ${
-                        item.remark ? (item.remark.length > 8 ? `<p class="result">${item.remark.slice(0, 8) + '...'}</p>` : `<p class="result">${item.remark}</p>`) : ''
-                    }
+                    <p class='${item.auditType === 1 ? 'not-pass' : ''}'>${item.auditType === 0 ? langReplace(localLang.demoModule.text18) : (item.auditType === 1 ? langReplace(localLang.demoModule.text19) : langReplace(localLang.demoModule.text20))}</p>
+                    ${item.remark ? (item.remark.length > 8 ? `<p class="result">${item.remark.slice(0, 8) + '...'}</p>` : `<p class="result">${item.remark}</p>`) : ''
+            }
                     
                 </div>
             </li>
@@ -95,21 +96,32 @@ const renderRecord = () => {
     $('.max').html(str)
 }
 
-$(function(){
+$(function () {
     getInfoFromClient()
-    setTimeout( () => {
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(() => {
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        translateFun();
         getUserApplyRecord()
     }, 50)
+    function translateFun() {
+        var langReplace = window.lang.replace;
+        var localLang = window.lang;
+        $('.text14').text(langReplace(localLang.demoModule.text14));
+        $('.text15').text(langReplace(localLang.demoModule.text15));
+    }
 
     // 监听滚动
-    $('ul').scroll(function(){
+    $('ul').scroll(function () {
         let scrollTop = $(this).scrollTop()
         let scrollHeight = $('ul')[0].scrollHeight
         let ulHeight = $(this).innerHeight()
-        if(scrollTop + ulHeight + 100 >= scrollHeight){
-            if(isLock){
+        if (scrollTop + ulHeight + 100 >= scrollHeight) {
+            if (isLock) {
                 // 请求下一页
-                if(canNext){
+                if (canNext) {
                     getUserApplyRecord(pageNumber++)
                     isLock = false
                 }

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

@@ -0,0 +1,40 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `التحميل...`,
+        layerIndex2: `اكتمال العملية`,
+        layerIndex3: `خطأ في الشبكة`,
+        max: `background:url("./images/max-ar.png") no-repeat;background-size:100% 100%;`,
+        img4: `background-image: url(./images/new-bg-ar.png);`,
+        img44: `background-image: url(./images/select-bg-ar.png);`,
+        img5: `background: url('./images/apply-new-ar.png') no-repeat 0 0/100% 100%;`,
+        img2: `./images/disabled-btn-ar.png`,
+        img3: `./images/apply-btn-basics-ar.png`,
+        img6: `./images/record-ar.png`,
+        img7: `./images/delay-btn-ar.png`,
+        title_t: `مخصص`,
+        text1: `نمط اللوحة:`,
+        text2: `مدة التطبيق:`,
+        text3: `أيام`,
+        text4: `نص اللوحة:`,
+        text5: `الرجاء إدخال...`,
+        text55: `13`,
+        text6: `يجب تطبيق اللوحة لمدة 7 أيام على الأقل`,
+        text7: `تم بلوغ أقصى مدة للتطبيق`,
+        text8: `يرجى اختيار نمط`,
+        text9: `يرجى إضافة نص اللوحة`,
+        text10: `يرجى إضافة نص اللوحة من 4 أحرف`,
+        text11: `لا توجد لوحات متاحة حالياً`,
+        text12: `تم التطبيق بنجاح`,
+        text13: 'متبقٍ',
+        text14: 'سجل الطلبات',
+        text15: 'لا توجد سجلات للطلبات',
+        text16: 'تقديم الطلب',
+        text17: 'تمديد',
+        text18: 'قيد الطلب',
+        text19: 'لم يتم القبول',
+        text20: 'تم القبول'
+    }
+
+}

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

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

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

@@ -0,0 +1,39 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加載中...`,
+        layerIndex2: `操作完成`,
+        layerIndex3: `網路錯誤`,
+        max: `background:url("./images/max.png") no-repeat;background-size:100% 100%;`,
+        img4: `background-image: url(./images/new-bg.png);`,
+        img44: `background-image: url(./images/select-bg.png);`,
+        img5: `background: url('./images/apply-new.png') no-repeat 0 0/100% 100%;`,
+        img2: `./images/disabled-btn.png`,
+        img3: `./images/apply-btn-basics.png`,
+        img6: `./images/record.png`,
+        img7: `./images/delay-btn.png`,
+        title_t: `私人訂製`,
+        text1: `銘牌樣式：`,
+        text2: `申請時長：`,
+        text3: `天`,
+        text4: `銘牌文字：`,
+        text5: `請輸入4個字`,
+        text55: `4`,
+        text6: `銘牌至少申請7天`,
+        text7: `已達最大申請時長`,
+        text8: `請選擇樣式`,
+        text9: `請添加銘牌文字`,
+        text10: `請添加4個字的銘牌文字`,
+        text11: `暫時沒有銘牌可申請`,
+        text12: `申請成功`,
+        text13: `剩余`,
+        text14: `申请记录`,
+        text15: `暂无申请记录`,
+        text16: `申请`,
+        text17: `延长`,
+        text18: `申请中`,
+        text19: `不通过`,
+        text20: `已通过`,
+    }
+}

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

@@ -9,7 +9,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="viewport"
     content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
-  <title>申请记录</title>
+  <title class="text14"></title>
+  <!-- 申请记录  -->
 
   <link rel="stylesheet" href="../../common/css/reset.css">
   <link rel="stylesheet" href="./css/record.css">
@@ -23,13 +24,17 @@
   </ul>
   <div class="no-record-wrap">
     <img src="./images/default.png" alt="">
-    <span>暂无申请记录</span>
+    <span class="text15"></span>
   </div>
   <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="./local/en.js"></script>
+  <script src="./local/zh.js"></script>
+  <script src="./local/ar.js"></script>
   <script src="./js/record.js"></script>
+  <script src="../../common/local/langHandler.js"></script>
 </body>
 
 </html>

view/molistar/common/js/common2.js

@@ -261,7 +261,7 @@ function convert(_url) {
 // 根据域名适配环境
 function EnvCheck() {
     if (window.location.href) {
-        if(window.location.pathname.match(/payAr/)){
+        if (window.location.pathname.match(/payAr/)) {
             pubInfo['Accept-Language'] = "ar";
         }
         var _url = window.location.host;
@@ -827,7 +827,7 @@ function fuzzyMatchUpdateQueryStringParameterFun() {
 }
 function langCodeFun(langCode) {
     if (window.location.href.match(/guildAr/)) {
-     return
+        return
     }
     var body = document.body;
     body.style.display = 'none';
@@ -837,11 +837,13 @@ function langCodeFun(langCode) {
     if (langCode == "ar") {
         document.documentElement.setAttribute("dir", "rtl");
         document.body.classList.add('arabic');
-        
+
+    }else if(langCode == "en"){
+        document.body.classList.add('english');
+    }
     if (window.location.href.match(/guildAr/)) {
         document.documentElement.setAttribute("dir", "ltr");
     }
-    }
 }
 // 获取整条url
 function updateQueryStringParameter(uri, key, value) {
@@ -1011,9 +1013,9 @@ function unitProcessingAr(val, toFixeds) { //值 保留几位小数
     if (val < 1000) {
         return val;
     } else if (val >= 1000 && val < 1000000) {
-        return (Math.floor(val / 1000)).toFixed(toFixeds) + 'K'
+        return (val / 1000).toFixed(toFixeds) + 'K'
     } else if (val >= 1000000) {
-        return (Math.floor(val / 1000000)).toFixed(toFixeds) + 'M'
+        return (val / 1000000).toFixed(toFixeds) + 'M'
     }
 }
 // 封装 在ios环境中 配置公共参数的回调函数

view/molistar/modules/charm/index.html

@@ -34,7 +34,7 @@
   <script src="./local/en.js"></script>
   <script src="./local/zh.js"></script>
   <script src="./local/ar.js"></script>
-  <script src="js/index.js?v=2.4"></script>
+  <script src="js/index.js?v=2.5"></script>
   <script src="../../common/local/langHandler.js"></script>
 </body>
 

view/molistar/modules/charm/js/index.js

@@ -56,7 +56,7 @@ $(function () {
         </p>
         <p class="user-charm">
           <img src="./images/heart.png" alt="" />
-          <span>${item.score}</span>
+          <span>${unitProcessingAr(item.score,1)}</span>
         </p>
       </div>`
       }
@@ -82,7 +82,7 @@ $(function () {
       </div>
       <p class="user-charm">
         <img src="./images/heart.png" alt="" />
-        <span>${item.score}</span>
+        <span>${unitProcessingAr(item.score,1)}</span>
       </p>
     </div>`
     })
@@ -127,13 +127,13 @@ $(function () {
           },
           error(err) {
             hideLoading(layerIndex)
-            toastMsg('網絡錯誤，請退出重進')
+            // toastMsg('網絡錯誤，請退出重進')
           }
         })
       },
       error(err) {
         hideLoading(layerIndex)
-        toastMsg('網絡錯誤，請退出重進')
+        // toastMsg('網絡錯誤，請退出重進')
       }
     })
   }

view/molistar/modules/pkRank/css/index.css

@@ -0,0 +1,680 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #121F75 0%, #4D202B 82%, #08053C 99%);
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.93333rem;
+  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: 10.4rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.tab {
+  position: relative;
+  width: 10rem;
+  height: 1.52rem;
+  margin: -0.3rem auto 0;
+  background: url(../images/tabBg.png) no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tab div {
+  width: 33.33%;
+  text-align: center;
+  height: 1.52rem;
+  line-height: 1.52rem;
+  color: #9995FF;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.tab .act {
+  width: 3.98667rem;
+  height: 1.29333rem;
+  line-height: 1rem;
+  color: #FFDC78;
+  font-weight: bold;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+  margin-top: 0.26667rem;
+}
+
+.page1 .box1 {
+  width: 9.28rem;
+  height: 2.70667rem;
+  line-height: 2.70667rem;
+  background: url(../images/page1Box1.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0.92rem auto 1.05333rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0 0.41333rem;
+  box-sizing: border-box;
+}
+
+.page1 .box1 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box1 b {
+  color: #FAE68B;
+}
+
+.page1 .box2 {
+  width: 9.28rem;
+  height: 2.70667rem;
+  background: url(../images/page1Box1.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.10667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.58667rem;
+}
+
+.page1 .box2 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box2 b {
+  color: #FAE68B;
+}
+
+.page1 .box2 .content {
+  height: 1.8rem;
+  overflow-y: scroll;
+  margin-top: -0.25rem;
+}
+
+.page1 .box2 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.page1 .box3 {
+  width: 9.28rem;
+  height: 3.37333rem;
+  background: url(../images/page1Box3.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.18667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.58667rem;
+}
+
+.page1 .box3 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box3 b {
+  color: #FAE68B;
+}
+
+.page1 .box3 .content {
+  height: 2.2rem;
+  overflow-y: scroll;
+}
+
+.page1 .box3 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.page1 .box4 {
+  width: 9.28rem;
+  height: 22.17333rem;
+  background: url(../images/page1Box4.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.18667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.58667rem;
+}
+
+.page1 .box4 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box4 b {
+  color: #FAE68B;
+}
+
+.page1 .box4_en {
+  background: url(../images/page1Box4_en.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box4_ar {
+  background: url(../images/page1Box4_ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box5 {
+  width: 9.28rem;
+  height: 9.17333rem;
+  background: url(../images/page1Box5.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 1.18667rem;
+  color: #FFF1D9;
+  font-size: 0.34667rem;
+  padding: 0.82667rem 0.41333rem 0;
+  box-sizing: border-box;
+  line-height: 0.64rem;
+}
+
+.page1 .box5 .title {
+  width: 4.86667rem;
+  height: 1.17333rem;
+  line-height: 0.88rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -0.58667rem;
+  text-align: center;
+  color: #FFDC78;
+  font-size: 0.45333rem;
+  font-weight: bold;
+  background: url(../images/page1TitleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box5 b {
+  color: #FAE68B;
+}
+
+.page1 .box5 .content {
+  height: 8rem;
+  overflow-y: scroll;
+}
+
+.page1 .box5 .content::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 {
+  width: 9.28rem;
+  height: 21.76rem;
+  margin: 0 auto 0.38667rem;
+  background: url(../images/page2.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  display: none;
+}
+
+.page2 .no1 {
+  width: 8.50667rem;
+  height: 4.50667rem;
+  position: absolute;
+  top: 1.89333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .no1 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .no1 .tx {
+  position: absolute;
+  width: 2.66667rem;
+  height: 2.66667rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.61333rem;
+}
+
+.page2 .no1 .nick {
+  width: 2rem;
+  color: #C6712B;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  top: 3.58667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.page2 .no2 {
+  width: 4.53333rem;
+  height: 4.53333rem;
+  position: absolute;
+  top: 6.65333rem;
+  left: 0.13333rem;
+}
+
+.page2 .no2 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .no2 .tx {
+  position: absolute;
+  width: 2.66667rem;
+  height: 2.66667rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.52rem;
+}
+
+.page2 .no2 .nick {
+  width: 2rem;
+  color: #C6712B;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  top: 3.44rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.page2 .no3 {
+  width: 4.53333rem;
+  height: 4.53333rem;
+  position: absolute;
+  top: 6.65333rem;
+  right: 0.13333rem;
+}
+
+.page2 .no3 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .no3 .tx {
+  position: absolute;
+  width: 2.66667rem;
+  height: 2.66667rem;
+  border-radius: 50%;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.52rem;
+}
+
+.page2 .no3 .nick {
+  width: 2rem;
+  color: #C6712B;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  top: 3.44rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.page2 .titleBox {
+  width: 7.7rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 11.53333rem;
+  display: flex;
+  justify-content: space-between;
+  color: #FFFFFF;
+  font-size: 0.24rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.page2 ul {
+  width: 8.26667rem;
+  height: 8.9rem;
+  position: absolute;
+  top: 12.50667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow-y: scroll;
+}
+
+.page2 ul::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 ul li {
+  background: url(../images/page2Li.png) no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 1.92rem;
+  margin-bottom: 0.1rem;
+}
+
+.page2 ul li .num {
+  width: 0.92rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #fff;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  float: left;
+  margin-right: 0.2rem;
+  margin-left: 0.14667rem;
+  text-align: center;
+}
+
+.page2 ul li .tx {
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 50%;
+  margin-top: 0.34667rem;
+  margin-right: 0.14667rem;
+  float: left;
+  border: 0.04rem solid #FFE0B5;
+}
+
+.page2 ul li .user {
+  width: 1.7rem;
+  float: left;
+}
+
+.page2 ul li .user p {
+  margin-top: 0.6rem;
+  margin-right: 0.06667rem;
+  margin-bottom: 0.14667rem;
+  color: #FFFFFF;
+  font-size: 0.34667rem;
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 ul li .user b {
+  display: block;
+  color: #fff;
+  font-size: 0.32rem;
+  font-weight: 500;
+  opacity: .6;
+}
+
+.page2 ul li .all {
+  width: 1.06667rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #FFEEA7;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  text-align: center;
+  float: left;
+}
+
+.page2 ul li .win {
+  width: 1.06667rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #FFEEA7;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  text-align: center;
+  float: left;
+}
+
+.page2 ul li .winPercent {
+  width: 1.06667rem;
+  height: 100%;
+  line-height: 1.92rem;
+  color: #FFEEA7;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  text-align: center;
+  float: right;
+}
+
+.page2 ul .li1 .num {
+  width: 0.92rem;
+  height: 1rem;
+  margin-top: 0.49333rem;
+  background: url(../images/no1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 ul .li2 .num {
+  width: 0.92rem;
+  height: 1rem;
+  margin-top: 0.49333rem;
+  background: url(../images/no2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 ul .li3 .num {
+  width: 0.92rem;
+  height: 1rem;
+  margin-top: 0.49333rem;
+  background: url(../images/no3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page3 {
+  display: none;
+  width: 9.28rem;
+  height: 11.30667rem;
+  margin: 0 auto 0.36rem;
+  background: url(../images/page3.png) no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.page3 ul {
+  width: 9.08rem;
+  height: 9.5rem;
+  margin-top: 1.4rem;
+  overflow-y: scroll;
+  margin: 1.4rem auto 0;
+}
+
+.page3 ul::-webkit-scrollbar {
+  display: none;
+}
+
+.page3 ul li {
+  width: 9.08rem;
+  height: 5.54667rem;
+  background: url(../images/page3Li.png) no-repeat;
+  background-size: 100% 100%;
+  margin-top: -1rem;
+  margin-bottom: -2.5rem;
+  position: relative;
+  transform: translateX(-1.2%);
+}
+
+.page3 ul li .icon_l {
+  width: 1.02667rem;
+  height: 0.61333rem;
+  position: absolute;
+  left: 0.72rem;
+  z-index: 2;
+  top: 2.13333rem;
+}
+
+.page3 ul li .icon_r {
+  width: 1.02667rem;
+  height: 0.61333rem;
+  position: absolute;
+  right: 0.72rem;
+  z-index: 2;
+  top: 2.13333rem;
+}
+
+.page3 ul li .tx_l {
+  width: 1.17333rem;
+  height: 1.17333rem;
+  position: absolute;
+  left: 0.65333rem;
+  top: 2.38667rem;
+  border-radius: 50%;
+  border: 0.04rem solid #FFE0B5;
+}
+
+.page3 ul li .tx_r {
+  width: 1.17333rem;
+  height: 1.17333rem;
+  position: absolute;
+  right: 0.53333rem;
+  top: 2.38667rem;
+  border-radius: 50%;
+  border: 0.04rem solid #FFE0B5;
+}
+
+.page3 ul li .nick_l {
+  width: 1.6rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.33333rem;
+  font-weight: bold;
+  position: absolute;
+  left: 1.96rem;
+  top: 2.66667rem;
+}
+
+.page3 ul li .nick_r {
+  width: 1.6rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.33333rem;
+  font-weight: bold;
+  position: absolute;
+  left: 5.6rem;
+  top: 2.66667rem;
+}
+
+.page3 ul li .id_l {
+  width: 1.6rem;
+  color: #fff;
+  font-weight: 500;
+  font-size: 0.30667rem;
+  opacity: .6;
+  position: absolute;
+  left: 1.96rem;
+  top: 3.16rem;
+}
+
+.page3 ul li .id_r {
+  width: 1.6rem;
+  color: #fff;
+  font-weight: 500;
+  font-size: 0.30667rem;
+  opacity: .6;
+  position: absolute;
+  left: 5.6rem;
+  top: 3.16rem;
+}
+
+.arabic .page2 .titleBox {
+  width: 8.53333rem;
+}

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

@@ -0,0 +1,698 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #121F75 0%, #4D202B 82%, #08053C 99%);
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(70);
+    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(780);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+}
+
+.tab {
+    position: relative;
+    width: px2rem(750);
+    height: px2rem(114);
+    margin: -0.3rem auto 0;
+    background: url(../images/tabBg.png) no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: 33.33%;
+        text-align: center;
+        height: px2rem(114);
+        line-height: px2rem(114);
+        color: #9995FF;
+        font-size: px2rem(30);
+        font-weight: 500;
+    }
+
+    .act {
+        width: px2rem(299);
+        height: px2rem(97);
+        line-height: px2rem(75);
+        color: #FFDC78;
+        font-weight: bold;
+        background: url(../images/tabAct.png) no-repeat;
+        background-size: 100% 100%;
+        margin-top: px2rem(20);
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .box1 {
+        width: px2rem(696);
+        height: px2rem(203);
+        line-height: px2rem(203);
+        background: url(../images/page1Box1.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: px2rem(69) auto px2rem(79);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: 0 px2rem(31);
+        box-sizing: border-box;
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+    }
+
+    .box2 {
+        width: px2rem(696);
+        height: px2rem(203);
+        background: url(../images/page1Box1.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(83);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(44);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+
+        .content {
+            height: 1.8rem;
+            overflow-y: scroll;
+            margin-top: -0.25rem;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .box3 {
+        width: px2rem(696);
+        height: px2rem(253);
+        background: url(../images/page1Box3.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(89);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(44);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+
+        .content {
+            height: 2.2rem;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .box4 {
+        width: px2rem(696);
+        height: px2rem(1663);
+        background: url(../images/page1Box4.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(89);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(44);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+    }
+
+    .box4_en {
+        background: url(../images/page1Box4_en.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .box4_ar {
+        background: url(../images/page1Box4_ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .box5 {
+        width: px2rem(696);
+        height: px2rem(688);
+        background: url(../images/page1Box5.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(89);
+        color: #FFF1D9;
+        font-size: px2rem(26);
+        padding: px2rem(62) px2rem(31) 0;
+        box-sizing: border-box;
+        line-height: px2rem(48);
+
+        .title {
+            width: px2rem(365);
+            height: px2rem(88);
+            line-height: px2rem(66);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-44);
+            text-align: center;
+            color: #FFDC78;
+            font-size: px2rem(34);
+            font-weight: bold;
+            background: url(../images/page1TitleBg.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        b {
+            color: #FAE68B;
+        }
+
+        .content {
+            height: 8rem;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+}
+
+.page2 {
+    width: px2rem(696);
+    height: px2rem(1632);
+    margin: 0 auto px2rem(29);
+    background: url(../images/page2.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    display: none;
+
+    .no1 {
+        width: px2rem(638);
+        height: px2rem(338);
+        position: absolute;
+        top: px2rem(142);
+        left: 50%;
+        transform: translateX(-50%);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            position: absolute;
+            width: px2rem(200);
+            height: px2rem(200);
+            border-radius: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(46);
+        }
+
+        .nick {
+            width: 2rem;
+            color: #C6712B;
+            font-size: px2rem(24);
+            font-weight: bold;
+            position: absolute;
+            top: px2rem(269);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+
+        }
+    }
+
+    .no2 {
+        width: px2rem(340);
+        height: px2rem(340);
+        position: absolute;
+        top: px2rem(499);
+        left: px2rem(10);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            position: absolute;
+            width: px2rem(200);
+            height: px2rem(200);
+            border-radius: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(39);
+        }
+
+        .nick {
+            width: 2rem;
+            color: #C6712B;
+            font-size: px2rem(24);
+            font-weight: bold;
+            position: absolute;
+            top: px2rem(258);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+
+        }
+    }
+
+    .no3 {
+        width: px2rem(340);
+        height: px2rem(340);
+        position: absolute;
+        top: px2rem(499);
+        right: px2rem(10);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            position: absolute;
+            width: px2rem(200);
+            height: px2rem(200);
+            border-radius: 50%;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(39);
+        }
+
+        .nick {
+            width: 2rem;
+            color: #C6712B;
+            font-size: px2rem(24);
+            font-weight: bold;
+            position: absolute;
+            top: px2rem(258);
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: center;
+
+        }
+    }
+
+    .titleBox {
+        width: 7.7rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(865);
+        display: flex;
+        justify-content: space-between;
+        color: #FFFFFF;
+        font-size: px2rem(18);
+        font-weight: 500;
+        text-align: center;
+    }
+
+    ul {
+        width: px2rem(620);
+        height: 8.9rem;
+        position: absolute;
+        top: px2rem(938);
+        left: 50%;
+        transform: translateX(-50%);
+        overflow-y: scroll;
+        &::-webkit-scrollbar{
+            display: none;
+        }
+
+        li {
+            background: url(../images/page2Li.png) no-repeat;
+            background-size: 100% 100%;
+            width: 100%;
+            height: px2rem(144);
+            margin-bottom: 0.1rem;
+
+            .num {
+                width: px2rem(69);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #fff;
+                font-size: px2rem(26);
+                font-weight: 500;
+                float: left;
+                margin-right: px2rem(15);
+                margin-left: px2rem(11);
+                text-align: center;
+            }
+
+            .tx {
+                width: px2rem(90);
+                height: px2rem(90);
+                border-radius: 50%;
+                margin-top: px2rem(26);
+                margin-right: px2rem(11);
+                float: left;
+                border: px2rem(3) solid #FFE0B5;
+            }
+
+            .user {
+                width: 1.7rem;
+                float: left;
+
+                p {
+                    margin-top: px2rem(45);
+                    margin-right: px2rem(5);
+                    margin-bottom: px2rem(11);
+                    color: #FFFFFF;
+                    font-size: px2rem(26);
+                    font-weight: bold;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                b {
+                    display: block;
+                    color: #fff;
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                    opacity: .6;
+                }
+            }
+
+            .all {
+                width: px2rem(80);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #FFEEA7;
+                font-size: px2rem(22);
+                font-weight: 500;
+                text-align: center;
+                float: left;
+            }
+
+            .win {
+                width: px2rem(80);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #FFEEA7;
+                font-size: px2rem(22);
+                font-weight: 500;
+                text-align: center;
+                float: left;
+            }
+
+            .winPercent {
+                width: px2rem(80);
+                height: 100%;
+                line-height: px2rem(144);
+                color: #FFEEA7;
+                font-size: px2rem(22);
+                font-weight: 500;
+                text-align: center;
+                float: right;
+            }
+        }
+
+        .li1 {
+            .num {
+                width: px2rem(69);
+                height: px2rem(75);
+                margin-top: px2rem(37);
+                background: url(../images/no1.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .li2 {
+            .num {
+                width: px2rem(69);
+                height: px2rem(75);
+                margin-top: px2rem(37);
+                background: url(../images/no2.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .li3 {
+            .num {
+                width: px2rem(69);
+                height: px2rem(75);
+                margin-top: px2rem(37);
+                background: url(../images/no3.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+}
+
+.page3 {
+    display: none;
+    width: px2rem(696);
+    height: px2rem(848);
+    margin: 0 auto px2rem(27);
+    background: url(../images/page3.png) no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    ul {
+        width: px2rem(681);
+        height: 9.5rem;
+        margin-top: 1.4rem;
+        overflow-y: scroll;
+        margin: 1.4rem auto 0;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            width: px2rem(681);
+            height: px2rem(416);
+            background: url(../images/page3Li.png) no-repeat;
+            background-size: 100% 100%;
+            margin-top: -1rem;
+            margin-bottom: -2.5rem;
+            position: relative;
+            transform: translateX(-1.2%);
+
+            .icon_l {
+                width: px2rem(77);
+                height: px2rem(46);
+                position: absolute;
+                left: px2rem(54);
+                z-index: 2;
+                top: px2rem(160);
+            }
+
+            .icon_r {
+                width: px2rem(77);
+                height: px2rem(46);
+                position: absolute;
+                right: px2rem(54);
+                z-index: 2;
+                top: px2rem(160);
+            }
+
+            .tx_l {
+                width: px2rem(88);
+                height: px2rem(88);
+                position: absolute;
+                left: px2rem(49);
+                top: px2rem(179);
+                border-radius: 50%;
+                border: px2rem(3) solid #FFE0B5;
+            }
+
+            .tx_r {
+                width: px2rem(88);
+                height: px2rem(88);
+                position: absolute;
+                right: px2rem(40);
+                top: px2rem(179);
+                border-radius: 50%;
+                border: px2rem(3) solid #FFE0B5;
+            }
+
+            .nick_l {
+                width: 1.6rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(25);
+                font-weight: bold;
+                position: absolute;
+                left: px2rem(147);
+                top: px2rem(200);
+            }
+
+            .nick_r {
+                width: 1.6rem;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #fff;
+                font-size: px2rem(25);
+                font-weight: bold;
+                position: absolute;
+                left: px2rem(420);
+                top: px2rem(200);
+            }
+
+            .id_l {
+                width: 1.6rem;
+                color: #fff;
+                font-weight: 500;
+                font-size: px2rem(23);
+                opacity: .6;
+                position: absolute;
+                left: px2rem(147);
+                top: px2rem(237);
+            }
+
+            .id_r {
+                width: 1.6rem;
+                color: #fff;
+                font-weight: 500;
+                font-size: px2rem(23);
+                opacity: .6;
+                position: absolute;
+                left: px2rem(420);
+                top: px2rem(237);
+            }
+        }
+    }
+}
+
+.arabic{
+    .page2 .titleBox{
+        width: px2rem(640);
+    }
+}

view/molistar/modules/pkRank/index.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title_t"></title>
+    <!-- PK排行榜 -->
+    <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>
+    <!-- tab切换 -->
+    <div class="tab">
+        <div class="act text1"></div>
+        <div class="text2"></div>
+        <div class="text3"></div>
+    </div>
+    <!-- 页面1 -->
+    <div class="page1 text4">
+        <!-- <div class="box1">
+            <div class="title">活动时间</div>
+            <div class="content">活动每周四晚上 <b>10:00</b> 开放，周日晚上 <b>10:00</b> 结束。</div>
+        </div>
+        <div class="box2">
+            <div class="title">报名方式</div>
+            <div class="content">主播在房间内搜索其他主播的ID并发起PK，即代表参加活动（仅限个播参与）。</div>
+        </div>
+        <div class="box3">
+            <div class="title">获胜条件</div>
+            <div class="content">PK双方流水总和 <b>≧5000</b>，则代表有效数据，胜利方胜利场数<b>+1</b>，失败方胜利场数<b>+0</b>，获胜率=胜利场数/总参加场数</div>
+        </div>
+        <div class="box4">
+            <div class="title">活动奖励</div>
+            <div class="content"></div>
+        </div>
+        <div class="box5">
+            <div class="title">活动规则</div>
+            <div class="content">
+                1、若用在比赛期间参加比赛选手出现辱骂他人等违反平台规则行为者按照平台规则处罚用户后，将参与者取消活动资格;<br>
+                2、总胜利场数>=20且排名前五的主播有额外奖励，铭牌&座驾奖励在活动结束后1h内自动发放，钻石在三个工作日之内下发;<br>
+                3、胜利场数&获胜率相同，按照最后一场结束时间排名，晚结束排名靠前;<br>
+                4、有任何疑問請聯繫客服（app內搜索ID：10001、WeChat:sd245376）;<br>
+                5、本活動最終解釋權歸官方所有，並與Apple inc/Google公司無關。
+            </div>
+        </div> -->
+    </div>
+    <!-- 页面2 -->
+    <div class="page2">
+        <!-- 前三 -->
+        <div class="no1">
+            <img src="./images/page2Top1.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+        </div>
+        <div class="no2">
+            <img src="./images/page2Top2.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+        </div>
+        <div class="no3">
+            <img src="./images/page2Top3.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick"></div>
+        </div>
+        <!-- 表头 -->
+        <div class="titleBox">
+            <div class="text5"></div>
+            <div class="text6"></div>
+            <div class="text7"></div>
+            <div class="text8"></div>
+            <div class="text9"></div>
+        </div>
+        <!-- 列表 -->
+        <ul>
+            <!-- <li class="li1">
+                <div class="num"></div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li>
+            <li class="li2">
+                <div class="num"></div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li>
+            <li class="li3">
+                <div class="num"></div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li>
+            <li>
+                <div class="num">4</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>虚位以待</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="all">0</div>
+                <div class="win">0</div>
+                <div class="winPercent">0%</div>
+            </li> -->
+        </ul>
+    </div>
+    <!-- 页面3 -->
+    <div class="page3">
+        <ul>
+            <!-- <li>
+                <img src="./images/win.png" alt="" class="icon_l">
+                <img src="./images/logo.png" alt="" class="tx_l">
+                <div class="nick_l">虚位以待</div>
+                <div class="id_l">ID:0</div>
+                <img src="./images/win.png" alt="" class="icon_r">
+                <img src="./images/logo.png" alt="" class="tx_r">
+                <div class="nick_r">虚位以待</div>
+                <div class="id_r">ID:0</div>
+            </li> -->
+        </ul>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/modules/pkRank/js/index.js

@@ -0,0 +1,227 @@
+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 pageNum = 1;
+var lock = true;
+var pageNumPk = 1;
+var lockPk = true;
+// 初始化函數
+$(function () {
+    getInfoFromClient()
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        translateFun();
+    }, 100)
+})
+
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.title_t').html(langReplace(localLang.demoModule.title_t));
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+    $('.text2').html(langReplace(localLang.demoModule.text2));
+    $('.text3').html(langReplace(localLang.demoModule.text3));
+    $('.text4').html(langReplace(localLang.demoModule.text4));
+    $('.text5').html(langReplace(localLang.demoModule.text5));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
+    $('.text8').html(langReplace(localLang.demoModule.text8));
+    $('.text9').html(langReplace(localLang.demoModule.text9));
+}
+// tab切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    $('.page1,.page2,.page3').hide();
+    $(`.page${i}`).show();
+    if (i == 3) {
+        $('.page3 ul li').remove();
+        pageNumPk = 1;
+        getRecord()
+    } else if (i == 2) {
+        $('.page2 ul li').remove();
+        pageNum = 1;
+        getRank();
+    }
+})
+// 排行榜接口
+function getRank() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/act/singleCrossRoomPk/getRank',
+        data: { pageNum: pageNum, pageSize: 50 },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                if (pageNum == 1) {
+                    var first = res.data.slice(0, 3);
+                    // 处理前第3名
+                    if (first.length < 3) {
+                        let arr = new Array(3 - first.length).fill({
+                            avatar: './images/logo.png',
+                            nick: langReplace(localLang.demoModule.text10),
+                        })
+                        first.push(...arr)
+                    }
+                    first.forEach((res, i) => {
+                        $(`.page2 .no${i + 1} .tx`).attr('src', res.avatar);
+                        $(`.page2 .no${i + 1} .nick`).text(res.nick);
+                    })
+                }
+                // 非榜首展示处理
+                if (res.data.length == 0 && pageNum == 1) {
+                    lock = false;
+                }
+                else {
+                    res.data.forEach((res, i) => {
+                        str += `
+                            <li class="li${i < 3 ? i + 1 : ''}">
+                                <div class="num">${i < 3 ? '' : i + 1}</div>
+                                <img src="${res.avatar}" alt="" class="tx">
+                                <div class="user">
+                                    <p>${res.nick}</p>
+                                    <b>ID:${res.erBanNo}</b>
+                                </div>
+                                <div class="all">${res.totalNum}</div>
+                                <div class="win">${res.winNum}</div>
+                                <div class="winPercent">${(res.winRate * 100).toFixed(0)}%</div>
+                            </li>
+                        `
+                    })
+                    $('.page2 ul').append(str);
+                    lock = true;
+                }
+                $('.page3 ul').append(str);
+            } else {
+                lock = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            lock = true;
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 排行榜滚动监听
+$('.page2 ul').scroll(function () {
+    return
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.page2 ul')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (lock) {
+            // 請求下一頁
+            pageNum = pageNum + 1;
+            getRank(pageNum)
+            lock = false;
+        }
+    }
+})
+
+// pk场次接口
+function getRecord() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/act/singleCrossRoomPk/getRecord',
+        data: { pageNum: pageNumPk, pageSize: 10 },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                if (res.data.length == 0) {
+                    lockPk = false;
+                } else {
+                    res.data.forEach((res, i) => {
+                        str += `
+                        <li>
+                            <img src="${res.leftPkStatus == 2 ? `./images/win-${getQueryString().lang}.png` : res.leftPkStatus == 3 ? `./images/lose-${getQueryString().lang}.png` : res.leftPkStatus == 4 ? `./images/balance-${getQueryString().lang}.png` : ''}" alt="" class="icon_l">
+                            <img src="${res.leftAvatar}" alt="" class="tx_l">
+                            <div class="nick_l">${res.leftNick}</div>
+                            <div class="id_l">ID:${res.leftErBanNo}</div>
+                            <img src="${res.rightPkStatus == 2 ? `./images/win-${getQueryString().lang}.png` : res.rightPkStatus == 3 ? `./images/lose-${getQueryString().lang}.png` : res.rightPkStatus == 4 ? `./images/balance-${getQueryString().lang}.png` : ''}" alt="" class="icon_r">
+                            <img src="${res.rightAvatar}" alt="" class="tx_r">
+                            <div class="nick_r">${res.rightNick}</div>
+                            <div class="id_r">ID:${res.rightErBanNo}</div>
+                        </li>
+                    `
+                    })
+                    lockPk = true;
+                }
+                $('.page3 ul').append(str);
+            } else {
+                lockPk = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            lockPk = true;
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// pk滚动监听
+$('.page3 ul').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.page3 ul')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (lockPk) {
+            // 請求下一頁
+            pageNumPk = pageNumPk + 1;
+            getRecord(pageNumPk)
+            lockPk = false;
+        }
+    }
+})

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

@@ -0,0 +1,47 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جار التحميل...`, // Arabic
+        layerIndex2: `تم العملية`, // Arabic
+        layerIndex3: `خطأ في الشبكة`, // Arabic
+        title_t: `جدول الرتب PK`, // Arabic
+        text1: `معلومات الجدول`, // Arabic
+        text2: `لوحة الرتب`, // Arabic
+        text3: `جلسات PK`, // Arabic
+        text4: `
+        <div class="box1">
+            <div class="title">وقت الحدث</div>
+            <div class="content">يفتح الحدث كل ليلة خميس في <b>10:00</b> وينتهي كل ليلة أحد في <b>10:00</b>.</div>
+        </div>
+        <div class="box2">
+            <div class="title">طريقة التسجيل</div>
+            <div class="content">يبحث المضيف عن معرفات مضيفين آخرين في الغرفة ويبدأ PK للمشاركة في الحدث (محدود للمذيعين الفرديين فقط).</div>
+        </div>
+        <div class="box3">
+            <div class="title">شروط الفوز</div>
+            <div class="content">إذا كان إجمالي دوران كل جانبي PK <b>≧5000</b>، فإن البيانات صالحة. يزيد الجانب الفائز من عدد الانتصارات بـ <b>+1</b>، ويزيد الجانب الخاسر من عدد الانتصارات بـ <b>+0</b>. معدل الفوز = عدد الانتصارات / إجمالي مرات المشاركة.</div>
+        </div>
+        <div class="box4 box4_ar">
+            <div class="title">مكافآت الحدث</div>
+            <div class="content"></div>
+        </div>
+        <div class="box5">
+            <div class="title">قواعد الحدث</div>
+            <div class="content">
+                1. إذا كانت هناك مشاركين يقومون بسلوكيات مثل الإساءة للآخرين خلال فترة المسابقة، فسيتم إلغاء أهليتهم للحدث وفقًا لقواعد المنصة؛<br>
+                2. يتلقى المشاركون الذين يحققون عدد انتصارات إجمالي ≥20 ومصنفون ضمن أول خمسة مقدمي برامج مكافآت إضافية. يتم إصدار شارة & سيارة تلقائيًا خلال ساعة واحدة بعد انتهاء الحدث، ويتم إصدار الماسات خلال ثلاثة أيام عمل؛<br>
+                3. في حالة تساوي عدد الانتصارات ومعدل الفوز، يتم الترتيب استنادًا إلى وقت انتهاء اللعبة الأخيرة، مع الترتيب الأعلى في وقت انتهاء لعبة أحدث؛<br>
+                4. لأي استفسار، يرجى الاتصال بخدمة العملاء (البحث عن المعرف: 10001 في التطبيق، WeChat: sd245376)؛<br>
+                5. التفسير النهائي لهذا الحدث ينتمي إلى الرسمي، ولا يتعلق بشركة Apple Inc/Google Inc.
+            </div>
+        </div>`, // Arabic
+        text5: `الرقم التسلسلي`, // Arabic
+        text6: `معلومات المضيف`, // Arabic
+        text7: `إجمالي مرات المشاركة`, // Arabic
+        text8: `مرات الفوز`, // Arabic
+        text9: `معدل الفوز`, // Arabic
+        text10: `شاغر`, // Arabic
+    }
+
+}

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

@@ -0,0 +1,47 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        layerIndex1: `Loading...`, // English
+        layerIndex2: `Operation completed`, // English
+        layerIndex3: `Network error`, // English
+        title_t: `PK Leaderboard`, // English
+        text1: `Schedule`, // English
+        text2: `Leaderboard`, // English
+        text3: `PK Sessions`, // English
+        text4: `
+    <div class="box1">
+        <div class="title">Event Time</div>
+        <div class="content">The event opens every Thursday night at <b>10:00</b> and ends every Sunday night at <b>10:00</b>.</div>
+    </div>
+    <div class="box2">
+        <div class="title">Registration Method</div>
+        <div class="content">The anchor searches for the ID of other anchors in the room and initiates a PK to participate in the event (limited to individual broadcasters).</div>
+    </div>
+    <div class="box3">
+        <div class="title">Winning Conditions</div>
+        <div class="content">If the total turnover of both sides of the PK is <b>≧5000</b>, the data is valid. The winning side increases the number of victories by <b>+1</b>, and the losing side increases the number of victories by <b>+0</b>. Winning rate = Number of victories / Total participation times.</div>
+    </div>
+    <div class="box4 box4_en">
+        <div class="title">Event Rewards</div>
+        <div class="content"></div>
+    </div>
+    <div class="box5">
+        <div class="title">Event Rules</div>
+        <div class="content">
+            1. If during the competition period, participants who engage in behaviors such as insulting others in the game will have their qualifications for the event revoked in accordance with platform rules;<br>
+            2. Participants with a total victory count ≥20 and ranked in the top five anchors will receive additional rewards. The badge & car rewards will be automatically issued within 1 hour after the event ends, and diamonds will be issued within three working days;<br>
+            3. In case of the same number of victories & winning rate, ranking will be based on the end time of the last game, with the later ending time ranked higher;<br>
+            4. For any questions, please contact customer service (search ID: 10001 in the app, WeChat: sd245376);<br>
+            5. The final interpretation of this event belongs to the official, and it has nothing to do with Apple Inc/Google Inc.
+        </div>
+    </div>`, // English
+        text5: `Serial Number`, // English
+        text6: `Anchor Information`, // English
+        text7: `Total Participation Times`, // English
+        text8: `Victory Times`, // English
+        text9: `Winning Rate`, // English
+        text10: `Vacant`, // English
+    }
+
+}

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

@@ -0,0 +1,46 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加載中...`,
+        layerIndex2: `操作完成`,
+        layerIndex3: `網路錯誤`,
+        title_t: `PK排行榜`,
+        text1: `賽程信息`,
+        text2: `排行榜`,
+        text3: `PK場次`,
+        text4: `
+        <div class="box1">
+            <div class="title">活動時間</div>
+            <div class="content">活動每周四晚上 <b>10:00</b> 開放，周日晚上 <b>10:00</b> 結束。</div>
+        </div>
+        <div class="box2">
+            <div class="title">報名方式</div>
+            <div class="content">主播在房間內搜索其他主播的ID併發起PK，即代錶參加活動（僅限個播參與）。</div>
+        </div>
+        <div class="box3">
+            <div class="title">獲勝條件</div>
+            <div class="content">PK雙方流水總和 <b>≧5000</b>，則代錶有效數據，勝利方勝利場數<b>+1</b>，失敗方勝利場數<b>+0</b>，獲勝率=勝利場數/總參加場數</div>
+        </div>
+        <div class="box4">
+            <div class="title">活動獎勵</div>
+            <div class="content"></div>
+        </div>
+        <div class="box5">
+            <div class="title">活動規則</div>
+            <div class="content">
+                1、若用在比賽期間參加比賽選手出現辱罵他人等違反平臺規則行為者按照平臺規則處罰用戶後，將參與者取消活動資格;<br>
+                2、總勝利場數>=20且排名前五的主播有額外獎勵，銘牌&座駕獎勵在活動結束後1h內自動發放，鉆石在三個工作日之內下發;<br>
+                3、勝利場數&獲勝率相同，按照最後一場結束時間排名，晚結束排名靠前;<br>
+                4、有任何疑問請聯繫客服（app內搜索ID：10001、WeChat:sd245376）;<br>
+                5、本活動最終解釋權歸官方所有，並與Apple inc/Google公司無關。
+            </div>
+        </div>`,
+        text5: `序號`,
+        text6: `主播信息`,
+        text7: `總參加場次`,
+        text8: `勝利場次`,
+        text9: `勝率`,
+        text10: `虛位以待`,
+    }
+}

view/molistar/modules/rank/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>molistar</title><link href=./static/css/app.816d18a4a19c64f496b1f35a68fb3a2d.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.1244b84e5bdc6ca4325c.js></script><script type=text/javascript src=./static/js/vendor.15ea60415f84b9c5a7e3.js></script><script type=text/javascript src=./static/js/app.f9cd1a971030e0feba78.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>molistar</title><link href=./static/css/app.f93eab06805cd0eec251914bdfcfb4d4.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.7ef0f6b11dd8f8fd1487.js></script><script type=text/javascript src=./static/js/vendor.15ea60415f84b9c5a7e3.js></script><script type=text/javascript src=./static/js/app.6073143aaecac844f980.js></script></body></html>

view/molistar/modules/rank/static/js/manifest.1244b84e5bdc6ca4325c.js

@@ -1,2 +0,0 @@
-!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var f,i,u,d=0,s=[];d<r.length;d++)i=r[d],t[i]&&s.push(t[i][0]),t[i]=0;for(f in a)Object.prototype.hasOwnProperty.call(a,f)&&(e[f]=a[f]);for(n&&n(r,a,c);s.length;)s.shift()();if(c)for(d=0;d<c.length;d++)u=o(o.s=c[d]);return u};var r={},t={9:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"8df79ff5365eaaec9298",1:"1bd9d8db377a897451e8",2:"ee817bfbe2f0f7f4ffcf",3:"7a4dfeb0d7ea325598f5",4:"74c8770604d782011a1a",5:"36de0cf38e7936e529ee",6:"92d7991962d3719f0ac8"}[e]+".js";var f=setTimeout(i,12e4);function i(){c.onerror=c.onload=null,clearTimeout(f);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=i,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
-//# sourceMappingURL=manifest.1244b84e5bdc6ca4325c.js.map

view/molistar/modules/rank/static/js/manifest.7ef0f6b11dd8f8fd1487.js

@@ -0,0 +1,2 @@
+!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,a){for(var i,u,f,s=0,d=[];s<r.length;s++)u=r[s],t[u]&&d.push(t[u][0]),t[u]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(n&&n(r,c,a);d.length;)d.shift()();if(a)for(s=0;s<a.length;s++)f=o(o.s=a[s]);return f};var r={},t={9:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var c=document.getElementsByTagName("head")[0],a=document.createElement("script");a.type="text/javascript",a.charset="utf-8",a.async=!0,a.timeout=12e4,o.nc&&a.setAttribute("nonce",o.nc),a.src=o.p+"static/js/"+e+"."+{0:"8df79ff5365eaaec9298",1:"2660322e6ec3ab36d36b",2:"c400ed84fcfb7544002c",3:"7a4dfeb0d7ea325598f5",4:"74c8770604d782011a1a",5:"36de0cf38e7936e529ee",6:"92d7991962d3719f0ac8"}[e]+".js";var i=setTimeout(u,12e4);function u(){a.onerror=a.onload=null,clearTimeout(i);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return a.onerror=a.onload=u,c.appendChild(a),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
+//# sourceMappingURL=manifest.7ef0f6b11dd8f8fd1487.js.map

view/molistar/modules/room_rank/hourRank.html

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

view/molistar/modules/room_rank/hourRankLicense.html

@@ -59,5 +59,5 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
-<script src="./js/hourRankLicense.js"></script>
+<script src="./js/hourRankLicense.js?v=1.0"></script>
 <script src="../../common/local/langHandler.js"></script>

view/molistar/modules/room_rank/index.html

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

view/molistar/modules/room_rank/js/hourRank.js

@@ -88,9 +88,6 @@ const renderLastHourThree = () => {
   }
   let str = ''
   lastHourRank.map((item, index) => {
-    if(item.score > 10000) {
-      item.score = ( Math.floor(item.score/1000) ) / 10 + 'W'
-    }
     str += `
       <div class="top_three_item">
         <div class="avatar" data-uid=${item.uid}>
@@ -102,7 +99,7 @@ const renderLastHourThree = () => {
           ${
             index == 0 ?
             '<img src="./images/single/first-icon.png" alt=""></img>' :
-            `<span>${item.score}</span><br>${langReplace(localLang.demoModule.hour_text8)}`
+            `<span>${unitProcessingAr(item.score,1)}</span><!-- <br> -->${langReplace(localLang.demoModule.hour_text8)}`
           }
         </div>
       </div>
@@ -157,9 +154,6 @@ const renderCurrentList = () => {
   }
   let str = ''
   currHourRank.map((item, index) => {
-    if(item.score > 10000) {
-      item.score = ( Math.floor(item.score/1000) ) / 10 + 'W'
-    }
     str += `
       <li>
         <div class="index">${index+1}</div>
@@ -171,7 +165,7 @@ const renderCurrentList = () => {
           ${
             index === 0 ?
             langReplace(localLang.demoModule.hour_text10) :
-            `${langReplace(localLang.demoModule.hour_text8)}<br><span>${item.score}</span>`
+            `${langReplace(localLang.demoModule.hour_text8)}<!-- <br> --><span>${unitProcessingAr(item.score,1)}</span>`
           }
         </div>
       </li>
@@ -186,11 +180,12 @@ const renderCurrentRoomInfo = () => {
   currHourRank.forEach((item, index) => {
     if(item.uid == currRoomInfo.uid) {
       rank = index+1
-      if(item.score > 10000) {
-        score = ( Math.floor(item.score/1000) ) / 10 + 'W'
-      }else {
-        score = item.score
-      }
+      // if(item.score > 10000) {
+      //   score = ( Math.floor(item.score/1000) ) / 10 + 'W'
+      // }else {
+      //   score = item.score
+      // }
+      score = unitProcessingAr(item.score,1)
     }
   })
   $('.mine_index').html(rank ? rank : langReplace(localLang.demoModule.hour_text11))

view/molistar/modules/room_rank/js/hourRankLicense.js

@@ -88,9 +88,6 @@ const renderLastHourThree = () => {
   }
   let str = ''
   lastHourRank.map((item, index) => {
-    if (item.score > 10000) {
-      item.score = (Math.floor(item.score / 1000)) / 10 + 'W'
-    }
     str += `
       <div class="top_three_item">
         <div class="avatar" data-uid=${item.uid}>
@@ -101,7 +98,7 @@ const renderLastHourThree = () => {
         <div class="num" style="display:${item.score === '' ? 'none' : 'block'}">
           ${index == 0 ?
         '<img src="./images/single/first-icon.png" alt=""></img>' :
-        `<span>${item.score}</span><br>${langReplace(localLang.demoModule.hour_text8)}`
+        `<span>${unitProcessingAr(item.score,1)}</span><br>${langReplace(localLang.demoModule.hour_text8)}`
       }
         </div>
       </div>
@@ -156,9 +153,6 @@ const renderCurrentList = () => {
   }
   let str = ''
   currHourRank.map((item, index) => {
-    if (item.score > 10000) {
-      item.score = (Math.floor(item.score / 1000)) / 10 + 'W'
-    }
     str += `
       <li>
         <div class="index">${index + 1}</div>
@@ -169,7 +163,7 @@ const renderCurrentList = () => {
         <div class="others_num" style="display:${item.score === '' ? 'none' : 'block'}">
           ${index === 0 ?
         `${langReplace(localLang.demoModule.hour_text10)}` :
-        `${langReplace(localLang.demoModule.hour_text8)}<br><span>${item.score}</span>`
+        `${langReplace(localLang.demoModule.hour_text8)}<br><span>${unitProcessingAr(item.score,1)}</span>`
       }
         </div>
       </li>
@@ -184,11 +178,12 @@ const renderCurrentRoomInfo = () => {
   currHourRank.forEach((item, index) => {
     if (item.uid == currRoomInfo.uid) {
       rank = index + 1
-      if (item.score > 10000) {
-        score = (Math.floor(item.score / 1000)) / 10 + 'W'
-      } else {
-        score = item.score
-      }
+      // if (item.score > 10000) {
+      //   score = (Math.floor(item.score / 1000)) / 10 + 'W'
+      // } else {
+      //   score = item.score
+      // }
+      score = unitProcessingAr(item.score,1)
     }
   })
   $('.mine_index').html(rank ? rank : `${langReplace(localLang.demoModule.hour_text11)}`)

view/molistar/modules/room_rank/js/index.js

@@ -189,7 +189,7 @@ function listDomFun(res, num) {
         // $(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`)
         $(`.largestBox .top3 .no${i + 1} .box .icon .icon1`).attr('src', res.experUrl)
         $(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', res.charmUrl)
-        $(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessing(res.goldAmount, 10000, 1, 'W'));
+        $(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessingAr(res.goldAmount,1));
     })
     // 處理非前三
     var notTop3 = res.data.rankings.slice(3);
@@ -207,7 +207,7 @@ function listDomFun(res, num) {
                      <img src="${res.charmUrl}" alt="" class="icon2">
                  </div>
                  <div class="score">
-                     <p>${unitProcessing(res.goldAmount, 10000, 1, 'W')}</p>
+                     <p>${unitProcessingAr(res.goldAmount,1)}</p>
                      <span>${num == 1 ? langReplace(localLang.demoModule.room_text1) : langReplace(localLang.demoModule.room_text2)}</span>
                  </div>
              </li>

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

@@ -17,15 +17,17 @@ langAr = {
         hour_text5: 'جاري التحميل...',
         hour_text6: 'اكتمال العملية',
         hour_text7: 'خطأ في الشبكة',
-        hour_text8: 'بعيداً عن السابق',
+        // hour_text8: 'بعيداً عن السابق',
+        hour_text8: ' ',
         hour_text9: 'مكان شاغر في انتظار',
-        hour_text10: 'في قمة القائمة',
+        hour_text10: ' ',
+        // hour_text10: 'في قمة القائمة',
         hour_text11: 'غير مدرج في القائمة',
         // =============================房间榜==============================
         roomImg1: './images/title-ar.png',
         room_title: 'قائمة الغرفة',
-        room_text1: 'قائمة الحب',
-        room_text2: 'قائمة السحر',
+        room_text1: 'قائمة الأغنياء',
+        room_text2: 'قائمة الجاذبية',
         room_text3: 'القائمة اليومية',
         room_text4: 'القائمة الأسبوعية',
         room_text5: 'القائمة الشهرية',

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

@@ -17,9 +17,11 @@ langEn = {
         hour_text5: 'Loading...',
         hour_text6: 'Operation Completed',
         hour_text7: 'Network Error',
-        hour_text8: 'Away from the Previous',
+        // hour_text8: 'Away from the Previous',
+        hour_text8: ' ',
         hour_text9: 'Awaiting Position',
-        hour_text10: 'At the Top of the List',
+        // hour_text10: 'At the Top of the List',
+        hour_text10: ' ',
         hour_text11: 'Not Listed',
         // =============================房间榜==============================
         roomImg1: './images/title-en.png',

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

@@ -17,8 +17,10 @@ langZh = {
         hour_text5: '加載中...',
         hour_text6: '操作完成',
         hour_text7: '網絡錯誤',
-        hour_text8: '距上一名',
+        // hour_text8: '距上一名',
+        hour_text8: ' ',
         hour_text9: '虛位以待',
+        // hour_text10: '高居榜首',
         hour_text10: '高居榜首',
         hour_text11: '未上榜',
         // =============================房間榜==============================

view/molistar/vue-project/wishRank/src/i18n/langs/ar.js

@@ -1,12 +1,13 @@
 const ar = {
     rank: {
-        "爱意榜": "قائمة الحب",
-        "魅力榜": "قائمة السحر",
+        "爱意榜": "قائمة الأغنياء",
+        "魅力榜": "قائمة الجاذبية",
         "房间榜": "قائمة الغرف",
         "公会榜": "قائمة الوكالات",
         "日榜": "قائمة اليومية",
         "周榜": "قائمة الأسبوعية",
-        "距上一名": "بعيد عن السابق",
+        // "距上一名": "بعيد عن السابق",
+        "距上一名": "",
         "未上榜": "غير مدرج",
         "加載中": "جاري التحميل"
     }

view/molistar/vue-project/wishRank/src/i18n/langs/en.js

@@ -6,7 +6,8 @@ const en = {
         "公会榜": "Guild List",
         "日榜": "Daily List",
         "周榜": "Weekly List",
-        "距上一名": "Away from the Previous",
+        // "距上一名": "Away from the Previous",
+        "距上一名": "",
         "未上榜": "Not Listed",
         "加載中": "Loading..."
     }