完成定制礼物

view/molistar/activity/customizedGift/css/index.css

@@ -311,6 +311,7 @@ body {
   background: url(../images/rule.png) no-repeat;
   background-size: 100% 100%;
   text-indent: -0.2rem;
+  z-index: 2;
 }
 
 .page1 .thisWeek .top .reward {
@@ -631,6 +632,7 @@ body {
   background: url(../images/rule.png) no-repeat;
   background-size: 100% 100%;
   text-indent: -0.2rem;
+  z-index: 2;
 }
 
 .page2 .myList .top .reward {
@@ -932,6 +934,86 @@ body {
   color: #FDF565;
 }
 
+.ruleBox2 {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.ruleBox2 .rule_in {
+  width: 9.6rem;
+  height: 6.13333rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: url(../images/rule_bg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.ruleBox2 .rule_in .close {
+  width: 0.88rem;
+  height: 0.88rem;
+  position: absolute;
+  top: -0.56rem;
+  right: 0;
+}
+
+.ruleBox2 .rule_in .title {
+  width: 5.04rem;
+  height: 1.25333rem;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  text-align: center;
+  line-height: 1.25333rem;
+  color: #FDF565;
+  font-size: 0.42667rem;
+  font-weight: 600;
+}
+
+.ruleBox2 .rule_in .box {
+  width: 8rem;
+  height: 3.30667rem;
+  margin: 1.73333rem auto 0;
+  overflow-y: scroll;
+}
+
+.ruleBox2 .rule_in .box::-webkit-scrollbar {
+  display: none;
+}
+
+.ruleBox2 .rule_in .box p {
+  width: 100%;
+  line-height: 0.50667rem;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  color: #FDF565;
+}
+
+.ruleBox2 .rule_in .box img {
+  display: block;
+  width: 7.73333rem;
+  display: none;
+}
+
+.ruleBox2 .rule_in .box .img2 {
+  width: 7.73333rem;
+  margin: 0 auto;
+}
+
+.ruleBox2 .rule_in .box .img6 {
+  display: block;
+}
+
 .rewardBox {
   position: fixed;
   left: 0;
@@ -1040,6 +1122,32 @@ body {
   background-size: 100% 100%;
 }
 
+.rewardBox2 .rule_in .stabBox {
+  width: 8rem;
+  height: 0.76rem;
+  line-height: 0.76rem;
+  display: flex;
+  justify-content: space-between;
+  background: #360100;
+  border-radius: 0.76rem;
+  overflow: hidden;
+  margin: 1.65333rem auto 0.25333rem;
+}
+
+.rewardBox2 .rule_in .stabBox div {
+  width: 1.33333rem;
+  color: #FDF565;
+  font-size: 0.4rem;
+  font-weight: 400;
+  border-radius: 0.76rem;
+  text-align: center;
+}
+
+.rewardBox2 .rule_in .stabBox .act {
+  background: linear-gradient(-90deg, #FDF565, #FFAF31);
+  color: #360100;
+}
+
 .rewardBox2 .rule_in .close {
   width: 0.88rem;
   height: 0.88rem;
@@ -1066,8 +1174,8 @@ body {
 
 .rewardBox2 .rule_in .box {
   width: 9.2rem;
-  height: 8.7rem;
-  margin: 1.73333rem auto 0;
+  height: 7.7rem;
+  margin: 0rem auto 0;
   overflow-y: scroll;
 }
 
@@ -1086,20 +1194,156 @@ body {
 }
 
 .rewardBox2 .rule_in .box img {
+  width: 7.73333rem;
+  display: none;
+  margin: 0 auto;
+  display: none;
+}
+
+.rewardBox2 .rule_in .box .img6 {
+  width: 7.73333rem;
+  height: 10.24rem;
+  background: url(../images/6.png) no-repeat;
+  background-size: 100% 100%;
   display: block;
-  width: 100%;
+  margin: 0 auto;
+  position: relative;
 }
 
-.rewardBox2 .rule_in .box .img1 {
-  margin: 0 auto 0.49333rem;
+.rewardBox2 .rule_in .box .img6 .why {
+  width: 0.69333rem;
+  height: 0.69333rem;
+  position: absolute;
+  left: 4.28rem;
+  bottom: 2.32rem;
+  background: url(../images/why.png) no-repeat;
+  background-size: 100% 100%;
 }
 
-.rewardBox2 .rule_in .box .img2 {
-  width: 2.77333rem;
-  margin: 0 auto 0.46667rem;
+.rewardBox2 .rule_in .box .img6 .why span {
+  position: absolute;
+  width: 3.8rem;
+  height: 3.2rem;
+  top: 0.13333rem;
+  right: -3.6rem;
+  text-align: center;
+  color: #FDF565;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 0.24rem 0.32rem 0.29333rem 0.28rem;
+  line-height: 0.48rem;
+  box-sizing: border-box;
+  border-radius: 0.10667rem;
+  display: none;
 }
 
-.rewardBox2 .rule_in .box .img3 {
-  width: 7.65333rem;
-  margin: 0 auto 0.53333rem;
+.rewardBox2 .rule_in .box .img5 {
+  width: 7.73333rem;
+  height: 10.24rem;
+  background: url(../images/5.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.rewardBox2 .rule_in .box .img5 .why {
+  width: 0.69333rem;
+  height: 0.69333rem;
+  position: absolute;
+  left: 4.28rem;
+  bottom: 2.32rem;
+  background: url(../images/why.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rewardBox2 .rule_in .box .img5 .why span {
+  position: absolute;
+  width: 3.8rem;
+  height: 3.2rem;
+  top: 0.13333rem;
+  right: -3.6rem;
+  text-align: center;
+  color: #FDF565;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 0.24rem 0.32rem 0.29333rem 0.28rem;
+  line-height: 0.48rem;
+  box-sizing: border-box;
+  border-radius: 0.10667rem;
+  display: none;
+}
+
+.rewardBox2 .rule_in .box .img4 {
+  width: 7.73333rem;
+  height: 10.24rem;
+  background: url(../images/4.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.rewardBox2 .rule_in .box .img4 .why {
+  width: 0.69333rem;
+  height: 0.69333rem;
+  position: absolute;
+  left: 4.28rem;
+  bottom: 2.32rem;
+  background: url(../images/why.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rewardBox2 .rule_in .box .img4 .why span {
+  position: absolute;
+  width: 3.8rem;
+  height: 3.2rem;
+  top: 0.13333rem;
+  right: -3.6rem;
+  text-align: center;
+  color: #FDF565;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 0.24rem 0.32rem 0.29333rem 0.28rem;
+  line-height: 0.48rem;
+  box-sizing: border-box;
+  border-radius: 0.10667rem;
+  display: none;
+}
+
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .lastWeek .top .title {
+  font-size: 0.34667rem;
+}
+
+.arabic .page2 .myList .content ul li span {
+  text-align: left;
+}
+
+.arabic .page2 .myList .top .rule {
+  text-indent: 0.2rem;
+}
+
+.arabic .page1 .thisWeek .top .rule {
+  text-indent: 0.2rem;
+}
+
+.arabic .rewardBox2 .rule_in .box .img6 {
+  background: url(../images/6-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .rewardBox2 .rule_in .box .img5 {
+  background: url(../images/5-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .rewardBox2 .rule_in .box .img4 {
+  background: url(../images/4-ar.png) no-repeat;
+  background-size: 100% 100%;
 }

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

@@ -312,6 +312,7 @@ body {
                 background: url(../images/rule.png) no-repeat;
                 background-size: 100% 100%;
                 text-indent: -0.2rem;
+                z-index: 2;
             }
 
             .reward {
@@ -636,6 +637,7 @@ body {
                 background: url(../images/rule.png) no-repeat;
                 background-size: 100% 100%;
                 text-indent: -0.2rem;
+                z-index: 2;
             }
 
             .reward {
@@ -940,6 +942,86 @@ body {
     }
 }
 
+.ruleBox2 {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    .rule_in {
+        width: px2rem(720);
+        height: px2rem(460);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background: url(../images/rule_bg.png) no-repeat;
+        background-size: 100% 100%;
+
+        .close {
+            width: px2rem(66);
+            height: px2rem(66);
+            position: absolute;
+            top: px2rem(-42);
+            right: 0;
+        }
+
+        .title {
+            width: px2rem(378);
+            height: px2rem(94);
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(-0);
+            text-align: center;
+            line-height: px2rem(94);
+            color: #FDF565;
+            font-size: px2rem(32);
+            font-weight: 600;
+        }
+
+        .box {
+            width: px2rem(600);
+            height: px2rem(248);
+            margin: px2rem(130) auto 0;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            p {
+                width: 100%;
+                line-height: px2rem(38);
+                font-size: px2rem(28);
+                font-weight: 400;
+                color: #FDF565;
+            }
+
+            img {
+                display: block;
+                width: px2rem(580);
+                display: none;
+            }
+
+            .img2 {
+                width: px2rem(580);
+                margin: 0 auto;
+            }
+
+            .img6 {
+                display: block;
+            }
+        }
+    }
+}
+
 .rewardBox {
     position: fixed;
     left: 0;
@@ -1025,6 +1107,7 @@ body {
         }
     }
 }
+
 .rewardBox2 {
     position: fixed;
     left: 0;
@@ -1045,6 +1128,32 @@ body {
         background: url(../images/rewardBox.png) no-repeat;
         background-size: 100% 100%;
 
+        .stabBox {
+            width: px2rem(600);
+            height: px2rem(57);
+            line-height: px2rem(57);
+            display: flex;
+            justify-content: space-between;
+            background: #360100;
+            border-radius: px2rem(57);
+            overflow: hidden;
+            margin: px2rem(124) auto px2rem(19);
+
+            div {
+                width: px2rem(100);
+                color: #FDF565;
+                font-size: px2rem(30);
+                font-weight: 400;
+                border-radius: px2rem(57);
+                text-align: center;
+            }
+
+            .act {
+                background: linear-gradient(-90deg, #FDF565, #FFAF31);
+                color: #360100;
+            }
+        }
+
         .close {
             width: px2rem(66);
             height: px2rem(66);
@@ -1071,8 +1180,8 @@ body {
 
         .box {
             width: px2rem(690);
-            height: 8.7rem;
-            margin: px2rem(130) auto 0;
+            height: 7.7rem;
+            margin: px2rem(0) auto 0;
             overflow-y: scroll;
 
             &::-webkit-scrollbar {
@@ -1090,25 +1199,162 @@ body {
             }
 
             img {
+                width: px2rem(580);
+                display: none;
+                margin: 0 auto;
+                display: none;
+            }
+
+            .img6 {
+                width: px2rem(580);
+                height: px2rem(768);
+                background: url(../images/6.png) no-repeat;
+                background-size: 100% 100%;
                 display: block;
-                width: 100%;
+                margin: 0 auto;
+                position: relative;
+
+                .why {
+                    width: px2rem(52);
+                    height: px2rem(52);
+                    //justify-self: px2rem(52);
+                    position: absolute;
+                    left: px2rem(321);
+                    bottom: px2rem(174);
+                    background: url(../images/why.png) no-repeat;
+                    background-size: 100% 100%;
+
+                    span {
+                        position: absolute;
+                        width: px2rem(285);
+                        height: px2rem(240);
+                        top: px2rem(10);
+                        right: px2rem(-270);
+                        text-align: center;
+                        color: #FDF565;
+                        font-size: px2rem(26);
+                        font-weight: 400;
+                        background: rgba(0, 0, 0, .8);
+                        padding: px2rem(18) px2rem(24) px2rem(22) px2rem(21);
+                        line-height: px2rem(36);
+                        box-sizing: border-box;
+                        border-radius: px2rem(8);
+                        display: none;
+                    }
+                }
             }
 
-            .img1 {
-                margin: 0 auto px2rem(37);
+            .img5 {
+                width: px2rem(580);
+                height: px2rem(768);
+                background: url(../images/5.png) no-repeat;
+                background-size: 100% 100%;
+                margin: 0 auto;
+                position: relative;
+
+                .why {
+                    width: px2rem(52);
+                    height: px2rem(52);
+                    //justify-self: px2rem(52);
+                    position: absolute;
+                    left: px2rem(321);
+                    bottom: px2rem(174);
+                    background: url(../images/why.png) no-repeat;
+                    background-size: 100% 100%;
+
+                    span {
+                        position: absolute;
+                        width: px2rem(285);
+                        height: px2rem(240);
+                        top: px2rem(10);
+                        right: px2rem(-270);
+                        text-align: center;
+                        color: #FDF565;
+                        font-size: px2rem(26);
+                        font-weight: 400;
+                        background: rgba(0, 0, 0, .8);
+                        padding: px2rem(18) px2rem(24) px2rem(22) px2rem(21);
+                        line-height: px2rem(36);
+                        box-sizing: border-box;
+                        border-radius: px2rem(8);
+                        display: none;
+                    }
+                }
             }
 
-            .img2 {
-                width: px2rem(208);
-                margin: 0 auto px2rem(35);
-            }
+            .img4 {
+                width: px2rem(580);
+                height: px2rem(768);
+                background: url(../images/4.png) no-repeat;
+                background-size: 100% 100%;
+                margin: 0 auto;
+                position: relative;
 
-            .img3 {
-                width: px2rem(574);
-                margin: 0 auto px2rem(40);
+                .why {
+                    width: px2rem(52);
+                    height: px2rem(52);
+                    //justify-self: px2rem(52);
+                    position: absolute;
+                    left: px2rem(321);
+                    bottom: px2rem(174);
+                    background: url(../images/why.png) no-repeat;
+                    background-size: 100% 100%;
+
+                    span {
+                        position: absolute;
+                        width: px2rem(285);
+                        height: px2rem(240);
+                        top: px2rem(10);
+                        right: px2rem(-270);
+                        text-align: center;
+                        color: #FDF565;
+                        font-size: px2rem(26);
+                        font-weight: 400;
+                        background: rgba(0, 0, 0, .8);
+                        padding: px2rem(18) px2rem(24) px2rem(22) px2rem(21);
+                        line-height: px2rem(36);
+                        box-sizing: border-box;
+                        border-radius: px2rem(8);
+                        display: none;
+                    }
+                }
             }
         }
     }
 }
 
-.arabic {}
+.arabic {
+    .header {
+        background: url(../images/header-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .lastWeek .top .title {
+        font-size: px2rem(26);
+    }
+
+    .page2 .myList .content ul li span {
+        text-align: left;
+    }
+
+    .page2 .myList .top .rule {
+        text-indent: 0.2rem;
+    }
+
+    .page1 .thisWeek .top .rule {
+        text-indent: 0.2rem;
+    }
+
+    .rewardBox2 .rule_in .box .img6 {
+        background: url(../images/6-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .rewardBox2 .rule_in .box .img5 {
+        background: url(../images/5-ar.png) no-repeat;
+        background-size: 100% 100%;}
+
+    .rewardBox2 .rule_in .box .img4 {
+        background: url(../images/4-ar.png) no-repeat;
+        background-size: 100% 100%;}
+}

view/molistar/activity/customizedGift/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title class="text1">Custom Gift Competition</title>
+    <title class="text1"></title>
     <link rel="stylesheet" href="../../common/css/reset.css">
     <link rel="stylesheet" href="./css/index.css">
 </head>
@@ -18,31 +18,29 @@
     <div class="header"></div>
     <!-- 标题盒子 -->
     <div class="activityIntroduction">
-        <div class="title">Activity introduction</div>
-        <div class="box">
-            <p>Have you ever thought about sending a custom gift that expresses your feelings?</p>
-            <p>Now, the opportunity has come! Our customized gift competition allows you to upload your own customized
-                gifts and gain recognition in the competition. Looking forward to your creativity and enthusiasm!</p>
+        <div class="title text2"></div>
+        <div class="box text3">
+            
         </div>
     </div>
     <!-- 上周前三榜单 -->
     <div class="lastWeek">
         <div class="top">
-            <div class="title">Top 3 Gifts Last Week</div>
+            <div class="title text4"></div>
             <div class="top1">
                 <img src="./images/null.png" alt="" class="tx">
-                <div class="name"><b>Gift name:</b><strong></strong></div>
-                <div class="giftedTime"><b>Gifted time:</b><strong></strong></div>
+                <div class="name"><b class="text5"></b><strong></strong></div>
+                <div class="giftedTime"><b class="text6"></b><strong></strong></div>
             </div>
             <div class="top2">
                 <img src="./images/null.png" alt="" class="tx">
-                <div class="name"><b>Gift name:</b><strong></strong></div>
-                <div class="giftedTime"><b>Gifted time:</b><strong></strong></div>
+                <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
             </div>
             <div class="top3">
                 <img src="./images/null.png" alt="" class="tx">
-                <div class="name"><b>Gift name:</b><strong></strong></div>
-                <div class="giftedTime"><b>Gifted time:</b><strong></strong></div>
+                <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
             </div>
         </div>
         <div class="content">
@@ -51,53 +49,53 @@
     </div>
     <!-- tab切换 -->
     <div class="tabBox">
-        <div class="">Popular Custom Gifts</div>
-        <div class="act">Custom Gifts Supporter</div>
+        <div class="text7"></div>
+        <div class="act text8"></div>
     </div>
     <!-- 本周榜单 -->
     <div class="page1">
         <div class="thisWeek">
             <div class="top">
                 <!-- 规则 -->
-                <div class="rule">Rule</div>
+                <div class="rule text9"></div>
                 <!-- 奖励 -->
                 <div class="reward">
-                    <span>Reward</span>
+                    <span class="text10"></span>
                 </div>
                 <!-- 倒计时 -->
-                <div class="countdownText">Countdown</div>
+                <div class="countdownText text11"></div>
                 <div class="countdown">
                     <div class="day">
                         <span>0</span>
-                        <b>Day</b>
+                        <b class="text12"></b>
                     </div>
                     <div class="hours">
                         <span>0</span>
-                        <b>Hours</b>
+                        <b class="text13"></b>
                     </div>
                     <div class="mins">
                         <span>0</span>
-                        <b>Mins</b>
+                        <b class="text14"></b>
                     </div>
                     <div class="secs">
                         <span>0</span>
-                        <b>Secs</b>
+                        <b class="text15"></b>
                     </div>
                 </div>
                 <div class="top1">
                     <img src="./images/null.png" alt="" class="tx">
-                    <div class="name"><b>Gift name:</b><strong></strong></div>
-                    <div class="giftedTime"><b>Gifted time:</b><strong></strong></div>
+                    <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                    <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
                 </div>
                 <div class="top2">
                     <img src="./images/null.png" alt="" class="tx">
-                    <div class="name"><b>Gift name:</b><strong></strong></div>
-                    <div class="giftedTime"><b>Gifted time:</b><strong></strong></div>
+                    <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                    <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
                 </div>
                 <div class="top3">
                     <img src="./images/null.png" alt="" class="tx">
-                    <div class="name"><b>Gift name:</b><strong></strong></div>
-                    <div class="giftedTime"><b>Gifted time:</b><strong></strong></div>
+                    <div class="name"><b class="text5">Gift name:</b><strong></strong></div>
+                    <div class="giftedTime"><b class="text6">Gifted time:</b><strong></strong></div>
                 </div>
             </div>
             <div class="content">
@@ -120,29 +118,29 @@
         <div class="myList">
             <div class="top">
                 <!-- 规则 -->
-                <div class="rule">Rule</div>
+                <div class="rule text9">Rule</div>
                 <!-- 奖励 -->
                 <div class="reward">
-                    <span>Reward</span>
+                    <span class="text10">Reward</span>
                 </div>
                 <!-- 倒计时 -->
-                <div class="countdownText">Countdown</div>
+                <div class="countdownText text16"></div>
                 <div class="countdown">
                     <div class="day">
                         <span>0</span>
-                        <b>Day</b>
+                        <b class="text12">Day</b>
                     </div>
                     <div class="hours">
                         <span>0</span>
-                        <b>Hours</b>
+                        <b class="text13">Hours</b>
                     </div>
                     <div class="mins">
                         <span>0</span>
-                        <b>Mins</b>
+                        <b class="text14">Mins</b>
                     </div>
                     <div class="secs">
                         <span>0</span>
-                        <b>Secs</b>
+                        <b class="text15">Secs</b>
                     </div>
                 </div>
                 <div class="my">
@@ -174,32 +172,35 @@
     <!-- 规则 -->
     <div class="ruleBox">
         <div class="rule_in">
-            <div class="title">Rule</div>
+            <div class="title text9">Rule</div>
             <img src="./images/close.png" alt="" class="close">
-            <div class="box">
-                <p>1. Event time: the 1st of this month to the end of the second month(GMT+3)</p>
-                <p>2. Calculate the number of customized gifts sent during the event. The more gifts sent, the more you
-                    will get.</p>
-                <p>3. This event has nothing to do with Google and Apple</p>
+            <div class="box text17">
+                
+            </div>
+        </div>
+    </div>
+    <!-- 规则 -->
+    <div class="ruleBox2">
+        <div class="rule_in">
+            <div class="title text9">Rule</div>
+            <img src="./images/close.png" alt="" class="close">
+            <div class="box text18">
+                
             </div>
         </div>
     </div>
     <!-- 奖励 -->
     <div class="rewardBox">
         <div class="rule_in">
-            <div class="title">Reward</div>
+            <div class="title text10">Reward</div>
             <img src="./images/close.png" alt="" class="close">
             <div class="box">
-                <p>Reward 1: When the customized gift ranks first on this week’s gift list, the gift will be customized
-                    as a start page and banner.</p>
+                <p class="text19"></p>
                 <img src="./images/reward1.png" alt="" class="img1">
-                <p>Reward 2: When the customized gifts are among the top three of the week, they will be updated to the
-                    gift panel as an exclusive customized lucky gift.</p>
+                <p class="text20"></p>
                 <img src="./images/reward2.png" alt="" class="img2">
-                <p style="margin-bottom: .3rem;">Reward 3: When the customized gifts are among the top three of the
-                    week, there will be a specific area on the event page to display the corresponding gifts.</p>
-                <p>Reward 4: When the customized gifts are the top three of the week, these three gifts will have a
-                    special presence on the customized gift panel.</p>
+                <p class="text21" style="margin-bottom: .3rem;"></p>
+                <p class="text22"></p>
                 <img src="./images/reward3.png" alt="" class="img3">
             </div>
         </div>
@@ -207,7 +208,7 @@
     <!-- 奖励2 -->
     <div class="rewardBox2">
         <div class="rule_in">
-            <div class="title">Reward</div>
+            <div class="title text10">Reward</div>
             <img src="./images/close.png" alt="" class="close">
             <div class="stabBox">
                 <div>700</div>
@@ -215,20 +216,28 @@
                 <div>3500</div>
                 <div>4900</div>
                 <div>5600</div>
-                <div>7000</div>
+                <div class="act">7000</div>
             </div>
             <div class="box">
-                <p>Reward 1: When the customized gift ranks first on this week’s gift list, the gift will be customized
-                    as a start page and banner.</p>
-                <img src="./images/reward1.png" alt="" class="img1">
-                <p>Reward 2: When the customized gifts are among the top three of the week, they will be updated to the
-                    gift panel as an exclusive customized lucky gift.</p>
-                <img src="./images/reward2.png" alt="" class="img2">
-                <p style="margin-bottom: .3rem;">Reward 3: When the customized gifts are among the top three of the
-                    week, there will be a specific area on the event page to display the corresponding gifts.</p>
-                <p>Reward 4: When the customized gifts are the top three of the week, these three gifts will have a
-                    special presence on the customized gift panel.</p>
-                <img src="./images/reward3.png" alt="" class="img3">
+                <p class="text23" style="text-align: center;"></p>
+                <img src="./images/1.png" alt="" class="img1">
+                <img src="./images/2.png" alt="" class="img2">
+                <img src="./images/3.png" alt="" class="img3">
+                <div style="display: none;" class="img4 boxs">
+                    <div class="why">
+                        <span class="text24"></span>
+                    </div>
+                </div>
+                <div style="display: none;" class="img5 boxs">
+                    <div class="why">
+                        <span class="text24"></span>
+                    </div>
+                </div>
+                <div class="img6 boxs">
+                    <div class="why">
+                        <span class="text24"></span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

view/molistar/activity/customizedGift/js/index.js

@@ -62,7 +62,35 @@ $(function () {
 function translateFun() {
     var langReplace = window.lang.replace;
     var localLang = window.lang;
-    // $('.text1').text(langReplace(localLang.demoModule.text1));
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+    $('.text2').html(langReplace(localLang.demoModule.text2));
+    $('.text3').html(langReplace(localLang.demoModule.text3));
+    $('.text4').html(langReplace(localLang.demoModule.text4));
+    $('.text5').html(langReplace(localLang.demoModule.text5));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
+    $('.text8').html(langReplace(localLang.demoModule.text8));
+    $('.text9').html(langReplace(localLang.demoModule.text9));
+    $('.text10').html(langReplace(localLang.demoModule.text10));
+    $('.text11').html(langReplace(localLang.demoModule.text11));
+    $('.text12').html(langReplace(localLang.demoModule.text12));
+    $('.text13').html(langReplace(localLang.demoModule.text13));
+    $('.text14').html(langReplace(localLang.demoModule.text14));
+    $('.text15').html(langReplace(localLang.demoModule.text15));
+    $('.text16').html(langReplace(localLang.demoModule.text16));
+    $('.text17').html(langReplace(localLang.demoModule.text17));
+    $('.text18').html(langReplace(localLang.demoModule.text18));
+    $('.text19').html(langReplace(localLang.demoModule.text19));
+    $('.text20').html(langReplace(localLang.demoModule.text20));
+    $('.text21').html(langReplace(localLang.demoModule.text21));
+    $('.text22').html(langReplace(localLang.demoModule.text22));
+    $('.text23').html(langReplace(localLang.demoModule.text23));
+    $('.text24').html(langReplace(localLang.demoModule.text24));
+    $('.text25').html(langReplace(localLang.demoModule.text25));
+    $('.rewardBox .rule_in .box .img1').attr('src', langReplace(localLang.demoModule.img1));
+    $('.rewardBox2 .rule_in .box .img1').attr('src', langReplace(localLang.demoModule.img2));
+    $('.rewardBox2 .rule_in .box .img2').attr('src', langReplace(localLang.demoModule.img3));
+    $('.rewardBox2 .rule_in .box .img3').attr('src', langReplace(localLang.demoModule.img4));
 }
 // 第一Tab接口
 function rankGift() {
@@ -73,48 +101,6 @@ function rankGift() {
         data: { uid: pubInfo.uid },
         success(res) {
             if (res.code === 200) {
-                res.data = {
-                    "lastWeekTop": [
-                        {
-                            "picUrl": "https://image.pekolive.com/2233.png",
-                            "giftName": "monik",
-                            "giftNum": 43,
-                            "giftId": 2261,
-                            "rank": 1
-                        },
-                        {
-                            "picUrl": "https://image.pekolive.com/Tarekconstmsda.png",
-                            "giftName": "Tarek II",
-                            "giftNum": 4,
-                            "giftId": 2284,
-                            "rank": 2
-                        },
-                        {
-                            "giftNum": 1,
-                            "giftId": 3207,
-                            "rank": 3
-                        }
-                    ],
-                    "thisWeekTop": [
-                        {
-                            "picUrl": "https://image.pekolive.com/2233.png",
-                            "giftName": "monik",
-                            "giftNum": 43,
-                            "giftId": 2261,
-                            "rank": 1
-                        },
-                        {
-                            "picUrl": "https://image.pekolive.com/Tarekconstmsda.png",
-                            "giftName": "Tarek II",
-                            "giftNum": 4,
-                            "giftId": 2284,
-                            "rank": 2
-                        }
-                    ],
-                    "endTime": 1733086799999,
-                    "partitionId": 2
-                }
-                console.log(res.data);
                 // 处理倒计时
                 countup1(res.data.endTime - res.timestamp);
                 var listTo3 = res.data.lastWeekTop.slice(0, 3);
@@ -157,8 +143,8 @@ function rankGift() {
                             <div class="num">${res.rank}</div>
                             <img src="${res.picUrl}" alt="" class="tx">
                             <div class="giftInfo">
-                                <p>Gift name:${res.giftName}</p>
-                                <b>Gifted time:${res.giftNum}</b>
+                                <p>${langReplace(localLang.demoModule.text5)}${res.giftName}</p>
+                                <b>${langReplace(localLang.demoModule.text6)}${res.giftNum}</b>
                             </div>
                         </li>
                     `
@@ -189,8 +175,8 @@ function giftRank() {
                 // 处理自己
                 $('.page2 .myList .top .my .tx').attr('src', res.data.myRank.avatar);
                 $('.page2 .myList .top .my p').text(res.data.myRank.name);
-                $('.page2 .myList .top .my b').text('Gifted time:' + unitProcessingAr(res.data.myRank.totalNum, 1));
-                $('.page2 .myList .top .my span').text('Coins of Gifted:' + unitProcessingAr(res.data.myRank.totalGoldNum, 1));
+                $('.page2 .myList .top .my b').text(langReplace(localLang.demoModule.text5) + unitProcessingAr(res.data.myRank.totalNum, 1));
+                $('.page2 .myList .top .my span').text(langReplace(localLang.demoModule.text5) + unitProcessingAr(res.data.myRank.totalGoldNum, 1));
                 // 处理列表
                 $('.page2 .myList .content ul li').remove();
                 var str = '';
@@ -202,8 +188,8 @@ function giftRank() {
                             <img src="${res.avatar}" alt="" class="tx">
                             <span>${res.name}</span>
                             <div class="giftInfo">
-                                <p>Gifted time:${unitProcessingAr(res.totalNum, 1)}</p>
-                                <b>Coins of Gifted:${unitProcessingAr(res.totalGoldNum, 1)}</b>
+                                <p>${langReplace(localLang.demoModule.text5)}${unitProcessingAr(res.totalNum, 1)}</p>
+                                <b>${langReplace(localLang.demoModule.text25)}${unitProcessingAr(res.totalGoldNum, 1)}</b>
                             </div>
                         </li>
                     `
@@ -297,9 +283,24 @@ function getzf(num) {
     }
     return num;
 }
+// 打开规则
+$('.page2 .myList .top .rule').click(function () {
+    $('.ruleBox').show();
+    bodyScroolFun(true);
+})
 // 关闭规则
-$('.rule .rule_in .close').click(function () {
-    $('.rule').hide();
+$('.ruleBox .rule_in .close').click(function () {
+    $('.ruleBox').hide();
+    bodyScroolFun(false);
+})
+// 打开规则
+$('.page1 .thisWeek .top .rule').click(function () {
+    $('.ruleBox2').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.ruleBox2 .rule_in .close').click(function () {
+    $('.ruleBox2').hide();
     bodyScroolFun(false);
 })
 // 打开奖励
@@ -311,4 +312,28 @@ $('.page1 .thisWeek .top .reward').click(function () {
 $('.rewardBox .rule_in .close').click(function () {
     $('.rewardBox').hide();
     bodyScroolFun(false);
+})
+// 打开奖励
+$('.page2 .myList .top .reward').click(function () {
+    $('.rewardBox2').show();
+    bodyScroolFun(true);
+})
+// 关闭奖励
+$('.rewardBox2 .rule_in .close').click(function () {
+    $('.rewardBox2').hide();
+    $('.rewardBox2 .rule_in .box .img6 .why span,.rewardBox2 .rule_in .box .img5 .why span,.rewardBox2 .rule_in .box .img4 .why span').hide();
+    bodyScroolFun(false);
+})
+
+// 奖励tab切换
+$('.rewardBox2 .rule_in .stabBox div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass();
+    $('.rewardBox2 .rule_in .box img').hide();
+    $('.rewardBox2 .rule_in .box .boxs').hide();
+    $(`.rewardBox2 .rule_in .box .img${i}`).css('display', 'block');
+})
+$('.rewardBox2 .rule_in .box .img6 .why,.rewardBox2 .rule_in .box .img5 .why,.rewardBox2 .rule_in .box .img4 .why').click(function () {
+    $('.rewardBox2 .rule_in .box .img6 .why span,.rewardBox2 .rule_in .box .img5 .why span,.rewardBox2 .rule_in .box .img4 .why span').show();
+    return
 })

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

@@ -5,6 +5,39 @@ langAr = {
         layerIndex1: `جار التحميل...`,
         layerIndex2: `نجاح`,
         layerIndex3: `خطأ في الشبكة`,
-        
+        text1: `مسابقة الهدايا المخصصة`,
+        text2: `مقدمة النشاط`,
+        text3: `<p>هل فكرت يومًا في إرسال هدية مخصصة تعبر عن مشاعرك؟</p>
+<p>الآن، الفرصة قد جاءت! مسابقتنا للهدايا المخصصة تتيح لك تحميل هداياك المخصصة والحصول على التقدير في المسابقة. نتطلع إلى إبداعك وحماسك!</p>`,
+        text4: `أفضل 3 هدايا الأسبوع الماضي`,
+        text5: `اسم الهدية:`,
+        text6: `وقت الإهداء:`,
+        text7: `الهدايا المخصصة الشائعة`,
+        text8: `داعمي الهدايا المخصصة`,
+        text9: `القواعد`,
+        text10: `المكافأة`,
+        text11: `العد التنازلي`,
+        text12: `يوم`,
+        text13: `ساعة`,
+        text14: `دقيقة`,
+        text15: `ثانية`,
+        text16: `العد التنازلي`,
+        text17: `<p>1. وقت النشاط: من اليوم الأول من هذا الشهر إلى نهاية الشهر الثاني (GMT+3)</p>
+<p>2. احتساب عدد الهدايا المخصصة المرسلة خلال الحدث. كلما زادت الهدايا المرسلة، زادت المكافآت التي ستحصل عليها.</p>
+<p>3. هذا الحدث لا علاقة له بـ Google أو Apple</p>`,
+        text18: `<p>1. وقت بدء الحدث: من الساعة 00:00 كل يوم اثنين إلى الساعة 23:59 كل يوم أحد (GMT+3)</p>
+<p>2. أفضل 3 هدايا مخصصة شائعة ستفوز بجوائز سخية.</p>
+<p>3. هذا الحدث لا علاقة له بـ Google أو Apple</p>`,
+        text19: `المكافأة 1: عندما تحتل الهدية المخصصة المرتبة الأولى في قائمة هدايا هذا الأسبوع، سيتم تخصيص الهدية كصفحة بداية وبانر.`,
+        text20: `المكافأة 2: عندما تكون الهدايا المخصصة ضمن المراكز الثلاثة الأولى لهذا الأسبوع، سيتم تحديثها في لوحة الهدايا كهدية حصرية مخصصة.`,
+        text21: `المكافأة 3: عندما تكون الهدايا المخصصة ضمن المراكز الثلاثة الأولى لهذا الأسبوع، سيكون هناك منطقة مخصصة في صفحة الحدث لعرض الهدايا المقابلة.`,
+        text22: `المكافأة 4: عندما تكون الهدايا المخصصة ضمن المراكز الثلاثة الأولى لهذا الأسبوع، ستحظى هذه الهدايا الثلاثة بظهور خاص على لوحة الهدايا المخصصة.`,
+        text23: `خلال الحدث، إذا وصل عدد الهدايا المخصصة المرسلة إلى 7000، يمكنك الحصول على المكافآت التالية!`,
+        text24: `يرجى الاتصال بخدمة العملاء لدينا، وتحميل فيديو سيارة مدته 10 ثوانٍ، وتخصيص سيارتك الخاصة.`,
+        text25: `عدد عملات الهدايا:`,
+        img1: `./images/reward1-ar.png`,
+        img2: `./images/1-ar.png`,
+        img3: `./images/2-ar.png`,
+        img4: `./images/3-ar.png`,
     }
 }

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

@@ -3,5 +3,53 @@ langEn = {
         layerIndex1: `Loading...`,
         layerIndex2: `Success`,
         layerIndex3: `Network error`,
+        text1: `Custom Gift Competition`,
+        text2: `Activity introduction`,
+        text3: `<p>Have you ever thought about sending a custom gift that expresses your feelings?</p>
+        <p>Now, the opportunity has come! Our customized gift competition allows you to upload your own customized
+            gifts and gain recognition in the competition. Looking forward to your creativity and enthusiasm!</p>`,
+        text4: `Top 3 Gifts Last Week`,
+        text5: `Gift name:`,
+        text6: `Gifted time:`,
+        text7: `Popular Custom Gifts`,
+        text8: `Custom Gifts Supporter`,
+        text9: `Rule`,
+        text10: `Reward`,
+        text11: `Countdown`,
+        text12: `Day`,
+        text13: `Hours`,
+        text14: `Mins`,
+        text15: `Secs`,
+        text16: `Countdown`,
+        text17: `<p>1. Event time: the 1st of this month to the end of the second month(GMT+3)</p>
+        <p>2. Calculate the number of customized gifts sent during the event. The more gifts sent, the more you
+            will get.</p>
+        <p>3. This event has nothing to do with Google and Apple</p>`,
+        text18: `<p>1 Event start time: 00:00 every Monday - 23:59 every Sunday (GMT+3)</p>
+        <p>2. The Top3 popular customized gifts will get generous gifts.</p>
+        <p>3 This event has nothing to do with Google and Apple</p>`,
+        text19: `Reward 1: When the customized gift ranks first on this week’s gift list, the gift will
+        be customized
+        as a start page and banner.`,
+        text20: `Reward 2: When the customized gifts are among the top three of the week, they will be
+        updated to the
+        gift panel as an exclusive customized lucky gift.`,
+        text21: `Reward 3: When the customized gifts are among the top
+        three of the
+        week, there will be a specific area on the event page to display the corresponding gifts.`,
+        text22: `Reward 4: When the customized gifts are the top three of the week, these three gifts
+        will have a
+        special presence on the customized gift panel.`,
+        text23: `During the event, if the number of customized gifts sent
+        in the gift
+        times reaches 7000, you can get the following rewards!`,
+        text24: `Please contact our customer service, upload a 10-second car video, and
+        customize your own
+        car.`,
+        text25: `Coins of Gifted:`,
+        img1: `./images/reward1.png`,
+        img2: `./images/1.png`,
+        img3: `./images/2.png`,
+        img4: `./images/3.png`,
     }
 }

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

@@ -5,5 +5,39 @@ langZh = {
         layerIndex1: `加载中...`,
         layerIndex2: `成功`,
         layerIndex3: `网络错误`,
+        text1: `客製禮物競賽`,
+        text2: `活動介紹`,
+        text3: `<p>您是否曾想過送出一份能表達您情感的客製禮物？</p>
+<p>現在，機會來了！我們的客製禮物競賽允許您上傳自己的客製禮物，並在競賽中獲得認可。期待您的創意和熱情！</p>`,
+        text4: `上週前三名禮物`,
+        text5: `禮物名稱：`,
+        text6: `送出時間：`,
+        text7: `熱門客製禮物`,
+        text8: `客製禮物支持者`,
+        text9: `規則`,
+        text10: `獎勵`,
+        text11: `倒計時`,
+        text12: `天`,
+        text13: `小時`,
+        text14: `分鐘`,
+        text15: `秒`,
+        text16: `倒計時`,
+        text17: `<p>1. 活動時間：本月1日至第二個月月底（GMT+3）</p>
+<p>2. 計算活動期間送出的客製禮物數量。送出的禮物越多，獲得的獎勵越多。</p>
+<p>3. 此活動與 Google 和 Apple 無關</p>`,
+        text18: `<p>1. 活動開始時間：每週一 00:00 - 每週日 23:59（GMT+3）</p>
+<p>2. 最受歡迎的前三名客製禮物將獲得豐厚禮品。</p>
+<p>3. 此活動與 Google 和 Apple 無關</p>`,
+        text19: `獎勵1：當客製禮物在本週的禮物榜上排名第一時，該禮物將被客製為起始頁面和橫幅。`,
+        text20: `獎勵2：當客製禮物進入本週前三名時，將被更新到禮物面板，作為專屬的客製幸運禮物。`,
+        text21: `獎勵3：當客製禮物進入本週前三名時，活動頁面上將有專屬區域展示相應禮物。`,
+        text22: `獎勵4：當客製禮物為本週前三名時，這三份禮物將在客製禮物面板上有特別展示。`,
+        text23: `活動期間，如果客製禮物的送出次數達到7000次，您將獲得以下獎勵！`,
+        text24: `請聯繫我們的客服，並上傳一段10秒的汽車影片，客製化您的專屬汽車。`,
+        text25: `禮物的硬幣數：`,
+        img1: `./images/reward1.png`,
+        img2: `./images/1.png`,
+        img3: `./images/2.png`,
+        img4: `./images/3.png`,
     }
 }