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