Skip to content

湖
湖南口味王-520猜数游戏-20250409
Commit d40aca90 authored by 徐士卿's avatar 徐士卿
Browse files
Options

明细、记录页

parent ad5f727b
Hide whitespace changes
Inline Side-by-side
Showing with 462 additions and 60 deletions
spark.config.json
View file @ d40aca90
{"proName":"湖南口味王—520猜数游戏-20250409","proDesc":"","proPath":"/Users/duibagroup/Documents/口味王猜数字/湖南口味王—520猜数游戏-20250409","createTime":1744169151592}
{"proName":"湖南口味王—520猜数游戏-20250409","proDesc":"","proPath":"/Users/duibagroup/Documents/口味王猜数字/湖南口味王-520猜数游戏-20250409","createTime":1744169151592}
src/app.jsx
View file @ d40aca90
......@@ -14,6 +14,8 @@ MD();
// 此处为spark-cli动态生成
import LoadingDemo from "@src/pages/LoadingDemo/LoadingDemo";
import HomeDemo from "@src/pages/HomeDemo/HomeDemo";
import Detailpage from "./pages/detailpage/detailpage";
import Rankpage from "./pages/rankpage/rankpage";
import { PAGE_MAP } from "./utils/constants";
/**
......@@ -22,6 +24,8 @@ import { PAGE_MAP } from "./utils/constants";
const pageMap = {
[PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
[PAGE_MAP.HOME_PAGE]: <HomeDemo />,
[PAGE_MAP.DETAIL_PAGE]: <Detailpage />,
[PAGE_MAP.RANK_PAGE]: <Rankpage />,
};
@observer
......
src/assetList.json
View file @ d40aca90
{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png"]}
\ No newline at end of file
{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","detailPage/back.png","detailPage/bg.png","detailPage/border.png","detailPage/headline.png","detailPage/l_bg.png","detailPage/line.png","rankPage/back.png","rankPage/bg.png","rankPage/border.png","rankPage/headnline.png","rankPage/l_bg.png","rankPage/line.png","rankPage/ownbg.png"]}
\ No newline at end of file
src/assets/detailPage/bg.png 0 → 100644
View file @ d40aca90
This diff is collapsed.
src/assets/rankPage/bg.png 0 → 100644
View file @ d40aca90
This diff is collapsed.
src/modal/modal.jsx
View file @ d40aca90
import React, { Component } from "react";
import './modal.less';
import { observer } from 'mobx-react';
import modalStore from '../store/modal';
import { toJS } from 'mobx';
/**
* 弹窗配置
*/
export const cfg = {};
@observer
class Modal extends Component {
constructor(props) {
super(props);
}
componentDidMount() { }
render() {
const list = toJS(modalStore.popList);
if (!list.length) {
// TODO:此处根据需要自行修改
// document.body.style.overflow='auto';
return <section></section>;
}
let PopUpMulti, popUpMultiData;
if (list.length > 1 && list[list.length - 1].isMulti == true) {
const popObj2 = list[list.length - 1];
PopUpMulti = cfg[popObj2.key];
popUpMultiData = popObj2.data;
}
const popObj = list[0];
const PopUp = cfg[popObj.key];
const popData = popObj.data;
if (PopUp || PopUpMulti) {
document.body.style.overflow='hidden';
}
return <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}>
{PopUp && <PopUp popData={popData} />}
{PopUpMulti && <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}><PopUpMulti popData={popUpMultiData} />
</section>}
</section>;
}
}
import React, { Component } from "react";
import Rankpage from "../pages/rankpage/rankpage";
import Detailpage from "../pages/detailpage/detailpage";
import './modal.less';
import { observer } from 'mobx-react';
import modalStore from '../store/modal';
import { toJS } from 'mobx';
/**
* 弹窗配置
*/
export const cfg = {
Detailpage: Detailpage,
Rankpage: Rankpage
};
@observer
class Modal extends Component {
constructor(props) {
super(props);
}
componentDidMount() {}
render() {
const list = toJS(modalStore.popList);
if (!list.length) {
// TODO:此处根据需要自行修改
// document.body.style.overflow='auto';
return <section></section>;
}
let PopUpMulti, popUpMultiData;
if (list.length > 1 && list[list.length - 1].isMulti == true) {
const popObj2 = list[list.length - 1];
PopUpMulti = cfg[popObj2.key];
popUpMultiData = popObj2.data;
}
const popObj = list[0];
const PopUp = cfg[popObj.key];
const popData = popObj.data;
if (PopUp || PopUpMulti) {
document.body.style.overflow = 'hidden';
}
return <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}>
{PopUp && <PopUp popData={popData} />}
{PopUpMulti && <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}><PopUpMulti popData={popUpMultiData} />
</section>}
</section>;
}
}
export default Modal;
\ No newline at end of file
src/pages/detailpage/detailpage.jsx 0 → 100644
View file @ d40aca90
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './detailpage.less';
import { Button } from '@src/components/Button';
import { _asyncThrottle } from '@src/utils/utils';
import store from '@src/store';
import { PAGE_MAP } from '@src/utils/constants';
@observer
class Detailpage extends React.Component {
constructor(props) {
super(props);
}
back = _asyncThrottle(() => {
store.changePage(PAGE_MAP.HOME_PAGE)
})
render() {
return (
<div className="detailpage modal_center">
<span className="bg"></span>
<Button className="back" onClick={this.back} />
<div className="list">
<span className="border"></span>
<span className="l_bg"></span>
{/* arrary */}
<div className="sample">
<span className="name">完成200分获得青果</span>
<span className="time">2025.03.25</span>
<span className="receive">+1000000000</span>
<span className="line"></span>
</div>
</div>
<span className="headline"></span>
</div>
);
}
}
export default Detailpage;
src/pages/detailpage/detailpage.less 0 → 100644
View file @ d40aca90
@import "../../res.less";
.detailpage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("detailPage/bg.png");
}
.back {
width: 94px;
height: 49px;
left: 25px;
top: 50px;
position: absolute;
.sparkBg("detailPage/back.png");
}
.list {
width: 724px;
height: 1351px;
left: 12px;
top: 240px;
position: absolute;
.border {
width: 724px;
height: 1351px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("detailPage/border.png");
}
.l_bg {
width: 674px;
height: 1298px;
left: 24px;
top: 34px;
position: absolute;
.sparkBg("detailPage/l_bg.png");
}
.sample {
width: 623px;
height: 95px;
left: 51px;
top: 79px;
position: absolute;
.name {
width: 460px;
height: 34px;
left: 3px;
top: 0px;
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
}
.time {
width: 360px;
height: 30px;
left: 4px;
top: 47px;
position: absolute;
font-size: 26px;
line-height: 26px;
color: rgba(183, 183, 183, 1);
.lineClamp1();
}
.receive {
width: 99px;
height: 34px;
left: 530px;
top: 14px;
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
}
.line {
width: 623px;
height: 4px;
left: 0px;
top: 91px;
position: absolute;
opacity: 0.62;
.sparkBg("detailPage/line.png");
}
}
}
.headline {
width: 464px;
height: 140px;
left: 141px;
top: 93px;
position: absolute;
.sparkBg("detailPage/headline.png");
}
}
src/pages/rankpage/rankpage.jsx 0 → 100644
View file @ d40aca90
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './rankpage.less';
@observer
class Rankpage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="rankpage modal_center">
<span className="bg"></span>
<span className="headnline"></span>
<span className="tip">该成绩仅为游戏当日分数</span>
<span className="back"></span>
<div className="list">
<span className="border"></span>
<span className="l_bg"></span>
<div className="own">
<span className="ownbg"></span>
<span className="ownrank">99</span>
<span className="ownname">用户昵称12345(我)</span>
<span className="ownscore">200</span>
</div>
<div className="sample">
<span className="userrank">99</span>
<span className="username">用户昵称12345(他)</span>
<span className="userscore">200</span>
<span className="line"></span>
</div>
<span className="rank">排名</span>
<span className="name">用户昵称</span>
<span className="score">获得分数</span>
</div>
</div>
);
}
}
export default Rankpage;
src/pages/rankpage/rankpage.less 0 → 100644
View file @ d40aca90
@import "../../res.less";
.rankpage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("rankPage/bg.png");
}
.headnline {
width: 464px;
height: 140px;
left: 141px;
top: 57px;
position: absolute;
.sparkBg("rankPage/headnline.png");
}
.tip {
width: 392px;
height: 33px;
left: 191px;
top: 171px;
position: absolute;
font-size: 34px;
line-height: 33px;
color: rgba(255, 255, 255, 1);
}
.back {
width: 94px;
height: 49px;
left: 25px;
top: 50px;
position: absolute;
.sparkBg("rankPage/back.png");
}
.list {
width: 750px;
height: 1351px;
left: 0px;
top: 240px;
position: absolute;
.border {
width: 724px;
height: 1351px;
left: 12px;
top: 0px;
position: absolute;
.sparkBg("rankPage/border.png");
}
.l_bg {
width: 674px;
height: 1298px;
left: 36px;
top: 34px;
position: absolute;
.sparkBg("rankPage/l_bg.png");
overflow-y: auto;
}
.own {
width: 750px;
height: 139px;
left: 0px;
top: 120px;
position: absolute;
.ownbg {
width: 750px;
height: 139px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("rankPage/ownbg.png");
}
.ownrank {
width: 100px;
height: 26px;
left: 58px;
top: 45px;
position: absolute;
font-size: 30px;
line-height: 24px;
color: rgba(36, 28, 28, 1);
.lineClamp1();
text-align: center;
}
.ownname {
width: 273px;
height: 34px;
left: 223px;
top: 41px;
position: absolute;
font-size: 30px;
line-height: 32px;
color: rgba(36, 28, 28, 1);
.lineClamp1();
text-align: center;
}
.ownscore {
width: 100px;
height: 26px;
left: 558px;
top: 45px;
position: absolute;
font-size: 30px;
line-height: 24px;
color: rgba(36, 28, 28, 1);
.lineClamp1();
text-align: center;
}
}
.sample {
width: 623px;
height: 75px;
left: 63px;
top: 274px;
position: absolute;
.userrank {
width: 100px;
height: 28px;
left: -5px;
top: 0px;
position: absolute;
font-size: 28px;
line-height: 26px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: center;
}
.username {
width: 273px;
height: 30px;
left: 160px;
top: -4px;
position: absolute;
font-size: 28px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: center;
}
.userscore {
width: 100px;
height: 32px;
left: 495px;
top: -4px;
position: absolute;
font-size: 28px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: center;
}
.line {
width: 623px;
height: 4px;
left: 0px;
top: 71px;
position: absolute;
opacity: 0.62;
.sparkBg("rankPage/line.png");
}
}
.rank {
width: 66px;
height: 28px;
left: 79px;
top: 68px;
position: absolute;
font-size: 30px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
}
.name {
width: 132px;
height: 28px;
left: 282px;
top: 68px;
position: absolute;
font-size: 30px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
}
.score {
width: 131px;
height: 28px;
left: 546px;
top: 68px;
position: absolute;
font-size: 30px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
}
}
}
src/store/index.js
View file @ d40aca90
......@@ -20,7 +20,7 @@ const store = makeAutoObservable({
myPrize: "myPrize", // TODO 举例子 新宿台奖品页
index: PAGE_MAP.LOADING_PAGE,
}[skinId] || PAGE_MAP.LOADING_PAGE,
}[skinId] || PAGE_MAP.DETAIL_PAGE,
pageData: {},
......
src/utils/constants.js
View file @ d40aca90
......@@ -17,5 +17,7 @@ export const DEFAULT_NET_ERROR = '网络异常，请稍后再试';
export const PAGE_MAP = {
HOME_PAGE: "homePage",
LOADING_PAGE: "loadingPage",
DETAIL_PAGE: "Detailpage",
RANK_PAGE: "Rankpage",
};
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