补齐物料财富等级

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

@@ -0,0 +1,946 @@
+html,
+body {
+  width: 100%;
+  background: #2B001F;
+}
+
+.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: 14.4rem;
+  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: 4.90667rem;
+}
+
+.header .rule {
+  width: 1.46667rem;
+  height: 0.72rem;
+  line-height: 0.72rem;
+  text-indent: 0.1rem;
+  text-align: center;
+  color: #433402;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  background: url(../images/rule_icon.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0;
+  top: 6.34667rem;
+}
+
+.giftBox {
+  position: relative;
+  width: 10rem;
+  height: 8.82667rem;
+  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.05333rem;
+  text-align: center;
+  width: 7.50667rem;
+  height: 1.85333rem;
+  line-height: 2.66667rem;
+  color: #3C2800;
+  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.37333rem;
+  font-weight: 400;
+  line-height: 0.56rem;
+  margin: 2.45333rem auto 0.4rem;
+}
+
+.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.65rem;
+}
+
+.timeBox {
+  width: 9.14667rem;
+  height: 1.41333rem;
+  background: url(../images/timeBox.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.42667rem;
+  box-sizing: border-box;
+  padding: 0 1.56rem;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.timeBox div {
+  width: 1.2rem;
+  height: 1.09333rem;
+  margin-top: 0.14667rem;
+  box-sizing: border-box;
+  border: 0.02667rem solid #FFF1B2;
+  background: #700034;
+  border-radius: 0.18667rem;
+  text-align: center;
+}
+
+.timeBox div span {
+  display: block;
+  color: #FFF783;
+  font-size: 0.45333rem;
+  font-weight: 500;
+  margin: 0.13333rem auto 0.02667rem;
+}
+
+.timeBox div b {
+  display: block;
+  color: #FFF783;
+  font-size: 0.32rem;
+  font-weight: 400;
+}
+
+.page1 .top {
+  width: 10rem;
+  height: 11.2rem;
+  position: relative;
+  background: url(../images/topBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+}
+
+.page1 .top .tab {
+  width: 8.64rem;
+  height: 1.17333rem;
+  line-height: 1.17333rem;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 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: 8rem;
+  height: 5.06667rem;
+  position: relative;
+  margin: 0 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: 100%;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  top: 3.4rem;
+  left: 0;
+  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: 6.93333rem;
+  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: 100%;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  top: 2.52rem;
+  left: 0;
+  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: 6.93333rem;
+  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: 100%;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  top: 2.52rem;
+  left: 0;
+  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;
+}
+
+.page2 .top {
+  width: 10rem;
+  height: 2.16rem;
+  position: relative;
+  background: url(../images/topBg2.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto -0.2rem;
+  position: relative;
+}
+
+.page2 .top .tab {
+  width: 8.64rem;
+  height: 1.17333rem;
+  line-height: 1.17333rem;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 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: 42.21333rem;
+  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: 8.82667rem;
+  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: 0rem;
+  top: 0.09333rem;
+}
+
+.rules .rule_in .titles {
+  width: 7.50667rem;
+  height: 1.85333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.05333rem;
+  text-align: center;
+  color: #3C2800;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  line-height: 2.66667rem;
+  background: url(../images/ruleTitle.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rules .rule_in .text {
+  width: 8.22667rem;
+  height: 5.9rem;
+  overflow-y: scroll;
+  color: #FFF783;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  line-height: 0.56rem;
+  margin: 2.49333rem 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%;
+}
+
+.Turkiye .timeBox {
+  width: 10rem;
+}
+
+.Turkiye .timeBox div {
+  width: 1.6rem;
+}

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

@@ -0,0 +1,960 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #2B001F;
+}
+
+.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(1080);
+    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(368);
+    }
+
+    .rule {
+        width: px2rem(110);
+        height: px2rem(54);
+        line-height: px2rem(54);
+        text-indent: 0.1rem;
+        text-align: center;
+        color: #433402;
+        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(476);
+    }
+}
+
+.giftBox {
+    position: relative;
+    width: px2rem(750);
+    height: px2rem(662);
+    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(4);
+        text-align: center;
+        width: px2rem(563);
+        height: px2rem(139);
+        line-height: px2rem(200);
+        color: #3C2800;
+        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(28);
+        font-weight: 400;
+        line-height: px2rem(42);
+        margin: px2rem(184) auto px2rem(30);
+    }
+
+    .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.65rem;
+            }
+        }
+    }
+}
+
+.timeBox {
+    width: px2rem(686);
+    height: px2rem(106);
+    background: url(../images/timeBox.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto px2rem(32);
+    box-sizing: border-box;
+    padding: 0 px2rem(117);
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+
+    div {
+        width: px2rem(90);
+        height: px2rem(82);
+        margin-top: px2rem(11);
+        box-sizing: border-box;
+        border: px2rem(2) solid #FFF1B2;
+        background: #700034;
+        border-radius: px2rem(14);
+        text-align: center;
+
+        span {
+            display: block;
+            color: #FFF783;
+            font-size: px2rem(34);
+            font-weight: 500;
+            margin: px2rem(10) auto px2rem(2);
+        }
+
+        b {
+            display: block;
+            color: #FFF783;
+            font-size: px2rem(24);
+            font-weight: 400;
+        }
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .top {
+        width: px2rem(750);
+        height: px2rem(840);
+        position: relative;
+        background: url(../images/topBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto 0;
+
+        .tab {
+            width: px2rem(648);
+            height: px2rem(88);
+            line-height: px2rem(88);
+            text-align: center;
+            display: flex;
+            justify-content: space-between;
+            margin: 0 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(600);
+            height: px2rem(380);
+            position: relative;
+            margin: 0 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: 100%;
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                top: px2rem(255);
+                left: 0;
+                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(520);
+            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: 100%;
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                top: px2rem(189);
+                left: 0;
+                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(520);
+            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: 100%;
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                top: px2rem(189);
+                left: 0;
+                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;
+
+    .top {
+        width: px2rem(750);
+        height: px2rem(162);
+        position: relative;
+        background: url(../images/topBg2.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto -0.2rem;
+        position: relative;
+
+        .tab {
+            width: px2rem(648);
+            height: px2rem(88);
+            line-height: px2rem(88);
+            text-align: center;
+            display: flex;
+            justify-content: space-between;
+            margin: 0 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(3166);
+            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(662);
+        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: px2rem(0);
+            top: px2rem(7);
+        }
+
+        .titles {
+            width: px2rem(563);
+            height: px2rem(139);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(4);
+            text-align: center;
+            color: #3C2800;
+            font-size: px2rem(32);
+            font-weight: 600;
+            line-height: px2rem(200);
+            background: url(../images/ruleTitle.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .text {
+            width: px2rem(617);
+            height: 5.9rem;
+            overflow-y: scroll;
+            color: #FFF783;
+            font-size: px2rem(28);
+            font-weight: 400;
+            line-height: px2rem(42);
+            margin: px2rem(187) 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%;
+    }
+
+    .timeBox {
+        width: px2rem(750);
+
+        div {
+            width: 1.6rem;
+        }
+    }
+}

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

@@ -0,0 +1,205 @@
+<!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="header">
+        <div class="date"><b class="text2"></b> <span class="text22"></span></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/2024-newYear/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: "newYearDay" },
+        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/2024-newYear/local/ar.js

@@ -0,0 +1,29 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جاري التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+        text1: 'رأس السنة الجديدة',
+        text2: 'وقت الحدث:',
+        text22: '31 ديسمبر - 7 يناير',
+        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/2024-newYear/local/en.js

@@ -0,0 +1,33 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1: `New Year`,
+        text2: `Event Time:`,
+        text22: `December 31st - January 7th`,
+        text3: `Rule`,
+        text4: `New Year Gifts`,
+        text5: `A new year is about to begin, let’s send out New Year gifts to celebrate the New Year
+        together! Let’s welcome the arrival of the New Year together!`,
+        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 New Year 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/2024-newYear/local/tr.js

@@ -0,0 +1,32 @@
+langTr = {
+    demoModule: {
+        layerIndex1: 'Yükleniyor...',
+        layerIndex2: 'Başarılı',
+        layerIndex3: 'Ağ hatası',
+        text1: 'Yeni Yıl',
+        text2: 'Etkinlik Süresi:',
+        text22: '31 Aralık - 7 Ocak',
+        text3: 'Kural',
+        text4: 'Yeni Yıl Hediyeleri',
+        text5: 'Yeni bir yıl başlamak üzere, Yeni Yıl hediyeleri göndererek Yeni Yılı birlikte kutlayalım! Yeni Yılı birlikte karşılayalım!',
+        text6: 'Günler',
+        text7: 'Saatler',
+        text8: 'Dakikalar',
+        text9: 'Saniyeler',
+        text10: 'Sıralama',
+        text11: 'Ödüller',
+        text12: 'Etkinlik Apple ile ilgili değildir.',
+        text122: 'Etkinlik Google ile ilgili değildir.',
+        text133: 'Kurallar',
+        text13: `
+        <p>1. Etkinlik süresince belirlenen Yeni Yıl Hediyelerini göndererek sıralamaya katılabilirsiniz.</p>
+        <p>2. Etkinlikten sonra, sıralamadaki ilk 3 kullanıcı sayılacaktır.</p>
+        <p>3. İlk 3 kullanıcı ödüllerini alacak ve ödüller etkinlikten sonraki gün verilecektir.</p>
+        <p>4. Bu etkinliğin tüm yorum hakları platforma aittir ve Google ve Apple ile ilgisi yoktur.</p>`,
+        more: 'Daha Fazla',
+        month: 'Ay',
+        day: 'Gün',
+        waiting: 'Beklemek',
+    },
+    
+}

view/molistar/activity/2024-newYear/local/zh.js

@@ -0,0 +1,29 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+        text1: '新年',
+        text2: '活動時間:',
+        text22: '12月31日 - 1月7日',
+        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/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%;
+        }
+    }
+}