Skip to content

太
太保-年鉴活动-20250625
Commit dfdba24f authored by 俞嘉婷's avatar 俞嘉婷
Browse files
Options

feat: 首页布局

parent 931ab5f3
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 70 deletions
src/index.less
View file @ dfdba24f
...@@ -29,6 +29,22 @@ body { ...@@ -29,6 +29,22 @@ body {
margin: auto; margin: auto;
} }
.com_Container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow-x: hidden;
overflow-y: auto;
}
.grey {
filter: grayscale(100%);
}
.popupCenterShow { .popupCenterShow {
animation: centerShowAni 500ms ease-out; animation: centerShowAni 500ms ease-out;
@keyframes centerShowAni { @keyframes centerShowAni {
......
src/pages/homePage/homePage.jsx
View file @ dfdba24f
...@@ -13,6 +13,9 @@ class HomePage extends Component { ...@@ -13,6 +13,9 @@ class HomePage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
curTab: 1,
}
} }
componentDidMount() { componentDidMount() {
...@@ -28,9 +31,71 @@ class HomePage extends Component { ...@@ -28,9 +31,71 @@ class HomePage extends Component {
store.joinActivity(); store.joinActivity();
} }
render() { render() {
const { curTab } = this.state;
const { bg_type1, bg_type2, title, tab1, tab2, arrow_left, btn_prize, mainbtn, btn_future, mainbtn_popover, btn_rule, btn_share } = skinStore.homePage;
return ( return (
<div className="homePage modal_center"> <div className="com_Container">
<div className="bg" style={{ 'backgroundImage': `url(${skinStore.homeJs.homeBg})` }}></div> <div className="homePage">
<div className="bg" style={{ 'backgroundImage': `url(${curTab === 1 ? bg_type1 : bg_type2})` }}></div>
<div className="title" style={{ 'backgroundImage': `url(${title})` }}></div>
{/* 规则 */}
<div className="btn_rule" style={{ 'backgroundImage': `url(${btn_rule})` }}></div>
{/* 分享 */}
<div className="btn_share" style={{ 'backgroundImage': `url(${btn_share})` }}></div>
{/* tab-活动展区 */}
{curTab === 1 && <div className="tab1" onClick={() => this.setState({ curTab: 2 })} style={{ 'backgroundImage': `url(${tab1})` }}></div>}
{/* tab-荣耀展区 */}
{curTab === 2 && <div className="tab2" onClick={() => this.setState({ curTab: 1 })} style={{ 'backgroundImage': `url(${tab2})` }}></div>}
{/* 勋章列表 */}
<div className="medal_list_box">
<div className="medal_list line1">
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal1.c022287fcb0174d828077cb5cf9b9b299d128a6b.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal2.341cc76fa221193683be4944f19dd63e1e5eee70.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal3.cd7c88c280902662cf3634b06ad0365ff7d75628.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
</div>
</div>
<div className="medal_list line2">
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal1.c022287fcb0174d828077cb5cf9b9b299d128a6b.png" alt="" />
</div>
<div className="medal_item grey">
<img src="//yun.duiba.com.cn/polaris/medal2.341cc76fa221193683be4944f19dd63e1e5eee70.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal3.cd7c88c280902662cf3634b06ad0365ff7d75628.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
</div>
</div>
</div>
{/* 左滑引导 */}
<div className="left_guide">
<div className="arrow_left" style={{ 'backgroundImage': `url(${arrow_left})` }}></div>
<div className="left_guide_text">左滑查看更多</div>
</div>
{/* 时光宝箱 */}
<div className="btn_prize" style={{ 'backgroundImage': `url(${btn_prize})` }}></div>
{/* 未来展品 */}
<div className="btn_future" style={{ 'backgroundImage': `url(${btn_future})` }}></div>
{/* 主按钮 */}
<div className="mainbtn_box">
<div className="mainbtn" style={{ 'backgroundImage': `url(${mainbtn})` }}></div>
<div className="current_bb">当前持有：XX保贝值</div>
<div className="mainbtn_popover" style={{ 'backgroundImage': `url(${mainbtn_popover})` }}>点亮勋章得XX保贝值</div>
</div>
</div>
</div> </div>
); );
} }
......
src/pages/homePage/homePage.less
View file @ dfdba24f
@import url('../../res.less'); @import url('../../res.less');
.homePage { .homePage {
width: 100%; width: 750px;
height: 100vh; height: 1624px;
overflow-y: hidden; position: relative;
overflow-x: hidden;
position: absolute;
.bg { .bg {
position: absolute;
left: 0;
top: 0;
width: 750px; width: 750px;
height: 1624px; height: 1624px;
position: absolute;
.formatBg(); .formatBg();
} }
.beginbtn { .title {
position: fixed; position: absolute;
width: 551px; left: 58px;
top: 86px;
width: 646px;
height: 219px; height: 219px;
left: 115px;
// top: 1294px;
bottom: 111px;
.formatBg(); .formatBg();
} }
.characterBeginbtn { .btn_rule {
width: 475px; position: absolute;
height: 147px; left: 0px;
left: 131px; top: 320px;
// top: 1333px; width: 93px;
bottom: 144px; height: 47px;
.formatBg();
} }
.oldHealthyBeginbtn { .btn_share {
width: 483px; position: absolute;
height: 186px; right: 0px;
left: 126px; top: 320px;
// top: 1309px; width: 101px;
bottom: 131px; height: 47px;
.formatBg();
} }
.yinsi { .tab1 {
position: fixed; position: absolute;
width: 373px; left: 221px;
height: 30px; top: 312px;
left: 188px; width: 321px;
// top: 1483px; height: 67px;
bottom: 111px;
.formatBg(); .formatBg();
}
.selectIcon { .tab2 {
display: inline-block; position: absolute;
position: absolute; left: 221px;
width: 19px; top: 312px;
height: 17px; width: 321px;
left: 6px; height: 67px;
top: 7px; .formatBg();
.formatBg(); }
.medal_list_box {
position: absolute;
left: 0px;
top: 480px;
width: 750px;
height: 660px;
overflow: hidden;
overflow-x: auto;
}
.medal_list {
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: 260px;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: flex-start;
padding-left: 90px;
&.line1 {
top: 0px;
} }
.gouxuan { &.line2 {
display: inline-block; top: 300px;
}
.medal_item {
flex-shrink: 0;
width: 260px;
height: 260px;
margin-bottom: 20px;
margin-right: 20px;
&>img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.medal_item:nth-child(odd) {
margin-top: 70px;
}
.medal_item:nth-child(even) {
margin-top: 0;
}
}
.left_guide {
position: absolute;
left: 288px;
top: 1188px;
width: 200px;
height: 28px;
pointer-events: none;
.arrow_left {
position: absolute; position: absolute;
width: 38px; left: 0px;
height: 38px; top: 5px;
left: -3px; width: 11px;
top: -4px; height: 19px;
background: rgba(0, 0, 0, 0); .formatBg();
} }
.chakanyinsi { .left_guide_text {
display: inline-block;
position: absolute; position: absolute;
width: 170px; left: 20px;
height: 30px;
right: 0px;
top: 0px; top: 0px;
font-size: 28px;
line-height: 28px;
color: rgb(131, 80, 42);
} }
} }
.characterYinsi { .btn_prize {
width: 375px; position: absolute;
height: 30px; left: 34px;
left: 185px; top: 1306px;
// top: 1504px; width: 180px;
bottom: 90px; height: 189px;
.formatBg();
}
.btn_future {
position: absolute;
left: 545px;
top: 1306px;
width: 180px;
height: 189px;
.formatBg();
} }
.oldHealthyYinsi { .mainbtn_box {
width: 375px; position: absolute;
height: 30px; left: 222px;
left: 185px; top: 1254px;
// top: 1504px; width: 308px;
bottom: 90px; height: 286px;
.mainbtn {
position: absolute;
left: 0px;
top: 0px;
width: 308px;
height: 286px;
.formatBg();
}
.current_bb {
font-size: 22px;
color: rgb(255, 255, 255);
line-height: 22px;
text-align: center;
position: absolute;
left: 11%;
top: 240px;
width: 80%;
height: 22px;
}
.mainbtn_popover {
position: absolute;
left: 159px;
top: 139px;
width: 177px;
height: 48px;
.formatBg();
font-size: 16px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 43px;
}
} }
} }
\ No newline at end of file
src/store/newSkin.js
View file @ dfdba24f
...@@ -11,8 +11,19 @@ import { ...@@ -11,8 +11,19 @@ import {
// 首页 // 首页
let homeJs1 = { let _homePage = {
homeBg: './assets/homePage/homeBg.png', bg_type1: './assets/homePage/bg_type1.png',
bg_type2: './assets/homePage/bg_type2.png',
tab1: './assets/homePage/tab1.png',
tab2: './assets/homePage/tab2.png',
arrow_left: './assets/homePage/arrow_left.png',
btn_prize: './assets/homePage/btn_prize.png',
mainbtn: './assets/homePage/mainbtn.png',
btn_future: './assets/homePage/btn_future.png',
mainbtn_popover: './assets/homePage/mainbtn_popover.png',
btn_rule: './assets/homePage/btn_rule.png',
title: './assets/homePage/title.png',
btn_share: './assets/homePage/btn_share.png',
} }
...@@ -29,8 +40,8 @@ const dealImg = (obj) => { ...@@ -29,8 +40,8 @@ const dealImg = (obj) => {
return obj return obj
} }
let homeJs = dealImg(homeJs1) let homePage = dealImg(_homePage)
const skinStore = makeAutoObservable({ const skinStore = makeAutoObservable({
homeJs, homePage,
}) })
export default skinStore; export default skinStore;
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