1.1.0：将深海奇缘改成奇遇森林

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

@@ -12,23 +12,23 @@
 
 body {
   font-family: 'pingfang-medium';
-  background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
+  background-color: #F43C58;
 }
 
 .banner {
   width: 10rem;
-  height: 6.66667rem;
+  height: 8.26667rem;
   background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
 }
 
 .buy-area {
-  width: 9.46667rem;
+  width: 9.33333rem;
-  height: 14.4rem;
+  height: 12.37333rem;
   margin: auto;
   box-sizing: border-box;
-  padding: 1.06667rem 0.56rem 0 0.8rem;
+  padding: 1.2rem 0.50667rem 0 0.74667rem;
   background: url("../images/mall/buy-area.png") no-repeat 0 0/100% 100%;
-  margin-top: -0.88rem;
+  margin-top: -4rem;
 }
 
 .buy-area.bg-long {
@@ -38,7 +38,7 @@ body {
 .buy-area li {
   display: flex;
   align-items: center;
-  margin-bottom: 0.53333rem;
+  margin-bottom: 0.8rem;
 }
 
 .buy-area li.li-bg-long {
@@ -46,33 +46,33 @@ body {
 }
 
 .buy-area li .headwear-pic {
-  width: 2.4rem;
+  width: 1.73333rem;
-  height: 2.4rem;
+  height: 1.73333rem;
-  background-color: #92CCFB;
+  background-color: #F43C58;
   border-radius: 0.4rem;
-  margin-right: 0.4rem;
+  margin-right: 0.26667rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .buy-area li .headwear-pic img {
-  width: 2rem;
+  width: 1.33333rem;
-  height: 2rem;
+  height: 1.33333rem;
 }
 
 .buy-area li .headwear-info {
   flex: 1;
-  height: 1.6rem;
+  height: 1.46667rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  color: white;
+  color: #C58138;
-  font-size: 0.34667rem;
+  font-size: 0.32rem;
 }
 
 .buy-area li .headwear-info .headwear-name {
-  font-size: 0.48rem;
+  font-size: 0.42667rem;
   font-weight: bold;
 }
 
@@ -81,7 +81,7 @@ body {
 }
 
 .buy-area li .headwear-info .headwear-award {
-  color: #FEEF60;
+  color: #ED7B50;
 }
 
 .buy-area li .buy-btn {
@@ -99,7 +99,7 @@ body {
   left: 0;
   z-index: 99;
   width: 100%;
-  height: 1.62667rem;
+  height: 1.73333rem;
   background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
   display: flex;
   align-items: center;
@@ -112,33 +112,45 @@ body {
 .bottom .avatar {
   width: 1.33333rem;
   height: 1.33333rem;
-  margin: 0 0.26667rem 0 0.53333rem;
+  margin-left: 0.56rem;
+  margin-right: 0.26667rem;
 }
 
 .bottom .avatar img {
   width: 100%;
+  height: 100%;
   border-radius: 50%;
 }
 
 .bottom .info-wrap {
   flex: 1;
-  height: 1.17333rem;
+  margin-top: 0.18667rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  font-size: 0.26667rem;
-  color: white;
 }
 
-.bottom .info-wrap .nick {
+.bottom .info-wrap .fragment-num, .bottom .info-wrap .diamond-num {
-  font-size: 0.37333rem;
+  width: 3.33333rem;
+  height: 0.56rem;
+  background-color: #BD7F38;
+  border-radius: 0.26667rem;
+  line-height: 0.56rem;
+  font-size: 0.34667rem;
   font-weight: bold;
+  color: white;
+  text-indent: 0.13333rem;
+  margin-bottom: 0.13333rem;
+}
+
+.bottom .add {
+  width: 0.54667rem;
+  height: 0.54667rem;
+  margin-top: -0.64rem;
+  margin-right: 0.93333rem;
 }
 
 .bottom .recharge {
-  width: 2rem;
+  width: 1.92rem;
-  height: 0.85333rem;
+  height: 0.82667rem;
-  margin-right: 0.8rem;
+  margin-right: 0.98667rem;
 }
 
 .bottom .recharge img {

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

@@ -20,64 +20,66 @@
 
 body{
     font-family: 'pingfang-medium';
-    background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
+    // background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
+    background-color: #F43C58;
 }
 
 .banner{
     width: px2rem(750);
-    height: px2rem(500);
+    height: px2rem(620);
     background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
 }
 .buy-area{
-    width: px2rem(710);
+    width: px2rem(700);
     // height: px2rem(900);
-    height: px2rem(1080);
+    // height: px2rem(1080);
+    height: px2rem(928);
     margin: auto;
     box-sizing: border-box;
-    padding: px2rem(80) px2rem(42) 0 px2rem(60);
+    padding: px2rem(90) px2rem(38) 0 px2rem(56);
     background: url('../images/mall/buy-area.png') no-repeat 0 0/100% 100%;
-    margin-top: px2rem(-66);
+    margin-top: px2rem(-300);
     &.bg-long{
         background-image: url('../images/mall/buy-area-long.png');
     }
     li{
         display: flex;
         align-items: center;
-        margin-bottom: px2rem(40);
+        margin-bottom: px2rem(60);
         &.li-bg-long{
             margin-bottom: px2rem(90);
         }
         .headwear-pic{
-            width: px2rem(180);
+            width: px2rem(130);
-            height: px2rem(180);
+            height: px2rem(130);
-            background-color: #92CCFB;
+            background-color: #F43C58;
             border-radius: px2rem(30);
-            margin-right: px2rem(30);
+            margin-right: px2rem(20);
             display: flex;
             justify-content: center;
             align-items: center;
             img{
-                width: px2rem(150);
+                width: px2rem(100);
-                height: px2rem(150);
+                height: px2rem(100);
             }
         }
         .headwear-info{
             flex: 1;
-            height: px2rem(120);
+            height: px2rem(110);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            color: white;
+            color: #C58138;
-            font-size: px2rem(26);
+            font-size: px2rem(24);
             .headwear-name{
-                font-size: px2rem(36);
+                font-size: px2rem(32);
                 font-weight: bold;
             }
             .headwear-price{
                 margin-bottom: px2rem(-12);
             }
             .headwear-award{
-                color: #FEEF60;
+                color: #ED7B50;
             }
         }
         .buy-btn{
@@ -95,7 +97,7 @@ body{
     left: 0;
     z-index: 99;
     width: 100%;
-    height: px2rem(122);
+    height: px2rem(130);
     background: url('../images/mall/bottom.png') no-repeat 0 0/100% 100%;
     display: flex;
     align-items: center;
@@ -105,29 +107,40 @@ body{
     .avatar{
         width: px2rem(100);
         height: px2rem(100);
-        margin: 0 px2rem(20) 0 px2rem(40);
+        margin-left: px2rem(42);
+        margin-right: px2rem(20);
         img{
             width: 100%;
+            height: 100%;
             border-radius: 50%;
         }
     }
     .info-wrap{
         flex: 1;
-        height: px2rem(88);
+        margin-top: px2rem(14);
-        display: flex;
+        .fragment-num, .diamond-num{
-        flex-direction: column;
+            width: px2rem(250);
-        justify-content: space-between;
+            height: px2rem(42);
-        font-size: px2rem(20);
+            background-color: #BD7F38;
-        color: white;
+            border-radius: px2rem(20);
-        .nick{
+            line-height: px2rem(42);
-            font-size: px2rem(28);
+            font-size: px2rem(26);
             font-weight: bold;
+            color: white;
+            text-indent: px2rem(10);
+            margin-bottom: px2rem(10);
         }
     }
+    .add{
+        width: px2rem(41);
+        height: px2rem(41);
+        margin-top: px2rem(-48);
+        margin-right: px2rem(70);
+    }
     .recharge{
-        width: px2rem(150);
+        width: px2rem(144);
-        height: px2rem(64);
+        height: px2rem(62);
-        margin-right: px2rem(60);
+        margin-right: px2rem(74);
         img{
             width: 100%;
         }

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

@@ -1,163 +1,139 @@
 @font-face {
-  font-family: 'pingfang-bold';
+  font-family: "pingfang-bold";
   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");
 }
-
 @font-face {
-  font-family: 'din-medium';
+  font-family: "din-medium";
   src: url("../../../common/fonts/DINCond-Medium.ttf");
   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-face {
-  font-family: 'pingfang-medium';
+  font-family: "pingfang-medium";
   src: url("../../../common/fonts/PingFang-Medium.ttf");
   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-face {
-  font-family: 'pingfang-regular';
+  font-family: "pingfang-regular";
   src: url("../../../common/fonts/PingFang-Regular.ttf");
   src: url("../../../common/fonts/PingFang-Regular.ttf") format("woff"), url("../../../common/fonts/PingFang-Regular.ttf") format("truetype"), url("../../../common/fonts/PingFang-Regular.ttf") format("svg");
 }
-
 html, body {
-  font-family: 'pingfang-bold';
+  font-family: "pingfang-bold";
   position: relative;
 }
 
 .rank-top {
-  height: 6.66667rem;
+  height: 6.6666666667rem;
   background-image: linear-gradient(#3491F5, #60C7FC);
   overflow: hidden;
 }
-
 .rank-top .tab-wrap {
-  font-family: 'pingfang-regular';
+  font-family: "pingfang-regular";
-  width: 5.33333rem;
+  width: 5.3333333333rem;
-  height: 0.93333rem;
+  height: 0.9333333333rem;
   background-color: #7ABDF9;
   border-radius: 0.48rem;
-  margin: 0.48rem auto 0.29333rem;
+  margin: 0.48rem auto 0.2933333333rem;
 }
-
 .rank-top .tab-wrap span {
   display: inline-block;
-  width: 2.53333rem;
+  width: 2.5333333333rem;
   height: 0.8rem;
   line-height: 0.8rem;
   text-align: center;
   font-size: 0.4rem;
   color: white;
-  margin-top: 0.06667rem;
+  margin-top: 0.0666666667rem;
 }
-
 .rank-top .tab-wrap span:first-child {
   margin-left: 0.08rem;
 }
-
 .rank-top .tab-wrap .active {
   background-color: white;
   color: #3C9BF7;
   border-radius: 0.4rem;
 }
-
 .rank-top .topthree-wrap {
   position: relative;
 }
-
 .rank-top .topthree-wrap .info-wrap {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 2.66667rem;
+  width: 2.6666666667rem;
   height: 3.2rem;
   background-image: linear-gradient(#3F9EF7, #52B6FA);
   margin-top: 1.68rem;
-  border-radius: 0.26667rem 0.26667rem 0 0;
+  border-radius: 0.2666666667rem 0.2666666667rem 0 0;
 }
-
 .rank-top .topthree-wrap .info-wrap:first-child {
   width: 3.2rem;
-  height: 3.73333rem;
+  height: 3.7333333333rem;
-  margin-top: 1.14667rem;
+  margin-top: 1.1466666667rem;
   left: 50%;
   transform: translateX(-50%);
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(2) {
   left: 0.48rem;
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar {
-  width: 1.86667rem;
+  width: 1.8666666667rem;
-  height: 2.53333rem;
+  height: 2.5333333333rem;
-  margin-top: -1.14667rem;
+  margin-top: -1.1466666667rem;
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar p {
   background-image: url("../images/second.png");
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar img {
-  width: 1.86667rem;
+  width: 1.8666666667rem;
-  height: 1.86667rem;
+  height: 1.8666666667rem;
-  top: -1.97333rem;
+  top: -1.9733333333rem;
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(3) {
   right: 0.48rem;
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar {
-  width: 1.86667rem;
+  width: 1.8666666667rem;
-  height: 2.53333rem;
+  height: 2.5333333333rem;
-  margin-top: -1.14667rem;
+  margin-top: -1.1466666667rem;
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar p {
   background-image: url("../images/third.png");
 }
-
 .rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar img {
-  width: 1.86667rem;
+  width: 1.8666666667rem;
-  height: 1.86667rem;
+  height: 1.8666666667rem;
-  top: -1.97333rem;
+  top: -1.9733333333rem;
 }
-
 .rank-top .topthree-wrap .info-wrap .avatar {
-  width: 2.13333rem;
+  width: 2.1333333333rem;
-  height: 2.85333rem;
+  height: 2.8533333333rem;
-  margin-top: -0.93333rem;
+  margin-top: -0.9333333333rem;
 }
-
 .rank-top .topthree-wrap .info-wrap .avatar p {
   position: relative;
   z-index: 99;
   height: 100%;
   background: url("../images/first.png") no-repeat 0 0/100% 100%;
 }
-
 .rank-top .topthree-wrap .info-wrap .avatar img {
   position: relative;
   z-index: 9;
   top: -2.24rem;
-  width: 2.13333rem;
+  width: 2.1333333333rem;
-  height: 2.13333rem;
+  height: 2.1333333333rem;
   border-radius: 50%;
 }
-
 .rank-top .topthree-wrap .info-wrap .nick, .rank-top .topthree-wrap .info-wrap .diamond-num {
   font-size: 0.4rem;
   font-weight: bold;
   color: white;
-  margin: 0.21333rem 0;
+  margin: 0.2133333333rem 0;
 }
-
 .rank-top .topthree-wrap .info-wrap .diamond-num {
-  font-family: 'din-medium';
+  font-family: "din-medium";
   margin: 0;
 }
 
@@ -166,22 +142,19 @@ html, body {
   position: absolute;
   width: 100%;
   border-radius: 0.4rem 0.4rem 0 0;
-  margin-top: -0.34667rem;
+  margin-top: -0.3466666667rem;
   background-color: white;
-  padding: 0.53333rem 0.77333rem 0;
+  padding: 0.5333333333rem 0.7733333333rem 0;
   box-sizing: border-box;
 }
-
 .other-rank li {
   display: flex;
   align-items: center;
-  margin-bottom: 0.53333rem;
+  margin-bottom: 0.5333333333rem;
 }
-
 .other-rank li:last-child {
-  margin-bottom: 1.86667rem;
+  margin-bottom: 1.8666666667rem;
 }
-
 .other-rank li .index {
   display: inline-block;
   width: 0.4rem;
@@ -189,29 +162,25 @@ html, body {
   font-weight: bold;
   color: #333333;
 }
-
 .other-rank li .others-info {
   flex: 1;
   display: flex;
   align-items: center;
   margin-left: 0.4rem;
 }
-
 .other-rank li .others-info img {
-  width: 1.33333rem;
+  width: 1.3333333333rem;
-  height: 1.33333rem;
+  height: 1.3333333333rem;
   border-radius: 50%;
-  margin-right: 0.26667rem;
+  margin-right: 0.2666666667rem;
 }
-
 .other-rank li .others-info .others-nick {
-  font-size: 0.37333rem;
+  font-size: 0.3733333333rem;
   font-weight: bold;
   color: #333333;
 }
-
 .other-rank li .others-diamond-num {
-  font-size: 0.34667rem;
+  font-size: 0.3466666667rem;
   font-weight: bold;
   color: #ED7B50;
 }
@@ -224,46 +193,40 @@ html, body {
   width: 100%;
   height: 1.6rem;
   background-color: rgba(0, 0, 0, 0.8);
-  padding: 0 0.77333rem;
+  padding: 0 0.7733333333rem;
   box-sizing: border-box;
   display: flex;
   align-items: center;
 }
-
 .mine .mine-rank {
-  font-size: 0.34667rem;
+  font-size: 0.3466666667rem;
   font-weight: bold;
   color: white;
 }
-
 .mine .mine-info {
   flex: 1;
   display: flex;
   align-items: center;
 }
-
 .mine .mine-info img {
-  width: 1.33333rem;
+  width: 1.3333333333rem;
-  height: 1.33333rem;
+  height: 1.3333333333rem;
   border-radius: 50%;
   margin-left: 0.4rem;
-  margin-right: 0.26667rem;
+  margin-right: 0.2666666667rem;
 }
-
 .mine .mine-info .mine-nick {
-  font-size: 0.37333rem;
+  font-size: 0.3733333333rem;
   font-weight: bold;
   color: white;
 }
-
 .mine .mine-diamond-num {
-  font-size: 0.34667rem;
+  font-size: 0.3466666667rem;
   font-weight: bold;
   color: #ED7B50;
 }
 
 .no-in-app {
-  display: none;
   position: fixed;
   top: 0;
   left: 0;
@@ -272,3 +235,5 @@ html, body {
   z-index: 99999;
   background-color: white;
 }
+
+/*# sourceMappingURL=rank.css.map */

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

@@ -246,7 +246,7 @@ html,body{
 }
 
 .no-in-app{
-    display: none;
+    // display: none;
     position: fixed;
     top: 0;
     left: 0;

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

@@ -1,149 +1,125 @@
-@font-face {
+html,
-  font-family: 'pingfang-bold';
+body {
-  src: url("../../../common/fonts/PingFang Bold.ttf");
+  width: 100%;
-  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");
+  background: #233346;
 }
 
-@font-face {
+.img {
-  font-family: 'din-medium';
+  position: fixed;
-  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  left: 50%;
-  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");
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 6rem;
+  height: 4.1333333333rem;
+  background: url(../images/null.png) no-repeat;
+  background-size: 100% 100%;
 }
-
+.img p {
-@font-face {
-  font-family: 'pingfang-medium';
-  src: url("../../../common/fonts/PingFang-Medium.ttf");
-  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");
-}
-
-.clearfix:after {
-  display: block;
-  content: ' ';
-  clear: both;
-}
-
-.clearfix {
-  *zoom: 1;
-}
-
-html, body {
-  font-family: 'pingfang-bold';
-  background-color: #50BEF8;
-}
-
-ul.record-list {
-  height: 100vh;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding-top: 0.69333rem;
-  box-sizing: border-box;
-}
-
-ul.record-list li.record-item {
-  overflow: hidden;
-  width: 10rem;
-  height: 5.6rem;
-  background: url("../images/record/record-bg.png") no-repeat 0 0/100% 100%;
-  margin-bottom: 0.4rem;
-}
-
-ul.record-list li.record-item .time {
-  font-family: 'pingfang-medium';
-  font-size: 0.34667rem;
-  color: white;
   text-align: center;
-  margin-top: 0.58667rem;
+  width: 1.3333333333%rem;
-  margin-bottom: 0.21333rem;
+  position: absolute;
+  bottom: -1rem;
+  left: 50%;
+  transform: translate(-50%);
+  color: #fff;
+  font-size: 0.2666666667rem;
 }
 
-ul.record-list li.record-item .award {
+.record-list {
+  width: 9.2rem;
+  margin: 0.4rem auto;
+}
+.record-list li {
+  width: 100%;
+  height: 4.8rem;
+  background: linear-gradient(0deg, #46BBC1 0%, #62DEE4 100%);
+  border-radius: 0.2666666667rem;
+}
+.record-list li h3 {
+  width: 100%;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  text-align: center;
+  color: #fff;
+}
+.record-list li .goldBox {
+  width: 1.3333333333%rem;
+  height: 0.5866666667rem;
+  line-height: 0.5866666667rem;
+  background: #1B9196;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  box-sizing: border-box;
-  width: 9.04rem;
+  padding: 0 0.2666666667rem;
-  height: 0.58667rem;
-  background-color: #1A8AE8;
-  margin: auto;
 }
-
+.record-list li .goldBox span {
-ul.record-list li.record-item .award .text {
+  color: #fff;
-  font-size: 0.37333rem;
+  font-size: 0.3733333333rem;
-  color: white;
-  font-weight: bold;
-  margin-left: 0.32rem;
 }
-
+.record-list li .goldBox .gold {
-ul.record-list li.record-item .award .diamond-num {
+  font-size: 0.3466666667rem;
-  font-family: 'din-medium';
-  font-size: 0.34667rem;
-  color: white;
-}
-
-ul.record-list li.record-item .award img.diamond-pic {
-  width: 0.48rem;
-  height: 0.37333rem;
-  margin: 0 0.34667rem 0 0.10667rem;
-}
-
-ul.record-list li.record-item ul.award-animal {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 0.66667rem 0 0.8rem;
-}
-
-ul.record-list li.record-item ul.award-animal li.animal-item {
-  width: 25%;
-  margin: 0.26667rem 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-ul.record-list li.record-item ul.award-animal li.animal-item.active {
-  margin: 0.13333rem 0;
-}
-
-ul.record-list li.record-item ul.award-animal li.animal-item.active div {
-  width: 1.06667rem;
-  height: 1.06667rem;
-  background: url("../images/little-bubble-active.png") no-repeat 0 0/100% 100%;
-}
-
-ul.record-list li.record-item ul.award-animal li.animal-item.active span {
   color: #FEEF60;
 }
-
+.record-list li .marine_organism {
-ul.record-list li.record-item ul.award-animal li.animal-item div {
+  width: 7.4666666667rem;
-  width: 0.8rem;
+  height: 2.1333333333rem;
-  height: 0.8rem;
+  margin: 0 auto;
-  background: url("../images/little-bubble.png") no-repeat 0 0/100% 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
-
+.record-list li .marine_organism span {
-ul.record-list li.record-item ul.award-animal li.animal-item div img {
+  width: 1.6rem;
-  width: 100%;
+  height: 1.6rem;
-}
-
-ul.record-list li.record-item ul.award-animal li.animal-item span {
-  font-size: 0.26667rem;
-  font-weight: bold;
-  color: white;
-  margin-left: 0.13333rem;
-}
-
-ul.record-list li.record-item .tip {
-  font-family: 'pingfang-medium';
-  font-size: 0.26667rem;
-  color: white;
-  text-align: center;
-  margin-top: 0.26667rem;
-}
-
-ul.record-list .no-record {
   position: relative;
-  top: 50%;
+  display: block;
-  transform: translateY(-50%);
-  text-align: center;
-  color: white;
-  font-size: 0.42667rem;
-  font-weight: bold;
 }
+.record-list li .marine_organism span img {
+  position: absolute;
+  left: 50%;
+  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: #FFFFFF;
+  -webkit-text-stroke: 0.0266666667rem #FF5C7E;
+  text-stroke: 0.0266666667rem #FF5C7E;
+  font-weight: bold;
+  font-size: 0.32rem;
+}
+.record-list li p {
+  color: #fff;
+  width: 100%;
+  text-align: center;
+  margin-top: 0.9rem;
+  display: none;
+}
+
+/*# sourceMappingURL=record.css.map */

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

@@ -2,143 +2,137 @@
     @return $px / $rem+rem;
 }
 
-@font-face{
+html,
-    font-family: 'pingfang-bold';
+body {
-    src: url('../../../common/fonts/PingFang\ Bold.ttf');
+    width: 100%;
-    src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
+    background: #233346;
-        url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
-        url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
 }
+.img{
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    width: px2rem(450, );
+    height: px2rem(310, );
+    background: url(../images/null.png) no-repeat;
+    background-size: 100% 100%;
+    p{
+        text-align: center;
+        width: px2rem(100%, );
+        position: absolute;
+        bottom: -1rem;
+        left: 50%;
+        transform: translate(-50%);
+        color: #fff;
+        font-size: px2rem(20, );
+    }
+}
+.record-list {
+    width: px2rem(690, );
+    margin: px2rem(30, ) auto;
 
-@font-face{
+    li {
-    font-family: 'din-medium';
+        width: 100%;
-    src: url('../../../common/fonts/DINCond-Medium.ttf');
+        height: px2rem(360, );
-    src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
+        background: linear-gradient(0deg, #46BBC1 0%, #62DEE4 100%);
-        url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
+        border-radius: px2rem(20, );
-        url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
+        h3 {
-}
+            width: 100%;
-
+            height: 0.7rem;
-@font-face{
+            line-height: 0.7rem;
-    font-family: 'pingfang-medium';
-    src: url('../../../common/fonts/PingFang-Medium.ttf');
-    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');
-}
-
-.clearfix:after{
-    display:block;
-    content:' ';
-    clear:both;
-}
-.clearfix{
-    *zoom:1;//兼容到ie6
-}
-
-html,body{
-    font-family: 'pingfang-bold';
-    background-color: #50BEF8;
-}
-
-ul.record-list{
-    height: 100vh;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    padding-top: px2rem(52);
-    box-sizing: border-box;
-    li.record-item{
-        overflow: hidden;
-        width: px2rem(750);
-        height: px2rem(420);
-        background: url('../images/record/record-bg.png') no-repeat 0 0/100% 100%;
-        margin-bottom: px2rem(30);
-        .time{
-            font-family: 'pingfang-medium';
-            font-size: px2rem(26);
-            color: white;
             text-align: center;
-            margin-top: px2rem(44);
+            color: #fff;
-            margin-bottom: px2rem(16);
+
         }
-        .award{
+
+        .goldBox {
+            width: px2rem(100%, );
+            height: px2rem(44, );
+            line-height: px2rem(44, );
+            background: #1B9196;
             display: flex;
             justify-content: space-between;
-            align-items: center;
+            box-sizing: border-box;
-            width: px2rem(678);
+            padding: 0 px2rem(20, );
-            height: px2rem(44);
+
-            background-color: #1A8AE8;
+            span {
-            margin: auto;
+                color: #fff;
-            .text{
+                font-size: px2rem(28, );
-                font-size: px2rem(28);
-                color: white;
-                font-weight: bold;
-                margin-left: px2rem(24);
             }
-            .diamond-num{
+
-                font-family: 'din-medium';
+            .gold {
-                font-size: px2rem(26);
+                font-size: px2rem(26, );
-                color: white;
+                color: #FEEF60;
-            }
-            img.diamond-pic{
-                width: px2rem(36);
-                height: px2rem(28);
-                margin: 0 px2rem(26) 0 px2rem(8);
             }
         }
-        ul.award-animal{
+
+        .marine_organism {
+            width: px2rem(560, );
+            height: px2rem(160, );
+            margin: 0 auto;
             display: flex;
+            justify-content: space-between;
             flex-wrap: wrap;
-            padding: 0 px2rem(50) 0 px2rem(60);
+
-            // margin-left: px2rem(60);
+            span {
-            li.animal-item{
+                width: px2rem(120, );
-                // float: left;
+                height: px2rem(120, );
-                width: 25%;
+                position: relative;
-                margin: px2rem(20) 0;
+                display: block;
-                display: flex;
+
-                justify-content: center;
+                img {
-                align-items: center;
+                    position: absolute;
-                &.active{
+                    left: 50%;
-                    margin: px2rem(10) 0;
+                    top: 50%;
-                    div{
+                    transform: translate(-50%, -50%);
-                        width: px2rem(80);
+                    width: px2rem(54, );
-                        height: px2rem(80);
+                    height: px2rem(47, );
-                        background: url('../images/little-bubble-active.png') no-repeat 0 0/100% 100%;
+                    display: block;
-                    }
-                    span{
-                        color: #FEEF60;
-                    }
                 }
-                div{
+
-                    width: px2rem(60);
+                b {
-                    height: px2rem(60);
+                    position: absolute;
-                    background: url('../images/little-bubble.png') no-repeat 0 0/100% 100%;
+                    right: -0.1rem;
-                    img{
+                    top: 0.3rem;
-                        width: 100%;
+                    color: #FFFFFF;
-                    }
+                    font-size: px2rem(20, );
                 }
-                span{
+            }
-                    font-size: px2rem(20);
+
+            .active {
+                width: px2rem(120, );
+                height: px2rem(120, );
+                position: relative;
+
+                img {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    width: px2rem(72, );
+                    height: px2rem(62, );
+                    display: block;
+                }
+
+                b {
+                    position: absolute;
+                    right: -0.1rem;
+                    top: 0.3rem;
+                    color: #FFFFFF;
+                    -webkit-text-stroke: px2rem(2, ) #FF5C7E;
+                    text-stroke: px2rem(2, ) #FF5C7E;
                     font-weight: bold;
-                    color: white;
+                    font-size: px2rem(24, );
-                    margin-left: px2rem(10);
                 }
             }
         }
-        .tip{
+
-            font-family: 'pingfang-medium';
+        p {
-            font-size: px2rem(20);
+            color: #fff;
-            color: white;
+            width: 100%;
             text-align: center;
-            margin-top: px2rem(20);
+            margin-top: 0.9rem;
+            display: none;
         }
     }
-    .no-record{
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-        text-align: center;
-        color: white;
-        font-size: px2rem(32);
-        font-weight: bold;
-    }
 }

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

@@ -1,85 +1,173 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>深海奇缘</title>
+    <title>奇遇森林</title>
 
     <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/index.css?v=3.0">
 </head>
 
 <body>
     <div class="wrap no-in-app">
+        <!-- <div class="wrap "> -->
+        <div class="banner"><img src="./images/banner.png" alt=""></div>
         <div class="rule"><img src="./images/rule.png" alt=""></div>
         <div class="record"><img src="./images/record.png" alt=""></div>
-        <div class="rank"><img src="./images/rank.png" alt=""></div>
+
+        <!-- 特权商城 -->
+        <!-- <div class="mall">
+            <img src="./images/mall.png" alt="">
+        </div> -->
+        <!-- 游戏区域 -->
+        <div class="game-area">
+            <!-- 选择时间 -->
+            <div class="select-time">
+                <div class="count-down">倒計時：<span class="count-down-num"></span><span>S</span></div>
+                <!-- <div class="current-tip">玩法：选择碎片数量→选择食材</div> -->
+
+                <div class="btn-wrap">
+                    <div class="active">100金幣</div>
+                    <div>1000金幣</div>
+                    <div>10000金幣</div>
+                </div>
+                <ul>
+
+                </ul>
+
+                <div class="shelf"><img src="./images/shelf.png" alt=""></div>
+                <div class="shelf"><img src="./images/shelf.png" alt=""></div>
+            </div>
+            <!-- 等待结果 -->
+            <div class="wait-time">
+                <div class="count-down">開獎中：<span class="count-down-num"></span><span>S</span></div>
+                <!-- <div class="current-tip">等待結果</div> -->
+            </div>
+            <!-- 开奖展示动画时间 -->
+            <div class="draw-time">
+                <div class="count-down">下一輪：<span class="count-down-num"></span><span>S</span></div>
+                <div class="current-tip">本輪結果：<span class="current-result"></span></div>
+                <!-- 中奖物品展示 -->
+                <div class="draw-pic">
+                    <img src="" alt="">
+                </div>
+                <!-- 用户本轮中奖情况 -->
+                <div class="award-info">
+                    <!-- <div class="desc"></div> -->
+                    <div class="award-wrap"></div>
+                </div>
+                <!-- 本轮前3名 -->
+                <div class="top-three">
+                    <div class="top-three-title">
+                        <span class="line"></span>
+                        &nbsp;&nbsp;<p class="topthree-desc"></p>&nbsp;&nbsp;
+                        <span class="line"></span>
+                    </div>
+                    <div class="top-three-list">
+                        <p><img src="" alt=""></p>
+                        <p><img src="" alt=""></p>
+                        <p><img src="" alt=""></p>
+                    </div>
+                    <div class="top_three">
+                        <span class="text">本輪前三名</span>
+                        <!-- <img src="./images/close.png" alt=""> -->
+                        <span class="img img1">虛位以待</span>
+                        <span class="img img2">虛位以待</span>
+                        <span class="img img3">虛位以待</span>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <!-- 往轮结果 -->
         <div class="previous-result">
-            <span>往轮结果</span>
+            <span>往輪結果</span>
             <div class="result-list">
                 <p><img src="" alt=""></p>
                 <p><img src="" alt=""></p>
                 <p><img src="" alt=""></p>
                 <p><img src="" alt=""></p>
                 <p><img src="" alt=""></p>
+                <p><img src="" alt=""></p>
+                <p><img src="" alt=""></p>
+                <p><img src="" alt=""></p>
+                <p><img src="" alt=""></p>
+                <p><img src="" alt=""></p>
+                <p><img src="" alt=""></p>
             </div>
         </div>
 
-        <!-- 特权商城 -->
+        <!-- 个人信息 -->
-        <div class="mall">
-            <img src="./images/mall.png" alt="">
-        </div>
-        <!-- 游戏区域 -->
-        <div class="game-area">
-            <!-- 选择时间 -->
-            <div class="select-time">
-                <div class="count-down">请选择&nbsp;<span class="count-down-num">30</span>S</div>
-                
-                
-                <div class="btn-wrap">
-                    <div><span>1</span> <img src="./images/fragment.png" alt=""></div>
-                    <div><span>10</span> <img src="./images/fragment.png" alt=""></div>
-                    <div><span>100</span> <img src="./images/fragment.png" alt=""></div>
-                </div>
-                <ul>
-                    
-                </ul>
-            </div>
-            <!-- 等待结果 -->
-            <div class="wait-time">
-                <div class="count-down">请等待&nbsp;<span class="count-down-num">5</span>S</div>
-            </div>
-            <!-- 开奖展示动画时间 -->
-            <div class="draw-time">
-                <div class="count-down">下一轮&nbsp;<span class="count-down-num">3</span>S</div>
-                <div class="draw-pic">
-                    <img src="" alt="">
-                </div>
-                <!-- 本轮前3名 -->
-                <div class="top-three">
-                    <span></span>
-                    <div class="top-three-list">
-                    </div>
-                </div>
-            </div>
-        </div>
-
         <div class="info-bottom">
-            <div class="fragment">0</div>
+            <div class="avatar"><img src="" alt=""></div>
-            <div class="avatar"><img src="./images/logo.png" alt=""></div>
+            <div class="f-wrap">
-            <div class="award">0</div>
+                <div class="fragment">用户昵称</div>
+                <div class="award">今日獎勵：<span>0</span></div>
+            </div>
+            <div class="activeBalance">余額：<span></span>金幣 <b>儲值></b></div>
+            <!-- <div class="add"><img src="./images/add.png" alt=""></div> -->
+            
         </div>
+        <!-- 今日排名 -->
+        <div class="rank"><img src="./images/rank.png" alt=""></div>
         <!-- 规则弹窗 -->
         <div class="shade-mask">
             <div class="shade-content">
-                <p>1.用户购买限定头饰即可获赠送特权碎片，参与游戏活动</p>
+                <main>
-                <p>2.用户每次至少选择1种海洋生物，可多次叠加选择，中奖后可以获得{中奖海洋生物选择总次数*中奖海洋生物对应倍数*10}的钻石奖励</p>
+                    <h3>遊戲規則</h3>
-                <p>3.该活动赠送给您的特权碎片为参与该活动的虚拟道具，不具任何价值也不能转赠其他用户</p>
+                    <div>
-                <p>4.活动结束将关闭页面，剩余碎片将会清空，请留意活动关闭时间</p>
+                        <p>1.每次至少選擇1種森林動物，可多次疊加選擇，中獎後可以獲得對應金幣獎勵（中獎森林動物選中數*中獎森林動物對應倍數）</p>
-                <p>5.本活动与 Apple Inc. 无关，最终解释权归平台所有</p>
+                        <p>2.活動結束將關閉頁面，請留意活動關閉時間。</p>
+                        <p>3.本活動與Apple Inc.無關，最終解釋權歸平臺所有。</p>
+                    </div>
+                </main>
+                <img class="shade-content-close" src="./images/close.png" alt="">
+            </div>
+        </div>
+
+        <!-- 今日排名弹窗 -->
+        <div class="shade-mask-rank">
+            <div class="shade-content-rank">
+                <div class="rank-top">
+
+                    <div class="tab-wrap">
+                        <span class="diamond-rank active">金幣榜</span>
+                        <span class="num-rank">今日歐皇榜</span>
+                    </div>
+
+                    <div class="topthree-wrap">
+
+                    </div>
+                </div>
+
+                <ul class="other-rank">
+
+                </ul>
+
+                <div class="mine">
+                    <span class="mine-rank"></span>
+                    <div class="mine-info">
+                        <img src="" alt="">
+                        <span class="mine-nick"></span>
+                    </div>
+                    <span class="mine-diamond-num"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 碎片不足提示弹窗 -->
+        <div class="shade-mask-fragmentNum">
+            <div class="shade-content-fragmentNum">
+                <div class="fragmentNum-title">金幣不足</div>
+                <img src="./images/mall/no-money.png" alt="">
+                <p>當前金幣不足</p>
+                <div class="fragmentNum-btn-wrap">
+                    <div class="cancel-btn">取消</div>
+                    <div class="confirm-btn">獲取金幣</div>
+                </div>
             </div>
         </div>
     </div>
@@ -90,7 +178,7 @@
     <script src="../../common/js/layer.js"></script>
     <script src="../../common/js/vconsole.min.js"></script>
     <script src="../../common/js/svga.min.js"></script>
-    <script src="./js/index.js"></script>
+    <script src="./js/index.js?v=1.111"></script>
 </body>
 
 </html>

view/peko/activity/act-ocean/js/mall.js

@@ -11,7 +11,7 @@ const showLoading = () => {
     layer.open({
         type: 2,
         shadeClose: false,
-        content: '加載中...',
+        content: '加载中...',
         success(e) {
             layerIndex = $(e).attr('index')
         }
@@ -49,7 +49,7 @@ const getUserInfo = (param) => {
             }
         },
         error(err){
-            toastMsg('網絡錯誤')
+            toastMsg('网络错误')
         }
     })
 }
@@ -67,7 +67,7 @@ const getListPack = () => {
             }
         },
         error(err){
-            toastMsg('網絡錯誤')
+            toastMsg('网络错误')
         }
     })
 }
@@ -219,7 +219,7 @@ $(function(){
                     lock = false
                 },
                 error(err){
-                    toastMsg('網絡錯誤')
+                    toastMsg('网络错误')
                 }
             })
         }

view/peko/activity/act-ocean/js/rank.js

@@ -77,6 +77,9 @@ const getListRank = (type, page) => {
                         canRequsetNextPageD = false
                     }
                     rankListD.push(...res.data.rankList)
+                    // 底部个人信息只渲染一次 x
+                    // if(pageD === 1){
+                    // }
                     myInfoD = res.data.myRankInfo
                     renderMyInfo()
                     renderRankList()
@@ -91,11 +94,16 @@ const getListRank = (type, page) => {
                         canRequsetNextPageN = false
                     }
                     rankListN.push(...res.data.rankList)
+                    // 底部个人信息只渲染一次 x
+                    // if(pageN === 1){
+                    // }
                     myInfoN = res.data.myRankInfo
                     renderMyInfo()
+                    // renderMyInfo()
                     renderRankList()
                     isLockN = true
                 }
+                // isLock = true
             }else{
                 toastMsg(res.message)
             }
@@ -121,6 +129,9 @@ const renderMyInfo = () => {
         }
         $('.mine-info').find('img').attr('src', myInfoD.avatar)
         $('.mine-info').find('.mine-nick').html(myInfoD.nick)
+        // if(myInfoD.num.toString().length >= 5) {
+        //     myInfoD.num = (myInfoD.num/10000).toFixed(2) + 'w'
+        // }
         let tostr = myInfoD.num.toString()
         let num
         if(tostr.length >= 5) {
@@ -141,7 +152,7 @@ const renderMyInfo = () => {
         }
         $('.mine-info').find('img').attr('src', myInfoN.avatar)
         $('.mine-info').find('.mine-nick').html(myInfoN.nick)
-        $('.mine-diamond-num').html('猜对' + myInfoN.num + '次')
+        $('.mine-diamond-num').html('猜對' + myInfoN.num + '次')
     }
 }
 
@@ -155,7 +166,7 @@ const renderRankList = () => {
         if(rankListD.length < 3){
             let len = 3 - rankListD.length
             let arr = new Array(len).fill({
-                nick: '虚位以待',
+                nick: '虛位以待',
                 avatar: './images/default.png',
                 num: ''
             })
@@ -217,7 +228,7 @@ const renderRankList = () => {
         if(rankListN.length < 3){
             let len = 3 - rankListN.length
             let arr = new Array(len).fill({
-                nick: '虚位以待',
+                nick: '虛位以待',
                 avatar: './images/default.png'
             })
             topThreeArr.push(...arr)
@@ -226,7 +237,7 @@ const renderRankList = () => {
         topThreeArr.map((item) => {
             let num = ''
             if(item.erbanNo){
-                num = '猜对'+item.num + '次'
+                num = '猜對'+item.num + '次'
             }
             topThreeStr += `
                 <div class="info-wrap">
@@ -248,7 +259,7 @@ const renderRankList = () => {
         othersArr.map((item, index) => {
             let num
             if(item.erbanNo){
-                num = '猜对'+item.num + '次'
+                num = '猜對'+item.num + '次'
             }
             others += `
                 <li>
@@ -284,6 +295,7 @@ $(function(){
         if(type === 1){
             renderRankList()
             renderMyInfo()
+            // getListRank(type, pageD)
         }else{
             if(clickTabCanNetworkN){
                 getListRank(type, pageN)
@@ -301,39 +313,42 @@ $(function(){
         let scrollTop = $(this).scrollTop();//这是已经卷进去滚动条的的高度
         let scrollHeight = $('.other-rank')[0].scrollHeight;//这个是other-rank包含滚动条的总高度
         let ulHeight = $(this).innerHeight();//这个是other-rank的高度
+        console.log(ulHeight,scrollTop, scrollHeight);
 
         // 安卓可以只触发一次(安卓机型太多，不确定是否所有安卓都能触发一次)，ios会触发多次，ios要加锁, pc端触发不了
 
 
         //这样距离到底还有一段距离就请求，但是会导致重复请求，所以要加锁限制
         if(scrollTop + ulHeight + 100 >= scrollHeight){
+            console.log('到底了');
             if(type === 1){
                 if(isLockD){
                     isLockD = false
                     pageD++
                     if(pageSize * pageD > 100){
-                        toastMsg('没有更多数据啦~')
+                        toastMsg('沒有更多數據啦~')
                     }else{
                         if(canRequsetNextPageD){
                             getListRank(type,pageD);
                         }else{
-                            toastMsg('没有更多数据啦~')
+                            toastMsg('沒有更多數據啦~')
                         }
                     }
                 }else{
                     if(scrollTop + ulHeight >= scrollHeight){
                         if(pageSize * pageD > 100){
-                            toastMsg('没有更多数据啦~')
+                            toastMsg('沒有更多數據啦~')
                         }
                     }
                 }
 
             }else{
+                // getListRank(type,++pageN);
                 if(isLockN){
                     isLockN = false
                     pageN++
                     if(pageSize * pageN > 100){
-                        toastMsg('没有更多数据啦~')
+                        toastMsg('沒有更多數據啦~')
                     }else{
                         if(canRequsetNextPageN){
                             getListRank(type,pageN);
@@ -344,7 +359,7 @@ $(function(){
                 }else{
                     if(scrollTop + ulHeight >= scrollHeight){
                         if(pageSize * pageN > 100){
-                            toastMsg('没有更多数据啦~')
+                            toastMsg('沒有更多數據啦~')
                         }
                     }
                 }

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

@@ -8,8 +8,8 @@ const showLoading = () => {
     layer.open({
         type: 2,
         shadeClose: false,
-        content: '加載中...',
+        content: '加载中...',
-        success(e) {
+        success (e) {
             layerIndex = $(e).attr('index')
         }
     })
@@ -40,94 +40,78 @@ const getUserRecord = () => {
             page,
             pageSize
         },
-        success(res){
+        success (res) {
-            if(res.code === 200){
+            if (res.code === 200) {
-                if(res.data.length === pageSize){
+                if (res.data.length === pageSize) {
                     // 能够继续请求下一页
                     canNext = true
-                }else{
+                } else {
                     canNext = false
                 }
                 recordList.push(...res.data)
-                renderRecord()
+                renderRecord(res)
                 isLock = true
-            }else{
+            } else {
                 toastMsg(res.message)
             }
         },
-        error(err){
+        error (err) {
-            toastMsg('網絡錯誤')
+            toastMsg('网络错误')
         }
     })
 }
 // 渲染游戏记录
-const renderRecord = () => {
+const renderRecord = (res) => {
-    if(recordList.length === 0){
+    if (recordList.length === 0) {
-        $('.record-list').html('<li class="no-record">暂无游戏记录</li>')
+        $('.record-list').hide();
-    }else{
+        $('.img').show();
-        let str = ''
+    } else {
-        recordList.map((item, index) => {
+        $('.record-list').show();
-            let drawId = item.drawId
+        $('.img').hide();
-            // 渲染li里面的ul
+        var str = '';
-            let str1 = ''
+        let str2 = '';
-            item.results.map((item1, index) => {
+        let drawId = [];;
-                
+        var results = [];
-                str1 += `
+        console.log(res.data)
-                    <li class="animal-item">
+        res.data.forEach((res, index) => {
-                        <div><img src="${item1.itemUrl}" alt=""></div>
+            drawId.push(res.drawId);
-                        <span>+${item1.costPiece}</span>
-                    </li>
-                `
-    
-                if(item1.itemId === drawId){
-                    $('.none').html(str1)
-                    $('.none').find('li').eq(index).addClass('active')
-                    str1 = $('.none').html()
-                }
-            })
-    
-            // 渲染li
-            let text = ''
-            if(item.drawStatus === 1){
-                text = '厉害~猜对了(*^▽^*)'
-            }else{
-                text = '哎呀~猜错了o(╥﹏╥)o'
-            }
             str += `
-                <li class="record-item">
+            <li style="margin-bottom: 0.8rem;">
-                    <div class="time">${dateFormat(item.drawTime, "yyyy-MM-dd hh:mm:ss")}</div>
+                <h3>${dateFormat(res.drawTime, 'yy-MM-dd hh:mm:ss')}</h3>
-                    <div class="award">
+                <div class="goldBox">
-                        <span class="text">游戏奖励：</span>
+                    <span>遊戲獎勵：</span>
-                        <p>
+                    <span class="gold">${res.reward}金幣</span>
-                            <span class="diamond-num">${item.reward}</span>
+                </div>
-                            <img src="./images/record/diamond.png" alt="" class="diamond-pic">
+                <div class="marine_organism"></div>
-                        </p>
+                <p style="display: ${res.drawStatus == 1 ? 'none' : 'block'};" class="fasle">哎呀~猜錯了o(╥﹏╥)o</p>
-                    </div>
+                <p style="display: ${res.drawStatus == 1 ? 'block' : 'none'};" class="true">厲害~猜對了୧(๑•̀◡•́๑)૭</p>
-                    <ul class="award-animal clearfix">
+            </li>
-                        ${str1}
+        `
-                    </ul>
+            results.push(res.results);
-                    <div class="tip">${text}</div>
+        });
-                <li>
+        $('.record-list').append(str)
-            `
+        results.forEach((res, index) => {
-        })
+            res.forEach(val => {
-        $('.record-list').html(str)
+                $('.record-list li').eq(index).children('.marine_organism').append(`<span class='${drawId[index] == val.itemId ? 'active' : ''}'><img src="${val.itemUrl}" alt=""><b>+${val.costPiece}</b></span>`)
+            })
+        });
     }
-    
+
 }
-$(function(){
+$(function () {
     getInfoFromClient()
-    setTimeout(function(){
+    setTimeout(function () {
         getUserRecord()
     }, 50)
     // 监听滚动
-    $('ul').scroll(function(){
+    $('ul').scroll(function () {
         let scrollTop = $(this).scrollTop()
         let scrollHeight = $('ul')[0].scrollHeight
         let ulHeight = $(this).innerHeight()
-        if(scrollTop + ulHeight + 100 >= scrollHeight){
+        if (scrollTop + ulHeight + 100 >= scrollHeight) {
-            if(isLock){
+            if (isLock) {
                 // 请求下一页
-                if(canNext){
+                if (canNext) {
                     getUserRecord(page++)
                     isLock = false
                 }

view/peko/activity/act-ocean/mall.html

@@ -18,7 +18,7 @@
             <div class="headwear-info">
                 <p class="headwear-name"></p>
                 <p class="headwear-price"><span></span>钻石/天</p>
-                <p class="headwear-award">赠送<span></span>个碎片</p>
+                <p class="headwear-award">赠送<span></span>张门票</p>
             </div>
             <div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
         </li>
@@ -27,7 +27,7 @@
             <div class="headwear-info">
                 <p class="headwear-name"></p>
                 <p class="headwear-price"><span></span>钻石/天</p>
-                <p class="headwear-award">赠送<span></span>个碎片</p>
+                <p class="headwear-award">赠送<span></span>张门票</p>
             </div>
             <div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
         </li>
@@ -36,7 +36,7 @@
             <div class="headwear-info">
                 <p class="headwear-name"></p>
                 <p class="headwear-price"><span></span>钻石/天</p>
-                <p class="headwear-award">赠送<span></span>个碎片</p>
+                <p class="headwear-award">赠送<span></span>张门票</p>
             </div>
             <div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
         </li>
@@ -45,20 +45,22 @@
             <div class="headwear-info">
                 <p class="headwear-name"></p>
                 <p class="headwear-price"><span></span>钻石/天</p>
-                <p class="headwear-award">赠送<span></span>个碎片</p>
+                <p class="headwear-award">赠送<span></span>张门票</p>
             </div>
             <div class="buy-btn"><img src="./images/mall/buy.png" alt=""></div>
         </li>
     </ul>
+
     <div class="bottom">
         <div class="avatar"><img src="./images/logo.png" alt=""></div>
         <div class="info-wrap">
-            <p class="nick">你的昵称</p>
+            <div class="fragment-num">我的碎片：<span>0</span></div>
-            <p class="fragment-num">我的66碎片：<span>0</span></p>
+            <div class="diamond-num">我的钻石：<span>0</span></div>
-            <p class="diamond-num">我的钻石数量：<span>0</span></p>
         </div>
+        <!-- <div class="add"><img src="./images/add.png" alt=""></div> -->
         <div class="recharge"><img src="./images/mall/recharge.png" alt=""></div>
     </div>
+
     <!-- 购买弹窗 -->
     <div class="shade-mask-buy">
         <div class="shade-content-buy">

view/peko/activity/act-ocean/rank.html

@@ -14,7 +14,7 @@
     <div class="rank-top">
 
       <div class="tab-wrap">
-        <span class="diamond-rank active">钻石榜</span>
+        <span class="diamond-rank active">金幣榜</span>
         <span class="num-rank">欧皇榜</span>
       </div>
 

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

@@ -1,25 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>游戏记录</title>
+    <title>遊戲記錄</title>
 
     <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./css/record.css">
+    <link rel="stylesheet" href="./css/record.css?v=1.0">
 </head>
 
 <body>
-  <ul class="record-list">
+    <ul class="record-list">
-  </ul>  
+        <!-- <li>
-  <ul class="none" style="display: none;"></ul>
+        <h3>2020-12-21 12:22</h3>
+        <div class="goldBox">
+            <span>游戏奖励：</span>
+            <span class="gold">0金币</span>
+        </div>
+        <div class="marine_organism">
+            <span>
+                <img src="./images/add.png" alt="">
+                <b>+10</b>
+            </span>
+        </div>
+        <p class="fasle">哎呀~猜錯了o(╥﹏╥)o</p>
+        <p class="true">厲害~猜對了୧(๑•̀◡•́๑)૭</p>
+    </li> -->
+    </ul>
+    <div class="img">
+        <p>暫無遊戲記錄</p>
+    </div>
+    <ul class="none" style="display: none;"></ul>
     <script src="../../common/js/flexible.js"></script>
     <script src="../../common/js/jquery-3.2.1.min.js"></script>
     <script src="../../common/js/common2.js"></script>
     <script src="../../common/js/layer.js"></script>
     <script src="../../common/js/vconsole.min.js"></script>
-    <script src="./js/record.js"></script>
+    <script src="./js/record.js?v=1.2"></script>
 </body>
 
 </html>

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

@@ -0,0 +1,437 @@
+@font-face {
+  font-family: 'pingfang-bold';
+  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");
+}
+
+@font-face {
+  font-family: 'din-medium';
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  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");
+}
+
+html, body {
+  font-family: 'din-medium';
+  overflow-x: hidden;
+}
+
+.wrap {
+  width: 100%;
+  height: 100vh;
+  background: url("../images/index-bg.png") no-repeat center/cover;
+  position: relative;
+}
+
+.wrap .rule, .wrap .record, .wrap .rank {
+  position: fixed;
+  bottom: 12.8rem;
+  left: 0;
+  width: 1.6rem;
+  height: 0.53333rem;
+}
+
+.wrap .rule img, .wrap .record img, .wrap .rank img {
+  width: 100%;
+}
+
+.wrap .record {
+  bottom: 12.05333rem;
+}
+
+.wrap .rank {
+  bottom: 11.36rem;
+}
+
+.wrap .previous-result {
+  position: absolute;
+  bottom: 10.72rem;
+  left: 0.24rem;
+  font-family: 'pingfang-bold';
+  font-size: 0.4rem;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.wrap .previous-result span {
+  font-weight: bold;
+}
+
+.wrap .previous-result .result-list {
+  display: flex;
+}
+
+.wrap .previous-result .result-list p {
+  width: 0.53333rem;
+  height: 0.53333rem;
+  margin-left: 0.10667rem;
+  background: url("../images/little-bubble.png") 0 0/100% 100%;
+}
+
+.wrap .previous-result .result-list p:last-child {
+  background: url("../images/last-little-bubble.png") 0 0/100% 100%, url("../images/little-bubble.png") 0 0/100% 100%;
+}
+
+.wrap .previous-result .result-list p img {
+  width: 100%;
+}
+
+.wrap .mall {
+  position: absolute;
+  bottom: 10.50667rem;
+  right: 0.48rem;
+  width: 2.13333rem;
+  height: 2rem;
+}
+
+.wrap .mall img {
+  width: 100%;
+}
+
+.wrap .game-area {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9;
+  width: 9.46667rem;
+  height: 10.32rem;
+  background: url("../images/game-area.png") no-repeat 0 0/100% 100%;
+}
+
+.wrap .game-area .select-time {
+  display: none;
+}
+
+.wrap .game-area .select-time .count-down {
+  font-family: 'pingfang-bold';
+  position: absolute;
+  top: -0.26667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 3.68rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  text-align: center;
+  background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
+  font-size: 0.48rem;
+  color: white;
+  font-weight: bold;
+}
+
+.wrap .game-area .select-time .count-down span {
+  font-weight: bold;
+  color: #FEEF60;
+}
+
+.wrap .game-area .select-time ul {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.8rem;
+  padding-bottom: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
+.wrap .game-area .select-time ul li {
+  position: relative;
+  width: 1.73333rem;
+  height: 2rem;
+  margin-top: 0.98667rem;
+  margin-right: 0.34667rem;
+  background: url("../images/bubble-bg.png") no-repeat 0 0/100% 100%;
+}
+
+.wrap .game-area .select-time ul li img {
+  width: 100%;
+}
+
+.wrap .game-area .select-time ul li .multiple {
+  position: absolute;
+  top: 0.13333rem;
+  left: 0.13333rem;
+  font-size: 0.32rem;
+  color: white;
+  text-shadow: 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50, 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50, 1px 1px 0px #ED7B50, -1px -1px 0px #ED7B50;
+}
+
+.wrap .game-area .select-time ul li .name {
+  position: absolute;
+  bottom: 0.13333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1.6rem;
+  text-align: center;
+  font-size: 0.32rem;
+  color: white;
+}
+
+.wrap .game-area .select-time ul li .bubble-2s {
+  display: none;
+  width: 1.22667rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.8rem;
+  left: -0.37333rem;
+  background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%;
+  transform: rotate(-15deg);
+  text-indent: 0.21333rem;
+}
+
+.wrap .game-area .select-time ul li .bubble-2s p {
+  font-size: 0.21333rem;
+  color: white;
+  font-weight: bold;
+  padding-top: 0.24rem;
+  text-align: center;
+  margin-left: -0.26667rem;
+}
+
+.wrap .game-area .select-time ul li .select-num {
+  position: absolute;
+  top: 0.26667rem;
+  right: 0.21333rem;
+  font-size: 0.32rem;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F, 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F, 1px 1px 0px #FF5C7F, -1px -1px 0px #FF5C7F;
+}
+
+.wrap .game-area .select-time .btn-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 8.26667rem;
+  height: 1.12rem;
+  margin: 0.21333rem auto 0;
+  margin-top: 1.06667rem;
+}
+
+.wrap .game-area .select-time .btn-wrap div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.45333rem;
+  height: 1.12rem;
+  background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%;
+  text-align: center;
+  line-height: 0.8rem;
+  font-size: 0.48rem;
+  color: #1C5484;
+}
+
+.wrap .game-area .select-time .btn-wrap div.active {
+  background-image: url("../images/fragment-btn-active.png");
+  color: #B33E17;
+}
+
+.wrap .game-area .select-time .btn-wrap div.active img, .wrap .game-area .select-time .btn-wrap div.active span {
+  margin-bottom: 0;
+}
+
+.wrap .game-area .select-time .btn-wrap div img {
+  width: 0.48rem;
+  height: 0.48rem;
+  margin-bottom: 0.21333rem;
+}
+
+.wrap .game-area .select-time .btn-wrap div span {
+  display: block;
+  margin-bottom: 0.21333rem;
+  font-weight: 600;
+  margin-right: 0.13333rem;
+}
+
+.wrap .game-area .wait-time {
+  display: none;
+  width: 9.06667rem;
+  height: 6.66667rem;
+  margin: auto;
+  margin-top: 1.06667rem;
+  position: relative;
+}
+
+.wrap .game-area .wait-time .count-down {
+  font-family: 'pingfang-bold';
+  position: absolute;
+  top: -1.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 3.68rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  text-align: center;
+  background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
+  font-size: 0.48rem;
+  color: white;
+  font-weight: bold;
+}
+
+.wrap .game-area .wait-time .count-down span {
+  font-weight: bold;
+  color: #FEEF60;
+}
+
+.wrap .game-area .draw-time {
+  display: none;
+  width: 9.06667rem;
+  height: 6.66667rem;
+  margin: auto;
+  margin-top: 1.06667rem;
+}
+
+.wrap .game-area .draw-time .count-down {
+  font-family: 'pingfang-bold';
+  position: absolute;
+  top: -0.26667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 3.68rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  text-align: center;
+  background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
+  font-size: 0.48rem;
+  color: white;
+  font-weight: bold;
+}
+
+.wrap .game-area .draw-time .count-down span {
+  font-weight: bold;
+  color: #FEEF60;
+}
+
+.wrap .game-area .draw-time .top-three {
+  position: absolute;
+  left: 0.4rem;
+  bottom: 2.4rem;
+  margin-left: 0.4rem;
+  display: flex;
+  align-items: center;
+}
+
+.wrap .game-area .draw-time .top-three.no-one {
+  margin-left: 0;
+  margin-bottom: 0.53333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.wrap .game-area .draw-time .top-three span {
+  font-family: 'pingfang-bold';
+  font-size: 0.4rem;
+  font-weight: bold;
+  color: white;
+}
+
+.wrap .game-area .draw-time .top-three .top-three-list {
+  display: flex;
+}
+
+.wrap .game-area .draw-time .top-three .top-three-list p {
+  width: 1.12rem;
+  height: 1.12rem;
+  margin-left: 0.32rem;
+  box-sizing: border-box;
+}
+
+.wrap .game-area .draw-time .top-three .top-three-list p img {
+  width: 100%;
+  border-radius: 50%;
+  border: 0.02667rem solid #FEEF60;
+  margin-right: 0.21333rem;
+}
+
+.wrap .game-area .draw-time .draw-pic {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.92rem;
+  z-index: 1;
+  width: 3.73333rem;
+  height: 3.73333rem;
+}
+
+.wrap .game-area .draw-time .draw-pic img {
+  width: 100%;
+  height: 100%;
+}
+
+.wrap .info-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 1.61333rem;
+  background: url("../images/index-bottom.png") no-repeat 0 0/100% 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.wrap .info-bottom .fragment, .wrap .info-bottom .award {
+  width: 3.06667rem;
+  height: 1.01333rem;
+  line-height: 0.88rem;
+  background: url("../images/fragment-mine.png") no-repeat 0 0/100% 100%;
+  font-size: 0.4rem;
+  color: white;
+  text-indent: 1.06667rem;
+}
+
+.wrap .info-bottom .award {
+  background-image: url("../images/award-today.png");
+}
+
+.wrap .info-bottom .avatar {
+  width: 1.86667rem;
+  height: 1.86667rem;
+  margin-bottom: 0.8rem;
+}
+
+.wrap .info-bottom .avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.wrap .shade-mask {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.wrap .shade-mask .shade-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 7.68rem;
+  height: 8.88rem;
+  background: url("../images/rule-bg.png") no-repeat 0 0/100% 100%;
+  padding: 2.13333rem 0.86667rem 0 0.53333rem;
+}
+
+.wrap .shade-mask .shade-content p {
+  font-size: 0.42667rem;
+  color: #ED7B50;
+  font-weight: bold;
+  margin-bottom: 0.53333rem;
+}
+
+.no-in-app {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+  background-color: white;
+}

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

@@ -0,0 +1,424 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+@font-face{
+    font-family: 'pingfang-bold';
+    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');
+}
+
+@font-face{
+    font-family: 'din-medium';
+    src: url('../../../common/fonts/DINCond-Medium.ttf');
+    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');
+}
+
+html, body{
+    font-family: 'din-medium';
+    // 海浪svga过长
+    overflow-x: hidden;
+}
+
+.wrap{
+    width: 100%;
+    height: 100vh;
+    background: url('../images/index-bg.png') no-repeat center/cover;
+    position: relative;
+    .rule, .record, .rank{
+        position: fixed;
+        // top: px2rem(336);
+        bottom: px2rem(960);
+        left: 0;
+        width: px2rem(120);
+        height: px2rem(40);
+        img{
+            width: 100%;
+        }
+    }
+    .record{
+        // top: px2rem(390);
+        bottom: px2rem(904);
+    }
+    .rank{
+        // top: px2rem(440);
+        bottom: px2rem(852);
+    }
+    .previous-result{
+        position: absolute;
+        bottom: px2rem(804);
+        left: px2rem(18);
+        font-family: 'pingfang-bold';
+        font-size: px2rem(30);
+        color: white;
+        display: flex;
+        align-items: center;
+        span{
+            font-weight: bold;
+        }
+        .result-list{
+            display: flex;
+            p{
+                width: px2rem(40);
+                height: px2rem(40);
+                margin-left: px2rem(8);
+                background: url('../images/little-bubble.png') 0 0/100% 100%;
+                &:last-child{
+                    background: url('../images/last-little-bubble.png') 0 0/100% 100%,url('../images/little-bubble.png') 0 0/100% 100%;
+                }
+                img{
+                    width: 100%;
+                }
+            }
+        }
+    }
+    
+    .mall{
+        position: absolute;
+        // top: px2rem(400);
+        bottom: px2rem(788);
+        right: px2rem(36);
+        width: px2rem(160);
+        height: px2rem(150);
+        img{
+            width: 100%;
+        }
+    }
+    .game-area{
+        position: absolute;
+        // top: px2rem(560);
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9;
+        width: px2rem(710);
+        height: px2rem(774);
+        background: url('../images/game-area.png') no-repeat 0 0/100% 100%;
+        // 等待倒计时30s
+        .select-time{
+            display: none;
+            .count-down{
+                font-family: 'pingfang-bold';
+                position: absolute;
+                top: px2rem(-20);
+                left: 50%;
+                transform: translateX(-50%);
+                width: px2rem(276);
+                height: px2rem(76);
+                line-height: px2rem(76);
+                text-align: center;
+                background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
+                font-size: px2rem(36);
+                color: white;
+                font-weight: bold;
+                span{
+                    font-weight: bold;
+                    color: #FEEF60;
+                }
+            }
+            // 海鲜列表
+            ul{
+                display: flex;
+                flex-wrap: wrap;
+                // justify-content: space-between;
+                padding: px2rem(60);
+                padding-bottom: 0;
+                padding-right: 0;
+                padding-top: 0;
+                li{
+                    position: relative;
+                    width: px2rem(130);
+                    height: px2rem(150);
+                    margin-top: px2rem(74);
+                    margin-right: px2rem(26);
+                    background: url('../images/bubble-bg.png') no-repeat 0 0/100% 100%;
+                    img{
+                        width: 100%;
+                    }
+                    .multiple{
+                        position: absolute;
+                        top: px2rem(10);
+                        left: px2rem(10);
+                        font-size: px2rem(24);
+                        color: white;
+                        text-shadow: 1px 1px 0px#ED7B50,
+                        -1px -1px 0px#ED7B50,
+                        1px 1px 0px#ED7B50,
+                        -1px -1px 0px#ED7B50,
+                        1px 1px 0px#ED7B50,
+                        -1px -1px 0px#ED7B50;
+                    }
+                    .name{
+                        position: absolute;
+                        bottom: px2rem(10);
+                        left: 50%;
+                        transform: translateX(-50%);
+                        width: px2rem(120);
+                        text-align: center;
+                        font-size: px2rem(24);
+                        color: white;
+                    }
+                    .bubble-2s{
+                        display: none;
+                        width: px2rem(92);
+                        height: px2rem(56);
+                        position: absolute;
+                        top: px2rem(-60);
+                        left: px2rem(-28);
+                        background: url('../images/qipao-2s.png') no-repeat 0 0/100% 100%;
+                        transform: rotate(-15deg);
+                        text-indent: px2rem(16);
+                        p{
+                            font-size: px2rem(16);
+                            color: white;
+                            font-weight: bold;
+                            padding-top: px2rem(18);
+                            text-align: center;
+                            margin-left: px2rem(-20);
+                        }
+                    }
+                    .select-num{
+                        // display: none;
+                        position: absolute;
+                        top: px2rem(20);
+                        right: px2rem(16);
+                        // width: px2rem(40);
+                        // height: px2rem(20);
+                        // background-color: yellowgreen;
+                        font-size: px2rem(24);
+                        font-weight: bold;
+                        color: #fff;
+                        // text-shadow: 1px 1px #FF5C7F, -1px -1px #FF5C7F ;
+                        text-shadow: 1px 1px 0px#FF5C7F,
+                        -1px -1px 0px#FF5C7F,
+                        1px 1px 0px#FF5C7F,
+                        -1px -1px 0px#FF5C7F,
+                        1px 1px 0px#FF5C7F,
+                        -1px -1px 0px#FF5C7F;    
+                    }
+                }
+            }
+            // 碎片按钮
+            .btn-wrap{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: px2rem(620);
+                height: px2rem(84);
+                margin: px2rem(16) auto 0;
+                margin-top: px2rem(80);
+                div{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: px2rem(184);
+                    height: px2rem(84);
+                    background: url('../images/fragment-btn.png') no-repeat 0 0/100% 100%;
+                    text-align: center;
+                    line-height: px2rem(60);
+                    font-size: px2rem(36);
+                    color: #1C5484;
+                    &.active{
+                        background-image: url('../images/fragment-btn-active.png');
+                        color: #B33E17;
+                        img, span{
+                            margin-bottom: 0;
+                        }
+                    }
+                    img{
+                        width: px2rem(36);
+                        height: px2rem(36);
+                        margin-bottom: px2rem(16);
+                    }
+                    span{
+                        display: block;
+                        margin-bottom: px2rem(16);
+                        font-weight: 600;
+                        margin-right: px2rem(10);
+                    }
+                }
+            }
+        }
+        // 等待结果5s
+        .wait-time{
+            display: none;
+            width: px2rem(680);
+            height: px2rem(500);
+            margin: auto;
+            margin-top: px2rem(80);
+            position: relative;
+            .count-down{
+                font-family: 'pingfang-bold';
+                position: absolute;
+                top: px2rem(-100);
+                left: 50%;
+                transform: translateX(-50%);
+                width: px2rem(276);
+                height: px2rem(76);
+                line-height: px2rem(76);
+                text-align: center;
+                background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
+                font-size: px2rem(36);
+                color: white;
+                font-weight: bold;
+                span{
+                    font-weight: bold;
+                    color: #FEEF60;
+                }
+            }
+            
+        }
+        // 开奖时间
+        .draw-time{
+            display: none;
+            width: px2rem(680);
+            height: px2rem(500);
+            margin: auto;
+            margin-top: px2rem(80);
+            .count-down{
+                font-family: 'pingfang-bold';
+                position: absolute;
+                top: px2rem(-20);
+                left: 50%;
+                transform: translateX(-50%);
+                width: px2rem(276);
+                height: px2rem(76);
+                line-height: px2rem(76);
+                text-align: center;
+                background: url('../images/count-down.png') no-repeat 0 0/100% 100% ;
+                font-size: px2rem(36);
+                color: white;
+                font-weight: bold;
+                span{
+                    font-weight: bold;
+                    color: #FEEF60;
+                }
+            }
+            .top-three{
+                position: absolute;
+                left: px2rem(30);
+                bottom: px2rem(180);
+                margin-left: px2rem(30);
+                display: flex;
+                align-items: center;
+                &.no-one{
+                    margin-left: 0;
+                    margin-bottom: px2rem(40);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+                span{
+                    font-family: 'pingfang-bold';
+                    font-size: px2rem(30);
+                    font-weight: bold;
+                    color: white;
+                }
+                .top-three-list{
+                    display: flex;
+                    p{
+                        width: px2rem(84);
+                        height: px2rem(84);
+                        margin-left: px2rem(24);
+                        box-sizing: border-box;
+                        img{
+                            width: 100%;
+                            border-radius: 50%;
+                            border: px2rem(2) solid #FEEF60;
+                            margin-right: px2rem(16);
+                        }
+                    }
+                }
+            }
+            .draw-pic{
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: px2rem(144);
+                z-index: 1;
+                width: px2rem(280);
+                height: px2rem(280);
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+    // 底部信息
+    .info-bottom{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        z-index: 99;
+        width: 100%;
+        height: px2rem(121);
+        background: url('../images/index-bottom.png') no-repeat 0 0/100% 100%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        .fragment, .award{
+            width: px2rem(230);
+            height: px2rem(76);
+            line-height: px2rem(66);
+            background: url('../images/fragment-mine.png') no-repeat 0 0/100% 100%;
+            font-size: px2rem(30);
+            color: white;
+            text-indent: px2rem(80);
+        }
+        .award{
+            background-image: url('../images/award-today.png');
+        }
+        .avatar{
+            width: px2rem(140);
+            height: px2rem(140);
+            margin-bottom: px2rem(60);
+            img{
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+            }
+        }
+    }
+    // 规则弹窗
+    .shade-mask{
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba($color: #000000, $alpha: 0.4);
+        .shade-content{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: px2rem(576);
+            height: px2rem(666);
+            background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
+            padding: px2rem(160) px2rem(65) 0 px2rem(40);
+            p{
+                font-size: px2rem(32);
+                color: #ED7B50;
+                font-weight: bold;
+                margin-bottom: px2rem(40);
+            }
+        }
+    }
+}
+
+.no-in-app{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99999;
+    background-color: white;
+}

view/peko/activity/act-ocean1/css/mall.css

@@ -0,0 +1,315 @@
+@font-face {
+  font-family: 'pingfang-medium';
+  src: url("../../../common/fonts/PingFang-Medium.ttf");
+  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-face {
+  font-family: 'pingfang-bold';
+  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");
+}
+
+body {
+  font-family: 'pingfang-medium';
+  background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
+}
+
+.banner {
+  width: 10rem;
+  height: 6.66667rem;
+  background: url("../images/mall/banner.png") no-repeat 0 0/100% 100%;
+}
+
+.buy-area {
+  width: 9.46667rem;
+  height: 14.4rem;
+  margin: auto;
+  box-sizing: border-box;
+  padding: 1.06667rem 0.56rem 0 0.8rem;
+  background: url("../images/mall/buy-area.png") no-repeat 0 0/100% 100%;
+  margin-top: -0.88rem;
+}
+
+.buy-area.bg-long {
+  background-image: url("../images/mall/buy-area-long.png");
+}
+
+.buy-area li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.53333rem;
+}
+
+.buy-area li.li-bg-long {
+  margin-bottom: 1.2rem;
+}
+
+.buy-area li .headwear-pic {
+  width: 2.4rem;
+  height: 2.4rem;
+  background-color: #92CCFB;
+  border-radius: 0.4rem;
+  margin-right: 0.4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.buy-area li .headwear-pic img {
+  width: 2rem;
+  height: 2rem;
+}
+
+.buy-area li .headwear-info {
+  flex: 1;
+  height: 1.6rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: white;
+  font-size: 0.34667rem;
+}
+
+.buy-area li .headwear-info .headwear-name {
+  font-size: 0.48rem;
+  font-weight: bold;
+}
+
+.buy-area li .headwear-info .headwear-price {
+  margin-bottom: -0.16rem;
+}
+
+.buy-area li .headwear-info .headwear-award {
+  color: #FEEF60;
+}
+
+.buy-area li .buy-btn {
+  width: 1.78667rem;
+  height: 0.82667rem;
+}
+
+.buy-area li .buy-btn img {
+  width: 100%;
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 1.62667rem;
+  background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
+  display: flex;
+  align-items: center;
+}
+
+.bottom.mb-long {
+  margin-bottom: 0.90667rem;
+}
+
+.bottom .avatar {
+  width: 1.33333rem;
+  height: 1.33333rem;
+  margin: 0 0.26667rem 0 0.53333rem;
+}
+
+.bottom .avatar img {
+  width: 100%;
+  border-radius: 50%;
+}
+
+.bottom .info-wrap {
+  flex: 1;
+  height: 1.17333rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 0.26667rem;
+  color: white;
+}
+
+.bottom .info-wrap .nick {
+  font-size: 0.37333rem;
+  font-weight: bold;
+}
+
+.bottom .recharge {
+  width: 2rem;
+  height: 0.85333rem;
+  margin-right: 0.8rem;
+}
+
+.bottom .recharge img {
+  width: 100%;
+}
+
+.fill-color {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 0.93333rem;
+  background-color: #60acfb;
+}
+
+.shade-mask-buy {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.shade-mask-buy .shade-content-buy {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8rem;
+  height: 8rem;
+  border-radius: 0.32rem;
+  background-color: white;
+}
+
+.shade-mask-buy .shade-content-buy .title {
+  font-family: 'pingfang-bold';
+  font-size: 0.48rem;
+  font-weight: bold;
+  color: #333333;
+  text-align: center;
+  margin: 0.48rem 0 0.58667rem;
+}
+
+.shade-mask-buy .shade-content-buy .title span {
+  font-weight: bold;
+}
+
+.shade-mask-buy .shade-content-buy .buy-num, .shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
+  font-size: 0.4rem;
+  color: #333333;
+  margin-bottom: 0.85333rem;
+  margin-left: 0.64rem;
+}
+
+.shade-mask-buy .shade-content-buy .buy-num p, .shade-mask-buy .shade-content-buy .buy-day p, .shade-mask-buy .shade-content-buy .buy-price p {
+  font-weight: 550;
+}
+
+.shade-mask-buy .shade-content-buy .buy-num {
+  display: flex;
+  align-items: center;
+  height: 0.8rem;
+}
+
+.shade-mask-buy .shade-content-buy .buy-num .decrease, .shade-mask-buy .shade-content-buy .buy-num .increase {
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-right: 0.26667rem;
+}
+
+.shade-mask-buy .shade-content-buy .buy-num .decrease img, .shade-mask-buy .shade-content-buy .buy-num .increase img {
+  width: 100%;
+}
+
+.shade-mask-buy .shade-content-buy .buy-num input {
+  width: 2.13333rem;
+  height: 0.8rem;
+  border-radius: 0.4rem;
+  background-color: #EAE5FC;
+  color: #7154EE;
+  text-align: center;
+  margin-right: 0.26667rem;
+  outline: none;
+  caret-color: #7154EE;
+}
+
+.shade-mask-buy .shade-content-buy .buy-day, .shade-mask-buy .shade-content-buy .buy-price {
+  display: flex;
+  align-items: center;
+}
+
+.shade-mask-buy .shade-content-buy .buy-confirm-btn {
+  display: flex;
+  justify-content: space-between;
+  width: 6.82667rem;
+  height: 1.01333rem;
+  margin: 1.2rem auto 0;
+}
+
+.shade-mask-buy .shade-content-buy .buy-confirm-btn .cancel, .shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
+  width: 3.2rem;
+  height: 1.01333rem;
+  line-height: 1.01333rem;
+  background-color: #EAE5FC;
+  font-size: 0.37333rem;
+  color: #7154EE;
+  text-align: center;
+  border-radius: 0.50667rem;
+}
+
+.shade-mask-buy .shade-content-buy .buy-confirm-btn .confirm {
+  background-image: linear-gradient(#735FFE, #8776FF);
+  color: white;
+}
+
+.shade-mask-no-money {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.shade-mask-no-money .shade-content-no-money {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8rem;
+  height: 8rem;
+  border-radius: 0.32rem;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.shade-mask-no-money .shade-content-no-money .no-money-title {
+  font-size: 0.48rem;
+  font-weight: bold;
+  color: #333333;
+  margin: 0.48rem 0 1.44rem;
+}
+
+.shade-mask-no-money .shade-content-no-money .no-money-pic {
+  width: 1.6rem;
+  height: 1.6rem;
+  margin-bottom: 0.66667rem;
+}
+
+.shade-mask-no-money .shade-content-no-money .no-money-tip {
+  font-size: 0.4rem;
+  font-weight: 550;
+  color: #333333;
+}
+
+.shade-mask-no-money .shade-content-no-money .no-money-recharge {
+  width: 3.2rem;
+  height: 1.01333rem;
+  background-image: linear-gradient(#735FFE, #8776FF);
+  border-radius: 0.50667rem;
+  line-height: 1.01333rem;
+  text-align: center;
+  color: white;
+  margin-top: 1.2rem;
+}

view/peko/activity/act-ocean1/css/mall.scss

@@ -0,0 +1,286 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+@font-face{
+    font-family: 'pingfang-medium';
+    src: url('../../../common/fonts/PingFang-Medium.ttf');
+    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-face{
+    font-family: 'pingfang-bold';
+    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');
+}
+
+body{
+    font-family: 'pingfang-medium';
+    background: linear-gradient(#3491F5, #60C7FC) no-repeat 0 0/100% 100%;
+}
+
+.banner{
+    width: px2rem(750);
+    height: px2rem(500);
+    background: url('../images/mall/banner.png') no-repeat 0 0/100% 100%;
+}
+.buy-area{
+    width: px2rem(710);
+    // height: px2rem(900);
+    height: px2rem(1080);
+    margin: auto;
+    box-sizing: border-box;
+    padding: px2rem(80) px2rem(42) 0 px2rem(60);
+    background: url('../images/mall/buy-area.png') no-repeat 0 0/100% 100%;
+    margin-top: px2rem(-66);
+    &.bg-long{
+        background-image: url('../images/mall/buy-area-long.png');
+    }
+    li{
+        display: flex;
+        align-items: center;
+        margin-bottom: px2rem(40);
+        &.li-bg-long{
+            margin-bottom: px2rem(90);
+        }
+        .headwear-pic{
+            width: px2rem(180);
+            height: px2rem(180);
+            background-color: #92CCFB;
+            border-radius: px2rem(30);
+            margin-right: px2rem(30);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img{
+                width: px2rem(150);
+                height: px2rem(150);
+            }
+        }
+        .headwear-info{
+            flex: 1;
+            height: px2rem(120);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            color: white;
+            font-size: px2rem(26);
+            .headwear-name{
+                font-size: px2rem(36);
+                font-weight: bold;
+            }
+            .headwear-price{
+                margin-bottom: px2rem(-12);
+            }
+            .headwear-award{
+                color: #FEEF60;
+            }
+        }
+        .buy-btn{
+            width: px2rem(134);
+            height: px2rem(62);
+            img{
+                width: 100%;
+            }
+        }
+    }
+}
+.bottom{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    width: 100%;
+    height: px2rem(122);
+    background: url('../images/mall/bottom.png') no-repeat 0 0/100% 100%;
+    display: flex;
+    align-items: center;
+    &.mb-long{
+        margin-bottom: px2rem(68);
+    }
+    .avatar{
+        width: px2rem(100);
+        height: px2rem(100);
+        margin: 0 px2rem(20) 0 px2rem(40);
+        img{
+            width: 100%;
+            border-radius: 50%;
+        }
+    }
+    .info-wrap{
+        flex: 1;
+        height: px2rem(88);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        font-size: px2rem(20);
+        color: white;
+        .nick{
+            font-size: px2rem(28);
+            font-weight: bold;
+        }
+    }
+    .recharge{
+        width: px2rem(150);
+        height: px2rem(64);
+        margin-right: px2rem(60);
+        img{
+            width: 100%;
+        }
+    }
+}
+
+.fill-color{
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    width: 100%;
+    height: px2rem(70);
+    background-color:#60acfb;
+}
+// 购买弹窗
+.shade-mask-buy{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba($color: #000000, $alpha: 0.4);
+    .shade-content-buy{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: px2rem(600);
+        height: px2rem(600);
+        border-radius: px2rem(24);
+        background-color: white;
+        .title{
+            font-family: 'pingfang-bold';
+            font-size: px2rem(36);
+            font-weight: bold;
+            color: #333333;
+            text-align: center;
+            margin: px2rem(36) 0 px2rem(44);
+            span{
+                font-weight: bold;
+            }
+        }
+        .buy-num, .buy-day, .buy-price{
+            font-size: px2rem(30);
+            color: #333333;
+            margin-bottom: px2rem(64);
+            margin-left: px2rem(48);
+            p{
+                font-weight: 550;
+            }
+        }
+        .buy-num{
+            display: flex;
+            align-items: center;
+            height: px2rem(60);
+            .decrease, .increase{
+                width: px2rem(60);
+                height: px2rem(60);
+                margin-right: px2rem(20);
+                img{
+                    width: 100%;
+                }
+            }
+            input{
+                width: px2rem(160);
+                height: px2rem(60);
+                border-radius: px2rem(30);
+                background-color: #EAE5FC;
+                color: #7154EE;
+                text-align: center;
+                margin-right: px2rem(20);
+                outline: none;
+                caret-color: #7154EE;
+            }
+        }
+        .buy-day, .buy-price{
+            display: flex;
+            align-items: center;
+        }
+        .buy-confirm-btn{
+            display: flex;
+            justify-content: space-between;
+            width: px2rem(512);
+            height: px2rem(76);
+            margin: px2rem(90) auto 0;
+            .cancel, .confirm{
+                width: px2rem(240);
+                height: px2rem(76);
+                line-height: px2rem(76);
+                background-color: #EAE5FC;
+                font-size: px2rem(28);
+                color: #7154EE;
+                text-align: center;
+                border-radius: px2rem(38);
+            }
+            .confirm{
+                background-image: linear-gradient(#735FFE, #8776FF);
+                color: white;
+            }
+        }
+    }
+}
+// 余额不足弹窗
+.shade-mask-no-money{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba($color: #000000, $alpha: 0.4);
+    .shade-content-no-money{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: px2rem(600);
+        height: px2rem(600);
+        border-radius: px2rem(24);
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .no-money-title{
+            font-size: px2rem(36);
+            font-weight: bold;
+            color: #333333;
+            margin: px2rem(36) 0 px2rem(108);
+        }
+        .no-money-pic{
+            width: px2rem(120);
+            height: px2rem(120);
+            margin-bottom: px2rem(50);
+        }
+        .no-money-tip{
+            font-size: px2rem(30);
+            font-weight: 550;
+            color: #333333;
+        }
+        .no-money-recharge{
+            width: px2rem(240);
+            height: px2rem(76);
+            background-image: linear-gradient(#735FFE, #8776FF);
+            border-radius: px2rem(38);
+            line-height: px2rem(76);
+            text-align: center;
+            color: white;
+            margin-top: px2rem(90);
+        }
+    }
+}

view/peko/activity/act-ocean1/css/rank.css

@@ -0,0 +1,274 @@
+@font-face {
+  font-family: 'pingfang-bold';
+  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");
+}
+
+@font-face {
+  font-family: 'din-medium';
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  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-face {
+  font-family: 'pingfang-medium';
+  src: url("../../../common/fonts/PingFang-Medium.ttf");
+  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-face {
+  font-family: 'pingfang-regular';
+  src: url("../../../common/fonts/PingFang-Regular.ttf");
+  src: url("../../../common/fonts/PingFang-Regular.ttf") format("woff"), url("../../../common/fonts/PingFang-Regular.ttf") format("truetype"), url("../../../common/fonts/PingFang-Regular.ttf") format("svg");
+}
+
+html, body {
+  font-family: 'pingfang-bold';
+  position: relative;
+}
+
+.rank-top {
+  height: 6.66667rem;
+  background-image: linear-gradient(#3491F5, #60C7FC);
+  overflow: hidden;
+}
+
+.rank-top .tab-wrap {
+  font-family: 'pingfang-regular';
+  width: 5.33333rem;
+  height: 0.93333rem;
+  background-color: #7ABDF9;
+  border-radius: 0.48rem;
+  margin: 0.48rem auto 0.29333rem;
+}
+
+.rank-top .tab-wrap span {
+  display: inline-block;
+  width: 2.53333rem;
+  height: 0.8rem;
+  line-height: 0.8rem;
+  text-align: center;
+  font-size: 0.4rem;
+  color: white;
+  margin-top: 0.06667rem;
+}
+
+.rank-top .tab-wrap span:first-child {
+  margin-left: 0.08rem;
+}
+
+.rank-top .tab-wrap .active {
+  background-color: white;
+  color: #3C9BF7;
+  border-radius: 0.4rem;
+}
+
+.rank-top .topthree-wrap {
+  position: relative;
+}
+
+.rank-top .topthree-wrap .info-wrap {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 2.66667rem;
+  height: 3.2rem;
+  background-image: linear-gradient(#3F9EF7, #52B6FA);
+  margin-top: 1.68rem;
+  border-radius: 0.26667rem 0.26667rem 0 0;
+}
+
+.rank-top .topthree-wrap .info-wrap:first-child {
+  width: 3.2rem;
+  height: 3.73333rem;
+  margin-top: 1.14667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(2) {
+  left: 0.48rem;
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar {
+  width: 1.86667rem;
+  height: 2.53333rem;
+  margin-top: -1.14667rem;
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar p {
+  background-image: url("../images/second.png");
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar img {
+  width: 1.86667rem;
+  height: 1.86667rem;
+  top: -1.97333rem;
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(3) {
+  right: 0.48rem;
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar {
+  width: 1.86667rem;
+  height: 2.53333rem;
+  margin-top: -1.14667rem;
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar p {
+  background-image: url("../images/third.png");
+}
+
+.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar img {
+  width: 1.86667rem;
+  height: 1.86667rem;
+  top: -1.97333rem;
+}
+
+.rank-top .topthree-wrap .info-wrap .avatar {
+  width: 2.13333rem;
+  height: 2.85333rem;
+  margin-top: -0.93333rem;
+}
+
+.rank-top .topthree-wrap .info-wrap .avatar p {
+  position: relative;
+  z-index: 99;
+  height: 100%;
+  background: url("../images/first.png") no-repeat 0 0/100% 100%;
+}
+
+.rank-top .topthree-wrap .info-wrap .avatar img {
+  position: relative;
+  z-index: 9;
+  top: -2.24rem;
+  width: 2.13333rem;
+  height: 2.13333rem;
+  border-radius: 50%;
+}
+
+.rank-top .topthree-wrap .info-wrap .nick, .rank-top .topthree-wrap .info-wrap .diamond-num {
+  font-size: 0.4rem;
+  font-weight: bold;
+  color: white;
+  margin: 0.21333rem 0;
+}
+
+.rank-top .topthree-wrap .info-wrap .diamond-num {
+  font-family: 'din-medium';
+  margin: 0;
+}
+
+.other-rank {
+  overflow: auto;
+  position: absolute;
+  width: 100%;
+  border-radius: 0.4rem 0.4rem 0 0;
+  margin-top: -0.34667rem;
+  background-color: white;
+  padding: 0.53333rem 0.77333rem 0;
+  box-sizing: border-box;
+}
+
+.other-rank li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.53333rem;
+}
+
+.other-rank li:last-child {
+  margin-bottom: 1.86667rem;
+}
+
+.other-rank li .index {
+  display: inline-block;
+  width: 0.4rem;
+  font-size: 0.4rem;
+  font-weight: bold;
+  color: #333333;
+}
+
+.other-rank li .others-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-left: 0.4rem;
+}
+
+.other-rank li .others-info img {
+  width: 1.33333rem;
+  height: 1.33333rem;
+  border-radius: 50%;
+  margin-right: 0.26667rem;
+}
+
+.other-rank li .others-info .others-nick {
+  font-size: 0.37333rem;
+  font-weight: bold;
+  color: #333333;
+}
+
+.other-rank li .others-diamond-num {
+  font-size: 0.34667rem;
+  font-weight: bold;
+  color: #ED7B50;
+}
+
+.mine {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  height: 1.6rem;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 0 0.77333rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.mine .mine-rank {
+  font-size: 0.34667rem;
+  font-weight: bold;
+  color: white;
+}
+
+.mine .mine-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.mine .mine-info img {
+  width: 1.33333rem;
+  height: 1.33333rem;
+  border-radius: 50%;
+  margin-left: 0.4rem;
+  margin-right: 0.26667rem;
+}
+
+.mine .mine-info .mine-nick {
+  font-size: 0.37333rem;
+  font-weight: bold;
+  color: white;
+}
+
+.mine .mine-diamond-num {
+  font-size: 0.34667rem;
+  font-weight: bold;
+  color: #ED7B50;
+}
+
+.no-in-app {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+  background-color: white;
+}

view/peko/activity/act-ocean1/css/rank.scss

@@ -0,0 +1,257 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+@font-face{
+    font-family: 'pingfang-bold';
+    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');
+}
+
+@font-face{
+    font-family: 'din-medium';
+    src: url('../../../common/fonts/DINCond-Medium.ttf');
+    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-face{
+    font-family: 'pingfang-medium';
+    src: url('../../../common/fonts/PingFang-Medium.ttf');
+    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-face{
+    font-family: 'pingfang-regular';
+    src: url('../../../common/fonts/PingFang-Regular.ttf');
+    src: url('../../../common/fonts/PingFang-Regular.ttf') format('woff'),
+        url('../../../common/fonts/PingFang-Regular.ttf') format('truetype'),
+        url('../../../common/fonts/PingFang-Regular.ttf') format('svg');
+}
+
+
+html,body{
+   font-family: 'pingfang-bold';
+   position: relative;
+}
+
+.rank-top{
+    height: px2rem(500);
+    background-image: linear-gradient(#3491F5, #60C7FC);
+    overflow: hidden;
+    .tab-wrap{
+        font-family: 'pingfang-regular';
+        width: px2rem(400);
+        height: px2rem(70);
+        background-color: #7ABDF9;
+        border-radius: px2rem(36);
+        margin: px2rem(36) auto px2rem(22);
+        span{
+            display: inline-block;
+            width: px2rem(190);
+            height: px2rem(60);
+            line-height: px2rem(60);
+            text-align: center;
+            font-size: px2rem(30);
+            color: white;
+            margin-top: px2rem(5);
+            &:first-child{
+                margin-left: px2rem(6);
+            }
+        }
+        .active{
+            background-color: white;
+            color: #3C9BF7;
+            border-radius: px2rem(30);
+        }
+    }
+    .topthree-wrap{
+        position: relative;
+        .info-wrap{
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: px2rem(200);
+            height: px2rem(240);
+            background-image: linear-gradient(#3F9EF7, #52B6FA);
+            margin-top: px2rem(126);
+            border-radius: px2rem(20) px2rem(20) 0 0;
+            &:first-child{
+                width: px2rem(240);
+                height: px2rem(280);
+                margin-top: px2rem(86);
+                left: 50%;
+                transform: translateX(-50%);
+
+            }
+            &:nth-child(2){
+                left: px2rem(36);
+                .avatar{
+                    width: px2rem(140);
+                    height: px2rem(190);
+                    margin-top: px2rem(-86);
+                    p{
+                        background-image: url('../images/second.png');
+                    }
+                    img{
+                        width: px2rem(140);
+                        height: px2rem(140);
+                        top: px2rem(-148);
+                    }
+                }
+            }
+            &:nth-child(3){
+                right: px2rem(36);
+                .avatar{
+                    width: px2rem(140);
+                    height: px2rem(190);
+                    margin-top: px2rem(-86);
+                    p{
+                        background-image: url('../images/third.png');
+                    }
+                    img{
+                        width: px2rem(140);
+                        height: px2rem(140);
+                        top: px2rem(-148);
+                    }
+                }
+            }
+            .avatar{
+                width: px2rem(160);
+                height: px2rem(214);
+                margin-top: px2rem(-70);
+                p{
+                    position: relative;
+                    z-index: 99;
+                    height: 100%;
+                    background: url('../images/first.png') no-repeat 0 0/100% 100%;
+                }
+                img{
+                    position: relative;
+                    z-index: 9;
+                    top: px2rem(-168);
+                    width: px2rem(160);
+                    height: px2rem(160);
+                    border-radius: 50%;
+                }
+            }
+            .nick, .diamond-num{
+                font-size: px2rem(30);
+                font-weight: bold;
+                color: white;
+                margin: px2rem(16) 0;
+            }
+            .diamond-num{
+                font-family: 'din-medium';
+                margin: 0;
+            }
+        }
+    }
+}
+
+.other-rank{
+    overflow: auto;
+    position: absolute;
+    width: 100%;
+    // height: px2rem(760);
+    border-radius: px2rem(30) px2rem(30) 0 0;
+    margin-top: px2rem(-26);
+    background-color: white;
+    padding: px2rem(40) px2rem(58) 0;
+    box-sizing: border-box;
+    li{
+        display: flex;
+        align-items: center;
+        margin-bottom: px2rem(40);
+        &:last-child{
+            margin-bottom: px2rem(140);
+        }
+        .index{
+            display: inline-block;
+            width: px2rem(30);
+            font-size: px2rem(30);
+            font-weight: bold;
+            color: #333333;
+        }
+        .others-info{
+            flex: 1;
+            display: flex;
+            align-items: center;
+            margin-left: px2rem(30);
+            img{
+                width: px2rem(100);
+                height: px2rem(100);
+                border-radius: 50%;
+                margin-right: px2rem(20);
+            }
+            .others-nick{
+                font-size: px2rem(28);
+                font-weight: bold;
+                color: #333333;
+            }
+        }
+        .others-diamond-num{
+            font-size: px2rem(26);
+            font-weight: bold;
+            color: #ED7B50;
+        }
+    }
+}
+
+.mine{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 999;
+    width: 100%;
+    height: px2rem(120);
+    background-color: rgba($color: #000000, $alpha: .8);
+    padding: 0 px2rem(58);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    .mine-rank{
+        font-size: px2rem(26);
+        font-weight: bold;
+        color: white;
+    }
+    .mine-info{
+        flex: 1;
+        display: flex;
+        align-items: center;
+        img{
+            width: px2rem(100);
+            height: px2rem(100);
+            border-radius: 50%;
+            margin-left: px2rem(30);
+            margin-right: px2rem(20);
+        }
+        .mine-nick{
+            font-size: px2rem(28);
+            font-weight: bold;
+            color: white;
+        }
+    }
+    .mine-diamond-num{
+        font-size: px2rem(26);
+        font-weight: bold;
+        color: #ED7B50;
+    }
+}
+
+.no-in-app{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99999;
+    background-color: white;
+}

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

@@ -0,0 +1,149 @@
+@font-face {
+  font-family: 'pingfang-bold';
+  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");
+}
+
+@font-face {
+  font-family: 'din-medium';
+  src: url("../../../common/fonts/DINCond-Medium.ttf");
+  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-face {
+  font-family: 'pingfang-medium';
+  src: url("../../../common/fonts/PingFang-Medium.ttf");
+  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");
+}
+
+.clearfix:after {
+  display: block;
+  content: ' ';
+  clear: both;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+html, body {
+  font-family: 'pingfang-bold';
+  background-color: #50BEF8;
+}
+
+ul.record-list {
+  height: 100vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-top: 0.69333rem;
+  box-sizing: border-box;
+}
+
+ul.record-list li.record-item {
+  overflow: hidden;
+  width: 10rem;
+  height: 5.6rem;
+  background: url("../images/record/record-bg.png") no-repeat 0 0/100% 100%;
+  margin-bottom: 0.4rem;
+}
+
+ul.record-list li.record-item .time {
+  font-family: 'pingfang-medium';
+  font-size: 0.34667rem;
+  color: white;
+  text-align: center;
+  margin-top: 0.58667rem;
+  margin-bottom: 0.21333rem;
+}
+
+ul.record-list li.record-item .award {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 9.04rem;
+  height: 0.58667rem;
+  background-color: #1A8AE8;
+  margin: auto;
+}
+
+ul.record-list li.record-item .award .text {
+  font-size: 0.37333rem;
+  color: white;
+  font-weight: bold;
+  margin-left: 0.32rem;
+}
+
+ul.record-list li.record-item .award .diamond-num {
+  font-family: 'din-medium';
+  font-size: 0.34667rem;
+  color: white;
+}
+
+ul.record-list li.record-item .award img.diamond-pic {
+  width: 0.48rem;
+  height: 0.37333rem;
+  margin: 0 0.34667rem 0 0.10667rem;
+}
+
+ul.record-list li.record-item ul.award-animal {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 0.66667rem 0 0.8rem;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item {
+  width: 25%;
+  margin: 0.26667rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item.active {
+  margin: 0.13333rem 0;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item.active div {
+  width: 1.06667rem;
+  height: 1.06667rem;
+  background: url("../images/little-bubble-active.png") no-repeat 0 0/100% 100%;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item.active span {
+  color: #FEEF60;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item div {
+  width: 0.8rem;
+  height: 0.8rem;
+  background: url("../images/little-bubble.png") no-repeat 0 0/100% 100%;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item div img {
+  width: 100%;
+}
+
+ul.record-list li.record-item ul.award-animal li.animal-item span {
+  font-size: 0.26667rem;
+  font-weight: bold;
+  color: white;
+  margin-left: 0.13333rem;
+}
+
+ul.record-list li.record-item .tip {
+  font-family: 'pingfang-medium';
+  font-size: 0.26667rem;
+  color: white;
+  text-align: center;
+  margin-top: 0.26667rem;
+}
+
+ul.record-list .no-record {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  color: white;
+  font-size: 0.42667rem;
+  font-weight: bold;
+}

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

@@ -0,0 +1,144 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+@font-face{
+    font-family: 'pingfang-bold';
+    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');
+}
+
+@font-face{
+    font-family: 'din-medium';
+    src: url('../../../common/fonts/DINCond-Medium.ttf');
+    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-face{
+    font-family: 'pingfang-medium';
+    src: url('../../../common/fonts/PingFang-Medium.ttf');
+    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');
+}
+
+.clearfix:after{
+    display:block;
+    content:' ';
+    clear:both;
+}
+.clearfix{
+    *zoom:1;//兼容到ie6
+}
+
+html,body{
+    font-family: 'pingfang-bold';
+    background-color: #50BEF8;
+}
+
+ul.record-list{
+    height: 100vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding-top: px2rem(52);
+    box-sizing: border-box;
+    li.record-item{
+        overflow: hidden;
+        width: px2rem(750);
+        height: px2rem(420);
+        background: url('../images/record/record-bg.png') no-repeat 0 0/100% 100%;
+        margin-bottom: px2rem(30);
+        .time{
+            font-family: 'pingfang-medium';
+            font-size: px2rem(26);
+            color: white;
+            text-align: center;
+            margin-top: px2rem(44);
+            margin-bottom: px2rem(16);
+        }
+        .award{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: px2rem(678);
+            height: px2rem(44);
+            background-color: #1A8AE8;
+            margin: auto;
+            .text{
+                font-size: px2rem(28);
+                color: white;
+                font-weight: bold;
+                margin-left: px2rem(24);
+            }
+            .diamond-num{
+                font-family: 'din-medium';
+                font-size: px2rem(26);
+                color: white;
+            }
+            img.diamond-pic{
+                width: px2rem(36);
+                height: px2rem(28);
+                margin: 0 px2rem(26) 0 px2rem(8);
+            }
+        }
+        ul.award-animal{
+            display: flex;
+            flex-wrap: wrap;
+            padding: 0 px2rem(50) 0 px2rem(60);
+            // margin-left: px2rem(60);
+            li.animal-item{
+                // float: left;
+                width: 25%;
+                margin: px2rem(20) 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                &.active{
+                    margin: px2rem(10) 0;
+                    div{
+                        width: px2rem(80);
+                        height: px2rem(80);
+                        background: url('../images/little-bubble-active.png') no-repeat 0 0/100% 100%;
+                    }
+                    span{
+                        color: #FEEF60;
+                    }
+                }
+                div{
+                    width: px2rem(60);
+                    height: px2rem(60);
+                    background: url('../images/little-bubble.png') no-repeat 0 0/100% 100%;
+                    img{
+                        width: 100%;
+                    }
+                }
+                span{
+                    font-size: px2rem(20);
+                    font-weight: bold;
+                    color: white;
+                    margin-left: px2rem(10);
+                }
+            }
+        }
+        .tip{
+            font-family: 'pingfang-medium';
+            font-size: px2rem(20);
+            color: white;
+            text-align: center;
+            margin-top: px2rem(20);
+        }
+    }
+    .no-record{
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        text-align: center;
+        color: white;
+        font-size: px2rem(32);
+        font-weight: bold;
+    }
+}