diff --git a/view/peko/activity/act-ocean/css/index.css b/view/peko/activity/act-ocean/css/index.css
index d3a690e..eb71729 100644
--- a/view/peko/activity/act-ocean/css/index.css
+++ b/view/peko/activity/act-ocean/css/index.css
@@ -298,9 +298,11 @@ body {
 }
 .wrap .game-area .draw-time {
   display: none;
-  width: 10rem;
-  height: 8rem;
-  margin: auto;
+  width: 2.8rem;
+  height: 2.84rem;
+  margin: 1.2rem auto 0.2rem;
+  background: url(../images/drawBg.png);
+  background-size: 100% 100%;
 }
 .wrap .game-area .draw-time .count-down,
 .wrap .game-area .draw-time .current-tip {
@@ -331,8 +333,9 @@ body {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 3.2rem;
+  bottom: 3.1rem;
   width: 100%;
+  height: 4rem;
 }
 .wrap .game-area .draw-time .top-three .top-three-title {
   display: flex;
@@ -349,52 +352,264 @@ body {
   border: 0.0133333333rem solid white;
 }
 .wrap .game-area .draw-time .top-three .top-three-list {
-  display: flex;
-  justify-content: space-between;
-  width: 4.5333333333rem;
-  margin: auto;
+  position: relative;
 }
-.wrap .game-area .draw-time .top-three .top-three-list p {
-  width: 0.9866666667rem;
-  height: 0.9866666667rem;
+.wrap .game-area .draw-time .top-three .top-three-list .no1 {
+  width: 2.5066666667rem;
+  height: 2.24rem;
+  background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
+  border-radius: 0.24rem;
+  position: relative;
+  top: 1.3rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
-.wrap .game-area .draw-time .top-three .top-three-list p img {
-  width: 100%;
-  height: 100%;
+.wrap .game-area .draw-time .top-three .top-three-list .no1 .tx {
+  width: 1.7333333333rem;
+  height: 1.7333333333rem;
   border-radius: 50%;
-  border: 0.0266666667rem solid #FEEF60;
+  position: absolute;
+  top: -0.9rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no1 .txBox {
+  width: 1.7466666667rem;
+  height: 2.2666666667rem;
+  position: absolute;
+  top: -1.41rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no1 .nick {
+  width: 100%;
+  font-size: 0.2933333333rem;
+  color: #fff;
+  text-align: center;
+  position: absolute;
+  top: 1.1733333333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no1 .num {
+  width: 100%;
+  height: 0.3333333333rem;
+  position: absolute;
+  bottom: 0.2rem;
+  display: flex;
+  justify-content: center;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no1 .num .diamond {
+  width: 0.3333333333rem;
+  height: 0.3333333333rem;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no1 .num span {
+  font-size: 0.2933333333rem;
+  color: #fff;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 {
+  width: 2.16rem;
+  height: 1.8933333333rem;
+  background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
+  border-radius: 0.24rem;
+  position: relative;
+  top: -0.55rem;
+  left: 1.15rem;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 .tx {
+  width: 1.7333333333rem;
+  height: 1.7333333333rem;
+  border-radius: 50%;
+  position: absolute;
+  top: -0.9rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 .txBox {
+  width: 1.7466666667rem;
+  height: 2.2666666667rem;
+  position: absolute;
+  top: -1.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 .nick {
+  width: 100%;
+  font-size: 0.2933333333rem;
+  color: #fff;
+  text-align: center;
+  position: absolute;
+  top: 1.0133333333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 .num {
+  width: 100%;
+  height: 0.3333333333rem;
+  position: absolute;
+  bottom: 0.14rem;
+  display: flex;
+  justify-content: center;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 .num .diamond {
+  width: 0.3333333333rem;
+  height: 0.3333333333rem;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no2 .num span {
+  font-size: 0.2933333333rem;
+  color: #fff;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 {
+  width: 2.16rem;
+  height: 1.8933333333rem;
+  background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
+  border-radius: 0.24rem;
+  position: relative;
+  position: relative;
+  top: -2.45rem;
+  left: 6.7rem;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 .tx {
+  width: 1.7333333333rem;
+  height: 1.7333333333rem;
+  border-radius: 50%;
+  position: absolute;
+  top: -0.9rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 .txBox {
+  width: 1.7466666667rem;
+  height: 2.2666666667rem;
+  position: absolute;
+  top: -1.44rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 .nick {
+  width: 100%;
+  font-size: 0.2933333333rem;
+  color: #fff;
+  text-align: center;
+  position: absolute;
+  top: 1.0133333333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 .num {
+  width: 100%;
+  height: 0.3333333333rem;
+  position: absolute;
+  bottom: 0.14rem;
+  display: flex;
+  justify-content: center;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 .num .diamond {
+  width: 0.3333333333rem;
+  height: 0.3333333333rem;
+}
+.wrap .game-area .draw-time .top-three .top-three-list .no3 .num span {
+  font-size: 0.2933333333rem;
+  color: #fff;
 }
 .wrap .game-area .draw-time .draw-pic {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 1.92rem;
+  top: 1.65rem;
   z-index: 1;
-  width: 3.7333333333rem;
-  height: 3.7333333333rem;
+  width: 1.3333333333rem;
 }
 .wrap .game-area .draw-time .draw-pic img {
   width: 100%;
-  height: 100%;
 }
 .wrap .game-area .draw-time .award-info {
+  width: 8rem;
+  box-sizing: border-box;
   position: absolute;
-  top: 8rem;
-  width: 100%;
-  font-family: "pingfang-bold";
-  text-align: center;
-  font-size: 0.32rem;
-  font-weight: bold;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 6.5rem;
+  display: flex;
 }
 .wrap .game-area .draw-time .award-info .desc {
-  color: #FEEF60;
-  margin-bottom: 0.16rem;
+  color: #fff;
+  font-size: 0.3733333333rem;
+  font-weight: 600;
+}
+.wrap .game-area .draw-time .award-info .diamond {
+  width: 0.35rem;
+  height: 0.35rem;
+  margin-left: 0.5rem;
+  margin-right: 0.1rem;
 }
 .wrap .game-area .draw-time .award-info .award-wrap {
-  color: white;
-}
-.wrap .game-area .draw-time .award-info .award-wrap .award-total {
   color: #FEEF60;
+  font-weight: 600;
+  font-size: 0.3733333333rem;
+}
+.wrap .game-area .draw-time .put-wrap {
+  width: 8rem;
+  height: 2.44rem;
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.6rem;
+  display: flex;
+}
+.wrap .game-area .draw-time .put-wrap .put {
+  font-size: 0.3733333333rem;
+  color: #FFFFFF;
+  font-weight: 600;
+  margin-right: 0.4rem;
+  margin-top: 0.3rem;
+}
+.wrap .game-area .draw-time .put-wrap .list {
+  width: 6.72rem;
+  height: 2.7733333333rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrap .game-area .draw-time .put-wrap .list .item {
+  width: 0.9866666667rem;
+  height: 1.2rem;
+  margin-right: 0.92rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.wrap .game-area .draw-time .put-wrap .list .item:nth-child(4n) {
+  margin-right: 0;
+}
+.wrap .game-area .draw-time .put-wrap .list .item p {
+  width: 0.8266666667rem;
+  height: 0.8266666667rem;
+  background: url(../images/record_bubble.png) no-repeat;
+  background-size: 100% 100%;
+}
+.wrap .game-area .draw-time .put-wrap .list .item p .gift {
+  width: 75%;
+  margin-top: 0.1rem;
+  margin-left: 0.1rem;
+}
+.wrap .game-area .draw-time .put-wrap .list .item div {
+  width: 100%;
+  height: 0.3333333333rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wrap .game-area .draw-time .put-wrap .list .item div .diamond {
+  width: 0.33rem;
+  height: 0.33rem;
+}
+.wrap .game-area .draw-time .put-wrap .list .item div .in {
+  font-size: 0.2666666667rem;
+  color: #FFFFFF;
+  font-weight: 600;
+  white-space: nowrap;
 }
 .wrap .info-bottom {
   position: fixed;
@@ -422,6 +637,7 @@ body {
   color: white;
   text-indent: 0.1333333333rem;
   margin-bottom: 0.1333333333rem;
+  white-space: nowrap;
 }
 .wrap .info-bottom .avatar {
   width: 1.3333333333rem;
diff --git a/view/peko/activity/act-ocean/css/index.scss b/view/peko/activity/act-ocean/css/index.scss
index e711ce0..2520440 100644
--- a/view/peko/activity/act-ocean/css/index.scss
+++ b/view/peko/activity/act-ocean/css/index.scss
@@ -106,10 +106,12 @@ body {
             }
 
         }
+
         .more-result {
             width: px2rem(42);
             height: px2rem(44);
             margin-left: 0.2rem;
+
             img {
                 width: 100%;
             }
@@ -382,12 +384,14 @@ body {
         // 开奖时间
         .draw-time {
             display: none;
-            width: px2rem(750);
-            height: px2rem(600);
-            // width: 6rem;
-            // height: 6rem;
-            margin: auto;
-            // margin-top: px2rem(80);
+            // width: px2rem(750);
+            // height: px2rem(600);
+            width: px2rem(210, );
+            height: px2rem(213, );
+            margin: 1.2rem auto 0.2rem;
+            background: url(../images/drawBg.png);
+            background-size: 100% 100%;
+
             .count-down,
             .current-tip {
                 font-family: 'pingfang-bold';
@@ -419,8 +423,9 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: px2rem(240);
+                bottom: 3.1rem;
                 width: 100%;
+                height: 4rem;
 
                 .top-three-title {
                     display: flex;
@@ -439,20 +444,189 @@ body {
                 }
 
                 .top-three-list {
-                    display: flex;
-                    justify-content: space-between;
-                    width: px2rem(340);
-                    margin: auto;
+                    // display: flex;
+                    // justify-content: space-between;
+                    // width: px2rem(340);
+                    // margin: auto;
+                    position: relative;
 
-                    p {
-                        width: px2rem(74);
-                        height: px2rem(74);
+                    .no1 {
+                        width: px2rem(188);
+                        height: px2rem(168);
+                        background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
+                        border-radius: px2rem(18, );
+                        position: relative;
+                        top: 1.3rem;
+                        left: 50%;
+                        transform: translateX(-50%);
 
-                        img {
-                            width: 100%;
-                            height: 100%;
+                        .tx {
+                            width: px2rem(130, );
+                            height: px2rem(130, );
                             border-radius: 50%;
-                            border: px2rem(2) solid #FEEF60;
+                            position: absolute;
+                            top: -0.9rem;
+                            left: 50%;
+                            transform: translateX(-50%);
+
+                        }
+
+                        .txBox {
+                            width: px2rem(131, );
+                            height: px2rem(170, );
+                            position: absolute;
+                            top: -1.41rem;
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        .nick {
+                            width: 100%;
+                            font-size: px2rem(22, );
+                            color: #fff;
+                            text-align: center;
+                            position: absolute;
+                            top: px2rem(88, );
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        .num {
+                            width: 100%;
+                            height: px2rem(25, );
+                            position: absolute;
+                            bottom: 0.2rem;
+                            display: flex;
+                            justify-content: center;
+
+                            .diamond {
+                                width: px2rem(25, );
+                                height: px2rem(25, );
+                            }
+
+                            span {
+                                font-size: px2rem(22, );
+                                color: #fff;
+                            }
+                        }
+                    }
+
+                    .no2 {
+                        width: px2rem(162, );
+                        height: px2rem(142, );
+                        background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
+                        border-radius: px2rem(18, );
+                        position: relative;
+                        top: -0.55rem;
+                        left: 1.15rem;
+
+                        .tx {
+                            width: px2rem(130, );
+                            height: px2rem(130, );
+                            border-radius: 50%;
+                            position: absolute;
+                            top: -0.9rem;
+                            left: 50%;
+                            transform: translateX(-50%);
+
+                        }
+
+                        .txBox {
+                            width: px2rem(131, );
+                            height: px2rem(170, );
+                            position: absolute;
+                            top: -1.4rem;
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+                        .nick {
+                            width: 100%;
+                            font-size: px2rem(22, );
+                            color: #fff;
+                            text-align: center;
+                            position: absolute;
+                            top: px2rem(76, );
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        .num {
+                            width: 100%;
+                            height: px2rem(25, );
+                            position: absolute;
+                            bottom: 0.14rem;
+                            display: flex;
+                            justify-content: center;
+
+                            .diamond {
+                                width: px2rem(25, );
+                                height: px2rem(25, );
+                            }
+
+                            span {
+                                font-size: px2rem(22, );
+                                color: #fff;
+                            }
+                        }
+                    }
+
+                    .no3 {
+                        width: px2rem(162, );
+                        height: px2rem(142, );
+                        background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
+                        border-radius: px2rem(18, );
+                        position: relative;
+                        position: relative;
+                        top: -2.45rem;
+                        left: 6.7rem;
+
+                        .tx {
+                            width: px2rem(130, );
+                            height: px2rem(130, );
+                            border-radius: 50%;
+                            position: absolute;
+                            top: -0.9rem;
+                            left: 50%;
+                            transform: translateX(-50%);
+
+                        }
+
+                        .txBox {
+                            width: px2rem(131, );
+                            height: px2rem(170, );
+                            position: absolute;
+                            top: -1.44rem;
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+                        .nick {
+                            width: 100%;
+                            font-size: px2rem(22, );
+                            color: #fff;
+                            text-align: center;
+                            position: absolute;
+                            top: px2rem(76, );
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        .num {
+                            width: 100%;
+                            height: px2rem(25, );
+                            position: absolute;
+                            bottom: 0.14rem;
+                            display: flex;
+                            justify-content: center;
+
+                            .diamond {
+                                width: px2rem(25, );
+                                height: px2rem(25, );
+                            }
+
+                            span {
+                                font-size: px2rem(22, );
+                                color: #fff;
+                            }
                         }
                     }
                 }
@@ -462,39 +636,126 @@ body {
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                top: px2rem(144);
+                top: 1.65rem;
                 z-index: 1;
-                width: px2rem(280);
-                height: px2rem(280);
+                width: px2rem(100);
+                // height: px2rem(91);
 
                 img {
                     width: 100%;
-                    height: 100%;
+                    // height: 100%;
+                    // margin: -0.3rem 0 0 1.18rem;
                 }
             }
 
             .award-info {
+                width: px2rem(600, );
+                // height: px2rem(183, );
+                box-sizing: border-box;
                 position: absolute;
-                top: px2rem(600);
-                width: 100%;
-                font-family: 'pingfang-bold';
-                text-align: center;
-                font-size: px2rem(24);
-                font-weight: bold;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 6.5rem;
+                display: flex;
 
                 .desc {
-                    color: #FEEF60;
-                    margin-bottom: px2rem(12);
+                    color: #fff;
+                    font-size: px2rem(28, );
+                    font-weight: 600;
+                }
+
+                .diamond {
+                    width: 0.35rem;
+                    height: 0.35rem;
+                    margin-left: 0.5rem;
+                    margin-right: 0.1rem;
                 }
 
                 .award-wrap {
-                    color: white;
+                    color: #FEEF60;
+                    font-weight: 600;
+                    font-size: px2rem(28, );
+                    // .award-total {
+                    //     color: #FEEF60;
+                    // }
+                }
+            }
 
-                    .award-total {
-                        color: #FEEF60;
+            .put-wrap {
+                width: px2rem(600, );
+                height: px2rem(183, );
+                // line-height: px2rem(183, );
+                box-sizing: border-box;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 3.6rem;
+                display: flex;
+
+                .put {
+                    font-size: px2rem(28, );
+                    color: #FFFFFF;
+                    font-weight: 600;
+                    margin-right: 0.4rem;
+                    margin-top: 0.3rem;
+                }
+
+                .list {
+                    width: px2rem(504, );
+                    height: px2rem(208, );
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .item {
+                        width: px2rem(74, );
+                        height: px2rem(90, );
+                        margin-right: 0.92rem;
+                        // position: relative;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        &:nth-child(4n) {
+                            margin-right: 0;
+                        }
+
+                        p {
+                            width: px2rem(62, );
+                            height: px2rem(62, );
+                            background: url(../images/record_bubble.png) no-repeat;
+                            background-size: 100% 100%;
+
+                            .gift {
+                                width: 75%;
+                                margin-top: 0.1rem;
+                                margin-left: 0.1rem;
+                            }
+                        }
+
+                        div {
+                            width: 100%;
+                            height: px2rem(25, );
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            .diamond {
+                                width: 0.33rem;
+                                height: 0.33rem;
+                            }
+
+                            .in {
+                                font-size: px2rem(20, );
+                                color: #FFFFFF;
+                                font-weight: 600;
+                                white-space: nowrap;
+                            }
+                        }
                     }
                 }
             }
+
         }
     }
 
@@ -526,6 +787,7 @@ body {
                 color: white;
                 text-indent: px2rem(10);
                 margin-bottom: px2rem(10);
+                white-space: nowrap;
             }
         }
 
diff --git a/view/peko/activity/act-ocean/images/drawBg.png b/view/peko/activity/act-ocean/images/drawBg.png
new file mode 100644
index 0000000..83d19ef
Binary files /dev/null and b/view/peko/activity/act-ocean/images/drawBg.png differ
diff --git a/view/peko/activity/act-ocean/images/no1.png b/view/peko/activity/act-ocean/images/no1.png
new file mode 100644
index 0000000..42c259d
Binary files /dev/null and b/view/peko/activity/act-ocean/images/no1.png differ
diff --git a/view/peko/activity/act-ocean/images/no2.png b/view/peko/activity/act-ocean/images/no2.png
new file mode 100644
index 0000000..c84d219
Binary files /dev/null and b/view/peko/activity/act-ocean/images/no2.png differ
diff --git a/view/peko/activity/act-ocean/images/no3.png b/view/peko/activity/act-ocean/images/no3.png
new file mode 100644
index 0000000..19821cb
Binary files /dev/null and b/view/peko/activity/act-ocean/images/no3.png differ
diff --git a/view/peko/activity/act-ocean/index.html b/view/peko/activity/act-ocean/index.html
index 6aa3ac5..3847388 100644
--- a/view/peko/activity/act-ocean/index.html
+++ b/view/peko/activity/act-ocean/index.html
@@ -64,9 +64,23 @@
                 <div class="draw-pic">
                     <img src="" alt="">
                 </div>
+                <!-- 投入列表 -->
+                <div class="put-wrap">
+                    <div class="put">投入</div>
+                    <div class="list">
+                        <!-- <div class="item">
+                            <p><img src="" class="gift" alt=""></p>
+                            <div>
+                                <img src="./images/diamond.png" class="diamond" alt="">
+                                <span class="in"></span>
+                            </div>
+                        </div> -->
+                    </div>
+                </div>
                 <!-- 用户本轮中奖情况 -->
                 <div class="award-info">
-                    <div class="desc"></div>
+                    <div class="desc">奖励</div>
+                    <img src="./images/diamond.png" class="diamond" alt="">
                     <div class="award-wrap"></div>
                 </div>
                 <!-- 本轮前3名 -->
@@ -77,9 +91,33 @@
                         <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 class="no no1">
+                            <img src="./images/logo.png" class="tx" alt="">
+                            <img src="./images/no1.png" class="txBox" alt="">
+                            <div class="nick">虚位以待</div>
+                            <div class="num">
+                                <img src="./images/diamond.png" class="diamond" alt="">
+                                <span></span>
+                            </div>
+                        </div>
+                        <div class="no no2">
+                            <img src="./images/logo.png" class="tx" alt="">
+                            <img src="./images/no2.png" class="txBox" alt="">
+                            <div class="nick">虚位以待</div>
+                            <div class="num">
+                                <img src="./images/diamond.png" class="diamond" alt="">
+                                <span></span>
+                            </div>
+                        </div>
+                        <div class="no no3">
+                            <img src="./images/logo.png" class="tx" alt="">
+                            <img src="./images/no3.png" class="txBox" alt="">
+                            <div class="nick">虚位以待</div>
+                            <div class="num">
+                                <img src="./images/diamond.png" class="diamond" alt="">
+                                <span></span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -105,7 +143,7 @@
         </div>
 
         <!-- 个人信息 -->
-        <div class="info-bottom" >
+        <div class="info-bottom">
             <div class="avatar"><img src="./images/logo.png" alt=""></div>
             <div class="info-wrap">
                 <div class="diamond-num">我的鉆石：<span>0</span></div>
diff --git a/view/peko/activity/act-ocean/js/index.js b/view/peko/activity/act-ocean/js/index.js
index c30ab6f..d4200a3 100644
--- a/view/peko/activity/act-ocean/js/index.js
+++ b/view/peko/activity/act-ocean/js/index.js
@@ -16,7 +16,7 @@ const showLoading = (content = '加載中...') => {
         type: 2,
         shadeClose: false,
         content,
-        success (e) {
+        success(e) {
             layerIndex = $(e).attr('index')
         }
     })
@@ -45,7 +45,7 @@ const getUserInfo = (param) => {
     networkRequest({
         type: 'GET',
         url: urlPrefix + '/act/luckySea/getUserActInfo',
-        success (res) {
+        success(res) {
             if (res.code === 200) {
 
                 $('.info-bottom .info-wrap .fragment-num span').text(res.data.todayReward);
@@ -63,7 +63,7 @@ const getUserInfo = (param) => {
                 return toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -73,7 +73,7 @@ const getUserPieceNum = () => {
     networkRequest({
         type: 'GET',
         url: urlPrefix + '/act/luckySea/getUserActInfo',
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 $('.info-bottom').find('.fragment span').html(res.data.diamonds)
                 myFragment = res.data.diamonds;
@@ -82,7 +82,7 @@ const getUserPieceNum = () => {
             }
             lock = !lock
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -94,7 +94,7 @@ const getGameMode = () => {
     networkRequest({
         type: 'GET',
         url: urlPrefix + '/act/luckySea/getTimeConfig',
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 modelType = res.data.modelType
                 getNewestAct()
@@ -102,7 +102,7 @@ const getGameMode = () => {
                 return toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -119,7 +119,7 @@ const getNewestAct = () => {
     networkRequest({
         type: 'GET',
         url: urlPrefix + '/act/luckySea/getNewestAct',
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 if ($.isEmptyObject(res.data) || res.data.status === 4) {
                     return showLoading('服務器正在維護中...')
@@ -166,7 +166,7 @@ const getNewestAct = () => {
                 return toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -207,7 +207,7 @@ const showView = () => {
         }
 
         $('.award-wrap').html('').show()
-        $('.award-info .desc').html('')
+        // $('.award-info .desc').html('')
 
         getPreviousResults(10, roundId)
         showCountDown(userComeinTime, startTime, drawStageStartTime)
@@ -373,7 +373,7 @@ const judgeStatus = () => {
     networkRequest({
         type: 'GET',
         url: urlPrefix + '/act/luckySea/getNewestAct',
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 console.log('res.data的值------------', res.data);
                 if ($.isEmptyObject(res.data) || res.data.status === 4) {
@@ -404,7 +404,7 @@ const judgeStatus = () => {
                 toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -416,41 +416,74 @@ const renderDrawInfo = () => {
     $('.draw-time .current-tip .current-result').html(drawInfo.drawName)
     $('.draw-pic img').attr('src', drawInfo.drawImageUrl)
 
-    if (isStatus3) {
-        if (drawInfo.userDrawResult.drawStatus === 1) {
-            $('.award-info .desc').html('恭喜你，猜中了！')
-            // if (modelType === 1) {
-            //     $('.award-wrap').html(`獲得 <span class="award-total">${drawInfo.userDrawResult.prizeDiamonds} </span>鉆石`)
-            // } else {
-            //     $('.award-wrap').html(`獲得 <span class="award-name">${drawInfo.userDrawResult.prizeName} </span>(<span class="awrad-price">${drawInfo.userDrawResult.prizePrice}</span>鉆)*<span class="award-num">${drawInfo.userDrawResult.prizeCount}</span>個 累計<span class="award-total">${drawInfo.userDrawResult.prizeDiamonds}</span>鉆石`)
-            // }
-        } else if (drawInfo.userDrawResult.drawStatus === 2) {
-            $('.award-info .desc').html('很遺憾，本輪未猜中')
-            $('.award-wrap').hide()
-        } else if (drawInfo.userDrawResult.drawStatus === 3) {
-            $('.award-info .desc').html('本輪未參與')
-            $('.award-wrap').hide()
-        }
-    }
+    // if (isStatus3) {
+    //     if (drawInfo.userDrawResult.drawStatus === 1) {
+    //         $('.award-info .desc').html('恭喜你，猜中了！')
+    //         // if (modelType === 1) {
+    //         //     $('.award-wrap').html(`獲得 <span class="award-total">${drawInfo.userDrawResult.prizeDiamonds} </span>鉆石`)
+    //         // } else {
+    //         //     $('.award-wrap').html(`獲得 <span class="award-name">${drawInfo.userDrawResult.prizeName} </span>(<span class="awrad-price">${drawInfo.userDrawResult.prizePrice}</span>鉆)*<span class="award-num">${drawInfo.userDrawResult.prizeCount}</span>個 累計<span class="award-total">${drawInfo.userDrawResult.prizeDiamonds}</span>鉆石`)
+    //         // }
+    //     } else if (drawInfo.userDrawResult.drawStatus === 2) {
+    //         $('.award-info .desc').html('很遺憾，本輪未猜中')
+    //         $('.award-wrap').hide()
+    //     } else if (drawInfo.userDrawResult.drawStatus === 3) {
+    //         $('.award-info .desc').html('本輪未參與')
+    //         $('.award-wrap').hide()
+    //     }
+    // }
+    $('.put-wrap .list .item').remove()
+    // 渲染投入列表
+    let list = ''
+    drawInfo.userDrawResult.drawRecords.map(res => {
+        list += `
+            <div class="item">
+                <p><img src="${res.imgUrl}" class="gift" alt=""></p>
+                <div>
+                    <img src="./images/diamond.png" class="diamond" alt="">
+                    <span class="in">${res.costPieceNum}</span>
+                </div>
+            </div>
+        `
+    });
+    $('.put-wrap .list').append(list)
+    $('.award-info .award-wrap').html(drawInfo.userDrawResult.prizeDiamonds)
 
     // 渲染前三名
     topThreeArr = drawInfo.rankUserList
     let str = ''
     if (topThreeArr.length === 0) {
         $('.topthree-desc').html('本輪無人猜中')
-        $('.top-three-list p img').attr('src', './images/default-hui.png')
+        $('.top-three-list').css('display', 'none')
+        $('.top-three').css('line-height', '4rem')
+        // $('.top-three-list p img').attr('src', './images/default-hui.png')
     } else {
-        $('.topthree-desc').html('本輪前三名')
+        $('.topthree-desc').html('本輪MVP')
+        $('.top-three-list').css('display', 'block')
+        $('.top-three').css('line-height', '0rem')
+        if (topThreeArr.length < 3) {
+            let arr = new Array(3 - topThreeArr.length).fill({
+                avatar: './images/default-hui.png',
+                nick: '虚位以待',
+                uid: null,
+                num: 0
+            })
+            topThreeArr.push(...arr)
+        };
         topThreeArr.map((item, index) => {
-            $('.top-three-list p img').eq(index).attr('src', item)
+            $(`.top-three-list .no${index + 1} .tx`).attr('uid', item.uid)
+            $(`.top-three-list .no${index + 1} .tx`).attr('src', item.avatar)
+            $(`.top-three-list .no${index + 1} .nick`).html(item.nick)
+            $(`.top-three-list .no${index + 1} .num span`).html(item.prizeDiamonds)
         })
-        if (topThreeArr.length === 1) {
-            $('.top-three-list p img').eq(1).attr('src', './images/default-hui.png')
-            $('.top-three-list p img').eq(2).attr('src', './images/default-hui.png')
-        } else if (topThreeArr.length === 2) {
-            $('.top-three-list p img').eq(2).attr('src', './images/default-hui.png')
-        }
     }
+
+    // 点击跳转个人主页
+    $('.draw-time .top-three .top-three-list .on').off()
+    $('.draw-time .top-three .top-three-list .on').click(function () {
+        let uid = $(this).find('.tx').attr('uid');
+        openPerson(uid)
+    })
 }
 
 // 獲取每一輪抽獎的相關配置
@@ -463,7 +496,7 @@ const getListItem = (roundId, type) => {
             roundId,
             type
         },
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 listItem = res.data
                 renderListItem()
@@ -471,7 +504,7 @@ const getListItem = (roundId, type) => {
                 toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -542,13 +575,13 @@ const getPreviousResults = (count, roundId) => {
             count,
             roundId
         },
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 previousResults = res.data
                 renderPreviousResults()
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
@@ -602,12 +635,23 @@ const sendUserDrawInfo = (itemId, num) => {
                 toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤，請退出重進')
         }
     })
 }
 
+//跳转个人主页
+function openPerson(uid) {
+    if (!browser.app) return
+    if (browser.ios) {
+        window.webkit.messageHandlers.openPersonPage.postMessage(uid);
+    } else if (browser.android) {
+        if (androidJsObj && typeof androidJsObj === 'object') {
+            window.androidJsObj.openPersonPage(uid);
+        }
+    }
+}
 
 /******************************************** 今日排名相關  ********************************************/
 
@@ -642,7 +686,7 @@ const getListRank = (type, page) => {
             page,
             pageSize
         },
-        success (res) {
+        success(res) {
             if (res.code === 200) {
                 if (type === 1) {
                     // 鉆石榜單
@@ -676,7 +720,7 @@ const getListRank = (type, page) => {
                 toastMsg(res.message)
             }
         },
-        error (err) {
+        error(err) {
             toastMsg('網絡錯誤')
         }
     })
@@ -1018,14 +1062,14 @@ $(function () {
     })
 
     // 播放3s動畫
-    let player1 = new SVGA.Player('.draw-time');
-    let parser1 = new SVGA.Parser('.draw-time');
-    parser1.load('./images/draw.svga', function (videoItem) {
-        // player.loops = 2;
-        player1.clearsAfterStop = false;
-        player1.setVideoItem(videoItem);
-        player1.startAnimation();
-    })
+    // let player1 = new SVGA.Player('.draw-time');
+    // let parser1 = new SVGA.Parser('.draw-time');
+    // parser1.load('./images/draw.svga', function (videoItem) {
+    //     // player.loops = 2;
+    //     player1.clearsAfterStop = false;
+    //     player1.setVideoItem(videoItem);
+    //     player1.startAnimation();
+    // })
 
     // 關閉碎片不足提示彈窗
     $('.cancel-btn').on('click', function () {