新增卡牌数字

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

@@ -226,21 +226,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 {

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

@@ -1,5 +1,5 @@
-@function px2rem($px, $rem:75) {
+@function px2rem($px) {
-    @return $px / $rem+rem;
+    @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 {

view/peko/modules/luckyTarot/index.html

@@ -47,38 +47,38 @@
             <img src="./images/add.png" alt="" class="add">
         </div>
         <!-- 默認卡片 -->
-        <div class="cardBox cardBox0 card1"></div>
+        <div class="cardBox cardBox0 card1"><span>0</span></div>
-        <div class="cardBox cardBox1 card1"></div>
+        <div class="cardBox cardBox1 card1"><span>1</span></div>
-        <div class="cardBox cardBox2 card1"></div>
+        <div class="cardBox cardBox2 card1"><span>2</span></div>
-        <div class="cardBox cardBox3 card1"></div>
+        <div class="cardBox cardBox3 card1"><span>3</span></div>
-        <div class="cardBox cardBox4 card1"></div>
+        <div class="cardBox cardBox4 card1"><span>4</span></div>
-        <div class="cardBox cardBox5 card1"></div>
+        <div class="cardBox cardBox5 card1"><span>5</span></div>
-        <div class="cardBox cardBox6 card1"></div>
+        <div class="cardBox cardBox6 card1"><span>6</span></div>
-        <div class="cardBox cardBox7 card1"></div>
+        <div class="cardBox cardBox7 card1"><span>7</span></div>
-        <div class="cardBox cardBox8 card1"></div>
+        <div class="cardBox cardBox8 card1"><span>8</span></div>
-        <div class="cardBox cardBox9 card1"></div>
+        <div class="cardBox cardBox9 card1"><span>9</span></div>
         <!-- 中級卡片 -->
-        <div class="cardBox cardBox0 card2"></div>
+        <div class="cardBox cardBox0 card2"><span>0</span></div>
-        <div class="cardBox cardBox1 card2"></div>
+        <div class="cardBox cardBox1 card2"><span>1</span></div>
-        <div class="cardBox cardBox2 card2"></div>
+        <div class="cardBox cardBox2 card2"><span>2</span></div>
-        <div class="cardBox cardBox3 card2"></div>
+        <div class="cardBox cardBox3 card2"><span>3</span></div>
-        <div class="cardBox cardBox4 card2"></div>
+        <div class="cardBox cardBox4 card2"><span>4</span></div>
-        <div class="cardBox cardBox5 card2"></div>
+        <div class="cardBox cardBox5 card2"><span>5</span></div>
-        <div class="cardBox cardBox6 card2"></div>
+        <div class="cardBox cardBox6 card2"><span>6</span></div>
-        <div class="cardBox cardBox7 card2"></div>
+        <div class="cardBox cardBox7 card2"><span>7</span></div>
-        <div class="cardBox cardBox8 card2"></div>
+        <div class="cardBox cardBox8 card2"><span>8</span></div>
-        <div class="cardBox cardBox9 card2"></div>
+        <div class="cardBox cardBox9 card2"><span>9</span></div>
         <!-- 高級卡片 -->
-        <div class="cardBox cardBox0 card3"></div>
+        <div class="cardBox cardBox0 card3"><span>0</span></div>
-        <div class="cardBox cardBox1 card3"></div>
+        <div class="cardBox cardBox1 card3"><span>1</span></div>
-        <div class="cardBox cardBox2 card3"></div>
+        <div class="cardBox cardBox2 card3"><span>2</span></div>
-        <div class="cardBox cardBox3 card3"></div>
+        <div class="cardBox cardBox3 card3"><span>3</span></div>
-        <div class="cardBox cardBox4 card3"></div>
+        <div class="cardBox cardBox4 card3"><span>4</span></div>
-        <div class="cardBox cardBox5 card3"></div>
+        <div class="cardBox cardBox5 card3"><span>5</span></div>
-        <div class="cardBox cardBox6 card3"></div>
+        <div class="cardBox cardBox6 card3"><span>6</span></div>
-        <div class="cardBox cardBox7 card3"></div>
+        <div class="cardBox cardBox7 card3"><span>7</span></div>
-        <div class="cardBox cardBox8 card3"></div>
+        <div class="cardBox cardBox8 card3"><span>8</span></div>
-        <div class="cardBox cardBox9 card3"></div>
+        <div class="cardBox cardBox9 card3"><span>9</span></div>
         <!-- 女神眷顧妳 -->
         <div class="cardBoxText_gift">願幸運之神眷顧妳</div>
         <!-- 中獎文按提示 -->