From 23b9501e009b3d9ab81a5909bfd857640b3dac42 Mon Sep 17 00:00:00 2001
From: Dragon <13925835632@139.com>
Date: Thu, 23 Nov 2023 20:11:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dios=E5=8A=A8=E6=95=88?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/peko/modules/luckyTarot/css/index.css  | 299 +++++++++++++-------
 view/peko/modules/luckyTarot/css/index.scss | 276 +++++++++---------
 view/peko/modules/luckyTarot/js/index.js    |   2 +
 3 files changed, 336 insertions(+), 241 deletions(-)

diff --git a/view/peko/modules/luckyTarot/css/index.css b/view/peko/modules/luckyTarot/css/index.css
index 07b02d5..5593711 100644
--- a/view/peko/modules/luckyTarot/css/index.css
+++ b/view/peko/modules/luckyTarot/css/index.css
@@ -1,6 +1,6 @@
 body {
   width: 100%;
-  height: 21.6533333333rem;
+  height: 21.65333rem;
   background: url(../images/bg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto;
@@ -14,26 +14,28 @@ body {
 
 .back {
   position: fixed;
-  top: 0.9333333333rem;
-  left: 0.4533333333rem;
+  top: 0.93333rem;
+  left: 0.45333rem;
   z-index: 9999;
-  width: 0.8266666667rem;
-  height: 0.8266666667rem;
+  width: 0.82667rem;
+  height: 0.82667rem;
 }
+
 .back img {
   width: 100%;
   height: 100%;
 }
+
 .back p {
   color: #fff;
-  font-size: 0.4266666667rem;
+  font-size: 0.42667rem;
   position: absolute;
   width: 9rem;
   left: 0;
   top: 0;
   height: 100%;
   text-align: center;
-  line-height: 0.8266666667rem;
+  line-height: 0.82667rem;
 }
 
 .header {
@@ -47,25 +49,27 @@ body {
 
 .roulette {
   width: 10rem;
-  height: 11.3333333333rem;
+  height: 11.33333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 0rem;
 }
+
 .roulette .roulette_in {
   width: 100%;
   height: 100%;
 }
+
 .roulette .roulette_in canvas {
   width: 100%;
   height: 100%;
 }
 
 .gold_10 {
-  width: 6.4266666667rem;
-  height: 0.6933333333rem;
-  margin: 0rem auto 0.2666666667rem;
+  width: 6.42667rem;
+  height: 0.69333rem;
+  margin: 0rem auto 0.26667rem;
   display: block;
   position: relative;
   z-index: 3;
@@ -73,239 +77,278 @@ body {
 
 .rule {
   width: 0.68rem;
-  height: 1.8666666667rem;
+  height: 1.86667rem;
   background: url(../images/icon.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 2.8133333333rem;
+  top: 2.81333rem;
   right: 0;
   color: #FFE7A9;
-  font-size: 0.2933333333rem;
+  font-size: 0.29333rem;
   text-align: center;
-  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
   box-sizing: border-box;
   z-index: 3;
 }
 
 .record {
   width: 0.68rem;
-  height: 1.8666666667rem;
+  height: 1.86667rem;
   background: url(../images/icon.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 4.8533333333rem;
+  top: 4.85333rem;
   right: 0;
   color: #FFE7A9;
-  font-size: 0.2933333333rem;
+  font-size: 0.29333rem;
   text-align: center;
-  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
   box-sizing: border-box;
   z-index: 9;
 }
 
 .tarotBox {
-  width: 9.8266666667rem;
-  height: 14.1333333333rem;
+  width: 9.82667rem;
+  height: 14.13333rem;
   background: url(../images/middleBg.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0;
   position: relative;
+  overflow: hidden;
 }
+
 .tarotBox .tabBox {
   width: 9.56rem;
-  height: 1.3066666667rem;
+  height: 1.30667rem;
   display: flex;
   justify-content: space-between;
   background: url(../images/tabBox.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto;
 }
+
 .tarotBox .tabBox div {
-  width: 3.3733333333rem;
+  width: 3.37333rem;
   height: 100%;
   color: #FEF0C0;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
   text-align: center;
   box-sizing: border-box;
-  padding-top: 0.3466666667rem;
+  padding-top: 0.34667rem;
 }
+
 .tarotBox .tabBox div b {
   color: #FEF0C0;
   font-size: 0.24rem;
   margin-top: 0.04rem;
   display: block;
 }
+
 .tarotBox .tabBox .active1 {
   background: url(../images/active1.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active1 b {
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active2 {
   background: url(../images/active2.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active2 b {
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active3 {
   background: url(../images/active3.png) no-repeat;
   background-size: 100% 100%;
   color: #FFFFFF;
 }
+
 .tarotBox .tabBox .active3 b {
   color: #FFFFFF;
 }
+
 .tarotBox .gradeText {
   position: absolute;
-  left: 0.9866666667rem;
-  top: 1.4666666667rem;
+  left: 0.98667rem;
+  top: 1.46667rem;
   color: #FFEAA9;
   font-size: 0.32rem;
 }
+
 .tarotBox .diamond {
-  min-width: 1.9733333333rem;
-  height: 0.5866666667rem;
-  border-radius: 0.5866666667rem;
-  line-height: 0.5866666667rem;
+  min-width: 1.97333rem;
+  height: 0.58667rem;
+  border-radius: 0.58667rem;
+  line-height: 0.58667rem;
   position: absolute;
   right: 0.96rem;
   top: 1.28rem;
   background: #343662;
   color: #FFFFFF;
-  border: 0.0133333333rem solid #FFF3B1;
+  border: 0.01333rem solid #FFF3B1;
   box-sizing: border-box;
   vertical-align: middle;
 }
+
 .tarotBox .diamond .diamondIcon {
   display: inline-block;
-  width: 0.3866666667rem;
+  width: 0.38667rem;
   height: 0.28rem;
   margin-top: 0.16rem;
-  margin-left: 0.1733333333rem;
+  margin-left: 0.17333rem;
 }
+
 .tarotBox .diamond b {
-  font-size: 0.2666666667rem;
+  font-size: 0.26667rem;
   display: inline-block;
-  margin: 0 0.0933333333rem;
+  margin: 0 0.09333rem;
 }
+
 .tarotBox .diamond .add {
   width: 0.24rem;
   height: 0.24rem;
   display: inline-block;
-  margin-top: 0.1733333333rem;
-  margin-right: 0.1866666667rem;
+  margin-top: 0.17333rem;
+  margin-right: 0.18667rem;
 }
+
 .tarotBox .cardBox {
-  width: 1.9733333333rem;
-  height: 3.2133333333rem;
+  width: 1.97333rem;
+  height: 3.21333rem;
   position: absolute;
   z-index: 3;
 }
+
 .tarotBox .card1 {
   background: url(../images/card.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card2 {
   background: url(../images/card2.png) no-repeat;
   background-size: 100% 100%;
   display: none;
 }
+
 .tarotBox .card3 {
   background: url(../images/card3.png) no-repeat;
   background-size: 100% 100%;
   display: none;
 }
+
 .tarotBox .card1_active {
   background: url(../images/card1_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card2_active {
   background: url(../images/card2_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card3_active {
   background: url(../images/card3_active.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_not {
   background: url(../images/not.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning1 {
   background: url(../images/winning1.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning2 {
   background: url(../images/winning2.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .card_winning3 {
   background: url(../images/winning3.png) no-repeat;
   background-size: 100% 100%;
 }
+
 .tarotBox .cardBox0 {
-  left: 0.9466666667rem;
-  top: 2.0933333333rem;
+  left: 0.94667rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox1 {
-  left: 2.9866666667rem;
-  top: 2.0933333333rem;
+  left: 2.98667rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox2 {
   left: 5.04rem;
-  top: 2.0933333333rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox3 {
   left: 7.08rem;
-  top: 2.0933333333rem;
+  top: 2.09333rem;
 }
+
 .tarotBox .cardBox4 {
   left: 7.08rem;
   top: 5.52rem;
 }
+
 .tarotBox .cardBox5 {
   left: 7.08rem;
-  top: 8.8533333333rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox6 {
   left: 5.04rem;
-  top: 8.8533333333rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox7 {
-  left: 2.9866666667rem;
-  top: 8.8533333333rem;
+  left: 2.98667rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox8 {
-  left: 0.9466666667rem;
-  top: 8.8533333333rem;
+  left: 0.94667rem;
+  top: 8.85333rem;
 }
+
 .tarotBox .cardBox9 {
-  left: 0.9466666667rem;
+  left: 0.94667rem;
   top: 5.52rem;
 }
+
 .tarotBox .cardBoxBut {
-  width: 2.5066666667rem;
-  height: 0.9866666667rem;
+  width: 2.50667rem;
+  height: 0.98667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.4666666667rem;
+  top: 7.46667rem;
   z-index: 3;
 }
+
 .tarotBox .butAgain {
-  width: 2.5066666667rem;
-  height: 0.9866666667rem;
+  width: 2.50667rem;
+  height: 0.98667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 7.4666666667rem;
+  top: 7.46667rem;
   display: none;
   z-index: 3;
 }
+
 .tarotBox .gonggao {
   width: 100%;
   height: 1.3rem;
@@ -315,27 +358,32 @@ body {
   top: 12.25rem;
   overflow: hidden;
 }
+
 .tarotBox .gonggao .ul1 {
   width: 100%;
   height: 100%;
 }
+
 .tarotBox .gonggao .ul1 li {
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 0.32rem;
-  margin-bottom: 0.1466666667rem;
+  margin-bottom: 0.14667rem;
 }
+
 .tarotBox .gonggao .ul1 li b {
   color: #FFEAA9;
 }
+
 .tarotBox .gonggao .ul1 li i {
   font-style: normal;
   color: #80E6FF;
 }
+
 .tarotBox .cardBoxText_gift {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -344,9 +392,10 @@ body {
   font-size: 0.4rem;
   text-align: center;
 }
+
 .tarotBox .cardBoxText_gx {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -355,22 +404,26 @@ body {
   padding-top: 0.88rem;
   display: none;
 }
+
 .tarotBox .cardBoxText_gx p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #FFE26D;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText_gx p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText_gx p b {
   color: #FFE26D;
 }
+
 .tarotBox .cardBoxText_no {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -379,22 +432,26 @@ body {
   padding-top: 0.88rem;
   display: none;
 }
+
 .tarotBox .cardBoxText_no p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #fff;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText_no p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText_no p b {
   color: #80E6FF;
 }
+
 .tarotBox .cardBoxText {
-  width: 4.2666666667rem;
-  height: 3.0133333333rem;
+  width: 4.26667rem;
+  height: 3.01333rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -403,31 +460,37 @@ body {
   padding-top: 0.88rem;
   z-index: 3;
 }
+
 .tarotBox .cardBoxText p {
   width: 100%;
   text-align: center;
-  margin-bottom: 0.2133333333rem;
+  margin-bottom: 0.21333rem;
   color: #fff;
-  font-size: 0.3733333333rem;
+  font-size: 0.37333rem;
 }
+
 .tarotBox .cardBoxText p i {
   font-style: normal;
 }
+
 .tarotBox .cardBoxText p b {
   color: #80E6FF;
 }
+
 .tarotBox .star {
   width: 4.48rem;
-  height: 3.8666666667rem;
+  height: 3.86667rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 5.52rem;
 }
+
 .tarotBox .star .star_in {
   width: 100%;
   height: 100%;
 }
+
 .tarotBox .star .star_in canvas {
   width: 100%;
   height: 100%;
@@ -443,35 +506,40 @@ h3 {
 
 .rule_pub {
   position: fixed;
+  right: 0;
+  bottom: 0;
   left: 0;
   top: 0;
-  bottom: 0;
-  right: 0;
   z-index: 99999;
   background: rgba(0, 0, 0, 0.4);
   display: none;
+  height: 100vh;
+  width: 100vw;
 }
+
 .rule_pub .rule_pub_in {
-  width: 8.72rem;
-  height: 11.6533333333rem;
+  width: 8rem;
+  height: 10.93333rem;
   background: url(../images/rule.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
   left: 50%;
-  top: 50%;
+  top: 45%;
   transform: translate(-50%, -50%);
 }
+
 .rule_pub .rule_pub_in .close {
   position: absolute;
-  width: 0.9066666667rem;
-  height: 0.9066666667rem;
+  width: 0.90667rem;
+  height: 0.90667rem;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.3333333333rem;
+  bottom: -1.33333rem;
 }
 
 .winningRecord {
   position: fixed;
+  height: 21.65333rem;
   left: 0;
   top: 0;
   bottom: 0;
@@ -479,78 +547,92 @@ h3 {
   z-index: 99999;
   background: rgba(0, 0, 0, 0.4);
   display: none;
+  height: 100vh;
+  width: 100vw;
 }
+
 .winningRecord .winningRecord_in {
   width: 8.72rem;
-  height: 11.6533333333rem;
+  height: 10.93333rem;
   background: url(../images/winningRecord.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
   left: 50%;
-  top: 50%;
+  top: 45%;
   transform: translate(-50%, -50%);
 }
+
 .winningRecord .winningRecord_in .title {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 0.4266666667rem;
+  margin-bottom: 0.42667rem;
 }
+
 .winningRecord .winningRecord_in .title div {
   width: 25%;
   color: #FFFFFF;
-  font-size: 0.3733333333rem;
-  margin-top: 2.1866666667rem;
+  font-size: 0.37333rem;
+  margin-top: 2.18667rem;
   text-align: center;
 }
+
 .winningRecord .winningRecord_in ul {
   width: 100%;
   box-sizing: border-box;
   padding: 0 0.04rem;
-  height: 8rem;
+  height: 7.7rem;
   margin: 0 auto;
   overflow-y: scroll;
 }
+
 .winningRecord .winningRecord_in ul::-webkit-scrollbar {
   width: 0;
   display: none;
 }
+
 .winningRecord .winningRecord_in ul li {
   background: none;
   width: 100%;
-  height: 1.0666666667rem;
-  line-height: 1.0666666667rem;
+  height: 1.06667rem;
+  line-height: 1.06667rem;
   color: #FFEE9D;
-  font-size: 0.3466666667rem;
+  font-size: 0.34667rem;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
 }
+
 .winningRecord .winningRecord_in ul li div {
   text-align: center;
   width: 25%;
 }
+
 .winningRecord .winningRecord_in ul li .box {
-  line-height: 1.0666666667rem;
+  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 {
   background: rgba(135, 133, 243, 0.6);
 }
+
 .winningRecord .winningRecord_in .close {
   position: absolute;
-  width: 0.9066666667rem;
-  height: 0.9066666667rem;
+  width: 0.90667rem;
+  height: 0.90667rem;
   left: 50%;
   transform: translateX(-50%);
-  bottom: -1.3333333333rem;
+  bottom: -1.33333rem;
 }
 
 .shade-mask-fragmentNum {
@@ -563,6 +645,7 @@ h3 {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.6);
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum {
   position: absolute;
   top: 50%;
@@ -577,45 +660,49 @@ h3 {
   flex-direction: column;
   align-items: center;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title {
   font-size: 0.48rem;
   font-weight: bold;
   color: #333333;
-  margin-top: 0.5066666667rem;
+  margin-top: 0.50667rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum img {
   width: 1.6rem;
   width: 1.6rem;
   margin-top: 1.44rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum p {
   font-size: 0.4rem;
   font-weight: 600;
   color: #333333;
-  margin-top: 0.6666666667rem;
+  margin-top: 0.66667rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap {
   display: flex;
   justify-content: space-between;
-  width: 6.8266666667rem;
-  height: 1.0133333333rem;
+  width: 6.82667rem;
+  height: 1.01333rem;
   margin-top: 1.2rem;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn,
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
   width: 3.2rem;
-  height: 1.0133333333rem;
-  line-height: 1.0133333333rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
   text-align: center;
-  border-radius: 0.5066666667rem;
-  font-size: 0.3733333333rem;
+  border-radius: 0.50667rem;
+  font-size: 0.37333rem;
   font-weight: 600;
   background-color: #EAE5FC;
   color: #7154EE;
 }
+
 .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
   background-color: #735FFE;
   color: #fff;
 }
-
-/*# sourceMappingURL=index.css.map */
diff --git a/view/peko/modules/luckyTarot/css/index.scss b/view/peko/modules/luckyTarot/css/index.scss
index 36d6adc..fc563a9 100644
--- a/view/peko/modules/luckyTarot/css/index.scss
+++ b/view/peko/modules/luckyTarot/css/index.scss
@@ -6,7 +6,7 @@ html {}
 
 body {
     width: 100%;
-    height: px2rem(1624, );
+    height: px2rem(1624);
     background: url(../images/bg.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
@@ -21,11 +21,11 @@ body {
 
 .back {
     position: fixed;
-    top: px2rem(70, );
-    left: px2rem(34, );
+    top: px2rem(70);
+    left: px2rem(34);
     z-index: 9999;
-    width: px2rem(62, );
-    height: px2rem(62, );
+    width: px2rem(62);
+    height: px2rem(62);
 
     img {
         width: 100%;
@@ -34,33 +34,33 @@ body {
 
     p {
         color: #fff;
-        font-size: px2rem(32, );
+        font-size: px2rem(32);
         position: absolute;
         width: 9rem;
         left: 0;
         top: 0;
         height: 100%;
         text-align: center;
-        line-height: px2rem(62, );
+        line-height: px2rem(62);
     }
 }
 
 .header {
-    width: px2rem(684, );
-    height: px2rem(228, );
-    margin: 0 auto px2rem(0, );
+    width: px2rem(684);
+    height: px2rem(228);
+    margin: 0 auto px2rem(0);
     display: block;
     position: relative;
     z-index: 3;
 }
 
 .roulette {
-    width: px2rem(750, );
-    height: px2rem(850, );
+    width: px2rem(750);
+    height: px2rem(850);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    top: px2rem(0, );
+    top: px2rem(0);
 
     .roulette_in {
         width: 100%;
@@ -74,57 +74,58 @@ body {
 }
 
 .gold_10 {
-    width: px2rem(482, );
-    height: px2rem(52, );
-    margin: px2rem(0, ) auto px2rem(20, );
+    width: px2rem(482);
+    height: px2rem(52);
+    margin: px2rem(0) auto px2rem(20);
     display: block;
     position: relative;
     z-index: 3;
 }
 
 .rule {
-    width: px2rem(51, );
-    height: px2rem(140, );
+    width: px2rem(51);
+    height: px2rem(140);
     background: url(../images/icon.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: px2rem(211, );
+    top: px2rem(211);
     right: 0;
     color: #FFE7A9;
-    font-size: px2rem(22, );
+    font-size: px2rem(22);
     text-align: center;
-    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
     box-sizing: border-box;
     z-index: 3;
 }
 
 .record {
-    width: px2rem(51, );
-    height: px2rem(140, );
+    width: px2rem(51);
+    height: px2rem(140);
     background: url(../images/icon.png) no-repeat;
     background-size: 100% 100%;
     position: absolute;
-    top: px2rem(364, );
+    top: px2rem(364);
     right: 0;
     color: #FFE7A9;
-    font-size: px2rem(22, );
+    font-size: px2rem(22);
     text-align: center;
-    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
     box-sizing: border-box;
     z-index: 9;
 }
 
 .tarotBox {
-    width: px2rem(737, );
-    height: px2rem(1060, );
+    width: px2rem(737);
+    height: px2rem(1060);
     background: url(../images/middleBg.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto 0;
     position: relative;
+    overflow: hidden;
 
     .tabBox {
-        width: px2rem(717, );
-        height: px2rem(98, );
+        width: px2rem(717);
+        height: px2rem(98);
         display: flex;
         justify-content: space-between;
         background: url(../images/tabBox.png) no-repeat;
@@ -132,18 +133,18 @@ body {
         margin: 0 auto;
 
         div {
-            width: px2rem(253, );
+            width: px2rem(253);
             height: 100%;
             color: #FEF0C0;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
             text-align: center;
             box-sizing: border-box;
-            padding-top: px2rem(26, );
+            padding-top: px2rem(26);
 
             b {
                 color: #FEF0C0;
-                font-size: px2rem(18, );
-                margin-top: px2rem(3, );
+                font-size: px2rem(18);
+                margin-top: px2rem(3);
                 display: block;
             }
         }
@@ -181,52 +182,52 @@ body {
 
     .gradeText {
         position: absolute;
-        left: px2rem(74, );
-        top: px2rem(110, );
+        left: px2rem(74);
+        top: px2rem(110);
         color: #FFEAA9;
-        font-size: px2rem(24, );
+        font-size: px2rem(24);
     }
 
     .diamond {
-        min-width: px2rem(148, );
-        height: px2rem(44, );
-        border-radius: px2rem(44, );
-        line-height: px2rem(44, );
+        min-width: px2rem(148);
+        height: px2rem(44);
+        border-radius: px2rem(44);
+        line-height: px2rem(44);
         position: absolute;
-        right: px2rem(72, );
-        top: px2rem(96, );
+        right: px2rem(72);
+        top: px2rem(96);
         background: #343662;
         color: #FFFFFF;
-        border: px2rem(1, ) solid #FFF3B1;
+        border: px2rem(1) solid #FFF3B1;
         box-sizing: border-box;
         vertical-align: middle;
 
         .diamondIcon {
             display: inline-block;
-            width: px2rem(29, );
-            height: px2rem(21, );
-            margin-top: px2rem(12, );
-            margin-left: px2rem(13, );
+            width: px2rem(29);
+            height: px2rem(21);
+            margin-top: px2rem(12);
+            margin-left: px2rem(13);
         }
 
         b {
-            font-size: px2rem(20, );
+            font-size: px2rem(20);
             display: inline-block;
-            margin: 0 px2rem(7, );
+            margin: 0 px2rem(7);
         }
 
         .add {
-            width: px2rem(18, );
-            height: px2rem(18, );
+            width: px2rem(18);
+            height: px2rem(18);
             display: inline-block;
-            margin-top: px2rem(13, );
-            margin-right: px2rem(14, );
+            margin-top: px2rem(13);
+            margin-right: px2rem(14);
         }
     }
 
     .cardBox {
-        width: px2rem(148, );
-        height: px2rem(241, );
+        width: px2rem(148);
+        height: px2rem(241);
         position: absolute;
         z-index: 3;
         // transition: all 1s;
@@ -287,72 +288,72 @@ body {
     }
 
     .cardBox0 {
-        left: px2rem(71, );
-        top: px2rem(157, );
+        left: px2rem(71);
+        top: px2rem(157);
     }
 
     .cardBox1 {
-        left: px2rem(224, );
-        top: px2rem(157, );
+        left: px2rem(224);
+        top: px2rem(157);
     }
 
     .cardBox2 {
-        left: px2rem(378, );
-        top: px2rem(157, );
+        left: px2rem(378);
+        top: px2rem(157);
     }
 
     .cardBox3 {
-        left: px2rem(531, );
-        top: px2rem(157, );
+        left: px2rem(531);
+        top: px2rem(157);
     }
 
     .cardBox4 {
-        left: px2rem(531, );
-        top: px2rem(414, );
+        left: px2rem(531);
+        top: px2rem(414);
     }
 
     .cardBox5 {
-        left: px2rem(531, );
-        top: px2rem(664, );
+        left: px2rem(531);
+        top: px2rem(664);
     }
 
     .cardBox6 {
-        left: px2rem(378, );
-        top: px2rem(664, );
+        left: px2rem(378);
+        top: px2rem(664);
     }
 
     .cardBox7 {
-        left: px2rem(224, );
-        top: px2rem(664, );
+        left: px2rem(224);
+        top: px2rem(664);
     }
 
     .cardBox8 {
-        left: px2rem(71, );
-        top: px2rem(664, );
+        left: px2rem(71);
+        top: px2rem(664);
     }
 
     .cardBox9 {
-        left: px2rem(71, );
-        top: px2rem(414, );
+        left: px2rem(71);
+        top: px2rem(414);
     }
 
     .cardBoxBut {
-        width: px2rem(188, );
-        height: px2rem(74, );
+        width: px2rem(188);
+        height: px2rem(74);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(560, );
+        top: px2rem(560);
         z-index: 3;
     }
 
     .butAgain {
-        width: px2rem(188, );
-        height: px2rem(74, );
+        width: px2rem(188);
+        height: px2rem(74);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(560, );
+        top: px2rem(560);
         display: none;
         z-index: 3;
     }
@@ -374,8 +375,8 @@ body {
                 width: 100%;
                 text-align: center;
                 color: #fff;
-                font-size: px2rem(24, );
-                margin-bottom: px2rem(11, );
+                font-size: px2rem(24);
+                margin-bottom: px2rem(11);
 
                 b {
                     color: #FFEAA9;
@@ -390,34 +391,34 @@ body {
     }
 
     .cardBoxText_gift {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(432, );
+        top: px2rem(432);
         color: #FEF0C0;
-        font-size: px2rem(30, );
+        font-size: px2rem(30);
         text-align: center;
     }
 
     .cardBoxText_gx {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         display: none;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #FFE26D;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -430,22 +431,22 @@ body {
     }
 
     .cardBoxText_no {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         display: none;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #fff;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -458,22 +459,22 @@ body {
     }
 
     .cardBoxText {
-        width: px2rem(320, );
-        height: px2rem(226, );
+        width: px2rem(320);
+        height: px2rem(226);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
         box-sizing: border-box;
-        padding-top: px2rem(66, );
+        padding-top: px2rem(66);
         z-index: 3;
 
         p {
             width: 100%;
             text-align: center;
-            margin-bottom: px2rem(16, );
+            margin-bottom: px2rem(16);
             color: #fff;
-            font-size: px2rem(28, );
+            font-size: px2rem(28);
 
             i {
                 font-style: normal;
@@ -486,12 +487,12 @@ body {
     }
 
     .star {
-        width: px2rem(336, );
-        height: px2rem(290, );
+        width: px2rem(336);
+        height: px2rem(290);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        top: px2rem(414, );
+        top: px2rem(414);
 
         .star_in {
             width: 100%;
@@ -507,45 +508,48 @@ body {
 
 h3 {
     width: 100%;
-    margin-bottom: px2rem(12, );
+    margin-bottom: px2rem(12);
     color: #D7D9F7;
-    font-size: px2rem(18, );
+    font-size: px2rem(18);
     text-align: center;
 }
 
 .rule_pub {
     position: fixed;
+    right: 0;
+    bottom: 0;
     left: 0;
     top: 0;
-    bottom: 0;
-    right: 0;
     z-index: 99999;
     background: rgba(0, 0, 0, .4);
     display: none;
+    height: 100vh;
+    width: 100vw;
 
     .rule_pub_in {
-        width: px2rem(654, );
-        height: px2rem(874, );
+        width: px2rem(600);
+        height: px2rem(820);
         background: url(../images/rule.png) no-repeat;
         background-size: 100% 100%;
         position: relative;
         left: 50%;
-        top: 50%;
+        top: 45%;
         transform: translate(-50%, -50%);
 
         .close {
             position: absolute;
-            width: px2rem(68, );
-            height: px2rem(68, );
+            width: px2rem(68);
+            height: px2rem(68);
             left: 50%;
             transform: translateX(-50%);
-            bottom: px2rem(-100, );
+            bottom: px2rem(-100);
         }
     }
 }
 
 .winningRecord {
     position: fixed;
+    height: px2rem(1624);
     left: 0;
     top: 0;
     bottom: 0;
@@ -553,28 +557,30 @@ h3 {
     z-index: 99999;
     background: rgba(0, 0, 0, .4);
     display: none;
+    height: 100vh;
+    width: 100vw;
 
     .winningRecord_in {
-        width: px2rem(654, );
-        height: px2rem(874, );
+        width: px2rem(654);
+        height: px2rem(820);
         background: url(../images/winningRecord.png) no-repeat;
         background-size: 100% 100%;
         position: relative;
         left: 50%;
-        top: 50%;
+        top: 45%;
         transform: translate(-50%, -50%);
 
         .title {
             width: 100%;
             display: flex;
             justify-content: space-between;
-            margin-bottom: px2rem(32, );
+            margin-bottom: px2rem(32);
 
             div {
                 width: 25%;
                 color: #FFFFFF;
-                font-size: px2rem(28, );
-                margin-top: px2rem(164, );
+                font-size: px2rem(28);
+                margin-top: px2rem(164);
                 text-align: center;
             }
         }
@@ -582,8 +588,8 @@ h3 {
         ul {
             width: 100%;
             box-sizing: border-box;
-            padding: 0 px2rem(3, );
-            height: 8rem;
+            padding: 0 px2rem(3);
+            height: 7.7rem;
             margin: 0 auto;
             overflow-y: scroll;
 
@@ -595,10 +601,10 @@ h3 {
             li {
                 background: none;
                 width: 100%;
-                height: px2rem(80, );
-                line-height: px2rem(80, );
+                height: px2rem(80);
+                line-height: px2rem(80);
                 color: #FFEE9D;
-                font-size: px2rem(26, );
+                font-size: px2rem(26);
                 display: flex;
                 justify-content: space-between;
                 overflow: hidden;
@@ -609,7 +615,7 @@ h3 {
                 }
 
                 .box {
-                    line-height: px2rem(80, );
+                    line-height: px2rem(80);
                 }
 
                 .box_acitve {
@@ -630,11 +636,11 @@ h3 {
 
         .close {
             position: absolute;
-            width: px2rem(68, );
-            height: px2rem(68, );
+            width: px2rem(68);
+            height: px2rem(68);
             left: 50%;
             transform: translateX(-50%);
-            bottom: px2rem(-100, );
+            bottom: px2rem(-100);
         }
     }
 }
diff --git a/view/peko/modules/luckyTarot/js/index.js b/view/peko/modules/luckyTarot/js/index.js
index baeb3a2..588c18a 100644
--- a/view/peko/modules/luckyTarot/js/index.js
+++ b/view/peko/modules/luckyTarot/js/index.js
@@ -466,6 +466,7 @@ $('.tarotBox .diamond').click(() => {
 })
 // 打開規則
 $('.rule').click(function () {
+    $(window).scrollTop(0)
     bodyScroolFun(true);
     $('.rule_pub ').show();
 })
@@ -476,6 +477,7 @@ $('.rule_pub .rule_pub_in .close').click(function () {
 })
 // 打開記錄
 $('.record').click(function () {
+    $(window).scrollTop(0)
     $('.winningRecord .winningRecord_in ul li').remove();
     page = 1;
     recordPage();