Skip to content

T
TianGongKaiWu-20251203
Commit 9a42c332 authored by 王勇霞's avatar 王勇霞
Browse files
Options

feat: 产品列表&我的持仓

parent 8fd8883c
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 376 deletions
src/assets/homePage/tab1_bg.png
View replaced file @ 8fd8883c View file @ 9a42c332
src/assets/homePage/tab1_bg.png

12.8 KB | W: | H:

src/assets/homePage/tab1_bg.png

13.1 KB | W: | H:

src/assets/homePage/tab1_bg.png
src/assets/homePage/tab1_bg.png
src/assets/homePage/tab1_bg.png
src/assets/homePage/tab1_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/homePage/tab2_bg.png
View replaced file @ 8fd8883c View file @ 9a42c332
src/assets/homePage/tab2_bg.png

13 KB | W: | H:

src/assets/homePage/tab2_bg.png

11.9 KB | W: | H:

src/assets/homePage/tab2_bg.png
src/assets/homePage/tab2_bg.png
src/assets/homePage/tab2_bg.png
src/assets/homePage/tab2_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/contants.ts 0 → 100644
View file @ 9a42c332
export const weekList = ['一', '二', '三', '四', '五', '六', '日' ]
\ No newline at end of file
src/pages/HomePage/HomePage.less
View file @ 9a42c332
...@@ -396,47 +396,27 @@ ...@@ -396,47 +396,27 @@
} }
} }
// .prize_banner {
// width: 713px;
// height: 322px;
// left: 19px;
// // top: 1060px;
// position: relative;
// .sparkBg("homePage/prize_banner.png");
// .prize_btn {
// width: 270px;
// height: 98px;
// left: 218px;
// top: 210px;
// position: absolute;
// .sparkBg("homePage/prize_btn.png");
// }
// }
.recommend_products { .recommend_products {
width: 750px; width: 750px;
height: 354px; height: 198px;
left: 0px; left: 0px;
// top: 1878px;
position: relative; position: relative;
margin-top: 28px; margin-top: 4px;
margin-bottom: 22px;
.recommend_products_bg { .recommend_products_bg {
display: inline-block; display: inline-block;
left: 18px; left: 18px;
width: 714px; width: 714px;
height: 1327px; height: 198px;
position: absolute; position: absolute;
.sparkBg("homePage/products_tuijian_bg.png");
.r_products_list { .r_products_list {
width: 694px; width: 694px;
height: 257px; height: 198px;
left: 10px; left: 10px;
top: 115px; top: 0;
position: absolute; position: absolute;
// padding-left: 18px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
...@@ -447,146 +427,49 @@ ...@@ -447,146 +427,49 @@
.r_products_item { .r_products_item {
flex-shrink: 0; flex-shrink: 0;
width: 569px; width: 450px;
height: 238px; height: 198px;
position: relative; position: relative;
margin-right: 10px; margin-right: 10px;
.r_product_bg { .r_product_bg {
width: 569px; width: 450px;
height: 238px; height: 198px;
left: 0px; left: 0px;
top: 0px; top: 0px;
position: absolute; position: absolute;
.sparkBg("homePage/r_product_bg.png"); border-radius: 30px;
}
.r_product_name {
width: 520px;
height: 32px;
left: 32px;
top: 26px;
position: absolute;
font-size: 28px;
line-height: 32px;
color: rgba(1, 1, 1, 1);
font-weight: bold;
.lineClamp1();
}
.r_product_risk {
width: 360px;
height: 32px;
left: 31px;
top: 77px;
position: absolute;
font-size: 32px;
line-height: 32px;
color: rgba(211, 26, 25, 1);
font-weight: bold;
.lineClamp1();
}
.r_product_rate {
width: 520px;
height: 22px;
left: 30px;
top: 128px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 22px;
color: rgba(1, 1, 1, 1);
.lineClamp1();
}
.detail_btn {
width: 140px;
height: 48px;
left: 398px;
top: 70px;
position: absolute;
.sparkBg("homePage/detail_btn.png");
}
.r_product_like {
width: 507px;
height: 46px;
left: 31px;
top: 167px;
position: absolute;
.sparkBg("homePage/r_product_like_bg.png");
.r_product_like_text {
width: 450px;
height: 20px;
left: 49px;
top: 13px;
position: absolute;
opacity: 0.6;
font-size: 20px;
line-height: 20px;
color: rgba(1, 1, 1, 1);
.lineClamp1();
}
} }
} }
} }
} }
// .r_products_title {
// width: 141px;
// height: 34px;
// left: 17px;
// top: 0px;
// position: absolute;
// .sparkBg("homePage/r_products_title.png");
// }
} }
.bottom_products { .bottom_products {
width: 714px; width: 701px;
height: auto; height: auto;
min-height: 990px; min-height: 1017px;
background-color: #fce398; background-color: #ffffff;
left: 18px; left: 28px;
// top: 2192px;
position: relative; position: relative;
margin-top: 20px;
padding-top: 152px; padding-top: 152px;
padding-bottom: 19px; padding-bottom: 19px;
box-sizing: border-box; box-sizing: border-box;
border-left: 3px solid #fff; border-radius: 24px;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-radius: 0 0 38px 38px;
&::before {
content: "";
position: absolute;
top: 800px;
left: 15px;
width: 685px;
height: calc(100% - 800px - 19px);
background-color: #fff;
border-radius: 0 0 20px 20px;
}
.tab1_bg { .tab1_bg {
width: 685px; width: 701px;
height: 957px; height: 1017px;
left: 15px; left: 0;
top: 0px; top: 0px;
position: absolute; position: absolute;
.sparkBg("homePage/tab1_bg.png"); .sparkBg("homePage/tab1_bg.png");
} }
.tab2_bg { .tab2_bg {
width: 685px; width: 701px;
height: 957px; height: 1017px;
left: 15px; left: 0;
top: 0px; top: 0px;
position: absolute; position: absolute;
.sparkBg("homePage/tab2_bg.png"); .sparkBg("homePage/tab2_bg.png");
...@@ -598,7 +481,6 @@ ...@@ -598,7 +481,6 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
// background-color: rgba(0, 0, 0, 0.6);
} }
.tab2_btn { .tab2_btn {
...@@ -607,7 +489,6 @@ ...@@ -607,7 +489,6 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
// background-color: rgba(0, 0, 0, 0.6);
} }
.empty { .empty {
...@@ -621,9 +502,7 @@ ...@@ -621,9 +502,7 @@
.products_list { .products_list {
width: 653px; width: 653px;
// height: 696px;
left: 30px; left: 30px;
// top: 152px;
position: relative; position: relative;
.b_product_item { .b_product_item {
......
src/pages/HomePage/HomePage.tsx
View file @ 9a42c332
...@@ -261,8 +261,6 @@ class HomePage extends React.Component<any, any> { ...@@ -261,8 +261,6 @@ class HomePage extends React.Component<any, any> {
<span className="prize_btn" onClick={this.prizeHandle}></span> <span className="prize_btn" onClick={this.prizeHandle}></span>
</div>} */} </div>} */}
{/* 签到区 */}
{/* {!productEnd && <SignCom></SignCom>} */}
{/* 模拟资产 */} {/* 模拟资产 */}
{/* <div className="virtual_assets short_height"> {/* <div className="virtual_assets short_height">
{ {
...@@ -344,21 +342,17 @@ class HomePage extends React.Component<any, any> { ...@@ -344,21 +342,17 @@ class HomePage extends React.Component<any, any> {
<div className="r_products_list"> <div className="r_products_list">
{rProductList?.map((item, index) => ( {rProductList?.map((item, index) => (
<div className="r_products_item" key={`r_prdct_${index}`}> <div className="r_products_item" key={`r_prdct_${index}`}>
<span className="r_product_bg"></span> <img className="r_product_bg" src="http://xqtpl.com/bg/300/300?color=fff" alt="" />
<span className="r_product_name">{item.name}</span>
{!!item.rate && <span className="r_product_risk">{(item.rate / 100).toFixed(2)}%</span>}
<span className="r_product_rate">{RATE_NAME[item.type] || '年化收益率'}</span>
<Button className="detail_btn" onClick={() => this.jumpVirtualDetailHandle(item)}></Button>
<div className="r_product_like">
<span className="r_product_like_text">{item.baiFenBiText}</span>
</div>
</div> </div>
))} ))}
</div> </div>
</span> </span>
{/* <span className="r_products_title"></span> */}
</div>} </div>}
{/* 签到区 */}
{!productEnd && <SignCom></SignCom>}
{/* 产品列表 */}
<div className="bottom_products"> <div className="bottom_products">
{curTab == 1 && <span className="tab1_bg"></span>} {curTab == 1 && <span className="tab1_bg"></span>}
{curTab == 2 && <span className="tab2_bg"></span>} {curTab == 2 && <span className="tab2_bg"></span>}
...@@ -397,6 +391,7 @@ class HomePage extends React.Component<any, any> { ...@@ -397,6 +391,7 @@ class HomePage extends React.Component<any, any> {
</div> </div>
{!curTabProductList?.length && curTab == 2 && <div className="empty">暂无持仓产品哦</div>} {!curTabProductList?.length && curTab == 2 && <div className="empty">暂无持仓产品哦</div>}
</div> </div>
<Button className="rule_btn" onClick={this.ruleHandle} /> <Button className="rule_btn" onClick={this.ruleHandle} />
<Button className="prize_btn" onClick={this.reallyPrizeHandle} /> <Button className="prize_btn" onClick={this.reallyPrizeHandle} />
{/* 其他icon */} {/* 其他icon */}
......
src/panels/signCom/signCom.jsx
View file @ 9a42c332
...@@ -9,6 +9,7 @@ import { _asyncThrottle, formatThousand } from '@/utils/utils'; ...@@ -9,6 +9,7 @@ import { _asyncThrottle, formatThousand } from '@/utils/utils';
import store from '@/store/store'; import store from '@/store/store';
import API from '@/api'; import API from '@/api';
import TaskPanel from '@/panels/taskPanel/index.jsx'; import TaskPanel from '@/panels/taskPanel/index.jsx';
import { weekList } from "@/contants"
@observer @observer
class SignCom extends React.Component { class SignCom extends React.Component {
constructor(props) { constructor(props) {
...@@ -53,37 +54,19 @@ class SignCom extends React.Component { ...@@ -53,37 +54,19 @@ class SignCom extends React.Component {
render() { render() {
const { checkIn, taskWealth } = store.indexData const { checkIn, taskWealth } = store.indexData
return ( return (
<div className="sign_section"> <div className="no-center-qes">
<span className="sign_section_bg"></span> <div className="sign-module">
<span className="sign_tips">最高可得{((checkIn?.totalExperienceNum || 0) / 10000).toFixed(0)}万理财体验金</span> <div className="week-list-box">
{checkIn?.todayCheckIn {
? <Button className="signed_btn md9" onClick={this.signedHandle}></Button> weekList.map((item, index) => (
: <Button className="sign_btn md9" onClick={this.signHandle}></Button> <Button className="week-item" key={index}>
} <div className="week-item-text">周{item}</div>
<div className="task-title"></div>
<span className="sign_total_tips">{`已累计签到${checkIn?.totalCheckIn}天`}</span> </Button>
<span className="sign_big_btn md10" onClick={() => { ))
if (!store.judgeActTime()) return; }
ModalCtrl.showModal(TaskPanel)
}}>{Math.floor(taskWealth / 10000) > 0 ? `再领${Math.floor(taskWealth / 10000)}万理财体验金` : '查看更多任务'}</span>
<div className="sign_progress">
<span className="progress_bg"></span>
<div className="progress_bar_box">
<div className="progress_bar" style={{ width: `${store.percent}%` }}></div>
</div> </div>
{checkIn?.checkInConfig?.map((item, index) => { <Button className="sign_btn"></Button>
return (
<div
className={`step_item step_item${index + 1} ${item.days > checkIn?.totalCheckIn ? 'locked' : item.status ? 'received' : 'signed'}`}
key={`sign_${index}`}
onClick={() => this.signPrizeHandle(item)}
>
<span className="prize_bg"></span>
<div className="prize_amount">{((item.experienceNum || 0) / 10000).toFixed(0)}<span className="unit">万</span></div>
<span className="prize_day">累计{item.days}天</span>
</div>
)
})}
</div> </div>
</div> </div>
); );
......
src/panels/signCom/signCom.less
View file @ 9a42c332
@import "../../res.less"; @import "../../res.less";
.no-center-qes {
.sign_section { padding-left: 18px;
width: 713px; .sign-module {
height: 433px; position: relative;
left: 19px; width: 732px;
// top: 1521px; height: 407px;
position: relative; .webpBg("homePage/sign_bg.png");
margin-top: 21px; margin: 0 auto 6px;
.week-list-box {
.sign_section_bg { width: 654px;
width: 712px; height: 165px;
height: 433px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/sign_section_bg.png");
}
.sign_tips {
width: 434px;
height: 24px;
left: 180px;
top: 50px;
position: absolute;
font-size: 24px;
line-height: 24px;
color: rgb(145, 99, 38);
}
.sign_btn {
width: 204px;
height: 73px;
left: 490px;
top: 20px;
position: absolute;
.sparkBg("homePage/sign_btn_bg.png");
font-size: 26px;
line-height: 25px;
color: rgba(220, 80, 63, 1);
font-weight: bold;
.flex_center();
// .breathAnimation();
}
.signed_btn {
width: 211px;
height: 75px;
left: 490px;
top: 20px;
position: absolute;
.sparkBg("homePage/signed_btn_bg.png");
font-size: 26px;
line-height: 25px;
color: rgba(108, 108, 108, 1);
font-weight: bold;
.flex_center();
}
.sign_total_tips {
display: inline-block;
width: 172px;
height: 30px;
left: 27px;
top: 110px;
position: absolute;
font-size: 20px;
color: rgb(145, 99, 38);
line-height: 30px;
text-align: center;
// background-color: #ff3333;
}
.sign_big_btn {
width: 425px;
text-align: center;
height: 98px;
line-height: 98px;
color: #ffffff;
font-weight: bold;
left: 143px;
bottom: 20px;
position: absolute;
font-size: 32px;
.sparkBg("homePage/signBigBtn.png");
}
.sign_progress {
width: 591px;
height: 109px;
left: 60px;
top: 158px;
position: absolute;
.progress_bg {
width: 576px;
height: 20px;
left: 0px;
top: 35px;
position: absolute; position: absolute;
background-color: #f8cec6; left: 36px;
border-radius: 10px; top: 120px;
} display: flex;
justify-content: space-around;
.progress_bar_box { align-items: center;
width: 576px;
height: 20px; .week-item {
left: 0px; position: relative;
top: 35px; width: 82px;
position: absolute; height: 107px;
.webpBg("homePage/sign_task.png");
.progress_bar { }
width: 0%;
height: 20px; .week-item-text {
left: 0px;
top: 0px;
position: absolute;
background-image: linear-gradient(90deg, rgb(253, 118, 95) 8%, #ff3333 100%);
border-radius: 10px 10px 10px 10px;
}
}
.step_item {
width: 71px;
height: 109px;
left: 72px;
top: 0px;
position: absolute;
&.step_item2 {
left: 216px;
}
&.step_item3 {
left: 359px;
}
&.step_item4 {
left: 510px;
}
&.locked .prize_bg {
.sparkBg("homePage/prize_locked.png");
}
&.signed .prize_bg {
.sparkBg("homePage/prize_to_receive.png");
}
&.received .prize_bg {
.sparkBg("homePage/prize_received.png");
}
&.locked,
&.received {
.prize_amount {
opacity: 0.7;
}
}
.prize_bg {
width: 71px;
height: 77px;
left: 0px;
top: 0px;
position: absolute;
}
.prize_amount {
width: 100%; width: 100%;
height: 21px; height: 30px;
left: 0px; text-align: center;
top: 12px; color: #a34b09;
line-height: 30px;
font-size: 22px;
position: absolute; position: absolute;
font-size: 28px; left: 0;
color: rgba(238, 78, 50, 1); bottom: 0;
font-weight: bold;
.flex_center();
.unit {
height: 30px;
font-size: 18px;
line-height: 34px;
}
} }
.prize_day { .task-title {
width: 91px; width: 84px;
height: 19px; height: 28px;
left: -10px;
top: 90px;
position: absolute; position: absolute;
opacity: 0.6; top: -26px;
font-size: 20px; left: -1px;
line-height: 19px; .webpBg("homePage/sign_task_title.png");
color: rgba(0, 0, 0, 1);
text-align: center;
} }
} }
.sign_btn {
width: 500px;
height: 81px;
position: absolute;
left: 149px;
top: 280px;
.webpBg("homePage/sign_btn.png");
}
} }
} }
\ No newline at end of file
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