Skip to content

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

feat： 调整

parent 9636bea7
Hide whitespace changes
Inline Side-by-side
Showing with 240 additions and 227 deletions
mock/main.ts
View file @ 8fd8883c
......@@ -61,7 +61,7 @@ export default [
endPoint: Date.now() + 0.0001 * 24 * 60 * 60 * 1000,
endPop: false,
uid: '234234',
productEnd: true,
productEnd: false,
taskWealth: 3004044,
ruleText: 'rulerulerulerulerulerulerule',
"bigStartConfig": new Array(6).fill(1).map((_, index) => {
......
src/assets/homePage/rule_btn.png
View replaced file @ 9636bea7 View file @ 8fd8883c
src/assets/homePage/rule_btn.png

1.96 KB | W: | H:

src/assets/homePage/rule_btn.png

4.36 KB | W: | H:

src/assets/homePage/rule_btn.png
src/assets/homePage/rule_btn.png
src/assets/homePage/rule_btn.png
src/assets/homePage/rule_btn.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/HomePage/HomePage.less
View file @ 8fd8883c
......@@ -6,7 +6,7 @@
left: 0px;
top: 0px;
position: relative;
background-color: #ffe6c5;
background-color: #e86a3c;
padding-top: 700px;
padding-bottom: 85px;
box-sizing: border-box;
......@@ -17,8 +17,8 @@
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/bg.jpg");
background-size: 750px 3024px;
.sparkBg("homePage/bg.png");
background-size: 750px 779px;
}
.title {
......@@ -30,129 +30,13 @@
// .sparkBg("homePage/title.png");
}
.red-pack-con {
width: 750px;
position: absolute;
top: 330px;
.left-right {
width: 600px;
margin-left: 75px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
.left,
.right {
width: 257px;
height: 313px;
position: relative;
.red-pack-item {
position: absolute;
img {
width: 257px;
height: 313px;
}
}
.hide-red-pack-item {
display: none;
}
.frontAniItem {
animation: frontAni 1000ms linear forwards;
z-index: 2;
}
.backAniItem {
animation: backAni 1000ms linear forwards;
z-index: 0;
}
.redpackAni {
width: 450px;
height: 492px;
position: absolute;
left: -96px;
top: -89px
}
}
}
.one-middle {
.red-pack-item {
position: absolute;
left: 250px;
img {
width: 257px;
height: 313px;
}
}
}
}
@keyframes frontAni {
0% {}
33% {
opacity: 1;
transform: scale(1);
top: 0px;
}
45% {
opacity: 1;
}
58% {
transform: scale(1.06);
opacity: 0;
top: 70px,
}
100% {
opacity: 0;
}
}
@keyframes backAni {
0% {}
33% {
transform: scale(0.8);
top: -100px;
opacity: 0;
}
50% {
opacity: 1;
}
72% {
top: 20px;
transform: scale(1);
}
100% {
top: 0px;
}
}
.virtual_assets {
width: 712px;
height: 513px;
left: 19px;
// top: 1060px;
position: relative;
margin-top: 18px;
// .sparkBg("homePage/virtual_assets_bg.png");
.sparkBg("homePage/virtual_assets_bg_new.png");
&.short_height {
......@@ -359,24 +243,177 @@
}
}
.prize_banner {
width: 713px;
height: 322px;
left: 19px;
// top: 1060px;
.actual_assets {
width: 732px;
height: 459px;
left: 15px;
position: relative;
.sparkBg("homePage/prize_banner.png");
margin-top: 25px;
padding-top: 147px;
box-sizing: border-box;
.sparkBg("homePage/actaul_assets_bg_new.png");
.rate_wrap {
display: flex;
align-items: center;
justify-content: center;
.yield_rate {
padding-right: 40px;
}
.yesterday_amount {
padding-left: 40px;
}
.yield_rate_label, .yesterday_amount_label {
font-size: 22px;
line-height: 22px;
color: #8d8d8d;
margin-bottom: 19px;
text-align: center;
}
.yield_rate_value {
font-size: 59px;
font-weight: bold;
color: #e92836;
text-align: center;
}
.yesterday_amount_value {
font-size: 59px;
font-weight: bold;
color: #292929;
text-align: center;
}
}
.other_assets {
width: 666px;
height: 70px;
left: 23px;
top: 296px;
position: absolute;
.other_assets1 {
width: 195px;
height: 70px;
left: 0px;
top: 0px;
position: absolute;
}
.other_assets2 {
width: 195px;
height: 70px;
left: 236px;
top: 0px;
position: absolute;
}
.other_assets3 {
width: 195px;
height: 69px;
left: 471px;
top: 1px;
position: absolute;
}
.other_line1 {
width: 2px;
height: 51px;
left: 228px;
top: 8px;
position: absolute;
.sparkBg("homePage/line.png");
}
.other_line2 {
width: 2px;
height: 51px;
left: 458px;
top: 8px;
position: absolute;
.sparkBg("homePage/line.png");
}
.prize_btn {
width: 270px;
height: 98px;
left: 218px;
top: 210px;
.other_assets_label {
width: 100%;
height: 25px;
left: 0px;
top: 0px;
position: absolute;
opacity: 0.6;
font-size: 26px;
line-height: 25px;
color: rgba(0, 0, 0, 1);
text-align: center;
}
.other_assets_value {
width: 100%;
height: 26px;
left: 0;
top: 44px;
position: absolute;
font-size: 30px;
line-height: 26px;
color: rgb(28, 28, 28);
text-align: center;
font-weight: bold;
}
}
.canuse_popover {
width: 157px;
height: 39px;
left: 360px;
top: 253px;
position: absolute;
.canuse_popover_bg {
width: 166px;
height: 38px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/canuse_popover_bg_left.png");
}
}
.realbuy_btn {
width: 327px;
height: 83px;
left: 193px;
top: 380px;
position: absolute;
.sparkBg("homePage/prize_btn.png");
font-size: 35px;
line-height: 34px;
color: rgba(255, 255, 255, 1);
.sparkBg("homePage/realbuy_btn_bg.png");
.flex_center();
}
}
// .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 {
width: 750px;
height: 354px;
......@@ -701,23 +738,41 @@
}
.rule_btn {
width: 40px;
height: 113px;
left: 0px;
top: 59px;
width: 45px;
height: 85px;
left: 707px;
top: 130px;
position: absolute;
.sparkBg("homePage/rule_btn.png");
}
.prize_btn {
width: 40px;
height: 113px;
left: 0px;
top: 189px;
width: 45px;
height: 85px;
left: 707px;
top: 229px;
position: absolute;
.sparkBg("homePage/我的奖品按钮.png");
}
.new-user-gift-icon {
width: 118px;
height: 111px;
left: 611px;
top: 417px;
position: absolute;
.sparkBg("homePage/newUserGift.png");
}
.finance-achievement-icon {
width: 118px;
height: 111px;
left: 611px;
top: 557px;
position: absolute;
.sparkBg("homePage/financeAchievement.png");
}
.newUser_btn {
width: 102px;
height: 98px;
......@@ -726,24 +781,4 @@
position: absolute;
.sparkBg("homePage/newUserIcon.png");
}
.redpack_btn {
width: 120px;
height: 114px;
right: 10px;
top: 189px;
position: absolute;
.sparkBg("homePage/redPackIcon.png");
.redpack_time_box {
width: 120px;
height: 22px;
line-height: 22px;
text-align: center;
bottom: 0px;
font-size: 20px;
color: #fff;
position: absolute;
}
}
}
\ No newline at end of file
src/pages/HomePage/HomePage.tsx
View file @ 8fd8883c
......@@ -19,7 +19,6 @@ import PrizePage from "@/pages/PrizePage/PrizePage.tsx";
import { NewbieModal } from '@/panels/newbieModal/newbieModal';
import SignCom from '@/panels/signCom/signCom.jsx';
import { SvgaPlayer } from '@grace/svgaplayer';
import mainPageTitle from '../../assets/svga/mainPageTitle.svga';
import redFenwei from '../../assets/svga/redFenwei.svga';
import RedPackCountPanel from '@/panels/redPackCountPanel/index.jsx';
......@@ -256,55 +255,16 @@ class HomePage extends React.Component<any, any> {
return (
<div className="com_Container" ref={(el) => this.root = store.homeRoot = el}>
<div className="homePage">
<span className="bg md4"></span>
<span className="bg"></span>
{/* <span className="title"></span> */}
<SvgaPlayer className="title" src={mainPageTitle}></SvgaPlayer>
{/* 红包区域 */}
<div className='red-pack-con'>
{
lockArr.length > 0 ? <div className='left-right'>
<div className='left'>
{lockArr.length === 1 && <div className={`red-pack-item`}>
<img src={lockArr[0].prizeImg}></img>
</div>}
{
lockArr.length > 1 && lockArr.map((el, index) => {
if (index === backOrder) {
return <div className={`red-pack-item backAniItem`} key={index}>
<img src={el.prizeImg}></img>
</div>
}
if (index === order) {
return <div
className={`red-pack-item frontAniItem`} key={index}>
<SvgaPlayer loop={1} className='redpackAni' src={redFenwei}></SvgaPlayer>
<img src={el.prizeImg}></img>
</div>
}
return <div className={`red-pack-item hide-red-pack-item`} key={index}>
<img src={el.prizeImg}></img>
</div>
})
}
</div>
<div className='right'>
<div className='red-pack-item'><img src={unlockObj?.unlockedPrizeImg}></img></div>
</div>
</div> : <div className='one-middle'>
{unlockObj?.unlockedPrizeImg && <div className='red-pack-item'><img src={unlockObj?.unlockedPrizeImg}></img></div>}
</div>
}
</div>
{productEnd && <div className="prize_banner">
<span className="prize_btn md31" onClick={this.prizeHandle}></span>
</div>}
{/* {productEnd && <div className="prize_banner">
<span className="prize_btn" onClick={this.prizeHandle}></span>
</div>} */}
{/* 签到区 */}
{!productEnd && <SignCom></SignCom>}
{/* {!productEnd && <SignCom></SignCom>} */}
{/* 模拟资产 */}
<div className="virtual_assets short_height">
{/* <div className="virtual_assets short_height">
{
endPoint > currentTime
? <Countdown
......@@ -325,8 +285,6 @@ class HomePage extends React.Component<any, any> {
<span className="yesterday_label">累计收益(元)</span>
<span className="yesterday_amount">{this.settleMoney(virtualAssets?.totalIncome || 0)}</span>
<div className="record_btn" onClick={this.recordHadnle}>
{/* <span className="record_btn_text">模拟交易记录</span>
<span className="arrow_right"></span> */}
</div>
<div className="other_assets">
<div className="other_assets1">
......@@ -346,7 +304,38 @@ class HomePage extends React.Component<any, any> {
<span className="canuse_popover_bg"></span>
<span className="canuse_popover_text"></span>
</div>
{/* <Button className="realbuy_btn md11" onClick={this.realBuyHandle}></Button> */}
</div> */}
{/* 真实持仓 */}
<div className="actual_assets">
<div className="rate_wrap">
<div className="yield_rate">
<div className="yield_rate_label">收益率</div>
<div className="yield_rate_value">3.5%</div>
</div>
<div className="yesterday_amount">
<div className="yesterday_amount_label">昨日收益</div>
<div className="yesterday_amount_value">102.32</div>
</div>
</div>
<div className="other_assets">
<div className="other_assets1">
<span className="other_assets_label">总资产</span>
<span className="other_assets_value">{this.settleMoney(virtualAssets?.totalMoney || 0)}</span>
</div>
<div className='other_line1'></div>
<div className="other_assets2">
<span className="other_assets_label">可用资金</span>
<span className="other_assets_value">{this.settleMoney(virtualAssets?.availableFunds || 0)}</span>
</div>
<div className='other_line2'></div>
<div className="other_assets3">
<span className="other_assets_label">昨日收益</span>
<span className="other_assets_value">{this.settleMoney(virtualAssets?.preDayIncome || 0)}</span>
</div>
</div>
<div className="canuse_popover">
<span className="canuse_popover_bg"></span>
</div>
</div>
{/* 推荐产品 */}
......@@ -408,23 +397,12 @@ class HomePage extends React.Component<any, any> {
</div>
{!curTabProductList?.length && curTab == 2 && <div className="empty">暂无持仓产品哦</div>}
</div>
<Button className="rule_btn md5" onClick={this.ruleHandle} />
<Button className="prize_btn md6" onClick={this.reallyPrizeHandle} />
{giftPop && <Button className="newUser_btn md7" onClick={this.newUserFun} />}
{redDownTime > 0 && <Button className="redpack_btn md8" onClick={this.countDownFun} >
<Countdown
leftT={redDownTime}
renderText={data => {
const { day, hour, minute, second } = data
let hourNum: any = Number(day) * 24 + Number(hour);
hourNum = hourNum >= 10 ? hourNum : '0' + hourNum;
return <div className="redpack_time_box">
<span className="redpack_time_item">{`${hourNum}:${minute}:${second}`}</span>
</div>
}}
countdownOver={() => store.updateIndex()}
/>
</Button>}
<Button className="rule_btn" onClick={this.ruleHandle} />
<Button className="prize_btn" onClick={this.reallyPrizeHandle} />
{/* 其他icon */}
<Button className="new-user-gift-icon"></Button>
<Button className="finance-achievement-icon"></Button>
{giftPop && <Button className="newUser_btn" onClick={this.newUserFun} />}
</div>
</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