Skip to content

L
LuzhouLaojiaoSnake_250428
Commit 14e7bf6e authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 2fee79bb 4306ec45
Hide whitespace changes
Inline Side-by-side
Showing with 365 additions and 144 deletions
src/App.tsx
View file @ 14e7bf6e
......@@ -27,7 +27,7 @@ class App extends Component {
const defaultPage = {
myPrize: MyPrize, // TODO 举例子 新宿台奖品页
index: HomePage,
}[skinId] || GamePage;
}[skinId] || HomePage;
PageCtrl.changePage(defaultPage);
}
......
src/core/components/MusicBtn/MusicBtn.tsx
View file @ 14e7bf6e
......@@ -9,8 +9,8 @@ export interface IMusicBtnProps extends HTMLAttributes<HTMLDivElement> {
disable?: string;
}
import musicClose from "@/assets/common/music_close.png";
import musicOpen from "@/assets/common/music_open.png";
import musicClose from "@/assets/homePage/musicoff.png";
import musicOpen from "@/assets/homePage/musicon.png";
@observer
class MusicBtn extends React.Component<IMusicBtnProps> {
......
src/pages/HomePage/HomePage.less
View file @ 14e7bf6e
@import "../../res.less";
.homeDemo {
position: absolute;
top: 0;
left: 0;
width: 100%;
.homepage {
width: 750px;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
overflow-y: auto;
.draw_icon{
position: absolute;
left: 620px;
top: 350px;
width: 119px;
height: 108px;
.sparkBg("HomeDemo/draw_icon.png")
}
.bg {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.sparkBg("HomeDemo/bg.png")
height: 1705px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/bg.png");
}
.ip {
.infobox {
width: 502px;
height: 148px;
left: 124px;
top: 412px;
position: absolute;
left: 282px;
top: 209px;
width: 178px;
height: 67px;
.sparkBg("HomeDemo/ip.png")
.infobg {
width: 502px;
height: 148px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/infobg.png");
}
.prizeingo {
width: 257px;
height: 65px;
left: 58px;
top: 47px;
position: absolute;
.prizename {
width: 172px;
height: 18px;
left: 95px;
top: 38px;
position: absolute;
font-size: 18px;
line-height: 18px;
color: rgba(255, 255, 255, 1);
}
.prizerank {
width: 120px;
height: 23px;
left: 95px;
top: 8px;
position: absolute;
font-size: 17px;
line-height: 23px;
color: rgba(255, 255, 255, 1);
}
.prizeimg {
width: 80px;
height: 65px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/prizeimg.png");
}
}
.rankinfo {
width: 103px;
height: 47px;
left: 347px;
top: 56px;
position: absolute;
.rankarr {
width: 25px;
height: 39px;
left: 78px;
top: 7px;
position: absolute;
.sparkBg("homePage/rankarr.png");
}
.ranklab {
width: 74px;
height: 15px;
left: 0px;
top: 32px;
position: absolute;
font-size: 15px;
line-height: 15px;
color: rgba(255, 255, 255, 1);
}
.ranknum {
width: 74px;
height: 28px;
left: 0px;
top: 0px;
position: absolute;
font-size: 35px;
line-height: 28px;
color: rgba(243, 225, 27, 1);
}
}
}
.title {
width: 484px;
height: 243px;
left: 120px;
top: 174px;
position: absolute;
left: 183px;
top: 283px;
width: 405px;
height: 187px;
.sparkBg("HomeDemo/title.png")
.sparkBg("homePage/title.png");
}
.smallTitle {
.prizebtn {
width: 159px;
height: 60px;
left: 12px;
top: 79px;
position: absolute;
left: 0;
top: 482px;
width: 750px;
height: 42px;
.sparkBg("HomeDemo/smallTitle.png")
.sparkBg("homePage/prizebtn.png");
}
.prize {
position: absolute;
left: 0px;
top: 208px;
width: 112px;
.rulebtn {
width: 115px;
height: 60px;
transform-origin: left center !important;
.sparkBg("HomeDemo/prize.png");
left: 624px;
top: 80px;
position: absolute;
.sparkBg("homePage/rulebtn.png");
}
.rule {
.musicon {
width: 55px;
height: 57px;
left: 684px;
top: 155px;
position: absolute;
left: 639px;
top: 208px;
width: 112px;
height: 60px;
transform-origin: right center !important;
.sparkBg("HomeDemo/rule.png");
// .sparkBg("homePage/musicon.png");
}
.numBg {
.musicf {
width: 41px;
height: 43px;
left: 691px;
top: 162px;
position: absolute;
left: 491px;
top: 1226px;
width: 154px;
height: 54px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: rgb(136, 25, 5);
.sparkBg("HomeDemo/numBg.png");
.lineClamp1();
padding-bottom: 11px;
// .sparkBg("homePage/musicoff.png");
}
.poster {
.mainbtn {
width: 474px;
height: 134px;
left: 140px;
top: 932px;
position: absolute;
.mainimg {
width: 474px;
height: 134px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/mainimg.png");
}
.mainnum {
width: 182px;
height: 24px;
left: 151px;
top: 80px;
position: absolute;
font-size: 25px;
line-height: 24px;
color: rgba(240, 35, 96, 1);
}
}
.shopbtn {
width: 92px;
height: 95px;
left: 20px;
top: 1286px;
width: 346px;
height: 120px;
.sparkBg("HomeDemo/poster.png");
top: 957px;
position: absolute;
.sparkBg("homePage/shopbtn.png");
}
.starGame {
.drawbtn {
width: 98px;
height: 100px;
left: 635px;
top: 953px;
position: absolute;
left: 390px;
top: 1286px;
width: 347px;
height: 120px;
.sparkBg("HomeDemo/StarBtn.png");
.drawimg {
width: 98px;
height: 100px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/drawimg.png");
}
.drawnum {
width: 28px;
height: 28px;
left: 70px;
top: 0px;
position: absolute;
.drawnumbg {
width: 28px;
height: 28px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/drawNumbg.png");
}
.drawnumlab {
width: 20px;
height: 16px;
left: 9px;
top: 6px;
position: absolute;
font-size: 21px;
line-height: 16px;
color: rgba(255, 255, 255, 1);
}
}
}
.cardBg {
.tasklist {
width: 695px;
height: 529px;
left: 30px;
top: 1145px;
position: absolute;
left: 0px;
top: 498px;
width: 750px;
height: 827px;
.sparkBg("HomeDemo/cardBg.png")
.taskitem {
width: 695px;
height: 172px;
left: 0px;
top: 0px;
position: absolute;
.taskbg {
width: 695px;
height: 172px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/taskbg.png");
}
.taskscanbtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskscanbtn.png");
}
.taskinvitebtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskinvitebtn.png");
}
.taskgetbtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskgetbtn.png");
}
.taskfinishbtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskfinishbtn.png");
}
.tasktit {
width: 149px;
height: 29px;
left: 168px;
top: 56px;
position: absolute;
font-size: 34px;
line-height: 29px;
color: rgba(255, 255, 255, 1);
}
.tasksub {
width: 121px;
height: 21px;
left: 170px;
top: 95px;
position: absolute;
font-size: 22px;
line-height: 21px;
color: rgba(255, 255, 255, 1);
}
.taskicon {
width: 65px;
height: 69px;
left: 89px;
top: 49px;
position: absolute;
.sparkBg("homePage/taskicon.png");
}
}
.taskitem2 {
width: 695px;
height: 348px;
left: 0px;
top: 181px;
position: absolute;
.sparkBg("homePage/taskitem2.png");
}
}
.homeSvga {
.tasktitle {
width: 676px;
height: 32px;
left: 39px;
top: 1098px;
position: absolute;
width: 750px;
height: 1436px;
left: 0;
top: 188px;
pointer-events: none;
.sparkBg("homePage/tasktitle.png");
}
.ip {
width: 373px;
height: 326px;
left: 192px;
top: 585px;
position: absolute;
.sparkBg("homePage/ip.png");
}
.musicBtn {
.leaves {
width: 750px;
height: 447px;
left: 0px;
top: 541px;
position: absolute;
left: 678px;
top: 279px;
width: 46px;
height: 46px;
.sparkBg("homePage/leaves.png");
}
.card {
.logo {
width: 170px;
height: 55px;
left: 291px;
top: 85px;
position: absolute;
.prizeImg {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.sparkBg("homePage/logo.png");
}
}
src/pages/HomePage/HomePage.tsx
View file @ 14e7bf6e
import React from 'react';
import {observer} from 'mobx-react';
import { observer } from 'mobx-react';
import './HomePage.less';
import {Button} from "@grace/ui";
import {_asyncThrottle} from "@/utils/utils.ts";
import { Button } from "@grace/ui";
import { _asyncThrottle } from "@/utils/utils.ts";
import store from "@/store/store.ts";
import {SvgaPlayer} from "@grace/svgaplayer";
import { SvgaPlayer } from "@grace/svgaplayer";
import homeSvga from "@/assets/svga/1输出首页氛围.svga";
import gameStore from "@/store/gameStore.ts";
import MusicBtn from "@/core/components/MusicBtn/MusicBtn.tsx";
......@@ -13,6 +13,7 @@ import PrizePanel from "@/panels/PrizePanel/PrizePanel.tsx";
import RulePanel from "@/panels/RulePanel/RulePanel.tsx";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import GamePage from "@/pages/GamePage/GamePage.tsx";
import musicStore from '@/store/musicStore';
@observer
class HomePage extends React.Component<any, any> {
......@@ -26,7 +27,7 @@ class HomePage extends React.Component<any, any> {
/** 开始游戏按钮*/
startGame = _asyncThrottle(async () => {
if(!store.judgeActTime()) return;
if (!store.judgeActTime()) return;
const suc = await gameStore.start();
if (!suc) return;
......@@ -37,7 +38,7 @@ class HomePage extends React.Component<any, any> {
/** 奖品按钮*/
clickPrize = _asyncThrottle(() => {
ModalCtrl.showModal(PrizePanel, {
prizeVO: { },
prizeVO: {},
});
})
......@@ -48,27 +49,57 @@ class HomePage extends React.Component<any, any> {
render() {
const {remainTimes} = store.indexData
return <div className="homeDemo" ref={(el) => this.root = el}>
<div className="homeImg"/>
<div className="bg"/>
<div className="ip"/>
{/*<div className="title"/>*/}
<div className="smallTitle"/>
<MusicBtn className="musicBtn md3"/>
<Button className="prize md1" onClick={this.clickPrize}/>
<Button className="rule md2" onClick={this.clickRule}/>
<div className="cardBg"/>
<SvgaPlayer className="homeSvga" src={homeSvga}/>
<div className="numBg">
剩余次数：{remainTimes}
const { remainTimes } = store.indexData
return <div className="homepage" ref={(el) => this.root = el}>
<span className="bg"></span>
<div className="infobox">
<span className="infobg"></span>
<div className="prizeingo">
<span className="prizename">奖品名称文案占位</span>
<span className="prizerank">前50名可得</span>
<span className="prizeimg"></span>
</div>
<div className="rankinfo">
<span className="rankarr"></span>
<span className="ranklab">我的排名</span>
<span className="ranknum">86名</span>
</div>
</div>
<Button className="starGame md5" onClick={this.startGame}/>
<span className="title"></span>
<span className="prizebtn"></span>
<span className="rulebtn"></span>
{/* <span className="musicon"></span>
<span className="musicf"></span> */}
<MusicBtn className={`${musicStore.mute ? 'musicf' : 'musicon'}`}></MusicBtn>
<div className="mainbtn">
<span className="mainimg"></span>
<span className="mainnum">剩余次数：3</span>
</div>
<span className="shopbtn"></span>
<div className="drawbtn">
<span className="drawimg"></span>
<div className="drawnum">
<span className="drawnumbg"></span>
<span className="drawnumlab">1</span>
</div>
</div>
<div className="tasklist">
<div className="taskitem">
<span className="taskbg"></span>
<span className="taskscanbtn"></span>
<span className="taskinvitebtn"></span>
<span className="taskgetbtn"></span>
<span className="taskfinishbtn"></span>
<span className="tasktit">每日登录</span>
<span className="tasksub">游戏次数*1</span>
<span className="taskicon"></span>
</div>
<span className="taskitem2"></span>
</div>
<span className="tasktitle"></span>
<span className="ip"></span>
<span className="leaves"></span>
<span className="logo"></span>
</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