倒计时

src/pages/GamePage/GamePage.tsx

@@ -17,6 +17,8 @@ import { Stats } from 'pixi-stats';
 import { System } from 'detect-collisions';
 import gameStore from "@/store/gameStore.ts";
 import { prefixInteger, second2Date } from "@/utils/utils.ts";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
+import SucPanel from "@/panels/SucPanel/SucPanel.tsx";
 
 export const collisionSys: System = new System();
 const DEBUG = true ;
@@ -60,6 +62,8 @@ class GamePage extends React.Component {
     await this.initStage();
 
     this.startCd();
+
+    ModalCtrl.showModal(SucPanel);
   }
 
   startCd = () => {

src/panels/FailPanel/FailPanel.less

-@import "../../res.less";
-
-.FailPanel {
-  width: 750px;
-  height: 1624px;
-  position: absolute;
-  left: 0;
-  top: 0;
-
-  .FailBg {
-    position: absolute;
-    left: 93px;
-    top: 538px;
-    width: 562px;
-    height: 349px;
-    .webpBg("FailPanel/bg.png");
-  }
-
-  .cancel {
-    position: absolute;
-    left: 132px;
-    top: 746px;
-    width: 233px;
-    height: 73px;
-    .webpBg("FailPanel/我知道了.png");
-  }
-
-  .again {
-    position: absolute;
-    left: 370px;
-    top: 739px;
-    width: 257px;
-    height: 95px;
-    .webpBg("FailPanel/再来一次.png");
-  }
-
-}

src/panels/PrizePanel/PrizePanel.tsx

@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import "./PrizePanel.less";
 import { Button } from "@grace/ui";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
-import FailPanel from "@/panels/FailPanel/FailPanel.tsx";
 
 
 export interface IPrizePanelProps {
@@ -26,7 +25,6 @@ class PrizePanel extends React.Component<IPrizePanelProps> {
   };
 
   clickGet = () => {
-    ModalCtrl.showModal(FailPanel);
   };
 
 

src/panels/SucPanel/SucPanel.less

+@import "../../res.less";
+
+.SucPanel {
+  width: 750px;
+  height: 1624px;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .bg {
+    position: absolute;
+    left: 153px;
+    top: 335px;
+    width: 444px;
+    height: 706px;
+    .webpBg("SucPanel/bg.png");
+  }
+
+  .rank {
+    font-size: 29px;
+    color: rgb(255, 255, 255);
+    line-height: 0.805;
+    position: absolute;
+    left: 0;
+    top: 430px;
+    width: 100%;
+    text-align: center;
+    text-shadow: 0 0 5px #16c8c2,
+    0 0 5px #16c8c2,
+    0 0 5px #16c8c2,
+    0 0 10px #16c8c2,
+    0 0 10px #16c8c2,
+    0 0 20px #16c8c2;
+  }
+
+  .score {
+    font-size: 96.09px;
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 555px;
+    width: 100%;
+    text-shadow: 0 0 5px #f3d71a,
+    0 0 5px #f3d71a,
+    0 0 5px #f3d71a,
+    0 0 10px #f3d71a,
+    0 0 10px #f3d71a;
+
+    span {
+      font-size: 32.34px;
+    }
+  }
+
+  .tip {
+    color: rgb(255, 255, 255);
+    font-size: 32.34px;
+    line-height: 0.882;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 685px;
+    width: 100%;
+
+    span {
+      margin-left: 10px;
+      font-size: 32.34px;
+      text-shadow: 0 0 5px #f3d71a,
+      0 0 5px #f3d71a,
+      0 0 5px #f3d71a,
+      0 0 10px #f3d71a,
+      0 0 10px #f3d71a;
+    }
+  }
+
+  .btn {
+    position: absolute;
+    left: 233px;
+    top: 904px;
+    width: 284px;
+    height: 90px;
+    .webpBg("SucPanel/btn.png");
+  }
+
+  .close {
+    position: absolute;
+    left: 341px;
+    top: 1065px;
+    width: 70px;
+    height: 70px;
+    .webpBg("SucPanel/close.png");
+  }
+
+}

src/panels/FailPanel/FailPanel.tsx → src/panels/SucPanel/SucPanel.tsx

 import React from "react";
 import {observer} from "mobx-react";
-import "./FailPanel.less";
+import "./SucPanel.less";
 import {Button} from "@grace/ui";
 import {_asyncThrottle} from "@/utils/utils.ts";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
-import PrizePanel from "@/panels/PrizePanel/PrizePanel.tsx";
 
 @observer
-class FailPanel extends React.Component {
+class SucPanel extends React.Component {
 
   componentDidMount() {
   }
 
-  clickCancel = () => {
-    ModalCtrl.showModal(PrizePanel, {
-      prizeVO: {  },
-    });
+  clickClose = () => {
+    ModalCtrl.closeModal();
   };
 
-  clickAgain = _asyncThrottle(async () => {
-    ModalCtrl.closeModal();
+  clickBtn = _asyncThrottle(async () => {
+
   });
 
   render() {
-    return <div className="FailPanel">
-      <div className="FailBg"/>
-
-      <Button className="cancel md12" onClick={this.clickCancel}/>
-      <Button className="again md13" onClick={this.clickAgain}/>
+    return <div className="SucPanel">
+      <div className="bg"/>
+      <div className="rank">当前排名:NO.78</div>
+      <div className="score">167<span>分</span></div>
+      <div className="tip">恭喜获得抽奖机会<span>+1</span></div>
+      <Button className="btn" onClick={this.clickBtn}/>
+      <Button className="close" onClick={this.clickClose}/>
     </div>;
   }
 }
 
-export default FailPanel;
+export default SucPanel;