修改中奖记录展示

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

@@ -66,13 +66,13 @@ img {
 }
 
 .rank-three .rank-three-detail .user-grade img {
-  height: 0.4rem;
-  width: 0.4rem;
+  height: 0.5rem;
+  width: 1rem;
 }
 
 .rank-three .rank-three-detail .user-grade img:last-child {
-  height: 0.42667rem;
-  width: 0.53333rem;
+  height: 0.5rem;
+  width: 1rem;
   margin-left: 0.05333rem;
 }
 
@@ -177,13 +177,13 @@ img {
 }
 
 .renk-other .rank-other-detail .user-detail .user-grade img {
-  height: 0.4rem;
-  width: 0.4rem;
+  height: 0.5rem;
+  width: 1rem;
 }
 
 .renk-other .rank-other-detail .user-detail .user-grade img:last-child {
-  height: 0.42667rem;
-  width: 0.53333rem;
+  height: 0.5rem;
+  width: 1rem;
   margin-left: 0.05333rem;
 }
 

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

@@ -1,244 +1,247 @@
 @charset "UTF-8";
-@function px2rem($px, $rem:37.5) {
-  @return $px / $rem+rem;
+
+@function px2rem($px) {
+    @return $px / 37.5+rem;
 }
 
 html,
 body {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 img {
-  // width: 100%;
-  vertical-align: top;
+    // width: 100%;
+    vertical-align: top;
 }
 
-@import '../../../common/css/flex.scss';
 
 .rank-three {
-  // position: fixed;
-  // top: 0;
-  // left: 0;
-  width: 100%;
-  height: px2rem(226);
-  background: url("../images/top-bg.png");
-  background-size: 100% 100%;
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    width: 100%;
+    height: px2rem(226);
+    background: url("../images/top-bg.png");
+    background-size: 100% 100%;
 
-  .rank-three-detail {
-    position: absolute;
-    z-index: 2;
-    width: px2rem(110);
-    height: px2rem(160);
-    display: flex;
-    flex-direction: column;
-    // justify-content: center;
-    align-items: center;
-
-    .user-img {
-      width: px2rem(97);
-      height: px2rem(97);
-      position: relative;
-
-      .ranking-bg {
-        width: px2rem(97);
-        height: px2rem(97);
-        position: relative;
-        z-index: 3;
-        background: url("../images/one.png");
-        background-size: 100% 100%;
-      }
-
-      img {
-        width: px2rem(60);
-        height: px2rem(60);
+    .rank-three-detail {
         position: absolute;
-        top: px2rem(18);
-        left: px2rem(18);
-        border-radius: 50%;
+        z-index: 2;
+        width: px2rem(110);
+        height: px2rem(160);
+        display: flex;
+        flex-direction: column;
+        // justify-content: center;
+        align-items: center;
 
-        &.un-url {
+        .user-img {
+            width: px2rem(97);
+            height: px2rem(97);
+            position: relative;
 
-          background: #fff;
-        }
-      }
-    }
+            .ranking-bg {
+                width: px2rem(97);
+                height: px2rem(97);
+                position: relative;
+                z-index: 3;
+                background: url("../images/one.png");
+                background-size: 100% 100%;
+            }
 
-    .user-nick {
-      font-size: px2rem(14);
-      font-weight: bold;
-      color: #fff;
-    }
+            img {
+                width: px2rem(60);
+                height: px2rem(60);
+                position: absolute;
+                top: px2rem(18);
+                left: px2rem(18);
+                border-radius: 50%;
 
-    .user-grade {
-      display: flex;
-      height: px2rem(20);
-      align-items: center;
+                &.un-url {
 
-      img {
-        height: px2rem(15);
-        width: px2rem(15);
-        &:last-child {
-          height: px2rem(16);
-          width: px2rem(20);
-          margin-left: px2rem(2);
+                    background: #fff;
+                }
+            }
         }
 
-        &.active {
-          display: none;
-        }
-      }
-    }
-
-    .user-charm {
-      height: px2rem(22);
-      background: rgba(255, 255, 255, 0.2);
-      min-width: px2rem(70);
-      padding: 0 px2rem(3);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: px2rem(11);
-
-      img {
-        width: px2rem(12);
-        height: px2rem(10);
-        margin-right: px2rem(2);
-      }
-
-      span {
-        color: #7154ee;
-        font-size: px2rem(14);
-      }
-    }
-
-    &:first-child {
-      top: px2rem(7);
-      left: px2rem(132);
-
-      .user-img {
-        .ranking-bg {
-          background: url("../images/one.png");
-          background-size: 100% 100%;
+        .user-nick {
+            font-size: px2rem(14);
+            font-weight: bold;
+            color: #fff;
         }
 
-        img {
-          position: absolute;
+        .user-grade {
+            display: flex;
+            height: px2rem(20);
+            align-items: center;
+
+            img {
+                height: 0.5rem;
+                width: 1rem;
+
+                &:last-child {
+                    height: 0.5rem;
+                    width: 1rem;
+                    margin-left: px2rem(2);
+                }
+
+                &.active {
+                    display: none;
+                }
+            }
         }
-      }
-    }
 
-    &:nth-child(2) {
-      top: px2rem(39);
-      left: px2rem(20);
+        .user-charm {
+            height: px2rem(22);
+            background: rgba(255, 255, 255, 0.2);
+            min-width: px2rem(70);
+            padding: 0 px2rem(3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: px2rem(11);
 
-      .user-img {
-        .ranking-bg {
-          background: url("../images/two.png");
-          background-size: 100% 100%;
+            img {
+                width: px2rem(12);
+                height: px2rem(10);
+                margin-right: px2rem(2);
+            }
+
+            span {
+                color: #7154ee;
+                font-size: px2rem(14);
+            }
         }
-      }
-    }
 
-    &:nth-child(3) {
-      top: px2rem(48);
-      right: px2rem(20);
+        &:first-child {
+            top: px2rem(7);
+            left: px2rem(132);
 
-      .user-img {
-        .ranking-bg {
-          background: url("../images/three.png");
-          background-size: 100% 100%;
+            .user-img {
+                .ranking-bg {
+                    background: url("../images/one.png");
+                    background-size: 100% 100%;
+                }
+
+                img {
+                    position: absolute;
+                }
+            }
+        }
+
+        &:nth-child(2) {
+            top: px2rem(39);
+            left: px2rem(20);
+
+            .user-img {
+                .ranking-bg {
+                    background: url("../images/two.png");
+                    background-size: 100% 100%;
+                }
+            }
+        }
+
+        &:nth-child(3) {
+            top: px2rem(48);
+            right: px2rem(20);
+
+            .user-img {
+                .ranking-bg {
+                    background: url("../images/three.png");
+                    background-size: 100% 100%;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .renk-other {
-  // overflow-y: scroll;
-  // -webkit-overflow-scrolling: touch;
-  // &::-webkit-scrollbar {
-  //   display: none;
-  // }
-  // padding-top: px2rem(230);
+    // overflow-y: scroll;
+    // -webkit-overflow-scrolling: touch;
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
+    // padding-top: px2rem(230);
     padding-bottom: px2rem(20);
-  .rank-other-detail {
-    margin-bottom: px2rem(20);
-    display: flex;
-    align-items: center;
 
-    .user-rank {
-      width: px2rem(45);
-      text-align: center;
-      font-size: px2rem(20);
-      color: #333333;
-    }
-
-    .user-img {
-      width: px2rem(50);
-      height: px2rem(50);
-      border-radius: 50%;
-    }
-
-    .user-detail {
-      margin-left: px2rem(25);
-      width: px2rem(180);
-
-      .nick {
-        font-size: px2rem(15);
-        font-weight: 600;
-        color: #333;
-      }
-
-      .user-grade {
+    .rank-other-detail {
+        margin-bottom: px2rem(20);
         display: flex;
-        height: px2rem(20);
         align-items: center;
 
-        img {
-          height: px2rem(15);
-          width: px2rem(15);
-          &:last-child {
-            height: px2rem(16);
-            width: px2rem(20);
-            margin-left: px2rem(2);
-          }
-
-          &.active {
-            display: none;
-          }
+        .user-rank {
+            width: px2rem(45);
+            text-align: center;
+            font-size: px2rem(20);
+            color: #333333;
+        }
+
+        .user-img {
+            width: px2rem(50);
+            height: px2rem(50);
+            border-radius: 50%;
+        }
+
+        .user-detail {
+            margin-left: px2rem(25);
+            width: px2rem(180);
+
+            .nick {
+                font-size: px2rem(15);
+                font-weight: 600;
+                color: #333;
+            }
+
+            .user-grade {
+                display: flex;
+                height: px2rem(20);
+                align-items: center;
+
+                img {
+                    height: 0.5rem;
+                    width: 1rem;
+
+                    &:last-child {
+                        height: 0.5rem;
+                        width: 1rem;
+                        margin-left: px2rem(2);
+                    }
+
+                    &.active {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .user-charm {
+            height: px2rem(22);
+            background: rgba(255, 255, 255, 0.2);
+            width: px2rem(90);
+            display: flex;
+            align-items: center;
+            border-radius: px2rem(11);
+
+            img {
+                width: px2rem(12);
+                height: px2rem(10);
+                margin-right: px2rem(2);
+            }
+
+            span {
+                color: #333;
+                font-size: px2rem(14);
+            }
         }
-      }
     }
-
-    .user-charm {
-      height: px2rem(22);
-      background: rgba(255, 255, 255, 0.2);
-      width: px2rem(90);
-      display: flex;
-      align-items: center;
-      border-radius: px2rem(11);
-
-      img {
-        width: px2rem(12);
-        height: px2rem(10);
-        margin-right: px2rem(2);
-      }
-
-      span {
-        color: #333;
-        font-size: px2rem(14);
-      }
-    }
-  }
 }
 
-.message{
-  display: none;
-  position: fixed;
-  bottom: px2rem(20);
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: px2rem(16);
-  color: #000;
+.message {
+    display: none;
+    position: fixed;
+    bottom: px2rem(20);
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: px2rem(16);
+    color: #000;
 }

view/peko/modules/charm/index.html

@@ -9,6 +9,7 @@
   <title>魅力值</title>
   <link rel="stylesheet" href="../../common/css/reset.css">
   <link rel="stylesheet" href="../../common/css/swiper.min.css">
+  <link rel="stylesheet" href="../../common/css/flex.css">
   <link rel="stylesheet" href="css/index.css?v=1.1">
   <script src="../../common/js/flexible.js"></script>
 </head>

view/peko/modules/luckyTarot/css/index.css

@@ -1,6 +1,7 @@
+@charset "UTF-8";
 body {
   width: 100%;
-  height: 21.6533333333rem;
+  height: 21.65333rem;
   background: url(../images/bg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto;
@@ -14,26 +15,28 @@ body {
 
 .back {
   position: fixed;
-  top: 0.9333333333rem;
-  left: 0.4533333333rem;
+  top: 0.93333rem;
+  left: 0.45333rem;
   z-index: 9999;
-  width: 0.8266666667rem;
-  height: 0.8266666667rem;
+  width: 0.82667rem;
+  height: 0.82667rem;
 }
+
 .back img {
   width: 100%;
   height: 100%;
 }
+
 .back p {
   color: #fff;
-  font-size: 0.4266666667rem;
+  font-size: 0.42667rem;
   position: absolute;
   width: 9rem;
   left: 0;
   top: 0;
   height: 100%;
   text-align: center;
-  line-height: 0.8266666667rem;
+  line-height: 0.82667rem;
 }
 
 .header {
@@ -47,25 +50,27 @@ body {
 
 .roulette {
   width: 10rem;
-  height: 11.3333333333rem;
+  height: 11.33333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 0rem;
 }
+
 .roulette .roulette_in {
   width: 100%;
   height: 100%;
 }
+
 .roulette .roulette_in canvas {
   width: 100%;
   height: 100%;
 }
 
 .gold_10 {
-  width: 6.4266666667rem;
-  height: 0.6933333333rem;
-  margin: 0rem auto 0.2666666667rem;
+  width: 6.42667rem;
+  height: 0.69333rem;
+  margin: 0rem auto 0.26667rem;
   display: block;
   position: relative;
   z-index: 3;
@@ -73,239 +78,293 @@ body {
 
 .rule {
   width: 0.68rem;
-  height: 1.8666666667rem;
+  height: 1.86667rem;
   background: url(../images/icon.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 2.8133333333rem;
+  top: 2.81333rem;
   right: 0;
   color: #FFE7A9;
-  font-size: 0.2933333333rem;
+  font-size: 0.29333rem;
   text-align: center;
-  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
   box-sizing: border-box;
   z-index: 3;
 }
 
 .record {
   width: 0.68rem;
-  height: 1.8666666667rem;
+  height: 1.86667rem;
   background: url(../images/icon.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 4.8533333333rem;
+  top: 4.85333rem;
   right: 0;
   color: #FFE7A9;
-  font-size: 0.2933333333rem;
+  font-size: 0.29333rem;
   text-align: center;
-  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
   box-sizing: border-box;
   z-index: 9;
 }
 
 .tarotBox {
-  width: 9.8266666667rem;
-  height: 14.1333333333rem;
+  width: 9.82667rem;
+  height: 14.13333rem;
   background: url(../images/middleBg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0;
   position: relative;
+  overflow: hidden;
 }
+
 .tarotBox .tabBox {
   width: 9.56rem;
-  height: 1.3066666667rem;
+  height: 1.30667rem;
   display: flex;
   justify-content: space-between;
   background: url(../images/tabBox.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto;
 }
+
 .tarotBox .tabBox div {
-  width: 3.3733333333rem;
+  width: 3.37333rem;
   height: 100%;
   color: #FEF0C0;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
   text-align: center;
   box-sizing: border-box;
-  padding-top: 0.3466666667rem;
+  padding-top: 0.34667rem;
 }
+
 .tarotBox .tabBox div b {
   color: #FEF0C0;
   font-size: 0.24rem;
   margin-top: 0.04rem;
   display: block;
 }
+
 .tarotBox .tabBox .active1 {
   background: url(../images/active1.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active1 b {
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active2 {
   background: url(../images/active2.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active2 b {
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active3 {
   background: url(../images/active3.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active3 b {
   color: #FFFFFF;
 }
+
 .tarotBox .gradeText {
   position: absolute;
-  left: 0.9866666667rem;
-  top: 1.4666666667rem;
+  left: 0.98667rem;
+  top: 1.46667rem;
   color: #FFEAA9;
   font-size: 0.32rem;
 }
+
 .tarotBox .diamond {
-  min-width: 1.9733333333rem;
-  height: 0.5866666667rem;
-  border-radius: 0.5866666667rem;
-  line-height: 0.5866666667rem;
+  min-width: 1.97333rem;
+  height: 0.58667rem;
+  border-radius: 0.58667rem;
+  line-height: 0.58667rem;
   position: absolute;
   right: 0.96rem;
   top: 1.28rem;
   background: #343662;
   color: #FFFFFF;
-  border: 0.0133333333rem solid #FFF3B1;
+  border: 0.01333rem solid #FFF3B1;
   box-sizing: border-box;
   vertical-align: middle;
 }
+
 .tarotBox .diamond .diamondIcon {
   display: inline-block;
-  width: 0.3866666667rem;
+  width: 0.38667rem;
   height: 0.28rem;
   margin-top: 0.16rem;
-  margin-left: 0.1733333333rem;
+  margin-left: 0.17333rem;
 }
+
 .tarotBox .diamond b {
-  font-size: 0.2666666667rem;
+  font-size: 0.26667rem;
   display: inline-block;
-  margin: 0 0.0933333333rem;
+  margin: 0 0.09333rem;
 }
+
 .tarotBox .diamond .add {
   width: 0.24rem;
   height: 0.24rem;
   display: inline-block;
-  margin-top: 0.1733333333rem;
-  margin-right: 0.1866666667rem;
+  margin-top: 0.17333rem;
+  margin-right: 0.18667rem;
 }
+
 .tarotBox .cardBox {
-  width: 1.9733333333rem;
-  height: 3.2133333333rem;
+  width: 1.97333rem;
+  height: 3.21333rem;
   position: absolute;
   z-index: 3;
 }
+
+.tarotBox .cardBox span {
+  text-align: center;
+  font-size: 0.34667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 0.3rem;
+  top: 0.3rem;
+}
+
 .tarotBox .card1 {
   background: url(../images/card.png) no-repeat;
   background-size: 100% 100%;
+  color: #64CCF3;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
+
 .tarotBox .card2 {
   background: url(../images/card2.png) no-repeat;
   background-size: 100% 100%;
   display: none;
+  color: #DC8FF0;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
+
 .tarotBox .card3 {
   background: url(../images/card3.png) no-repeat;
   background-size: 100% 100%;
   display: none;
+  color: #FFEB3B;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
+
 .tarotBox .card1_active {
   background: url(../images/card1_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card2_active {
   background: url(../images/card2_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card3_active {
   background: url(../images/card3_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_not {
   background: url(../images/not.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning1 {
   background: url(../images/winning1.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning2 {
   background: url(../images/winning2.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning3 {
   background: url(../images/winning3.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .cardBox0 {
-  left: 0.9466666667rem;
-  top: 2.0933333333rem;
+  left: 0.94667rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox1 {
-  left: 2.9866666667rem;
-  top: 2.0933333333rem;
+  left: 2.98667rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox2 {
   left: 5.04rem;
-  top: 2.0933333333rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox3 {
   left: 7.08rem;
-  top: 2.0933333333rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox4 {
   left: 7.08rem;
   top: 5.52rem;
 }
+
 .tarotBox .cardBox5 {
   left: 7.08rem;
-  top: 8.8533333333rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox6 {
   left: 5.04rem;
-  top: 8.8533333333rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox7 {
-  left: 2.9866666667rem;
-  top: 8.8533333333rem;
+  left: 2.98667rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox8 {
-  left: 0.9466666667rem;
-  top: 8.8533333333rem;
+  left: 0.94667rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox9 {
-  left: 0.9466666667rem;
+  left: 0.94667rem;
   top: 5.52rem;
 }
+
 .tarotBox .cardBoxBut {
-  width: 2.5066666667rem;
-  height: 0.9866666667rem;
+  width: 2.50667rem;
+  height: 0.98667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.4666666667rem;
+  top: 7.46667rem;
   z-index: 3;
 }
+
 .tarotBox .butAgain {
-  width: 2.5066666667rem;
-  height: 0.9866666667rem;
+  width: 2.50667rem;
+  height: 0.98667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.4666666667rem;
+  top: 7.46667rem;
   display: none;
   z-index: 3;
 }
+
 .tarotBox .gonggao {
   width: 100%;
   height: 1.3rem;
@@ -315,27 +374,32 @@ body {
   top: 12.25rem;
   overflow: hidden;
 }
+
 .tarotBox .gonggao .ul1 {
   width: 100%;
   height: 100%;
 }
+
 .tarotBox .gonggao .ul1 li {
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 0.32rem;
-  margin-bottom: 0.1466666667rem;
+  margin-bottom: 0.14667rem;
 }
+
 .tarotBox .gonggao .ul1 li b {
   color: #FFEAA9;
 }
+
 .tarotBox .gonggao .ul1 li i {
   font-style: normal;
   color: #80E6FF;
 }
+
 .tarotBox .cardBoxText_gift {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -344,9 +408,10 @@ body {
   font-size: 0.4rem;
   text-align: center;
 }
+
 .tarotBox .cardBoxText_gx {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -355,22 +420,26 @@ body {
   padding-top: 0.88rem;
   display: none;
 }
+
 .tarotBox .cardBoxText_gx p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #FFE26D;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText_gx p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText_gx p b {
   color: #FFE26D;
 }
+
 .tarotBox .cardBoxText_no {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -379,22 +448,26 @@ body {
   padding-top: 0.88rem;
   display: none;
 }
+
 .tarotBox .cardBoxText_no p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #fff;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText_no p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText_no p b {
   color: #80E6FF;
 }
+
 .tarotBox .cardBoxText {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -403,31 +476,37 @@ body {
   padding-top: 0.88rem;
   z-index: 3;
 }
+
 .tarotBox .cardBoxText p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #fff;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText p b {
   color: #80E6FF;
 }
+
 .tarotBox .star {
   width: 4.48rem;
-  height: 3.8666666667rem;
+  height: 3.86667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 5.52rem;
 }
+
 .tarotBox .star .star_in {
   width: 100%;
   height: 100%;
 }
+
 .tarotBox .star .star_in canvas {
   width: 100%;
   height: 100%;
@@ -443,35 +522,40 @@ h3 {
 
 .rule_pub {
   position: fixed;
+  right: 0;
+  bottom: 0;
   left: 0;
   top: 0;
-  bottom: 0;
-  right: 0;
   z-index: 99999;
   background: rgba(0, 0, 0, 0.4);
   display: none;
+  height: 100vh;
+  width: 100vw;
 }
+
 .rule_pub .rule_pub_in {
-  width: 8.72rem;
-  height: 11.6533333333rem;
+  width: 8rem;
+  height: 10.93333rem;
   background: url(../images/rule.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
   left: 50%;
-  top: 50%;
+  top: 45%;
   transform: translate(-50%, -50%);
 }
+
 .rule_pub .rule_pub_in .close {
   position: absolute;
-  width: 0.9066666667rem;
-  height: 0.9066666667rem;
+  width: 0.90667rem;
+  height: 0.90667rem;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.3333333333rem;
+  bottom: -1.33333rem;
 }
 
 .winningRecord {
   position: fixed;
+  height: 21.65333rem;
   left: 0;
   top: 0;
   bottom: 0;
@@ -479,78 +563,88 @@ h3 {
   z-index: 99999;
   background: rgba(0, 0, 0, 0.4);
   display: none;
+  height: 100vh;
+  width: 100vw;
 }
+
 .winningRecord .winningRecord_in {
   width: 8.72rem;
-  height: 11.6533333333rem;
+  height: 10.93333rem;
   background: url(../images/winningRecord.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
   left: 50%;
-  top: 50%;
+  top: 45%;
   transform: translate(-50%, -50%);
 }
+
 .winningRecord .winningRecord_in .title {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 0.4266666667rem;
+  margin-bottom: 0.42667rem;
 }
+
 .winningRecord .winningRecord_in .title div {
   width: 25%;
   color: #FFFFFF;
-  font-size: 0.3733333333rem;
-  margin-top: 2.1866666667rem;
+  font-size: 0.37333rem;
+  margin-top: 2.18667rem;
   text-align: center;
 }
+
 .winningRecord .winningRecord_in ul {
   width: 100%;
   box-sizing: border-box;
   padding: 0 0.04rem;
-  height: 8rem;
+  height: 7.7rem;
   margin: 0 auto;
   overflow-y: scroll;
 }
+
 .winningRecord .winningRecord_in ul::-webkit-scrollbar {
   width: 0;
   display: none;
 }
+
 .winningRecord .winningRecord_in ul li {
   background: none;
   width: 100%;
-  height: 1.0666666667rem;
-  line-height: 1.0666666667rem;
+  height: 1.33333rem;
   color: #FFEE9D;
-  font-size: 0.3466666667rem;
+  font-size: 0.34667rem;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
+  word-wrap: break-word;
+  /* 使用自动换行功能 */
+  margin-bottom: 0.13333rem;
 }
+
 .winningRecord .winningRecord_in ul li div {
   text-align: center;
   width: 25%;
 }
-.winningRecord .winningRecord_in ul li .box {
-  line-height: 1.0666666667rem;
-}
+
 .winningRecord .winningRecord_in ul li .box_acitve {
   line-height: 0.45rem;
-  margin-top: 0.1rem;
 }
+
 .winningRecord .winningRecord_in ul li .time {
   line-height: 0.4rem;
-  margin-top: 0.2rem;
 }
+
 .winningRecord .winningRecord_in ul .active {
   background: rgba(135, 133, 243, 0.6);
 }
+
 .winningRecord .winningRecord_in .close {
   position: absolute;
-  width: 0.9066666667rem;
-  height: 0.9066666667rem;
+  width: 0.90667rem;
+  height: 0.90667rem;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.3333333333rem;
+  bottom: -1.33333rem;
 }
 
 .shade-mask-fragmentNum {
@@ -563,6 +657,7 @@ h3 {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.6);
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum {
   position: absolute;
   top: 50%;
@@ -577,45 +672,49 @@ h3 {
   flex-direction: column;
   align-items: center;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title {
   font-size: 0.48rem;
   font-weight: bold;
   color: #333333;
-  margin-top: 0.5066666667rem;
+  margin-top: 0.50667rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum img {
   width: 1.6rem;
   width: 1.6rem;
   margin-top: 1.44rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum p {
   font-size: 0.4rem;
   font-weight: 600;
   color: #333333;
-  margin-top: 0.6666666667rem;
+  margin-top: 0.66667rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap {
   display: flex;
   justify-content: space-between;
-  width: 6.8266666667rem;
-  height: 1.0133333333rem;
+  width: 6.82667rem;
+  height: 1.01333rem;
   margin-top: 1.2rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn,
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
   width: 3.2rem;
-  height: 1.0133333333rem;
-  line-height: 1.0133333333rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
   text-align: center;
-  border-radius: 0.5066666667rem;
-  font-size: 0.3733333333rem;
+  border-radius: 0.50667rem;
+  font-size: 0.37333rem;
   font-weight: 600;
   background-color: #EAE5FC;
   color: #7154EE;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
   background-color: #735FFE;
   color: #fff;
 }
-
-/*# sourceMappingURL=index.css.map */

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

@@ -1,12 +1,12 @@
-@function px2rem($px, $rem:75) {
-    @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 html {}
 
 body {
     width: 100%;
-    height: px2rem(1624, );
+    height: px2rem(1624);
     background: url(../images/bg.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
@@ -21,11 +21,11 @@ body {
 
 .back {
     position: fixed;
-    top: px2rem(70, );
-    left: px2rem(34, );
+    top: px2rem(70);
+    left: px2rem(34);
     z-index: 9999;
-    width: px2rem(62, );
-    height: px2rem(62, );
+    width: px2rem(62);
+    height: px2rem(62);
 
     img {
         width: 100%;
@@ -34,33 +34,33 @@ body {
 
     p {
         color: #fff;
-        font-size: px2rem(32, );
+        font-size: px2rem(32);
         position: absolute;
         width: 9rem;
         left: 0;
         top: 0;
         height: 100%;
         text-align: center;
-        line-height: px2rem(62, );
+        line-height: px2rem(62);
     }
 }
 
 .header {
-    width: px2rem(684, );
-    height: px2rem(228, );
-    margin: 0 auto px2rem(0, );
+    width: px2rem(684);
+    height: px2rem(228);
+    margin: 0 auto px2rem(0);
     display: block;
     position: relative;
     z-index: 3;
 }
 
 .roulette {
-    width: px2rem(750, );
-    height: px2rem(850, );
+    width: px2rem(750);
+    height: px2rem(850);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    top: px2rem(0, );
+    top: px2rem(0);
 
     .roulette_in {
         width: 100%;
@@ -74,57 +74,58 @@ body {
 }
 
 .gold_10 {
-    width: px2rem(482, );
-    height: px2rem(52, );
-    margin: px2rem(0, ) auto px2rem(20, );
+    width: px2rem(482);
+    height: px2rem(52);
+    margin: px2rem(0) auto px2rem(20);
     display: block;
     position: relative;
     z-index: 3;
 }
 
 .rule {
-    width: px2rem(51, );
-    height: px2rem(140, );
+    width: px2rem(51);
+    height: px2rem(140);
     background: url(../images/icon.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: px2rem(211, );
+    top: px2rem(211);
     right: 0;
     color: #FFE7A9;
-    font-size: px2rem(22, );
+    font-size: px2rem(22);
     text-align: center;
-    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
     box-sizing: border-box;
     z-index: 3;
 }
 
 .record {
-    width: px2rem(51, );
-    height: px2rem(140, );
+    width: px2rem(51);
+    height: px2rem(140);
     background: url(../images/icon.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: px2rem(364, );
+    top: px2rem(364);
     right: 0;
     color: #FFE7A9;
-    font-size: px2rem(22, );
+    font-size: px2rem(22);
     text-align: center;
-    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
     box-sizing: border-box;
     z-index: 9;
 }
 
 .tarotBox {
-    width: px2rem(737, );
-    height: px2rem(1060, );
+    width: px2rem(737);
+    height: px2rem(1060);
     background: url(../images/middleBg.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto 0;
     position: relative;
+    overflow: hidden;
 
     .tabBox {
-        width: px2rem(717, );
-        height: px2rem(98, );
+        width: px2rem(717);
+        height: px2rem(98);
         display: flex;
         justify-content: space-between;
         background: url(../images/tabBox.png) no-repeat;
@@ -132,18 +133,18 @@ body {
         margin: 0 auto;
 
         div {
-            width: px2rem(253, );
+            width: px2rem(253);
             height: 100%;
             color: #FEF0C0;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
             text-align: center;
             box-sizing: border-box;
-            padding-top: px2rem(26, );
+            padding-top: px2rem(26);
 
             b {
                 color: #FEF0C0;
-                font-size: px2rem(18, );
-                margin-top: px2rem(3, );
+                font-size: px2rem(18);
+                margin-top: px2rem(3);
                 display: block;
             }
         }
@@ -181,60 +182,74 @@ body {
 
     .gradeText {
         position: absolute;
-        left: px2rem(74, );
-        top: px2rem(110, );
+        left: px2rem(74);
+        top: px2rem(110);
         color: #FFEAA9;
-        font-size: px2rem(24, );
+        font-size: px2rem(24);
     }
 
     .diamond {
-        min-width: px2rem(148, );
-        height: px2rem(44, );
-        border-radius: px2rem(44, );
-        line-height: px2rem(44, );
+        min-width: px2rem(148);
+        height: px2rem(44);
+        border-radius: px2rem(44);
+        line-height: px2rem(44);
         position: absolute;
-        right: px2rem(72, );
-        top: px2rem(96, );
+        right: px2rem(72);
+        top: px2rem(96);
         background: #343662;
         color: #FFFFFF;
-        border: px2rem(1, ) solid #FFF3B1;
+        border: px2rem(1) solid #FFF3B1;
         box-sizing: border-box;
         vertical-align: middle;
 
         .diamondIcon {
             display: inline-block;
-            width: px2rem(29, );
-            height: px2rem(21, );
-            margin-top: px2rem(12, );
-            margin-left: px2rem(13, );
+            width: px2rem(29);
+            height: px2rem(21);
+            margin-top: px2rem(12);
+            margin-left: px2rem(13);
         }
 
         b {
-            font-size: px2rem(20, );
+            font-size: px2rem(20);
             display: inline-block;
-            margin: 0 px2rem(7, );
+            margin: 0 px2rem(7);
         }
 
         .add {
-            width: px2rem(18, );
-            height: px2rem(18, );
+            width: px2rem(18);
+            height: px2rem(18);
             display: inline-block;
-            margin-top: px2rem(13, );
-            margin-right: px2rem(14, );
+            margin-top: px2rem(13);
+            margin-right: px2rem(14);
         }
     }
 
     .cardBox {
-        width: px2rem(148, );
-        height: px2rem(241, );
+        width: px2rem(148);
+        height: px2rem(241);
+        // line-height: px2rem(241);
         position: absolute;
         z-index: 3;
+
         // transition: all 1s;
+        span {
+            text-align: center;
+            font-size: px2rem(26);
+            font-weight: 600;
+            position: absolute;
+            // left: px2rem(13);
+            // top: px2rem(10);
+            left: 0.3rem;
+            top: 0.3rem;
+        }
     }
 
     .card1 {
         background: url(../images/card.png) no-repeat;
         background-size: 100% 100%;
+        color: #64CCF3;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
 
@@ -242,6 +257,8 @@ body {
         background: url(../images/card2.png) no-repeat;
         background-size: 100% 100%;
         display: none;
+        color: #DC8FF0;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
 
@@ -249,6 +266,8 @@ body {
         background: url(../images/card3.png) no-repeat;
         background-size: 100% 100%;
         display: none;
+        color: #FFEB3B;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
     .card1_active {
@@ -287,72 +306,72 @@ body {
     }
 
     .cardBox0 {
-        left: px2rem(71, );
-        top: px2rem(157, );
+        left: px2rem(71);
+        top: px2rem(157);
     }
 
     .cardBox1 {
-        left: px2rem(224, );
-        top: px2rem(157, );
+        left: px2rem(224);
+        top: px2rem(157);
     }
 
     .cardBox2 {
-        left: px2rem(378, );
-        top: px2rem(157, );
+        left: px2rem(378);
+        top: px2rem(157);
     }
 
     .cardBox3 {
-        left: px2rem(531, );
-        top: px2rem(157, );
+        left: px2rem(531);
+        top: px2rem(157);
     }
 
     .cardBox4 {
-        left: px2rem(531, );
-        top: px2rem(414, );
+        left: px2rem(531);
+        top: px2rem(414);
     }
 
     .cardBox5 {
-        left: px2rem(531, );
-        top: px2rem(664, );
+        left: px2rem(531);
+        top: px2rem(664);
     }
 
     .cardBox6 {
-        left: px2rem(378, );
-        top: px2rem(664, );
+        left: px2rem(378);
+        top: px2rem(664);
     }
 
     .cardBox7 {
-        left: px2rem(224, );
-        top: px2rem(664, );
+        left: px2rem(224);
+        top: px2rem(664);
     }
 
     .cardBox8 {
-        left: px2rem(71, );
-        top: px2rem(664, );
+        left: px2rem(71);
+        top: px2rem(664);
     }
 
     .cardBox9 {
-        left: px2rem(71, );
-        top: px2rem(414, );
+        left: px2rem(71);
+        top: px2rem(414);
     }
 
     .cardBoxBut {
-        width: px2rem(188, );
-        height: px2rem(74, );
+        width: px2rem(188);
+        height: px2rem(74);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(560, );
+        top: px2rem(560);
         z-index: 3;
     }
 
     .butAgain {
-        width: px2rem(188, );
-        height: px2rem(74, );
+        width: px2rem(188);
+        height: px2rem(74);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(560, );
+        top: px2rem(560);
         display: none;
         z-index: 3;
     }
@@ -374,8 +393,8 @@ body {
                 width: 100%;
                 text-align: center;
                 color: #fff;
-                font-size: px2rem(24, );
-                margin-bottom: px2rem(11, );
+                font-size: px2rem(24);
+                margin-bottom: px2rem(11);
 
                 b {
                     color: #FFEAA9;
@@ -390,34 +409,34 @@ body {
     }
 
     .cardBoxText_gift {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(432, );
+        top: px2rem(432);
         color: #FEF0C0;
-        font-size: px2rem(30, );
+        font-size: px2rem(30);
         text-align: center;
     }
 
     .cardBoxText_gx {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         display: none;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #FFE26D;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -430,22 +449,22 @@ body {
     }
 
     .cardBoxText_no {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         display: none;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #fff;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -458,22 +477,22 @@ body {
     }
 
     .cardBoxText {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         z-index: 3;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #fff;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -486,12 +505,12 @@ body {
     }
 
     .star {
-        width: px2rem(336, );
-        height: px2rem(290, );
+        width: px2rem(336);
+        height: px2rem(290);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
 
         .star_in {
             width: 100%;
@@ -507,45 +526,48 @@ body {
 
 h3 {
     width: 100%;
-    margin-bottom: px2rem(12, );
+    margin-bottom: px2rem(12);
     color: #D7D9F7;
-    font-size: px2rem(18, );
+    font-size: px2rem(18);
     text-align: center;
 }
 
 .rule_pub {
     position: fixed;
+    right: 0;
+    bottom: 0;
     left: 0;
     top: 0;
-    bottom: 0;
-    right: 0;
     z-index: 99999;
     background: rgba(0, 0, 0, .4);
     display: none;
+    height: 100vh;
+    width: 100vw;
 
     .rule_pub_in {
-        width: px2rem(654, );
-        height: px2rem(874, );
+        width: px2rem(600);
+        height: px2rem(820);
         background: url(../images/rule.png) no-repeat;
         background-size: 100% 100%;
         position: relative;
         left: 50%;
-        top: 50%;
+        top: 45%;
         transform: translate(-50%, -50%);
 
         .close {
             position: absolute;
-            width: px2rem(68, );
-            height: px2rem(68, );
+            width: px2rem(68);
+            height: px2rem(68);
             left: 50%;
             transform: translateX(-50%);
-            bottom: px2rem(-100, );
+            bottom: px2rem(-100);
         }
     }
 }
 
 .winningRecord {
     position: fixed;
+    height: px2rem(1624);
     left: 0;
     top: 0;
     bottom: 0;
@@ -553,28 +575,30 @@ h3 {
     z-index: 99999;
     background: rgba(0, 0, 0, .4);
     display: none;
+    height: 100vh;
+    width: 100vw;
 
     .winningRecord_in {
-        width: px2rem(654, );
-        height: px2rem(874, );
+        width: px2rem(654);
+        height: px2rem(820);
         background: url(../images/winningRecord.png) no-repeat;
         background-size: 100% 100%;
         position: relative;
         left: 50%;
-        top: 50%;
+        top: 45%;
         transform: translate(-50%, -50%);
 
         .title {
             width: 100%;
             display: flex;
             justify-content: space-between;
-            margin-bottom: px2rem(32, );
+            margin-bottom: px2rem(32);
 
             div {
                 width: 25%;
                 color: #FFFFFF;
-                font-size: px2rem(28, );
-                margin-top: px2rem(164, );
+                font-size: px2rem(28);
+                margin-top: px2rem(164);
                 text-align: center;
             }
         }
@@ -582,8 +606,8 @@ h3 {
         ul {
             width: 100%;
             box-sizing: border-box;
-            padding: 0 px2rem(3, );
-            height: 8rem;
+            padding: 0 px2rem(3);
+            height: 7.7rem;
             margin: 0 auto;
             overflow-y: scroll;
 
@@ -595,31 +619,32 @@ h3 {
             li {
                 background: none;
                 width: 100%;
-                height: px2rem(80, );
-                line-height: px2rem(80, );
+                height: px2rem(100);
+                // line-height: px2rem(100);
                 color: #FFEE9D;
-                font-size: px2rem(26, );
+                font-size: px2rem(26);
                 display: flex;
                 justify-content: space-between;
                 overflow: hidden;
-
+                word-wrap: break-word; /* 使用自动换行功能 */
+                margin-bottom: px2rem(10);
                 div {
                     text-align: center;
                     width: 25%;
                 }
 
                 .box {
-                    line-height: px2rem(80, );
+                    // line-height: px2rem(100);
                 }
 
                 .box_acitve {
                     line-height: 0.45rem;
-                    margin-top: 0.1rem;
+                    // margin-top: 0.1rem;
                 }
 
                 .time {
                     line-height: 0.4rem;
-                    margin-top: 0.2rem;
+                    // margin-top: 0.2rem;
                 }
             }
 
@@ -630,11 +655,11 @@ h3 {
 
         .close {
             position: absolute;
-            width: px2rem(68, );
-            height: px2rem(68, );
+            width: px2rem(68);
+            height: px2rem(68);
             left: 50%;
             transform: translateX(-50%);
-            bottom: px2rem(-100, );
+            bottom: px2rem(-100);
         }
     }
 }

view/peko/modules/luckyTarot/index.html

@@ -9,7 +9,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>幸運塔羅</title>
     <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/index.css?v=1.0">
 </head>
 
 <body>
@@ -47,38 +47,38 @@
             <img src="./images/add.png" alt="" class="add">
         </div>
         <!-- 默認卡片 -->
-        <div class="cardBox cardBox0 card1"></div>
-        <div class="cardBox cardBox1 card1"></div>
-        <div class="cardBox cardBox2 card1"></div>
-        <div class="cardBox cardBox3 card1"></div>
-        <div class="cardBox cardBox4 card1"></div>
-        <div class="cardBox cardBox5 card1"></div>
-        <div class="cardBox cardBox6 card1"></div>
-        <div class="cardBox cardBox7 card1"></div>
-        <div class="cardBox cardBox8 card1"></div>
-        <div class="cardBox cardBox9 card1"></div>
+        <div class="cardBox cardBox0 card1"><span>0</span></div>
+        <div class="cardBox cardBox1 card1"><span>1</span></div>
+        <div class="cardBox cardBox2 card1"><span>2</span></div>
+        <div class="cardBox cardBox3 card1"><span>3</span></div>
+        <div class="cardBox cardBox4 card1"><span>4</span></div>
+        <div class="cardBox cardBox5 card1"><span>5</span></div>
+        <div class="cardBox cardBox6 card1"><span>6</span></div>
+        <div class="cardBox cardBox7 card1"><span>7</span></div>
+        <div class="cardBox cardBox8 card1"><span>8</span></div>
+        <div class="cardBox cardBox9 card1"><span>9</span></div>
         <!-- 中級卡片 -->
-        <div class="cardBox cardBox0 card2"></div>
-        <div class="cardBox cardBox1 card2"></div>
-        <div class="cardBox cardBox2 card2"></div>
-        <div class="cardBox cardBox3 card2"></div>
-        <div class="cardBox cardBox4 card2"></div>
-        <div class="cardBox cardBox5 card2"></div>
-        <div class="cardBox cardBox6 card2"></div>
-        <div class="cardBox cardBox7 card2"></div>
-        <div class="cardBox cardBox8 card2"></div>
-        <div class="cardBox cardBox9 card2"></div>
+        <div class="cardBox cardBox0 card2"><span>0</span></div>
+        <div class="cardBox cardBox1 card2"><span>1</span></div>
+        <div class="cardBox cardBox2 card2"><span>2</span></div>
+        <div class="cardBox cardBox3 card2"><span>3</span></div>
+        <div class="cardBox cardBox4 card2"><span>4</span></div>
+        <div class="cardBox cardBox5 card2"><span>5</span></div>
+        <div class="cardBox cardBox6 card2"><span>6</span></div>
+        <div class="cardBox cardBox7 card2"><span>7</span></div>
+        <div class="cardBox cardBox8 card2"><span>8</span></div>
+        <div class="cardBox cardBox9 card2"><span>9</span></div>
         <!-- 高級卡片 -->
-        <div class="cardBox cardBox0 card3"></div>
-        <div class="cardBox cardBox1 card3"></div>
-        <div class="cardBox cardBox2 card3"></div>
-        <div class="cardBox cardBox3 card3"></div>
-        <div class="cardBox cardBox4 card3"></div>
-        <div class="cardBox cardBox5 card3"></div>
-        <div class="cardBox cardBox6 card3"></div>
-        <div class="cardBox cardBox7 card3"></div>
-        <div class="cardBox cardBox8 card3"></div>
-        <div class="cardBox cardBox9 card3"></div>
+        <div class="cardBox cardBox0 card3"><span>0</span></div>
+        <div class="cardBox cardBox1 card3"><span>1</span></div>
+        <div class="cardBox cardBox2 card3"><span>2</span></div>
+        <div class="cardBox cardBox3 card3"><span>3</span></div>
+        <div class="cardBox cardBox4 card3"><span>4</span></div>
+        <div class="cardBox cardBox5 card3"><span>5</span></div>
+        <div class="cardBox cardBox6 card3"><span>6</span></div>
+        <div class="cardBox cardBox7 card3"><span>7</span></div>
+        <div class="cardBox cardBox8 card3"><span>8</span></div>
+        <div class="cardBox cardBox9 card3"><span>9</span></div>
         <!-- 女神眷顧妳 -->
         <div class="cardBoxText_gift">願幸運之神眷顧妳</div>
         <!-- 中獎文按提示 -->
@@ -169,4 +169,4 @@
 <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/index.js"></script>
+<script src="./js/index.js?v=1.0"></script>

view/peko/modules/luckyTarot/js/index.js

@@ -32,6 +32,7 @@ var gearPositionActive = 0;//當前選澤的檔位
 var prodId = [];//檔位類型
 var prodIdActive;
 var lock = true;//鎖
+var lock2 = true;
 var page = 1;//頁碼
 var scrollLock = true;
 var arrLast = []//記錄上次開獎的數組
@@ -58,7 +59,6 @@ $(function () {
             })
             getAdvertising();
             productList();
-            getUserInfo();
             svgaFun();
             svgaFun2();
         }, 100)
@@ -161,6 +161,7 @@ function productList () {
                     prodId.push(res.prodId);
                     $(`.tarotBox .tabBox .tabBox${i + 1} b`).text(`${res.prodNeedPrice}鉆/張`)
                 })
+                getUserInfo();
             } else {
                 toastMsg(res.message)
             }
@@ -174,7 +175,7 @@ function productList () {
 }
 // 獲取用戶信息
 const getUserInfo = () => {
-    showLoading()
+    // showLoading()
     networkRequest({
         type: 'POST',
         url: urlPrefix + '/seekElfin/user/info',
@@ -211,11 +212,12 @@ const recordPage = () => {
             if (res.code == 200) {
                 var str = ''
                 res.data.records.forEach((res, i) => {
+                            // <div>${JSON.parse(res.selectdNo).length}張</div>
                     str += `
                         <li calss="${i % 2 == 0 ? 'active' : ''}">
                             <div>${res.prodName}</div>
-                            <div>${JSON.parse(res.selectdNo).length}張</div>
-                            <div class="box ${res.win ? 'box_acitve' : ''}">${res.win ? `中獎<br>${res.receiveGoldNum}鉆石` : '未中獎'}</div>
+                            <div>${res.selectdNo}</div>
+                            <div class="box ${res.win ? 'box_acitve' : 'box_acitve'}">${res.win ? `中獎號碼: ${res.drawNum}<br>${res.receiveGoldNum}鉆石` :`未中獎<br>中獎號碼: ${res.drawNum}`}</div>
                             <div class="time">${dateFormat(res.createTime, 'yyyy.MM.dd')}<br>${dateFormat(res.createTime, 'hh:mm:ss')}</div>
                         </li>
                     `
@@ -343,7 +345,7 @@ function kineticEffect (arr, bool, data) {
             $('.tarotBox .cardBoxText').hide();
             $('.tarotBox .cardBoxText_gift').hide();
             $('.cardBoxText_gx').html(`
-                <p>翻到鉆石卡!</p>
+                <p>翻到幸運數字${data.data.drawNum}！</p>
                 <p>獲得 <b>${data.data.receiveGoldNum}</b> 鉆石</p>
             `)
             $('.cardBoxText_gx').show();
@@ -360,28 +362,31 @@ function kineticEffect (arr, bool, data) {
 }
 // 檔位tab切換按鈕
 $('.tarotBox .tabBox div').click(function () {
-    var i = $(this).index() + 1;
-    // 切換tab樣式
-    $('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
-    $(this).addClass(`active${i}`);
-    // 切換卡牌樣式
-    $('.tarotBox .cardBox').hide();
-    $(`.tarotBox .card${i}`).show();
-    // 切換按鈕樣式
-    $('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
-    // if (i == 1) {
-    gearPositionActive = gearPosition[i - 1];
-    prodIdActive = prodId[i - 1];
-    $('.tarotBox .gradeText b').text(gearPositionActive * 10);
-    // } else if (i == 2) {
-    //     gearPosition = 1000;
-    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
-    // } else {
-    //     gearPosition = 10000;
-    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
-    // }
-    // 清空默認樣式
-    initialStytle();
+    if (lock) {
+        var i = $(this).index() + 1;
+        // 切換tab樣式
+        $('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
+        $(this).addClass(`active${i}`);
+        // 切換卡牌樣式
+        $('.tarotBox .cardBox').hide();
+        $(`.tarotBox .card${i}`).show();
+        // 切換按鈕樣式
+        $('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
+        // if (i == 1) {
+        gearPositionActive = gearPosition[i - 1];
+        prodIdActive = prodId[i - 1];
+        $('.tarotBox .gradeText b').text(gearPositionActive * 10);
+        console.log(gearPositionActive);
+        // } else if (i == 2) {
+        //     gearPosition = 1000;
+        //     $('.tarotBox .gradeText b').text(gearPosition * 10);
+        // } else {
+        //     gearPosition = 10000;
+        //     $('.tarotBox .gradeText b').text(gearPosition * 10);
+        // }
+        // 清空默認樣式
+        initialStytle();
+    }
 })
 // 選擇初級卡片按鈕
 $('.tarotBox .card1').click(function () {
@@ -433,6 +438,7 @@ $('.tarotBox .cardBoxBut').click(function () {
 // 再翻一次按鈕
 $('.butAgain').click(function () {
     initialStytle(true);
+    lock = true;
 })
 // 跳轉充值頁面
 $('.tarotBox .diamond').click(() => {
@@ -461,6 +467,7 @@ $('.tarotBox .diamond').click(() => {
 })
 // 打開規則
 $('.rule').click(function () {
+    $(window).scrollTop(0)
     bodyScroolFun(true);
     $('.rule_pub ').show();
 })
@@ -471,6 +478,7 @@ $('.rule_pub .rule_pub_in .close').click(function () {
 })
 // 打開記錄
 $('.record').click(function () {
+    $(window).scrollTop(0)
     $('.winningRecord .winningRecord_in ul li').remove();
     page = 1;
     recordPage();

view/peko/modules/myincome/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>piko</title><link href=./static/css/app.44c827118c8744245a9f2745414c28e6.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.fe707ef9ea99a002d256.js></script><script type=text/javascript src=./static/js/vendor.549947ec2550614f506c.js></script><script type=text/javascript src=./static/js/app.f56d535f53d3c277e0fd.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>piko</title><link href=./static/css/app.b1a360bed56d1a74512e907fff171218.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.8fb7b94bab71b553af99.js></script><script type=text/javascript src=./static/js/vendor.549947ec2550614f506c.js></script><script type=text/javascript src=./static/js/app.f56d535f53d3c277e0fd.js></script></body></html>