Skip to content

2
20250711_TBGuardingLife
Commit 597b3e15 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

init

parent 0f7d92b9
Hide whitespace changes
Inline Side-by-side
Showing with 344 additions and 3 deletions
src/app.jsx
View file @ 597b3e15
......@@ -22,6 +22,7 @@ import Drawpage from "./pages/drawpage/drawpage";
import Resultpage from "./pages/resultpage/resultpage";
import MiddlePageNew from "@src/pages/middlePageNew/middlePageNew";
import { loadOneFont } from "./utils/preload1.3";
import LifeSettingPage from "@src/pages/LifeSettingPage/LifeSettingPage";
/**
* 所有页面场景
......@@ -34,6 +35,7 @@ const pageMap = {
[PAGE_MAP.DRAW_PAGE]: <Drawpage />,
[PAGE_MAP.RESU_PAGE]: <Resultpage />,
[PAGE_MAP.MID_PAGE]: <MiddlePageNew />,
[PAGE_MAP.LIFE_SETTING_PAGE]: <LifeSettingPage />,
};
@observer
......
src/pages/LifeSettingPage/LifeSettingPage.jsx 0 → 100644
View file @ 597b3e15
import React from "react";
import {observer} from "mobx-react";
import "./LifeSettingPage.less";
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";
@observer
class LifeSettingPage extends React.Component {
state = {
quesIndex: 0,
chooseIndex: null,
};
componentDidMount() {
}
clickItem(index) {
this.setState({
chooseIndex: index,
});
}
render() {
const {quesIndex, chooseIndex} = this.state;
const {stage, bg, titleImg, answer} = QuestionCfg[quesIndex];
// 当前题目
return <div className="answerpage modal_center">
<div
className="bg"
style={{
backgroundImage: `url(${bg})`,
}}
/>
<div className="stage">{stage}</div>
<div className="fundsArea">
<div className="funds">当前资金：<span>8000</span>万</div>
</div>
<div className="quesArea">
<div className="queIndex">
<span>{quesIndex + 1}</span>
<text>/</text>
6
</div>
<div className="questionArea">
<img
src={titleImg}
style={{
transformOrigin: 'top left',
transform: `scale(${window.remScale}) translateY(50%)`
}}
/>
</div>
<div className="answerArea">
{answer.map((item, index) => {
const cls = classNames(
"answerItem",
{
active: index === chooseIndex,
}
);
return <div
className={cls}
onClick={this.clickItem.bind(this, index)}
>{item.txt}</div>
})}
</div>
</div>
<Button className="confirm"/>
</div>;
}
}
export default LifeSettingPage;
src/pages/LifeSettingPage/LifeSettingPage.less 0 → 100644
View file @ 597b3e15
@import "../../res.less";
.LifeSettingPage {
width: 750px;
height: 1624px;
left: 0;
top: 0;
position: absolute;
.bg {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: left top;
}
.stage {
font-size: 34px;
line-height: 0;
color: rgb(0, 0, 0);
position: absolute;
left: 0;
top: 241px;
width: 750px;
height: 59px;
display: flex;
align-items: center;
justify-content: center;
}
.fundsArea {
position: absolute;
left: 0;
top: 837px;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
.funds {
height: 100%;
border: white 1px solid;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.6);
padding: 0 25px;
color: #353535;
font-size: 28px;
font-weight: bold;
line-height: 68px;
span {
margin-left: -12px;
margin-right: 4px;
color: #008bdb;
font-size: 52px;
}
}
}
.quesArea {
position: absolute;
left: 10px;
top: 941px;
width: 730px;
height: 567px;
.webpBg("answerPage/queBg.png");
.queIndex {
position: absolute;
right: 26px;
font-size: 34.38px;
color: rgb(255, 255, 255);
text-align: left;
top: 30px;
transform: rotate(10deg);
span {
font-size: 42.31px;
}
text {
margin: 0 4px;
font-size: 33.05px;
}
}
}
.questionArea {
position: absolute;
left: 55px;
top: 32px;
width: 540px;
height: 80px;
display: flex;
align-items: center;
justify-content: left;
}
.confirm {
position: absolute;
left: 217px;
top: 1404px;
width: 316px;
height: 97px;
.webpBg("answerPage/按钮.png");
}
.answerArea {
position: absolute;
left: 0;
top: 146px;
width: 100%;
height: 288px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.answerItem {
width: 632px;
height: 80px;
padding-left: 34px;
.webpBg("answerPage/normalBg.png");
font-size: 28px;
line-height: 28px;
//font-weight: bold;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: start;
color: #353535;
font-weight: 500;
&.active {
color: white;
font-weight: 500;
.webpBg("answerPage/chooseBg.png");
}
}
}
}
src/pages/LifeSettingPage/QuestionCfg.js 0 → 100644
View file @ 597b3e15
import {RES_PATH} from "../../../sparkrc";
export const QuestionCfg = [
{
stage: "童年守护（12岁）",
bg: RES_PATH + "answerPage/bg1.jpg",
title: "你在12岁这年攒够了5000压岁钱， 你会为自己选择什么生日礼物？",
titleImg: RES_PATH + "answerPage/q1.png",
answer: [
{
txt: 'A.购买一辆山地自行车',
},
{
txt: 'B.报名参加暑期夏令营',
},
{
txt: 'C.把钱存到储物罐中以后再花',
},
],
},
{
stage: "初入社会（22岁）",
bg: RES_PATH + "answerPage/bg2.jpg",
title: "你在这一年读完了大学，站在了人 生的十字路口，你的选择是？",
titleImg: RES_PATH + "answerPage/q2.png",
answer: [
{
txt: 'A.继续攻读研究生',
},
{
txt: 'B.在公司内拉帮结派，建立小团体孤立他人',
},
{
txt: 'C.在工作之余寻找兼职',
},
],
},
{
stage: "结婚（32岁）",
bg: RES_PATH + "answerPage/bg3.jpg",
title: "一转眼小孩也能打酱油了，你会为 小孩做什么呢？",
titleImg: RES_PATH + "answerPage/q3.png",
answer: [
{
txt: 'A.购买金生无忧（2024）儿童保险计划',
},
{
txt: 'B.请保姆加强照护',
},
{
txt: 'C.周末陪孩子出去玩，平时就放养了',
},
],
},
{
stage: "事业有成（40岁）",
bg: RES_PATH + "answerPage/bg4.jpg",
title: "你在公司呆了多年，现在有一份晋 升机会摆在你面前，你的选择是？",
titleImg: RES_PATH + "answerPage/q4.png",
answer: [
{
txt: 'A.你觉得前途无望，跳槽前往隔壁公司',
},
{
txt: 'B.铤而走险贿赂上级',
},
{
txt: 'C.自费读EMBA提升自己',
},
],
},
{
stage: "资产配置（50岁）",
bg: RES_PATH + "answerPage/bg5.jpg",
title: "你会如何配置投资进行资产提升？",
titleImg: RES_PATH + "answerPage/q5.png",
answer: [
{
txt: 'A.炒股',
},
{
txt: 'B.投资实体产业',
},
{
txt: 'C.购买保险理财，选择太保鑫禧年年年金',
},
],
},
{
stage: "养老规划（60岁）",
bg: RES_PATH + "answerPage/bg6.jpg",
title: "在对家中进行适老化改造的同时，你会如何为自己的养老生活增添保障呢",
titleImg: RES_PATH + "answerPage/q6.png",
answer: [
{
txt: 'A.投保金生无忧（2024）成人保险计划',
},
{
txt: 'B.旅居养老',
},
{
txt: 'C.入住太保家园',
},
],
},
]
src/store/index.js
View file @ 597b3e15
......@@ -22,7 +22,7 @@ const store = makeAutoObservable({
Did1NjA4NjM: PAGE_MAP.MID_PAGE,
// 免登中间页-线上正式
Did1NjA4NzE: PAGE_MAP.MID_PAGE,
}[skinId] || PAGE_MAP.QUES_PAGE,
}[skinId] || PAGE_MAP.LIFE_SETTING_PAGE,
pageData: {},
......
src/utils/constants.js
View file @ 597b3e15
......@@ -21,7 +21,8 @@ export const PAGE_MAP = {
PRIZE_PAGE: "prizePage",
MID_PAGE: "midPage",
QUES_PAGE: "quesPage",
RESU_PAGE: "resultPage"
RESU_PAGE: "resultPage",
LIFE_SETTING_PAGE: "LIFE_SETTING_PAGE",
};
......@@ -428,4 +429,4 @@ export const ROLE_MAP = {
productName: "金生无忧2024（成人版)保险产品计划",
productLink: "https://yun.duiba.com.cn/polaris/%E9%87%91%E7%94%9F%E6%97%A0%E5%BF%A7%EF%BC%88%E6%88%90%E4%BA%BA%EF%BC%89.46c5cd14e1c5e4bfe4cf6950bc407add9e5671ae.jpg",
},
}
\ No newline at end of file
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment