调整刷新位置

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

@@ -181,8 +181,8 @@ body {
 
 .content .lineBox .tavBox div {
   width: 0.68rem;
-  height: 0.38667rem;
-  line-height: 0.38667rem;
+  height: 0.53333rem;
+  line-height: 0.53333rem;
   border-radius: 0.10667rem;
   background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
   color: #FFFFFF;

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

@@ -184,8 +184,8 @@ body {
             div {
                 width: px2rem(51);
                 // padding: 0 px2rem(10);
-                height: px2rem(29);
-                line-height: px2rem(29);
+                height: px2rem(40);
+                line-height: px2rem(40);
                 border-radius: px2rem(8);
                 background: linear-gradient(0deg, #6871B0 0%, #6483CA 100%);
                 color: #FFFFFF;

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

@@ -13,7 +13,7 @@ function tianJia (e) {
     baba.appendChild(sunZi);
     erZi.push({
         el: sunZi,
-        top: e.pageY - 30,
+        top: e.pageY - 80,
         left: e.pageX - 20,
         opacity: 1,
         scale: 1,

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

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

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

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

view/peko/modules/boxActivity/index.html

@@ -0,0 +1,91 @@
+<!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>
+    <!-- 更新 -->
+    <img src="./images/update.png" alt="" class="updata">
+    <!-- 免責聲明 -->
+    <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>

view/peko/modules/boxActivity/js/index.js

@@ -0,0 +1,130 @@
+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();
+        $('.updata').show();
+    }else{
+        $('.updata').hide();
+    }
+})
+// 寶箱切換
+$('.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();
+    }
+})
+// 更新
+$('.updata').click(function () {
+    getRank();
+})

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" });
+}

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 body {
   width: 100%;
   height: 21.65333rem;
@@ -226,21 +227,36 @@ body {
   z-index: 3;
 }
 
+.tarotBox .cardBox span {
+  text-align: center;
+  font-size: 0.34667rem;
+  font-weight: 600;
+  position: absolute;
+  left: 0.3rem;
+  top: 0.3rem;
+}
+
 .tarotBox .card1 {
   background: url(../images/card.png) no-repeat;
   background-size: 100% 100%;
+  color: #64CCF3;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
 
 .tarotBox .card2 {
   background: url(../images/card2.png) no-repeat;
   background-size: 100% 100%;
   display: none;
+  color: #DC8FF0;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
 
 .tarotBox .card3 {
   background: url(../images/card3.png) no-repeat;
   background-size: 100% 100%;
   display: none;
+  color: #FFEB3B;
+  text-shadow: #000 0.01333rem 0.01333rem 0.01333rem;
 }
 
 .tarotBox .card1_active {
@@ -594,13 +610,15 @@ h3 {
 .winningRecord .winningRecord_in ul li {
   background: none;
   width: 100%;
-  height: 1.06667rem;
-  line-height: 1.06667rem;
+  height: 1.33333rem;
   color: #FFEE9D;
   font-size: 0.34667rem;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
+  word-wrap: break-word;
+  /* 使用自动换行功能 */
+  margin-bottom: 0.13333rem;
 }
 
 .winningRecord .winningRecord_in ul li div {
@@ -608,18 +626,12 @@ h3 {
   width: 25%;
 }
 
-.winningRecord .winningRecord_in ul li .box {
-  line-height: 1.06667rem;
-}
-
 .winningRecord .winningRecord_in ul li .box_acitve {
   line-height: 0.45rem;
-  margin-top: 0.1rem;
 }
 
 .winningRecord .winningRecord_in ul li .time {
   line-height: 0.4rem;
-  margin-top: 0.2rem;
 }
 
 .winningRecord .winningRecord_in ul .active {

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

@@ -1,5 +1,5 @@
-@function px2rem($px, $rem:75) {
-    @return $px / $rem+rem;
+@function px2rem($px) {
+    @return $px / 75+rem;
 }
 
 html {}
@@ -228,14 +228,28 @@ body {
     .cardBox {
         width: px2rem(148);
         height: px2rem(241);
+        // line-height: px2rem(241);
         position: absolute;
         z-index: 3;
+
         // transition: all 1s;
+        span {
+            text-align: center;
+            font-size: px2rem(26);
+            font-weight: 600;
+            position: absolute;
+            // left: px2rem(13);
+            // top: px2rem(10);
+            left: 0.3rem;
+            top: 0.3rem;
+        }
     }
 
     .card1 {
         background: url(../images/card.png) no-repeat;
         background-size: 100% 100%;
+        color: #64CCF3;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
 
@@ -243,6 +257,8 @@ body {
         background: url(../images/card2.png) no-repeat;
         background-size: 100% 100%;
         display: none;
+        color: #DC8FF0;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
 
@@ -250,6 +266,8 @@ body {
         background: url(../images/card3.png) no-repeat;
         background-size: 100% 100%;
         display: none;
+        color: #FFEB3B;
+        text-shadow:#000 px2rem(1) px2rem(1) px2rem(1);
     }
 
     .card1_active {
@@ -601,31 +619,32 @@ h3 {
             li {
                 background: none;
                 width: 100%;
-                height: px2rem(80);
-                line-height: px2rem(80);
+                height: px2rem(100);
+                // line-height: px2rem(100);
                 color: #FFEE9D;
                 font-size: px2rem(26);
                 display: flex;
                 justify-content: space-between;
                 overflow: hidden;
-
+                word-wrap: break-word; /* 使用自动换行功能 */
+                margin-bottom: px2rem(10);
                 div {
                     text-align: center;
                     width: 25%;
                 }
 
                 .box {
-                    line-height: px2rem(80);
+                    // line-height: px2rem(100);
                 }
 
                 .box_acitve {
                     line-height: 0.45rem;
-                    margin-top: 0.1rem;
+                    // margin-top: 0.1rem;
                 }
 
                 .time {
                     line-height: 0.4rem;
-                    margin-top: 0.2rem;
+                    // margin-top: 0.2rem;
                 }
             }
 

view/peko/modules/luckyTarot/index.html

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

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

@@ -212,11 +212,12 @@ const recordPage = () => {
             if (res.code == 200) {
                 var str = ''
                 res.data.records.forEach((res, i) => {
+                            // <div>${JSON.parse(res.selectdNo).length}張</div>
                     str += `
                         <li calss="${i % 2 == 0 ? 'active' : ''}">
                             <div>${res.prodName}</div>
-                            <div>${JSON.parse(res.selectdNo).length}張</div>
-                            <div class="box ${res.win ? 'box_acitve' : ''}">${res.win ? `中獎<br>${res.receiveGoldNum}鉆石` : '未中獎'}</div>
+                            <div>${res.selectdNo}</div>
+                            <div class="box ${res.win ? 'box_acitve' : 'box_acitve'}">${res.win ? `幸運號碼: ${res.drawNum}<br>${res.receiveGoldNum}鉆石` :`未猜中<br>幸運號碼: ${res.drawNum}`}</div>
                             <div class="time">${dateFormat(res.createTime, 'yyyy.MM.dd')}<br>${dateFormat(res.createTime, 'hh:mm:ss')}</div>
                         </li>
                     `
@@ -344,7 +345,7 @@ function kineticEffect (arr, bool, data) {
             $('.tarotBox .cardBoxText').hide();
             $('.tarotBox .cardBoxText_gift').hide();
             $('.cardBoxText_gx').html(`
-                <p>翻到鉆石卡!</p>
+                <p>翻到幸運數字${data.data.drawNum}！</p>
                 <p>獲得 <b>${data.data.receiveGoldNum}</b> 鉆石</p>
             `)
             $('.cardBoxText_gx').show();