Skip to content

华
华夏模拟理财_20250701
Commit 1176016e authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

init

parent c8ffbbf7
Show whitespace changes
Inline Side-by-side
Showing with 124 additions and 108 deletions
mock/main.ts
View file @ 1176016e
...@@ -62,8 +62,8 @@ export default [ ...@@ -62,8 +62,8 @@ export default [
"titleImg": "//yun.duiba.com.cn/polaris/redpacket_tag.e917e7cffb11dbfe48822d0b977e19fb7bab9d21.png" "titleImg": "//yun.duiba.com.cn/polaris/redpacket_tag.e917e7cffb11dbfe48822d0b977e19fb7bab9d21.png"
} }
}), }),
"firstMoneyPop1": { "firstMoneyPop": {
"agreementText": "文案文案文案文案文案文案文案文案 文案文案文案文案", "notifyText": "文案文案文案文案文案文案文案文案 文案文文案文案文案文案文案 文案文文案文案文案文案文案 文案文文案文案文案文案文案 文案文文案文案文案文案文案 文案文文案文案文案文案文案 文案文文案文案文案文案文案 文案文案文案文案",
"experienceNum": 59442359 "experienceNum": 59442359
}, },
"virtualAssets": { "virtualAssets": {
......
src/assets/DetailPage/backBtn.png
View replaced file @ c8ffbbf7 View file @ 1176016e
src/assets/DetailPage/backBtn.png

1.59 KB | W: | H:

src/assets/DetailPage/backBtn.png

1.73 KB | W: | H:

src/assets/DetailPage/backBtn.png
src/assets/DetailPage/backBtn.png
src/assets/DetailPage/backBtn.png
src/assets/DetailPage/backBtn.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/DetailPage/DetailPage.module.less
View file @ 1176016e
...@@ -12,21 +12,16 @@ ...@@ -12,21 +12,16 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f2f5f7;
.topArea { .topArea {
width: 100%;
height: 360px;
flex-shrink: 0; flex-shrink: 0;
color: #fff; margin-top: 40px;
.topBg {
position: absolute;
left: 29px;
top: 35px;
width: 691px; width: 691px;
height: 299px; height: 299px;
color: #ffffff;
margin-bottom: 10px;
.webpBg("DetailPage/topBg.png"); .webpBg("DetailPage/topBg.png");
}
.productName { .productName {
position: absolute; position: absolute;
...@@ -37,7 +32,7 @@ ...@@ -37,7 +32,7 @@
font-size: 28px; font-size: 28px;
} }
.totalProfit{ .totalProfit {
position: absolute; position: absolute;
left: 0; left: 0;
top: 90px; top: 90px;
...@@ -47,7 +42,7 @@ ...@@ -47,7 +42,7 @@
font-weight: bold; font-weight: bold;
} }
.tranche{ .tranche {
position: absolute; position: absolute;
left: 40px; left: 40px;
top: 270px; top: 270px;
...@@ -57,8 +52,7 @@ ...@@ -57,8 +52,7 @@
font-weight: bold; font-weight: bold;
} }
.marketValue {
.marketValue{
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
...@@ -69,9 +63,9 @@ ...@@ -69,9 +63,9 @@
font-weight: bold; font-weight: bold;
} }
.yesterdayProfit{ .yesterdayProfit {
position: absolute; position: absolute;
right:40px; right: 40px;
top: 270px; top: 270px;
width: 30%; width: 30%;
text-align: center; text-align: center;
...@@ -80,22 +74,44 @@ ...@@ -80,22 +74,44 @@
} }
} }
.topArea2 {
flex-shrink: 0;
margin-top: 40px;
width: 691px;
height: 115px;
.webpBg("DetailPage/topBg2.png");
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
.productName {
//position: absolute;
//left: 0;
//top: 55px;
width: 100%;
text-align: center;
font-size: 28px;
}
}
.prodIframe { .prodIframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
//border: none; border: none;
border: 0;
} }
.options { .options {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 709px;
height: 465px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
.webpBg("DetailPage/bottomBg.png");
.tab { .tab {
position: absolute; position: absolute;
...@@ -142,14 +158,14 @@ ...@@ -142,14 +158,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&>div { & > div {
font-size: 32px; font-size: 32px;
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
&>span { & > span {
font-size: 29px; font-size: 29px;
color: rgb(155, 155, 155); color: rgb(155, 155, 155);
text-align: center; text-align: center;
...@@ -167,37 +183,6 @@ ...@@ -167,37 +183,6 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 29px; font-size: 29px;
} }
.buyTip {
margin-top: 14px;
font-size: 24px;
color: rgb(155, 155, 155);
text-align: left;
}
.buyBtn {
width: 100%;
height: 82px;
border-radius: 41px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
}
.simulateBuy {
margin-top: 30px;
background-color: rgb(188, 37, 28);
color: white;
}
.reallyBuy {
margin-top: 29px;
background-color: white;
color: #bc251c;
border: 1px solid #bc251c;
}
} }
.sell { .sell {
...@@ -212,14 +197,14 @@ ...@@ -212,14 +197,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&>div { & > div {
font-size: 32px; font-size: 32px;
color: rgb(50, 50, 50); color: rgb(50, 50, 50);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
&>span { & > span {
font-size: 29px; font-size: 29px;
color: rgb(155, 155, 155); color: rgb(155, 155, 155);
text-align: center; text-align: center;
...@@ -251,10 +236,27 @@ ...@@ -251,10 +236,27 @@
font-weight: bold; font-weight: bold;
} }
} }
}
.sellBtn { .tip {
margin-top: 14px;
font-size: 24px;
color: rgb(155, 155, 155);
text-align: left;
min-height: 30px;
}
.btnArea {
margin-top: 10px;
width: 100%; width: 100%;
height: 82px; height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
.btn {
width: 268px;
height: 82px;
border-radius: 41px; border-radius: 41px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -263,26 +265,26 @@ ...@@ -263,26 +265,26 @@
font-weight: bold; font-weight: bold;
} }
.simulate {
margin-top: 30px;
background-color: rgb(188, 37, 28);
color: white;
}
.reallyBuy { .really {
margin-top: 29px; margin-top: 29px;
background-color: white; background-color: white;
color: #bc251c; color: #bc251c;
border: 1px solid #bc251c; border: 1px solid #bc251c;
} }
.simulateSell {
margin-top: 30px;
background-color: rgb(188, 37, 28);
color: white;
}
} }
} }
.backBtn { .backBtn {
position: absolute; position: absolute;
left: 50px; left: 52px;
top: 50px; top: 83px;
width: 18px; width: 18px;
height: 32px; height: 32px;
.webpBg("DetailPage/backBtn.png"); .webpBg("DetailPage/backBtn.png");
......
src/pages/DetailPage/DetailPage.tsx
View file @ 1176016e
...@@ -175,31 +175,39 @@ class DetailPage extends React.Component<any, any> { ...@@ -175,31 +175,39 @@ class DetailPage extends React.Component<any, any> {
const isBuy = tabType == EOpType.Buy; const isBuy = tabType == EOpType.Buy;
const isBuyed = totalProfit || tranche || marketValue || yesterdayProfit; const isBuyed = totalProfit || tranche || marketValue || yesterdayProfit;
// const isBuyed = false;
return <div className={styles.DetailPage}> return <div className={styles.DetailPage}>
{isBuyed ? <div className={styles.topArea}> {isBuyed
<div className={styles.topBg}/> ? <div className={styles.topArea}>
<div className={styles.productName}>{productName}</div> <div className={styles.productName}>{productName}</div>
<div className={styles.totalProfit}>{totalProfit/100}</div> <div className={styles.totalProfit}>{totalProfit/100}</div>
<div className={styles.tranche}>{tranche/100}</div> <div className={styles.tranche}>{tranche/100}</div>
<div className={styles.marketValue}>{marketValue/100}</div> <div className={styles.marketValue}>{marketValue/100}</div>
<div className={styles.yesterdayProfit}>{yesterdayProfit/100}</div> <div className={styles.yesterdayProfit}>{yesterdayProfit/100}</div>
</div> : ""} </div>
: <div className={styles.topArea2}>
<div className={styles.topBg}/>
<div className={styles.productName}>{productName}</div>
</div>
}
<iframe className={styles.prodIframe} src={iframeUrl} /> <iframe className={styles.prodIframe} src={iframeUrl} />
<motion.div <motion.div className={styles.options}>
className={styles.options}
initial={{ height: 570 * remScale }}
// animate={{ height: (isBuy ? 570 : 400) * remScale }}
>
<div className={styles.tab}> <div className={styles.tab}>
<div <div
className={styles.tabItem} className={styles.tabItem}
style={{
color: tabType == EOpType.Buy ? "#bc251c" : "#000000"
}}
onClick={() => this.clickTab(EOpType.Buy)} onClick={() => this.clickTab(EOpType.Buy)}
>购买 >购买
</div> </div>
<div <div
className={styles.tabItem} className={styles.tabItem}
style={{
color: tabType == EOpType.Sell ? "#bc251c" : "#000000"
}}
onClick={() => this.clickTab(EOpType.Sell)} onClick={() => this.clickTab(EOpType.Sell)}
>赎回 >赎回
</div> </div>
...@@ -226,16 +234,20 @@ class DetailPage extends React.Component<any, any> { ...@@ -226,16 +234,20 @@ class DetailPage extends React.Component<any, any> {
value={buyInput} value={buyInput}
onChange={(e) => this.handleInputChange(e, 'buyInput')} onChange={(e) => this.handleInputChange(e, 'buyInput')}
/> />
<div className={styles.buyTip}>首次购买{minBuyLimit/100}元起 再次购买{minBuyLimit/100}元起 {minBuyLimit/100}元递增</div> <div className={styles.tip}>首次购买{minBuyLimit / 100}元起
再次购买{minBuyLimit / 100}元起 {minBuyLimit / 100}元递增
</div>
<div className={styles.btnArea}>
<Button <Button
className={classNames(styles.buyBtn, styles.simulateBuy, "md9")} className={classNames(styles.btn, styles.simulate, "md9")}
onClick={this.clickSimulateBuy} onClick={this.clickSimulateBuy}
>模拟买入</Button> >模拟买入</Button>
<Button <Button
className={classNames(styles.buyBtn, styles.reallyBuy, "md10")} className={classNames(styles.btn, styles.really, "md10")}
onClick={this.clickReallyBuy} onClick={this.clickReallyBuy}
>真实买入</Button> >真实买入</Button>
</div>
</motion.div> </motion.div>
<motion.div <motion.div
className={styles.sell} className={styles.sell}
...@@ -261,14 +273,14 @@ class DetailPage extends React.Component<any, any> { ...@@ -261,14 +273,14 @@ class DetailPage extends React.Component<any, any> {
}); });
}}>全部</Button> }}>全部</Button>
</div> </div>
<div className={styles.tip}>{" "}</div>
<div className={styles.btnArea}>
<Button <Button
className={classNames(styles.sellBtn, styles.simulateSell, "md13")} className={classNames(styles.btn, styles.simulate, "md13")}
style={{ width: "100%" }}
onClick={this.clickSimulateSell} onClick={this.clickSimulateSell}
>模拟赎回</Button> >模拟赎回</Button>
<Button </div>
className={classNames(styles.sellBtn, styles.reallyBuy, "md10")}
onClick={this.clickReallyBuy}
>真实买入</Button>
</motion.div> </motion.div>
</motion.div> </motion.div>
<Button <Button
......
src/panels/firstPop/firstPop.less
View file @ 1176016e
...@@ -9,18 +9,22 @@ ...@@ -9,18 +9,22 @@
.bg { .bg {
left: 82px; left: 82px;
top: 488px; top: 320px;
width: 585px; width: 585px;
height: 611px; height: 861px;
position: absolute; position: absolute;
.sparkBg("firstPop/bg.png"); .sparkBg("firstPop/bg.png");
background-size: 585px 611px;
background-color: #ffffff;
border-radius: 36px;
} }
.title { .title {
width: 585px; width: 585px;
position: absolute; position: absolute;
left: 82px; left: 82px;
top: 630px; top: 460px;
font-size: 36px; font-size: 36px;
color: rgba(1, 1, 1, 0.6); color: rgba(1, 1, 1, 0.6);
text-align: center; text-align: center;
...@@ -30,7 +34,7 @@ ...@@ -30,7 +34,7 @@
width: 585px; width: 585px;
position: absolute; position: absolute;
left: 82px; left: 82px;
top: 700px; top: 520px;
font-size: 90px; font-size: 90px;
color: rgb(211, 26, 25); color: rgb(211, 26, 25);
font-weight: bold; font-weight: bold;
...@@ -44,7 +48,7 @@ ...@@ -44,7 +48,7 @@
.happy_btn { .happy_btn {
left: 120px; left: 120px;
top: 931px; top: 1010px;
width: 510px; width: 510px;
height: 138px; height: 138px;
position: absolute; position: absolute;
...@@ -54,15 +58,14 @@ ...@@ -54,15 +58,14 @@
.check_box { .check_box {
position: absolute; position: absolute;
left: 159px; left: 159px;
top: 857px; top: 660px;
height: 35px;
line-height: 35px; line-height: 35px;
font-size: 24px; font-size: 24px;
color: rgb(155, 155, 155); color: rgb(155, 155, 155);
margin-bottom: 28px; margin-bottom: 28px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: start;
.check_icon { .check_icon {
flex-shrink: 0; flex-shrink: 0;
...@@ -85,7 +88,6 @@ ...@@ -85,7 +88,6 @@
.check_text { .check_text {
width: 380px; width: 380px;
max-height: 70px;
overflow-y: auto; overflow-y: auto;
} }
...@@ -93,7 +95,7 @@ ...@@ -93,7 +95,7 @@
.close { .close {
left: 346px; left: 346px;
top: 1186px; top: 1240px;
width: 58px; width: 58px;
height: 58px; height: 58px;
position: absolute; position: absolute;
......
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