小精灵：cdn获取图片

view/peko/modules/spirit/css/main.css

@@ -6,7 +6,7 @@
 html,
 body {
   height: 19rem;
-  background: url("../image/main-bg.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-main-bg.png") no-repeat 0 0/100% 100%;
   background-color: #014459;
   font-family: "pingfang-bold";
   overflow-y: scroll;
@@ -16,7 +16,7 @@ body {
 .title {
   width: 10rem;
   height: 3.1733333333rem;
-  background: url("../image/main-title.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-main-title.png") no-repeat 0 0/100% 100%;
   overflow: hidden;
   margin: auto;
 }
@@ -53,7 +53,7 @@ body {
   height: 9.7333333333rem;
   margin: 0.8rem auto 0;
   margin: 0.2rem auto 0;
-  background: url("../image/ring.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-ring.png") no-repeat 0 0/100% 100%;
 }
 .select-area div {
   display: flex;
@@ -179,7 +179,7 @@ body {
   font-size: 0.2666666667rem;
 }
 .tabBox .active {
-  background: url(../image/tabBg.png) no-repeat;
+  background: url("https://img.pekolive.com/elfin-tabBg.png") no-repeat;
   background-size: 100% 100%;
 }
 .tabBox .active p {
@@ -193,13 +193,13 @@ body {
   width: 5.4rem;
   height: 1.3rem;
   line-height: 1.3rem;
-  background: url(../image/explore-btn.png) no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-explore-btn.png") no-repeat 0 0/100% 100%;
   margin: -0.2rem auto 0rem;
 }
 .explore.again {
   width: 5.4133333333rem;
   height: 1.3333333333rem;
-  background-image: url("../image/play-again.png");
+  background-image: url("https://img.pekolive.com/elfin-play-again.png");
 }
 
 .no-explore {
@@ -285,7 +285,7 @@ body {
   transform: translate(-50%, -50%);
   width: 8.72rem;
   height: 8.2133333333rem;
-  background: url("../image/rule-bg.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-rule-bg.png") no-repeat 0 0/100% 100%;
 }
 .shade-mask .shade-content p {
   width: 60%;
@@ -324,7 +324,7 @@ body {
   transform: translate(-50%, -50%);
   width: 6.6666666667rem;
   height: 8rem;
-  background: url("../image/recharge-bg.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-recharge-bg.png") no-repeat 0 0/100% 100%;
   font-size: 0.32rem;
 }
 .shade-mask-recharge .shade-content-recharge .planet-num,
@@ -385,7 +385,7 @@ body {
 .not-enough .shade-content-recharge .recharge-btn {
   width: 3.52rem;
   height: 0.96rem;
-  background: url("../image/recharge-btn.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-recharge-btn.png") no-repeat 0 0/100% 100%;
   margin-top: 0.4266666667rem;
 }
 
@@ -411,7 +411,7 @@ body {
   flex-direction: column;
   align-items: center;
   height: 11.9333333333rem;
-  background: url("../image/success.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-success.png") no-repeat 0 0/100% 100%;
 }
 .result-shade .result-content.success .animal, .result-shade .result-content.fail .animal {
   width: 2.2rem;
@@ -462,7 +462,7 @@ body {
 }
 .result-shade .result-content.fail {
   height: 10.6133333333rem;
-  background: url("../image/fail.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-fail.png") no-repeat 0 0/100% 100%;
 }
 .result-shade .result-content.fail .animal {
   margin-top: 1.6rem;
@@ -488,7 +488,7 @@ body {
   transform: translate(-50%, -50%);
   width: 7.9rem;
   height: 8rem;
-  background: url(../image/recordBg.png) no-repeat;
+  background: url("https://img.pekolive.com/elfin-recordBg.png") no-repeat;
   background-size: 100% 100%;
 }
 .table-shade .table-content .table_title {
@@ -528,16 +528,6 @@ body {
   color: #FEF6D0;
 }
 .table-shade .table-content .table-wrap .table .noData {
-  display: none;
-  width: 100%;
-  margin-top: 25%;
-  text-align: center;
-  font-size: 0.48rem;
-  color: #428674;
-  z-index: 1;
-  font-weight: bold;
-}
-.table-shade .table-content .table-wrap .table .dropload-refresh {
   display: none;
   background-color: transparent;
 }
@@ -560,7 +550,7 @@ body {
   transform: translate(-50%, -50%);
   width: 6.6666666667rem;
   height: 4.8rem;
-  background: url("../image/not-enough.png") no-repeat 0 0/100% 100%;
+  background: url("https://img.pekolive.com/elfin-not-enough.png") no-repeat 0 0/100% 100%;
 }
 .not-enough .not-enough-content .go-to-recharge {
   position: absolute;

view/peko/modules/spirit/css/main.scss

@@ -4,6 +4,10 @@
     @return $px / $rem+rem;
 }
 
+@function prefixurl() {
+    @return 'https://img.pekolive.com/'
+}
+
 @font-face {
     font-family: 'pingfang-bold';
     src: url('../../../common/fonts/PingFang\ Bold.ttf');
@@ -17,7 +21,7 @@ body {
     // height: 100vh;
     // height: px2rem(1334, );
     height: 19rem;
-    background: url('../image/main-bg.png') no-repeat 0 0/100% 100%;
+    background: url(prefixurl()+'elfin-main-bg.png') no-repeat 0 0/100% 100%;
     background-color: #014459;
     // overflow: hidden;
     font-family: 'pingfang-bold';
@@ -28,7 +32,7 @@ body {
 .title {
     width: px2rem(750, );
     height: px2rem(238, );
-    background: url('../image/main-title.png') no-repeat 0 0/100% 100%;
+    background: url(prefixurl()+'elfin-main-title.png') no-repeat 0 0/100% 100%;
     overflow: hidden;
     margin: auto;
 
@@ -67,7 +71,7 @@ body {
     height: px2rem(730, );
     margin: px2rem(60, ) auto 0;
     margin: 0.2rem auto 0;
-    background: url('../image/ring.png') no-repeat 0 0/100% 100%;
+    background: url(prefixurl()+'elfin-ring.png') no-repeat 0 0/100% 100%;
 
     div {
         display: flex;
@@ -220,7 +224,7 @@ body {
     }
 
     .active {
-        background: url(../image/tabBg.png) no-repeat;
+        background: url(prefixurl()+'elfin-tabBg.png') no-repeat;
         background-size: 100% 100%;
 
         p {
@@ -243,13 +247,13 @@ body {
     width: 5.4rem;
     height: 1.3rem;
     line-height: 1.3rem;
-    background: url(../image/explore-btn.png) no-repeat 0 0/100% 100%;
+    background: url(prefixurl()+'elfin-explore-btn.png') no-repeat 0 0/100% 100%;
     margin: -0.2rem auto 0rem;
 
     &.again {
         width: px2rem(406, );
         height: px2rem(100, );
-        background-image: url('../image/play-again.png');
+        background-image: url(prefixurl()+'elfin-play-again.png');
     }
 }
 
@@ -345,7 +349,7 @@ body {
         transform: translate(-50%, -50%);
         width: px2rem(654, );
         height: px2rem(616, );
-        background: url('../image/rule-bg.png') no-repeat 0 0/100% 100%;
+        background: url(prefixurl()+'elfin-rule-bg.png') no-repeat 0 0/100% 100%;
 
         p {
             width: 60%;
@@ -384,7 +388,7 @@ body {
         transform: translate(-50%, -50%);
         width: px2rem(500, );
         height: px2rem(600, );
-        background: url('../image/recharge-bg.png') no-repeat 0 0/100% 100%;
+        background: url(prefixurl()+'elfin-recharge-bg.png') no-repeat 0 0/100% 100%;
         font-size: px2rem(24, );
 
         .planet-num,
@@ -437,7 +441,7 @@ body {
         .recharge-btn {
             width: px2rem(264, );
             height: px2rem(72, );
-            background: url('../image/recharge-btn.png') no-repeat 0 0/100% 100%;
+            background: url(prefixurl()+'elfin-recharge-btn.png') no-repeat 0 0/100% 100%;
             margin-top: px2rem(32, );
         }
     }
@@ -467,7 +471,7 @@ body {
             flex-direction: column;
             align-items: center;
             height: px2rem(895, );
-            background: url('../image/success.png') no-repeat 0 0/100% 100%;
+            background: url(prefixurl()+'elfin-success.png') no-repeat 0 0/100% 100%;
 
             .animal {
                 width: px2rem(165, );
@@ -534,7 +538,7 @@ body {
 
         &.fail {
             height: px2rem(796, );
-            background: url('../image/fail.png') no-repeat 0 0/100% 100%;
+            background: url(prefixurl()+'elfin-fail.png') no-repeat 0 0/100% 100%;
 
             .animal {
                 margin-top: px2rem(120, );
@@ -572,7 +576,7 @@ body {
         // border-radius: px2rem(10, );
         width: 7.9rem;
         height: px2rem(600, );
-        background: url(../image/recordBg.png) no-repeat;
+        background: url(prefixurl()+'elfin-recordBg.png') no-repeat;
         background-size: 100% 100%;
 
         .table_title {
@@ -659,7 +663,7 @@ body {
         transform: translate(-50%, -50%);
         width: px2rem(500, );
         height: px2rem(360, );
-        background: url('../image/not-enough.png') no-repeat 0 0/100% 100%;
+        background: url(prefixurl()+'elfin-not-enough.png') no-repeat 0 0/100% 100%;
 
         .go-to-recharge {
             position: absolute;

view/peko/modules/spirit/js/main.js

@@ -50,43 +50,43 @@ var prodRewardPrice;
 // 小動物數組
 let animalArr = [
     {
-        animalPic: './image/animal/1.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal1.png',
         animalName: '小熊'
     },
     {
-        animalPic: './image/animal/2.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal2.png',
         animalName: '小兔'
     },
     {
-        animalPic: './image/animal/3.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal3.png',
         animalName: '小狗'
     },
     {
-        animalPic: './image/animal/4.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal4.png',
         animalName: '小貓'
     },
     {
-        animalPic: './image/animal/5.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal5.png',
         animalName: '小猴'
     },
     {
-        animalPic: './image/animal/6.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal6.png',
         animalName: '小羊'
     },
     {
-        animalPic: './image/animal/7.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal7.png',
         animalName: '小虎'
     },
     {
-        animalPic: './image/animal/8.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal8.png',
         animalName: '小雞'
     },
     {
-        animalPic: './image/animal/9.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal9.png',
         animalName: '小牛'
     },
     {
-        animalPic: './image/animal/10.png',
+        animalPic: 'https://img.pekolive.com/elfin-animal10.png',
         animalName: '小豬'
     }
 ]
@@ -552,7 +552,7 @@ const playAnimate = () => {
     $('.svga').show()
     let player = new SVGA.Player('.svga');
     let parser = new SVGA.Parser('.svga');
-    parser.load('./image/animate.svga', function (videoItem) {
+    parser.load('https://img.pekolive.com/elfin-animate.svga', function (videoItem) {
         // player.loops = 1;
         player.clearsAfterStop = false;
         player.setVideoItem(videoItem);

view/peko/modules/spirit/main.html

@@ -23,58 +23,58 @@
         <!-- <div class="canSelect">可以探访<span>0</span>个小动物的家寻找小精灵</div> -->
         <div class="canSelect">可以探访小动物的家寻找小精灵</div>
     </div>
-    <div class="introduction-btn"><img src="./image/introduction-btn.png" alt=""></div>
-    <div class="record-btn"><img src="./image/record-btn.png" alt=""></div>
+    <div class="introduction-btn"><img src="https://img.pekolive.com/elfin-introduction-btn.png" alt=""></div>
+    <div class="record-btn"><img src="https://img.pekolive.com/elfin-record-btn.png" alt=""></div>
     <div class="select-area">
         <div>
-            <img src="./image/0.png" alt="" class="default">
-            <img src="./image/0-fail.png" alt="" class="fail">
-            <img src="./image/0-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-0.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-0-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-0-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/1.png" alt="" class="default">
-            <img src="./image/1-fail.png" alt="" class="fail">
-            <img src="./image/1-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-1.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-1-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-1-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/2.png" alt="" class="default">
-            <img src="./image/2-fail.png" alt="" class="fail">
-            <img src="./image/2-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-2.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-2-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-2-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/3.png" alt="" class="default">
-            <img src="./image/3-fail.png" alt="" class="fail">
-            <img src="./image/3-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-3.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-3-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-3-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/4.png" alt="" class="default">
-            <img src="./image/4-fail.png" alt="" class="fail">
-            <img src="./image/4-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-4.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-4-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-4-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/5.png" alt="" class="default">
-            <img src="./image/5-fail.png" alt="" class="fail">
-            <img src="./image/5-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-5.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-5-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-5-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/6.png" alt="" class="default">
-            <img src="./image/6-fail.png" alt="" class="fail">
-            <img src="./image/6-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-6.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-6-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-6-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/7.png" alt="" class="default">
-            <img src="./image/7-fail.png" alt="" class="fail">
-            <img src="./image/7-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-7.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-7-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-7-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/8.png" alt="" class="default">
-            <img src="./image/8-fail.png" alt="" class="fail">
-            <img src="./image/8-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-8.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-8-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-8-success.png" alt="" class="selected">
         </div>
         <div>
-            <img src="./image/9.png" alt="" class="default">
-            <img src="./image/9-fail.png" alt="" class="fail">
-            <img src="./image/9-success.png" alt="" class="selected">
+            <img src="https://img.pekolive.com/elfin-9.png" alt="" class="default">
+            <img src="https://img.pekolive.com/elfin-9-fail.png" alt="" class="fail">
+            <img src="https://img.pekolive.com/elfin-9-success.png" alt="" class="selected">
         </div>
 
         <p class="desc">请选择要去探访的小动物</p>
@@ -100,16 +100,16 @@
         <div class="avatar"><img src="./image/logo.png" alt=""></div>
         <div class="nick"></div>
         <div class="diamond-num">
-            <img src="./image/diamond-icon.png" alt="">
+            <img src="https://img.pekolive.com/elfin-diamond-icon.png" alt="">
             <p>我的鉆石 <span>0</span></p>
         </div>
-        <div class="recharge-icon"><img src="./image/recharge-icon.png" alt=""></div>
+        <div class="recharge-icon"><img src="https://img.pekolive.com/elfin-recharge-icon.png" alt=""></div>
     </div>
 
 
     <div class="shade-mask">
         <div class="shade-content">
-            <p><img src="./image/introduction.png" alt=""></p>
+            <p><img src="https://img.pekolive.com/elfin-introduction.png" alt=""></p>
         </div>
     </div>
 
@@ -159,7 +159,7 @@
                 </ul>
                 <!-- <div class="noData">暫無數據</div> -->
             </div>
-            <img src="./image/close.png" alt="" class="close-record">
+            <img src="https://img.pekolive.com/elfin-close.png" alt="" class="close-record">
         </div>
     </div>