Commit d4f15bb1 authored by 天马流星拳's avatar 天马流星拳

feat: 优化首页排行榜和持仓弹窗样式及功能

调整首页排行榜高度以容纳两行数据,修改收起状态下显示逻辑
更新持仓弹窗标题为图片背景,移除注释代码
禁用部分弹窗显示逻辑,添加mock数据
修复排行榜显示超过100名时的展示问题
parent 6f65f564
......@@ -318,6 +318,41 @@ export default [
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 11, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 12, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 13, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 14, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
},
{
index: 15, //排名,null表示未上榜,前端判断大于等于100,展示99+
userName:'136xxxx7894', // 用户名
userId:1, //用户id
score: 43.18, //收益率
meFlag: false //是否是我,为true是
}
],
// 理财排行榜-我的排名
......
......@@ -332,7 +332,7 @@
.postRanking_item_box{
margin-top: 0.1rem;
margin-left: 14px;
height: 160px;
height: 170px; // 调整为能容纳两行数据的高度
overflow: hidden;
.postRanking_item{
width: 629px;
......
......@@ -231,6 +231,7 @@ class HomePage extends React.Component<any, any> {
<div className={`postRanking_item_box ${this.state.isExpand ? 'expandSty3' : ''}`}>
{rankInfos
.filter(item => item.index && item.index >= 4 && item.index <= 100)
.filter(item => this.state.isExpand || item.index === 4 || item.index === 5) // 收起状态下显示第4名和第5名
.map((item, index) => (
<div key={`rank_${item.index}`} className={`postRanking_item`}>
<span className='span-1'>{item.index}</span>
......@@ -245,7 +246,7 @@ class HomePage extends React.Component<any, any> {
</div>
{/* 我的排名 */}
<div className='postRanking_myRanking'>
<span className='span-1'>{myRank.index == null ? '未上榜' : myRank.index >= 100 ? '99+' : myRank.index}</span>
<span className='span-1'>{myRank.index == null ? '未上榜' : myRank.index > 100 ? '99+' : myRank.index}</span>
<span className='span-2'>{myRank.userName}(我)</span>
<span className='span-3'>{myRank && myRank.score != null ? (myRank.score > 0 ? `+${myRank.score}` : myRank.score) : '-'}%</span>
<span className='span-4' onClick={() => this.viewDistribution(myRank)}>
......@@ -359,4 +360,4 @@ class HomePage extends React.Component<any, any> {
);
}
}
export default HomePage;
export default HomePage;
\ No newline at end of file
......@@ -63,25 +63,8 @@ class Positionpop extends React.Component {
</div>
</div>
{/* <div className="list2">
<span className="juXing7_2"></span>
<span className="huaXiaLiCaiGuShouZengQiangZuiDuanChiYou120tianAkuanA_2">
华夏理财固收增强 最短持有120天A款A
</span>
<span className="_1772_2">17.72%</span>
<span className="_3550_2">35.50%</span>
</div>
<div className="list1">
<span className="juXing7_3"></span>
<span className="huaXiaLiCaiGuShouZengQiangZuiDuanChiYou120tianAkuanA_3">
华夏理财固收增强 最短持有120天A款A
</span>
<span className="_1772_3">17.72%</span>
<span className="_3550_3">35.50%</span>
</div> */}
<span className="name">{this.state.info.userName}</span>
<span className="title">持仓情况</span>
<span className="title"></span>
{/* <span className="icon1"></span> */}
</div>
);
......
......@@ -179,14 +179,12 @@
}
.title {
width: 201px;
width: 191px;
height: 46px;
left: 144px;
top: 561px;
position: absolute;
font-size: 48px;
line-height: 46px;
color: rgba(91, 34, 0, 1);
.sparkBg("positionPop/title.png");
}
.icon1 {
......
......@@ -120,17 +120,17 @@ class Store {
// 非白名单名单拦截弹窗
if (black) {
ModalCtrl.showModal(BlackPop);
// ModalCtrl.showModal(BlackPop);
}
// 立即报名弹窗
if (!signInStatus) {
ModalCtrl.showModal(SetupPop);
// ModalCtrl.showModal(SetupPop);
}
// 报名成功的弹窗
if (giftPop?.pop) {
ModalCtrl.showModal(SetupSuccessPop);
// ModalCtrl.showModal(SetupSuccessPop);
}
// 上月理财成绩弹窗
......
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