调整刷新位置

view/peko/activity/2023-halloween/css/index.css

@@ -102,7 +102,7 @@ body::-webkit-scrollbar {
 
 .giftBox {
   width: 9.2rem;
-  height: 5.96rem;
+  height: 6.49333rem;
   background: url(../images/giftBox.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0.06667rem;
@@ -111,8 +111,8 @@ body::-webkit-scrollbar {
 }
 
 .giftBox .swiper {
-  width: 6.56rem;
-  height: 4rem;
+  width: 8.02667rem;
+  height: 4.85333rem;
   margin: 1.48rem auto 0;
 }
 

view/peko/activity/2023-halloween/css/index.scss

@@ -110,7 +110,7 @@ body {
 
 .giftBox {
     width: px2rem(690);
-    height: px2rem(447);
+    height: px2rem(487);
     background: url(../images/giftBox.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto px2rem(5);
@@ -118,8 +118,8 @@ body {
     overflow: hidden;
 
     .swiper {
-        width: px2rem(492);
-        height: px2rem(300);
+        width: px2rem(602);
+        height: px2rem(364);
         margin: px2rem(111) auto 0;
     }
 }

view/peko/activity/2023-ruffian/css/index.css

@@ -0,0 +1,553 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #EBC8FA 0%, #FCB0EB 99%);
+}
+
+.rabbit {
+  z-index: 999;
+}
+
+.back {
+  position: fixed;
+  top: 0.93333rem;
+  left: 0.45333rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.header {
+  width: 10rem;
+  height: 10.6rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+  z-index: 2;
+}
+
+.header .giftBox {
+  width: 8.82667rem;
+  height: 3.2rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.97333rem;
+}
+
+.header .tab {
+  width: 6.4rem;
+  height: 1.10667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 9.52rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .tab div {
+  width: 2.82667rem;
+  height: 1.10667rem;
+  line-height: 1.10667rem;
+  color: #F1E8F6;
+  font-size: 0.37333rem;
+  text-align: center;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100%, 100%;
+}
+
+.header .tab .active {
+  background: url(../images/tab_active.png) no-repeat;
+  background-size: 100%, 100%;
+}
+
+.header .rule_iaon {
+  width: 1.6rem;
+  height: 0.74667rem;
+  line-height: 0.62667rem;
+  text-align: center;
+  text-indent: 15px;
+  color: #fff;
+  font-size: 0.24rem;
+  position: absolute;
+  right: 0rem;
+  top: 5.33333rem;
+  background: url(../images/rule_icon.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .activity1 {
+  width: 10rem;
+  height: 11.89333rem;
+  background: url(../images/activity1Bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.57333rem auto 0.12rem;
+  position: relative;
+}
+
+.page1 .activity1 div {
+  position: absolute;
+  right: 1rem;
+  width: 2rem;
+  height: 0.81333rem;
+  line-height: 0.64rem;
+  text-align: center;
+  font-size: 0.28rem;
+  color: #E7FEFF;
+  background: url(../images/lqOut.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .activity1 .but1 {
+  top: 3.01333rem;
+}
+
+.page1 .activity1 .but2 {
+  top: 5.36rem;
+}
+
+.page1 .activity1 .but3 {
+  top: 7.72rem;
+}
+
+.page1 .activity1 .but4 {
+  top: 10.06667rem;
+}
+
+.page1 .activity1 .out {
+  background: url(../images/lq.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .activity2 {
+  width: 10rem;
+  height: 17.8rem;
+  margin: 0 auto 0;
+  display: block;
+}
+
+.page2 {
+  display: none;
+}
+
+.page2 .listTab {
+  width: 9.2rem;
+  height: 1.22667rem;
+  margin: 0.4rem auto 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.page2 .listTab div {
+  width: 4.6rem;
+  height: 100%;
+  text-align: center;
+  color: #F1E8F6;
+  font-size: 0.32rem;
+  line-height: 1.41333rem;
+  background: url(../images/listTab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listTab .active {
+  font-size: 0.4rem;
+  line-height: 1.22667rem;
+  background: url(../images/listTabActive.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listBg {
+  width: 9.2rem;
+  min-height: 17rem;
+  margin: 0 auto 0.5rem;
+  background: linear-gradient(0deg, #B483D7 0%, #AD61FA 48%, #CB80FB 100%);
+  border-radius: 0 0 0.26667rem 0.26667rem;
+  overflow: hidden;
+}
+
+.page2 .listBg .dayTab {
+  width: 7.53333rem;
+  height: 0.88rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.58667rem auto 0.36rem;
+}
+
+.page2 .listBg .dayTab div {
+  width: 2.22667rem;
+  height: 0.88rem;
+  line-height: 0.90667rem;
+  text-align: center;
+  color: #F1E8F6;
+  font-size: 0.29333rem;
+  background: url(../images/dayTab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listBg .dayTab .active {
+  background: url(../images/dayTab_active.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listBg .topBox {
+  width: 8.85333rem;
+  height: 7.57333rem;
+  background: url(../images/topBox.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.page2 .listBg .topBox .no1 {
+  width: 2.4rem;
+  height: 2.32rem;
+  position: absolute;
+  top: 0.96rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no1 .ts {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .listBg .topBox .no1 .tx {
+  width: 1.78667rem;
+  height: 1.78667rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no1 .num {
+  width: 1.77333rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no1 p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.36rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .listBg .topBox .no1 span {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.73333rem;
+}
+
+.page2 .listBg .topBox .no2 {
+  width: 2.4rem;
+  height: 2.32rem;
+  position: absolute;
+  top: 2.42667rem;
+  left: 0.6rem;
+}
+
+.page2 .listBg .topBox .no2 .ts {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .listBg .topBox .no2 .tx {
+  width: 1.78667rem;
+  height: 1.78667rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no2 .num {
+  width: 1.77333rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no2 p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.36rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .listBg .topBox .no2 span {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.73333rem;
+}
+
+.page2 .listBg .topBox .no3 {
+  width: 2.4rem;
+  height: 2.32rem;
+  position: absolute;
+  top: 2.42667rem;
+  right: 0.6rem;
+}
+
+.page2 .listBg .topBox .no3 .ts {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .listBg .topBox .no3 .tx {
+  width: 1.78667rem;
+  height: 1.78667rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no3 .num {
+  width: 1.77333rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no3 p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.36rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .listBg .topBox .no3 span {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.73333rem;
+}
+
+.page2 .listBg .list {
+  width: 8.13333rem;
+  margin: 0 auto;
+}
+
+.page2 .listBg .list li {
+  width: 100%;
+  height: 1.6rem;
+  line-height: 1.6rem;
+  border-radius: 0.26667rem;
+  background: #9B50DB;
+  margin-bottom: 0.13333rem;
+}
+
+.page2 .listBg .list li .num {
+  width: 0.6rem;
+  text-align: center;
+  color: #fff;
+  font-weight: 400;
+  height: 100%;
+  margin: 0 0.26667rem 0 0.33333rem;
+  float: left;
+  font-size: 0.49333rem;
+}
+
+.page2 .listBg .list li .tx {
+  width: 1.25333rem;
+  height: 1.25333rem;
+  border-radius: 50%;
+  margin-right: 0.32rem;
+  margin-top: 0.21333rem;
+  float: left;
+}
+
+.page2 .listBg .list li .nick {
+  float: left;
+  width: 2.1rem;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFFFFF;
+  font-size: 0.38667rem;
+  font-weight: 400;
+}
+
+.page2 .listBg .list li .score {
+  float: right;
+  margin-right: 0.36rem;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  color: #fff;
+}
+
+.page2 .myList {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: 1.98667rem;
+  line-height: 1.98667rem;
+  background: #734DC1;
+  z-index: 3;
+}
+
+.page2 .myList .num {
+  width: 1.6rem;
+  text-align: center;
+  color: #fff;
+  font-weight: 400;
+  height: 100%;
+  margin: 0 0.26667rem 0 0.33333rem;
+  float: left;
+  font-size: 0.49333rem;
+}
+
+.page2 .myList .tx {
+  width: 1.25333rem;
+  height: 1.25333rem;
+  border-radius: 50%;
+  margin-right: 0.32rem;
+  margin-top: 0.33333rem;
+  float: left;
+}
+
+.page2 .myList .nick {
+  float: left;
+  width: 2.1rem;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFFFFF;
+  font-size: 0.38667rem;
+  font-weight: 400;
+}
+
+.page2 .myList .score {
+  float: right;
+  margin-right: 0.36rem;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  color: #fff;
+}
+
+.apple {
+  width: 100%;
+  height: 1.97333rem;
+  line-height: 1.97333rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.34667rem;
+}
+
+.rule {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 99;
+}
+
+.rule .rule_iaon {
+  width: 9.68rem;
+  height: 14.46667rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow-y: scroll;
+}
+
+.rule .rule_iaon .box {
+  position: absolute;
+  width: 8.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.6rem;
+  height: 12rem;
+  overflow-y: scroll;
+}
+
+.rule .rule_iaon .box img {
+  width: 100%;
+  height: 47.41333rem;
+  display: block;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}

view/peko/activity/2023-ruffian/css/index.scss

@@ -0,0 +1,562 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #EBC8FA 0%, #FCB0EB 99%);
+}
+
+.rabbit {
+    z-index: 999;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70);
+    left: px2rem(34);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(795);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+    z-index: 2;
+
+    .giftBox {
+        width: px2rem(662);
+        height: px2rem(240);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(448);
+    }
+
+    .tab {
+        width: px2rem(480);
+        height: px2rem(83);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(714);
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(212);
+            height: px2rem(83);
+            line-height: px2rem(83);
+            color: #F1E8F6;
+            font-size: px2rem(28);
+            text-align: center;
+            background: url(../images/tab.png) no-repeat;
+            background-size: 100%, 100%;
+        }
+
+        .active {
+            background: url(../images/tab_active.png) no-repeat;
+            background-size: 100%, 100%;
+        }
+    }
+
+    .rule_iaon {
+        width: px2rem(120);
+        height: px2rem(56);
+        line-height: px2rem(47);
+        text-align: center;
+        text-indent: 15px;
+        color: #fff;
+        font-size: px2rem(18);
+        position: absolute;
+        right: px2rem(0);
+        top: px2rem(400);
+        background: url(../images/rule_icon.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .activity1 {
+        width: px2rem(750);
+        height: px2rem(892);
+        background: url(../images/activity1Bg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(-43) auto px2rem(9);
+        position: relative;
+
+        div {
+            position: absolute;
+            right: px2rem(75);
+            width: px2rem(150);
+            height: px2rem(61);
+            line-height: px2rem(48);
+            text-align: center;
+            font-size: px2rem(21);
+            color: #E7FEFF;
+            background: url(../images/lqOut.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .but1 {
+            top: px2rem(226);
+        }
+
+        .but2 {
+            top: px2rem(402);
+        }
+
+        .but3 {
+            top: px2rem(579);
+        }
+
+        .but4 {
+            top: px2rem(755);
+        }
+
+        .out {
+            background: url(../images/lq.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .activity2 {
+        width: px2rem(750);
+        height: px2rem(1335);
+        margin: 0 auto 0;
+        display: block;
+    }
+}
+
+.page2 {
+    display: none;
+
+    .listTab {
+        width: px2rem(690);
+        height: px2rem(92);
+        margin: px2rem(30) auto 0;
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(345);
+            height: 100%;
+            text-align: center;
+            color: #F1E8F6;
+            font-size: px2rem(24);
+            line-height: px2rem(106);
+            background: url(../images/listTab.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .active {
+            font-size: px2rem(30);
+            line-height: px2rem(92);
+            background: url(../images/listTabActive.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .listBg {
+        width: px2rem(690);
+        min-height: 17rem;
+        margin: 0 auto 0.5rem;
+        background: linear-gradient(0deg, #B483D7 0%, #AD61FA 48%, #CB80FB 100%);
+        border-radius: 0 0 px2rem(20) px2rem(20);
+        overflow: hidden;
+
+        .dayTab {
+            width: px2rem(565);
+            height: px2rem(66);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(44) auto px2rem(27);
+
+            div {
+                width: px2rem(167);
+                height: px2rem(66);
+                line-height: px2rem(68);
+                text-align: center;
+                color: #F1E8F6;
+                font-size: px2rem(22);
+                background: url(../images/dayTab.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .active {
+                background: url(../images/dayTab_active.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .topBox {
+            width: px2rem(664);
+            height: px2rem(568);
+            background: url(../images/topBox.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0 auto 0;
+            position: relative;
+
+            .no1 {
+                width: px2rem(180);
+                height: px2rem(174);
+                position: absolute;
+                top: px2rem(72);
+                left: 50%;
+                transform: translateX(-50%);
+
+                .ts {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(134);
+                    height: px2rem(134);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(25);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                .num {
+                    width: px2rem(133);
+                    height: px2rem(56);
+                    position: absolute;
+                    top: px2rem(-58);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-27);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                span {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-55);
+                }
+            }
+
+            .no2 {
+                width: px2rem(180);
+                height: px2rem(174);
+                position: absolute;
+                top: px2rem(182);
+                left: px2rem(45);
+
+                .ts {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(134);
+                    height: px2rem(134);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(25);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                .num {
+                    width: px2rem(133);
+                    height: px2rem(56);
+                    position: absolute;
+                    top: px2rem(-58);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-27);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                span {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-55);
+                }
+            }
+
+            .no3 {
+                width: px2rem(180);
+                height: px2rem(174);
+                position: absolute;
+                top: px2rem(182);
+                right: px2rem(45);
+
+                .ts {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(134);
+                    height: px2rem(134);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(25);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                .num {
+                    width: px2rem(133);
+                    height: px2rem(56);
+                    position: absolute;
+                    top: px2rem(-58);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-27);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                span {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-55);
+                }
+            }
+        }
+
+        .list {
+            width: px2rem(610);
+            margin: 0 auto;
+
+            li {
+                width: 100%;
+                height: px2rem(120);
+                line-height: px2rem(120);
+                border-radius: px2rem(20);
+                background: #9B50DB;
+                margin-bottom: px2rem(10);
+
+                .num {
+                    width: px2rem(45);
+                    text-align: center;
+                    color: #fff;
+                    font-weight: 400;
+                    height: 100%;
+                    margin: 0 px2rem(20) 0 px2rem(25);
+                    float: left;
+                    font-size: px2rem(37);
+                }
+
+                .tx {
+                    width: px2rem(94);
+                    height: px2rem(94);
+                    border-radius: 50%;
+                    margin-right: px2rem(24);
+                    margin-top: px2rem(16);
+                    float: left;
+                }
+
+                .nick {
+                    float: left;
+                    width: 2.1rem;
+                    height: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color: #FFFFFF;
+                    font-size: px2rem(29);
+                    font-weight: 400;
+                }
+
+                .score {
+                    float: right;
+                    margin-right: px2rem(27);
+                    font-size: px2rem(26);
+                    font-weight: 400;
+                    color: #fff;
+                }
+            }
+        }
+
+    }
+
+    .myList {
+        position: fixed;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        height: px2rem(149);
+        line-height: px2rem(149);
+        background: #734DC1;
+        z-index: 3;
+
+        .num {
+            width: 1.6rem;
+            text-align: center;
+            color: #fff;
+            font-weight: 400;
+            height: 100%;
+            margin: 0 px2rem(20) 0 px2rem(25);
+            float: left;
+            font-size: px2rem(37);
+        }
+
+        .tx {
+            width: px2rem(94);
+            height: px2rem(94);
+            border-radius: 50%;
+            margin-right: px2rem(24);
+            margin-top: px2rem(25);
+            float: left;
+        }
+
+        .nick {
+            float: left;
+            width: 2.1rem;
+            height: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #FFFFFF;
+            font-size: px2rem(29);
+            font-weight: 400;
+        }
+
+        .score {
+            float: right;
+            margin-right: px2rem(27);
+            font-size: px2rem(26);
+            font-weight: 400;
+            color: #fff;
+        }
+    }
+
+}
+
+.apple {
+    width: 100%;
+    height: px2rem(148);
+    line-height: px2rem(148);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(26);
+}
+
+.rule {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .6);
+    z-index: 99;
+
+    .rule_iaon {
+        width: px2rem(726);
+        height: px2rem(1085);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        overflow-y: scroll;
+
+        .box {
+            position: absolute;
+            width: px2rem(646);
+            left: 50%;
+            transform: translateX(-50%);
+            top: 1.6rem;
+            height: 12rem;
+            overflow-y: scroll;
+
+            img {
+                width: 100%;
+                height: px2rem(3556);
+                display: block;
+            }
+        }
+    }
+}
+.layui-m-layershade{
+    background-color: rgba(0,0,0,.3) !important;
+}

view/peko/activity/2023-ruffian/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>單身就狂歡，戀愛就勇敢</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- header -->
+    <div class="header">
+        <!-- 獎勵展示 -->
+        <img src="./images/giftBox.png" alt="" class="giftBox">
+        <!-- tab -->
+        <div class="tab">
+            <div class="active">活動攻略</div>
+            <div>榜單</div>
+        </div>
+        <!-- 規則Icon -->
+        <div class="rule_iaon">活動規則></div>
+    </div>
+    <!-- 頁面一 -->
+    <div class="page1">
+        <!-- 活動1 -->
+        <div class="activity1">
+            <div class="but1">今日未領取</div>
+            <div class="but2">今日未領取</div>
+            <div class="but3">今日未領取</div>
+            <div class="but4">今日未領取</div>
+        </div>
+        <!-- 活動2 -->
+        <img src="./images/activity2.png" alt="" class="activity2">
+    </div>
+    <!-- 頁面二 -->
+    <div class="page2">
+        <!-- 榜單切換 -->
+        <div class="listTab">
+            <div class="active">勇氣榜</div>
+            <div>狂歡榜</div>
+        </div>
+        <!-- 榜單盒子 -->
+        <div class="listBg">
+            <!-- 日榜切換 -->
+            <div class="dayTab">
+                <div>昨日榜單</div>
+                <div>今日榜單</div>
+                <div class="active">總榜</div>
+            </div>
+            <!-- 前三 -->
+            <div class="topBox">
+                <div class="no1">
+                    <img src="./images/no1.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/num1.png" alt="" class="num">
+                    <p>虛位以待</p>
+                    <span>勇氣值:0</span>
+                </div>
+                <div class="no2">
+                    <img src="./images/no2.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/num2.png" alt="" class="num">
+                    <p>虛位以待</p>
+                    <span>勇氣值:0</span>
+                </div>
+                <div class="no3">
+                    <img src="./images/no3.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/num3.png" alt="" class="num">
+                    <p>虛位以待</p>
+                    <span>勇氣值:0</span>
+                </div>
+            </div>
+            <!-- 非前三 -->
+            <ul class="list">
+                <li>
+                    <div class="num">04</div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="nick">用戶昵稱</div>
+                    <div class="score">勇氣值:8888.8w</div>
+                </li>
+            </ul>
+        </div>
+        <!-- 自己榜單 -->
+        <div class="myList">
+            <div class="num">未上榜</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick">用戶昵稱</div>
+            <div class="score">勇氣值:8888.8w</div>
+        </div>
+    </div>
+    <!-- 本活動與Apple inc.無關； -->
+    <div class="apple">本活動以及獎勵與Google/蘋果公司無關</div>
+    <!-- 規則彈窗 -->
+    <div class="rule">
+        <div class="rule_iaon">
+            <div class="box">
+                <img src="./images/rule_in.png" alt="">
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./js/wow.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/2023-ruffian/js/index.js

@@ -0,0 +1,192 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var rankType = 2;//默認送禮總榜
+var type = 1;//默認送禮總榜
+var time = null;//當前日期
+var dayTime = null;//存儲日期;
+// 初始化函數
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        getConfig();
+    }, 100)
+})
+// 獲取配置接口
+function getConfig () {
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023DoubleEleven/task/getConfig',
+        success (res) {
+            if (res.code === 200) {
+                // 處理任務狀態
+                res.data.dailyTaskList.forEach((res, i) => {
+                    if (res.status == 1) {
+                        $(`.page1 .activity1 .but${i + 1}`).addClass('out');
+                        $(`.page1 .activity1 .but${i + 1}`).text('今日已領取');
+                    }
+                });
+                // 設置日期
+                time = res.timestamp;
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// tab切換
+$('.header .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.page1').hide();
+    $('.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 2) {
+        $('.page2 .listBg .dayTab div').removeClass('active');
+        $('.page2 .listBg .dayTab div').eq(2).addClass('active');
+        getRank(rankType, type);
+    }
+})
+// 獲取榜單接口
+function getRank (rankType, type, date) {
+    $('.page2 .listBg .list li').remove();
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023DoubleEleven/rank/getRank',
+        data: { rankType, date },
+        success (res) {
+            if (res.code === 200) {
+                // 處理前三
+                var top3 = res.data.rankList.slice(0, 3);
+                var notTop3 = res.data.rankList.slice(3);
+                if (top3.length < 3) {
+                    let arr = new Array(3 - top3.length).fill({
+                        avatar: './images/logo.png',
+                        nick: '虛位以待',
+                        score: "0"
+                    })
+                    top3.push(...arr)
+                }
+                top3.forEach((res, i) => {
+                    $(`.page2 .listBg .topBox .no${i + 1} .tx`).attr('src', res.avatar);
+                    $(`.page2 .listBg .topBox .no${i + 1} p`).text(res.nick);
+                    $(`.page2 .listBg .topBox .no${i + 1} span`).text(`${type == 1 ? "勇氣值:" : "狂歡值:"}${unitProcessing(res.score, 10000, 1, 'w')}`);
+                })
+                // 非前三
+                var str = '';
+                notTop3.forEach((res, i) => {
+                    str += `
+                        <li>
+                            <div class="num">${res.ranking}</div>
+                            <img src="${res.avatar}" alt="" class="tx">
+                            <div class="nick">${res.nick}</div>
+                            <div class="score">${type == 1 ? "勇氣值:" : "狂歡值:"}${unitProcessing(res.score, 10000, 1, 'w')}</div>
+                        </li>
+                    `
+                })
+                $('.page2 .listBg .list').append(str);
+                // 處理自己榜單
+                $('.page2 .myList .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
+                $('.page2 .myList .tx').attr('src', res.data.meRank.avatar);
+                $('.page2 .myList .nick').text(res.data.meRank.nick);
+                $('.page2 .myList .score').text(`${type == 1 ? "勇氣值:" : "狂歡值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 送禮榜和收禮榜切換
+$('.page2 .listTab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.page2 .listBg .dayTab div').removeClass('active');
+    $('.page2 .listBg .dayTab div').eq(2).addClass('active');
+    type = i;
+    dayTime = null;
+    if (i == 1) {
+        rankType = 2;
+    } else {
+        rankType = 4;
+    }
+    getRank(rankType, type, dayTime);
+})
+// 日榜和總榜切換
+$('.page2 .listBg .dayTab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    if (i == 3) {
+        dayTime = null;
+        rankType = type == 1 ? 2 : 4;
+    } else if (i == 1) {
+        rankType = type == 1 ? 1 : 3;
+        dayTime = dateFormat(time - 86400000, 'yyyy-MM-dd')
+    } else if (i == 2) {
+        rankType = type == 1 ? 1 : 3;
+        dayTime = dateFormat(time, 'yyyy-MM-dd')
+    }
+    getRank(rankType, type, dayTime);
+})
+// 打開規則
+$('.header .rule_iaon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 關閉規則
+$('.rule').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+})

view/peko/activity/2023-ruffian/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/love.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 30,
+        left: e.pageX - 20,
+        opacity: 1,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}

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

@@ -3,7 +3,7 @@ let urlPrefix = getUrlPrefix();
 var browser = checkVersion();
 var info = {};
 if (EnvCheck() === 'test') new VConsole
-// 封装layer消息提醒框
+// 封裝layer消息提醒框
 let layerIndex
 const showLoading = (content = '加載中...') => {
     layer.open({
@@ -29,7 +29,7 @@ const toastMsg = (content = '操作完成', time = 2) => {
 let delayLock = false, newApplyLock = false
 
 let btnStatus = []
-// 获取用户铭牌状态
+// 獲取用戶銘牌狀態
 const getUserNameplateInfo = () => {
   showLoading()
   networkRequest({
@@ -54,11 +54,11 @@ const getUserNameplateInfo = () => {
   })
 }
 
-// 渲染首页按钮状态
+// 渲染首頁按鈕狀態
 const renderBtnStatus = () => {
   btnStatus.map( (item,index) => {
       if(index > 1){
-        // 进阶款式
+        // 進階款式
         $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
         if(item > 0){
           $('.btn').eq(index).on('click', () => {
@@ -66,7 +66,7 @@ const renderBtnStatus = () => {
           })
         }
       }else{
-        // 基础款式
+        // 基礎款式
         $('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
         if(item > 0){
           $('.btn').eq(index).on('click', () => {
@@ -78,7 +78,7 @@ const renderBtnStatus = () => {
 }
 
 let userNameplateList = []
-// 获取用户已有铭牌列表
+// 獲取用戶已有銘牌列錶
 const getUserNameplateList = (type) => {
   showLoading()
   networkRequest({
@@ -108,7 +108,7 @@ const getUserNameplateList = (type) => {
   })
 }
 
-// 渲染铭牌列表(选择弹窗)
+// 渲染銘牌列錶(選擇彈窗)
 const renderNameplateList = () => {
   let str = ''
   userNameplateList.map( item => {
@@ -133,7 +133,7 @@ const renderNameplateList = () => {
 
 
 let newNameplateList = []
-// 获取新铭牌列表
+// 獲取新銘牌列錶
 const getNewNameplateList = (type) => {
   showLoading()
   networkRequest({
@@ -147,7 +147,7 @@ const getNewNameplateList = (type) => {
       hideLoading(layerIndex)
       if(res.code === 200){
         if(!res.data.length){
-          toastMsg('暂时没有铭牌可申请')
+          toastMsg('暫時沒有銘牌可申請')
           return
         }
         newNameplateList = res.data
@@ -163,8 +163,8 @@ const getNewNameplateList = (type) => {
   })
 }
 
-let newNameplateId  //只有一个可选时，默认选中
-// 渲染申请新铭牌弹窗
+let newNameplateId  //只有一個可選時，默認選中
+// 渲染申請新銘牌彈窗
 const renderNewNameplateList = () => {
   let str = '';
   newNameplateList.map( item => {
@@ -187,7 +187,7 @@ const renderNewNameplateList = () => {
   $('body').css('overflow', 'hidden')
 }
 
-// 确认延长期限
+// 確認延長期限
 const delayNamaplateConfirm = (params) => {
   showLoading()
   networkRequest({
@@ -204,7 +204,7 @@ const delayNamaplateConfirm = (params) => {
     success(res){
       hideLoading(layerIndex)
       if(res.code === 200){
-        toastMsg('申请成功')
+        toastMsg('申請成功')
         $('.shade-mask-delay').hide()
         $('body').css('overflow', 'auto')
         delayLock = false
@@ -222,7 +222,7 @@ const delayNamaplateConfirm = (params) => {
   })
 }
 
-// 确认申请新铭牌
+// 確認申請新銘牌
 const applyNewNamaplateConfirm = (params) => {
   showLoading()
   networkRequest({
@@ -239,7 +239,7 @@ const applyNewNamaplateConfirm = (params) => {
     success(res){
       hideLoading(layerIndex)
       if(res.code === 200){
-        toastMsg('申请成功')
+        toastMsg('申請成功')
         $('.shade-mask-new').hide()
         $('body').css('overflow', 'auto')
         newApplyLock  = false
@@ -268,12 +268,12 @@ $(function () {
     _hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
   }
 
-  // 点击申请记录按钮
+  // 點擊申請記錄按鈕
   $('.record').on('click', function(){
     window.location.href = './record.html'
   })
 
-  // 关闭弹窗
+  // 關閉彈窗
   $('.shade-mask .close').on('click', () => {
     $('.shade-mask').hide()
     $('body').css('overflow', 'auto')
@@ -290,7 +290,7 @@ $(function () {
   })
 
   let maxApplyDay, nameplateId, type, text
-  // 监听 延长期限 按钮点击事件
+  // 監聽 延長期限 按鈕點擊事件
   $('.select-ul').on('click', '.delay-btn', function() {
     let li = $(this).parent();
     let src = li.find('.nameplate img').attr('src');
@@ -307,29 +307,29 @@ $(function () {
     $('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
   })
 
-  // 延期弹窗 点击减按钮
+  // 延期彈窗 點擊減按鈕
   $('.shade-mask-delay').on('click', '.decrease', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     if(applyDay > 7){
       applyDay -= 7;
     }else{
-      toastMsg('铭牌至少申请7天')
+      toastMsg('銘牌至少申請7天')
     }
     $('.shade-mask-delay .delay-time p span').html(applyDay);
   })
-  //延期弹窗 点击加按钮
+  //延期彈窗 點擊加按鈕
   $('.shade-mask-delay').on('click', '.increase', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     if(applyDay >= maxApplyDay){
-      toastMsg('已达最大申请时长')
+      toastMsg('已達最大申請時長')
     }else{
       applyDay += 7;
     }
     $('.shade-mask-delay .delay-time p span').html(applyDay);
   })
-  // 监听申请延期确定按钮点击事件
+  // 監聽申請延期確定按鈕點擊事件
   $('.shade-mask-delay').on('click', '.apply-btn', function(){
-    // applyType 1申请新铭牌，2延长
+    // applyType 1申請新銘牌，2延長
     if(!delayLock){
       delayLock = true
       let params = {
@@ -345,59 +345,59 @@ $(function () {
 
   /*************************           ******************************/
 
-  // 监听 申请新铭牌 按钮点击事件
+  // 監聽 申請新銘牌 按鈕點擊事件
   $('.shade-mask').on('click', '.apply-btn', function(){
     let type = $(this).parent().find('.select-ul li').eq(0).data('type');
     getNewNameplateList(type)
   })
 
-  // 申请新铭牌弹窗 点击减按钮
+  // 申請新銘牌彈窗 點擊減按鈕
   $('.shade-mask-new').on('click', '.decrease', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     if(applyDay > 7){
       applyDay -= 7;
     }else{
-      toastMsg('铭牌至少申请7天')
+      toastMsg('銘牌至少申請7天')
     }
     $('.shade-mask-new .delay-time p span').html(applyDay);
   })
-  // 申请新铭牌弹窗 点击加按钮
+  // 申請新銘牌彈窗 點擊加按鈕
   $('.shade-mask-new').on('click', '.increase', function(){
     let applyDay = parseInt( $(this).parent().find('span').html() );
     let maxApplyDay = parseInt( $(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay') );
     if(applyDay >= maxApplyDay){
-      toastMsg('已达最大申请时长')
+      toastMsg('已達最大申請時長')
     }else{
       applyDay += 7;
     }
     $('.shade-mask-new .delay-time p span').html(applyDay);
   })
   
-  // 申请新铭牌弹窗 点击铭牌列表事件
+  // 申請新銘牌彈窗 點擊銘牌列錶事件
   $('.shade-mask-new').on('click', 'li', function(){
     $(this).addClass('active').siblings('li').removeClass('active');
     newNameplateId = $(this).data('nameplateId');
   })
 
-  // 申请新铭牌弹窗 确定申请 按钮点击事件
+  // 申請新銘牌彈窗 確定申請 按鈕點擊事件
   $('.shade-mask-new').on('click', '.apply-btn', function(){
     let content = $(this).parent();
     let ipt = content.find('input.new-nameplate-desc').val()
     if(!newNameplateId){
-      toastMsg('请选择样式');
+      toastMsg('請選擇樣式');
       return
     }
     if(!ipt){
-      toastMsg('请添加铭牌文字');
+      toastMsg('請添加銘牌文字');
       return
     }else{
       if(ipt.length !== 4){
-        toastMsg('请添加4个字的铭牌文字');
+        toastMsg('請添加4個字的銘牌文字');
         return
       }
     }
     
-    // applyType 1申请新铭牌，2延长
+    // applyType 1申請新銘牌，2延長
     if(!newApplyLock){
       newApplyLock = true
       let params = {

view/peko/activity/smallWeekStar/css/index.css

@@ -0,0 +1,41 @@
+html,
+body {
+  width: 100%;
+  background: #450172;
+}
+
+html .box,
+body .box {
+  width: 10rem;
+  height: 61.62667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+html .box .gift,
+body .box .gift {
+  position: absolute;
+  width: 7.32rem;
+  height: 3.01333rem;
+  top: 10.58667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+html .box .swiper,
+body .box .swiper {
+  width: 8.98667rem;
+  height: 14.8rem;
+  position: absolute;
+  top: 19.88rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+html .box .swiper img,
+body .box .swiper img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

view/peko/activity/smallWeekStar/css/index.scss

@@ -0,0 +1,42 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    // height: 100%;
+    background: #450172;
+
+    .box {
+        width: px2rem(750);
+        height: px2rem(4622);
+        background: url(../images/bg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .gift {
+            position: absolute;
+            width: px2rem(549);
+            height: px2rem(226);
+            top: px2rem(794);
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .swiper {
+            width: px2rem(674);
+            height: px2rem(1110);
+            position: absolute;
+            top: px2rem(1491);
+            left: 50%;
+            transform: translateX(-50%);
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}

view/peko/activity/smallWeekStar/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>闪耀周星</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <div class="box">
+        <img src="./images/gift3.png" alt="" class="gift">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="./images/img1.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/img2.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/swiper-bundle.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/smallWeekStar/js/index.js

@@ -0,0 +1,37 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 初始化函数
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        // 页面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 顶部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        // 礼物轮播
+        var mySwiper = new Swiper('.swiper', {
+            // direction: "vertical",
+            loop: true,
+            autoplay: {
+                delay: 1500,//
+                disableOnInteraction: false
+            }
+        })
+    }, 100)
+})

view/peko/activity/spacTimeLuck/css/index.css

@@ -0,0 +1,290 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+}
+
+.rabbit {
+  z-index: 999;
+}
+
+.back {
+  position: fixed;
+  top: 0.93333rem;
+  left: 0.45333rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.header {
+  width: 10rem;
+  height: 15.06667rem;
+  margin: 0 auto 0;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.header .giftBox {
+  width: 10rem;
+  height: 3.86667rem;
+  position: relative;
+  top: 8.94667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/gift.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .giftBox div {
+  position: absolute;
+  width: 1.73333rem;
+  text-align: center;
+}
+
+.header .giftBox div p {
+  color: #fff;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  margin-bottom: 0.10667rem;
+}
+
+.header .giftBox div span {
+  color: #FAF8B6;
+  font-size: 0.32rem;
+  font-weight: 300;
+  display: block;
+}
+
+.header .giftBox .div1 {
+  top: 3.50667rem;
+  left: 0.61333rem;
+}
+
+.header .giftBox .div2 {
+  top: 2.54667rem;
+  left: 2.96rem;
+}
+
+.header .giftBox .div3 {
+  top: 4rem;
+  left: 5.46667rem;
+}
+
+.header .giftBox .div4 {
+  top: 3.29333rem;
+  left: 7.86667rem;
+}
+
+.content {
+  position: relative;
+  width: 9.34667rem;
+  height: 17.72rem;
+  margin: -0.93333rem auto 0.24rem;
+  background: url(../images/content.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .title {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.45333rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  top: 0.38667rem;
+}
+
+.content .text {
+  width: 8rem;
+  height: 1.37333rem;
+  color: #FFFFFF;
+  font-size: 0.32rem;
+  font-weight: 300;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.84rem;
+  line-height: 0.47rem;
+}
+
+.content .lineBox {
+  width: 9.24rem;
+  height: 2.76rem;
+  background: url(../images/lineBigBox.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  top: 3.73333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.content .lineBox .line {
+  width: 7.88rem;
+  height: 0.68rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.69333rem;
+  box-sizing: border-box;
+  padding: 0.10667rem 0.08rem;
+  background: url(../images/lineBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .lineBox .line .line_in {
+  width: 0%;
+  height: 100%;
+  background: linear-gradient(0deg, #FFE993 0%, #EC9409 52%, #FFFC9E 98%);
+  border-radius: 0.68rem;
+  text-align: center;
+  line-height: 0.50667rem;
+  color: #F14029;
+  font-size: 0.34667rem;
+  font-weight: 400;
+}
+
+.content .lineBox .tavBox {
+  width: 95%;
+  position: absolute;
+  top: 1.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  padding: 0 0.13333rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.content .lineBox .tavBox div {
+  width: 0.68rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
+  border-radius: 0.10667rem;
+  background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.content .lineBox .tavBox .active {
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .updataIcon {
+  width: 0.73333rem;
+  height: 0.78667rem;
+  position: absolute;
+  right: 0.92rem;
+  top: 6.68rem;
+}
+
+.content .lottery {
+  width: 8.69333rem;
+  height: 7.98667rem;
+  position: relative;
+  top: 5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/contentBox.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content .lottery .title {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 0.33333rem;
+  left: 0rem;
+  color: #FFFFFF;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.content .lottery .user {
+  width: 2.01333rem;
+  height: 2.08rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.84rem;
+}
+
+.content .lottery .user img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.content .lottery .user .ts {
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.content .lottery .user .tx {
+  border-radius: 50%;
+  width: 1.66667rem;
+  height: 1.66667rem;
+}
+
+.content .lottery .user p {
+  width: 130%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.13333rem;
+}
+
+.content .lottery .giftList {
+  width: 6.58667rem;
+  height: 4.28rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.26667rem;
+}
+
+.content .dimension {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  top: 16.32rem;
+}

view/peko/activity/spacTimeLuck/css/index.scss

@@ -0,0 +1,297 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+}
+
+.rabbit {
+    z-index: 999;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70);
+    left: px2rem(34);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(1130);
+    margin: 0 auto 0;
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+    .giftBox {
+        width: px2rem(750);
+        height: px2rem(290);
+        position: relative;
+        top: px2rem(671);
+        left: 50%;
+        transform: translateX(-50%);
+        background: url(../images/gift.png) no-repeat;
+        background-size: 100% 100%;
+
+        div {
+            position: absolute;
+            width: px2rem(130);
+            text-align: center;
+
+            p {
+                color: #fff;
+                font-size: px2rem(26);
+                font-weight: 400;
+                margin-bottom: px2rem(8);
+            }
+
+            span {
+                color: #FAF8B6;
+                font-size: px2rem(24);
+                font-weight: 300;
+                display: block;
+            }
+        }
+
+        .div1 {
+            top: px2rem(263);
+            left: px2rem(46);
+        }
+
+        .div2 {
+            top: px2rem(191);
+            left: px2rem(222);
+        }
+
+        .div3 {
+            top: px2rem(300);
+            left: px2rem(410);
+        }
+
+        .div4 {
+            top: px2rem(247);
+            left: px2rem(590);
+        }
+    }
+}
+
+.content {
+    position: relative;
+    width: px2rem(701);
+    height: px2rem(1329);
+    margin: px2rem(-70) auto px2rem(18);
+    // background-color: linear-gradient(0deg, #474B6E 0%, #37304A 99%);
+    background: url(../images/content.png) no-repeat;
+    background-size: 100% 100%;
+
+    .title {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(34);
+        font-weight: 400;
+        position: absolute;
+        left: 0;
+        top: px2rem(29);
+    }
+
+    .text {
+        width: px2rem(600);
+        height: px2rem(103);
+        color: #FFFFFF;
+        font-size: px2rem(24);
+        font-weight: 300;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(138);
+        line-height: 0.47rem;
+    }
+
+    .lineBox {
+        width: px2rem(693);
+        height: px2rem(207);
+        background: url(../images/lineBigBox.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        top: px2rem(280);
+        left: 50%;
+        transform: translateX(-50%);
+
+        .line {
+            width: px2rem(591);
+            height: px2rem(51);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(52);
+            box-sizing: border-box;
+            padding: px2rem(8) px2rem(6);
+            background: url(../images/lineBox.png) no-repeat;
+            background-size: 100% 100%;
+
+            .line_in {
+                width: 0%;
+                height: 100%;
+                background: linear-gradient(0deg, #FFE993 0%, #EC9409 52%, #FFFC9E 98%);
+                border-radius: px2rem(51);
+                text-align: center;
+                line-height: px2rem(38);
+                color: #F14029;
+                font-size: px2rem(26);
+                font-weight: 400;
+            }
+        }
+
+        .tavBox {
+            width: 95%;
+            position: absolute;
+            top: px2rem(121);
+            left: 50%;
+            transform: translateX(-50%);
+            box-sizing: border-box;
+            padding: 0 px2rem(10);
+            display: flex;
+            justify-content: space-between;
+
+            div {
+                width: px2rem(51);
+                // padding: 0 px2rem(10);
+                height: px2rem(40);
+                line-height: px2rem(40);
+                border-radius: px2rem(8);
+                background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
+                color: #FFFFFF;
+                font-size: px2rem(21);
+                font-weight: 500;
+                text-align: center;
+            }
+
+            .active {
+                background: url(../images/tabAct.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+
+    .updataIcon {
+        width: px2rem(55);
+        height: px2rem(59);
+        position: absolute;
+        right: px2rem(69);
+        top: px2rem(501);
+    }
+
+    .lottery {
+        width: px2rem(652);
+        height: px2rem(599);
+        position: relative;
+        top: 5rem;
+        left: 50%;
+        transform: translateX(-50%);
+        background: url(../images/contentBox.png) no-repeat;
+        background-size: 100% 100%;
+
+        .title {
+            width: 100%;
+            text-align: center;
+            position: absolute;
+            top: px2rem(25);
+            left: px2rem(0);
+            color: #FFFFFF;
+            font-size: px2rem(30);
+            font-weight: 500;
+        }
+
+        .user {
+            width: px2rem(151);
+            height: px2rem(156);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(63);
+
+            img {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .ts {
+                width: 100%;
+                height: 100%;
+                z-index: 2;
+            }
+
+            .tx {
+                border-radius: 50%;
+                width: px2rem(125);
+                height: px2rem(125);
+            }
+
+            p {
+                width: 130%;
+                text-align: center;
+                color: #FFFFFF;
+                font-size: px2rem(21);
+                font-weight: 400;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(160);
+            }
+        }
+
+        .giftList {
+            width: px2rem(494);
+            height: px2rem(321);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(245);
+        }
+    }
+
+    .dimension {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(21);
+        font-weight: 400;
+        position: absolute;
+        left: 0;
+        top: px2rem(1224);
+    }
+
+}

view/peko/activity/spacTimeLuck/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>時空幸運兒</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 頭部 -->
+    <div class="header">
+        <!-- 禮物展示 -->
+        <div src="" alt="" class="giftBox">
+            <div class="div1">
+                <p>冬雪心願</p>
+                <span>28000鉆</span>
+            </div>
+            <div class="div2">
+                <p>蝶戀花</p>
+                <span>28000鉆</span>
+            </div>
+            <div class="div3">
+                <p>夜鶯與玫瑰</p>
+                <span>28000鉆</span>
+            </div>
+            <div class="div4">
+                <p>玫瑰時鐘</p>
+                <span>28000鉆</span>
+            </div>
+        </div>
+    </div>
+    <!-- 內容 -->
+    <div class="content">
+        <div class="title">活動規則</div>
+        <div class="text">活動期間全民助力, 每送出一個上新禮物下方進度條+1, 第<b></b>名用戶成為幸運兒可獲得幸運獎勵</div>
+        <div class="lineBox">
+            <div class="line">
+                <div class="line_in"></div>
+            </div>
+            <div class="tavBox">
+                <!-- <div class="active">18</div>
+                <div>38</div>
+                <div>88</div>
+                <div>128</div>
+                <div>208</div>
+                <div>288</div>
+                <div>398</div>
+                <div>488</div>
+                <div>598</div>
+                <div>688</div>
+                <div>788</div>
+                <div>888</div> -->
+            </div>
+        </div>
+        <img src="./images/updataIcon.png" alt="" class="updataIcon">
+        <div class="lottery">
+            <div class="title">幸運兒</div>
+            <div class="user">
+                <img src="./images/ts.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p></p>
+            </div>
+            <img src="./images/18.png" alt="" class="giftList">
+        </div>
+        <div class="dimension">本活動最終解釋權歸Piko所有，本活動以及獎勵與Google/蘋果公司無關</div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./js/wow.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/spacTimeLuck/js/index.js

@@ -0,0 +1,134 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}// 初始化函數
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        getConfig();
+    }, 100)
+})
+var obj = {};
+// 獲取配置接口
+function getConfig () {
+    $('.content .lineBox .tavBox div').remove();
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/act/2023LuckyProcessBar/getConfig',
+        success (res) {
+            if (res.code === 200) {
+                // 處理進度
+                $('.content .lineBox .line .line_in').text(`${res.data.cur}/${res.data.max}`);
+                $(`.content .lineBox .line .line_in`).css({ width: `${(res.data.cur / res.data.max) * 100 >= 100 ? 100 : (res.data.cur / res.data.max) * 100}%` });
+                obj = res.data.stageMap;
+                var cur = res.data.cur;
+                var str = '';
+                var text = '';
+                var arr = [];
+                var curstage;
+                // 渲染切換tab
+                for (var key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        str += `
+                            <div class="key${obj[key].stage}" key=${obj[key].stage}>${obj[key].stage}</div>
+                        `
+                        text += `${obj[key].stage}/`
+                        arr.push(obj[key]);
+                    }
+                }
+                $('.content .lineBox .tavBox').append(str);
+                $('.content .text b').text(text);
+                // 處理當前階段
+                arr.forEach((val, i) => {
+                    if (val.luckyUser) {//false
+                        // curstage = val.stage;
+                        // $('.content .lottery .user .tx').attr('src', val.luckyUser.avatar)
+                        // $('.content .lottery .user p').text(val.luckyUser.nick);
+                        if (i == arr.length - 1) {
+                            curstage = arr[arr.length - 1].stage;
+                            $('.content .lottery .user .tx').attr('src', val.luckyUser.avatar)
+                            $('.content .lottery .user p').text(val.luckyUser.nick);
+                        } else {
+                            curstage = arr[i + 1].stage;
+                            $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+                            $('.content .lottery .user p').text('虛位以待');
+                        }
+                    } else if (i == 0) {
+                        curstage = arr[0].stage;
+                        $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+                        $('.content .lottery .user p').text('虛位以待');
+                    }
+                });
+                // console.log(curstage);
+                $(`.content .lineBox .tavBox .key${curstage}`).addClass('active').siblings().removeClass('active');
+                $('.content .lottery .giftList').attr('src', `./images/${curstage}.png`)
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 刷新按鈕
+$('.content .updataIcon').click(function () {
+    getConfig();
+})
+// tab切換
+$('.content').on('click', ' .lineBox .tavBox div', function () {
+    var key = $(this).attr('key')
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.content .lottery .giftList').attr('src', `./images/${key}.png`)
+    // console.log(obj[key]);
+    if (obj[key].luckyUser) {
+        $('.content .lottery .user .tx').attr('src', obj[key].luckyUser.avatar);
+        $('.content .lottery .user p').text(obj[key].luckyUser.nick);
+    } else {
+        $('.content .lottery .user .tx').attr('src', `./images/logo.png`);
+        $('.content .lottery .user p').text('虛位以待');
+    }
+})

view/peko/activity/spacTimeLuck/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/icon.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 80,
+        left: e.pageX - 20,
+        opacity: 1,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}

view/peko/home-yinyou/index.html

@@ -48,7 +48,7 @@
                 <a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备18040812号</a>
             </div>
             <div class="gongsi">
-                <p>公司主体：广州芒果互娱网络科技有限公司</p>
+                <p>公司主体：香港栗子科技有限公司</p>
                 <p>联系地址：广州市天河区珠吉路59号之二四楼A4569</p>
                 <p>联系方式：020-85698266</p>
             </div>

view/peko/home/css/index.css

@@ -16,11 +16,10 @@ html {
   .m-bg img {
     display: block;
   }
-
   .homePc {
     width: 100%;
     height: 10rem;
-    background: url(../images/homePc.png) no-repeat;
+    background: url(../images/homePc2.png) no-repeat;
     background-size: 100% 100%;
     position: relative;
   }
@@ -28,7 +27,7 @@ html {
     width: 1.11rem;
     height: 0.5rem;
     background: rgba(255, 255, 255, 0.2);
-    border-radius: 0.13rem;
+    border-radius: .13rem;
     font-size: 0.24rem;
     color: #fff;
     text-align: center;
@@ -58,7 +57,6 @@ html {
     left: 2.4rem;
     bottom: 1.6rem;
   }
-
   .eori {
     width: 100%;
     background: #30312C;
@@ -78,19 +76,17 @@ html {
     margin: 0 0.2rem;
   }
 }
+
 @media screen and (max-width: 768px) {
   body {
     background-color: #0C0122;
   }
-
   .pc-bg {
     display: none;
   }
-
   .m-bg {
     display: block;
   }
-
   .homeM {
     width: 100%;
     height: 14.89rem;
@@ -102,7 +98,7 @@ html {
     width: 1.11rem;
     height: 0.5rem;
     background: rgba(255, 255, 255, 0.2);
-    border-radius: 0.13rem;
+    border-radius: .13rem;
     font-size: 0.24rem;
     color: #fff;
     text-align: center;
@@ -148,26 +144,24 @@ html {
     width: 2.2rem;
     height: 0.7rem;
   }
-
   .button-wrapper {
     display: block;
     position: absolute;
     left: 1.28rem;
     top: 17.52rem;
-    width: 7.4666666667rem;
-    height: 1.2266666667rem;
+    width: 7.46667rem;
+    height: 1.22667rem;
   }
   .button-wrapper a {
     display: inline-block;
     width: 100%;
     height: 100%;
   }
-
   .button2-wrapper {
     display: block;
     position: absolute;
-    left: 3.0933333333rem;
-    bottom: 1.7066666667rem;
+    left: 3.09333rem;
+    bottom: 1.70667rem;
     width: 4rem;
     height: 0.8rem;
     background: rgba(255, 255, 255, 0);
@@ -177,11 +171,9 @@ html {
     width: 100%;
     height: 100%;
   }
-
   .m-button {
     display: block;
   }
-
   .text-wrapper {
     padding-left: 0;
     width: 90%;
@@ -192,10 +184,9 @@ html {
     margin-bottom: 10px;
   }
   .text-wrapper .text1,
-.text-wrapper p {
+  .text-wrapper p {
     text-align: center;
   }
-
   .eori {
     width: 100%;
     background: #30312C;
@@ -210,9 +201,9 @@ html {
   }
   .eori .recordfoot .record {
     display: inline-block;
-    padding-right: 0.0533333333rem;
-    height: 0.3733333333rem;
-    width: 0.4266666667rem;
+    padding-right: 0.05333rem;
+    height: 0.37333rem;
+    width: 0.42667rem;
     background: url(../images/icon_police.png) no-repeat;
   }
   .eori .gongsi {
@@ -233,6 +224,7 @@ html {
     font-size: 20px;
   }
 }
+
 .toast {
   background: rgba(0, 0, 0, 0.9);
   border-radius: 10px;
@@ -254,9 +246,7 @@ html {
   display: none;
   position: fixed;
   top: 0;
-  right: 0.2666666667rem;
-  width: 6.1333333333rem;
+  right: 0.26667rem;
+  width: 6.13333rem;
   z-index: 9;
 }
-
-/*# sourceMappingURL=index.css.map */

view/peko/home/css/index.scss

@@ -1,449 +1,300 @@
-@function px2rem($px, $rem: 75) {
-  @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 body,
 html {
-  width: 100%;
-  height: 100%;
-  font-family: "Heiti SC", "Microsoft Sans Serif";
-  //overflow: hidden;
+    width: 100%;
+    height: 100%;
+    font-family: "Heiti SC", "Microsoft Sans Serif";
+    //overflow: hidden;
 }
 
 .container {
-  position: relative;
+    position: relative;
 }
 
-// .eori {
-//   // height: 8.7%;
-//   width: 100%;
-//   background: #000;
-//   // color: #D1D1D1;
-//   position: absolute;
-//   left: 0;
-//   padding: px2rem(10, ) 0;
-//   // p {
-//   //   height: 40px;
-//   //   width: 50%;
-//   //   float: left;
-//   //   text-align: center;
-//   //   line-height: 40px;
-//   //   font-size: 10px;
-//   //   text-align: right;
-//   //   padding-right: 20px;
-//   //   box-sizing: border-box;
-
-//   //   a {
-//   //     color: #666;
-//   //   }
-//   // }
-
-//   .weixin-name {
-//     padding-top: px2rem(20);
-//   }
-
-//   .recordfoot {
-//     width: 100%;
-//     color: #000;
-//     text-align: left;
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-//     font-size: 13px;
-//     margin-bottom: px2rem(6, );
-
-//     .record {
-//       display: inline-block;
-//       padding-right: px2rem(4);
-//       width: px2rem(14, );
-//       height: px2rem(16, );
-//       background: url(../images/icon_police.png) no-repeat;
-//       // background: #948aff;
-//     }
-
-//     a {
-//       color: #fff;
-//     }
-//   }
-
-//   .gongsi {
-//     display: flex;
-//     justify-content: center;
-//     font-size: 13px;
-//     color: #fff;
-
-//     p {
-//       &:nth-child(2) {
-//         margin: 0 14px;
-//       }
-//     }
-//   }
-
-//   // div {
-//   //   // height: 30px;
-//   //   width: 100%;
-//   //   text-align: center;
-//   //   // line-height: 30px;
-//   //   font-size: 16px;
-//   // }
-
-//   .tit {
-//     height: 60px;
-//     line-height: 60px;
-//     text-align: center;
-//     font-size: 20px;
-//   }
-// }
-
-// .footer {
-//   line-height: 70px;
-//   text-align: center;
-//   font-size: 14px;
-//   color: #fff;
-//   background: rgba(0, 0, 0, 0.6);
-
-//   span {
-//     margin: 0 6px;
-//   }
-
-//   a {
-//     color: #fff;
-//   }
-// }
-
-// .button-wrapper {
-//   cursor: pointer;
-//   position: absolute;
-//   left: 68.55%;
-//   // top: 62.27%;
-//   top: 68%;
-//   width: 19.4%;
-//   height: 6.6%;
-//   background: rgba(253, 247, 247, 0);
-
-//   a {
-//     display: inline-block;
-//     width: 100%;
-//     height: 100%;
-//   }
-// }
-
-// .button2-wrapper {
-//   cursor: pointer;
-//   position: absolute;
-//   left: 45.55%;
-//   // top: 61.09%;
-//   top: 67%;
-//   width: 19.4%;
-//   height: 7.6%;
-//   // background: rgba(253, 247, 247, 0);
-
-//   a {
-//     display: inline-block;
-//     width: 100%;
-//     height: 100%;
-//   }
-// }
-
-// .button-wrapper,
-// .button2-wrapper {
-//   display: none;
-// }
-
 // pc端
 @media screen and (min-width:769px) {
-  .m-bg {
-    display: none;
+    .m-bg {
+        display: none;
 
-    img {
-      display: block;
-    }
-  }
-
-  .homePc {
-    width: 100%;
-    height: 10rem;
-    background: url(../images/homePc.png) no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-
-    .charge {
-      width: 1.11rem;
-      height: 0.5rem;
-      background: rgb(255, 255, 255, 0.2);
-      border-radius: .13rem;
-      font-size: 0.24rem;
-      color: #fff;
-      text-align: center;
-      line-height: 0.5rem;
-      position: absolute;
-      top: 0.16rem;
-      right: 2.77rem;
-    }
-
-    .googlePlay {
-      width: 2.2rem;
-      height: 0.7rem;
-      position: absolute;
-      left: 2.4rem;
-      bottom: 3.4rem;
-    }
-    .appleStore {
-      width: 2.2rem;
-      height: 0.7rem;
-      position: absolute;
-      left: 2.4rem;
-      bottom: 2.5rem;
-    }
-    .apk {
-      width: 2.2rem;
-      height: 0.7rem;
-      position: absolute;
-      left: 2.4rem;
-      bottom: 1.6rem;
-    }
-  }
-
-  .eori {
-    // height: 1.2rem;
-    width: 100%;
-    background: #30312C;
-    color: rgb(255, 255, 255);
-    padding: 0.2rem 0;
-    vertical-align: top;
-    // position: absolute;
-    // top: 0.75rem;
-
-    // .recordfoot {
-    //   color: #fff;
-    //   display: flex;
-    //   justify-content: center;
-    //   align-items: center;
-
-    //   .record {
-    //     display: inline-block;
-    //     padding-right: px2rem(4);
-    //     height: px2rem(28, );
-    //     width: px2rem(32, );
-    //     background: url(../images/icon_police.png) no-repeat;
-    //   }
-    // }
-
-    .gongsi {
-      display: flex;
-      justify-content: center;
-      text-align: center;
-
-      p {
-        font-size: 0.2rem;
-
-        &:nth-child(2) {
-          margin: 0 0.2rem;
+        img {
+            display: block;
         }
-      }
     }
 
-  }
+    .homePc {
+        width: 100%;
+        height: 10rem;
+        background: url(../images/homePc2.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .charge {
+            width: 1.11rem;
+            height: 0.5rem;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: .13rem;
+            font-size: 0.24rem;
+            color: #fff;
+            text-align: center;
+            line-height: 0.5rem;
+            position: absolute;
+            top: 0.16rem;
+            right: 2.77rem;
+        }
+
+        .googlePlay {
+            width: 2.2rem;
+            height: 0.7rem;
+            position: absolute;
+            left: 2.4rem;
+            bottom: 3.4rem;
+        }
+
+        .appleStore {
+            width: 2.2rem;
+            height: 0.7rem;
+            position: absolute;
+            left: 2.4rem;
+            bottom: 2.5rem;
+        }
+
+        .apk {
+            width: 2.2rem;
+            height: 0.7rem;
+            position: absolute;
+            left: 2.4rem;
+            bottom: 1.6rem;
+        }
+    }
+
+    .eori {
+        // height: 1.2rem;
+        width: 100%;
+        background: #30312C;
+        color: rgb(255, 255, 255);
+        padding: 0.2rem 0;
+        vertical-align: top;
+        // position: absolute;
+        // top: 0.8rem;
+
+        .gongsi {
+            display: flex;
+            justify-content: center;
+            text-align: center;
+
+            p {
+                font-size: 0.2rem;
+
+                &:nth-child(2) {
+                    margin: 0 0.2rem;
+                }
+            }
+        }
+
+    }
 
 }
 
 // 移动端
 @media screen and (max-width:768px) {
-  body {
-    background-color: #0C0122;
-  }
-
-  .pc-bg {
-    display: none;
-  }
-
-  .m-bg {
-    display: block;
-  }
-
-  .homeM {
-    width: 100%;
-    // width: px2rem(750, );
-    // height: px2rem(1489, );
-    // height: 19.88rem;
-    height: 14.89rem;
-    background: url(../images/homeM.png) no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-
-    .charge {
-      width: 1.11rem;
-      height: 0.5rem;
-      background: rgb(255, 255, 255, 0.2);
-      border-radius: .13rem;
-      font-size: 0.24rem;
-      color: #fff;
-      text-align: center;
-      line-height: 0.5rem;
-      position: absolute;
-      top: 0.2rem;
-      right: 0.4rem;
-      // left: 50%;
-      // transform: translateX(-50%);
+    body {
+        background-color: #0C0122;
     }
 
-    .swiper {
-      width: 100%;
-      height: 8.6rem;
-      position: absolute;
-      top: 4.8rem;
-      overflow: hidden;
+    .pc-bg {
+        display: none;
+    }
 
-      .swiper-wrapper {
-        width: 60%;
-        height: 100%;
+    .m-bg {
+        display: block;
+    }
 
-        .swiper-slide {
-          img {
+    .homeM {
+        width: 100%;
+        // width: px2rem(750);
+        // height: px2rem(1489);
+        // height: 19.88rem;
+        height: 14.89rem;
+        background: url(../images/homeM.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+
+        .charge {
+            width: 1.11rem;
+            height: 0.5rem;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: .13rem;
+            font-size: 0.24rem;
+            color: #fff;
+            text-align: center;
+            line-height: 0.5rem;
+            position: absolute;
+            top: 0.2rem;
+            right: 0.4rem;
+            // left: 50%;
+            // transform: translateX(-50%);
+        }
+
+        .swiper {
+            width: 100%;
+            height: 8.6rem;
+            position: absolute;
+            top: 4.8rem;
+            overflow: hidden;
+
+            .swiper-wrapper {
+                width: 60%;
+                height: 100%;
+
+                .swiper-slide {
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+
+                .swiper-slide-prev {
+                    width: 100%;
+                    height: 90%;
+                    margin-top: 0.6rem;
+                }
+
+                .swiper-slide-next {
+                    width: 100%;
+                    height: 90%;
+                    margin-top: 0.6rem;
+                }
+            }
+        }
+
+        .logo {
+            position: absolute;
+            bottom: 0.6rem;
+            left: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-evenly;
+
+            img {
+                width: 2.2rem;
+                height: 0.7rem;
+            }
+        }
+    }
+
+    .button-wrapper {
+        display: block;
+        position: absolute;
+        left: px2rem(96);
+        top: px2rem(1314);
+        width: px2rem(560);
+        height: px2rem(92);
+
+        a {
+            display: inline-block;
             width: 100%;
             height: 100%;
-          }
+        }
+    }
+
+    .button2-wrapper {
+        display: block;
+        position: absolute;
+        left: px2rem(232);
+        // top: px2rem(1208);
+        bottom: px2rem(128);
+        width: px2rem(300);
+        height: px2rem(60);
+        background: rgba(255, 255, 255, 0);
+
+        a {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .m-button {
+        display: block;
+    }
+
+    .text-wrapper {
+        padding-left: 0;
+        width: 90%;
+        margin-left: -45%;
+        padding-top: 108px;
+
+        .text {
+            .txt1 {
+                margin-bottom: 10px;
+            }
+
         }
 
-        .swiper-slide-prev {
-          width: 100%;
-          height: 90%;
-          margin-top: 0.6rem;
+        .text1,
+        p {
+            text-align: center;
+        }
+    }
+
+    .eori {
+        // height: 1.2rem;
+        width: 100%;
+        background: #30312C;
+        color: rgb(255, 255, 255);
+        padding: 0.2rem 0;
+        // position: absolute;
+        // top: 0.75rem;
+
+        .recordfoot {
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .record {
+                display: inline-block;
+                padding-right: px2rem(4);
+                height: px2rem(28);
+                width: px2rem(32);
+                background: url(../images/icon_police.png) no-repeat;
+            }
         }
 
-        .swiper-slide-next {
-          width: 100%;
-          height: 90%;
-          margin-top: 0.6rem;
+        .gongsi {
+            display: block;
+            text-align: center;
+
+            p {
+                line-height: 1.3;
+                font-size: 0.2rem;
+
+                &:nth-child(2) {
+                    margin: 0;
+                }
+            }
         }
-      }
-    }
 
-    .logo {
-      position: absolute;
-      bottom: 0.6rem;
-      left: 0;
-      width: 100%;
-      display: flex;
-      justify-content: space-evenly;
+        // div {
+        //   // height: 30px;
+        //   width: 100%;
+        //   text-align: center;
+        //   // line-height: 30px;
+        //   font-size: 14px;
+        // }
 
-      img {
-        width: 2.2rem;
-        height: 0.7rem;
-      }
-    }
-  }
-
-  .button-wrapper {
-    display: block;
-    position: absolute;
-    left: px2rem(96);
-    top: px2rem(1314);
-    width: px2rem(560);
-    height: px2rem(92);
-
-    a {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .button2-wrapper {
-    display: block;
-    position: absolute;
-    left: px2rem(232);
-    // top: px2rem(1208);
-    bottom: px2rem(128);
-    width: px2rem(300);
-    height: px2rem(60);
-    background: rgba(255, 255, 255, 0);
-
-    a {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .m-button {
-    display: block;
-  }
-
-  .text-wrapper {
-    padding-left: 0;
-    width: 90%;
-    margin-left: -45%;
-    padding-top: 108px;
-
-    .text {
-      .txt1 {
-        margin-bottom: 10px;
-      }
-
-    }
-
-    .text1,
-    p {
-      text-align: center;
-    }
-  }
-
-  .eori {
-    // height: 1.2rem;
-    width: 100%;
-    background: #30312C;
-    color: rgb(255, 255, 255);
-    padding: 0.2rem 0;
-    // position: absolute;
-    // top: 0.75rem;
-
-    .recordfoot {
-      color: #fff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .record {
-        display: inline-block;
-        padding-right: px2rem(4);
-        height: px2rem(28, );
-        width: px2rem(32, );
-        background: url(../images/icon_police.png) no-repeat;
-      }
-    }
-
-    .gongsi {
-      display: block;
-      text-align: center;
-
-      p {
-        line-height: 1.3;
-        font-size: 0.2rem;
-
-        &:nth-child(2) {
-          margin: 0;
+        .tit {
+            height: px2rem(120);
+            line-height: px2rem(120);
+            text-align: center;
+            font-size: 20px;
         }
-      }
+
     }
 
-    // div {
-    //   // height: 30px;
-    //   width: 100%;
-    //   text-align: center;
-    //   // line-height: 30px;
-    //   font-size: 14px;
-    // }
-
-    .tit {
-      height: px2rem(120);
-      line-height: px2rem(120);
-      text-align: center;
-      font-size: 20px;
-    }
-
-  }
-
 }
 
 // @media screen and (max-width:375px) {
@@ -459,27 +310,27 @@ html {
 
 
 .toast {
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 10px;
-  width: 100px;
-  font-size: 16px;
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  display: none;
-  z-index: 9;
+    background: rgba(0, 0, 0, 0.9);
+    border-radius: 10px;
+    width: 100px;
+    font-size: 16px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    display: none;
+    z-index: 9;
 }
 
 .tips {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: px2rem(20);
-  width: px2rem(460);
-  z-index: 9;
+    display: none;
+    position: fixed;
+    top: 0;
+    right: px2rem(20);
+    width: px2rem(460);
+    z-index: 9;
 }

view/peko/home/index.html

@@ -28,6 +28,7 @@
   <title>piko</title>
 
   <!-- <link rel="stylesheet" href="./home/css/reset.css"> -->
+  <link rel="shortcut icon" href="./images/pikolive.png" type="image/x-icon">
   <link rel="stylesheet" href="./css/reset.css">
   <link rel="stylesheet" href="./css/index.css">
   <!-- <link rel="stylesheet" href="./home/css/index.css"> -->
@@ -66,7 +67,7 @@
           <!-- <div class="swiper-pagination swp"></div> -->
         </div>
         <div class="logo">
-          <img class="googlePlay" src="./images/googlePlay.png" alt="">
+          <img class="googlePlay" src="./images/googlePlay2.png" alt="">
           <img class="appleStore" src="./images/appleStore.png" alt="">
           <img class="apk" src="./images/apk.png" alt="">
         </div>
@@ -82,10 +83,10 @@
         <a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2020098441号</a>
       </div> -->
       <div class="gongsi">
-        <p>Hong Kong Li Zi Technology Co., Limited</p>
-        <p>香港荔枝科技有限公司</p>
+        <p>Hongkong Han Fei Technology Co., Limited</p>
+        <!-- <p>香港翰飞科技有限公司</p> -->
         <p>CR No:3040005 </p>
-        <p>地址：FLAT/RM 7022 BLK D 7/F,TAK WING IND BLDG,3 TSUN WEN ROAD,TUEN MUN</p>
+        <p>Address：BLDG. 19-21 HING YIP STREET KWUN TONG, KLN</p>
       </div>
     </div>
   </div>

view/peko/home/js/index.js

@@ -103,6 +103,7 @@ $(function () {
     })
     // logo跳转
     $('.googlePlay').click(function () {
+        return
         window.location.href = 'https://play.google.com/store/apps/details?id=com.vele.pekolive'
     })
     $('.appleStore').click(function () {

view/peko/modules/boxActivity/css/index.css

@@ -0,0 +1,396 @@
+html,
+body {
+  width: 100%;
+  background-image: url(../images/bg.png);
+  background-size: 100% 39.94667rem;
+  background-repeat: no-repeat;
+}
+
+.rabbit {
+  z-index: 999;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.back {
+  position: fixed;
+  top: 0.93333rem;
+  left: 0.45333rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.header {
+  width: 10rem;
+  height: 10rem;
+  margin: 0 auto -2rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab {
+  width: 7.86667rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  margin: 0 auto 0;
+  display: flex;
+  justify-content: space-between;
+  background: #1D388F;
+  border: 0.02667rem solid #8FC5FF;
+  box-sizing: border-box;
+  border-radius: 0.16rem;
+}
+
+.tab div {
+  width: 3.94667rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.37333rem;
+}
+
+.tab .atc {
+  color: #fff;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab {
+  width: 8.96rem;
+  height: 2.24rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.90667rem auto 0;
+}
+
+.boxTab div {
+  width: 2.82667rem;
+  height: 100%;
+  position: relative;
+}
+
+.boxTab div .top {
+  width: 1.97333rem;
+  height: 1.97333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.01333rem;
+}
+
+.boxTab div p {
+  width: 100%;
+  text-align: center;
+  color: #696C70;
+  font-size: 0.32rem;
+  position: absolute;
+  left: 0;
+  top: 1.25333rem;
+  font-weight: 500;
+}
+
+.boxTab div span {
+  width: 100%;
+  text-align: center;
+  font-size: 0.29333rem;
+  height: 0.32rem;
+  line-height: 0.32rem;
+  color: #696C70;
+  font-weight: 400;
+  vertical-align: middle;
+  position: absolute;
+  left: 0;
+  top: 1.70667rem;
+}
+
+.boxTab div span .img {
+  width: 0.32rem;
+  height: 0.32rem;
+  display: inline-block;
+  vertical-align: middle;
+  background: url(../images/notDiamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab div span b {
+  vertical-align: middle;
+}
+
+.boxTab .box1 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box1 .top {
+  background: url(../images/notBox1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box2 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box2 .top {
+  background: url(../images/notBox2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box3 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box3 .top {
+  background: url(../images/notBox3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 .top {
+  background: url(../images/box1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act1 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 span b {
+  color: #FFFFFF;
+}
+
+.boxTab .act2 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 .top {
+  background: url(../images/box2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act2 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 span b {
+  color: #FFFFFF;
+}
+
+.boxTab .act3 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 .top {
+  background: url(../images/box3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act3 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 span b {
+  color: #FFFFFF;
+}
+
+.page1 .boxList {
+  width: 9.14667rem;
+  display: block;
+  margin: 0.05333rem auto 0;
+}
+
+.page1 .boxList1 {
+  height: 26.18667rem;
+}
+
+.page1 .boxList2 {
+  height: 20.72rem;
+}
+
+.page1 .boxList3 {
+  height: 21.84rem;
+}
+
+.page2 {
+  display: none;
+  width: 9.14667rem;
+  height: 8.3rem;
+  margin: 0 auto 0;
+  overflow-y: scroll;
+}
+
+.page2::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 .div {
+  width: 9.14667rem;
+  height: 1.97333rem;
+  margin-bottom: 0.10667rem;
+  background: url(../images/liBg.png) no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+}
+
+.page2 .div .leftUser {
+  float: left;
+  width: 1.76rem;
+  margin-right: 0.21333rem;
+  margin-top: 0.21333rem;
+}
+
+.page2 .div .leftUser .tx {
+  display: block;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.page2 .div .leftUser p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.05333rem;
+}
+
+.page2 .div .inFo {
+  float: left;
+  width: 3rem;
+  text-align: center;
+  margin-top: 0.53333rem;
+}
+
+.page2 .div .inFo p {
+  width: 100%;
+  text-align: center;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.32rem;
+  margin-bottom: 0.2rem;
+}
+
+.page2 .div .inFo p b {
+  color: #FFEF8A;
+}
+
+.page2 .div .inFo span {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.32rem;
+}
+
+.page2 .div .inFo span b {
+  color: #7AE9FF;
+}
+
+.page2 .div .rigtUser {
+  float: left;
+  width: 1.76rem;
+  margin-top: 0.21333rem;
+}
+
+.page2 .div .rigtUser .tx {
+  display: block;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.page2 .div .rigtUser p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.05333rem;
+}
+
+.page2 .div .gift {
+  float: right;
+  display: block;
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-top: 0.18667rem;
+}
+
+.disclaimers {
+  width: 100%;
+  margin-top: 0.24rem;
+  margin-bottom: 0.26667rem;
+}
+
+.disclaimers p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.26667rem;
+  margin-bottom: 0.13333rem;
+}
+
+.updata {
+  position: fixed;
+  right: 0.5rem;
+  width: 1rem;
+  height: 1rem;
+  bottom: 1.6rem;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  display: none;
+}

view/peko/modules/boxActivity/css/index.scss

@@ -0,0 +1,413 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background-image: url(../images/bg.png);
+    background-size: 100% px2rem(2996);
+    background-repeat: no-repeat;
+}
+
+.rabbit {
+    z-index: 999;
+    width: px2rem(60);
+    height: px2rem(60);
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70);
+    left: px2rem(34);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(750);
+    margin: 0 auto -2rem;
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.tab {
+    width: px2rem(590);
+    height: px2rem(76);
+    line-height: px2rem(76);
+    margin: 0 auto 0;
+    display: flex;
+    justify-content: space-between;
+    background: #1D388F;
+    border: px2rem(2) solid #8FC5FF;
+    box-sizing: border-box;
+    border-radius: px2rem(12);
+
+    div {
+        width: px2rem(296);
+        text-align: center;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: px2rem(28);
+    }
+
+    .atc {
+        color: #fff;
+        background: url(../images/tabAct.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+
+.boxTab {
+    width: px2rem(672);
+    height: px2rem(168);
+    display: flex;
+    justify-content: space-between;
+    margin: px2rem(68) auto 0;
+
+    div {
+        width: px2rem(212);
+        height: 100%;
+        position: relative;
+
+        .top {
+            width: px2rem(148);
+            height: px2rem(148);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: px2rem(76);
+        }
+
+        p {
+            width: 100%;
+            text-align: center;
+            color: #696C70;
+            font-size: px2rem(24);
+            position: absolute;
+            left: 0;
+            top: px2rem(94);
+            font-weight: 500;
+        }
+
+        span {
+            width: 100%;
+            text-align: center;
+            font-size: px2rem(22);
+            height: px2rem(24);
+            line-height: px2rem(24);
+            color: #696C70;
+            font-weight: 400;
+            vertical-align: middle;
+            position: absolute;
+            left: 0;
+            top: px2rem(128);
+
+            .img {
+                width: px2rem(24);
+                height: px2rem(24);
+                display: inline-block;
+                vertical-align: middle;
+                background: url(../images/notDiamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .box1 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .box2 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .box3 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox3.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .act1 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .act2 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .act3 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box3.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .boxList {
+        width: px2rem(686);
+        display: block;
+        margin: px2rem(4) auto 0;
+    }
+
+    .boxList1 {
+        height: px2rem(1964);
+    }
+
+    .boxList2 {
+        height: px2rem(1554);
+    }
+
+    .boxList3 {
+        height: px2rem(1638);
+    }
+}
+
+.page2 {
+    display: none;
+    width: px2rem(686);
+    height: 8.3rem;
+    margin: 0 auto 0;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .div {
+        width: px2rem(686);
+        height: px2rem(148);
+        margin-bottom: px2rem(8);
+        background: url(../images/liBg.png) no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+
+        .leftUser {
+            float: left;
+            width: px2rem(132);
+            margin-right: px2rem(16);
+            margin-top: px2rem(16);
+
+            .tx {
+                display: block;
+                width: px2rem(80);
+                height: px2rem(80);
+                border-radius: 50%;
+                margin: 0 auto;
+            }
+
+            p {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(22);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-top: px2rem(4);
+            }
+        }
+
+        .inFo {
+            float: left;
+            width: 3rem;
+            text-align: center;
+            margin-top: px2rem(40);
+
+            p {
+                width: 100%;
+                text-align: center;
+                font-weight: 400;
+                color: rgba(255, 255, 255, 0.9);
+                font-size: px2rem(24);
+                margin-bottom: px2rem(15);
+
+                b {
+                    color: #FFEF8A;
+                }
+            }
+
+            span {
+                width: 100%;
+                display: block;
+                text-align: center;
+                font-weight: 400;
+                color: rgba(255, 255, 255, 0.9);
+                font-size: px2rem(24);
+
+                b {
+                    color: #7AE9FF;
+                }
+            }
+        }
+
+        .rigtUser {
+            float: left;
+            width: px2rem(132);
+            margin-top: px2rem(16);
+
+            .tx {
+                display: block;
+                width: px2rem(80);
+                height: px2rem(80);
+                border-radius: 50%;
+                margin: 0 auto;
+            }
+
+            p {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(22);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-top: px2rem(4);
+            }
+        }
+
+        .gift {
+            float: right;
+            display: block;
+            width: px2rem(120);
+            height: px2rem(120);
+            margin-top: px2rem(14);
+        }
+    }
+}
+
+.disclaimers {
+    width: 100%;
+    margin-top: px2rem(18);
+    margin-bottom: px2rem(20);
+
+    p {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(20);
+        margin-bottom: px2rem(10);
+    }
+}
+
+.updata {
+    position: fixed;
+    right: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    bottom: 1.6rem;
+    background: rgba(0, 0, 0, .4);
+    border-radius: 50%;
+    display: none;
+}