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 {
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 {
animation: centerShowAni 500ms ease-out;
@keyframes centerShowAni {
......
src/pages/homePage/homePage.jsx
View file @ dfdba24f
......@@ -13,6 +13,9 @@ class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
curTab: 1,
}
}
componentDidMount() {
......@@ -28,9 +31,71 @@ class HomePage extends Component {
store.joinActivity();
}
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 (
<div className="homePage modal_center">
<div className="bg" style={{ 'backgroundImage': `url(${skinStore.homeJs.homeBg})` }}></div>
<div className="com_Container">
<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>
);
}
......
src/pages/homePage/homePage.less
View file @ dfdba24f
@import url('../../res.less');
.homePage {
width: 100%;
height: 100vh;
overflow-y: hidden;
overflow-x: hidden;
position: absolute;
width: 750px;
height: 1624px;
position: relative;
.bg {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
position: absolute;
.formatBg();
}
.beginbtn {
position: fixed;
width: 551px;
.title {
position: absolute;
left: 58px;
top: 86px;
width: 646px;
height: 219px;
left: 115px;
// top: 1294px;
bottom: 111px;
.formatBg();
}
.characterBeginbtn {
width: 475px;
height: 147px;
left: 131px;
// top: 1333px;
bottom: 144px;
.btn_rule {
position: absolute;
left: 0px;
top: 320px;
width: 93px;
height: 47px;
.formatBg();
}
.oldHealthyBeginbtn {
width: 483px;
height: 186px;
left: 126px;
// top: 1309px;
bottom: 131px;
.btn_share {
position: absolute;
right: 0px;
top: 320px;
width: 101px;
height: 47px;
.formatBg();
}
.yinsi {
position: fixed;
width: 373px;
height: 30px;
left: 188px;
// top: 1483px;
bottom: 111px;
.tab1 {
position: absolute;
left: 221px;
top: 312px;
width: 321px;
height: 67px;
.formatBg();
}
.selectIcon {
display: inline-block;
position: absolute;
width: 19px;
height: 17px;
left: 6px;
top: 7px;
.formatBg();
.tab2 {
position: absolute;
left: 221px;
top: 312px;
width: 321px;
height: 67px;
.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 {
display: inline-block;
&.line2 {
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;
width: 38px;
height: 38px;
left: -3px;
top: -4px;
background: rgba(0, 0, 0, 0);
left: 0px;
top: 5px;
width: 11px;
height: 19px;
.formatBg();
}
.chakanyinsi {
display: inline-block;
.left_guide_text {
position: absolute;
width: 170px;
height: 30px;
right: 0px;
left: 20px;
top: 0px;
font-size: 28px;
line-height: 28px;
color: rgb(131, 80, 42);
}
}
.characterYinsi {
width: 375px;
height: 30px;
left: 185px;
// top: 1504px;
bottom: 90px;
.btn_prize {
position: absolute;
left: 34px;
top: 1306px;
width: 180px;
height: 189px;
.formatBg();
}
.btn_future {
position: absolute;
left: 545px;
top: 1306px;
width: 180px;
height: 189px;
.formatBg();
}
.oldHealthyYinsi {
width: 375px;
height: 30px;
left: 185px;
// top: 1504px;
bottom: 90px;
.mainbtn_box {
position: absolute;
left: 222px;
top: 1254px;
width: 308px;
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 {
// 首页
let homeJs1 = {
homeBg: './assets/homePage/homeBg.png',
let _homePage = {
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) => {
return obj
}
let homeJs = dealImg(homeJs1)
let homePage = dealImg(_homePage)
const skinStore = makeAutoObservable({
homeJs,
homePage,
})
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