新增cp规则

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

@@ -0,0 +1,952 @@
+html,
+body {
+  width: 100%;
+  background: #37013C;
+}
+
+.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: 16.8rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.header .date {
+  width: 8.93333rem;
+  height: 0.74667rem;
+  line-height: 0.74667rem;
+  background: url(../images/time_bg.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.78667rem;
+}
+
+.header .rule {
+  width: 1.46667rem;
+  height: 0.72rem;
+  line-height: 0.72rem;
+  text-indent: 0.1rem;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  background: url(../images/rule_icon.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0;
+  top: 5.54667rem;
+}
+
+.giftBox {
+  position: relative;
+  width: 10rem;
+  height: 9.49333rem;
+  background: url(../images/giftBox.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -1.33333rem auto 0.42667rem;
+  overflow: hidden;
+}
+
+.giftBox .title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.66667rem;
+  text-align: center;
+  width: 7.50667rem;
+  height: 1.85333rem;
+  line-height: 1.66667rem;
+  color: #FFF783;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.giftBox .content {
+  width: 8.13333rem;
+  color: #FFF783;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  line-height: 0.56rem;
+  margin: 2.6rem auto 0.2rem;
+}
+
+.giftBox .gift {
+  width: 8.13333rem;
+  height: 2.66667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto 0;
+}
+
+.giftBox .gift div {
+  width: 2.66667rem;
+  height: 2.66667rem;
+  position: relative;
+  background: url(../images/sGiftBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.giftBox .gift div img {
+  width: 1.90667rem;
+  height: 1.90667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.64rem;
+}
+
+.giftBox .gift div span {
+  width: 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 600;
+  position: absolute;
+  left: 0;
+  bottom: -0.5rem;
+}
+
+.timeBox {
+  width: 6.93333rem;
+  height: 1.38667rem;
+  margin: 0 auto 0.42667rem;
+  box-sizing: border-box;
+  padding: 0 0rem;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.timeBox div {
+  width: 1.6rem;
+  height: 1.38667rem;
+  box-sizing: border-box;
+  text-align: center;
+  background: url(../images/timeBox_in.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.timeBox div span {
+  display: block;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 500;
+  margin: 0.22667rem auto 0.02667rem;
+}
+
+.timeBox div b {
+  display: block;
+  color: #FFF783;
+  font-size: 0.32rem;
+  font-weight: 400;
+}
+
+.page1 {
+  margin: -0.2rem auto 0;
+}
+
+.page1 .top {
+  width: 10rem;
+  height: 12.4rem;
+  position: relative;
+  background: url(../images/topBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  overflow: hidden;
+}
+
+.page1 .top .tab {
+  width: 8.64rem;
+  height: 1.17333rem;
+  line-height: 1.17333rem;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.73333rem auto 0.32rem;
+}
+
+.page1 .top .tab div {
+  width: 4.10667rem;
+  height: 1.17333rem;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .top .tab .act {
+  background: url(../images/actTab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .top .top1 {
+  width: 10rem;
+  height: 5.78667rem;
+  position: relative;
+  margin: 1rem auto 0;
+}
+
+.page1 .top .top1 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.page1 .top .top1 .tx {
+  width: 2.05333rem;
+  height: 2.05333rem;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.97333rem;
+}
+
+.page1 .top .top1 .name {
+  width: 35%;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  top: 3.4rem;
+  display: flex;
+  z-index: 3;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.page1 .top .top1 .name b {
+  max-width: 2.6rem;
+  text-align: right;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page1 .top .top1 .name img {
+  display: inline-block;
+  width: 1.02667rem;
+  height: 0.48rem;
+}
+
+.page1 .top .top1 .id {
+  width: 100%;
+  position: absolute;
+  top: 4rem;
+  text-align: center;
+  left: 0;
+  z-index: 3;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.page1 .top .top1 .score {
+  width: 100%;
+  height: 0.37333rem;
+  line-height: 0.37333rem;
+  position: absolute;
+  top: 4.42667rem;
+  left: 0;
+  display: flex;
+  z-index: 3;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.page1 .top .top1 .score b {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.page1 .top .top1 .score img {
+  display: inline-block;
+  width: 0.37333rem;
+  height: 0.37333rem;
+  margin-right: 0.1rem;
+}
+
+.page1 .top .top2 {
+  width: 4.29333rem;
+  height: 4.32rem;
+  position: absolute;
+  left: 0.53333rem;
+  top: 8rem;
+  margin: 0 auto 0;
+}
+
+.page1 .top .top2 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.page1 .top .top2 .tx {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.48rem;
+}
+
+.page1 .top .top2 .name {
+  width: 83%;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  top: 2.52rem;
+  display: flex;
+  z-index: 3;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.page1 .top .top2 .name b {
+  max-width: 2.6rem;
+  text-align: right;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page1 .top .top2 .name img {
+  display: inline-block;
+  width: 1.02667rem;
+  height: 0.48rem;
+}
+
+.page1 .top .top2 .id {
+  width: 100%;
+  position: absolute;
+  top: 3.04rem;
+  text-align: center;
+  left: 0;
+  z-index: 3;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.page1 .top .top2 .score {
+  width: 100%;
+  height: 0.37333rem;
+  line-height: 0.37333rem;
+  position: absolute;
+  top: 3.46667rem;
+  left: 0;
+  display: flex;
+  z-index: 3;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.page1 .top .top2 .score b {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.page1 .top .top2 .score img {
+  display: inline-block;
+  width: 0.37333rem;
+  height: 0.37333rem;
+  margin-right: 0.1rem;
+}
+
+.page1 .top .top3 {
+  width: 4.29333rem;
+  height: 4.32rem;
+  position: absolute;
+  right: 0.53333rem;
+  top: 8rem;
+  margin: 0 auto 0;
+}
+
+.page1 .top .top3 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.page1 .top .top3 .tx {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.48rem;
+}
+
+.page1 .top .top3 .name {
+  width: 83%;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  top: 2.52rem;
+  display: flex;
+  z-index: 3;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.page1 .top .top3 .name b {
+  max-width: 2.6rem;
+  text-align: right;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page1 .top .top3 .name img {
+  display: inline-block;
+  width: 1.02667rem;
+  height: 0.48rem;
+}
+
+.page1 .top .top3 .id {
+  width: 100%;
+  position: absolute;
+  top: 3.04rem;
+  text-align: center;
+  left: 0;
+  z-index: 3;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.page1 .top .top3 .score {
+  width: 100%;
+  height: 0.37333rem;
+  line-height: 0.37333rem;
+  position: absolute;
+  top: 3.46667rem;
+  left: 0;
+  display: flex;
+  z-index: 3;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+.page1 .top .top3 .score b {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.page1 .top .top3 .score img {
+  display: inline-block;
+  width: 0.37333rem;
+  height: 0.37333rem;
+  margin-right: 0.1rem;
+}
+
+.page1 .bottom {
+  width: 10rem;
+  height: 0.66667rem;
+  background: url(../images/bottomBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.2rem auto 0;
+  position: relative;
+  z-index: 2;
+}
+
+.page1 .content {
+  width: 10rem;
+  height: auto;
+  margin: 0 auto 0;
+  background: url(../images/contentBg.png) no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.page1 .content ul {
+  width: 8.8rem;
+  margin: 0.37333rem auto 0rem;
+}
+
+.page1 .content ul li {
+  width: 100%;
+  height: 1.54667rem;
+  background: linear-gradient(0deg, #9F0141, #760231);
+  border-radius: 0.24rem;
+  border: 0.04rem solid #FFF783;
+  margin-bottom: 0.32rem;
+  overflow: hidden;
+  padding: 0 0.32rem 0 0.2rem;
+  box-sizing: border-box;
+}
+
+.page1 .content ul li .num {
+  float: left;
+  width: 0.53333rem;
+  height: 100%;
+  line-height: 1.54667rem;
+  color: #FFF783;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  margin-right: 0.36rem;
+  text-align: center;
+}
+
+.page1 .content ul li .tx {
+  float: left;
+  width: 1.10667rem;
+  height: 1.10667rem;
+  border-radius: 50%;
+  border: 0.02667rem solid #FFF783;
+  display: block;
+  margin-top: 0.21333rem;
+  margin-right: 0.18667rem;
+}
+
+.page1 .content ul li .info {
+  float: left;
+  margin-top: 0.33333rem;
+}
+
+.page1 .content ul li .info p {
+  height: 0.48rem;
+  line-height: 0.48rem;
+  margin-bottom: 0.13333rem;
+}
+
+.page1 .content ul li .info p b {
+  max-width: 2rem;
+  display: inline-block;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.page1 .content ul li .info p img {
+  display: inline-block;
+  width: 1.02667rem;
+  height: 0.48rem;
+}
+
+.page1 .content ul li .info span {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  display: block;
+}
+
+.page1 .content ul li .score {
+  display: flex;
+  float: right;
+  height: 1.54667rem;
+  line-height: 1.54667rem;
+}
+
+.page1 .content ul li .score img {
+  display: inline-block;
+  width: 0.34667rem;
+  height: 0.36rem;
+  margin: 0.6rem 0.06667rem 0 0.06667rem;
+  vertical-align: middle;
+}
+
+.page1 .content ul li .score b {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+.page1 .content .more {
+  width: 1.65333rem;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  text-align: center;
+  padding: 0 0.45333rem;
+  margin: 0 auto 0.3rem;
+  color: #FFF783;
+  border: 0.02667rem solid #FFF783;
+  border-radius: 0.58667rem;
+  box-sizing: border-box;
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+.page1 .my {
+  position: fixed;
+  z-index: 9;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 10rem;
+  height: 1.73333rem;
+  background: linear-gradient(0deg, #9F0141, #760231);
+  border-radius: 0.24rem 0.24rem 0px 0px;
+  border: 0.04rem solid #FFF783;
+  box-sizing: border-box;
+  padding: 0 0.52rem 0 0.2rem;
+}
+
+.page1 .my .num {
+  float: left;
+  width: 0.53333rem;
+  height: 100%;
+  line-height: 1.73333rem;
+  color: #FFF783;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  margin-right: 0.36rem;
+  text-align: center;
+}
+
+.page1 .my .tx {
+  float: left;
+  width: 1.10667rem;
+  height: 1.10667rem;
+  border-radius: 50%;
+  border: 0.02667rem solid #FFF783;
+  display: block;
+  margin-top: 0.21333rem;
+  margin-right: 0.18667rem;
+}
+
+.page1 .my .info {
+  float: left;
+  margin-top: 0.33333rem;
+}
+
+.page1 .my .info p {
+  height: 0.48rem;
+  line-height: 0.48rem;
+  margin-bottom: 0.13333rem;
+}
+
+.page1 .my .info p b {
+  max-width: 2rem;
+  display: inline-block;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFF783;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.page1 .my .info p img {
+  display: inline-block;
+  width: 1.02667rem;
+  height: 0.48rem;
+}
+
+.page1 .my .info span {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  display: block;
+}
+
+.page1 .my .score {
+  display: flex;
+  float: right;
+  height: 1.73333rem;
+  line-height: 1.73333rem;
+}
+
+.page1 .my .score img {
+  display: inline-block;
+  width: 0.34667rem;
+  height: 0.36rem;
+  margin: 0.69333rem 0.06667rem 0 0.06667rem;
+  vertical-align: middle;
+}
+
+.page1 .my .score b {
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+.page2 {
+  display: none;
+  margin: -0.5rem auto 0;
+}
+
+.page2 .top {
+  width: 10rem;
+  height: 2.4rem;
+  position: relative;
+  background: url(../images/topBg2.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0.73333rem auto -0.2rem;
+  overflow: hidden;
+}
+
+.page2 .top .tab {
+  width: 8.64rem;
+  height: 1.17333rem;
+  line-height: 1.17333rem;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.73333rem auto 0.32rem;
+}
+
+.page2 .top .tab div {
+  width: 4.10667rem;
+  height: 1.17333rem;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 600;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .top .tab .act {
+  background: url(../images/actTab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .bottom {
+  width: 10rem;
+  height: 0.66667rem;
+  background: url(../images/bottomBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.2rem auto 0;
+}
+
+.page2 .content {
+  width: 10rem;
+  margin: 0 auto 0;
+  background: url(../images/contentBg.png) no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.page2 .content .box {
+  width: 9.06667rem;
+  height: 38.96rem;
+  background: url(../images/rewardBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0.2rem auto 0;
+  position: relative;
+}
+
+.page2 .content .box .bo {
+  position: absolute;
+  width: 0.69333rem;
+  height: 0.69333rem;
+  left: 1.88rem;
+}
+
+.page2 .content .box .bo1 {
+  top: 9.92rem;
+}
+
+.page2 .content .box .bo2 {
+  top: 23rem;
+}
+
+.page2 .content .box .bo3 {
+  top: 38.56rem;
+}
+
+.rules {
+  position: fixed;
+  z-index: 999;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+
+.rules .rule_in {
+  width: 10rem;
+  height: 9.49333rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+
+.rules .rule_in .close {
+  position: absolute;
+  width: 0.90667rem;
+  height: 0.90667rem;
+  right: 0.1rem;
+  top: 0.09333rem;
+}
+
+.rules .rule_in .titles {
+  width: 8.93333rem;
+  height: 1.85333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.66667rem;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  line-height: 1.85333rem;
+  background: url(../images/ruleTitle.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rules .rule_in .text {
+  width: 8.22667rem;
+  height: 6.2rem;
+  overflow-y: scroll;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  line-height: 0.56rem;
+  margin: 2.85333rem auto 0;
+}
+
+.rules .rule_in .text::-webkit-scrollbar {
+  display: none;
+}
+
+.bottomText {
+  width: 100%;
+  text-align: center;
+  color: #FFF783;
+  font-size: 0.32rem;
+  font-weight: 400;
+  margin: 0.66667rem auto 2.4rem;
+}
+
+.video {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.video video {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 65%;
+}
+
+.video .close {
+  width: 0.90667rem;
+  height: 0.90667rem;
+  position: absolute;
+  top: 10%;
+  right: 0.93333rem;
+  z-index: 9;
+}
+
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .page2 .content .box {
+  background: url(../images/rewardBg-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.china .header {
+  background: url(../images/header-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.china .page2 .content .box {
+  background: url(../images/rewardBg-zh.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .header {
+  background: url(../images/header-tr.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.Turkiye .page2 .content .box {
+  background: url(../images/rewardBg-tr.png) no-repeat;
+  background-size: 100% 100%;
+}

view/molistar/activity/2025-valentineDay/css/index.scss

@@ -0,0 +1,972 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #37013C;
+}
+
+
+.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(1260);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+
+    .date {
+        width: px2rem(670);
+        height: px2rem(56);
+        line-height: px2rem(56);
+        background: url(../images/time_bg.png) no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        color: #FFF783;
+        font-size: px2rem(26);
+        font-weight: 500;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(284);
+    }
+
+    .rule {
+        width: px2rem(110);
+        height: px2rem(54);
+        line-height: px2rem(54);
+        text-indent: 0.1rem;
+        text-align: center;
+        color: #FFF783;
+        font-size: px2rem(28);
+        font-weight: 500;
+        background: url(../images/rule_icon.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        right: 0;
+        top: px2rem(416);
+    }
+}
+
+.giftBox {
+    position: relative;
+    width: px2rem(750);
+    height: px2rem(712);
+    background: url(../images/giftBox.png) no-repeat;
+    background-size: 100% 100%;
+    margin: px2rem(-100) auto px2rem(32);
+    overflow: hidden;
+
+    .title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(50);
+        text-align: center;
+        width: px2rem(563);
+        height: px2rem(139);
+        line-height: 1.66667rem;
+        ;
+        color: #FFF783;
+        font-size: px2rem(32);
+        font-weight: 600;
+        background: url(../images/title.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .content {
+        width: px2rem(610);
+        color: #FFF783;
+        font-size: px2rem(26);
+        font-weight: 400;
+        line-height: px2rem(42);
+        margin: px2rem(195) auto px2rem(15);
+    }
+
+    .gift {
+        width: px2rem(610);
+        height: px2rem(200);
+        display: flex;
+        justify-content: space-between;
+        margin: 0 auto 0;
+
+        div {
+            width: px2rem(200);
+            height: px2rem(200);
+            position: relative;
+            background: url(../images/sGiftBox.png) no-repeat;
+            background-size: 100% 100%;
+
+            img {
+                width: px2rem(143);
+                height: px2rem(143);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(48);
+            }
+
+            span {
+                width: 100%;
+                text-align: center;
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 600;
+                position: absolute;
+                left: 0;
+                bottom: -0.5rem;
+            }
+        }
+    }
+}
+
+.timeBox {
+    width: px2rem(520);
+    height: px2rem(104);
+    // background: url(../images/timeBox.png) no-repeat;
+    // background-size: 100% 100%;
+    margin: 0 auto px2rem(32);
+    box-sizing: border-box;
+    padding: 0 px2rem(0);
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+
+    div {
+        width: px2rem(120);
+        height: px2rem(104);
+        // margin-top: px2rem(11);
+        box-sizing: border-box;
+        text-align: center;
+        background: url(../images/timeBox_in.png) no-repeat;
+        background-size: 100% 100%;
+
+        // border: px2rem(2) solid #FFF1B2;
+        // background: #700034;
+        // border-radius: px2rem(14);
+
+        span {
+            display: block;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 500;
+            margin: px2rem(17) auto px2rem(2);
+        }
+
+        b {
+            display: block;
+            color: #FFF783;
+            font-size: px2rem(24);
+            font-weight: 400;
+        }
+    }
+}
+
+.page1 {
+    // display: none;
+    margin: -0.2rem auto 0;
+    .top {
+        width: px2rem(750);
+        height: px2rem(930);
+        position: relative;
+        background: url(../images/topBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto 0;
+        overflow: hidden;
+
+        .tab {
+            width: px2rem(648);
+            height: px2rem(88);
+            line-height: px2rem(88);
+            text-align: center;
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(55) auto px2rem(24);
+
+            div {
+                width: px2rem(308);
+                height: px2rem(88);
+                color: #FFF783;
+                font-size: px2rem(34);
+                font-weight: 600;
+                background: url(../images/tab.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .act {
+                background: url(../images/actTab.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .top1 {
+            width: px2rem(750);
+            height: px2rem(434);
+            position: relative;
+            margin: 1rem auto 0;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(154);
+                height: px2rem(154);
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(73);
+            }
+
+            .name {
+                width: 35%;
+                left: 50%;
+                transform: translateX(-50%);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                top: px2rem(255);
+                display: flex;
+                z-index: 3;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                b {
+                    max-width: 2.6rem;
+                    text-align: right;
+                    color: #FFF783;
+                    font-size: px2rem(30);
+                    font-weight: 500;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(77);
+                    height: px2rem(36);
+                }
+            }
+
+            .id {
+                width: 100%;
+                position: absolute;
+                top: px2rem(300);
+                text-align: center;
+                left: 0;
+                z-index: 3;
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 400;
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(28);
+                line-height: px2rem(28);
+                position: absolute;
+                top: px2rem(332);
+                left: 0;
+                display: flex;
+                z-index: 3;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                b {
+                    color: #FFF783;
+                    font-size: px2rem(28);
+                    font-weight: 400;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(28);
+                    height: px2rem(28);
+                    margin-right: 0.1rem;
+                }
+            }
+        }
+
+        .top2 {
+            width: px2rem(322);
+            height: px2rem(324);
+            position: absolute;
+            left: px2rem(40);
+            top: px2rem(600);
+            margin: 0 auto 0;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(120);
+                height: px2rem(120);
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(36);
+            }
+
+            .name {
+                width: 83%;
+                left: 50%;
+                transform: translateX(-50%);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                top: px2rem(189);
+                display: flex;
+                z-index: 3;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                b {
+                    max-width: 2.6rem;
+                    text-align: right;
+                    color: #FFF783;
+                    font-size: px2rem(30);
+                    font-weight: 500;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(77);
+                    height: px2rem(36);
+                }
+            }
+
+            .id {
+                width: 100%;
+                position: absolute;
+                top: px2rem(228);
+                text-align: center;
+                left: 0;
+                z-index: 3;
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 400;
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(28);
+                line-height: px2rem(28);
+                position: absolute;
+                top: px2rem(260);
+                left: 0;
+                display: flex;
+                z-index: 3;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                b {
+                    color: #FFF783;
+                    font-size: px2rem(28);
+                    font-weight: 400;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(28);
+                    height: px2rem(28);
+                    margin-right: 0.1rem;
+                }
+            }
+        }
+
+        .top3 {
+            width: px2rem(322);
+            height: px2rem(324);
+            position: absolute;
+            right: px2rem(40);
+            top: px2rem(600);
+            margin: 0 auto 0;
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+            }
+
+            .tx {
+                width: px2rem(120);
+                height: px2rem(120);
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(36);
+            }
+
+            .name {
+                width: 83%;
+                left: 50%;
+                transform: translateX(-50%);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                top: px2rem(189);
+                display: flex;
+                z-index: 3;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                b {
+                    max-width: 2.6rem;
+                    text-align: right;
+                    color: #FFF783;
+                    font-size: px2rem(30);
+                    font-weight: 500;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(77);
+                    height: px2rem(36);
+                }
+            }
+
+            .id {
+                width: 100%;
+                position: absolute;
+                top: px2rem(228);
+                text-align: center;
+                left: 0;
+                z-index: 3;
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 400;
+            }
+
+            .score {
+                width: 100%;
+                height: px2rem(28);
+                line-height: px2rem(28);
+                position: absolute;
+                top: px2rem(260);
+                left: 0;
+                display: flex;
+                z-index: 3;
+                flex-wrap: nowrap;
+                justify-content: center;
+
+                b {
+                    color: #FFF783;
+                    font-size: px2rem(28);
+                    font-weight: 400;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(28);
+                    height: px2rem(28);
+                    margin-right: 0.1rem;
+                }
+            }
+        }
+    }
+
+    .bottom {
+        width: px2rem(750);
+        height: px2rem(50);
+        background: url(../images/bottomBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: -0.2rem auto 0;
+        position: relative;
+        z-index: 2;
+    }
+
+    .content {
+        width: px2rem(750);
+        height: auto;
+        margin: 0 auto 0;
+        background: url(../images/contentBg.png) no-repeat;
+        background-size: 100% 100%;
+        overflow: hidden;
+
+        ul {
+            width: px2rem(660);
+            margin: px2rem(28) auto px2rem(0);
+
+            li {
+                width: 100%;
+                height: px2rem(116);
+                background: linear-gradient(0deg, #9F0141, #760231);
+                border-radius: px2rem(18);
+                border: px2rem(3) solid #FFF783;
+                margin-bottom: px2rem(24);
+                overflow: hidden;
+                padding: 0 px2rem(24) 0 px2rem(15);
+                box-sizing: border-box;
+
+                .num {
+                    float: left;
+                    width: px2rem(40);
+                    height: 100%;
+                    line-height: px2rem(116);
+                    color: #FFF783;
+                    font-size: px2rem(32);
+                    font-weight: 600;
+                    margin-right: px2rem(27);
+                    text-align: center;
+                }
+
+                .tx {
+                    float: left;
+                    width: px2rem(83);
+                    height: px2rem(83);
+                    border-radius: 50%;
+                    border: px2rem(2) solid #FFF783;
+                    display: block;
+                    margin-top: px2rem(16);
+                    margin-right: px2rem(14);
+                }
+
+                .info {
+                    float: left;
+                    margin-top: px2rem(25);
+
+                    p {
+                        height: px2rem(36);
+                        line-height: px2rem(36);
+                        margin-bottom: px2rem(10);
+
+                        b {
+                            max-width: 2rem;
+                            display: inline-block;
+                            height: 100%;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            color: #FFF783;
+                            font-size: px2rem(30);
+                            font-weight: 500;
+                        }
+
+                        img {
+                            display: inline-block;
+                            width: px2rem(77);
+                            height: px2rem(36);
+                        }
+                    }
+
+                    span {
+                        color: #FFF783;
+                        font-size: px2rem(28);
+                        font-weight: 400;
+                        display: block;
+                    }
+                }
+
+                .score {
+                    display: flex;
+                    float: right;
+                    height: px2rem(116);
+                    line-height: px2rem(116);
+
+                    img {
+                        display: inline-block;
+                        width: px2rem(26);
+                        height: px2rem(27);
+                        margin: px2rem(45) px2rem(5) 0 px2rem(5);
+                        vertical-align: middle;
+                    }
+
+                    b {
+                        color: #FFF783;
+                        font-size: px2rem(28);
+                        font-weight: 400;
+                        vertical-align: middle;
+                    }
+                }
+            }
+        }
+
+        .more {
+            width: px2rem(124);
+            height: px2rem(44);
+            line-height: px2rem(44);
+            text-align: center;
+            padding: 0 px2rem(34);
+            margin: 0 auto 0.3rem;
+            color: #FFF783;
+            border: px2rem(2) solid #FFF783;
+            border-radius: px2rem(44);
+            box-sizing: border-box;
+            font-size: px2rem(24);
+            font-weight: 500;
+        }
+    }
+
+    .my {
+        position: fixed;
+        z-index: 9;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: px2rem(750);
+        height: px2rem(130);
+        background: linear-gradient(0deg, #9F0141, #760231);
+        border-radius: px2rem(18) px2rem(18) 0px 0px;
+        border: px2rem(3) solid #FFF783;
+        box-sizing: border-box;
+        padding: 0 px2rem(39) 0 px2rem(15);
+
+        .num {
+            float: left;
+            width: px2rem(40);
+            height: 100%;
+            line-height: px2rem(130);
+            color: #FFF783;
+            font-size: px2rem(32);
+            font-weight: 600;
+            margin-right: px2rem(27);
+            text-align: center;
+        }
+
+        .tx {
+            float: left;
+            width: px2rem(83);
+            height: px2rem(83);
+            border-radius: 50%;
+            border: px2rem(2) solid #FFF783;
+            display: block;
+            margin-top: px2rem(16);
+            margin-right: px2rem(14);
+        }
+
+        .info {
+            float: left;
+            margin-top: px2rem(25);
+
+            p {
+                height: px2rem(36);
+                line-height: px2rem(36);
+                margin-bottom: px2rem(10);
+
+                b {
+                    max-width: 2rem;
+                    display: inline-block;
+                    height: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color: #FFF783;
+                    font-size: px2rem(30);
+                    font-weight: 500;
+                }
+
+                img {
+                    display: inline-block;
+                    width: px2rem(77);
+                    height: px2rem(36);
+                }
+            }
+
+            span {
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 400;
+                display: block;
+            }
+        }
+
+        .score {
+            display: flex;
+            float: right;
+            height: px2rem(130);
+            line-height: px2rem(130);
+
+            img {
+                display: inline-block;
+                width: px2rem(26);
+                height: px2rem(27);
+                margin: px2rem(52) px2rem(5) 0 px2rem(5);
+                vertical-align: middle;
+            }
+
+            b {
+                color: #FFF783;
+                font-size: px2rem(28);
+                font-weight: 400;
+                vertical-align: middle;
+            }
+        }
+    }
+}
+
+.page2 {
+    display: none;
+    margin: -0.5rem auto 0;
+
+    .top {
+        width: px2rem(750);
+        height: px2rem(180);
+        position: relative;
+        background: url(../images/topBg2.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(55) auto -0.2rem;
+        overflow: hidden;
+
+        .tab {
+            width: px2rem(648);
+            height: px2rem(88);
+            line-height: px2rem(88);
+            text-align: center;
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(55) auto px2rem(24);
+
+            div {
+                width: px2rem(308);
+                height: px2rem(88);
+                color: #FFF783;
+                font-size: px2rem(34);
+                font-weight: 600;
+                background: url(../images/tab.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .act {
+                background: url(../images/actTab.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+
+    .bottom {
+        width: px2rem(750);
+        height: px2rem(50);
+        background: url(../images/bottomBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: -0.2rem auto 0;
+    }
+
+    .content {
+        width: px2rem(750);
+        margin: 0 auto 0;
+        background: url(../images/contentBg.png) no-repeat;
+        background-size: 100% 100%;
+        overflow: hidden;
+
+        .box {
+            width: px2rem(680);
+            height: px2rem(2922);
+            background: url(../images/rewardBg.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0.2rem auto 0;
+            position: relative;
+
+            .bo {
+                position: absolute;
+                width: px2rem(52);
+                height: px2rem(52);
+                left: px2rem(141);
+            }
+
+            .bo1 {
+                top: px2rem(744);
+            }
+
+            .bo2 {
+                top: px2rem(1725);
+            }
+
+            .bo3 {
+                top: px2rem(2892);
+            }
+        }
+    }
+}
+
+.rules {
+    position: fixed;
+    z-index: 999;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, .5);
+    display: none;
+
+    .rule_in {
+        width: px2rem(750);
+        height: px2rem(712);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+
+        .close {
+            position: absolute;
+            width: px2rem(68);
+            height: px2rem(68);
+            right: 0.1rem;
+            top: px2rem(7);
+        }
+
+        .titles {
+            width: px2rem(670);
+            height: px2rem(139);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(50);
+            text-align: center;
+            color: #FFF783;
+            font-size: px2rem(32);
+            font-weight: 600;
+            line-height: px2rem(139);
+            background: url(../images/ruleTitle.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .text {
+            width: px2rem(617);
+            height: 6.2rem;
+            overflow-y: scroll;
+            color: #FFF783;
+            font-size: px2rem(28);
+            font-weight: 400;
+            line-height: px2rem(42);
+            margin: px2rem(214) auto 0;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+}
+
+.bottomText {
+    width: 100%;
+    text-align: center;
+    color: #FFF783;
+    font-size: px2rem(24);
+    font-weight: 400;
+    margin: px2rem(50) auto px2rem(180);
+}
+
+.video {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    video {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 65%;
+    }
+
+    .close {
+        width: px2rem(68);
+        height: px2rem(68);
+        position: absolute;
+        top: 10%;
+        right: px2rem(70);
+        z-index: 9;
+    }
+}
+
+.arabic {
+    .header {
+        background: url(../images/header-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .page2 .content .box {
+        background: url(../images/rewardBg-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.china {
+    .header {
+        background: url(../images/header-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .page2 .content .box {
+        background: url(../images/rewardBg-zh.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.Turkiye {
+    .header {
+        background: url(../images/header-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .page2 .content .box {
+        background: url(../images/rewardBg-tr.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+}

view/molistar/activity/2025-valentineDay/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="text1"></title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 头部 -->
+    <div class="header">
+        <div class="text2 date"></div>
+        <div class="rule text3"></div>
+    </div>
+    <!-- 礼物盒子 -->
+    <div class="giftBox">
+        <div class="title text4"></div>
+        <div class="content text5"></div>
+        <div class="gift">
+            <div class="gift0">
+                <img src="./images/logo.png" alt="">
+                <span>Name</span>
+            </div>
+            <div class="gift1">
+                <img src="./images/logo.png" alt="">
+                <span>Name</span>
+            </div>
+            <div class="gift2">
+                <img src="./images/logo.png" alt="">
+                <span>Name</span>
+            </div>
+        </div>
+    </div>
+    <!-- 倒计时 -->
+    <div class="timeBox">
+        <div class="days">
+            <span>00</span>
+            <b class="text6"></b>
+        </div>
+        <div class="hours">
+            <span>00</span>
+            <b class="text7"></b>
+        </div>
+        <div class="mins">
+            <span>00</span>
+            <b class="text8"></b>
+        </div>
+        <div class="secs">
+            <span>00</span>
+            <b class="text9"></b>
+        </div>
+    </div>
+    <!-- page1 -->
+    <div class="page1">
+        <div class="top">
+            <!-- 切换 -->
+            <div class="tab">
+                <div class="act text10"></div>
+                <div class="text11"></div>
+            </div>
+            <!-- 前三 -->
+            <div class="top1">
+                <img src="./images/top1.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">
+                    <b>名字</b>
+                    <img src="" alt="" class="icon">
+                </div>
+                <div class="id">ID:0</div>
+                <div class="score">
+                    <img src="./images/box.png" alt="">
+                    <b>0K</b>
+                </div>
+            </div>
+            <div class="top2">
+                <img src="./images/top2.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">
+                    <b>名字</b>
+                    <img src="" alt="" class="icon">
+                </div>
+                <div class="id">ID:0</div>
+                <div class="score">
+                    <img src="./images/box.png" alt="">
+                    <b>0K</b>
+                </div>
+            </div>
+            <div class="top3">
+                <img src="./images/top3.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">
+                    <b>名字</b>
+                    <img src="" alt="" class="icon">
+                </div>
+                <div class="id">ID:0</div>
+                <div class="score">
+                    <img src="./images/box.png" alt="">
+                    <b>0K</b>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <ul>
+                <!-- <li>
+                    <div class="num">04</div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="info">
+                        <p>
+                            <b>名字</b>
+                            <img src="" alt="" class="icon">
+                        </p>
+                        <span>ID:1234567</span>
+                    </div>
+                    <div class="score">
+                        <img src="./images/box.png" alt="">
+                        <b>0K</b>
+                    </div>
+                </li> -->
+            </ul>
+            <div class="more">More</div>
+        </div>
+        <div class="bottom"></div>
+        <div class="my">
+            <div class="num">04</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="info">
+                <p>
+                    <b>名字</b>
+                    <img src="" alt="" class="icon">
+                </p>
+                <span>ID:1234567</span>
+            </div>
+            <div class="score">
+                <img src="./images/box.png" alt="">
+                <b>0K</b>
+            </div>
+        </div>
+    </div>
+    <!-- page2 -->
+    <div class="page2">
+        <div class="top">
+            <!-- 切换 -->
+            <div class="tab">
+                <div class="text10">Ranking</div>
+                <div class="act text11">Rewards</div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="box">
+                <!-- <img src="./images/bo.png" alt="" class="bo bo1">
+                <img src="./images/bo.png" alt="" class="bo bo2">
+                <img src="./images/bo.png" alt="" class="bo bo3"> -->
+            </div>
+        </div>
+        <div class="bottom"></div>
+    </div>
+    <div class="bottomText text12"></div>
+    <!-- 规则 -->
+    <div class="rules">
+        <div class="rule_in">
+            <img src="./images/close.png" alt="" class="close">
+            <div class="titles text133"></div>
+            <div class="text text13">
+
+            </div>
+        </div>
+    </div>
+    <!-- MP4 -->
+    <div class="video video1">
+        <video id="zjVideo1" controls>
+            <source src="./mp4/1.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video video2">
+        <video id="zjVideo2" controls>
+            <source src="./mp4/2.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video video3">
+        <video id="zjVideo3" controls>
+            <source src="./mp4/3.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </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="../../common/js/svga.min.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/2025-valentineDay/js/index.js

@@ -0,0 +1,306 @@
+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 loadedCount = 0; // 已加載的數據數量
+var pageSize = 7; // 每次加載的數據數量
+var notListTo3 = []; // 每次加載的數據數量
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getConfig();
+    }, 100)
+
+})
+// 处理SVGA
+document.addEventListener('DOMContentLoaded', function () {
+    function loadSVGA(containerId, svgaPath) {
+        var container = document.getElementById(containerId);
+        var player = new SVGA.Player(container);
+
+        var parser = new SVGA.Parser();
+        parser.load(svgaPath, function (videoItem) {
+            player.setVideoItem(videoItem);
+            player.startAnimation();
+        });
+    }
+
+    loadSVGA('ts10', './svga/100.svga');
+});
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+    $('.text2').html(langReplace(localLang.demoModule.text2));
+    // $('.text22').html(langReplace(localLang.demoModule.text22));
+    $('.text3').html(langReplace(localLang.demoModule.text3));
+    $('.text4').html(langReplace(localLang.demoModule.text4));
+    $('.text5').html(langReplace(localLang.demoModule.text5));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
+    $('.text8').html(langReplace(localLang.demoModule.text8));
+    $('.text9').html(langReplace(localLang.demoModule.text9));
+    $('.text10').html(langReplace(localLang.demoModule.text10));
+    $('.text11').html(langReplace(localLang.demoModule.text11));
+    $('.text12').html(langReplace(localLang.demoModule.text12));
+    $('.text13').html(langReplace(localLang.demoModule.text13));
+    $('.text133').html(langReplace(localLang.demoModule.text133));
+    $('.more').html(langReplace(localLang.demoModule.more));
+    if (browser.ios) {
+        $('.bottomText').text(langReplace(localLang.demoModule.text12))
+    } else {
+        $('.bottomText').text(langReplace(localLang.demoModule.text122))
+    }
+}
+// 配置接口
+function getConfig() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/template/rank',
+        data: { actKey: "valentinesDay" },
+        success(res) {
+            if (res.code === 200) {
+                // 处理日期
+                // var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
+                // var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`);
+                // $('.header .date .text22').text(`${startTime} - ${endTime}`);
+                // 处理倒计时
+                countup(res.data.endTime - res.timestamp);
+                // 处理限定礼物
+                res.data.gifts.forEach((res, i) => {
+                    $(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl);
+                    $(`.giftBox .gift .gift${i} span`).text(res.giftName);
+                })
+                // 处理榜单
+                var listTo3 = res.data.rankList.slice(0, 3);
+                notListTo3 = res.data.rankList.slice(3);
+                // 处理前三
+                if (listTo3.length < 3) {
+                    let arr = new Array(3 - listTo3.length).fill({
+                        avatar: './images/logo.png',
+                        name: langReplace(localLang.demoModule.waiting),
+                        erbanNo: null,
+                        totalNum: null
+                    })
+                    listTo3.push(...arr)
+                }
+                listTo3.forEach((res, i) => {
+                    $(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar);
+                    $(`.page1 .top .top${i + 1} .name b`).text(res.name);
+                    $(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png');
+                    $(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo);
+                    $(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2));
+                    if (res.erbanNo == null) {
+                        $(`.page1 .top .top${i + 1} .name img`).hide();
+                        $(`.page1 .top .top${i + 1} .id`).hide();
+                        $(`.page1 .top .top${i + 1} .score`).hide();
+                    }
+                })
+                // 非前三
+                loadMore();
+                // 处理自己榜单数据
+                var my = res.data.myRank;
+                $('.page1 .my .tx').attr("src", my.avatar);
+                $('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank);
+                $('.page1 .my .info p b').text(my.name);
+                $('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl);
+                $('.page1 .my .info span').text(`ID:${my.erbanNo}`);
+                $('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2));
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 加載數據函數
+function loadMore() {
+    // 計算加載範圍
+    pageSize = loadedCount == 0 ? 7 : 10;
+    const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize);
+    let str = '';
+
+    // 拼接 HTML
+    nextItems.forEach(res => {
+        str += `
+                <li>
+                    <div class="num">${res.rank}</div>
+                    <img src="${res.avatar}" alt="" class="tx">
+                    <div class="info">
+                        <p>
+                            <b>${res.name}</b>
+                            <img src="${res.userLevelVo.experUrl}" alt="" class="icon">
+                        </p>
+                        <span>ID:${res.erbanNo}</span>
+                    </div>
+                    <div class="score">
+                        <img src="./images/box.png" alt="">
+                        <b>${unitProcessingAr(res.totalNum, 2)}</b>
+                    </div>
+                </li>
+        `
+    })
+    // 將數據插入到列表中
+    $('.page1 .content ul').append(str);
+    // 更新已加載的數據數量
+    loadedCount += nextItems.length;
+    // 如果數據全部加載完成，隱藏按鈕
+    console.log(loadedCount >= notListTo3.length);
+    console.log(notListTo3.length);
+    if (loadedCount >= notListTo3.length) {
+        $('.page1 .content .more').hide();
+    }
+}
+
+// 綁定按鈕點擊事件
+$('.page1 .content .more').click(function () {
+    loadMore();
+})
+
+// 初次加載數據
+// tab切换
+$('.page1 .top .tab div,.page2 .top .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.page1,.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 1) {
+        $('.bottomText').css('margin', '0.66667rem auto 2.4rem');
+    } else {
+        $('.bottomText').css('margin', '0.66667rem auto 0.66667rem');
+    }
+})
+// 打开规则
+$('.rule').click(function () {
+    $('.rules').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.rules .rule_in .close').click(function () {
+    $('.rules').hide();
+    bodyScroolFun(false);
+})
+
+// 倒計時
+function countup(leftTime) {
+    clearTimeout(countupTime)
+    //獲取當前時間
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定義變數 d,h,m,s保存倒計時的時間
+    var d, h, m, s;
+    //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 
+    if (leftTime > 0) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //將倒計時賦值到div中
+        $('.timeBox .days span').text(d);
+        $('.timeBox .hours span').text(h);
+        $('.timeBox .mins span').text(m);
+        $('.timeBox .secs span').text(s);
+    } else {
+        getConfig();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    countupTime = setTimeout(function () {
+        countup(leftTime);
+    }, 1000);
+}
+//补0操作  
+function getzf(num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+
+// 打开mp4弹窗
+$('.page2 .content .box .bo1').click(function () {
+    var video = document.getElementById('zjVideo1');
+    video.play();
+    bodyScroolFun(true);
+    $('.video1').show();
+})
+$('.page2 .content .box .bo2').click(function () {
+    var video = document.getElementById('zjVideo2');
+    video.play();
+    bodyScroolFun(true);
+    $('.video2').show();
+})
+$('.page2 .content .box .bo3').click(function () {
+    var video = document.getElementById('zjVideo3');
+    video.play();
+    bodyScroolFun(true);
+    $('.video3').show();
+})
+// 关闭mp4弹窗
+$('.video .close').click(function () {
+    var video1 = document.getElementById('zjVideo1');
+    var video2 = document.getElementById('zjVideo2');
+    var video3 = document.getElementById('zjVideo3');
+    video1.pause();
+    video2.pause();
+    video3.pause();;
+    bodyScroolFun(false);
+    $('.video').hide();
+})

view/molistar/activity/2025-valentineDay/local/ar.js

@@ -0,0 +1,32 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جارٍ التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+        text1: `وقت الحب`,
+        text2: `وقت الفعالية: 11 فبراير - 17 فبراير`,
+        text3: `القواعد`,
+        text4: `هدايا عيد الحب`,
+        text5: `نتمنى للجميع كل التوفيق في هذا العيد المليء بالحب! لقد أنشأنا هدايا عيد حب محدودة الإصدار لجعل يوم عيد الحب أفضل. أرسل هدية عيد الحب واقضِ وقتًا ممتعًا مع من تحب!`,
+        text6: `أيام`,
+        text7: `ساعات`,
+        text8: `دقائق`,
+        text9: `ثواني`,
+        text10: `التصنيف`,
+        text11: `المكافآت`,
+        text12: `هذه الفعالية لا علاقة لها بـ Apple.`,
+        text122: `هذه الفعالية لا علاقة لها بـ Google.`,
+        text133: `القواعد`,
+        text13: `<p>1. أرسل هدايا عيد الحب المحددة خلال فترة الفعالية للمشاركة في التصنيف.</p>
+            <p>2. بعد انتهاء الفعالية، سيتم احتساب أفضل 3 مستخدمين في التصنيف.</p>
+            <p>3. سيحصل أفضل 3 مستخدمين على المكافآت، وسيتم إصدار المكافآت في اليوم التالي لانتهاء الفعالية.</p>
+            <p>4. جميع حقوق تفسير هذه الفعالية تعود إلى المنصة وليس لها أي علاقة بـ Google وApple.</p>`,
+        more: `المزيد`,
+        month: `شهر`,
+        day: `يوم`,
+        waiting: `في انتظار`,
+    }
+    
+}

view/molistar/activity/2025-valentineDay/local/en.js

@@ -0,0 +1,29 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1:`Sweet Time`,
+        text2:`Event time: February 11-February 17`,
+        text3:`Rule`,
+        text4:`Valentine's Day Gifts`,
+        text5:`Wishing everyone all the best on this holiday of love!We have created limited edition Valentine's Day Gifts to make your Valentine's Day even better. Send a Valentine's Day Gift and spend some quality time with your loved ones!`,
+        text6: `Days`,
+        text7: `Hours`,
+        text8: `Mins`,
+        text9: `Secs`,
+        text10: `Ranking`,
+        text11: `Rewards`,
+        text12: `Event has nothing to do with Apple.`,
+        text122: `Event has nothing to do with Google.`,
+        text133: `Rules`,
+        text13: `<p>1. Send the designated Valentine's Day Gifts during the event period to participate in the ranking.</p>
+        <p>2. After the event, the Top3 users on the ranking will be counted.</p>
+        <p>3. The Top3 users will receive rewards, and the rewards will be issued on the second day after the event.</p>
+        <p>4. All interpretation rights of this event belong to the platform and have nothing to do with Google and Apple.</p>`,
+        more: 'More',
+        month: 'Month',
+        day: 'Day',
+        waiting: 'Waiting',
+    },
+}

view/molistar/activity/2025-valentineDay/local/tr.js

@@ -0,0 +1,31 @@
+langTr = {
+    demoModule: {
+        layerIndex1: `Yükleniyor...`,
+        layerIndex2: `Başarılı`,
+        layerIndex3: `Ağ hatası`,
+        text1: `Tatlı Zaman`,
+        text2: `Etkinlik süresi: 11 Şubat - 17 Şubat`,
+        text3: `Kurallar`,
+        text4: `Sevgililer Günü Hediyeleri`,
+        text5: `Bu aşk dolu tatilde herkese en iyisini diliyoruz! Sevgililer Günü’nüzü daha da güzelleştirmek için sınırlı sayıda Sevgililer Günü Hediyeleri oluşturduk. Bir Sevgililer Günü Hediyesi gönderin ve sevdiklerinizle güzel zaman geçirin!`,
+        text6: `Gün`,
+        text7: `Saat`,
+        text8: `Dakika`,
+        text9: `Saniye`,
+        text10: `Sıralama`,
+        text11: `Ödüller`,
+        text12: `Bu etkinliğin Apple ile hiçbir bağlantısı yoktur.`,
+        text122: `Bu etkinliğin Google ile hiçbir bağlantısı yoktur.`,
+        text133: `Kurallar`,
+        text13: `<p>1. Etkinlik süresi boyunca belirlenen Sevgililer Günü Hediyelerini göndererek sıralamaya katılabilirsiniz.</p>
+            <p>2. Etkinlik sonunda en iyi 3 kullanıcı sıralamada belirlenecektir.</p>
+            <p>3. İlk 3 kullanıcı ödüller kazanacaktır ve ödüller etkinlikten sonraki gün dağıtılacaktır.</p>
+            <p>4. Bu etkinliğin tüm yorumlama hakları platforma aittir ve Google veya Apple ile hiçbir ilgisi yoktur.</p>`,
+        more: `Daha fazla`,
+        month: `Ay`,
+        day: `Gün`,
+        waiting: `Bekleniyor`,
+    }
+
+
+}

view/molistar/activity/2025-valentineDay/local/zh.js

@@ -0,0 +1,32 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加載中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `網絡錯誤`,
+        text1: `甜蜜時光`,
+        text2: `活動時間：2月11日-2月17日`,
+        text3: `規則`,
+        text4: `情人節禮物`,
+        text5: `祝大家在這個充滿愛的節日裡一切順利！我們特別推出限量版情人節禮物，讓您的情人節更加美好。送出情人節禮物，與摯愛共度美好時光！`,
+        text6: `天`,
+        text7: `小時`,
+        text8: `分鐘`,
+        text9: `秒`,
+        text10: `排行榜`,
+        text11: `獎勵`,
+        text12: `此活動與Apple無關。`,
+        text122: `此活動與Google無關。`,
+        text133: `規則`,
+        text13: `<p>1. 在活動期間送出指定的情人節禮物，即可參與排行榜。</p>
+            <p>2. 活動結束後，統計排行榜前3名的用戶。</p>
+            <p>3. 前3名的用戶將獲得獎勵，獎勵將於活動結束後的第二天發放。</p>
+            <p>4. 本活動的最終解釋權歸平台所有，與Google和Apple無關。</p>`,
+        more: `更多`,
+        month: `月`,
+        day: `日`,
+        waiting: `等待中`,
+    }
+
+}

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