init

src/components/EventPanel/EventPanel.jsx

+import React from "react";
+import {observer} from "mobx-react";
+import "./EventPanel.less";
+
+@observer
+class EventPanel extends React.Component {
+
+  componentDidMount() {
+  }
+
+
+  render() {
+    const {event, call} = this.props.popData;
+
+    // 当前题目
+    return <div className="EventPanel modal_center">
+      <img className="bg" src={event.bg}/>
+      <div className="txt" dangerouslySetInnerHTML={{__html: event.txt}}/>
+      <div className="next">点击屏幕继续游戏</div>
+    </div>;
+  }
+}
+
+export default EventPanel;

src/components/EventPanel/EventPanel.less

+@import "../../res.less";
+
+.EventPanel {
+  width: 750px;
+  height: 1624px;
+  left: 0;
+  top: 0;
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 750px;
+    height: 1624px;
+  }
+
+  .txt {
+    color: rgb(255, 255, 255);
+    line-height: 1.5;
+    text-align: center;
+    font-size: 32px;
+    margin-top: 958px;
+  }
+
+  .next {
+    color: rgb(255, 255, 255);
+    text-align: center;
+    font-size: 26px;
+    margin-top: 158px;
+  }
+
+}

src/modal/modal.jsx

@@ -14,6 +14,7 @@ import LongImgPop from "@src/components/longImgPop/longImgPop";
 import LongImgPop2 from "@src/components/longImgPop2/longImgPop2";
 import Videopop from "@src/components/videopop/videopop";
 import ExitPop from "@src/components/exitPop/exitPop";
+import EventPanel from "@src/components/EventPanel/EventPanel";
 /**
  * 弹窗配置
 */
@@ -29,7 +30,8 @@ export const cfg = {
   ExitPop,
   LongImgPop,
   LongImgPop2,
-  Videopop
+  Videopop,
+  EventPanel,
 };
 
 @observer
@@ -80,4 +82,4 @@ class Modal extends Component {
 
 }
 
-export default Modal;
+export default Modal;
\ No newline at end of file

src/pages/answerpage/QuestionCfg.js

@@ -9,12 +9,30 @@ export const QuestionCfg = [
     answer: [
       {
         txt: 'A.购买一辆山地自行车',
+        event: {
+          name: "不慎摔倒",
+          bg: RES_PATH + "EventPanel/不慎摔倒.png",
+          txt: "你在周末骑行时不慎摔倒，<br/>父母购买了医疗保险 -0",
+          money: -0.5,
+        }
       },
       {
         txt: 'B.报名参加暑期夏令营',
+        event: {
+          name: "不慎摔倒",
+          bg: RES_PATH + "EventPanel/夏令营不慎摔倒.png",
+          txt: "不慎滑倒，花钱治疗 -5000",
+          money: -0.5,
+        }
       },
       {
         txt: 'C.把钱存到储物罐中以后再花',
+        event: {
+          name: "家长奖励",
+          bg: RES_PATH + "EventPanel/家长奖励.png",
+          txt: "父母很满意，奖励了你5000元",
+          money: 0.5,
+        }
       },
     ],
   },
@@ -26,12 +44,30 @@ export const QuestionCfg = [
     answer: [
       {
         txt: 'A.继续攻读研究生',
+        event: {
+          name: "获得文凭",
+          bg: RES_PATH + "EventPanel/获得文凭.png",
+          txt: "你成功获得了硕士文凭",
+          money: 0,
+        }
       },
       {
         txt: 'B.在公司内拉帮结派，建立小团体孤立他人',
+        event: {
+          name: "惨遭辞退",
+          bg: RES_PATH + "EventPanel/惨遭辞退.png",
+          txt: "被老板发现，惨遭辞退",
+          money: -15,
+        }
       },
       {
         txt: 'C.在工作之余寻找兼职',
+        event: {
+          name: "财富提升",
+          bg: RES_PATH + "EventPanel/财富提升.png",
+          txt: "辛勤工作 +10w",
+          money: 10,
+        }
       },
     ],
   },
@@ -43,12 +79,30 @@ export const QuestionCfg = [
     answer: [
       {
         txt: 'A.购买金生无忧（2024）儿童保险计划',
+        event: {
+          name: "获得保障",
+          bg: RES_PATH + "EventPanel/获得保障.png",
+          txt: "为你的孩子增添了一份良好的医疗保障",
+          money: 0,
+        }
       },
       {
         txt: 'B.请保姆加强照护',
+        event: {
+          name: "钱包发瘪",
+          bg: RES_PATH + "EventPanel/钱包发瘪.png",
+          txt: "为保姆认真负责，小孩茁长成长，<br/>就是钱包瘪了下去-20w",
+          money: -20,
+        }
       },
       {
         txt: 'C.周末陪孩子出去玩，平时就放养了',
+        event: {
+          name: "不慎受伤",
+          bg: RES_PATH + "EventPanel/不慎受伤.png",
+          txt: "孩子出去玩时不慎受伤 -10w",
+          money: -10,
+        }
       },
     ],
   },
@@ -60,12 +114,30 @@ export const QuestionCfg = [
     answer: [
       {
         txt: 'A.你觉得前途无望，跳槽前往隔壁公司',
+        event: {
+          name: "古井无波",
+          bg: RES_PATH + "EventPanel/古井无波.png",
+          txt: "工作生活并没有变得更好 +0",
+          money: 0,
+        }
       },
       {
         txt: 'B.铤而走险贿赂上级',
+        event: {
+          name: "职场风波",
+          bg: RES_PATH + "EventPanel/职场风波.png",
+          txt: "被发现，惨遭严肃调查 -100w",
+          money: -100,
+        }
       },
       {
         txt: 'C.自费读EMBA提升自己',
+        event: {
+          name: "完成晋升",
+          bg: RES_PATH + "EventPanel/晋升.png",
+          txt: "成功晋升，年增加  +30w",
+          money: 30,
+        }
       },
     ],
   },
@@ -77,12 +149,30 @@ export const QuestionCfg = [
     answer: [
       {
         txt: 'A.炒股',
+        event: {
+          name: "股市震荡",
+          bg: RES_PATH + "EventPanel/股市震荡.png",
+          txt: "遇到股市震荡，及时抽身，损失不大 -10w",
+          money: -10,
+        }
       },
       {
         txt: 'B.投资实体产业',
+        event: {
+          name: "电商震荡",
+          bg: RES_PATH + "EventPanel/电商震荡.png",
+          txt: "恰好遇到电商热潮，实体产业损失惨重 -100w",
+          money: -100,
+        }
       },
       {
         txt: 'C.购买保险理财，选择太保鑫禧年年年金',
+        event: {
+          name: "分红致富",
+          bg: RES_PATH + "EventPanel/分红致富.png",
+          txt: "获得分红收益 +40w",
+          money: 40,
+        }
       },
     ],
   },
@@ -94,12 +184,30 @@ export const QuestionCfg = [
     answer: [
       {
         txt: 'A.投保金生无忧（2024）成人保险计划',
+        event: {
+          name: "获得保障",
+          bg: RES_PATH + "EventPanel/获得保障2.png",
+          txt: "随着年龄的增加，你的身体也陆陆续续<br/>出现了一些较为严重的疾病，<br/>但是通过该保险计划四合一的重症轻症多重保障，<br/>大大减少了在重疾治疗上的花费。",
+          money: 0,
+        }
       },
       {
         txt: 'B.旅居养老',
+        event: {
+          name: "不慎摔伤",
+          bg: RES_PATH + "EventPanel/不慎摔伤.png",
+          txt: "在一次旅途中不慎摔伤，体检中查出了身体<br/>出现了一些疾病，治疗费用-50w。",
+          money: -50,
+        }
       },
       {
         txt: 'C.入住太保家园',
+        event: {
+          name: "生活美满",
+          bg: RES_PATH + "EventPanel/生活美满.png",
+          txt: "获得了良好的康养管家服务体验。-10w",
+          money: -10,
+        }
       },
     ],
   },

src/pages/answerpage/answerpage.jsx

@@ -5,6 +5,7 @@ import {_asyncThrottle, _throttle, waitTime} from "@src/utils/utils";
 import {Button} from "@src/components/Button";
 import {QuestionCfg} from "@src/pages/answerpage/QuestionCfg";
 import classNames from "classnames";
+import modalStore from "@src/store/modal";
 
 @observer
 class Answerpage extends React.Component {
@@ -26,6 +27,28 @@ class Answerpage extends React.Component {
     });
   }
 
+
+  goNext(money) {
+    this.setState({
+      chooseIndex: null,
+      quesIndex: this.state.quesIndex + 1,
+      funds: this.state.funds + money,
+    });
+  }
+
+  clickNext = () => {
+    const {quesIndex, chooseIndex, funds} = this.state;
+
+    const {event} = QuestionCfg[quesIndex].answer[chooseIndex];
+
+    modalStore.pushPop("EventPanel", {
+      event,
+      call: () => {
+        this.goNext(event.money);
+      }
+    });
+  }
+
   render() {
     const {quesIndex, chooseIndex, funds} = this.state;
 
@@ -77,7 +100,7 @@ class Answerpage extends React.Component {
           })}
         </div>
       </div>
-      <Button className="confirm"/>
+      <Button className="confirm" onClick={this.clickNext}/>
     </div>;
   }
 }