init

src/components/CarvePanel/CarvePanel.jsx

@@ -4,6 +4,8 @@ import "./CarvePanel.less";
 import { Button } from "@src/components/Button";
 import modalStore from "@src/store/modal";
 import store from "@src/store";
+import { SvgaPlayer } from "@spark/svgaplayer";
+import { RES_PATH } from "../../../sparkrc";
 
 @observer
 class CarvePanel extends React.Component {
@@ -23,6 +25,7 @@ class CarvePanel extends React.Component {
 
   render() {
     return <div className="CarvePanel modal_center">
+      <SvgaPlayer className="effect" src={RES_PATH + "svga/4输出弹窗氛围.svga"}/>
       <div className="bg"/>
       <div className="txt">一共有{store.setIndex.newAssistUser}位好友助力</div>
       <Button className="btn" onClick={this.clickOk} />

src/components/CarvePanel/CarvePanel.less

@@ -16,6 +16,14 @@
     .sparkBg("CarvePanel/bg.png")
   }
 
+  .effect {
+    position: absolute;
+    left: 0;
+    top: 170px;
+    width: 750px;
+    height: 1145px
+  }
+
   .btn {
     position: absolute;
     left: 228px;

src/components/RankPrizePop/RankPrizePop.jsx

 import React from "react";
-import {observer} from "mobx-react";
+import { observer } from "mobx-react";
 import "./RankPrizePop.less";
-import {Button} from "@src/components/Button";
+import { Button } from "@src/components/Button";
 import modalStore from "@src/store/modal";
-import {SvgaPlayer} from "@spark/svgaplayer";
-import {RES_PATH} from "../../../sparkrc";
+import { SvgaPlayer } from "@spark/svgaplayer";
+import { RES_PATH } from "../../../sparkrc";
 
 @observer
 class RankPrizePop extends React.Component {
 
   clickClose = () => {
     modalStore.closePop();
-  }
+  };
 
   render() {
-    const {data} = this.props.popData;
+    const { data } = this.props.popData;
     return <div className="RankPrizePop modal_center">
-      <SvgaPlayer className="light" src={RES_PATH + "SVG/6输出礼盒氛围.svga"}/>
-      <div className="bg">
-        <div className="rankText">
-          最终排名为{data?.rank}
-        </div>
-          <img className="prizeImg" src={data?.prizeImg}/>
-          <div className="prizeText">
-            {data?.prizeName}
-          </div>
-        <div className="txt">
-          奖品可在首页_我的奖品中查看
-        </div>
-      </div>
-      <Button className="happy md40" onClick={this.clickClose}/>
-      <Button className="close" onClick={this.clickClose}/>
+      <SvgaPlayer className="effect" src={RES_PATH + "svga/4输出弹窗氛围.svga"} />
+      <div className="bg"/>
+      <div className="rankText">最终排名为{data?.rank}</div>
+      <img className="prizeImg" src={data?.prizeImg} />
+      <div className="prizeText">{data?.prizeName}</div>
+      <Button className="happy" onClick={this.clickClose} />
+      <Button className="close" onClick={this.clickClose} />
     </div>;
   }
 }

src/components/RankPrizePop/RankPrizePop.less

@@ -6,85 +6,71 @@
   top: 0;
   width: 750px;
   height: 1624px;
-  .light {
+
+  .effect {
     position: absolute;
-    left: 0px;
-    top: 350px;
+    left: 0;
+    top: 170px;
     width: 750px;
-    height: 966px;
+    height: 1145px;
   }
 
   .bg {
     position: absolute;
-    left: 56px;
-    top: 337px;
-    width: 620px;
-    height: 865px;
+    left: 99px;
+    top: 250px;
+    width: 553px;
+    height: 859px;
     .sparkBg("RankPrizePop/bg.png")
   }
 
   .rankText {
-    font-size: 24px;
-    color: rgb(239, 125, 30);
-    text-transform: uppercase;
-    line-height: 3.2;
+    font-size: 30px;
+    color: #333333;
     position: absolute;
-    left: 60px;
-    top: 305px;
+    left: 0;
+    top: 530px;
     text-align: center;
-    width: 500px;
+    width: 750px;
     .lineClamp1()
   }
 
   .prizeImg {
+    border-radius: 37px;
+    background-color: rgb(223, 185, 126);
     position: absolute;
-    left: 207px;
-    top: 425px;
-    width: 220px;
-    height: 220px;
-    .sparkBg("RankPrizePop/prizePicture.png")
+    left: 245px;
+    top: 590px;
+    width: 261px;
+    height: 261px;
   }
 
   .prizeText {
-    color: #ef7d1e;
-    font-size: 24px;
-    line-height: 2;
+    font-size: 30px;
+    color: #333333;
     position: absolute;
-    left: 85px;
-    top: 651px;
+    left: 150px;
+    top: 860px;
     text-align: center;
     width: 450px;
-    .lineClamp1()
-  }
-
-  .txt {
-    font-size: 19px;
-    color: rgb(204, 135, 70);
-    text-transform: uppercase;
-    line-height: 1.2;
-    text-align: center;
-    position: absolute;
-    left: 60px;
-    width: 500px;
-    top: 805px;
+    .lineClamp1();
   }
 
-
   .happy {
     position: absolute;
-    left: 199px;
-    top: 1029px;
-    width: 348px;
-    height: 102px;
-    .sparkBg("common/happyBtn.png")
+    left: 228px;
+    top: 928px;
+    width: 310px;
+    height: 95px;
+    .sparkBg("RankPrizePop/btn.png")
   }
 
   .close {
     position: absolute;
     left: 345px;
-    top: 1243px;
-    width: 61px;
-    height: 61px;
+    top: 1160px;
+    width: 60px;
+    height: 60px;
     .sparkBg("common/closeBtn.png")
   }
 }

src/store/index.js

@@ -136,11 +136,11 @@ const store = makeAutoObservable({
     }
 
     // 排行榜弹窗
-    if (this.setIndex?.rankPop?.needPop) {
-      if (this.setIndex?.rankPop.result) {
-        modalStore.pushPop("RankPrizePop", { data: this.setIndex?.rankPop });
+    if (this.setIndex?.rankPopInfo) {
+      if (this.setIndex.rankPopInfo.boolReward) {
+        modalStore.pushPop("RankPrizePop", { data: this.setIndex?.rankPopInfo });
       } else {
-        modalStore.pushPop("RankNoPrizePop", { data: this.setIndex?.rankPop });
+        modalStore.pushPop("RankNoPrizePop", { data: this.setIndex?.rankPopInfo });
       }
     }
   },