新增账单

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

@@ -1268,7 +1268,8 @@ body {
   height: 2.21333rem;
   background: url(../images/my.png) no-repeat;
   background-size: 100% 100%;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   bottom: 0;
   z-index: 3;
   box-sizing: border-box;
@@ -1719,6 +1720,26 @@ body {
   direction: ltr;
 }
 
+.Turkiye .header {
+  background: url(../images/header-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .page3 .content .topBox1 {
+  background: url(../images/topBox1-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .page3 .content .topBox2 {
+  background: url(../images/topBox2-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .page3 .content .topBox3 {
+  background: url(../images/topBox3-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
 .china .header {
   background: url(../images/header-zh.png) no-repeat;
   background-size: 100% 100%;

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

@@ -1288,7 +1288,8 @@ body {
         height: px2rem(166);
         background: url(../images/my.png) no-repeat;
         background-size: 100% 100%;
-        left: 0;
+        left: 50%;
+        transform: translateX(-50%);
         bottom: 0;
         z-index: 3;
         box-sizing: border-box;
@@ -1652,7 +1653,8 @@ body {
                 margin-bottom: 0.1rem;
                 line-height: 0.5rem;
             }
-            img{
+
+            img {
                 width: px2rem(590);
                 display: block;
                 margin: px2rem(9) auto px2rem(9);
@@ -1735,6 +1737,27 @@ body {
     }
 }
 
+.Turkiye {
+    .header {
+        background: url(../images/header-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .page3 .content .topBox1 {
+        background: url(../images/topBox1-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .page3 .content .topBox2 {
+        background: url(../images/topBox2-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .page3 .content .topBox3 {
+        background: url(../images/topBox3-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
 .china {
     .header {
         background: url(../images/header-zh.png) no-repeat;

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

@@ -302,6 +302,7 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
 <script src="./js/wow.js"></script>
 <script src="../../common/js/svga.min.js"></script>
 <script src="./js/index.js"></script>

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

@@ -0,0 +1,43 @@
+langTr = {
+    demoModule: {
+        layerIndex1: `Yükleniyor...`,
+        layerIndex2: `Başarılı`,
+        layerIndex3: `Ağ hatası`,
+        text1: `Aşk Dönme Dolabı`,
+        text2: `Kurallar`,
+        text3: `Gün`,
+        text4: `Saat`,
+        text5: `Dakika`,
+        text6: `Saniye`,
+        text7: `CP Meydanı`,
+        text8: `CP Listesi`,
+        text9: `CP Ödülleri`,
+        text10: `Tarih listesinde ilk üç kullanıcı burada görüntülenecek`,
+        text11: `CP hediyeleri gönderin ve siz ve sevdiğiniz kişi listeye girebilirsiniz!`,
+        text12: `TOP1`,
+        text13: `Haftalık listede birinci sıradaki kullanıcı aşağıdaki ödülleri alabilir`,
+        text14: `TOP2`,
+        text15: `Haftalık listede ikinci sıradaki kullanıcı aşağıdaki ödülleri alabilir`,
+        text16: `TOP3`,
+        text17: `Haftalık listede üçüncü sıradaki kullanıcı aşağıdaki ödülleri alabilir`,
+        text18: `Kurallar`,
+        text19: `<p>1. Etkinlik zamanı: Pazartesi 0:00-Pazar 23:59 (GMT+8)</p>
+            <p>2. Belirtilen CP hediyesini göndererek CP olun</p>
+            <img src="./images/rule.png" alt="">
+            <p>3. 1 coin CP hediyesi göndererek 1 aşk değeri kazanın. Ne kadar çok hediye gönderirseniz, o kadar çok aşk değeri kazanırsınız.</p>
+            <p>4. Haftalık istatistik listesinde ilk üç sıradaki kullanıcı cömert ödüller alacaktır.</p>
+            <p>5. CP ilişkinizi kaldırırsanız, CP listesinde artık görünmezsiniz.</p>
+            <p>6. Yeniden yükleme acentesi kullanıcıları bu etkinliğe katılamaz.</p>`,
+        text199: `<p>1. Etkinlik zamanı: Pazartesi 0:00-Pazar 23:59 (GMT+3)</p>
+            <p>2. Belirtilen CP hediyesini göndererek CP olun</p>
+            <img src="./images/rule.png" alt="">
+            <p>3. 1 coin CP hediyesi göndererek 1 aşk değeri kazanın. Ne kadar çok hediye gönderirseniz, o kadar çok aşk değeri kazanırsınız.</p>
+            <p>4. Haftalık istatistik listesinde ilk üç sıradaki kullanıcı cömert ödüller alacaktır.</p>
+            <p>5. CP ilişkinizi kaldırırsanız, CP listesinde artık görünmezsiniz.</p>
+            <p>6. Yeniden yükleme acentesi kullanıcıları bu etkinliğe katılamaz.</p>`,
+        img1: `./images/carouselTitle-tr.png`,
+        img2: `./images/waiting-tr.png`,
+        text20: `Boş`,
+    }
+
+}

view/molistar/activity/annualReport/css/index.css

@@ -0,0 +1,378 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  overflow-x: hidden;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 1.2rem;
+  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;
+  z-index: 2;
+}
+
+.back p {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+  text-align: center;
+  color: #FFF8C2;
+  font-size: 0.42667rem;
+  font-weight: 600;
+}
+
+.h5 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.h5 .pagesBox {
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+  transform: translateY(0%);
+}
+
+.h5 .pagesBox .page1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img1.png) no-repeat center;
+  background-size: 10rem 100%;
+}
+
+.h5 .pagesBox .page1 .title {
+  width: 10rem;
+  height: 1.73333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 2.64rem auto 0.36rem;
+}
+
+.h5 .pagesBox .page1 p {
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  width: 8.45333rem;
+  margin: 0 auto 0;
+  line-height: 0.64rem;
+}
+
+.h5 .pagesBox .page1 .but {
+  width: 6.85333rem;
+  height: 1.57333rem;
+  line-height: 1.57333rem;
+  text-align: center;
+  color: #000000;
+  font-size: 0.50667rem;
+  font-weight: 600;
+  background: url(../images/but.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.98667rem;
+}
+
+.h5 .pagesBox .page2 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img2.png) no-repeat center;
+  background-size: 10rem 100%;
+}
+
+.h5 .pagesBox .page2 .tx {
+  width: 2.34667rem;
+  height: 2.4rem;
+  border: 0.06667rem solid #FFF36D;
+  border-radius: 50%;
+  box-sizing: border-box;
+  margin: 1.89333rem auto 0.18667rem;
+  display: block;
+}
+
+.h5 .pagesBox .page2 .name {
+  width: 8.33333rem;
+  margin: 0 auto 0.29333rem;
+  text-align: center;
+  color: #FFF36D;
+  font-size: 0.48rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.h5 .pagesBox .page2 .id {
+  width: 8.33333rem;
+  margin: 0 auto 0.56rem;
+  text-align: center;
+  color: #FFF36D;
+  font-size: 0.4rem;
+  font-weight: 400;
+}
+
+.h5 .pagesBox .page2 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.65333rem;
+}
+
+.h5 .pagesBox .page2 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page3 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img3.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 2.56rem;
+}
+
+.h5 .pagesBox .page3 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.64rem;
+}
+
+.h5 .pagesBox .page3 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page4 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img4.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 2.32rem;
+}
+
+.h5 .pagesBox .page4 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.66667rem;
+}
+
+.h5 .pagesBox .page4 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page5 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img5.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 2.32rem;
+}
+
+.h5 .pagesBox .page5 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.66667rem;
+}
+
+.h5 .pagesBox .page5 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page6 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img6.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 4.90667rem;
+}
+
+.h5 .pagesBox .page6 .txl {
+  position: absolute;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 50%;
+  border: 0.05333rem solid #FFF36D;
+  top: 2.01333rem;
+  left: 0.68rem;
+}
+
+.h5 .pagesBox .page6 .love {
+  width: 1.33333rem;
+  height: 1.33333rem;
+  position: absolute;
+  top: 2.54667rem;
+  left: 2.44rem;
+  z-index: 2;
+}
+
+.h5 .pagesBox .page6 .txr {
+  position: absolute;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 50%;
+  border: 0.05333rem solid #FFF36D;
+  top: 2.01333rem;
+  left: 3.14667rem;
+}
+
+.h5 .pagesBox .page6 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.74667rem;
+}
+
+.h5 .pagesBox .page6 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page7 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img7.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 2.32rem;
+}
+
+.h5 .pagesBox .page7 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.74667rem;
+}
+
+.h5 .pagesBox .page7 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page8 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img8.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 2.32rem;
+}
+
+.h5 .pagesBox .page8 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.70667rem;
+}
+
+.h5 .pagesBox .page8 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .page9 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url(../images/img9.png) no-repeat center;
+  background-size: 10rem 100%;
+  padding-top: 2.32rem;
+}
+
+.h5 .pagesBox .page9 p {
+  width: 8.33333rem;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  line-height: 0.64rem;
+  margin: 0 auto 0.65333rem;
+}
+
+.h5 .pagesBox .page9 p b {
+  color: #FFF36D;
+  font-size: 0.53333rem;
+}
+
+.h5 .pagesBox .pages {
+  box-sizing: border-box;
+}
+
+.h5 .pagesBox .pages .more {
+  width: 0.8rem;
+  height: 0.8rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.65333rem;
+}
+
+.china .h5 .pagesBox .page1 .title {
+  background: url(../images/title-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .h5 .pagesBox .page1 .title {
+  background: url(../images/title-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .h5 .pagesBox .page1 .title {
+  background: url(../images/title-ar.png) no-repeat;
+  background-size: 100% 100%;
+}

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

@@ -0,0 +1,395 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    overflow-x: hidden;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(90);
+    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);
+        z-index: 2;
+    }
+
+    p {
+        width: 100%;
+        height: px2rem(44);
+        line-height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+        text-align: center;
+        color: #FFF8C2;
+        font-size: px2rem(32);
+        font-weight: 600;
+    }
+}
+
+.h5 {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    // background: rgba(0, 0, 0, .6);
+
+    .pagesBox {
+        width: 100%;
+        height: 100%;
+        // overflow: hidden;
+        transition: all .5s;
+        transform: translateY(-0%);
+
+        .page1 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img1.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+
+            .title {
+                width: px2rem(750);
+                height: px2rem(130);
+                background: url(../images/title.png) no-repeat;
+                background-size: 100% 100%;
+                margin: px2rem(198) auto px2rem(27);
+            }
+
+            p {
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                width: px2rem(634);
+                margin: 0 auto 0;
+                line-height: px2rem(48);
+            }
+
+            .but {
+                width: px2rem(514);
+                height: px2rem(118);
+                line-height: px2rem(118);
+                text-align: center;
+                color: #000000;
+                font-size: px2rem(38);
+                font-weight: 600;
+                background: url(../images/but.png) no-repeat;
+                background-size: 100% 100%;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(149);
+            }
+        }
+
+        .page2 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img2.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+
+            .tx {
+                width: px2rem(176);
+                height: px2rem(180);
+                border: px2rem(5) solid #FFF36D;
+                border-radius: 50%;
+                box-sizing: border-box;
+                margin: px2rem(142) auto px2rem(14);
+                display: block;
+            }
+
+            .name {
+                width: px2rem(625);
+                margin: 0 auto px2rem(22);
+                text-align: center;
+                color: #FFF36D;
+                font-size: px2rem(36);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .id {
+                width: px2rem(625);
+                margin: 0 auto px2rem(42);
+                text-align: center;
+                color: #FFF36D;
+                font-size: px2rem(30);
+                font-weight: 400;
+            }
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(49);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page3 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img3.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(192);
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(48);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page4 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img4.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(174);
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(50);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page5 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img5.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(174);
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(50);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page6 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img6.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(368);
+
+            .txl {
+                position: absolute;
+                width: px2rem(180);
+                height: px2rem(180);
+                border-radius: 50%;
+                border: px2rem(4) solid #FFF36D;
+                top: px2rem(151);
+                left: px2rem(51);
+            }
+
+            .love {
+                width: px2rem(100);
+                height: px2rem(100);
+                position: absolute;
+                top: px2rem(191);
+                left: px2rem(183);
+                z-index: 2;
+            }
+
+            .txr {
+                position: absolute;
+                width: px2rem(180);
+                height: px2rem(180);
+                border-radius: 50%;
+                border: px2rem(4) solid #FFF36D;
+                top: px2rem(151);
+                left: px2rem(236);
+            }
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(56);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page7 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img7.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(174);
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(56);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page8 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img8.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(174);
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(53);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+        .page9 {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            background: url(../images/img9.png) no-repeat center;
+            background-size: px2rem(750) 100%;
+            padding-top: px2rem(174);
+
+            p {
+                width: px2rem(625);
+                color: #fff;
+                font-size: px2rem(30);
+                font-weight: 500;
+                line-height: px2rem(48);
+                margin: 0 auto px2rem(49);
+
+                b {
+                    color: #FFF36D;
+                    font-size: px2rem(40);
+                }
+            }
+        }
+
+
+        .pages {
+            box-sizing: border-box;
+
+            .more {
+                width: px2rem(60);
+                height: px2rem(60);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(49);
+            }
+        }
+    }
+}
+
+.china {
+    .h5 .pagesBox .page1 .title{
+        background: url(../images/title-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.Turkiye {
+    .h5 .pagesBox .page1 {
+        .title {
+            background: url(../images/title-tr.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+.arabic {
+    .h5 .pagesBox .page1 {
+        .title {
+            background: url(../images/title-ar.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}

view/molistar/activity/annualReport/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title"></title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <div class="h5">
+        <div class="pagesBox text1">
+            
+        </div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/activity/annualReport/js/index.js

@@ -0,0 +1,146 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+var length;
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        get();
+    }, 100)
+})
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.title').html(langReplace(localLang.demoModule.title));
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+
+    // 監聽滑動事件
+    let startY
+    length = $('.h5 .pages').length - 1;//
+    var index = 0;
+    var touchLength = 100;
+    $('body .h5').on('touchstart', function (e) {
+        startY = e.touches[0].pageY
+    })
+    $('body .h5').on('touchend', function (e) {
+        let endY = e.originalEvent.changedTouches[0].pageY
+        // 上滑
+        if (startY - endY >= 50) {
+            if (index > length - 1) {
+                return;
+            } else {
+                index = index + 1;
+                $('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
+                // animatedImplementFun(index);
+            }
+        }
+        //下滑
+        else if (endY - startY >= 50) {
+            if (index > 0) {
+                index = index - 1;
+                $('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
+                // animatedImplementFun(index);
+            }
+        }
+    })
+    $('.h5 .pagesBox').on('click', '.page1 .but', function () {
+        index = index + 1;
+        $('.pagesBox').css("transform", `translateY(-${index * touchLength}%)`);
+    })
+}
+// 接口
+function get() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/user/yearReport/get',
+        success(res) {
+            if (res.code === 200) {
+                $('.h5 .pagesBox .page2 .tx').attr('src', res.data.me.avatar);
+                $('.h5 .pagesBox .page2 .name').text(res.data.me.nick);
+                $('.h5 .pagesBox .page2 .id').text('ID:' + res.data.me.erbanNo);
+                $('.h5 .pagesBox .page2 p b').text(res.data.createTime);
+                $('.h5 .pagesBox .page3 p b').text(res.data.createDays);
+                $('.h5 .pagesBox .page4 p .b1').text(res.data.experienceValue);
+                $('.h5 .pagesBox .page4 p .b2').text(res.data.experienceTitle);
+                $('.h5 .pagesBox .page4 p .b3').text(res.data.createDays);
+                $('.h5 .pagesBox .page5 p .b1').text(res.data.charmValue);
+                $('.h5 .pagesBox .page5 p .b2').text(res.data.charmTitle);
+                $('.h5 .pagesBox .page7 p .b1').text(res.data.giftWallCount);
+                $('.h5 .pagesBox .page7 p .b2').text(res.data.giftName);
+                // cp
+                if (res.data.cp) {
+                    $(`.h5 .pagesBox .page6 p .b1`).text(res.data.cpCreateTime)
+                    $(`.h5 .pagesBox .page6 p .b2`).text(res.data.cp.nick)
+                    $(`.h5 .pagesBox .page6 p .b3`).text(res.data.cpCreateDays)
+                    $('.h5 .pagesBox .page6 .txl').attr('src', res.data.me.avatar);
+                    $('.h5 .pagesBox .page6 .txr').attr('src', res.data.cp.avatar);
+                } else {
+                    $('.h5 .pagesBox .page6').hide();
+                    length = length - 1;
+                }
+                // 转赠金币
+                if (res.data.giveDiamond) {
+                    $('.h5 .pagesBox .page8 p .b1').text(res.data.giveDiamond);
+                } else {
+                    $('.h5 .pagesBox .page8').hide();
+                    length = length - 1;
+                }
+                console.log(length);
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}

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

@@ -0,0 +1,81 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: 'جار التحميل...',
+        layerIndex2: 'تم الانتهاء من العملية',
+        layerIndex3: 'خطأ في الشبكة، يرجى الخروج وإعادة الدخول',
+        title: 'التقرير السنوي',
+        text1: `
+          <!-- الصفحة 1 -->
+          <div class="pages page1" id="img1">
+            <div class="title"></div>
+            <p class="p1">
+              في عالم الإنترنت الواسع، أنت مثل نجم ساطع. هنا، لا نرى فقط ضوءك، بل نشعر أيضًا بالفرح الذي تجلبه - أنت جزء لا غنى عنه من Molistar.
+            </p>
+            <div class="but">انقر لتوليد</div>
+          </div>
+          <!-- الصفحة 2 -->
+          <div class="pages page2" id="img2">
+            <img src="./images/more.png" alt="" class="more">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="name">الاسم</div>
+            <div class="id">ID: 0</div>
+            <p><b>2024-11-23</b> هو أول يوم لك في Molistar.</p>
+            <p>منذ ذلك اليوم، جربنا الكثير معًا: تكوين صداقات جديدة، الدردشة عن الحياة، وتحدي متعة الألعاب معًا.</p>
+            <p>كل لحظة نسجت رابطًا لا ينفصم بيننا.</p>
+          </div>
+          <!-- الصفحة 3 -->
+          <div class="pages page3" id="img3">
+            <img src="./images/more.png" alt="" class="more">
+            <p>لقد قضيت <b>0</b> أيام مليئة بالضحك في Molistar.</p>
+            <p>مشاركتك النشطة تجعل الغرفة مليئة بالحيوية، كل محادثة حيوية ومثيرة، وكل لعبة مليئة بالضحك.</p>
+            <p>بفضلك، أصبح هذا المكان أكثر جمالًا.</p>
+          </div>
+          <!-- الصفحة 4 -->
+          <div class="pages page4" id="img4">
+            <img src="./images/more.png" alt="" class="more">
+            <p>في رحلة هذا العام، أرسلت <b class="b1">0</b> عملات، وهو ما يجعلك مستحقًا بكل جدارة <b class="b2">محرّك الثروة.</b></p>
+            <p>كل نقطة تجربة هي شهادة على عملك الشاق، وكل ترقية تسجل تقدمك.</p>
+            <p>من دخولك إلى المنصة لأول مرة اليوم، اجتهادك.</p>
+          </div>
+          <!-- الصفحة 5 -->
+          <div class="pages page5" id="img5">
+            <img src="./images/more.png" alt="" class="more">
+            <p>في هذا العام، جمعت <b class="b1">0</b> نقاط تجربة سحرية.</p>
+            <p>كل نقطة هي أفضل دليل على عملك الشاق وموهبتك.</p>
+            <p>مبروك لك على كونك أفضل <b class="b2">بالا بالا</b> على منصتنا!!!</p>
+          </div>
+          <!-- الصفحة 6 -->
+          <div class="pages page6" id="img6">
+            <img src="./images/more.png" alt="" class="more">
+            <img src="./images/logo.png" alt="" class="txl">
+            <img src="./images/love.png" alt="" class="love">
+            <img src="./images/logo.png" alt="" class="txr">
+            <p>لقد استلمت هدية CP المحددة في <b class="b1">2024-11-23 00:00:00</b>.</p>
+            <p>من تلك اللحظة، أصبحت أنت و <b class="b2">مومو</b> ثنائيًا رائعًا.</p>
+            <p>حتى الآن، كانت علاقتكما دافئة لمدة <b class="b3">0</b> أيام.</p>
+            <p>نتمنى لكما طريق حب مشرق دائمًا واستمرار كتابة فصول أكثر جمالًا!</p>
+          </div>
+          <!-- الصفحة 7 -->
+          <div class="pages page7" id="img7">
+            <img src="./images/more.png" alt="" class="more">
+            <p>هذا العام، لم تكسب فقط ذكريات جميلة لا تعد ولا تحصى في Molistar، بل أظهرت أيضًا حماسك ودعمك بإضاءة <b class="b1">0</b> هدايا.</p>
+            <p>هديةك المفضلة هي <b class="b2">مومو</b></p>
+            <p>هذه الهدية الخاصة هي ليست فقط انعكاسًا فريدًا لذوقك، بل أيضًا جسرًا مهمًا للتواصل مع المستخدمين الآخرين.</p>
+          </div>
+          <!-- الصفحة 8 -->
+          <div class="pages page8" id="img8">
+            <img src="./images/more.png" alt="" class="more">
+            <p>في 2024، كنت وكيل الشحن المحترم لدينا، وقد حولت إجمالي <b class="b1">0</b> عملات.</p>
+            <p>شكرًا لجهودك في العام الماضي.</p>
+          </div>
+          <!-- الصفحة 9 -->
+          <div class="pages page9" id="img9">
+            <p>الآن، دعنا نتقدم إلى 2025 يدًا بيد، نواصل كتابة قصصنا الخاصة، ونخلق المزيد من الذكريات التي لا تُنسى.</p>
+            <p>نتمنى أن يكون كل يوم في المستقبل أكثر إشراقًا بفضل وجود بعضنا البعض!</p>
+          </div>
+        `,
+    }
+
+}

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

@@ -0,0 +1,87 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        layerIndex1: 'Loading...',
+        layerIndex2: 'Operation completed',
+        layerIndex3: 'Network error, please exit and re-enter',
+        title:'Annual Report',
+        text1: `
+        <!-- 頁面1 -->
+            <div class="pages page1" id="img1">
+                <div class="title"></div>
+                <p class="p1">
+                    In the vast online world, you are like a shining star.Here, we not only see your light, but also
+                    feel the joy you bring - you are an indispensable part of Molistar.
+                </p>
+                <div class="but">Click Generate</div>
+            </div>
+            <!-- 頁面2 -->
+            <div class="pages page2" id="img2">
+                <img src="./images/more.png" alt="" class="more">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名称</div>
+                <div class="id">ID:0</div>
+                <p><b>2024-11-23</b> is your first day at Molistar.</p>
+                <p>Since that day, we have experienced a lot together: making new friends, chatting about life, and
+                    challenging the fun of games together.</p>
+                <p>Every moment has woven an inseparable bond between us.</p>
+            </div>
+            <!-- 頁面3 -->
+            <div class="pages page3" id="img3">
+                <img src="./images/more.png" alt="" class="more">
+                <p>You have spent <b>0</b> days full of laughter at Molistar.</p>
+                <p>Your active participation makes the room full of vitality, every conversation is so lively and
+                    interesting, and every game is full of laughter.</p>
+                <p>Because of you, this place has become more beautiful.</p>
+            </div>
+            <!-- 頁面4 -->
+            <div class="pages page4" id="img4">
+                <img src="./images/more.png" alt="" class="more">
+                <p>In this year's journey, you have sent <b class="b1">0</b> coins, which is well deserved <b class="b2">Wealth Germinator.</b>.
+                </p>
+                <p>Every experience point is a testimony to your hard work, and every upgrade records your progress.</p>
+                <p>From entering the platform for the first time today, your persistence </p>
+            </div>
+            <!-- 頁面5 -->
+            <div class="pages page5" id="img5">
+                <img src="./images/more.png" alt="" class="more">
+                <p>In this year, you have accumulated <b class="b1">0</b> charm experience points. </p>
+                <p>Every point is the best proof of your hard work and talent. </p>
+                <p>Congratulations on becoming the best <b class="b2">巴拉巴拉</b> on our platform!!!</p>
+            </div>
+            <!-- 頁面6 -->
+            <div class="pages page6" id="img6">
+                <img src="./images/more.png" alt="" class="more">
+                <img src="./images/logo.png" alt="" class="txl">
+                <img src="./images/love.png" alt="" class="love">
+                <img src="./images/logo.png" alt="" class="txr">
+                <p>You received the designated CP gift on <b class="b1">2024-11-23 00:00:00</b>.</p>
+                <p>From that moment on, you and <b class="b2">momo</b> became an enviable CP.</p>
+                <p>So far, your relationship has been warm for <b class="b3">0</b> days.</p>
+                <p>May your love path always be full of sunshine and continue to write more beautiful chapters!</p>
+            </div>
+            <!-- 頁面7 -->
+            <div class="pages page7" id="img7">
+                <img src="./images/more.png" alt="" class="more">
+                <p>This year, you not only gained countless beautiful memories in Molistar, but also showed your
+                    enthusiasm and support by lighting up <b class="b1">0</b> gifts.</p>
+                <p>Your favorite gift is <b class="b2">momo</b></p>
+                <p>This special gift is not only a unique reflection of your taste, but also an important bridge for you
+                    to communicate with other users.</p>
+            </div>
+            <!-- 頁面8 -->
+            <div class="pages page8" id="img8">
+                <img src="./images/more.png" alt="" class="more">
+                <p>In 2024, you were our valued recharge agent, and you have transferred a total of <b class="b1">0</b> coins.</p>
+                <p>Thank you for your efforts in the past year.</p>
+            </div>
+            <!-- 頁面9 -->
+            <div class="pages page9" id="img9">
+                <p>Now, let us move forward to 2025 hand in hand, continue to write our own stories, and create more
+                    unforgettable memories.</p>
+                <p>May every day in the future be brighter because of each other's existence!</p>
+            </div>
+        `,
+    }
+}

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

@@ -0,0 +1,83 @@
+// 土耳其
+langTr = {
+    // 模塊
+    demoModule: {
+        layerIndex1: "Yükleniyor...",
+        layerIndex2: "İşlem tamamlandı",
+        layerIndex3: "Ağ hatası, lütfen çıkın ve tekrar girin",
+        title: "Yıllık Rapor",
+        text1: `
+            <!-- Sayfa 1 -->
+            <div class="pages page1" id="img1">
+                <div class="title"></div>
+                <p class="p1">
+                    Geniş çevrimiçi dünyada, sen parlayan bir yıldız gibisin. Burada, sadece ışığını görmekle kalmıyor, 
+                    aynı zamanda getirdiğin mutluluğu da hissediyoruz - sen Molistar'ın vazgeçilmez bir parçasısın.
+                </p>
+                <div class="but">Oluşturmayı Tıkla</div>
+            </div>
+            <!-- Sayfa 2 -->
+            <div class="pages page2" id="img2">
+                <img src="./images/more.png" alt="" class="more">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">Ad</div>
+                <div class="id">ID:0</div>
+                <p><b>2024-11-23</b> senin Molistar'daki ilk günündü.</p>
+                <p>O günden itibaren birlikte çok şey deneyimledik: yeni arkadaşlar edinmek, hayat hakkında sohbetler yapmak ve oyunların eğlencesine birlikte meydan okumak.</p>
+                <p>Her an, aramızda ayrılmaz bir bağ ördü.</p>
+            </div>
+            <!-- Sayfa 3 -->
+            <div class="pages page3" id="img3">
+                <img src="./images/more.png" alt="" class="more">
+                <p>Molistar'da <b>0</b> gün kahkahalarla geçirdin.</p>
+                <p>Aktif katılımın, odayı canlı tutuyor, her sohbet çok hareketli ve eğlenceli, her oyun kahkahalarla dolu.</p>
+                <p>Sadece senin yüzünden, bu yer daha güzel oldu.</p>
+            </div>
+            <!-- Sayfa 4 -->
+            <div class="pages page4" id="img4">
+                <img src="./images/more.png" alt="" class="more">
+                <p>Bu yılki yolculuğunda, <b class="b1">0</b> coin gönderdin, bu da seni <b class="b2">Zenginlik Tohumcusu</b> yaptı.</p>
+                <p>Her deneyim puanı, sıkı çalışmanın bir kanıtıdır ve her yükselme, ilerlemeni kaydeder.</p>
+                <p>Bugün ilk kez platforma katıldığından beri, azmin sayesinde...</p>
+            </div>
+            <!-- Sayfa 5 -->
+            <div class="pages page5" id="img5">
+                <img src="./images/more.png" alt="" class="more">
+                <p>Bu yıl, toplamda <b class="b1">0</b> çekicilik deneyim puanı biriktirdin.</p>
+                <p>Her puan, sıkı çalışmanın ve yeteneğinin en iyi kanıtıdır.</p>
+                <p>Platformumuzda en iyi <b class="b2">巴拉巴拉</b> olduğun için tebrikler!!!</p>
+            </div>
+            <!-- Sayfa 6 -->
+            <div class="pages page6" id="img6">
+                <img src="./images/more.png" alt="" class="more">
+                <img src="./images/logo.png" alt="" class="txl">
+                <img src="./images/love.png" alt="" class="love">
+                <img src="./images/logo.png" alt="" class="txr">
+                <p>2024-11-23 00:00:00 tarihinde belirlenen CP hediyesini aldın.</p>
+                <p>O andan itibaren, <b class="b2">momo</b> ile kıskanılacak bir CP oldunuz.</p>
+                <p>Şu ana kadar ilişkiniz <b class="b3">0</b> gün boyunca sıcak bir şekilde devam etti.</p>
+                <p>Sevgi yolculuğunuzun her zaman güneşle dolu olmasını ve daha güzel bölümler yazmanızı dilerim!</p>
+            </div>
+            <!-- Sayfa 7 -->
+            <div class="pages page7" id="img7">
+                <img src="./images/more.png" alt="" class="more">
+                <p>Bu yıl, sadece Molistar'da sayısız güzel anı biriktirmekle kalmadın, aynı zamanda <b class="b1">0</b> hediyeyi ışıklandırarak heyecanını ve desteğini gösterdin.</p>
+                <p>En sevdiğin hediye <b class="b2">momo</b></p>
+                <p>Bu özel hediye, sadece zevkinin eşsiz bir yansıması olmakla kalmaz, aynı zamanda diğer kullanıcılarla iletişim kurman için önemli bir köprüdür.</p>
+            </div>
+            <!-- Sayfa 8 -->
+            <div class="pages page8" id="img8">
+                <img src="./images/more.png" alt="" class="more">
+                <p>2024 yılında, değerli bir yükleme ajanı oldun ve toplamda <b class="b1">0</b> coin transfer ettin.</p>
+                <p>Geçen yılki çabaların için teşekkür ederiz.</p>
+            </div>
+            <!-- Sayfa 9 -->
+            <div class="pages page9" id="img9">
+                <p>Şimdi, 2025'e el birliğiyle ilerleyelim, kendi hikayelerimizi yazmaya devam edelim ve daha unutulmaz anılar yaratalım.</p>
+                <p>Gelecekteki her gün, birbirimizin varlığı sayesinde daha parlak olsun!</p>
+            </div>
+        `
+    }
+
+
+}

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

@@ -0,0 +1,81 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: '載入中...',
+        layerIndex2: '操作完成',
+        layerIndex3: '網絡錯誤，請退出並重新進入',
+        title: '年度報告',
+        text1: `
+          <!-- 頁面1 -->
+          <div class="pages page1" id="img1">
+            <div class="title"></div>
+            <p class="p1">
+              在廣闊的網絡世界中，你就像一顆閃亮的星星。在這裡，我們不僅看到了你的光芒，也感受到了你帶來的快樂——你是Molistar中不可或缺的一部分。
+            </p>
+            <div class="but">點擊生成</div>
+          </div>
+          <!-- 頁面2 -->
+          <div class="pages page2" id="img2">
+            <img src="./images/more.png" alt="" class="more">
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="name">名稱</div>
+            <div class="id">ID: 0</div>
+            <p><b>2024-11-23</b> 是你在Molistar的第一天。</p>
+            <p>從那天起，我們一起經歷了很多：結交新朋友，談論生活，並一起挑戰遊戲的樂趣。</p>
+            <p>每一刻都編織了一條無法分割的紐帶。</p>
+          </div>
+          <!-- 頁面3 -->
+          <div class="pages page3" id="img3">
+            <img src="./images/more.png" alt="" class="more">
+            <p>你在Molistar度過了<b>0</b>天充滿笑聲的時光。</p>
+            <p>你的積極參與讓房間充滿了活力，每次對話都那麼生動有趣，每場遊戲都充滿了歡笑。</p>
+            <p>因為有你，這個地方變得更加美麗。</p>
+          </div>
+          <!-- 頁面4 -->
+          <div class="pages page4" id="img4">
+            <img src="./images/more.png" alt="" class="more">
+            <p>在這一年的旅程中，你送出了<b class="b1">0</b>個幣，當之無愧是<b class="b2">財富播種者。</b></p>
+            <p>每一個經驗值都是你努力的見證，每一次升級都記錄了你的進步。</p>
+            <p>從今天第一次進入平台起，你的堅持。</p>
+          </div>
+          <!-- 頁面5 -->
+          <div class="pages page5" id="img5">
+            <img src="./images/more.png" alt="" class="more">
+            <p>在這一年裡，你累積了<b class="b1">0</b>點魅力經驗值。</p>
+            <p>每一點都是你努力和才華的最佳證明。</p>
+            <p>恭喜你成為我們平台上最棒的<b class="b2">巴拉巴拉</b>！！！</p>
+          </div>
+          <!-- 頁面6 -->
+          <div class="pages page6" id="img6">
+            <img src="./images/more.png" alt="" class="more">
+            <img src="./images/logo.png" alt="" class="txl">
+            <img src="./images/love.png" alt="" class="love">
+            <img src="./images/logo.png" alt="" class="txr">
+            <p>你在<b class="b1">2024-11-23 00:00:00</b>收到了指定的CP禮物。</p>
+            <p>從那一刻起，你和<b class="b2">momo</b>成為了令人羨慕的CP。</p>
+            <p>到目前為止，你們的關係已經保持了<b class="b3">0</b>天。</p>
+            <p>願你們的愛情之路永遠充滿陽光，繼續書寫更多美好的篇章！</p>
+          </div>
+          <!-- 頁面7 -->
+          <div class="pages page7" id="img7">
+            <img src="./images/more.png" alt="" class="more">
+            <p>今年，你在Molistar中不僅獲得了無數美好的回憶，還通過點亮<b class="b1">0</b>個禮物展示了你的熱情和支持。</p>
+            <p>你最喜歡的禮物是<b class="b2">momo</b></p>
+            <p>這份特殊的禮物不僅是你品味的獨特體現，還是你與其他用戶溝通的重要橋樑。</p>
+          </div>
+          <!-- 頁面8 -->
+          <div class="pages page8" id="img8">
+            <img src="./images/more.png" alt="" class="more">
+            <p>在2024年，你是我們尊敬的充值代理，並且你總共轉帳了<b class="b1">0</b>個幣。</p>
+            <p>感謝你在過去一年的努力。</p>
+          </div>
+          <!-- 頁面9 -->
+          <div class="pages page9" id="img9">
+            <p>現在，讓我們手牽手向2025年邁進，繼續書寫我們的故事，創造更多難忘的回憶。</p>
+            <p>願未來的每一天都因為彼此的存在而更加光明！</p>
+          </div>
+        `,
+    }
+
+}

view/molistar/activity/ssGuild/css/peak.css

@@ -0,0 +1,227 @@
+html,
+body {
+  width: 100%;
+  background: #440402;
+  overflow-x: hidden;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+  width: 0;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.header {
+  width: 10rem;
+  height: 7.90667rem;
+  background: url(../images/headerPeak.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 0rem;
+  box-sizing: border-box;
+  padding-top: 5.50667rem;
+}
+
+.header .tab {
+  width: 9.86667rem;
+  height: 1.30667rem;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto 0rem;
+  position: relative;
+  z-index: 2;
+  line-height: 0.49333rem;
+}
+
+.header .tab div {
+  width: 4.82667rem;
+  height: 1.6rem;
+  background: url(../images/peakTab.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FFEDBA;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  box-sizing: border-box;
+  padding-top: 0.26667rem;
+}
+
+.header .tab .act {
+  background: url(../images/peakTabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.text {
+  width: 7.72rem;
+  height: 0.8rem;
+  line-height: 0.50667rem;
+  text-align: center;
+  color: #FFEDBA;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  margin: -0.66667rem auto 0.29333rem;
+}
+
+.t {
+  width: 10rem;
+  height: 2.16rem;
+  background: url(../images/t.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.c {
+  width: 10rem;
+  height: auto;
+  background: url(../images/c.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+  padding-bottom: 0.1rem;
+}
+
+.c ul {
+  width: 100%;
+}
+
+.c ul .null {
+  width: 3.28rem;
+  height: 3.28rem;
+  background: url(../images/null.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+}
+
+.c ul .month {
+  width: 8.77333rem;
+  margin: 0 auto 0;
+}
+
+.c ul .month .box {
+  width: 100%;
+}
+
+.c ul .month .box .title {
+  width: 4.10667rem;
+  height: 1.41333rem;
+  line-height: 1.41333rem;
+  text-align: center;
+  color: #FFEDBA;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  margin: 0 auto 0.16rem;
+  background: url(../images/m_title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.c ul .month .box .leveIcon {
+  width: 5.70667rem;
+  margin: 0 auto 0.32rem;
+  display: block;
+}
+
+.c ul .month .box .guileBox {
+  width: 8rem;
+  height: auto;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  overflow: hidden;
+  margin: 0 auto 0;
+}
+
+.c ul .month .box .guileBox .sBox {
+  width: 3.86667rem;
+  height: 4.8rem;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 0.24rem;
+}
+
+.c ul .month .box .guileBox .sBox .ts {
+  position: absolute;
+  width: 3.86667rem;
+  height: 3.86667rem;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.c ul .month .box .guileBox .sBox .tx {
+  position: absolute;
+  width: 3.2rem;
+  height: 3.2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.33333rem;
+}
+
+.c ul .month .box .guileBox .sBox p {
+  display: block;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFEDBA;
+  font-size: 0.4rem;
+  font-weight: 500;
+  margin-top: 3.72rem;
+  margin-bottom: 0.22667rem;
+}
+
+.c ul .month .box .guileBox .sBox b {
+  display: block;
+  color: #FFEDBA;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  text-align: center;
+}
+
+.c ul .month .box .guileBox .sBoxNull {
+  width: 3.28rem;
+  height: 3.28rem;
+  background: url(../images/null.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.b {
+  width: 10rem;
+  height: 1.73333rem;
+  background: url(../images/bb.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.29333rem auto 0;
+}
+
+.activityText {
+  width: 100%;
+  text-align: center;
+  color: #FFEDBA;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  margin: 0.26667rem auto 0.66667rem;
+}

view/molistar/activity/ssGuild/css/peak.scss

@@ -0,0 +1,236 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #440402;
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+    }
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(593);
+    background: url(../images/headerPeak.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: 0 auto px2rem(0);
+    box-sizing: border-box;
+    padding-top: px2rem(413);
+
+    .tab {
+        width: px2rem(740);
+        height: px2rem(98);
+        text-align: center;
+        display: flex;
+        justify-content: space-between;
+        margin: 0 auto px2rem(0);
+        position: relative;
+        z-index: 2;
+        line-height: px2rem(37);
+
+        div {
+            width: px2rem(362);
+            height: px2rem(120);
+            background: url(../images/peakTab.png) no-repeat;
+            background-size: 100% 100%;
+            color: #FFEDBA;
+            font-size: px2rem(28);
+            font-weight: 600;
+            box-sizing: border-box;
+            padding-top: px2rem(20);
+        }
+
+        .act {
+            background: url(../images/peakTabAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+.text {
+    width: px2rem(579);
+    height: px2rem(60);
+    line-height: px2rem(38);
+    text-align: center;
+    color: #FFEDBA;
+    font-size: px2rem(28);
+    font-weight: 500;
+    margin: px2rem(-50) auto px2rem(22);
+}
+
+
+.t {
+    width: px2rem(750);
+    height: px2rem(162);
+    background: url(../images/t.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.c {
+    width: px2rem(750);
+    height: auto;
+    background: url(../images/c.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+    padding-bottom: 0.1rem;
+
+    ul {
+        width: 100%;
+
+        .null {
+            width: px2rem(246);
+            height: px2rem(246);
+            background: url(../images/null.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0 auto 0;
+        }
+
+        .month {
+            width: px2rem(658);
+            margin: 0 auto 0;
+
+            .box {
+                width: 100%;
+
+                .title {
+                    width: px2rem(308);
+                    height: px2rem(106);
+                    line-height: px2rem(106);
+                    text-align: center;
+                    color: #FFEDBA;
+                    font-size: px2rem(32);
+                    font-weight: 600;
+                    margin: 0 auto px2rem(12);
+                    background: url(../images/m_title.png) no-repeat;
+                    background-size: 100% 100%;
+                }
+
+                .leveIcon {
+                    width: px2rem(428);
+                    margin: 0 auto px2rem(24);
+                    display: block;
+                }
+
+                .guileBox {
+                    width: px2rem(600);
+                    height: auto;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    overflow: hidden;
+                    margin: 0 auto 0;
+
+                    .sBox {
+                        width: px2rem(290);
+                        height: px2rem(360);
+                        position: relative;
+                        overflow: hidden;
+                        margin-bottom: px2rem(18);
+
+                        .ts {
+                            position: absolute;
+                            width: px2rem(290);
+                            height: px2rem(290);
+                            left: 0;
+                            top: 0;
+                            z-index: 2;
+                        }
+
+                        .tx {
+                            position: absolute;
+                            width: px2rem(240);
+                            height: px2rem(240);
+                            left: 50%;
+                            transform: translateX(-50%);
+                            top: px2rem(25);
+                        }
+
+                        p {
+                            display: block;
+                            width: 100%;
+                            text-align: center;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            color: #FFEDBA;
+                            font-size: px2rem(30);
+                            font-weight: 500;
+                            margin-top: px2rem(279);
+                            margin-bottom: px2rem(17);
+                        }
+
+                        b {
+                            display: block;
+                            color: #FFEDBA;
+                            font-size: px2rem(28);
+                            font-weight: 400;
+                            text-align: center;
+                        }
+                    }
+
+                    .sBoxNull{
+                        width: px2rem(246);
+                        height: px2rem(246);
+                        background: url(../images/null.png) no-repeat;
+                        background-size: 100% 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.b {
+    width: px2rem(750);
+    height: px2rem(130);
+    background: url(../images/bb.png) no-repeat;
+    background-size: 100% 100%;
+    margin: px2rem(-22) auto 0;
+}
+
+
+.activityText {
+    width: 100%;
+    text-align: center;
+    color: #FFEDBA;
+    font-size: px2rem(26);
+    font-weight: 400;
+    margin: px2rem(20) auto px2rem(50);
+}
+
+.english {}
+
+.arabic {}

view/molistar/activity/ssGuild/index.html

@@ -16,104 +16,221 @@
     </div>
     <!-- 头部 -->
     <div class="header">
-        <!-- 活动时间 -->
-        <div class="actTime"><span class="text2"></span><b></b></div>
         <!-- 倒计时 -->
         <div class="time">
-            <div class="day">
+            <div class="days">
                 <b>00</b>
-                <span class="text3"></span>
+                <span class="text2"></span>
             </div>
             <div class="hour">
                 <b>00</b>
-                <span class="text4"></span>
+                <span class="text3"></span>
             </div>
             <div class="min">
                 <b>00</b>
-                <span class="text5"></span>
+                <span class="text4"></span>
             </div>
             <div class="sec">
                 <b>00</b>
-                <span class="text6"></span>
+                <span class="text5"></span>
             </div>
         </div>
-        <!-- 文字内容 -->
-        <div class="content "><div class="text7"></div>
-        </div>
-        <!-- tab切换 -->
+        <div class="peak text6"></div>
         <div class="tab">
-            <div class="act text8"></div>
-            <div class="text9"></div>
+            <div class="act text7" type="1"></div>
+            <div class="text8" type="2"></div>
+            <div class="text9" type="3"></div>
         </div>
     </div>
+    <!-- 文案展示 -->
+    <div class="top30 text10"></div>
     <!-- 页面1 -->
     <div class="page1">
-        <!-- 前三 -->
-        <div class="cloud">
-            <div class="no1">
-                <img src="./images/tsBig.png" alt="" class="ts">
-                <img src="./images/null.png" alt="" class="tx">
-                <div class="name"></div>
-                <div class="id"></div>
-                <img src="./images/SS.png" alt="" class="grade">
+        <div class="page1_in">
+            <div class="t">
+                <div class="sTab">
+                    <div class="act text11"></div>
+                    <div class="text12"></div>
+                </div>
+                <div class="top1">
+                    <img src="./images/ts1.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/SS.png" alt="" class="leve">
+                    <div class="name">名字</div>
+                    <div class="id">ID:123123</div>
+                </div>
+                <div class="top2">
+                    <img src="./images/ts2.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/SS.png" alt="" class="leve">
+                    <div class="name">名字</div>
+                    <div class="id">ID:123123</div>
+                    <div class="score">Behind:0</div>
+                </div>
+                <div class="top3">
+                    <img src="./images/ts3.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/SS.png" alt="" class="leve">
+                    <div class="name">名字</div>
+                    <div class="id">ID:123123</div>
+                    <div class="score">Behind:0</div>
+                </div>
             </div>
-            <div class="no2">
-                <img src="./images/ts.png" alt="" class="ts">
-                <img src="./images/null.png" alt="" class="tx">
-                <div class="name"></div>
-                <div class="id"></div>
-                <img src="./images/SS.png" alt="" class="grade">
+            <div class="c">
+                <ul>
+                    <li>
+                        <div class="num">04</div>
+                        <img src="./images/logo.png" alt="" class="tx">
+                        <div class="user">
+                            <p>name</p>
+                            <b>ID:0</b>
+                        </div>
+                        <div class="right">
+                            <img src="./images/SS.png" alt="" class="leve">
+                            <span>Behind:0</span>
+                        </div>
+                    </li>
+                </ul>
             </div>
-            <div class="no3">
-                <img src="./images/ts.png" alt="" class="ts">
-                <img src="./images/null.png" alt="" class="tx">
-                <div class="name"></div>
-                <div class="id"></div>
-                <img src="./images/SS.png" alt="" class="grade">
-            </div>
-        </div>
-        <!-- 非前三 -->
-        <ul>
-            <!-- <li>
+            <div class="b"></div>
+            <div class="my">
                 <div class="num">04</div>
-                <img src="./images/null.png" alt="" class="tx">
+                <img src="./images/logo.png" alt="" class="tx">
                 <div class="user">
-                    <p>虚位以待</p>
+                    <p>name</p>
                     <b>ID:0</b>
                 </div>
-                <img src="./images/SS.png" alt="" class="grade">
-            </li> -->
-        </ul>
-        <!-- 规则 -->
-        <img src="./images/page1Rule.png" alt="" class="rule img1">
-        <!-- 自己 -->
-        <div class="my">
-            <div class="num">04</div>
-            <img src="./images/null.png" alt="" class="tx">
-            <div class="user">
-                <p></p>
-                <b></b>
+                <div class="right">
+                    <img src="./images/SS.png" alt="" class="leve">
+                    <span>Behind:0</span>
+                </div>
             </div>
-            <img src="./images/SS.png" alt="" class="grade">
+        </div>
+        <div class="page2_in">
+            <div class="t">
+                <div class="sTab">
+                    <div class="text11">Ranking</div>
+                    <div class="act text12">Rewards</div>
+                </div>
+            </div>
+            <div class="c">
+                <div class="rewards"></div>
+            </div>
+            <div class="b"></div>
         </div>
     </div>
     <!-- 页面2 -->
     <div class="page2">
-        <div class="my">
-            <img src="./images/page2Ts.png" alt="" class="ts">
-            <img src="./images/null.png" alt="" class="tx">
-            <img src="./images/SS.png" alt="" class="leve">
-            <p class="p1"><span class=" text10"></span><b>名字</b></p>
-            <p class="p2"><span class=" text11"></span><b>0</b></p>
-            <p class="p3"><span class=" text12"></span><b>名字</b></p>
-            <p class="p4"><span class=" text13"></span><b>0</b></p>
-            <p class="p5"><span class=" text14"></span><b>0</b></p>
-            <p class="p6"><span class=" text15"></span><b>0</b></p>
+        <div class="t"></div>
+        <div class="c">
+            <!-- 奖励说明 -->
+            <div class="rewardsText"></div>
+            <!-- tab -->
+            <div class="sTab">
+                <div class="act text13" type="1"></div>
+                <div class="text14" type="2"></div>
+                <div class="text15" type="3"></div>
+                <div class="text16" type="4"></div>
+            </div>
+            <div class="top1">
+                <img src="./images/top11.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名字</div>
+                <div class="id">ID:123123</div>
+            </div>
+            <div class="top2">
+                <img src="./images/top22.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名字</div>
+                <div class="id">ID:123123</div>
+                <div class="score">Behind:0</div>
+            </div>
+            <div class="top3">
+                <img src="./images/top33.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名字</div>
+                <div class="id">ID:123123</div>
+                <div class="score">Behind:0</div>
+            </div>
+            <ul>
+                <li>
+                    <div class="num">04</div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="user">
+                        <p>name</p>
+                        <b>ID:0</b>
+                    </div>
+                    <div class="right">Behind:0</div>
+                </li>
+            </ul>
+            <div class="my">
+                <div class="num">04</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>name</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="right">Behind:0</div>
+            </div>
         </div>
-        <img src="./images/page2Rule.png" alt="" class="rule img2">
+        <div class="b"></div>
+    </div>
+
+    <!-- 页面3 -->
+    <div class="page3">
+        <div class="t"></div>
+        <div class="c">
+            <!-- 奖励说明 -->
+            <div class="rewardsText"></div>
+            <!-- tab -->
+            <div class="sTab">
+                <div class="">2025</div>
+            </div>
+            <div class="top1">
+                <img src="./images/top11.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名字</div>
+                <div class="id">ID:123123</div>
+            </div>
+            <div class="top2">
+                <img src="./images/top22.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名字</div>
+                <div class="id">ID:123123</div>
+                <div class="score">Behind:0</div>
+            </div>
+            <div class="top3">
+                <img src="./images/top33.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">名字</div>
+                <div class="id">ID:123123</div>
+                <div class="score">Behind:0</div>
+            </div>
+            <ul>
+                <li>
+                    <div class="num">04</div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="user">
+                        <p>name</p>
+                        <b>ID:0</b>
+                    </div>
+                    <div class="right">Behind:0</div>
+                </li>
+            </ul>
+            <div class="my">
+                <div class="num">04</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="user">
+                    <p>name</p>
+                    <b>ID:0</b>
+                </div>
+                <div class="right">Behind:0</div>
+            </div>
+        </div>
+        <div class="b"></div>
     </div>
     <!-- 免责声明 -->
-    <div class="bootomText bootomTextPage1 text16"></div>
+    <div class="activityText activityTextAct text17"></div>
 </body>
 
 </html>
@@ -127,5 +244,6 @@
 <script src="./local/en.js"></script>
 <script src="./local/zh.js"></script>
 <script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
 <script src="./js/index.js"></script>
 <script src="../../common/local/langHandler.js"></script>

view/molistar/activity/ssGuild/js/index.js

@@ -33,6 +33,9 @@ var isLock = true;
 var page = 1;
 var wealth;
 var limitWealth;
+var activityText;
+var quarter = 1;
+var rankType = 1;
 // 初始化函數
 $(function () {
     getInfoFromClient();
@@ -58,15 +61,13 @@ $(function () {
         langReplace = window.lang.replace;
         localLang = window.lang;
         translateFun();
-        getConfig();
+        ssAgencyRank();
     }, 100)
 
 })
 function translateFun() {
     var langReplace = window.lang.replace;
     var localLang = window.lang;
-    $('.page1 .rule').attr('src', langReplace(localLang.demoModule.img1));
-    $('.page2 .rule').attr('src', langReplace(localLang.demoModule.img2));
     $('.text1').text(langReplace(localLang.demoModule.text1));
     $('.text2').text(langReplace(localLang.demoModule.text2));
     $('.text3').text(langReplace(localLang.demoModule.text3));
@@ -83,93 +84,35 @@ function translateFun() {
     $('.text14').text(langReplace(localLang.demoModule.text14));
     $('.text15').text(langReplace(localLang.demoModule.text15));
     $('.text16').text(langReplace(localLang.demoModule.text16));
-    $('.img1').attr('src', langReplace(localLang.demoModule.img1));
-    $('.img2').attr('src', langReplace(localLang.demoModule.img2));
+    $('.text17').text(langReplace(localLang.demoModule.text17));
 }
 // 配置接口
-function getConfig() {
+function ssAgencyRank() {
     showLoading()
     networkRequest({
         type: 'get',
         url: urlPrefix + '/activity/h5/ssGuild/ssAgencyRank',
-        data: { uid: pubInfo.uid },
+        data: {
+            uid: pubInfo.uid,
+            quarter: rankType == 2 ? quarter : null,
+            rankType: rankType,
+        },
         success(res) {
             if (res.code === 200) {
-                // 倒计时
-                countup(res.data.monthEndTime - res.timestamp);
-                // 处理时间
-                $('.header .actTime b').text(`${res.data.startDate}-${res.data.endDate}`);
-                // 渲染排名
-                var listTo3 = res.data.rankList.slice(0, 3);
-                var notListTo3 = res.data.rankList.slice(3);
-                if (listTo3.length < 3) {
-                    let arr = new Array(3 - listTo3.length).fill({
-                        avatar: './images/null.png',
-                        guildName: langReplace(localLang.demoModule.text17),
-                        guildId: '0',
-                        markScore: null
-                    })
-                    listTo3.push(...arr)
-                }
-                // 前三
-                listTo3.forEach((res, i) => {
-                    $(`.page1 .cloud .no${i + 1} .tx`).attr('src', res.avatar);
-                    if (res.markScore == null) {
-                        $(`.page1 .cloud .no${i + 1} .grade`).hide();
-                    } else {
-                        $(`.page1 .cloud .no${i + 1} .grade`).attr('src', `./images/${res.markScore}.png`);
-                    }
-                    $(`.page1 .cloud .no${i + 1} .name`).text(res.guildName);
-                    $(`.page1 .cloud .no${i + 1} .id`).text(res.guildId == 0 ? '' : 'ID:' + res.guildId);
-                })
-                // 非前三
-                var str = '';
-                notListTo3.forEach(res => {
-                    str += `
-                        <li>
-                            <div class="num">${res.rank}</div>
-                            <img src="${res.avatar}" alt="" class="tx">
-                            <div class="user">
-                                <p>${res.guildName}</p>
-                                <b>ID:${res.guildId}</b>
-                            </div>
-                            <img style="display:${res.ssLevel == 0 ? 'none' : 'block'}" src="./images/${res.markScore}.png" alt="" class="grade">
-                        </li>
-                    `
-                })
-                $('.page1 ul').append(str);
-                // 判断是否是主播
-                if (res.data.selfRank) {
-                    // 处理自己
-                    var me = res.data.selfRank;
-                    $('.page1 .my .num').text(me.rank == 0 ? '30+' : me.rank);
-                    $('.page1 .my .tx').attr('src', me.avatar);
-                    if (me.ssLevel == 0) {
-                        $('.page1 .my .grade').hide();
-                    } else {
-                        $('.page1 .my .grade').attr('src', `./images/${me.markScore}.png`);
-                    }
-                    $('.page1 .my .user p').text(me.guildName);
-                    $('.page1 .my .user b').text('ID:' + me.guildId);
-
-                    var memberVo = res.data.memberVo;
-                    $('.page2 .my .tx').attr('src', memberVo.avatar);
-                    if (memberVo.ssLevel == 0) {
-                        $('.page2 .my .leve').hide();
-                    } else {
-                        $('.page2 .my .leve').attr('src', `./images/${memberVo.markScore}.png`);
-                    }
-                    $('.page2 .my .p1 b').text(memberVo.guildName);
-                    $('.page2 .my .p2 b').text(memberVo.guildId);
-                    $('.page2 .my .p3 b').text(memberVo.nick);
-                    $('.page2 .my .p4 b').text(memberVo.erbanNo);
-                    $('.page2 .my .p5 b').text(memberVo.diamondNum);
-                    $('.page2 .my .p6 b').text(memberVo.goldNum == 0 ? '-' : memberVo.goldNum);
+                let date = null;
+                if (browser.ios) {
+                    date = new Date(res.data.endDateTimeStr.replace(/-/g, '/'));
+                    console.log(res.data.endDateTimeStr.replace(/-/g, '/'));
                 } else {
-                    $('.page1 .my').hide();
-                    $('.header .tab').hide();
-                    $('.page1 .cloud').css('margin', '-19.2rem auto -2.6rem');
+                    date = new Date(res.data.endDateTimeStr);
                 }
+                let timestamp = date.getTime();
+                console.log(timestamp);
+
+                countup(timestamp - res.timestamp);
+                // 处理页面
+                rankType == 1 ? monthlyFun(res) : rankType == 2 ? quarterFun(res) : yearFun(res)
+
             } else {
                 toastMsg(res.message)
             }
@@ -181,12 +124,228 @@ function getConfig() {
         }
     })
 }
-// 切换tab
+// 处理第1页面
+function monthlyFun(res) {
+    // 处理前三
+    var listTo3 = res.data.rankList.slice(0, 3);
+    var notListTo3 = res.data.rankList.slice(3);
+    if (listTo3.length < 3) {
+        let arr = new Array(3 - listTo3.length).fill({
+            avatar: './images/logo.png',
+            guildName: localLang.demoModule.text19,
+            ownerErbanNo: null
+        })
+        listTo3.push(...arr)
+    }
+    console.log(listTo3);
+
+    listTo3.forEach((res, i) => {
+        $(`.page1 .page1_in .t .top${i + 1} .name`).text(res.guildName);
+        $(`.page1 .page1_in .t .top${i + 1} .tx`).attr('src', res.avatar);
+        if (res.ownerErbanNo == null) {
+            $(`.page1 .page1_in .t .top${i + 1} .id`).hide();
+            $(`.page1 .page1_in .t .top${i + 1} .score`).hide();
+            $(`.page1 .page1_in .t .top${i + 1} .leve`).hide();
+        } else {
+            $(`.page1 .page1_in .t .top${i + 1} .leve`).attr('src', `./images/${res.markScore}.png`);
+            $(`.page1 .page1_in .t .top${i + 1} .score`).text(`${localLang.demoModule.text18}:` + unitProcessingAr(res.diffNum, 1));
+            $(`.page1 .page1_in .t .top${i + 1} .id`).text('ID:' + res.ownerErbanNo);
+        }
+    })
+    // 处理非前三
+    var str = '';
+    $('.page1 .page1_in .c ul li').remove();
+    notListTo3.forEach(res => {
+        str += `
+        <li>
+            <div class="num">${res.rank}</div>
+            <img src="${res.avatar}" alt="" class="tx">
+            <div class="user">
+                <p>${res.guildName}</p>
+                <b>ID:${res.ownerErbanNo}</b>
+            </div>
+            <div class="right">
+                <img src="./images/${res.markScore}.png" alt="" class="leve">
+                <span>${localLang.demoModule.text18}:${unitProcessingAr(res.diffNum, 1)}</span>
+            </div>
+        </li>
+    `
+    })
+    $('.page1 .page1_in .c ul').append(str);
+    // 处理自己
+    if (res.data.selfRank) {
+        var my = res.data.selfRank;
+        $('.page1 .page1_in .my .num').text(my.rank == 0 ? '-' : my.rank);
+        $('.page1 .page1_in .my .tx').attr('src', my.avatar);
+        $('.page1 .page1_in .my .user p').text(my.guildName);
+        $('.page1 .page1_in .my .user b').text('ID:' + my.ownerErbanNo);
+        if (my.markScore == '-') {
+            $('.page1 .page1_in .my .right .leve').hide();
+            $('.page1 .page1_in .my .right span').css('margin-top', '0.45rem')
+        } else {
+            $('.page1 .page1_in .my .right .leve').attr('src', `./images/${my.markScore}.png`);
+        }
+        $('.page1 .page1_in .my .right span').text(`${localLang.demoModule.text18}:` + unitProcessingAr(my.diffNum, 1));
+    } else {
+        $('.page1 .page1_in .my').hide();
+    }
+}
+// 处理第2页面
+function quarterFun(res) {
+    // 处理前三
+    var listTo3 = res.data.rankList.slice(0, 3);
+    var notListTo3 = res.data.rankList.slice(3);
+    if (listTo3.length < 3) {
+        let arr = new Array(3 - listTo3.length).fill({
+            avatar: './images/logo.png',
+            guildName: localLang.demoModule.text19,
+            ownerErbanNo: null
+        })
+        listTo3.push(...arr)
+    }
+    listTo3.forEach((res, i) => {
+        $(`.page2 .c .top${i + 1} .name`).text(res.guildName);
+        $(`.page2 .c .top${i + 1} .tx`).attr('src', res.avatar);
+        if (res.ownerErbanNo == null) {
+            $(`.page2 .c .top${i + 1} .id`).hide();
+            $(`.page2 .c .top${i + 1} .score`).hide();
+            $(`.page2 .c .top${i + 1} .leve`).hide();
+        } else {
+            $(`.page2 .c .top${i + 1} .id`).show();
+            $(`.page2 .c .top${i + 1} .score`).show();
+            $(`.page2 .c .top${i + 1} .leve`).show();
+            $(`.page2 .c .top${i + 1} .leve`).attr('src', `./images/${res.markScore}.png`);
+            $(`.page2 .c .top${i + 1} .score`).text(`${localLang.demoModule.text18}:` + unitProcessingAr(res.diffNum, 1));
+            $(`.page2 .c .top${i + 1} .id`).text('ID:' + res.ownerErbanNo);
+        }
+    })
+    // 处理非前三
+    var str = '';
+    $('.page2 .c ul li').remove();
+    notListTo3.forEach(res => {
+        str += `
+                <li>
+                    <div class="num">${res.rank}</div>
+                    <img src="${res.avatar}" alt="" class="tx">
+                    <div class="user">
+                        <p>${res.guildName}</p>
+                        <b>ID:${res.ownerErbanNo}</b>
+                    </div>
+                    <div class="right">${localLang.demoModule.text18}:${unitProcessingAr(res.diffNum, 1)}</div>
+                </li>
+         `
+    })
+    $('.page2 .c ul').append(str);
+    // 处理自己
+    if (res.data.selfRank) {
+        var my = res.data.selfRank;
+        $('.page2 .c .my .num').text(my.rank == 0 ? '-' : my.rank);
+        $('.page2 .c .my .tx').attr('src', my.avatar);
+        $('.page2 .c .my .user p').text(my.guildName);
+        $('.page2 .c .my .user b').text('ID:' + my.ownerErbanNo);
+        if (my.markScore == '-') {
+            $('.page2 .c .my .right .leve').hide();
+            $('.page2 .c .my .right span').css('margin-top', '0.45rem')
+        } else {
+            $('.page2 .c .my .right .leve').attr('src', `./images/${my.markScore}.png`);
+        }
+        $('.page2 .c .my .right').text(`${localLang.demoModule.text18}:` + unitProcessingAr(my.diffNum, 1));
+    } else {
+        $('.page2 .c .my').hide();
+    }
+};
+// 处理第3页面
+function yearFun(res) {
+    // 处理前三
+    var listTo3 = res.data.rankList.slice(0, 3);
+    var notListTo3 = res.data.rankList.slice(3);
+    if (listTo3.length < 3) {
+        let arr = new Array(3 - listTo3.length).fill({
+            avatar: './images/logo.png',
+            guildName: localLang.demoModule.text19,
+            ownerErbanNo: null
+        })
+        listTo3.push(...arr)
+    }
+    listTo3.forEach((res, i) => {
+        $(`.page3 .c .top${i + 1} .name`).text(res.guildName);
+        $(`.page3 .c .top${i + 1} .tx`).attr('src', res.avatar);
+        if (res.ownerErbanNo == null) {
+            $(`.page3 .c .top${i + 1} .id`).hide();
+            $(`.page3 .c .top${i + 1} .score`).hide();
+            $(`.page3 .c .top${i + 1} .leve`).hide();
+        } else {
+            $(`.page3 .c .top${i + 1} .leve`).attr('src', `./images/${res.markScore}.png`);
+            $(`.page3 .c .top${i + 1} .score`).text(`${localLang.demoModule.text18}:` + unitProcessingAr(res.diffNum, 1));
+            $(`.page3 .c .top${i + 1} .id`).text('ID:' + res.ownerErbanNo);
+        }
+    })
+    // 处理非前三
+    var str = '';
+    $('.page3 .c ul li').remove();
+    notListTo3.forEach(res => {
+        str += `
+                <li>
+                    <div class="num">${res.rank}</div>
+                    <img src="${res.avatar}" alt="" class="tx">
+                    <div class="user">
+                        <p>${res.guildName}</p>
+                        <b>ID:${res.ownerErbanNo}</b>
+                    </div>
+                    <div class="right">${localLang.demoModule.text18}:${unitProcessingAr(res.diffNum, 1)}</div>
+                </li>
+         `
+    })
+    $('.page3 .c ul').append(str);
+    // 处理自己
+    if (res.data.selfRank) {
+        var my = res.data.selfRank;
+        $('.page3 .c .my .num').text(my.rank == 0 ? '-' : my.rank);
+        $('.page3 .c .my .tx').attr('src', my.avatar);
+        $('.page3 .c .my .user p').text(my.guildName);
+        $('.page3 .c .my .user b').text('ID:' + my.ownerErbanNo);
+        if (my.markScore == '-') {
+            $('.page3 .c .my .right .leve').hide();
+            $('.page3 .c .my .right span').css('margin-top', '0.45rem')
+        } else {
+            $('.page3 .c .my .right .leve').attr('src', `./images/${my.markScore}.png`);
+        }
+        $('.page3 .c .my .right').text(`${localLang.demoModule.text18}:` + unitProcessingAr(my.diffNum, 1));
+    } else {
+        $('.page3 .c .my').hide();
+    }
+};
+// tab切换
 $('.header .tab div').click(function () {
     var i = $(this).index() + 1;
-    $(this).addClass('act').siblings().removeClass('act')
-    $('.page1,.page2').hide();
+    rankType = $(this).attr('type')
+    $(this).addClass('act').siblings().removeClass('act');
+    $('.page1,.page2,.page3').hide();
     $(`.page${i}`).show();
+    $('.activityText').addClass('activityTextAct');
+    if (i == 1) {
+        $('.page2_in').hide();
+        $('.page1_in').show();
+    }
+    ssAgencyRank();
+})
+// 页面1tab切换
+$('.page1 .page1_in .t .sTab div,.page1 .page2_in .t .sTab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.page1_in,.page2_in').hide();
+    $(`.page${i}_in`).show();
+    if (i == 2) {
+        $('.activityText').removeClass('activityTextAct');
+    } else {
+        $('.activityText').addClass('activityTextAct');
+    }
+})
+// 页面2切换
+$('.page2 .c .sTab div').click(function () {
+    var i = $(this).index() + 1;
+    quarter = $(this).attr('type')
+    $(this).addClass('act').siblings().removeClass('act');
+    ssAgencyRank();
 })
 // 倒計時
 function countup(leftTime) {
@@ -206,12 +365,14 @@ function countup(leftTime) {
         m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
         s = getzf(Math.floor(leftTime / 1000 % 60));
         //將倒計時賦值到div中
-        $('.time .day b').text(d);
+        $('.time .days b').text(d);
         $('.time .hour b').text(h);
         $('.time .min b').text(m);
         $('.time .sec b').text(s);
     } else {
         location.reload();
+        console.log('时间到');
+
     }
     if (leftTime > 0) {
         leftTime = leftTime - 1000;
@@ -226,4 +387,8 @@ function getzf(num) {
         num = '0' + num;
     }
     return num;
-}
+}
+
+$('.header .peak').click(function () {
+    window.location.href = './peak.html';
+})

view/molistar/activity/ssGuild/js/peak.js

@@ -0,0 +1,138 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var countupTime;//倒计时容器
+var isLock = true;
+var page = 1;
+var wealth;
+var limitWealth;
+var activityText;
+var topRankType = 2;
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            window.history.back();
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getConfig();
+    }, 100)
+
+})
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.text17').html(langReplace(localLang.demoModule.text17));
+    $('.text20').html(langReplace(localLang.demoModule.text20));
+    $('.text21').html(langReplace(localLang.demoModule.text21));
+    $('.text22').html(langReplace(localLang.demoModule.text22));
+    $('.text23').html(langReplace(localLang.demoModule.text23));
+}
+// 配置接口
+function getConfig() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/ssGuild/ssTopRank',
+        data: { uid: pubInfo.uid, topRankType, },
+        success(res) {
+            if (res.code === 200) {
+                // 处理月份
+                var str = '';
+                $('.c ul li').remove();
+                res.data.forEach(res => {
+                    str += `
+                    <li class="month">
+                        <div class="box">
+                            <div class="title">${res.monthDateStr}</div>
+                            <img src="./images/ssTitle.png" alt="" class="leveIcon">
+                            <div class="guileBox">
+                                ${ssrankListFun(res.ssRankList)}
+                            </div>
+                            <img src="./images/sTitle.png" alt="" class="leveIcon">
+                            <div class="guileBox">
+                                ${ssrankListFun(res.srankList)}
+                            </div>
+                        </div>
+                    </li>
+                `
+                })
+                $('.c ul').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// ss等级
+function ssrankListFun(data) {
+    var str = '';
+    if (data.length == 0) {
+        str = `<div class="sBoxNull"></div>`;
+    } else {
+        data.forEach(res => {
+            str += `
+        <div class="sBox">
+            <img src="./images/peakTs.png" alt="" class="ts">
+            <img src="${res.avatar}" alt="" class="tx">
+            <p>${res.guildName}</p>
+            <b>ID:${res.ownerErbanNo}</b>
+        </div>
+    `
+        })
+    }
+    return str;
+}
+$('.header .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    i == 1 ? topRankType = 2 : topRankType = 1;
+    getConfig();
+    i == 1 ? $('.text').text(langReplace(localLang.demoModule.text23)) : $('.text').text(langReplace(localLang.demoModule.text24));
+})