完成宝箱活动

2023-12-13 16:32:24 +08:00
parent a46a0c122f
commit 53999d54a7
25 changed files with 1044 additions and 0 deletions
--- a/view/peko/modules/boxActivity/css/index.css
+++ b/view/peko/modules/boxActivity/css/index.css
@@ -0,0 +1,384 @@
+html,
+body {
+  width: 100%;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 10rem 39.94667rem;
+}
+
+.rabbit {
+  z-index: 999;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.back {
+  position: fixed;
+  top: 0.93333rem;
+  left: 0.45333rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+.header {
+  width: 10rem;
+  height: 10rem;
+  margin: 0 auto -2rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab {
+  width: 7.86667rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  margin: 0 auto 0;
+  display: flex;
+  justify-content: space-between;
+  background: #1D388F;
+  border: 0.02667rem solid #8FC5FF;
+  box-sizing: border-box;
+  border-radius: 0.16rem;
+}
+
+.tab div {
+  width: 3.94667rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.37333rem;
+}
+
+.tab .atc {
+  color: #fff;
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab {
+  width: 8.96rem;
+  height: 2.24rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.90667rem auto 0;
+}
+
+.boxTab div {
+  width: 2.82667rem;
+  height: 100%;
+  position: relative;
+}
+
+.boxTab div .top {
+  width: 1.97333rem;
+  height: 1.97333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 1.01333rem;
+}
+
+.boxTab div p {
+  width: 100%;
+  text-align: center;
+  color: #696C70;
+  font-size: 0.32rem;
+  position: absolute;
+  left: 0;
+  top: 1.25333rem;
+  font-weight: 500;
+}
+
+.boxTab div span {
+  width: 100%;
+  text-align: center;
+  font-size: 0.29333rem;
+  height: 0.32rem;
+  line-height: 0.32rem;
+  color: #696C70;
+  font-weight: 400;
+  vertical-align: middle;
+  position: absolute;
+  left: 0;
+  top: 1.70667rem;
+}
+
+.boxTab div span .img {
+  width: 0.32rem;
+  height: 0.32rem;
+  display: inline-block;
+  vertical-align: middle;
+  background: url(../images/notDiamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab div span b {
+  vertical-align: middle;
+}
+
+.boxTab .box1 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box1 .top {
+  background: url(../images/notBox1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box2 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box2 .top {
+  background: url(../images/notBox2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box3 {
+  background: url(../images/notShow.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .box3 .top {
+  background: url(../images/notBox3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 .top {
+  background: url(../images/box1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act1 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act1 span b {
+  color: #FFFFFF;
+}
+
+.boxTab .act2 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 .top {
+  background: url(../images/box2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act2 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act2 span b {
+  color: #FFFFFF;
+}
+
+.boxTab .act3 {
+  background: url(../images/show.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 .top {
+  background: url(../images/box3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 p {
+  color: #FFFFFF;
+}
+
+.boxTab .act3 span .img {
+  background: url(../images/diamond.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.boxTab .act3 span b {
+  color: #FFFFFF;
+}
+
+.page1 .boxList {
+  width: 9.14667rem;
+  display: block;
+  margin: 0.05333rem auto 0;
+}
+
+.page1 .boxList1 {
+  height: 26.18667rem;
+}
+
+.page1 .boxList2 {
+  height: 20.72rem;
+}
+
+.page1 .boxList3 {
+  height: 21.84rem;
+}
+
+.page2 {
+  display: none;
+  width: 9.14667rem;
+  height: 8.3rem;
+  margin: 0 auto 0;
+  overflow-y: scroll;
+}
+
+.page2::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 .div {
+  width: 9.14667rem;
+  height: 1.97333rem;
+  margin-bottom: 0.10667rem;
+  background: url(../images/liBg.png) no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding: 0 0.32rem;
+}
+
+.page2 .div .leftUser {
+  float: left;
+  width: 1.76rem;
+  margin-right: 0.21333rem;
+  margin-top: 0.21333rem;
+}
+
+.page2 .div .leftUser .tx {
+  display: block;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.page2 .div .leftUser p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.05333rem;
+}
+
+.page2 .div .inFo {
+  float: left;
+  width: 3rem;
+  text-align: center;
+  margin-top: 0.53333rem;
+}
+
+.page2 .div .inFo p {
+  width: 100%;
+  text-align: center;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.32rem;
+  margin-bottom: 0.2rem;
+}
+
+.page2 .div .inFo p b {
+  color: #FFEF8A;
+}
+
+.page2 .div .inFo span {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.32rem;
+}
+
+.page2 .div .inFo span b {
+  color: #7AE9FF;
+}
+
+.page2 .div .rigtUser {
+  float: left;
+  width: 1.76rem;
+  margin-top: 0.21333rem;
+}
+
+.page2 .div .rigtUser .tx {
+  display: block;
+  width: 1.06667rem;
+  height: 1.06667rem;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.page2 .div .rigtUser p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.29333rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 0.05333rem;
+}
+
+.page2 .div .gift {
+  float: right;
+  display: block;
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-top: 0.18667rem;
+}
+
+.disclaimers {
+  width: 100%;
+  margin-top: 0.24rem;
+  margin-bottom: 0.26667rem;
+}
+
+.disclaimers p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.26667rem;
+  margin-bottom: 0.13333rem;
+}
--- a/view/peko/modules/boxActivity/css/index.scss
+++ b/view/peko/modules/boxActivity/css/index.scss
@@ -0,0 +1,401 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: url(../images/bg.png) no-repeat;
+    background-size: px2rem(750) px2rem(2996);
+}
+
+.rabbit {
+    z-index: 999;
+    width: px2rem(60);
+    height: px2rem(60);
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70);
+    left: px2rem(34);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(750);
+    margin: 0 auto -2rem;
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.tab {
+    width: px2rem(590);
+    height: px2rem(76);
+    line-height: px2rem(76);
+    margin: 0 auto 0;
+    display: flex;
+    justify-content: space-between;
+    background: #1D388F;
+    border: px2rem(2) solid #8FC5FF;
+    box-sizing: border-box;
+    border-radius: px2rem(12);
+
+    div {
+        width: px2rem(296);
+        text-align: center;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: px2rem(28);
+    }
+
+    .atc {
+        color: #fff;
+        background: url(../images/tabAct.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+
+.boxTab {
+    width: px2rem(672);
+    height: px2rem(168);
+    display: flex;
+    justify-content: space-between;
+    margin: px2rem(68) auto 0;
+
+    div {
+        width: px2rem(212);
+        height: 100%;
+        position: relative;
+
+        .top {
+            width: px2rem(148);
+            height: px2rem(148);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: px2rem(76);
+        }
+
+        p {
+            width: 100%;
+            text-align: center;
+            color: #696C70;
+            font-size: px2rem(24);
+            position: absolute;
+            left: 0;
+            top: px2rem(94);
+            font-weight: 500;
+        }
+
+        span {
+            width: 100%;
+            text-align: center;
+            font-size: px2rem(22);
+            height: px2rem(24);
+            line-height: px2rem(24);
+            color: #696C70;
+            font-weight: 400;
+            vertical-align: middle;
+            position: absolute;
+            left: 0;
+            top: px2rem(128);
+
+            .img {
+                width: px2rem(24);
+                height: px2rem(24);
+                display: inline-block;
+                vertical-align: middle;
+                background: url(../images/notDiamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .box1 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .box2 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .box3 {
+        background: url(../images/notShow.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/notBox3.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .act1 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .act2 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .act3 {
+        background: url(../images/show.png) no-repeat;
+        background-size: 100% 100%;
+
+        .top {
+            background: url(../images/box3.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        p {
+            color: #FFFFFF;
+        }
+
+        span {
+            .img {
+                background: url(../images/diamond.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            b {
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .boxList {
+        width: px2rem(686);
+        display: block;
+        margin: px2rem(4) auto 0;
+    }
+
+    .boxList1 {
+        height: px2rem(1964);
+    }
+
+    .boxList2 {
+        height: px2rem(1554);
+    }
+
+    .boxList3 {
+        height: px2rem(1638);
+    }
+}
+
+.page2 {
+    display: none;
+    width: px2rem(686);
+    height: 8.3rem;
+    margin: 0 auto 0;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .div {
+        width: px2rem(686);
+        height: px2rem(148);
+        margin-bottom: px2rem(8);
+        background: url(../images/liBg.png) no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(24);
+
+        .leftUser {
+            float: left;
+            width: px2rem(132);
+            margin-right: px2rem(16);
+            margin-top: px2rem(16);
+
+            .tx {
+                display: block;
+                width: px2rem(80);
+                height: px2rem(80);
+                border-radius: 50%;
+                margin: 0 auto;
+            }
+
+            p {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(22);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-top: px2rem(4);
+            }
+        }
+
+        .inFo {
+            float: left;
+            width: 3rem;
+            text-align: center;
+            margin-top: px2rem(40);
+
+            p {
+                width: 100%;
+                text-align: center;
+                font-weight: 400;
+                color: rgba(255, 255, 255, 0.9);
+                font-size: px2rem(24);
+                margin-bottom: px2rem(15);
+
+                b {
+                    color: #FFEF8A;
+                }
+            }
+
+            span {
+                width: 100%;
+                display: block;
+                text-align: center;
+                font-weight: 400;
+                color: rgba(255, 255, 255, 0.9);
+                font-size: px2rem(24);
+
+                b {
+                    color: #7AE9FF;
+                }
+            }
+        }
+
+        .rigtUser {
+            float: left;
+            width: px2rem(132);
+            margin-top: px2rem(16);
+
+            .tx {
+                display: block;
+                width: px2rem(80);
+                height: px2rem(80);
+                border-radius: 50%;
+                margin: 0 auto;
+            }
+
+            p {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(22);
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-top: px2rem(4);
+            }
+        }
+
+        .gift {
+            float: right;
+            display: block;
+            width: px2rem(120);
+            height: px2rem(120);
+            margin-top: px2rem(14);
+        }
+    }
+}
+
+.disclaimers {
+    width: 100%;
+    margin-top: px2rem(18);
+    margin-bottom: px2rem(20);
+
+    p {
+        width: 100%;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(20);
+        margin-bottom: px2rem(10);
+    }
+}
--- a/view/peko/modules/boxActivity/images/bg.png
+++ b/view/peko/modules/boxActivity/images/bg.png
--- a/view/peko/modules/boxActivity/images/box1.png
+++ b/view/peko/modules/boxActivity/images/box1.png
--- a/view/peko/modules/boxActivity/images/box2.png
+++ b/view/peko/modules/boxActivity/images/box2.png
--- a/view/peko/modules/boxActivity/images/box3.png
+++ b/view/peko/modules/boxActivity/images/box3.png
--- a/view/peko/modules/boxActivity/images/boxList1.png
+++ b/view/peko/modules/boxActivity/images/boxList1.png
--- a/view/peko/modules/boxActivity/images/boxList2.png
+++ b/view/peko/modules/boxActivity/images/boxList2.png
--- a/view/peko/modules/boxActivity/images/boxList3.png
+++ b/view/peko/modules/boxActivity/images/boxList3.png
--- a/view/peko/modules/boxActivity/images/diamond.png
+++ b/view/peko/modules/boxActivity/images/diamond.png
--- a/view/peko/modules/boxActivity/images/header.png
+++ b/view/peko/modules/boxActivity/images/header.png
--- a/view/peko/modules/boxActivity/images/liBg.png
+++ b/view/peko/modules/boxActivity/images/liBg.png
--- a/view/peko/modules/boxActivity/images/logo.png
+++ b/view/peko/modules/boxActivity/images/logo.png
--- a/view/peko/modules/boxActivity/images/notBox1.png
+++ b/view/peko/modules/boxActivity/images/notBox1.png
--- a/view/peko/modules/boxActivity/images/notBox2.png
+++ b/view/peko/modules/boxActivity/images/notBox2.png
--- a/view/peko/modules/boxActivity/images/notBox3.png
+++ b/view/peko/modules/boxActivity/images/notBox3.png
--- a/view/peko/modules/boxActivity/images/notDiamond.png
+++ b/view/peko/modules/boxActivity/images/notDiamond.png
--- a/view/peko/modules/boxActivity/images/notShow.png
+++ b/view/peko/modules/boxActivity/images/notShow.png
--- a/view/peko/modules/boxActivity/images/show.png
+++ b/view/peko/modules/boxActivity/images/show.png
--- a/view/peko/modules/boxActivity/images/tabAct.png
+++ b/view/peko/modules/boxActivity/images/tabAct.png
--- a/view/peko/modules/boxActivity/images/travel/back.png
+++ b/view/peko/modules/boxActivity/images/travel/back.png
--- a/view/peko/modules/boxActivity/images/xingyunbao.png
+++ b/view/peko/modules/boxActivity/images/xingyunbao.png
--- a/view/peko/modules/boxActivity/index.html
+++ b/view/peko/modules/boxActivity/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>宝箱</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 主视觉 -->
+    <div class="header"></div>
+    <!-- tab切换 -->
+    <div class="tab">
+        <div class="atc">宝箱介绍</div>
+        <div>手气榜</div>
+    </div>
+
+    <!-- 宝箱奖励切换 -->
+    <div class="boxTab">
+        <div class="box box1 act1">
+            <div class="top"></div>
+            <p>白銀寶箱</p>
+            <span>
+                <div class="img"></div><b>600</b>
+            </span>
+        </div>
+        <div class="box box2">
+            <div class="top"></div>
+            <p>黃金寶箱</p>
+            <span>
+                <div class="img"></div><b>2000</b>
+            </span>
+        </div>
+        <div class="box box3">
+            <div class="top"></div>
+            <p>鉆石寶箱</p>
+            <span>
+                <div class="img"></div><b>5000</b>
+            </span>
+        </div>
+    </div>
+
+    <!-- 页面1 -->
+    <div class="page1">
+        <!-- 宝箱奖励 -->
+        <img src="./images/boxList1.png" alt="" class="boxList">
+    </div>
+
+    <!-- 页面2 -->
+    <div class="page2">
+        <div class="div">
+            <div class="leftUser">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p>我是名字哦哦哦哦哦哦</p>
+            </div>
+            <div class="inFo">
+                <p>赠送 <b>白银宝箱*1</b> 给</p>
+                <span>获得 <b>牛气冲天*1</b></span>
+            </div>
+            <div class="rigtUser">
+                <img src="./images/logo.png" alt="" class="tx">
+                <p>我是名字哦哦哦哦哦哦</p>
+            </div>
+            <img src="" alt="" class="gift">
+        </div>
+    </div>
+
+    <!-- 免责声明 -->
+    <div class="disclaimers">
+        <p>活動最終解釋權歸Piko Live所有</p>
+        <p>本活動以及獎勵與Google/蘋果公司無</p>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="./js/wow.js"></script>
+<script src="./js/index.js"></script>
--- a/view/peko/modules/boxActivity/js/index.js
+++ b/view/peko/modules/boxActivity/js/index.js
@@ -0,0 +1,123 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+var boxId = [];
+if (env == 'test') {
+    boxId = [2167, 2166, 2165];
+    new VConsole();
+} else {
+    boxId = [2210, 2211, 2212];
+}
+var giftId = boxId[0];
+var page = 1;
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}// 初始化函數
+$(function () {
+    getInfoFromClient()
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        getRank();
+    }, 100)
+})
+// 榜单接口
+function getRank () {
+    $('.page2 .div').remove();
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '/luckybag/getRank',
+        data: { giftId },
+        success (res) {
+            if (res.code === 200) {
+                var str = '';
+                res.data.forEach(res => {
+                    str += `
+                    <div class="div">
+                        <div class="leftUser">
+                            <img src="${res.sendAvatar}" alt="" class="tx">
+                            <p>${res.sendNick}</p>
+                        </div>
+                        <div class="inFo">
+                            <p>贈送 <b>${res.luckyBagName}*${res.luckyBagNum}</b> 給</p>
+                            <span>獲得 <b>${res.giftName}*${res.giftNum}</b></span>
+                        </div>
+                        <div class="rigtUser">
+                            <img src="${res.receiveAvatar}" alt="" class="tx">
+                            <p>${res.receiveNick}</p>
+                        </div>
+                        <img src="${res.giftUrl}" alt="" class="gift">
+                    </div>
+                    `
+                });
+                $('.page2').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
+// 页面切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    page = i;
+    $(this).addClass('atc').siblings().removeClass('atc');
+    $('.page1').hide();
+    $('.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 2) {
+        getRank();
+    }
+})
+// 宝箱切换
+$('.boxTab .box').click(function () {
+    var i = $(this).index();
+    giftId = boxId[i];
+    $('.boxTab .box').removeClass('act1').removeClass('act2').removeClass('act3');
+    $(this).addClass(`act${i + 1}`);
+    if (page == 1) {
+        $('.page1 .boxList').removeClass('boxList1').removeClass('boxList2').removeClass('boxList3').addClass(`boxList${i + 1}`);
+        $('.page1 .boxList').attr('src', `./images/boxList${i + 1}.png`);
+    } else {
+        getRank();
+    }
+})
--- a/view/peko/modules/boxActivity/js/wow.js
+++ b/view/peko/modules/boxActivity/js/wow.js
@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/xingyunbao.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 80,
+        left: e.pageX - 20,
+        opacity: 1.3,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}