Skip to content

华
华夏模拟理财_20250701
Commit a4e22cbb authored by 俞嘉婷's avatar 俞嘉婷
Browse files
Options

feat: 持仓产品详情页 布局样式调整

parent d2be9932
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 99 deletions
src/assets/DetailPage/backBtn.png
View replaced file @ d2be9932 View file @ a4e22cbb
src/assets/DetailPage/backBtn.png

1.73 KB | W: | H:

src/assets/DetailPage/backBtn.png

1.58 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/assets/DetailPage/bottomBg.png
View replaced file @ d2be9932 View file @ a4e22cbb
src/assets/DetailPage/bottomBg.png

8.32 KB | W: | H:

src/assets/DetailPage/bottomBg.png

198 KB | W: | H:

src/assets/DetailPage/bottomBg.png
src/assets/DetailPage/bottomBg.png
src/assets/DetailPage/bottomBg.png
src/assets/DetailPage/bottomBg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/DetailPage/topBg.png
View replaced file @ d2be9932 View file @ a4e22cbb
src/assets/DetailPage/topBg.png

9.33 KB | W: | H:

src/assets/DetailPage/topBg.png

64.3 KB | W: | H:

src/assets/DetailPage/topBg.png
src/assets/DetailPage/topBg.png
src/assets/DetailPage/topBg.png
src/assets/DetailPage/topBg.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/DetailPage/DetailPage.module.less
View file @ a4e22cbb
......@@ -17,65 +17,62 @@
.topArea {
position: relative;
flex-shrink: 0;
margin-top: 40px;
width: 691px;
// height: 299px;
height: 254px;
margin-top: 30px;
width: 716px;
height: 302px;
color: #ffffff;
// margin-bottom: 10px;
// .webpBg("DetailPage/topBg.png");
border-radius: 13px;
background-image: linear-gradient( 0deg, rgb(170,52,39) 0%, rgb(199,68,54) 100%);
margin-bottom: -10px;
.webpBg("DetailPage/topBg.png");
text-align: center;
.productName {
position: absolute;
left: 149px;
top: 0;
width: 393px;
height: 42px;
line-height: 42px;
text-align: center;
font-size: 28px;
background-image: linear-gradient( 0deg, #a5281e 0%, #a2261d 100%);
border-radius: 0 0 13px 13px;
left: 159px;
top: 4px;
width: 408px;
height: 50px;
line-height: 50px;
font-size: 32px;
color: #FFFFFF;
font-weight: bold;
.lineClamp1();
}
.label1 {
position: absolute;
left: 0;
top: 45px;
top: 59px;
width: 100%;
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
text-align: center;
color: #333333;
}
.totalProfit {
position: absolute;
left: 0;
top: 80px;
top: 114px;
width: 100%;
font-size: 58px;
font-size: 46px;
color: #D90300;
font-weight: bold;
text-align: center;
}
.label2 {
position: absolute;
left: 22px;
top: 166px;
top: 190px;
width: 30%;
font-size: 22px;
color: rgba(255, 255, 255, 0.6);
font-size: 24px;
color: #666666;
}
.tranche {
position: absolute;
left: 22px;
top: 198px;
top: 226px;
width: 30%;
font-size: 30px;
font-size: 36px;
color: #232323;
font-weight: bold;
}
......@@ -83,65 +80,64 @@
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 166px;
top: 190px;
width: 30%;
font-size: 22px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 24px;
color: #666666;
}
.marketValue {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 198px;
top: 226px;
width: 30%;
text-align: center;
font-size: 30px;
font-size: 36px;
color: #232323;
font-weight: bold;
}
.label4 {
position: absolute;
right: 22px;
top: 166px;
top: 190px;
width: 30%;
font-size: 22px;
text-align: right;
color: rgba(255, 255, 255, 0.6);
font-size: 24px;
color: #666666;
}
.yesterdayProfit {
position: absolute;
right: 22px;
top: 198px;
top: 226px;
width: 30%;
text-align: right;
font-size: 30px;
font-size: 36px;
color: #232323;
font-weight: bold;
}
}
.topArea2 {
flex-shrink: 0;
margin-top: 40px;
width: 691px;
height: 115px;
.webpBg("DetailPage/topBg2.png");
color: #ffffff;
width: 750px;
height: 110px;
background: #FCDBDB;
box-shadow: 0 3px 8px 0 #EAA7A6;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
// margin-bottom: 10px;
margin-bottom: -10px;
.productName {
//position: absolute;
//left: 0;
//top: 55px;
width: 100%;
width: 78%;
text-align: center;
font-size: 28px;
line-height: 28px;
font-size: 36px;
color: #D90300;
.lineClamp1();
}
}
......@@ -153,14 +149,16 @@
.options {
flex-shrink: 0;
width: 709px;
height: 465px;
width: 750px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.webpBg("DetailPage/bottomBg.png");
.sparkBg("DetailPage/bottomBg.png");
background-size: 762px 400px;
background-position: top center;
.tab {
position: absolute;
......@@ -169,8 +167,8 @@
width: 100%;
height: 91px;
color: #bc251c;
font-size: 28px;
color: #EA1211;
font-size: 32px;
font-weight: bold;
display: flex;
......@@ -186,11 +184,13 @@
}
.actBar {
background-color: rgb(188, 37, 28);
font-family: SourceHanSansCN-Bold;
background: #EA1211;
border-radius: 3px;
position: absolute;
left: 61.5px;
top: 85px;
width: 252px;
left: 80px;
top: 75px;
width: 215px;
height: 6px;
}
}
......@@ -199,8 +199,7 @@
position: absolute;
top: 91px;
width: 634px;
margin-top: 28px;
margin-bottom: 61px;
margin-top: 20px;
.buyInfo {
display: flex;
......@@ -208,15 +207,15 @@
justify-content: space-between;
& > div {
font-size: 32px;
color: rgb(50, 50, 50);
font-size: 30px;
color: #333;
text-align: center;
font-weight: bold;
}
& > span {
font-size: 29px;
color: rgb(155, 155, 155);
font-size: 26px;
color: #666;
text-align: center;
}
}
......@@ -238,8 +237,7 @@
position: absolute;
top: 91px;
width: 634px;
margin-top: 28px;
margin-bottom: 61px;
margin-top: 20px;
.sellInfo {
display: flex;
......@@ -247,15 +245,15 @@
justify-content: space-between;
& > div {
font-size: 32px;
color: rgb(50, 50, 50);
font-size: 30px;
color: #333;
text-align: center;
font-weight: bold;
}
& > span {
font-size: 29px;
color: rgb(155, 155, 155);
font-size: 26px;
color: #666;
text-align: center;
}
}
......@@ -281,64 +279,63 @@
position: absolute;
top: 24px;
right: 27px;
color: #bc251c;
color: #EA1211;
font-weight: bold;
}
}
}
.tip {
margin-top: 14px;
margin-top: 20px;
font-size: 24px;
color: rgb(155, 155, 155);
color: #999;
text-align: left;
min-height: 30px;
}
.btnArea {
margin-top: 10px;
margin-top: 16px;
width: 100%;
height: 82px;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
.btn {
width: 268px;
height: 82px;
border-radius: 41px;
width: 260px;
height: 68px;
border-radius: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-size: 28px;
font-weight: bold;
}
.simulate {
margin-top: 30px;
background-color: rgb(188, 37, 28);
background-color: #EA1211;
color: white;
}
.really {
margin-top: 29px;
background-color: white;
color: #bc251c;
border: 1px solid #bc251c;
color: #EA1211;
border: 1px solid #EA1211;
}
}
}
.backBtn {
position: absolute;
left: 52px;
top: 83px;
width: 18px;
height: 32px;
left: 40px;
top: 36px;
width: 38px;
height: 38px;
.webpBg("DetailPage/backBtn.png");
&.backBtn2 {
top: 90px;
left: 54px;
top: 85px;
.webpBg("DetailPage/backBtn2.png");
}
}
......
src/pages/DetailPage/DetailPage.tsx
View file @ a4e22cbb
......@@ -183,17 +183,16 @@ class DetailPage extends React.Component<any, any> {
{isBuyed
? <div className={styles.topArea}>
<div className={styles.productName}>{productName}</div>
<div className={styles.label1}>累计收益</div>
<div className={styles.label1}>累计收益（元）</div>
<div className={styles.totalProfit}>{totalProfit / 100}</div>
<div className={styles.label2}>持有份额</div>
<div className={styles.tranche}>{tranche / 100}</div>
<div className={styles.label3}>持有市值</div>
<div className={styles.label3}>持有市值（元）</div>
<div className={styles.marketValue}>{marketValue / 100}</div>
<div className={styles.label4}>昨日收益</div>
<div className={styles.label4}>昨日收益（元）</div>
<div className={styles.yesterdayProfit}>{yesterdayProfit / 100}</div>
</div>
: <div className={styles.topArea2}>
<div className={styles.topBg} />
<div className={styles.productName}>{productName}</div>
</div>
}
......@@ -204,7 +203,7 @@ class DetailPage extends React.Component<any, any> {
<div
className={styles.tabItem}
style={{
color: tabType == EOpType.Buy ? "#bc251c" : "#000000"
color: tabType == EOpType.Buy ? "#EA1211" : "#333333"
}}
onClick={() => this.clickTab(EOpType.Buy)}
>购买
......@@ -212,14 +211,14 @@ class DetailPage extends React.Component<any, any> {
<div
className={styles.tabItem}
style={{
color: tabType == EOpType.Sell ? "#bc251c" : "#000000"
color: tabType == EOpType.Sell ? "#EA1211" : "#333333"
}}
onClick={() => this.clickTab(EOpType.Sell)}
>赎回
</div>
<motion.div
className={styles.actBar}
animate={{ left: (isBuy ? 61.5 : 436.5) * remScale }}
animate={{ left: (isBuy ? 80 : 455) * remScale }}
/>
</div>
<motion.div
......
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