Skip to content

2
20250711_TBGuardingLife
Commit 5713e9e5 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

init

parent 597b3e15
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 263 deletions
src/pages/LifeSettingPage/LifeSettingPage.jsx
View file @ 5713e9e5
......@@ -3,8 +3,8 @@ 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";
import {SettingCfg} from "@src/pages/LifeSettingPage/SettingCfg";
@observer
class LifeSettingPage extends React.Component {
......@@ -25,54 +25,23 @@ class LifeSettingPage extends React.Component {
render() {
const {quesIndex, chooseIndex} = this.state;
const {stage, bg, titleImg, answer} = QuestionCfg[quesIndex];
const {titleImg, answer} = SettingCfg[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>
return <div className="LifeSettingPage modal_center">
<div className="bg"/>
<div className="title"/>
<img className="quesTitle" src={titleImg}/>
<div className="answerArea">
{answer.map((item, index) => {
return <div className="answerItem" onClick={this.clickItem.bind(this, index)}>
<img src={item.img}/>
{chooseIndex === index && <div className="choose"/>}
</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>;
}
......
src/pages/LifeSettingPage/LifeSettingPage.less
View file @ 5713e9e5
......@@ -13,139 +13,68 @@
top: 0;
width: 750px;
height: 1624px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: left top;
.webpBg("LifeSettingsPage/bg.jpg");
}
.stage {
font-size: 34px;
line-height: 0;
color: rgb(0, 0, 0);
.title {
position: absolute;
left: 190px;
top: 208px;
width: 369px;
height: 55px;
.webpBg("LifeSettingsPage/title.png");
}
.quesTitle {
position: absolute;
left: 0;
top: 241px;
width: 750px;
height: 59px;
display: flex;
align-items: center;
justify-content: center;
left: 27px;
top: 309px;
width: 648px;
height: 73px;
}
.fundsArea {
.answerArea {
position: absolute;
left: 0;
top: 837px;
width: 100%;
height: 70px;
left: 16px;
right: 16px;
top: 418px;
bottom: 369px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
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;
.answerItem {
position: relative;
width: 358px;
height: 416px;
span {
margin-left: -12px;
margin-right: 4px;
color: #008bdb;
font-size: 52px;
img {
width: 100%;
height: 100%;
}
}
}
.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;
.choose {
position: absolute;
left: 10px;
top: 2px;
width: 342px;
height: 400px;
.webpBg("LifeSettingsPage/选择框.png");
}
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;
left: 185px;
top: 1321px;
width: 380px;
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");
}
}
.webpBg("LifeSettingsPage/开始测试灰.png");
}
}
src/pages/LifeSettingPage/QuestionCfg.js deleted 100644 → 0
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/pages/LifeSettingPage/SettingCfg.js 0 → 100644
View file @ 5713e9e5
import {RES_PATH} from "../../../sparkrc";
export const SettingCfg = [
{
titleImg: RES_PATH + "LifeSettingsPage/ageTitle.png",
answer: [
{
img: RES_PATH + 'LifeSettingsPage/0岁.png',
},
{
img: RES_PATH + 'LifeSettingsPage/10岁.png',
},
{
img: RES_PATH + 'LifeSettingsPage/20岁.png',
},
{
img: RES_PATH + 'LifeSettingsPage/30岁.png',
},
],
},
{
titleImg: RES_PATH + "LifeSettingsPage/cityTitle.png",
answer: [
{
img: RES_PATH + 'LifeSettingsPage/一线.png',
},
{
img: RES_PATH + 'LifeSettingsPage/二线.png',
},
{
img: RES_PATH + 'LifeSettingsPage/三线.png',
},
{
img: RES_PATH + 'LifeSettingsPage/三线外.png',
},
],
},
{
titleImg: RES_PATH + "LifeSettingsPage/familyTitle.png",
answer: [
{
img: RES_PATH + 'LifeSettingsPage/两口.png',
},
{
img: RES_PATH + 'LifeSettingsPage/三口.png',
},
{
img: RES_PATH + 'LifeSettingsPage/四口.png',
},
{
img: RES_PATH + 'LifeSettingsPage/更多.png',
},
],
},
]
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