修改logo和下载链接

view/peko/activity/2023-Valentines-Day/index.html

@@ -241,7 +241,7 @@
             </ul>
             <img src="./images/btn_sure.png" class="sure" alt="">
             <div class="tips">奖励将自动发放到装扮中心，快去展示自己吧~</div>
-            <!-- <div class="tips">*情人节限定5位靓号:52XXX（XXX为随机数字，一组为2个靓号，<br>联系客服领取：LINE: pekoyuyin)</div> -->
+            <!-- <div class="tips">*情人节限定5位靓号:52XXX（XXX为随机数字，一组为2个靓号，<br>联系客服领取：LINE: pikoyuyin)</div> -->
         </div>
     </div>
     <!-- 我的cp弹窗 -->

view/peko/activity/2023-Valentines-Day/js/index.js

@@ -370,7 +370,7 @@ function buy(id, num, type) {
                         $('.petition-wrap .myticket span e').html(res.data.remain)
                         $('.gx .gx_in .box li img').attr('src', res.data.prop.icon)
                         $('.gx .gx_in .box li span').html( res.data.prop.name)
-                        $('.gx .gx_in .tips').html(`*情人節限定5位靚號:52XXX（XXX為隨機數字，一組為2個靚號，<br>聯系客服領取：LINE: pekoyuyin)`)
+                        $('.gx .gx_in .tips').html(`*情人節限定5位靚號:52XXX（XXX為隨機數字，一組為2個靚號，<br>聯系客服領取：LINE: pikoyuyin)`)
                         $('.gx').show()
 
                     } else {

view/peko/activity/act-celebration/wish.html

@@ -76,7 +76,7 @@
         <div class="tab2_contain">
             <div class="rule_wrap">
                 <p class="rule_item">
-                    活动期间，每日登录pekoApp即可免费获赠一个魔法棒（每台设备每日限一次）
+                    活动期间，每日登录pikoApp即可免费获赠一个魔法棒（每台设备每日限一次）
                 </p>
             </div>
             <div class="panel_wrap">

view/peko/activity/act-magicSchool/js/index.js

@@ -756,7 +756,7 @@ function getRank (rankType, currentTime, comeFrom) {
                 $('.page3 .myList img').attr('src', res.data.userRank.avatar);
                 $('.page3 .myList .num').text(res.data.userRank.rank == 0 ? '未上榜' : res.data.userRank.rank);
                 $('.page3 .myList .nick').text(res.data.userRank.nick.length > 8 ? res.data.userRank.nick.slice(0, 8) + '...' : res.data.userRank.nick);
-                $('.page3 .myList .score').text(comeFrom == 1 ? 'peko值:' + unitProcessing(res.data.userRank.rankValue, 10000, 1, 'w') : '魅力值:' + unitProcessing(res.data.userRank.rankValue, 10000, 1, 'w'));
+                $('.page3 .myList .score').text(comeFrom == 1 ? 'piko值:' + unitProcessing(res.data.userRank.rankValue, 10000, 1, 'w') : '魅力值:' + unitProcessing(res.data.userRank.rankValue, 10000, 1, 'w'));
                 hideLoading(layerIndex)
                 // 处理前三
                 if (top3.length < 3) {
@@ -770,7 +770,7 @@ function getRank (rankType, currentTime, comeFrom) {
                 top3.forEach((res, index) => {
                     $(`.page3 .list .top${index + 1} .txBg`).attr('src', res.avatar);
                     $(`.page3 .list .top${index + 1} .nick`).text(res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick);
-                    $(`.page3 .list .top${index + 1} p`).text(comeFrom == 1 ? 'peko值:' + unitProcessing(res.rankValue, 10000, 1, 'w') : '魅力值:' + unitProcessing(res.rankValue, 10000, 1, 'w'));
+                    $(`.page3 .list .top${index + 1} p`).text(comeFrom == 1 ? 'piko值:' + unitProcessing(res.rankValue, 10000, 1, 'w') : '魅力值:' + unitProcessing(res.rankValue, 10000, 1, 'w'));
                 })
                 // 非前三
                 var str = '';
@@ -780,7 +780,7 @@ function getRank (rankType, currentTime, comeFrom) {
                             <div class="num">NO.${index + 4}</div>
                             <img src="${res.avatar}" alt="">
                             <div class="nick">${res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick}</div>
-                            <div class="score">${comeFrom == 1 ? 'peko值:' + unitProcessing(res.rankValue, 10000, 1, 'w') : '魅力值:' + unitProcessing(res.rankValue, 10000, 1, 'w')}</div>
+                            <div class="score">${comeFrom == 1 ? 'piko值:' + unitProcessing(res.rankValue, 10000, 1, 'w') : '魅力值:' + unitProcessing(res.rankValue, 10000, 1, 'w')}</div>
                         </li>`
                 })
                 $('.page3 .list .notTop').append(str);

view/peko/activity/act-nameplate/index.html

@@ -45,7 +45,7 @@
             <p>剩余7天</p>
             <div class="nameplate">
               <img src="http://image.uat.zhongjialx.com/FqVz-oYR2lzqfzIlZNM3BrA016cX?imageslim" alt="">
-              <span>peko看看</span>
+              <span>piko看看</span>
             </div>
             <div class="delay-btn">
               <img src="./images/delay-btn.png" alt="">

view/peko/activity/act-ocean/css/index.css

@@ -11,9 +11,26 @@
 html,
 body {
   font-family: "din-medium";
-  background: #531800;
+  background: #E17E3D;
   overflow-x: hidden;
 }
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+}
+
+.back {
+  position: fixed;
+  top: 0.9333333333rem;
+  left: 0.4533333333rem;
+  z-index: 9;
+  width: 0.8266666667rem;
+  height: 0.8266666667rem;
+}
+.back img {
+  width: 100%;
+  height: 100%;
+}
 
 .wrap {
   width: 100%;
@@ -59,15 +76,19 @@ body {
   z-index: 9;
 }
 .wrap .previous_Round_Result span {
+  color: #fff;
   position: absolute;
+  font-weight: bold;
+  margin-left: 0.36rem;
+  text-shadow: 1px 1px 0px #fc8321, -1px -1px 0px #fc8321, 1px 1px 0px #fc8321, -1px -1px 0px #fc8321, 1px 1px 0px #fc8321, -1px -1px 0px #fc8321;
+  font-size: 0.48rem;
   left: 0rem;
   bottom: 1.65rem;
+  background: url(../images/wljg.png) no-repeat;
+  background-size: 100% 100%;
   width: 1.7066666667rem;
   height: 0.5066666667rem;
-}
+  position: absolute;
-.wrap .previous_Round_Result span img {
-  width: 100%;
-  height: 100%;
 }
 .wrap .previous_Round_Result .box {
   width: 9.4266666667rem;
@@ -140,7 +161,7 @@ body {
   font-size: 0.2666666667rem;
   color: #701800;
   position: absolute;
-  top: 0.4rem;
+  top: 0.16rem;
   left: 0.4666666667rem;
 }
 .wrap .game-area .select-time {
@@ -153,7 +174,7 @@ body {
   top: -0.5333333333rem;
   left: 50%;
   transform: translateX(-50%);
-  width: 6.8rem;
+  width: 5.45rem;
   height: 0.96rem;
   line-height: 0.8266666667rem;
   background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
@@ -164,16 +185,10 @@ body {
 }
 .wrap .game-area .select-time .current-tip {
   top: 0.6666666667rem;
-  width: 5.3333333333rem;
+  width: 4.9066666667rem;
   height: 0.9066666667rem;
-  line-height: 0.38rem;
+  line-height: 0.9066666667rem;
   background: url("../images/tip.png") no-repeat 0 0/100% 100%;
-  text-align: center;
-  font-weight: bold;
-}
-.wrap .game-area .select-time .current-tip span {
-  width: 4.2666666667rem;
-  margin: 0 auto;
   font-size: 0.2933333333rem;
   color: #F0C799;
 }
@@ -183,6 +198,7 @@ body {
   padding-left: 0.6266666667rem;
 }
 .wrap .game-area .select-time ul li {
+  transition: all, 0.2s;
   position: relative;
   z-index: 99;
   width: 1.84rem;
@@ -240,8 +256,8 @@ body {
 }
 .wrap .game-area .select-time ul li .bubble-2s {
   display: none;
-  width: 2.1rem;
+  width: 1.76rem;
-  height: 1.3rem;
+  height: 0.9866666667rem;
   position: absolute;
   top: -0.96rem;
   left: -0.3733333333rem;
@@ -250,22 +266,18 @@ body {
   text-indent: 0.2133333333rem;
 }
 .wrap .game-area .select-time ul li .bubble-2s p {
-  width: 2rem;
+  font-size: 0.24rem;
-  font-size: 0.1866666667rem;
   color: white;
   font-weight: bold;
   text-align: center;
-  margin-left: -0.0666666667rem;
+  margin-left: -0.2666666667rem;
 }
 .wrap .game-area .select-time ul li .bubble-2s p.first-line {
-  padding-top: 0.2666666667rem;
+  padding-top: 0.1333333333rem;
 }
 .wrap .game-area .select-time ul li .bubble-2s p.second-line {
   padding-top: 0.0533333333rem;
 }
-.wrap .game-area .select-time ul li .bubble-2s .pzh {
-  font-size: 0.24rem;
-}
 .wrap .game-area .select-time ul li .select-num {
   position: absolute;
   top: -0.08rem;
@@ -331,7 +343,7 @@ body {
   top: -0.5333333333rem;
   left: 50%;
   transform: translateX(-50%);
-  width: 6rem;
+  width: 4.2933333333rem;
   height: 0.96rem;
   line-height: 0.8266666667rem;
   background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
@@ -348,7 +360,7 @@ body {
   background: url("../images/tip.png") no-repeat 0 0/100% 100%;
   text-align: center;
   font-size: 0.2933333333rem;
-  color: rgba(255, 240, 199, 0.6);
+  color: #FFF0C799;
   font-weight: bold;
 }
 .wrap .game-area .wait-time-s {
@@ -387,7 +399,7 @@ body {
   top: -0.5333333333rem;
   left: 50%;
   transform: translateX(-50%);
-  width: 6rem;
+  width: 4.2933333333rem;
   height: 0.96rem;
   line-height: 0.8266666667rem;
   background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
@@ -645,25 +657,24 @@ body {
   font-size: 0.3733333333rem;
 }
 .wrap .game-area .draw-time .put-wrap {
-  width: 9rem;
+  width: 8rem;
   height: 2.44rem;
   box-sizing: border-box;
   position: absolute;
-  left: 55%;
+  left: 50%;
   transform: translateX(-50%);
   top: 4.5rem;
   display: flex;
 }
 .wrap .game-area .draw-time .put-wrap .put {
-  width: 1.4rem;
+  font-size: 0.3733333333rem;
-  font-size: 0.32rem;
   color: #FFFFFF;
   font-weight: 600;
   margin-right: 0.4rem;
   margin-top: 0.3rem;
 }
 .wrap .game-area .draw-time .put-wrap .list {
-  width: 6.4rem;
+  width: 6.72rem;
   height: 2.7733333333rem;
   display: flex;
   flex-wrap: wrap;
@@ -671,7 +682,7 @@ body {
 .wrap .game-area .draw-time .put-wrap .list .item {
   width: 0.9866666667rem;
   height: 1.2rem;
-  margin-right: 0.7rem;
+  margin-right: 0.92rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -977,19 +988,19 @@ body {
   bottom: 0;
   z-index: 999;
   width: 100%;
-  height: 1.2rem;
+  height: 1.3333333333rem;
   background: url(../images/mineBg.png) no-repeat;
   background-size: 100% 100%;
-  padding: 0 0.2rem;
+  padding: 0 0.7rem 0 0.2rem;
   box-sizing: border-box;
   display: flex;
   align-items: center;
 }
 .wrap .shade-mask-rank .shade-content-rank .mine .mine-rank {
-  width: 3.8rem;
+  font-size: 0.3466666667rem;
-  font-size: 0.2933333333rem;
   font-weight: bold;
   color: white;
+  white-space: nowrap;
 }
 .wrap .shade-mask-rank .shade-content-rank .mine .mine-info {
   flex: 1;
@@ -1005,18 +1016,19 @@ body {
   margin-right: 0.5333333333rem;
 }
 .wrap .shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick {
-  font-size: 0.3466666667rem;
+  font-size: 0.3733333333rem;
   font-weight: bold;
   color: white;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: 3.2rem;
+  width: 3.5rem;
 }
 .wrap .shade-mask-rank .shade-content-rank .mine .mine-diamond-num {
-  font-size: 0.2933333333rem;
+  font-size: 0.3466666667rem;
   font-weight: bold;
   color: #fff;
+  white-space: nowrap;
 }
 .wrap .shade-mask-rank .shade-content-rank .mine .mine-diamond-num b {
   color: #fff;

view/peko/activity/act-ocean/css/index.scss

@@ -25,12 +25,27 @@
 html,
 body {
     font-family: 'din-medium';
-    background: #531800;
+    background: #E17E3D;
     // 海浪svga过长
     overflow-x: hidden;
     // height: 19rem;
+    &::-webkit-scrollbar{
+        display: none;
+    }
 }
+.back {
+    position: fixed;
+    top: px2rem(70, );
+    left: px2rem(34, );
+    z-index: 9;
+    width: px2rem(62, );
+    height: px2rem(62, );
 
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
 .wrap {
     width: 100%;
     height: 100vh;
@@ -83,17 +98,24 @@ body {
         z-index: 9;
 
         span {
+            color: #fff;
             position: absolute;
+            font-weight: bold;
+            margin-left: px2rem(27);
+            text-shadow: 1px 1px 0px#fc8321,
+                -1px -1px 0px#fc8321,
+                1px 1px 0px#fc8321,
+                -1px -1px 0px#fc8321,
+                1px 1px 0px#fc8321,
+                -1px -1px 0px#fc8321;
+            font-size: px2rem(36, );
             left: px2rem(0, );
             bottom: 1.65rem;
-            // background: url(../images/wljg.png) no-repeat;
+            background: url(../images/wljg.png) no-repeat;
-            // background-size: 100% 100%;
+            background-size: 100% 100%;
             width: px2rem(128, );
             height: px2rem(38, );
-            img{
+            position: absolute;
-                width: 100%;
-                height: 100%;
-            }
         }
 
         .box {
@@ -240,8 +262,7 @@ body {
             font-size: px2rem(20, );
             color: #701800;
             position: absolute;
-            // top: px2rem(12, );
+            top: px2rem(12, );
-            top: 0.4rem;
             left: px2rem(35, );
         }
 
@@ -257,8 +278,7 @@ body {
                 left: 50%;
                 transform: translateX(-50%);
                 // width: px2rem(322);
-                // width: 5.45rem;
+                width: 5.45rem;
-                width: 6.8rem;
                 height: px2rem(72);
                 line-height: px2rem(62);
                 background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
@@ -270,19 +290,12 @@ body {
 
             .current-tip {
                 top: px2rem(50);
-                // width: px2rem(368);
+                width: px2rem(368);
-                width: px2rem(400, );
                 height: px2rem(68);
-                line-height: 0.38rem;
+                line-height: px2rem(68);
                 background: url('../images/tip.png') no-repeat 0 0/100% 100%;
-                text-align: center;
+                font-size: px2rem(22);
-                font-weight: bold;
+                color: #F0C799;
-                span {
-                    width: px2rem(320);
-                    margin: 0 auto;
-                    font-size: px2rem(22);
-                    color: #F0C799;
-                }
             }
 
             // 海鲜列表
@@ -293,6 +306,7 @@ body {
                 padding-left: px2rem(47);
 
                 li {
+                    transition: all, 0.2s;
                     position: relative;
                     z-index: 99;
                     width: px2rem(138);
@@ -358,10 +372,8 @@ body {
                         display: none;
                         // width: px2rem(92);
                         // height: px2rem(56);
-                        // width: px2rem(132);
+                        width: px2rem(132);
-                        // height: px2rem(74);
+                        height: px2rem(74);
-                        width: 2.1rem;
-                        height: 1.3rem;
                         position: absolute;
                         top: px2rem(-72);
                         left: px2rem(-28);
@@ -370,27 +382,22 @@ body {
                         text-indent: px2rem(16);
 
                         p {
-                            width: 2rem;
+                            font-size: px2rem(18);
-                            font-size: px2rem(14);
                             color: white;
                             font-weight: bold;
                             text-align: center;
-                            margin-left: px2rem(-5);
+                            margin-left: px2rem(-20);
 
                             &.first-line {
-                                padding-top: px2rem(20);
+                                padding-top: px2rem(10);
                             }
 
                             &.second-line {
                                 padding-top: px2rem(4);
                             }
                         }
-                        .pzh {
-                            font-size: px2rem(18);
-                        }
                     }
 
-
                     .select-num {
                         // display: none;
                         position: absolute;
@@ -479,8 +486,7 @@ body {
                 top: px2rem(-40);
                 left: 50%;
                 transform: translateX(-50%);
-                // width: px2rem(322);
+                width: px2rem(322);
-                width: 6rem;
                 height: px2rem(72);
                 line-height: px2rem(62);
                 background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
@@ -549,8 +555,7 @@ body {
                 top: px2rem(-40);
                 left: 50%;
                 transform: translateX(-50%);
-                // width: px2rem(322);
+                width: px2rem(322);
-                width: 6rem;
                 height: px2rem(72);
                 line-height: px2rem(62);
                 background: url('../images/count-down.png') no-repeat 0 0/100% 100%;
@@ -874,21 +879,19 @@ body {
             }
 
             .put-wrap {
-                // width: px2rem(600, );
+                width: px2rem(600, );
-                width: 9rem;
                 height: px2rem(183, );
                 // line-height: px2rem(183, );
                 box-sizing: border-box;
                 position: absolute;
-                left: 55%;
+                left: 50%;
                 transform: translateX(-50%);
                 // top: 3.8rem;
                 top: 4.5rem;
                 display: flex;
 
                 .put {
-                    width: 1.4rem;
+                    font-size: px2rem(28, );
-                    font-size: px2rem(24, );
                     color: #FFFFFF;
                     font-weight: 600;
                     margin-right: 0.4rem;
@@ -896,7 +899,7 @@ body {
                 }
 
                 .list {
-                    width: 6.4rem;
+                    width: px2rem(504, );
                     height: px2rem(208, );
                     display: flex;
                     flex-wrap: wrap;
@@ -904,7 +907,7 @@ body {
                     .item {
                         width: px2rem(74, );
                         height: px2rem(90, );
-                        margin-right: 0.7rem;
+                        margin-right: 0.92rem;
                         // position: relative;
                         display: flex;
                         flex-direction: column;
@@ -1282,29 +1285,27 @@ body {
                 bottom: 0;
                 z-index: 999;
                 width: 100%;
-                height: px2rem(90);
+                height: px2rem(100);
                 // background-color: rgba($color: #000000, $alpha: .8);
                 background: url(../images/mineBg.png) no-repeat;
                 background-size: 100% 100%;
-                // padding: 0 0.7rem 0 0.2rem;
+                padding: 0 0.7rem 0 0.2rem;
-                padding: 0 0.2rem;
                 box-sizing: border-box;
                 display: flex;
                 align-items: center;
 
                 .mine-rank {
-                    width: 3.8rem;
+                    font-size: px2rem(26);
-                    font-size: px2rem(22);
                     font-weight: bold;
                     color: white;
-                    // white-space:nowrap;
+                    white-space: nowrap;
                 }
 
                 .mine-info {
                     flex: 1;
                     display: flex;
                     align-items: center;
-                    white-space:nowrap;
+                    white-space: nowrap;
 
                     img {
                         width: px2rem(80);
@@ -1315,21 +1316,21 @@ body {
                     }
 
                     .mine-nick {
-                        font-size: px2rem(26);
+                        font-size: px2rem(28);
                         font-weight: bold;
                         color: white;
                         overflow: hidden; //超出隐藏
                         white-space: nowrap; //不折行
                         text-overflow: ellipsis;
-                        width: 3.2rem;
+                        width: 3.5rem;
                     }
                 }
 
                 .mine-diamond-num {
-                    font-size: px2rem(22);
+                    font-size: px2rem(26);
                     font-weight: bold;
                     color: #fff;
-                    // white-space:nowrap;
+                    white-space: nowrap;
 
                     b {
                         color: #fff;

view/peko/activity/act-ocean/css/record.css

@@ -1,238 +1,274 @@
-@font-face {
+@font-face {
-  font-family: 'pingfang-bold';
+  font-family: "pingfang-bold";
-  src: url("../../../common/fonts/PingFang Bold.ttf");
+  src: url("../../../common/fonts/PingFang Bold.ttf");
-  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg"); }
+  src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
-@font-face {
+}
-  font-family: 'din-medium';
+@font-face {
-  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  font-family: "din-medium";
-  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg"); }
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
-@font-face {
+  src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
-  font-family: 'pingfang-medium';
+}
-  src: url("../../../common/fonts/PingFang-Medium.ttf");
+@font-face {
-  src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg"); }
+  font-family: "pingfang-medium";
-html,
+  src: url("../../../common/fonts/PingFang-Medium.ttf");
-body {
+  src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
-  width: 100%;
+}
-  background: linear-gradient(0deg, #E6AD6A 0%, #F9CA92 100%); }
+html,
-
+body {
-.img {
+  width: 100%;
-  position: fixed;
+  background: linear-gradient(0deg, #E6AD6A 0%, #F9CA92 100%);
-  left: 50%;
+}
-  top: 50%;
+
-  transform: translate(-50%, -50%);
+.img {
-  width: 6rem;
+  position: fixed;
-  height: 4.1333333333rem;
+  left: 50%;
-  background: url(../images/null.png) no-repeat;
+  top: 50%;
-  background-size: 100% 100%; }
+  transform: translate(-50%, -50%);
-  .img p {
+  width: 6rem;
-    text-align: center;
+  height: 4.1333333333rem;
-    width: 1.3333333333%rem;
+  background: url(../images/null.png) no-repeat;
-    position: absolute;
+  background-size: 100% 100%;
-    bottom: -1rem;
+}
-    left: 50%;
+.img p {
-    transform: translate(-50%);
+  text-align: center;
-    color: #fff;
+  width: 1.3333333333%rem;
-    font-size: 0.2666666667rem; }
+  position: absolute;
-
+  bottom: -1rem;
-.record-list {
+  left: 50%;
-  width: 10rem;
+  transform: translate(-50%);
-  margin: 0.4rem auto; }
+  color: #fff;
-  .record-list li {
+  font-size: 0.2666666667rem;
-    width: 100%;
+}
-    height: 8.48rem;
+
-    background: url("../images/record/record-bg.png") no-repeat;
+.record-list {
-    background-size: 100% 100%;
+  width: 10rem;
-    border-radius: 0.2666666667rem;
+  margin: 0.4rem auto;
-    overflow: hidden; }
+}
-    .record-list li h3 {
+.record-list li {
-      width: 100%;
+  width: 100%;
-      height: 0.7rem;
+  height: 8.48rem;
-      line-height: 0.7rem;
+  background: url("../images/record/record-bg.png") no-repeat;
-      text-align: center;
+  background-size: 100% 100%;
-      color: #fff;
+  border-radius: 0.2666666667rem;
-      margin: 0.3rem auto -0.3rem; }
+  overflow: hidden;
-    .record-list li .goldBox {
+}
-      width: 90%;
+.record-list li h3 {
-      height: 0.5866666667rem;
+  width: 100%;
-      line-height: 0.5866666667rem;
+  height: 0.7rem;
-      background: #F46331;
+  line-height: 0.7rem;
-      display: flex;
+  text-align: center;
-      box-sizing: border-box;
+  color: #fff;
-      padding: 0 0.2666666667rem;
+  margin: 0.3rem auto -0.3rem;
-      margin: 0.2rem auto 0; }
+}
-      .record-list li .goldBox p {
+.record-list li .goldBox {
-        color: #fff;
+  width: 90%;
-        width: 50%;
+  height: 0.5866666667rem;
-        text-align: center;
+  line-height: 0.5866666667rem;
-        display: none; }
+  background: #F46331;
-      .record-list li .goldBox span {
+  display: flex;
-        color: #FFF773;
+  box-sizing: border-box;
-        font-size: 0.2666666667rem; }
+  padding: 0 0.2666666667rem;
-    .record-list li .result-wrap {
+  margin: 0.2rem auto 0;
-      width: 84%;
+}
-      height: 1.2133333333rem;
+.record-list li .goldBox p {
-      line-height: 1.2133333333rem;
+  color: #fff;
-      box-sizing: border-box;
+  width: 50%;
-      margin: 0.0666666667rem auto 0.3333333333rem;
+  text-align: center;
-      display: flex;
+  display: none;
-      justify-content: space-between;
+}
-      position: relative; }
+.record-list li .goldBox span {
-      .record-list li .result-wrap .result {
+  color: #FFF773;
-        display: flex;
+  font-size: 0.2666666667rem;
-        align-items: center; }
+}
-        .record-list li .result-wrap .result span {
+.record-list li .result-wrap {
-          font-size: 0.3733333333rem;
+  width: 84%;
-          color: #FFFFFF;
+  height: 1.2133333333rem;
-          padding-right: 0.1866666667rem;
+  line-height: 1.2133333333rem;
-          font-weight: 600;
+  box-sizing: border-box;
-          position: absolute;
+  margin: 0.0666666667rem auto 0.3333333333rem;
-          left: 50%;
+  display: flex;
-          transform: translateX(-50%);
+  justify-content: space-between;
-          width: 1.9066666667rem;
+  position: relative;
-          height: 0.6rem;
+}
-          top: 0.2rem; }
+.record-list li .result-wrap .result {
-        .record-list li .result-wrap .result .resultImg {
+  display: flex;
-          position: absolute;
+  align-items: center;
-          left: 50%;
+}
-          transform: translateX(-50%);
+.record-list li .result-wrap .result span {
-          width: 1.9066666667rem;
+  font-size: 0.3733333333rem;
-          height: 0.6rem; }
+  color: #FFFFFF;
-      .record-list li .result-wrap .award {
+  padding-right: 0.1866666667rem;
-        display: flex;
+  font-weight: 600;
-        align-items: center;
+  position: absolute;
-        position: absolute;
+  left: 50%;
-        right: 0rem;
+  transform: translateX(-50%);
-        top: -0.1rem; }
+  width: 1.9066666667rem;
-        .record-list li .result-wrap .award p,
+  height: 0.6rem;
-        .record-list li .result-wrap .award b {
+  background: url(../images/record/result.png) no-repeat;
-          font-size: 0.3733333333rem;
+  background-size: 100% 100%;
-          color: #FFFFFF;
+  top: 0.2rem;
-          font-weight: 600; }
+}
-        .record-list li .result-wrap .award .diamond {
+.record-list li .result-wrap .award {
-          width: 0.3733333333rem;
+  display: flex;
-          height: 0.3733333333rem; }
+  align-items: center;
-      .record-list li .result-wrap .result_sBox {
+  position: absolute;
-        width: 8.8rem;
+  right: 0rem;
-        height: 1.1466666667rem;
+  top: -0.1rem;
-        margin: 1rem auto 0;
+}
-        display: flex;
+.record-list li .result-wrap .award p,
-        justify-content: center;
+.record-list li .result-wrap .award b {
-        position: relative;
+  font-size: 0.3733333333rem;
-        left: 50%;
+  color: #FFFFFF;
-        transform: translateX(-50%); }
+  font-weight: 600;
-        .record-list li .result-wrap .result_sBox .bg {
+}
-          width: 1.1466666667rem;
+.record-list li .result-wrap .award .diamond {
-          height: 1.1466666667rem;
+  width: 0.3733333333rem;
-          background: url("../images/record_bubble_act.png") no-repeat;
+  height: 0.3733333333rem;
-          background-size: 100% 100%;
+}
-          text-align: center; }
+.record-list li .result-wrap .result_sBox {
-          .record-list li .result-wrap .result_sBox .bg img {
+  width: 8.8rem;
-            width: 75%;
+  height: 1.1466666667rem;
-            display: block;
+  margin: 1rem auto 0;
-            margin: 0.1333333333rem auto 0; }
+  display: flex;
-    .record-list li .put-wrap {
+  justify-content: center;
-      width: 84%;
+  position: relative;
-      height: 1.2133333333rem;
+  left: 50%;
-      line-height: 1.2133333333rem;
+  transform: translateX(-50%);
-      box-sizing: border-box;
+}
-      margin: 2rem auto 0;
+.record-list li .result-wrap .result_sBox .bg {
-      display: flex;
+  width: 1.1466666667rem;
-      position: relative; }
+  height: 1.1466666667rem;
-      .record-list li .put-wrap .put {
+  background: url("../images/record_bubble_act.png") no-repeat;
-        font-size: 0.3733333333rem;
+  background-size: 100% 100%;
-        color: #FFFFFF;
+  text-align: center;
-        font-weight: 600;
+}
-        margin-right: 0.9rem;
+.record-list li .result-wrap .result_sBox .bg img {
-        position: absolute;
+  width: 75%;
-        width: 1.0266666667rem;
+  display: block;
-        height: 0.6rem;
+  margin: 0.1333333333rem auto 0;
-        left: 50%;
+}
-        transform: translateX(-50%);
+.record-list li .put-wrap {
-        top: -0.6rem; }
+  width: 84%;
-      .record-list li .put-wrap .list {
+  height: 1.2133333333rem;
-        width: 6.72rem;
+  line-height: 1.2133333333rem;
-        height: 2.7733333333rem;
+  box-sizing: border-box;
-        display: flex;
+  margin: 2rem auto 0;
-        flex-wrap: wrap;
+  display: flex;
-        margin: 0.3rem auto 0; }
+  position: relative;
-        .record-list li .put-wrap .list .item {
+}
-          width: 0.9866666667rem;
+.record-list li .put-wrap .put {
-          height: 1.2rem;
+  font-size: 0.3733333333rem;
-          margin-right: 0.92rem;
+  color: #FFFFFF;
-          display: flex;
+  font-weight: 600;
-          flex-direction: column;
+  margin-right: 0.9rem;
-          justify-content: space-between;
+  position: absolute;
-          align-items: center; }
+  width: 1.0266666667rem;
-          .record-list li .put-wrap .list .item:nth-child(4n) {
+  height: 0.6rem;
-            margin-right: 0; }
+  left: 50%;
-          .record-list li .put-wrap .list .item p {
+  transform: translateX(-50%);
-            width: 0.8266666667rem;
+  background: url(../images/record/touru.png) no-repeat;
-            height: 0.8266666667rem;
+  background-size: 100% 100%;
-            background: url("../images/record_bubble.png") no-repeat;
+  top: -0.6rem;
-            background-size: 100% 100%; }
+}
-            .record-list li .put-wrap .list .item p .gift {
+.record-list li .put-wrap .list {
-              width: 75%;
+  width: 6.72rem;
-              margin-top: 0.1rem;
+  height: 2.7733333333rem;
-              margin-left: 0.1rem; }
+  display: flex;
-          .record-list li .put-wrap .list .item div {
+  flex-wrap: wrap;
-            width: 100%;
+  margin: 0.3rem auto 0;
-            height: 0.3333333333rem;
+}
-            display: flex;
+.record-list li .put-wrap .list .item {
-            align-items: center;
+  width: 0.9866666667rem;
-            justify-content: center; }
+  height: 1.2rem;
-            .record-list li .put-wrap .list .item div .diamond {
+  margin-right: 0.92rem;
-              width: 0.3333333333rem;
+  display: flex;
-              height: 0.3333333333rem;
+  flex-direction: column;
-              margin-top: -0.01rem; }
+  justify-content: space-between;
-            .record-list li .put-wrap .list .item div .in {
+  align-items: center;
-              font-size: 0.2666666667rem;
+}
-              color: #FFFFFF;
+.record-list li .put-wrap .list .item:nth-child(4n) {
-              font-weight: 600;
+  margin-right: 0;
-              white-space: nowrap; }
+}
-    .record-list li .marine_organism {
+.record-list li .put-wrap .list .item p {
-      width: 78%;
+  width: 0.8266666667rem;
-      height: 2.1333333333rem;
+  height: 0.8266666667rem;
-      margin: 0 auto;
+  background: url("../images/record_bubble.png") no-repeat;
-      display: flex;
+  background-size: 100% 100%;
-      justify-content: space-between;
+}
-      flex-wrap: wrap; }
+.record-list li .put-wrap .list .item p .gift {
-      .record-list li .marine_organism span {
+  width: 75%;
-        width: 1.6rem;
+  margin-top: 0.1rem;
-        height: 1.6rem;
+  margin-left: 0.1rem;
-        position: relative;
+}
-        display: block; }
+.record-list li .put-wrap .list .item div {
-        .record-list li .marine_organism span img {
+  width: 100%;
-          position: absolute;
+  height: 0.3333333333rem;
-          left: 50%;
+  display: flex;
-          top: 50%;
+  align-items: center;
-          transform: translate(-50%, -50%);
+  justify-content: center;
-          width: 0.72rem;
+}
-          height: 0.6266666667rem;
+.record-list li .put-wrap .list .item div .diamond {
-          display: block; }
+  width: 0.3333333333rem;
-        .record-list li .marine_organism span b {
+  height: 0.3333333333rem;
-          position: absolute;
+  margin-top: -0.01rem;
-          right: -0.1rem;
+}
-          top: 0.3rem;
+.record-list li .put-wrap .list .item div .in {
-          color: #FFFFFF;
+  font-size: 0.2666666667rem;
-          font-size: 0.2666666667rem; }
+  color: #FFFFFF;
-      .record-list li .marine_organism .active {
+  font-weight: 600;
-        width: 1.6rem;
+  white-space: nowrap;
-        height: 1.6rem;
+}
-        position: relative; }
+.record-list li .marine_organism {
-        .record-list li .marine_organism .active img {
+  width: 78%;
-          position: absolute;
+  height: 2.1333333333rem;
-          left: 50%;
+  margin: 0 auto;
-          top: 50%;
+  display: flex;
-          transform: translate(-50%, -50%);
+  justify-content: space-between;
-          width: 0.96rem;
+  flex-wrap: wrap;
-          height: 0.8266666667rem;
+}
-          display: block; }
+.record-list li .marine_organism span {
-        .record-list li .marine_organism .active b {
+  width: 1.6rem;
-          position: absolute;
+  height: 1.6rem;
-          right: -0.1rem;
+  position: relative;
-          top: 0.3rem;
+  display: block;
-          color: #FEEF60;
+}
-          font-weight: bold;
+.record-list li .marine_organism span img {
-          font-size: 0.32rem; }
+  position: absolute;
-
+  left: 50%;
-/*# sourceMappingURL=record.css.map */
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.72rem;
+  height: 0.6266666667rem;
+  display: block;
+}
+.record-list li .marine_organism span b {
+  position: absolute;
+  right: -0.1rem;
+  top: 0.3rem;
+  color: #FFFFFF;
+  font-size: 0.2666666667rem;
+}
+.record-list li .marine_organism .active {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+}
+.record-list li .marine_organism .active img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.96rem;
+  height: 0.8266666667rem;
+  display: block;
+}
+.record-list li .marine_organism .active b {
+  position: absolute;
+  right: -0.1rem;
+  top: 0.3rem;
+  color: #FEEF60;
+  font-weight: bold;
+  font-size: 0.32rem;
+}
+
+/*# sourceMappingURL=record.css.map */

view/peko/activity/act-ocean/css/record.scss

@@ -134,18 +134,10 @@ body {
                     transform: translateX(-50%);
                     width: px2rem(143, );
                     height: px2rem(45, );
-                    // background: url(../images/record/result.png) no-repeat;
+                    background: url(../images/record/result.png) no-repeat;
-                    // background-size: 100% 100%;
+                    background-size: 100% 100%;
                     top: 0.2rem;
                 }
-                .resultImg {
-                    position: absolute;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    width: px2rem(143, );
-                    height: px2rem(45, );
-                }
-                
 
                 // .bg {
                 //     width: px2rem(91, );
@@ -229,8 +221,8 @@ body {
                 height: px2rem(45, );
                 left: 50%;
                 transform: translateX(-50%);
-                // background: url(../images/record/touru.png) no-repeat;
+                background: url(../images/record/touru.png) no-repeat;
-                // background-size: 100% 100%;
+                background-size: 100% 100%;
                 top: -0.6rem;
             }