新增幸运礼物账单

view/peko/activity/2024-goddessesDay/css/index.css

@@ -0,0 +1,498 @@
+html,
+body {
+  width: 100%;
+  background: #FBABAD;
+}
+
+.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: 14.56rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 0.24rem;
+}
+
+.header .rule_icon {
+  width: 1.14667rem;
+  height: 3.4rem;
+  position: absolute;
+  right: 0rem;
+  top: 6.25333rem;
+}
+
+.tabBox {
+  width: 7.66667rem;
+  height: 1.13333rem;
+  margin: 0 auto 0.22667rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tabBox div {
+  width: 3.58667rem;
+}
+
+.tabBox .tab1 {
+  background: url(../images/tab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tabBox .tab2 {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tabBox .tabAct1 {
+  background: url(../images/tabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tabBox .tabAct2 {
+  background: url(../images/tabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 {
+  width: 9.44rem;
+  height: 18.6rem;
+  margin: 0 auto 0.34667rem;
+  background: url(../images/page1Bg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 {
+  display: none;
+  width: 9.44rem;
+  height: 18.42667rem;
+  background: url(../images/page2Bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 2.06667rem;
+  overflow: hidden;
+}
+
+.page2 .tablist {
+  width: 4.90667rem;
+  height: 0.70667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.50667rem auto 0.93333rem;
+  background: url(../images/tabListBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .tablist div {
+  width: 2.45333rem;
+  height: 0.70667rem;
+  line-height: 0.70667rem;
+  color: #FFFFFF;
+  font-size: 0.38667rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.page2 .tablist .act {
+  background: url(../images/tabListAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .top3Box {
+  width: 8.33333rem;
+  height: 3.13333rem;
+  position: relative;
+  margin: 0 auto 0.33333rem;
+}
+
+.page2 .top3Box .no1 {
+  width: 2.73333rem;
+  height: 3.49333rem;
+  background: url(../images/no1Bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+}
+
+.page2 .top3Box .no1 .ts {
+  width: 1.56rem;
+  height: 1.58667rem;
+  z-index: 2;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.96rem;
+}
+
+.page2 .top3Box .no1 .tx {
+  width: 1.21333rem;
+  height: 1.21333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 2.10667rem;
+  border-radius: 50%;
+}
+
+.page2 .top3Box .no1 .name {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #AE3E4E;
+  font-size: 0.30667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.38667rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no1 p {
+  width: 100%;
+  color: #AE3E4E;
+  font-size: 0.26667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.70667rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no1 .score {
+  width: 100%;
+  color: #fff;
+  font-size: 0.26667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.24rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no2 {
+  width: 2.73333rem;
+  height: 3.13333rem;
+  background: url(../images/no23Bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 0%;
+  bottom: 0;
+}
+
+.page2 .top3Box .no2 .ts {
+  width: 1.56rem;
+  height: 1.58667rem;
+  z-index: 2;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.72rem;
+}
+
+.page2 .top3Box .no2 .tx {
+  width: 1.21333rem;
+  height: 1.21333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.89333rem;
+  border-radius: 50%;
+}
+
+.page2 .top3Box .no2 .name {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #AE3E4E;
+  font-size: 0.30667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.26667rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no2 p {
+  width: 100%;
+  color: #AE3E4E;
+  font-size: 0.26667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.72rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no2 .score {
+  width: 100%;
+  color: #fff;
+  font-size: 0.26667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.26667rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no3 {
+  width: 2.73333rem;
+  height: 3.13333rem;
+  background: url(../images/no23Bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0%;
+  bottom: 0;
+}
+
+.page2 .top3Box .no3 .ts {
+  width: 1.56rem;
+  height: 1.58667rem;
+  z-index: 2;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.72rem;
+}
+
+.page2 .top3Box .no3 .tx {
+  width: 1.21333rem;
+  height: 1.21333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.89333rem;
+  border-radius: 50%;
+}
+
+.page2 .top3Box .no3 .name {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #AE3E4E;
+  font-size: 0.30667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.26667rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no3 p {
+  width: 100%;
+  color: #AE3E4E;
+  font-size: 0.26667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.72rem;
+  text-align: center;
+}
+
+.page2 .top3Box .no3 .score {
+  width: 100%;
+  color: #fff;
+  font-size: 0.26667rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.26667rem;
+  text-align: center;
+}
+
+.page2 ul {
+  width: 9.26667rem;
+  height: 12.6rem;
+  overflow-y: scroll;
+  margin: 0 auto 0;
+}
+
+.page2 ul::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 ul li {
+  width: 100%;
+  height: 1.53333rem;
+  background: url(../images/liBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 0.02667rem;
+}
+
+.page2 ul li .num {
+  width: 0.46667rem;
+  height: 1.53333rem;
+  line-height: 1.53333rem;
+  color: #AE3E4E;
+  font-size: 0.4rem;
+  font-weight: 400;
+  margin-left: 0.38667rem;
+  text-align: center;
+  margin-right: 0.6rem;
+  float: left;
+}
+
+.page2 ul li .tx {
+  width: 1.16rem;
+  height: 1.16rem;
+  border-radius: 50%;
+  border: 0.02667rem solid #AE3E4E;
+  margin-top: 0.2rem;
+  margin-right: 0.37333rem;
+  display: block;
+  float: left;
+}
+
+.page2 ul li .name {
+  width: 3rem;
+  height: 1.53333rem;
+  line-height: 1.53333rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #AE3E4E;
+  font-size: 0.36rem;
+  float: left;
+}
+
+.page2 ul li .score {
+  float: right;
+  height: 1.53333rem;
+  line-height: 1.53333rem;
+  color: #AE3E4E;
+  font-weight: 400;
+  margin-right: 0.56rem;
+}
+
+.page2 .my {
+  position: fixed;
+  width: 10rem;
+  height: 2.06667rem;
+  background: url(../images/my.png) no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 0.02667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+}
+
+.page2 .my .num {
+  width: 1.33333rem;
+  height: 2.06667rem;
+  line-height: 2.06667rem;
+  color: #AE3E4E;
+  font-size: 0.4rem;
+  font-weight: 400;
+  margin-left: 0.38667rem;
+  text-align: center;
+  margin-right: 0.25333rem;
+  float: left;
+}
+
+.page2 .my .tx {
+  width: 1.16rem;
+  height: 1.16rem;
+  border-radius: 50%;
+  border: 0.02667rem solid #AE3E4E;
+  margin-top: 0.42667rem;
+  margin-right: 0.37333rem;
+  display: block;
+  float: left;
+}
+
+.page2 .my .name {
+  width: 3rem;
+  height: 2.06667rem;
+  line-height: 2.06667rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #AE3E4E;
+  font-size: 0.36rem;
+  float: left;
+}
+
+.page2 .my .score {
+  float: right;
+  height: 2.06667rem;
+  line-height: 2.06667rem;
+  color: #AE3E4E;
+  font-weight: 400;
+  margin-right: 0.56rem;
+}
+
+.rule {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.rule .rule_in {
+  width: 8.76rem;
+  height: 13.13333rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.rule .rule_in .rulebox {
+  width: 8.06667rem;
+  height: 11.5rem;
+  margin: 1.38667rem auto 0;
+  overflow-y: scroll;
+}
+
+.rule .rule_in .rulebox::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .rule_in .rulebox img {
+  display: block;
+  width: 100%;
+}

view/peko/activity/2024-goddessesDay/css/index.scss

@@ -0,0 +1,507 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #FBABAD;
+}
+
+// 返回按钮
+.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(1092);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: 0 auto px2rem(18);
+
+    .rule_icon {
+        width: px2rem(86);
+        height: px2rem(255);
+        position: absolute;
+        right: px2rem(0);
+        top: px2rem(469);
+    }
+}
+
+.tabBox {
+    width: px2rem(575);
+    height: px2rem(85);
+    margin: 0 auto px2rem(17);
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: px2rem(269);
+    }
+
+    .tab1 {
+        background: url(../images/tab1.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tab2 {
+        background: url(../images/tab2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tabAct1 {
+        background: url(../images/tabAct1.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tabAct2 {
+        background: url(../images/tabAct2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.page1 {
+    // display: none;
+    width: px2rem(708);
+    height: px2rem(1395);
+    margin: 0 auto px2rem(26);
+    background: url(../images/page1Bg.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.page2 {
+    display: none;
+    width: px2rem(708);
+    height: px2rem(1382);
+    background: url(../images/page2Bg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto px2rem(155);
+    overflow: hidden;
+
+    .tablist {
+        width: px2rem(368);
+        height: px2rem(53);
+        display: flex;
+        justify-content: space-between;
+        margin: px2rem(38) auto px2rem(70);
+        background: url(../images/tabListBg.png) no-repeat;
+        background-size: 100% 100%;
+
+        div {
+            width: px2rem(184);
+            height: px2rem(53);
+            line-height: px2rem(53);
+            color: #FFFFFF;
+            font-size: px2rem(29);
+            font-weight: 500;
+            text-align: center;
+        }
+
+        .act {
+            background: url(../images/tabListAct.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .top3Box {
+        width: px2rem(625);
+        height: px2rem(235);
+        position: relative;
+        margin: 0 auto px2rem(25);
+
+        .no1 {
+            width: px2rem(205);
+            height: px2rem(262);
+            background: url(../images/no1Bg.png) no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 0;
+
+            .ts {
+                width: px2rem(117);
+                height: px2rem(119);
+                z-index: 2;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(147);
+            }
+
+            .tx {
+                width: px2rem(91);
+                height: px2rem(91);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(158);
+                border-radius: 50%;
+            }
+
+            .name {
+                width: 100%;
+                //超出省略号
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #AE3E4E;
+                font-size: px2rem(23);
+                font-weight: 500;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(104);
+                text-align: center;
+            }
+
+            p {
+                width: 100%;
+                color: #AE3E4E;
+                font-size: px2rem(20);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(53);
+                text-align: center;
+            }
+
+            .score {
+                width: 100%;
+                color: #fff;
+                font-size: px2rem(20);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(18);
+                text-align: center;
+            }
+        }
+
+        .no2 {
+            width: px2rem(205);
+            height: px2rem(235);
+            background: url(../images/no23Bg.png) no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            left: 0%;
+            bottom: 0;
+
+            .ts {
+                width: px2rem(117);
+                height: px2rem(119);
+                z-index: 2;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(129);
+            }
+
+            .tx {
+                width: px2rem(91);
+                height: px2rem(91);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(142);
+                border-radius: 50%;
+            }
+
+            .name {
+                width: 100%;
+                //超出省略号
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #AE3E4E;
+                font-size: px2rem(23);
+                font-weight: 500;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(95);
+                text-align: center;
+            }
+
+            p {
+                width: 100%;
+                color: #AE3E4E;
+                font-size: px2rem(20);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(54);
+                text-align: center;
+            }
+
+            .score {
+                width: 100%;
+                color: #fff;
+                font-size: px2rem(20);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(20);
+                text-align: center;
+            }
+        }
+
+        .no3 {
+            width: px2rem(205);
+            height: px2rem(235);
+            background: url(../images/no23Bg.png) no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            right: 0%;
+            bottom: 0;
+
+            .ts {
+                width: px2rem(117);
+                height: px2rem(119);
+                z-index: 2;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(129);
+            }
+
+            .tx {
+                width: px2rem(91);
+                height: px2rem(91);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(142);
+                border-radius: 50%;
+            }
+
+            .name {
+                width: 100%;
+                //超出省略号
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #AE3E4E;
+                font-size: px2rem(23);
+                font-weight: 500;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(95);
+                text-align: center;
+            }
+
+            p {
+                width: 100%;
+                color: #AE3E4E;
+                font-size: px2rem(20);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(54);
+                text-align: center;
+            }
+
+            .score {
+                width: 100%;
+                color: #fff;
+                font-size: px2rem(20);
+                font-weight: 400;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(20);
+                text-align: center;
+            }
+        }
+    }
+
+    ul {
+        width: px2rem(695);
+        height: 12.6rem;
+        overflow-y: scroll;
+        margin: 0 auto 0;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            width: 100%;
+            height: px2rem(115);
+            background: url(../images/liBg.png) no-repeat;
+            background-size: 100% 100%;
+            margin-bottom: px2rem(2);
+
+            .num {
+                width: px2rem(35);
+                height: px2rem(115);
+                line-height: px2rem(115);
+                color: #AE3E4E;
+                font-size: px2rem(30);
+                font-weight: 400;
+                margin-left: px2rem(29);
+                text-align: center;
+                margin-right: px2rem(45);
+                float: left;
+            }
+
+            .tx {
+                width: px2rem(87);
+                height: px2rem(87);
+                border-radius: 50%;
+                border: px2rem(2) solid #AE3E4E;
+                margin-top: px2rem(15);
+                margin-right: px2rem(28);
+                display: block;
+                float: left;
+            }
+
+            .name {
+                width: 3rem;
+                height: px2rem(115);
+                line-height: px2rem(115);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #AE3E4E;
+                font-size: px2rem(27);
+                float: left;
+            }
+
+            .score {
+                float: right;
+                height: px2rem(115);
+                line-height: px2rem(115);
+                color: #AE3E4E;
+                font-weight: 400;
+                margin-right: px2rem(42);
+            }
+        }
+    }
+
+    .my {
+        position: fixed;
+        width: px2rem(750);
+        height: px2rem(155);
+        background: url(../images/my.png) no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: px2rem(2);
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 0;
+
+        .num {
+            width: px2rem(100);
+            height: px2rem(155);
+            line-height: px2rem(155);
+            color: #AE3E4E;
+            font-size: px2rem(30);
+            font-weight: 400;
+            margin-left: px2rem(29);
+            text-align: center;
+            margin-right: px2rem(19);
+            float: left;
+        }
+
+        .tx {
+            width: px2rem(87);
+            height: px2rem(87);
+            border-radius: 50%;
+            border: px2rem(2) solid #AE3E4E;
+            margin-top: px2rem(32);
+            margin-right: px2rem(28);
+            display: block;
+            float: left;
+        }
+
+        .name {
+            width: 3rem;
+            height: px2rem(155);
+            line-height: px2rem(155);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #AE3E4E;
+            font-size: px2rem(27);
+            float: left;
+        }
+
+        .score {
+            float: right;
+            height: px2rem(155);
+            line-height: px2rem(155);
+            color: #AE3E4E;
+            font-weight: 400;
+            margin-right: px2rem(42);
+        }
+    }
+}
+
+.rule {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, .6);
+
+    .rule_in {
+        width: px2rem(657);
+        height: px2rem(985);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+        overflow: hidden;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        .rulebox {
+            width: px2rem(605);
+            height: 11.5rem;
+            margin: px2rem(104) auto 0;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}

view/peko/activity/2024-goddessesDay/index.html

@@ -0,0 +1,101 @@
+<!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/rule_icon.png" alt="" class="rule_icon">
+    </div>
+
+    <!-- tab -->
+    <div class="tabBox">
+        <div class="tab1 tabAct1"></div>
+        <div class="tab2"></div>
+    </div>
+
+    <!-- page1 -->
+    <div class="page1"></div>
+
+    <!-- page2 -->
+    <div class="page2">
+        <!-- tab -->
+        <div class="tablist">
+            <div class="act">守護榜</div>
+            <div>女神榜</div>
+        </div>
+        <!-- 前三 -->
+        <div class="top3Box">
+            <div class="no1">
+                <img src="./images/no1.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">用戶昵稱</div>
+                <p>守護榜</p>
+                <div class="score">0</div>
+            </div>
+            <div class="no2">
+                <img src="./images/no2.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">用戶昵稱</div>
+                <p>守護榜</p>
+                <div class="score">0</div>
+            </div>
+            <div class="no3">
+                <img src="./images/no3.png" alt="" class="ts">
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">用戶昵稱</div>
+                <p>守護榜</p>
+                <div class="score">0</div>
+            </div>
+        </div>
+
+        <!-- 非前三 -->
+        <ul>
+            <li>
+                <div class="num">04</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name">用戶昵稱</div>
+                <div class="score">守護榜:0</div>
+            </li>
+        </ul>
+
+        <!-- 我自己 -->
+        <div class="my">
+            <div class="num">未上榜</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="name">用戶昵稱</div>
+            <div class="score">守護榜:0</div>
+        </div>
+    </div>
+
+    <!-- 活動規則 -->
+    <div class="rule">
+        <div class="rule_in">
+            <div class="rulebox">
+                <img src="./images/rule.png" alt="">
+            </div>
+        </div>
+    </div>
+
+</body>
+<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/index.js"></script>
+
+</html>

view/peko/activity/2024-goddessesDay/js/index.js

@@ -0,0 +1,140 @@
+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;
+// 初始化函數
+$(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)
+            }
+        })
+    }, 100)
+})
+
+// 獲取榜單接口
+function getRank () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/act/special/gift/getRank',
+        data: {
+            rankType,
+            pageSize: 30
+        },
+        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 .top3Box .no${i + 1} .tx`).attr('src', res.avatar);
+                    $(`.page2 .top3Box .no${i + 1} .name`).text(res.nick);
+                    $(`.page2 .top3Box .no${i + 1} p`).text(`${rankType == 2 ? "守護值" : "女神值"}`);
+                    $(`.page2 .top3Box .no${i + 1} .score`).text(unitProcessing(res.score, 10000, 1, 'w'));
+                })
+                // 非前三
+                $('.page2 ul li').remove();
+                var str = '';
+                notTop3.forEach((res, i) => {
+                    str += `
+                        <li>
+                            <div class="num">${res.ranking}</div>
+                            <img src="${res.avatar}" alt="" class="tx">
+                            <div class="name">${res.nick}</div>
+                            <div class="score">${rankType == 2 ? "守護值" : "女神值"}:${unitProcessing(res.score, 10000, 1, 'w')}</div>
+                        </li>
+                    `
+                })
+                $('.page2 ul').append(str);
+                // 處理自己榜單
+                $('.page2 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
+                $('.page2 .my .tx').attr('src', res.data.meRank.avatar);
+                $('.page2 .my .name').text(res.data.meRank.nick);
+                $('.page2 .my .score').text(`${rankType == 2 ? "守護值:" : "女神值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+
+// tab切換
+$('.tabBox div').click(function () {
+    var i = $(this).index() + 1;
+    $('.tabBox div').removeClass('tabAct1').removeClass('tabAct2');
+    $(this).addClass(`tabAct${i}`);
+    $('.page1,.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 2) {
+        getRank();
+    }
+})
+$('.page2 .tablist div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    rankType = i == 1 ? 2 : 4;
+    getRank();
+})
+
+// 打開規則
+$('.header .rule_icon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 關閉規則
+$('.rule').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+})

view/peko/activity/2024-invitationFission/css/index.css

@@ -0,0 +1,901 @@
+html,
+body {
+  width: 100%;
+  background: #FFE1C5;
+}
+
+.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: 8.69333rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.header .h3 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.25333rem;
+  height: 1.36rem;
+  width: 8.6rem;
+}
+
+.header .rule_rule {
+  width: 0.77333rem;
+  height: 0.77333rem;
+  position: absolute;
+  top: 4.77333rem;
+  right: 0.4rem;
+}
+
+.header .text {
+  width: 5.33333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.06667rem;
+  background: url(../images/header_text.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #FFF6E5;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.header .text b {
+  font-size: 0.56rem;
+  font-weight: 600;
+  vertical-align: middle;
+}
+
+.header .text img {
+  display: inline-block;
+  width: 0.58667rem;
+  height: 0.58667rem;
+  vertical-align: middle;
+}
+
+.bg {
+  width: 100%;
+  height: 48.10667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: -0.56rem auto 0;
+  overflow: hidden;
+}
+
+.bg .myInfo {
+  width: 9.2rem;
+  height: 4.06667rem;
+  background: url(../images/myInfo.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 1.12rem auto 0.26667rem;
+  position: relative;
+}
+
+.bg .myInfo .tx {
+  width: 1.6rem;
+  height: 1.6rem;
+  border: 0.02667rem solid #F55E3E;
+  position: absolute;
+  left: 0.53333rem;
+  top: 0.73333rem;
+  border-radius: 50%;
+}
+
+.bg .myInfo p {
+  color: #FE3312;
+  font-size: 0.37333rem;
+  position: absolute;
+  top: 1.34667rem;
+  left: 2.37333rem;
+  font-weight: 400;
+}
+
+.bg .myInfo .invitationCode {
+  position: absolute;
+  right: 1.45333rem;
+  top: 1.18667rem;
+  font-size: 0.64rem;
+  font-weight: normal;
+  color: #FE3312;
+}
+
+.bg .myInfo .skip {
+  position: absolute;
+  left: 0.53333rem;
+  bottom: 0.66667rem;
+  width: 3.92rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  text-align: center;
+  color: #FE3312;
+  font-size: 0.24rem;
+  font-weight: 400;
+  background: url(../images/myInfoBut.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .myInfo .skip img {
+  display: inline-block;
+  width: 0.37333rem;
+  height: 0.37333rem;
+  vertical-align: middle;
+}
+
+.bg .myInfo .copy {
+  position: absolute;
+  right: 0.53333rem;
+  bottom: 0.66667rem;
+  width: 3.92rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  text-align: center;
+  color: #FE3312;
+  font-size: 0.24rem;
+  font-weight: 400;
+  background: url(../images/myInfoBut.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .myInfo .copy img {
+  display: inline-block;
+  width: 0.37333rem;
+  height: 0.37333rem;
+  vertical-align: middle;
+}
+
+.bg .myIncome {
+  width: 9.2rem;
+  height: 1.33333rem;
+  position: relative;
+  margin: 0 auto 0.26667rem;
+  background: url(../images/myIncomeBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .myIncome img {
+  position: absolute;
+  width: 0.58667rem;
+  height: 0.58667rem;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.37333rem;
+}
+
+.bg .myIncome p {
+  color: #FFFFFF;
+  font-size: 0.48rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0.26667rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.bg .myIncome b {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1.2rem;
+  color: #FE3312;
+  font-size: 0.48rem;
+}
+
+.bg .incomeBox {
+  width: 9.2rem;
+  height: 10.66667rem;
+  background: #fff;
+  border-radius: 0.26667rem;
+  border: 0.05333rem solid #FE7835;
+  margin: 0 auto 0.26667rem;
+  position: relative;
+}
+
+.bg .incomeBox .tab {
+  width: 8.66667rem;
+  height: 1.92rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.18667rem auto 0.26667rem;
+}
+
+.bg .incomeBox .tab div {
+  width: 4.21333rem;
+  height: 100%;
+  text-align: center;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .incomeBox .tab div p {
+  color: #FFFFFF;
+  font-size: 0.32rem;
+  font-weight: 500;
+  margin-top: 0.46667rem;
+  margin-bottom: 0.24rem;
+}
+
+.bg .incomeBox .tab div span {
+  color: #fff;
+  font-size: 0.37333rem;
+  font-weight: 400;
+}
+
+.bg .incomeBox .tab div span img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 0.58667rem;
+  height: 0.58667rem;
+}
+
+.bg .incomeBox .tab .act {
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .incomeBox .tab .act p {
+  margin-top: 0.36rem;
+}
+
+.bg .incomeBox .sTab {
+  width: 100%;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto 0rem;
+}
+
+.bg .incomeBox .sTab div {
+  width: 50%;
+  height: 100%;
+  text-align: center;
+  color: #333333;
+  font-size: 0.26667rem;
+  font-weight: 400;
+}
+
+.bg .incomeBox .sTab .tab1 {
+  background: url(../images/sTab1.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FE3312;
+}
+
+.bg .incomeBox .sTab .tab2 {
+  background: url(../images/sTab2.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FE3312;
+}
+
+.bg .incomeBox .tableTitle {
+  width: 99.9%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+  position: absolute;
+  top: 3.17rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  background: #fff;
+}
+
+.bg .incomeBox .tableTitle div {
+  width: 25%;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  text-align: center;
+  color: #333333;
+  font-size: 0.26667rem;
+  font-weight: 400;
+}
+
+.bg .incomeBox ul {
+  width: 100%;
+  height: 7.4rem;
+  margin: 0 auto 0;
+  overflow-y: scroll;
+  position: relative;
+}
+
+.bg .incomeBox ul::-webkit-scrollbar {
+  display: none;
+}
+
+.bg .incomeBox ul .top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.bg .incomeBox ul .top div {
+  width: 25%;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  text-align: center;
+  color: #333333;
+  font-size: 0.26667rem;
+  font-weight: 400;
+}
+
+.bg .incomeBox ul li {
+  width: 100%;
+  height: 0.66667rem;
+  margin-bottom: 0.24rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.bg .incomeBox ul li:nth-child(1) {
+  margin-top: 0.66667rem;
+}
+
+.bg .incomeBox ul li div {
+  overflow: hidden;
+  width: 25%;
+  text-align: center;
+  color: #666666;
+  font-size: 0.24rem;
+  font-weight: 400;
+  line-height: 0.66667rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bg .incomeBox ul li div img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 0.42667rem;
+  height: 0.42667rem;
+}
+
+.bg .incomeBox ul li .act {
+  line-height: 0rem;
+}
+
+.bg .incomeBox ul li .act p {
+  margin-top: 0.2rem;
+  margin-bottom: 0.30667rem;
+}
+
+.bg .rule {
+  width: 9.2rem;
+  height: 18.90667rem;
+  border-radius: 0.26667rem;
+  border: 0.05333rem solid #FE7835;
+  margin: 0 auto 0.53333rem;
+  position: relative;
+  background: #fff;
+}
+
+.bg .rule .title {
+  width: 4.26667rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.48rem;
+  font-weight: 500;
+  background: url(../images/titleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  top: 0.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.53333rem;
+}
+
+.bg .rule .rule1 {
+  position: relative;
+  width: 8.66667rem;
+  height: 4.29333rem;
+  margin: 0 auto 0.26667rem;
+  background: url(../images/rule1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .rule .rule1 h3 {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.26667rem;
+  color: #fff;
+  font-size: 0.26667rem;
+  font-weight: 500;
+}
+
+.bg .rule .rule1 .text1 {
+  position: absolute;
+  left: 1.97333rem;
+  top: 1.13333rem;
+  color: #333333;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .rule1 .text2 {
+  position: absolute;
+  left: 5.38667rem;
+  top: 1.13333rem;
+  color: #333333;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .rule1 .rule1_in {
+  width: 5.13333rem;
+  height: 1.6rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.73333rem;
+}
+
+.bg .rule .rule1 .sp1 {
+  position: absolute;
+  left: 1.98667rem;
+  height: 0.42667rem;
+  line-height: 0.42667rem;
+  bottom: 0.4rem;
+  color: #FE3312;
+  font-size: 0.24rem;
+  font-weight: 500;
+}
+
+.bg .rule .rule1 .sp1 img {
+  display: inline-block;
+  width: 0.42667rem;
+  height: 0.42667rem;
+  vertical-align: middle;
+}
+
+.bg .rule .rule1 .sp2 {
+  position: absolute;
+  right: 1.98667rem;
+  height: 0.42667rem;
+  line-height: 0.42667rem;
+  bottom: 0.4rem;
+  color: #FE3312;
+  font-size: 0.24rem;
+  font-weight: 500;
+}
+
+.bg .rule .rule1 .sp2 img {
+  display: inline-block;
+  width: 0.42667rem;
+  height: 0.42667rem;
+  vertical-align: middle;
+}
+
+.bg .rule .rule2 {
+  width: 8.66667rem;
+  height: 11.74667rem;
+  position: relative;
+  margin: 0 auto 0.4rem;
+  background: url(../images/rule2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bg .rule .rule2 h3 {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.26667rem;
+  color: #fff;
+  font-size: 0.26667rem;
+  font-weight: 500;
+}
+
+.bg .rule .rule2 .text1 {
+  color: #333333;
+  font-size: 0.24rem;
+  font-weight: 5.33333rem;
+  position: absolute;
+  left: 0.45333rem;
+  top: 1.13333rem;
+}
+
+.bg .rule .rule2 .text2 {
+  color: #333333;
+  font-size: 0.24rem;
+  font-weight: 5.33333rem;
+  position: absolute;
+  left: 3.6rem;
+  top: 1.13333rem;
+}
+
+.bg .rule .rule2 .text3 {
+  color: #333333;
+  font-size: 0.24rem;
+  font-weight: 5.33333rem;
+  position: absolute;
+  left: 6.86667rem;
+  top: 1.13333rem;
+}
+
+.bg .rule .rule2 .rule_2in {
+  width: 8.13333rem;
+  height: 1.6rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.73333rem;
+}
+
+.bg .rule .rule2 .p1 {
+  width: 100%;
+  color: #FE3312;
+  font-size: 0.26667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.86667rem;
+  text-align: center;
+}
+
+.bg .rule .rule2 .p2 {
+  width: 100%;
+  color: #FE3312;
+  font-size: 0.26667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 8.28rem;
+  text-align: center;
+}
+
+.bg .rule .rule2 .table1 {
+  width: 8.13333rem;
+  height: 3.24rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.50667rem;
+}
+
+.bg .rule .rule2 .table2 {
+  width: 8.13333rem;
+  height: 2.49333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 8.85333rem;
+}
+
+.bg .rule .rule2 .table1_1 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.56rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table1_1 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 500;
+}
+
+.bg .rule .rule2 .table1_2 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.4rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table1_2 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .rule2 .table1_3 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 6.2rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table1_3 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .rule2 .table1_4 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 6.95rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table1_4 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .rule2 .table2_1 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 8.9rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table2_1 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 500;
+}
+
+.bg .rule .rule2 .table2_2 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 9.8rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table2_2 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .rule2 .table2_3 {
+  width: 8.13333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 10.6rem;
+  z-index: 2;
+}
+
+.bg .rule .rule2 .table2_3 div {
+  width: 50%;
+  text-align: center;
+  color: #FF4627;
+  font-size: 0.24rem;
+  font-weight: 400;
+}
+
+.bg .rule .wishingStar {
+  width: 100%;
+  text-align: center;
+  color: #333333;
+  font-size: 0.24rem;
+  font-weight: 300;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.4rem;
+}
+
+.bg .rule .wishingStar b {
+  color: #FE3312;
+}
+
+.bg .otherNotes {
+  width: 4.26667rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  background: url(../images/titleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 0.53333rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.48rem;
+  font-weight: 400;
+}
+
+.bg ul {
+  width: 9.2rem;
+  margin: 0 auto 0.70667rem;
+}
+
+.bg ul li {
+  width: 100%;
+  color: #666666;
+  font-size: 0.24rem;
+  font-weight: 400;
+  line-height: 0.34rem;
+}
+
+.bg ul .title {
+  color: #333333;
+  font-size: 0.26667rem;
+  font-weight: 500;
+  margin-bottom: 0.24rem;
+  margin-top: 0.26667rem;
+}
+
+.openShare {
+  position: fixed;
+  left: 0rem;
+  bottom: 6.2rem;
+  width: 1.6rem;
+  height: 0.45333rem;
+  line-height: 0.45333rem;
+  background: linear-gradient(180deg, #FFAD50 0%, #FE3111 100%);
+  border-radius: 0px 0.22667rem 0.22667rem 0px;
+  text-align: center;
+  color: #fff;
+  font-size: 0.21333rem;
+  display: none;
+  z-index: 3;
+}
+
+.code {
+  position: fixed;
+  left: 0;
+  bottom: 4.85rem;
+  background: url(../images/codeBg.png) no-repeat;
+  background-size: 100% 100%;
+  width: 2.34667rem;
+  height: 3.16rem;
+  z-index: 3;
+}
+
+.code .rule_icon {
+  width: 0.32rem;
+  height: 0.32rem;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.code .p1 {
+  position: absolute;
+  color: #FFFFFF;
+  font-size: 0.21333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-47%);
+  top: 0.24rem;
+  width: 100%;
+  text-align: center;
+}
+
+.code .p2 {
+  position: absolute;
+  color: #FFFFFF;
+  font-size: 0.21333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-47%);
+  top: 0.66667rem;
+  width: 100%;
+  text-align: center;
+}
+
+.code .p2 .diamond {
+  width: 0.32rem;
+  height: 0.32rem;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.code .p2 b {
+  font-size: 0.24rem;
+  font-weight: 500;
+  vertical-align: middle;
+}
+
+.code .codeImg {
+  width: 1.17333rem;
+  height: 1.17333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-43%);
+  top: 1.16rem;
+}
+
+.code .but {
+  width: 1.52rem;
+  height: 0.34667rem;
+  line-height: 0.37333rem;
+  border-radius: 0.34667rem;
+  background: #fff;
+  position: absolute;
+  left: 0.50667rem;
+  bottom: 0.24rem;
+  text-align: center;
+  color: #000;
+  font-size: 0.24rem;
+}

view/peko/activity/2024-invitationFission/css/index.scss

@@ -0,0 +1,908 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #FFE1C5;
+    // background: linear-gradient(0deg, #DE3B4F 0%, #FFE4C9 99%);
+}
+
+// 返回按钮
+.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(652);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+
+    .h3 {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(244);
+        height: px2rem(102);
+        width: px2rem(645);
+    }
+
+    .rule_rule {
+        width: px2rem(58);
+        height: px2rem(58);
+        position: absolute;
+        top: px2rem(358);
+        right: px2rem(30);
+    }
+
+    .text {
+        width: px2rem(400);
+        height: px2rem(60);
+        line-height: px2rem(60);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(380);
+        background: url(../images/header_text.png) no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        color: #FFF6E5;
+        font-size: px2rem(28);
+        font-weight: 400;
+
+        b {
+            font-size: px2rem(42);
+            font-weight: 600;
+            vertical-align: middle;
+        }
+
+        img {
+            display: inline-block;
+            width: px2rem(44);
+            height: px2rem(44);
+            vertical-align: middle;
+        }
+    }
+}
+
+.bg {
+    width: 100%;
+    height: px2rem(3608);
+    background: url(../images/bg.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: px2rem(-42) auto 0;
+    overflow: hidden;
+
+    .myInfo {
+        width: px2rem(690);
+        height: px2rem(305);
+        background: url(../images/myInfo.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(84) auto px2rem(20);
+        position: relative;
+
+        .tx {
+            width: px2rem(120);
+            height: px2rem(120);
+            border: px2rem(2) solid #F55E3E;
+            position: absolute;
+            left: px2rem(40);
+            top: px2rem(55);
+            border-radius: 50%;
+        }
+
+        p {
+            color: #FE3312;
+            font-size: px2rem(28);
+            position: absolute;
+            top: px2rem(101);
+            left: px2rem(178);
+            font-weight: 400;
+        }
+
+        .invitationCode {
+            position: absolute;
+            right: px2rem(109);
+            top: px2rem(89);
+            font-size: px2rem(48);
+            font-weight: normal;
+            color: #FE3312;
+        }
+
+        .skip {
+            position: absolute;
+            left: px2rem(40);
+            bottom: px2rem(50);
+            width: px2rem(294);
+            height: px2rem(60);
+            line-height: px2rem(60);
+            text-align: center;
+            color: #FE3312;
+            font-size: px2rem(18);
+            font-weight: 400;
+            background: url(../images/myInfoBut.png) no-repeat;
+            background-size: 100% 100%;
+
+            img {
+                display: inline-block;
+                width: px2rem(28);
+                height: px2rem(28);
+                vertical-align: middle;
+            }
+        }
+
+        .copy {
+            position: absolute;
+            right: px2rem(40);
+            bottom: px2rem(50);
+            width: px2rem(294);
+            height: px2rem(60);
+            line-height: px2rem(60);
+            text-align: center;
+            color: #FE3312;
+            font-size: px2rem(18);
+            font-weight: 400;
+            background: url(../images/myInfoBut.png) no-repeat;
+            background-size: 100% 100%;
+
+            img {
+                display: inline-block;
+                width: px2rem(28);
+                height: px2rem(28);
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .myIncome {
+        width: px2rem(690);
+        height: px2rem(100);
+        position: relative;
+        margin: 0 auto px2rem(20);
+        background: url(../images/myIncomeBg.png) no-repeat;
+        background-size: 100% 100%;
+
+        img {
+            position: absolute;
+            width: px2rem(44);
+            height: px2rem(44);
+            top: 50%;
+            transform: translateY(-50%);
+            right: px2rem(28);
+        }
+
+        p {
+            color: #FFFFFF;
+            font-size: px2rem(36);
+            font-weight: 500;
+            position: absolute;
+            left: px2rem(20);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        b {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: px2rem(90);
+            color: #FE3312;
+            font-size: px2rem(36);
+        }
+    }
+
+    .incomeBox {
+        width: px2rem(690);
+        height: px2rem(800);
+        background: #fff;
+        border-radius: px2rem(20);
+        border: px2rem(4) solid #FE7835;
+        margin: 0 auto px2rem(20);
+        position: relative;
+
+        .tab {
+            width: px2rem(650);
+            height: px2rem(144);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(14) auto px2rem(20);
+
+            div {
+                width: px2rem(316);
+                height: 100%;
+                text-align: center;
+                background: url(../images/tab.png) no-repeat;
+                background-size: 100% 100%;
+
+                p {
+                    color: #FFFFFF;
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                    margin-top: px2rem(35);
+                    margin-bottom: px2rem(18);
+                }
+
+                span {
+                    color: #fff;
+                    font-size: px2rem(28);
+                    font-weight: 400;
+
+                    img {
+                        display: inline-block;
+                        vertical-align: middle;
+                        width: px2rem(44);
+                        height: px2rem(44);
+                    }
+                }
+            }
+
+            .act {
+                background: url(../images/tabAct.png) no-repeat;
+                background-size: 100% 100%;
+
+                p {
+                    margin-top: px2rem(27);
+                }
+            }
+        }
+
+        .sTab {
+            width: 100%;
+            height: px2rem(60);
+            line-height: px2rem(60);
+            display: flex;
+            justify-content: space-between;
+            margin: 0 auto px2rem(0);
+
+            div {
+                width: 50%;
+                height: 100%;
+                text-align: center;
+                color: #333333;
+                font-size: px2rem(20);
+                font-weight: 400;
+            }
+
+            .tab1 {
+                background: url(../images/sTab1.png) no-repeat;
+                background-size: 100% 100%;
+                color: #FE3312;
+            }
+
+            .tab2 {
+                background: url(../images/sTab2.png) no-repeat;
+                background-size: 100% 100%;
+                color: #FE3312;
+            }
+        }
+
+        .tableTitle {
+            width: 99.9%;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0;
+            position: absolute;
+            top: 3.17rem;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 2;
+            background: #fff;
+
+            div {
+                width: 25%;
+                height: px2rem(50);
+                line-height: px2rem(50);
+                text-align: center;
+                color: #333333;
+                font-size: px2rem(20);
+                font-weight: 400;
+            }
+        }
+
+        ul {
+            width: 100%;
+            height: 7.4rem;
+            margin: 0 auto 0;
+            overflow-y: scroll;
+            position: relative;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .top {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 0;
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+
+                div {
+                    width: 25%;
+                    height: px2rem(50);
+                    line-height: px2rem(50);
+                    text-align: center;
+                    color: #333333;
+                    font-size: px2rem(20);
+                    font-weight: 400;
+                }
+            }
+
+            li {
+                width: 100%;
+                height: px2rem(50);
+                margin-bottom: px2rem(18);
+                display: flex;
+                justify-content: space-between;
+
+                &:nth-child(1) {
+                    margin-top: px2rem(50);
+                }
+
+                div {
+                    overflow: hidden;
+                    width: 25%;
+                    text-align: center;
+                    color: #666666;
+                    font-size: px2rem(18);
+                    font-weight: 400;
+                    line-height: px2rem(50);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+
+                    img {
+                        display: inline-block;
+                        vertical-align: middle;
+                        width: px2rem(32);
+                        height: px2rem(32);
+                    }
+
+                }
+
+                .act {
+                    line-height: px2rem(0);
+
+                    p {
+                        margin-top: px2rem(15);
+                        margin-bottom: px2rem(23);
+                    }
+                }
+            }
+        }
+    }
+
+    .rule {
+        width: px2rem(690);
+        height: px2rem(1418);
+        border-radius: px2rem(20);
+        border: px2rem(4) solid #FE7835;
+        margin: 0 auto px2rem(40);
+        position: relative;
+        background: #fff;
+
+        .title {
+            width: px2rem(320);
+            height: px2rem(60);
+            line-height: px2rem(60);
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(36);
+            font-weight: 500;
+            background: url(../images/titleBg.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            top: px2rem(30);
+            left: 50%;
+            transform: translateX(-50%);
+            margin-bottom: px2rem(40);
+        }
+
+        .rule1 {
+            position: relative;
+            width: px2rem(650);
+            height: px2rem(322);
+            margin: 0 auto px2rem(20);
+            background: url(../images/rule1.png) no-repeat;
+            background-size: 100% 100%;
+
+            h3 {
+                width: 100%;
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(20);
+                color: #fff;
+                font-size: px2rem(20);
+                font-weight: 500;
+            }
+
+            .text1 {
+                position: absolute;
+                left: px2rem(148);
+                top: px2rem(85);
+                color: #333333;
+                font-size: px2rem(18);
+                font-weight: 400;
+            }
+
+            .text2 {
+                position: absolute;
+                left: px2rem(404);
+                top: px2rem(85);
+                color: #333333;
+                font-size: px2rem(18);
+                font-weight: 400;
+            }
+
+            .rule1_in {
+                width: px2rem(385);
+                height: px2rem(120);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(130);
+            }
+
+            .sp1 {
+                position: absolute;
+                left: px2rem(149);
+                height: px2rem(32);
+                line-height: px2rem(32);
+                bottom: px2rem(30);
+                color: #FE3312;
+                font-size: px2rem(18);
+                font-weight: 500;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(32);
+                    height: px2rem(32);
+                    vertical-align: middle;
+                }
+            }
+
+            .sp2 {
+                position: absolute;
+                right: px2rem(149);
+                height: px2rem(32);
+                line-height: px2rem(32);
+                bottom: px2rem(30);
+                color: #FE3312;
+                font-size: px2rem(18);
+                font-weight: 500;
+
+                img {
+                    display: inline-block;
+                    width: px2rem(32);
+                    height: px2rem(32);
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        .rule2 {
+            width: px2rem(650);
+            height: px2rem(881);
+            position: relative;
+            margin: 0 auto px2rem(30);
+            background: url(../images/rule2.png) no-repeat;
+            background-size: 100% 100%;
+
+            h3 {
+                width: 100%;
+                text-align: center;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(20);
+                color: #fff;
+                font-size: px2rem(20);
+                font-weight: 500;
+            }
+
+            .text1 {
+                color: #333333;
+                font-size: px2rem(18);
+                font-weight: px2rem(400);
+                position: absolute;
+                left: px2rem(34);
+                top: px2rem(85);
+            }
+
+            .text2 {
+                color: #333333;
+                font-size: px2rem(18);
+                font-weight: px2rem(400);
+                position: absolute;
+                left: px2rem(270);
+                top: px2rem(85);
+            }
+
+            .text3 {
+                color: #333333;
+                font-size: px2rem(18);
+                font-weight: px2rem(400);
+                position: absolute;
+                left: px2rem(515);
+                top: px2rem(85);
+            }
+
+            .rule_2in {
+                width: px2rem(610);
+                height: px2rem(120);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(130);
+            }
+
+            .p1 {
+                width: 100%;
+                color: #FE3312;
+                font-size: px2rem(20);
+                font-weight: 500;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(290);
+                text-align: center;
+            }
+
+            .p2 {
+                width: 100%;
+                color: #FE3312;
+                font-size: px2rem(20);
+                font-weight: 500;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(621);
+                text-align: center;
+            }
+
+            .table1 {
+                width: px2rem(610);
+                height: px2rem(243);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(338);
+            }
+
+            .table2 {
+                width: px2rem(610);
+                height: px2rem(187);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(664);
+            }
+
+            .table1_1 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(342);
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 500;
+                }
+            }
+
+            .table1_2 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(405);
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 400;
+                }
+            }
+
+            .table1_3 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 6.2rem;
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 400;
+                }
+            }
+
+            .table1_4 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 6.95rem;
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 400;
+                }
+            }
+
+            .table2_1 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 8.9rem;
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 500;
+                }
+            }
+
+            .table2_2 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 9.8rem;
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 400;
+                }
+            }
+
+            .table2_3 {
+                width: px2rem(610);
+                height: px2rem(60);
+                line-height: px2rem(60);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 10.6rem;
+                z-index: 2;
+
+                div {
+                    width: 50%;
+                    text-align: center;
+                    color: #FF4627;
+                    font-size: px2rem(18);
+                    font-weight: 400;
+                }
+            }
+        }
+
+        .wishingStar {
+            width: 100%;
+            text-align: center;
+            color: #333333;
+            font-size: px2rem(18);
+            font-weight: 300;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: px2rem(30);
+
+            b {
+                color: #FE3312;
+            }
+        }
+    }
+
+    .otherNotes {
+        width: px2rem(320);
+        height: px2rem(60);
+        line-height: px2rem(60);
+        background: url(../images/titleBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        margin: 0 auto px2rem(40);
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(36);
+        font-weight: 400;
+    }
+
+    ul {
+        width: px2rem(690);
+        margin: 0 auto px2rem(53);
+
+        li {
+            width: 100%;
+            color: #666666;
+            font-size: px2rem(18);
+            font-weight: 400;
+            line-height: 0.34rem;
+        }
+
+        .title {
+            color: #333333;
+            font-size: px2rem(20);
+            font-weight: 500;
+            margin-bottom: px2rem(18);
+            margin-top: px2rem(20);
+        }
+    }
+}
+
+.openShare {
+    position: fixed;
+    left: px2rem(0);
+    bottom: 6.2rem;
+    width: px2rem(120);
+    height: px2rem(34);
+    line-height: px2rem(34);
+    background: linear-gradient(180deg, #FFAD50 0%, #FE3111 100%);
+    border-radius: 0px px2rem(17) px2rem(17) 0px;
+    text-align: center;
+    color: #fff;
+    font-size: px2rem(16);
+    display: none;
+    z-index: 3;
+}
+
+.code {
+    position: fixed;
+    left: 0;
+    bottom: 4.85rem;
+    background: url(../images/codeBg.png) no-repeat;
+    background-size: 100% 100%;
+    width: px2rem(176);
+    height: px2rem(237);
+    z-index: 3;
+
+    .rule_icon {
+        width: px2rem(24);
+        height: px2rem(24);
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .p1 {
+        position: absolute;
+        color: #FFFFFF;
+        font-size: px2rem(16);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-47%);
+        top: px2rem(18);
+        width: 100%;
+        text-align: center;
+    }
+
+    .p2 {
+        position: absolute;
+        color: #FFFFFF;
+        font-size: px2rem(16);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-47%);
+        top: px2rem(50);
+        width: 100%;
+        text-align: center;
+
+        .diamond {
+            width: px2rem(24);
+            height: px2rem(24);
+            vertical-align: middle;
+            display: inline-block;
+        }
+
+        b {
+            font-size: px2rem(18);
+            font-weight: 500;
+            vertical-align: middle;
+        }
+    }
+
+    .codeImg {
+        width: px2rem(88);
+        height: px2rem(88);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-43%);
+        top: px2rem(87);
+    }
+
+    .but {
+        width: px2rem(114);
+        height: px2rem(26);
+        line-height: px2rem(28);
+        border-radius: px2rem(26);
+        background: #fff;
+        position: absolute;
+        left: px2rem(38);
+        bottom: px2rem(18);
+        text-align: center;
+        color: #000;
+        font-size: px2rem(18);
+    }
+}

view/peko/activity/2024-invitationFission/css/share.css

@@ -0,0 +1,93 @@
+html,
+body {
+  width: 100%;
+  background: #FE614B;
+}
+
+.header {
+  width: 10rem;
+  height: 16.61333rem;
+  position: relative;
+  margin: 0 auto 0;
+  background: url(../images/share/header.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .swiper {
+  width: 9.26667rem;
+  height: 9.64rem;
+  position: relative;
+  left: 50%;
+  transform: translateX(-53%);
+  top: 6.72rem;
+}
+
+.box {
+  width: 10rem;
+  height: 6.10667rem;
+  background: url(../images/share/box.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -1rem auto 0rem;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+}
+
+.box .xz {
+  width: 6.42667rem;
+  height: 1.22667rem;
+  line-height: 1.22667rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.42667rem;
+  background: url(../images/share/xzBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 1.33333rem auto 0.4rem;
+}
+
+.box .codeBg {
+  width: 6.42667rem;
+  height: 1.22667rem;
+  line-height: 1.22667rem;
+  margin: 0 auto 0rem;
+  background: url(../images/share/codeBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.box .codeBg .copy {
+  width: 2.13333rem;
+  height: 0.8rem;
+  position: absolute;
+  top: 0.21333rem;
+  right: 0.21333rem;
+}
+
+.box .codeBg .num {
+  width: 2rem;
+  height: 1.22667rem;
+  position: absolute;
+  left: 2rem;
+  top: 0;
+  text-align: center;
+  color: #666;
+  font-size: 0.37333rem;
+  font-weight: bold;
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/share/bottom.png) no-repeat;
+  background-size: 100% 100%;
+  width: 10rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 400;
+  z-index: 3;
+}

view/peko/activity/2024-invitationFission/css/share.scss

@@ -0,0 +1,93 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #FE614B;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(1246);
+    position: relative;
+    margin: 0 auto 0;
+    background: url(../images/share/header.png) no-repeat;
+    background-size: 100% 100%;
+
+    .swiper {
+        width: px2rem(695);
+        height: px2rem(723);
+        position: relative;
+        left: 50%;
+        transform: translateX(-53%);
+        top: px2rem(504);
+    }
+}
+
+.box {
+    width: px2rem(750);
+    height: px2rem(458);
+    background: url(../images/share/box.png) no-repeat;
+    background-size: 100% 100%;
+    margin: -1rem auto px2rem(0);
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+
+    .xz {
+        width: px2rem(482);
+        height: px2rem(92);
+        line-height: px2rem(92);
+        text-align: center;
+        color: #fff;
+        font-size: px2rem(32);
+        background: url(../images/share/xzBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(100) auto px2rem(30);
+    }
+    .codeBg{
+        width: px2rem(482);
+        height: px2rem(92);
+        line-height: px2rem(92);
+        margin: 0 auto px2rem(0);
+        background: url(../images/share/codeBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        .copy{
+            width: px2rem(160);
+            height: px2rem(60);
+            position: absolute;
+            top: px2rem(16);
+            right: px2rem(16);
+        }
+        .num{
+            width: 2rem;
+            height: px2rem(92);
+            position: absolute;
+            left: 2rem;
+            top: 0;
+            text-align: center;
+            color: #666;
+            font-size: px2rem(28);
+            font-weight: bold;
+        }
+    }
+}
+.bottom{
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background: url(../images/share/bottom.png) no-repeat;
+    background-size: 100% 100%;
+    width: px2rem(750);
+    height: px2rem(100);
+    line-height: px2rem(100);
+    text-align: center;
+    color: #fff;
+    font-size: px2rem(30);
+    font-weight: 400;
+    z-index: 3;
+}

view/peko/activity/2024-invitationFission/index.html

@@ -0,0 +1,179 @@
+<!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">
+        <img src="./images/header_h3.png" alt="" class="h3">
+        <a href="#rule"><img src="./images/rule_rule.png" alt="" class="rule_rule"></a>
+        <div class="text">每邀請一人得 <b>1000</b> <img src="./images/diamond.png" alt=""></div>
+    </div>
+    <!-- 容器 -->
+    <div class="bg">
+        <!-- 自己信息 -->
+        <div class="myInfo">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>我的邀請碼</p>
+            <b class="invitationCode"></b>
+            <div class="skip"><img src="./images/skip.png" alt=""> 分享邀請好友</div>
+            <div class="copy" id="copy"><img src="./images/copy.png" alt=""> 複製邀請碼</div>
+        </div>
+        <!-- 我的收益 -->
+        <div class="myIncome">
+            <img src="./images/diamond.png" alt="">
+            <p>我的收益</p>
+            <b>0</b>
+        </div>
+        <!-- 收益tab -->
+        <div class="incomeBox">
+            <!-- 大tab切換 -->
+            <div class="tab">
+                <div class="act directProfit">
+                    <p>直接邀請收益</p>
+                    <span><img src="./images/diamond.png" alt=""> 0</span>
+                </div>
+                <div class="indirectProfit">
+                    <p>間接邀請收益</p>
+                    <span><img src="./images/diamond.png" alt=""> 0</span>
+                </div>
+            </div>
+            <!-- 小tab切換 -->
+            <div class="sTab">
+                <div class="tab1">直接邀請收益記錄</div>
+                <div class="">直接邀請用戶記錄</div>
+            </div>
+            <!-- 記錄標題 -->
+            <div class="tableTitle">
+                <div>時間</div>
+                <div>收益</div>
+                <div>收益類型</div>
+                <div>邀請對象</div>
+            </div>
+            <!-- 記錄 -->
+            <ul>
+                <!-- <li class="top">
+                    <div>時間</div>
+                    <div>收益</div>
+                    <div>收益類型</div>
+                    <div>邀請對象</div>
+                </li>
+                <li>
+                    <div class="act">
+                        <p>2023-03-04</p>
+                        <b>
+                            12:23:23</b>
+                    </div>
+                    <div>+0 <img src="./images/diamond.png" alt=""></div>
+                    <div>邀請好友註冊</div>
+                    <div class="act">
+                        <p>用戶昵稱</p>
+                        <b>ID:0</b>
+                    </div>
+                </li> -->
+            </ul>
+        </div>
+        <!-- 活動規則 -->
+        <div class="rule" id="rule">
+            <div class="title">活動規則</div>
+            <div class="rule1">
+                <h3>成功邀請一位好友註冊，雙方各得1000鑽，無上限！</h3>
+                <div class="text1">邀請人：妳</div>
+                <div class="text2">直接邀請對象</div>
+                <img src="./images/rule1_in.png" alt="" class="rule1_in">
+                <span class="sp1">+1000 <img src="./images/diamond.png" alt="" class="diamond"></span>
+                <span class="sp2">+1000 <img src="./images/diamond.png" alt="" class="diamond"></span>
+            </div>
+            <div class="rule2">
+                <h3>邀請好友儲值返現，纍計高達7%，持續30天！</h3>
+                <div class="text1">邀請人：妳</div>
+                <div class="text2">直接邀請對象</div>
+                <div class="text3">間接邀請對象</div>
+                <img src="./images/rule_2in.png" alt="" class="rule_2in">
+                <p class="p1">直接邀請對象：通過填寫妳的邀請碼註冊的人</p>
+                <p class="p2">間接邀請對象：妳邀請註冊的好友繼續邀請的人</p>
+                <img src="./images/table1.png" alt="" class="table1">
+                <img src="./images/table2.png" alt="" class="table2">
+                <div class="table1_1">
+                    <div>儲值數額</div>
+                    <div>獲得收益</div>
+                </div>
+                <div class="table1_2">
+                    <div> 0鑽&lt;30天內儲值&lt;10000鑽 </div>
+                    <div>直接邀請對象+2魔法棒，妳+1魔法棒</div>
+                </div>
+                <div class="table1_3">
+                    <div>10000鉆&lt;=30天內儲值&lt;50000鉆 </div>
+                    <div>每儲值1000鉆，妳+30鉆（3%）</div>
+                </div>
+                <div class="table1_4">
+                    <div>50000鉆&lt;=30天內儲值 </div>
+                    <div>每儲值1000鉆，妳+50鉆（8%）</div>
+                </div>
+                <div class="table2_1">
+                    <div>儲值數額 </div>
+                    <div>獲得收益</div>
+                </div>
+                <div class="table2_2">
+                    <div>10000鉆&lt;=30天內儲值&lt;50000鉆 </div>
+                    <div>每儲值1000鉆，妳+10鉆（1%）</div>
+                </div>
+                <div class="table2_3">
+                    <div>50000鉆&lt;=30天內儲值 </div>
+                    <div>每儲值1000鉆，妳+20鉆（2%）</div>
+                </div>
+            </div>
+            <div class="wishingStar">*魔法棒用於參與<a href="../../modules/act-wishingStar/index.html"><b>許願之星活動>></b></a>
+            </div>
+        </div>
+        <!-- 其他說明 -->
+        <div class="otherNotes">其他說明</div>
+        <ul>
+            <li class="title">關於邀請獎勵結算</li>
+            <li>1.被邀用戶收益：新用戶填寫邀請碼後繫統自動發放權益至所屬賬號</li>
+            <li>2.邀請用戶收益：被邀新用戶填寫邀請碼後繫統自動發放權益至所屬賬號</li>
+            <li>3.充值獎勵：僅統計直接充值數據；新用戶自填寫邀請碼30日內完成首充，可獲得魔法棒獎勵，魔法棒可用於參與許願之星玩法，獲取珍稀禮物獎勵；完成指定數額充值，邀請人可獲得額外收益，收益實時到賬；</li>
+            <li class="title">關於無效的邀請</li>
+            <li>1.使用同一設備，同一手機號碼，同一身份信息註冊的用戶視為同一用戶，不能重復獲得獎勵；若邀請人與被邀請人使用同一設備，同一身份信息，同一手機號碼，邀請人無法獲取獎勵</li>
+            <li>2.每位新用戶僅能填寫一次邀請碼，填寫後不支持修改，註意註意！邀請碼不支持補填，還請邀請新用戶時告知新用戶註冊時及時填寫邀請碼，否則本次邀請無效；</li>
+            <li>3.如有作弊行為，官方有權清除作弊者所得的所有獎勵，併封禁賬號；</li>
+            <li>4.虛擬手機號、封禁用戶無法參加活動；</li>
+            <li class="title">其他</li>
+            <li>1.有任何疑問請聯繫客服（LINE:pekoyuyin、app內搜索ID：10001、WeChat:sd245376）；</li>
+            <li>2.本活動最終解釋權歸官方所有，並與Apple inc/Google公司無關；</li>
+        </ul>
+    </div>
+    <!-- 展開分享 -->
+    <div class="openShare">分享二維碼 ></div>
+    <!-- 保存二維碼 -->
+    <div class="code">
+        <div class="rule_icon"></div>
+        <div class="p1">好友掃碼下載註冊</div>
+        <div class="p2">得<b>1000</b><img src="./images/diamond.png" alt="" class="diamond"></div>
+        <img src="" alt="" class="codeImg">
+        <div class="but">保存本地</div>
+    </div>
+
+</body>
+</script>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="../../common/js/jquery.copy.min.js"></script>
+<script src="./js/index.js"></script>

view/peko/activity/2024-invitationFission/js/index.js

@@ -0,0 +1,386 @@
+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 inviteCode = '';
+var typeStr = "1,3";//收益類型 1 直接邀請 2 間接邀請 3 直接邀請充值 4 間接邀請充值
+var page = 1;
+var isLock = true;
+var obj = {};
+var text = '直接';
+// 初始化函數
+$(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();
+        getMySelf();
+        profitPage();
+    }, 100)
+})
+// 獲取配置接口
+function getConfig () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/user/invite/config',
+        success (res) {
+            if (res.code === 200) {
+                // 直接邀請規則
+                res.data.inviteLevelReward.forEach((res, i) => {
+                    if (i == 0) {
+                        $(`.bg .rule .rule2 .table1_2`).html(`
+                        <div>${res.leftDiamond}鑽&lt;30天內儲值&lt;${res.rightDiamond}鑽 </div>
+                        <div>直接邀請對象+2魔法棒，妳+1魔法棒</div>
+                    `)
+                    } else {
+                        $(`.bg .rule .rule2 .table1_${i + 2}`).html(`
+                        <div>${res.leftDiamond}鉆&lt;=30天內儲值${res.rightDiamond ? `&lt;${res.rightDiamond}鉆` : ''} </div>
+                        <div>每儲值${res.numUnit}鉆，妳+${res.rewardNum}鉆（${((res.rewardNum / res.numUnit) * 100).toFixed(2)}%）</div>
+                    `)
+                    }
+                })
+                // 間接邀請規則
+                res.data.indirectLevelReward.forEach((res, i) => {
+                    $(`.bg .rule .rule2 .table2_${i + 2}`).html(`
+                    <div>${res.leftDiamond}鉆&lt;=30天內儲值${res.rightDiamond ? `&lt;${res.rightDiamond}鉆` : ''} </div>
+                    <div>每儲值${res.numUnit}鉆，妳+${res.rewardNum}鉆（${((res.rewardNum / res.numUnit) * 100).toFixed(2)}%）</div>
+                `)
+                })
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+console.log();
+// 獲取收益接口
+function getMySelf () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/user/invite/mySelf',
+        success (res) {
+            if (res.code === 200) {
+                inviteCode = res.data.inviteCode;
+                // 分享所需参数
+                obj = {
+                    qrCodeUrl: res.data.qRCodeUrl,
+                    text: '掃碼下載PiKO並填寫我的邀請碼\n立得 1000 鑽石！',
+                    invitationCode: `${res.data.inviteCode}`,
+                    shareTitle: 'Piko，與心動聲音不期而遇',
+                    shareText: '聊天玩遊戲交朋友，隨時隨地在Piko',
+                    shareImg: 'https://image.pekolive.com/piko_logo.png',
+                    toUrl: `${window.location.origin}/peko/activity/2024-invitationFission/share.html?inviteCode=${res.data.inviteCode}`,
+                    type: 1//1:分享好友2:直接保存圖片
+                }
+                // 初始化复制
+                $.copy({
+                    text: "復制成功", //分享提示文案
+                    copyUrl: inviteCode, //自定義復制
+                    tipTime: 1000, //分享提示消失時間
+                    copyId: "#copy" //復制按鈕id
+                });
+                $('.bg .myInfo .invitationCode').text(inviteCode);
+                $('.bg .myIncome b').text(res.data.totalProfit);
+                $('.bg .incomeBox .tab .directProfit span').html(`<img src="./images/diamond.png" alt=""> ${res.data.directProfit}`);
+                $('.bg .incomeBox .tab .indirectProfit span').html(`<img src="./images/diamond.png" alt=""> ${res.data.indirectProfit}`);
+                $('.code .codeImg').attr('src', res.data.qRCodeUrl);
+                $('.bg .myInfo .tx').attr('src', res.data.avatar);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// 縮小二維碼
+$('.code .rule_icon').click(function () {
+    $('.openShare').show();
+    $('.code').hide();
+})
+// 放大二維碼
+$('.openShare').click(function () {
+    $('.code').show();
+    $('.openShare').hide();
+})
+// 分享調用
+$('.bg .myInfo .skip').click(function () {
+    obj.type = 1;
+    if (browser.android) {
+        window.androidJsObj.savePictureShare(JSON.stringify(obj))
+    } else {
+        window.webkit.messageHandlers.savePictureShare.postMessage(JSON.stringify(obj))
+    }
+})
+// 保存圖片
+$('.code .but').click(function () {
+    obj.type = 2;
+    if (browser.android) {
+        window.androidJsObj.savePictureShare(JSON.stringify(obj))
+    } else {
+        window.webkit.messageHandlers.savePictureShare.postMessage(JSON.stringify(obj))
+    }
+})
+// 復制邀請碼
+$('.bg .myInfo .copy').click(function () {
+    $.copy({
+        text: "復制成功", //分享提示文案
+        copyUrl: inviteCode, //自定義復制
+        tipTime: 1000, //分享提示消失時間
+        copyId: "#copy" //復制按鈕id
+    });
+})
+// 切換收益大Tab
+$('.bg .incomeBox .tab div').click(function () {
+    var i = $(this).index() + 1;
+    text = i == 1 ? '直接' : '間接';
+    $(this).addClass('act').siblings().removeClass('act');
+    $('.bg .incomeBox .sTab div').eq(0).text(`${text}邀請收益記錄`);
+    $('.bg .incomeBox .sTab div').eq(1).text(`${text}邀請用戶記錄`);
+    $('.bg .incomeBox .sTab div').removeClass('tab1').removeClass('tab2');
+    $('.bg .incomeBox .sTab div').eq(0).addClass(`tab1`);
+    page = 1;
+    $('.bg .incomeBox ul li').remove();
+    typeStr = i == 1 ? "1,3" : "2,4";
+    profitPage();
+})
+// 小tab切換
+$('.bg .incomeBox .sTab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.bg .incomeBox .sTab div').removeClass('tab1').removeClass('tab2');
+    $(this).addClass(`tab${i}`);
+    page = 1;
+    typeStr = (i == 1 && text == '直接') ? "1,3" : (i == 2 && text == '直接') ? "1" : (i == 1 && text == '間接') ? "2,4" : "2";
+    $('.bg .incomeBox ul li').remove();
+    if (i == 1) {
+        profitPage();
+    } else {
+        userPage();
+    }
+})
+// 滾動
+$('.bg .incomeBox ul').scroll(function () {
+    let scrollTop = $(this).scrollTop()
+    let scrollHeight = $('.bg .incomeBox ul')[0].scrollHeight
+    let ulHeight = $(this).innerHeight()
+    if (scrollTop + ulHeight + 100 >= scrollHeight) {
+        if (isLock) {
+            // 請求下一頁
+            page = page + 1;
+            profitPage();
+            isLock = false;
+        }
+    }
+})
+// 獲取收益接口
+function profitPage () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/userInviteFissionRewardRecord/profitPage',
+        data: { pageNum: page, pageSize: 10, typeStr },
+        success (res) {
+            if (res.code === 200) {
+                var str = '';
+                if (text == '直接' && typeStr == "1,3") {
+                    $('.bg .incomeBox .tableTitle div').remove();
+                    $('.bg .incomeBox .tableTitle').append(`<div>時間</div><div>收益</div><div>收益類型</div><div>直接邀請對象</div>`);
+                } else if (text == '間接' && typeStr == "2,4") {
+                    $('.bg .incomeBox .tableTitle div').remove();
+                    $('.bg .incomeBox .tableTitle').append(`<div>時間</div><div>收益</div><div>收益類型</div><div>間接邀請對象</div>`);
+                }
+                if (res.data.records.length == 0) {
+                    if (page == 1) {
+                        str += `
+                        <li>
+                            <div class="">暫無</div>
+                            <div>暫無</div>
+                            <div>暫無</div>
+                            <div class="">暫無</div>
+                        </li>
+                    `}
+                    isLock = false;
+                } else {
+                    console.log(text);
+                    if (text == '直接' && typeStr == "1,3") {
+                        res.data.records.forEach(res => {
+                            str += `
+                            <li>
+                                <div class="act">
+                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
+                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                </div>
+                                <div>+${res.rewardNum} <img src="./images/${res.rewardType == 1 ? 'diamond' : 'magicStick'}.png" alt=""></div>
+                                <div>${res.type == 1 && res.rewardType == 1 ? '邀請好友注冊' : res.type == 3 && res.rewardType == 1 ? '好友儲值返現' : res.type == 3 && res.rewardType == 2 ? '好友首次儲值' : '間接邀請儲值返現'}</div>
+                                <div class="act">
+                                    <p>${res.inviteNick}</p>
+                                    <b>ID:${res.inviteErBanNo}</b>
+                                </div>
+                            </li>
+                            `
+                        });
+                    } else if (text == '間接' && typeStr == "2,4") {
+                        res.data.records.forEach(res => {
+                            str += `
+                            <li>
+                                <div class="act">
+                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
+                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                </div>
+                                <div>+${res.rewardNum} <img src="./images/${res.rewardType == 1 ? 'diamond' : 'magicStick'}.png" alt=""></div>
+                                <div>${res.type == 1 && res.rewardType == 1 ? '邀請好友注冊' : res.type == 3 && res.rewardType == 1 ? '好友儲值返現' : res.type == 3 && res.rewardType == 2 ? '好友首次儲值' : '間接邀請儲值返現'}</div>
+                                <div class="act">
+                                    <p>${res.inviteNick}</p>
+                                    <b>ID:${res.inviteErBanNo}</b>
+                                </div>
+                            </li>
+                            `
+                        });
+                    }
+                    isLock = true;
+                }
+                $('.bg .incomeBox ul').append(str);
+            } else {
+                isLock = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            isLock = true;
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// 獲取收益接口
+function userPage () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/userInviteFissionRewardRecord/userPage',
+        data: { pageNum: page, pageSize: 10, type: typeStr },
+        success (res) {
+            if (res.code === 200) {
+                var str = '';
+                if (text == '直接' && typeStr == "1") {
+                    $('.bg .incomeBox .tableTitle div').remove();
+                    $('.bg .incomeBox .tableTitle').append(`<div>時間</div><div>直接邀請對象</div><div>30天內充值</div>`);
+                } else if (text == '間接' && typeStr == "2") {
+                    $('.bg .incomeBox .tableTitle div').remove();
+                    $('.bg .incomeBox .tableTitle').append(`<div>時間</div><div>直接邀請對象</div><div>間接邀請對象</div><div>30天內充值</div>`);
+                }
+                if (res.data.records.length == 0) {
+                    if (page == 1) {
+                        str += `
+                        <li>
+                            <div class="">暫無</div>
+                            <div>暫無</div>
+                            <div>暫無</div>
+                            <div class="">暫無</div>
+                        </li>
+                    `}
+                    isLock = false;
+                } else {
+                    if (text == '直接' && typeStr == "1") {
+                        res.data.records.forEach(res => {
+                            str += `
+                            <li>
+                                <div class="act">
+                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
+                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                </div>
+                                <div class="act">
+                                    <p>${res.inviteNick}</p>
+                                    <b>ID:${res.inviteErBanNo}</b>
+                                </div>
+                                <div>${res.charge30Amount ? res.charge30Amount : 0} <img src="./images/diamond.png" alt=""></div>
+                            </li>
+                            `
+                        });
+                    } else if (text == '間接' && typeStr == "2") {
+                        res.data.records.forEach(res => {
+                            str += `
+                            <li>
+                                <div class="act">
+                                    <p>${dateFormat(res.createTime, 'yyyy-MM-dd')}</p>
+                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
+                                </div>
+                                <div class="act">
+                                    <p>${res.inviteNick}</p>
+                                    <b>ID:${res.inviteErBanNo}</b>
+                                </div>
+                                <div class="act">
+                                    <p>${res.indirectNick}</p>
+                                    <b>ID:${res.indirectErBanNo}</b>
+                                </div>
+                                <div>${res.charge30Amount ? res.charge30Amount : 0} <img src="./images/diamond.png" alt=""></div>
+                            </li>
+                            `
+                        });
+                    }
+                    isLock = true;
+                }
+                $('.bg .incomeBox ul').append(str);
+            } else {
+                isLock = true;
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            isLock = true;
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}

view/peko/activity/2024-invitationFission/js/share.js

@@ -0,0 +1,128 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+var urlDate = getQueryString()
+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 inviteCode = "";
+// 初始化函數
+$(function () {
+    inviteCode = urlDate.inviteCode;
+    $('.box .codeBg .num').text(inviteCode);
+    getInfoFromClient()
+    setTimeout(function () {
+        var mySwiper = new Swiper('.swiper', {
+            // direction: "vertical",
+            loop: true,
+            autoplay: {
+                delay: 3500,
+                disableOnInteraction: false
+            },
+        })
+        /*
+             * MobLink 支持数组=>MobLink([...]) 和对象=>MobLink({...}) 两种初始化形式
+             * 页面上有多个元素需要跳转时使用数组方式,仅单个元素需要跳转时可以使用对象的方式进行初始化
+             * el: 表示网页上Element的id值,该字段为空或者不写,则表示MobLink **默认浮层** 上的打开按钮(注意:该字段支持selector方式: 1.'.class' 2.'#id1' 3.['#id1','#id2'])
+             * path: 对应App里需要恢复页面的路径
+             * default: 指定分享页默认场景参数（最多只能指定一项作为默认场景参数）
+             * params: 网页需要带给客户端的参数
+             */
+        // 页面上有多个元素需要跳转时要使用数组方式进行初始化
+        if (browser.android) {
+            MobLink([{
+                el: '#downloads',
+                path: '',
+                params: { mobLinkType: 1, inviteCode, }
+            }
+            ]);
+        }
+        if (browser.ios) {
+            MobLink([{
+                el: '#downloads',
+                path: '',
+                params: { mobLinkType: 1, inviteCode, }
+            }
+            ]);
+        }
+        $.copy({
+            text: "复制成功", //分享提示文案
+            copyUrl: inviteCode, //自定义复制
+            tipTime: 1000, //分享提示消失时间
+            copyId: "#copy" //复制按钮id
+        });
+    }, 100)
+})
+// 獲取接口
+function get () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '',
+        success (res) {
+            if (res.code === 200) {
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網路錯誤，請退出重進')
+        }
+    })
+}
+// $('.box .xz').click(function () {
+//     if (browser.ios) {
+//         window.location.href = `https://cebg.t4m.cn/`
+//     }
+// })
+function isAppInstalled(scheme) {
+    try {
+      // 尝试打开应用
+      window.location.href = scheme;
+      // 如果应用打开，则在500毫秒后捕获超时错误
+    //   setTimeout(() => {
+    //     window.location.href = 'https://apps.apple.com/app/id6446155565';
+    //   }, 500);
+    
+      // 应用可能打开，也可能没有打开，所以这里不返回结果
+    
+    } catch (err) {
+      // 如果发生错误，说明应用没有安装
+      console.log('App not installed');
+      // 重定向到fallback URL
+      window.location.href = 'https://apps.apple.com/app/id6446155565';
+    }
+  }
+$('.box .codeBg .copy').click(function () {
+    $.copy({
+        text: "复制成功", //分享提示文案
+        copyUrl: inviteCode, //自定义复制
+        tipTime: 1000, //分享提示消失时间
+        copyId: "#copy" //复制按钮id
+    });
+})

view/peko/activity/2024-invitationFission/share.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>我在PIKO，等你来玩</title>
+    <meta property="og:url" content="" />
+      <meta property="fb:app_id" content="1266232494209868" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="Piko，與心動聲音不期而遇" />
+      <meta property="og:description" content="聊天玩遊戲交朋友，隨時隨地在Piko" />
+      <meta class="content_image" property="og:image" content="https://image.pekolive.com/piko_logo.png" />
+      <meta property="og:image:width" content="256">
+      <meta property="og:image:height" content="256">
+      <meta property="og:image:type" content="image/png">
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
+    <link rel="stylesheet" href="./css/share.css?v=1.0">
+</head>
+
+<body>
+    <div class="header">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="./images/share/page1.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/share/page2.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/share/page3.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="box">
+        <!-- <a href="" class="asd">
+            <div class="xz" id="downloads">立即下载Piko</div>
+        </a> -->
+        <div class="xz" id="downloads">立即下载Piko</div>
+        <div class="codeBg">
+            <div class="num"></div>
+            <div class="copy" id="copy"></div>
+        </div>
+    </div>
+    <div class="bottom">下載註冊PiKO並填寫我的邀請碼，立得1000鑽石！</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/swiper-bundle.min.js"></script>
+<script type="text/javascript" src="//cebg.t4m.cn/applink.js"></script>
+<script src="../../common/js/jquery.copy.min.js"></script>
+<script src="./js/share.js?v=1.5"></script>