feat:youxi

package.json

@@ -74,5 +74,6 @@
     "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/app.jsx

@@ -15,6 +15,7 @@ MD();
 import LoadingDemo from "@src/pages/LoadingDemo/LoadingDemo";
 import HomeDemo from "@src/pages/HomeDemo/HomeDemo";
 import { PAGE_MAP } from "./utils/constants";
+import GamePage from "./pages/gamePage/gamePage";
 
 /**
  * 所有页面场景
@@ -22,6 +23,7 @@ import { PAGE_MAP } from "./utils/constants";
 const pageMap = {
   [PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
   [PAGE_MAP.HOME_PAGE]: <HomeDemo />,
+  [PAGE_MAP.GAME_PAGE]: <GamePage />,
 };
 
 @observer

src/assetList.json

-{"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","gamePage/bg.jpg","gamePage/numberBg.png","gamePage/selectBg.png"]}
\ No newline at end of file

src/components/guideModal/guideModal.jsx

+import React, { Component } from 'react';
+import './guideModal.less';
+import modalStore from '@src/store/modal';
+import { _throttle } from '@src/utils/utils';
+
+class GuideModal extends Component {
+
+  closeModal = _throttle(() => {
+    const {doCount} = this.props.popData;
+    doCount && doCount();
+    modalStore.closePop("GuideModal")
+  })
+
+  render() {
+    return (
+      <div className='guideModal'>
+        <div className="bg"></div>
+      </div>
+    );
+  }
+}
+
+export default GuideModal;

src/components/guideModal/guideModal.less

+@import '../../res.less';
+
+.guideModal {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  .bg {
+    width: 100%;
+    height: 1624px;
+    position: absolute;
+   .sparkBg("gamePage/guide.jpg");
+  }
+}
\ No newline at end of file

src/modal/modal.jsx

@@ -3,10 +3,15 @@ import './modal.less';
 import { observer } from 'mobx-react';
 import modalStore from '../store/modal';
 import { toJS } from 'mobx';
+import GuideModal from "@src/components/guideModal/guideModal";
+
 /**
  * 弹窗配置
 */
-export const cfg = {}; 
+export const cfg = {
+  // 新手引导
+  GuideModal,
+}; 
 
 @observer
 class Modal extends Component {

src/pages/gamePage/gameData.js

+export const plusProbability = [
+  {
+    name: 'plus',
+    radio: 0.2,
+    symbolText: '+$'
+  },
+  {
+    name: 'multiplyZheng',
+    radio: 0.2,
+    symbolText: 'x'
+  },
+  {
+    name: 'multiplyFen',
+    radio: 0.2,
+    symbolText: 'x'
+  },
+  {
+    name:'percent',
+    radio: 0.2,
+    symbolText: '+'
+  },
+  {
+    name:'doublePlus',
+    radio: 0.2,
+    symbolText: '+$'
+  },
+]
+
+export const minusProbability = [
+  {
+    name: 'minus',
+    radio: 0.2,
+    symbolText: '-$'
+  },
+  {
+    name: 'division',
+    radio: 0.2,
+    symbolText: '÷'
+  },
+  {
+    name: 'multiplyFen',
+    radio: 0.2,
+    symbolText: 'x'
+  },
+  {
+    name:'percent',
+    radio: 0.2,
+    symbolText: '-'
+  },
+  {
+    name: 'minusDouble',
+    radio: 0.2,
+    symbolText: '-$'
+  },
+]
+
+export const additionProbability = [
+  {
+    name:'plusAddition',
+    radio: 0.5,
+  },
+  {
+    name:'minusAddition',
+    radio: 0.5,
+  },
+]
\ No newline at end of file

src/pages/gamePage/gamePage.jsx

+import React, { Component } from 'react';
+import './gamePage.less';
+import { minusProbability, plusProbability } from './gameData';
+import modalStore from '@src/store/modal';
+
+class GamePage extends Component {
+
+  min = 1;
+
+  max = 99;
+
+  firstInFlag = true;
+
+  state = {
+    addition: 'plus',
+    symbolInfo1: {
+      number: 0,
+      fen1: 2,
+      fen2: 1,
+      symbolName: '',
+      symbolText: ''
+    },
+    symbolInfo2: {
+      number: 0,
+      fen1: 2,
+      fen2: 1,
+      symbolName: '',
+      symbolText: ''
+    },
+    selectIndex: 0,
+    currentNum: 1,
+    numElements: [{
+      top: '3.71rem'
+    }]
+    // fen1: 1,
+    // fen2: 1,
+    // fen3: 1,
+    // fen4: 1,
+    // number1: 0,
+    // number2: 0
+  }
+
+  componentDidMount() {
+    
+    this.createAddition();
+    // modalStore.pushPop("GuideModal", {doCount: this.doCount})
+  }
+
+  doCount = () => {
+  
+  }
+
+  // 生成加减
+  createAddition = () => {
+
+    // 随机生成加减
+    let addition = Math.random() > 0.5 ? 'minus' : 'plus';
+    if(this.firstInFlag) {
+      this.firstInFlag = false;
+      addition = 'plus';
+    }
+    if(this.currentNumber == 0) {
+      addition = 'plus';
+    }
+    this.currentOpt = addition;
+    const symbolInfo1 = this.createSymbol(addition);
+    const symbolInfo2 = this.createSymbol(addition);
+    
+    // console.error(symbolInfo);
+
+    this.setState({
+      addition,
+      symbolInfo1,
+      symbolInfo2,
+      number1: symbolInfo1?.number,
+      number2: symbolInfo2?.number,
+      fen1: symbolInfo1?.fen1,
+      fen2: symbolInfo1?.fen2,
+      fen3: symbolInfo2?.fen1,
+      fen4: symbolInfo2?.fen2
+    })
+
+  }
+
+  // 生成计算字符
+  createSymbol = (addition) => {
+    
+    const probabilityList = addition == 'plus' ? plusProbability : minusProbability;
+
+    let probability = Math.random();
+    
+    let symbolText =  probabilityList[0].symbolText;
+    let symbolName = probabilityList[0].name;
+   
+    for(let i = 0; i < probabilityList.length; i++) {
+      const radioItem = probabilityList[i]?.radio;
+      probability -= radioItem;
+      if(probability <= 0) {
+        symbolText = probabilityList[i].symbolText;
+        symbolName = probabilityList[i].name;
+        break;
+      }
+    }
+
+    // console.error(symbolText, symbolName);
+
+    return this.createNum({
+      symbolName,
+      symbolText,
+    })
+
+  }
+
+  // 在最大和最小值之间选择一个数字
+  createSpecialNum = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+  // 生成任意的数字
+  createNum = (symbolInfo) => {
+    // 这里分几种类型生成 都需要有范围限制
+    const { currentNum, addition } = this.state;
+
+    const symbolName = symbolInfo?.symbolName;
+    const symbolText = symbolInfo?.symbolText;
+
+    let number = 1;
+
+    let fen1 = 2;
+    let fen2 = 1;
+    switch(symbolName) {
+      case 'plus':
+      case 'doublePlus':
+        number = this.createSpecialNum(this.min - 1, this.max);
+        break;
+      case 'minus':
+        // const _max = Math.floor(currentNum / 2);
+        number = this.createSpecialNum(this.min, Math.min(this.max, currentNum));
+        break;
+      case 'multiplyZheng':
+        number = this.createSpecialNum(1, 9);
+        break;
+      case 'multiplyFen':
+        if(this.currentOpt == 'plus') {
+          fen1 = this.createSpecialNum(2, 8);
+          if(fen1 == 8) {
+            fen2 = 9
+          } else {
+            fen2 = fen1 + 1
+          }
+        } else {
+          fen1 = this.createSpecialNum(2, 9);
+          fen2 = this.createSpecialNum(1, Math.max(1, fen1 - 1));
+        }
+
+        number = fen2 / fen1;
+
+        // if(this.currentOpt == 'plus') {
+        //   fen1 = this.createSpecialNum(2, 8);
+          
+        //   if(fen1 == 8) {
+        //     fen2 = 9
+        //   } else {
+        //     const fenMin = Math.min(8, fen1 + 1);
+        //     const fenMax = 9;
+        //     fen2 = this.createSpecialNum(fenMin , fenMax);
+        //   }
+        //   number = fen2 / fen1;
+        // } else {
+        //   fen1 = this.createSpecialNum(2, 9);
+        //   fen2 = this.createSpecialNum(1, Math.max(1, fen1 - 1));
+        //   number = fen2 / fen1;
+        // }
+        break;
+      case 'percent':
+        number = this.createSpecialNum(1, 100);
+        break;
+      case 'division':
+        number = 2;
+        break;
+      // case 'multiplyFen':
+      //   fen1 = this.createSpecialNum(2, 9);
+      //   fen2 = this.createSpecialNum(1, Math.max(1, fen1_m - 1));
+      //   number = fen2 / fen1;
+      //   break;
+      case 'minusDouble':
+        // const _maxD = Math.floor(currentNum / 4);
+        // number = this.createSpecialNum(0, _maxD);
+        number = this.createSpecialNum(0, Math.min(99, Math.floor(currentNum / 2)));
+        break;
+
+    }
+
+    // console.error(number);
+
+
+    return {
+      number,
+      fen1,
+      fen2,
+      symbolName,
+      symbolText
+    };
+    
+
+  }
+
+  currentNumber = 1;
+  currentOpt = 'plus'
+  // 计算数字
+  calcNum(symbolName, index) {
+    const {currentNum, symbolInfo1, symbolInfo2} = this.state;
+
+    let newNumber1 = this.currentNumber;
+
+    const symbolInfo = index == -1 ? symbolInfo1 : symbolInfo2;
+
+    const operate = this.currentOpt == 'plus' ? 1 : -1;
+    console.warn("operate", operate)
+    switch(symbolName) {
+      case 'plus':
+      case 'minus':
+        newNumber1 += symbolInfo?.number * operate;
+        break;
+      case 'multiplyZheng':
+        newNumber1 += symbolInfo?.number * newNumber1 
+        break;
+      case 'multiplyFen':
+        newNumber1 += Math.round(symbolInfo?.fen2 / symbolInfo?.fen1 * newNumber1) * operate;
+        break;
+      case 'percent':
+        newNumber1 += Math.round(symbolInfo?.number * newNumber1 / 100) * operate ;
+        break;
+      case 'division':
+        newNumber1 -= Math.round(newNumber1 / symbolInfo?.number);
+        break;
+      case 'doublePlus':
+      case 'minusDouble':
+        newNumber1 += symbolInfo?.number * 2 * operate;
+        break;
+    }
+
+    return newNumber1;
+  }
+
+  canChoose = true
+  // 选择数字
+  chooseNumber = (index) => {
+
+    if(!this.canChoose) return
+    this.canChoose = false
+
+    const {currentNum, addition, symbolInfo1, symbolInfo2} = this.state;
+
+    let newNumber = this.currentNumber;
+
+    // const symbolInfo = index == -1 ? symbolInfo1 : symbolInfo2;
+
+    const operate = addition == 'plus' ? 1 : -1;
+
+    const symbolName1 = symbolInfo1?.symbolName;
+    const symbolName2 = symbolInfo2?.symbolName;
+
+    const newNumber1 = this.calcNum(symbolName1, -1);
+    const newNumber2 = this.calcNum(symbolName2, 1);
+
+    // 如果是加法 先判断选择的是不是比另一个大 如果不是那就不用计算了
+    if(addition == 'plus') {
+      const correctIndex = newNumber1 > newNumber2 ? -1 : 1;
+
+      if(correctIndex != index && newNumber1 != newNumber2) {
+        this.setState({
+          selectIndex: index,
+        })
+
+        setTimeout(() => {
+          this.createAddition();
+          this.canChoose = true
+          this.setState({
+            selectIndex: 0,
+          })
+        }, 500)
+
+        return
+      }
+      
+    }
+
+    console.warn("左边", newNumber1, "右边", newNumber2)
+
+    newNumber = index == -1 ? newNumber1 : newNumber2;
+    this.currentNumber = newNumber;
+
+
+    if(this.currentOpt == 'plus' && this.currentNumber > 0) {
+      this.divNum++;
+      this.createNewElement();
+    }
+    
+    console.warn("newNumber", this.currentNumber)
+    this.setState({
+      selectIndex: index,
+      currentNum: this.currentNumber,
+    })
+
+    setTimeout(() => {
+      this.createAddition();
+      this.canChoose = true
+      this.setState({
+        selectIndex: 0,
+      })
+    }, 500)
+  }
+
+  lastTop = 3.71;
+  divNum = 0;
+  // 创建新的元素进行叠加
+  createNewElement = () => {
+    // const { numElements, currentNumber } = this.state;
+    const { numElements, currentNumber } = this.state;
+    const lastTop = numElements.length > 0 ? parseFloat(numElements[numElements.length - 1].top) : 3.71;
+    const newTop = 3.71 - 0.05 * this.divNum;
+
+    console.warn("numElements", numElements, numElements.length - 1)
+    console.warn("lastTop", lastTop, "newTop", newTop)
+    // 创建一个新的 ref 来存储新元素
+    const newElementRef = React.createRef();
+
+    this.setState(prevState => ({
+      numElements: [
+        ...prevState.numElements,
+        {
+          top: `${this.lastTop}rem`, // 初始位置为上一个元素的 top 位置
+          number: this.currentNumber,
+          ref: newElementRef // 存储 ref
+        }
+      ]
+    }), () => {
+      // 在 setState 回调中执行动画
+      const element = newElementRef.current;
+      if (element) {
+        // 设置过渡效果
+        element.style.transition = 'top 0.1s ease-in-out';
+        // 延迟一小段时间以确保过渡效果生效
+        setTimeout(() => {
+          element.style.top = `${newTop}rem`; // 移动到新的 top 位置
+          this.lastTop = newTop;
+        }, 10);
+      }
+    });
+    // this.setState({
+    //   numElements: [
+    //     ...numElements,
+    //     {
+    //       top: 3.71 - 0.02 * this.divNum + 'rem',
+    //       number: this.currentNumber
+    //     }
+    //   ]
+    // });
+    // this.divNum++;
+  }
+
+
+  render() {
+    const { addition, symbolInfo1, symbolInfo2, selectIndex, currentNum, numElements } = this.state;
+
+    // console.error(symbolInfo1, symbolInfo2);
+
+    // console.error(number1, number2);
+    return (
+      <div className="gamePage" id="gamePage1">
+        <div className="bg"></div>
+        <div className="countBg">
+          <div className="count">{currentNum}</div>
+        </div>
+        {/* <div className="numPaper">
+          <div className="number">${currentNum}</div>
+        </div> */}
+        {/* 渲染新创建的元素 */}
+        {numElements.map((element, index) => (
+          <div key={index} className="numPaper" ref={element.ref} style={{ top: element.top }}>
+            {index == numElements.length - 1 && <div className="number">${currentNum}</div>}
+          </div>
+        ))}
+        <div className="leftNum" onClick={() => this.chooseNumber(-1)}>
+          {selectIndex == -1 && <div className="selected"></div>}
+          {(addition == 'plus' && symbolInfo1?.symbolName != 'doublePlus' && symbolInfo1?.symbolName != 'minusDouble') && <div className="number1">
+            {symbolInfo1?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo1?.symbolText}{symbolInfo1?.number}{symbolInfo1?.symbolText == '+' ? '%' : ''}</div>}
+            {symbolInfo1?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo1?.symbolText}{symbolInfo1?.symbolText == '+'? '%' : ''}
+              <div className="fenBox">
+                <div className="fen1">{symbolInfo1?.fen2}</div>
+                <div className="fen2">{symbolInfo2?.fen1}</div>
+              </div>
+            </div>}
+          </div>}
+          {(addition == 'minus' && symbolInfo1?.symbolName != 'doublePlus' && symbolInfo1?.symbolName != 'minusDouble') && <div className="minusNumber1">
+            {symbolInfo1?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo1?.symbolText}{symbolInfo1?.number}{symbolInfo1?.symbolText == '-' ? '%' : ''}</div>}
+            {symbolInfo1?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo1?.symbolText}{symbolInfo1?.symbolText == '+'? '%' : ''}
+              <div className="fenBox">
+                <div className="fen1">{symbolInfo1?.fen2}</div>
+                <div className="fen2">{symbolInfo1?.fen1}</div>
+              </div>
+            </div>}
+          </div>}
+          {(symbolInfo1?.symbolName == 'doublePlus' || symbolInfo1?.symbolName == 'minusDouble') && <div className="twoNum">
+            <div className={`left1 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo1?.symbolText}{symbolInfo1?.number}{(symbolInfo1?.symbolText == '+' || symbolInfo1?.symbolText == '-') ? '%' : ''}</div>
+            <div className={`left2 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo1?.symbolText}{symbolInfo1?.number}{(symbolInfo1?.symbolText == '+' || symbolInfo1?.symbolText == '-') ? '%' : ''}</div>
+          </div>}
+        </div>
+        <div className="rightNum" onClick={() => this.chooseNumber(1)}>
+          {selectIndex == 1 && <div className="selected"></div>}
+          {(addition == 'plus' && symbolInfo2?.symbolName != 'doublePlus' && symbolInfo2?.symbolName != 'minusDouble') && <div className="number2">
+            {symbolInfo2?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo2?.symbolText}{symbolInfo2?.number}{symbolInfo2?.symbolText == '+' ? '%' : ''}</div>}
+            {symbolInfo2?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo2?.symbolText}{symbolInfo2?.symbolText == '+'? '%' : ''}
+              <div className="fenBox">
+                <div className="fen1">{symbolInfo2?.fen2}</div>
+                <div className="fen2">{symbolInfo2?.fen1}</div>
+              </div>
+            </div>}
+          </div>}
+          {(addition == 'minus' && symbolInfo2?.symbolName != 'doublePlus' && symbolInfo2?.symbolName != 'minusDouble') && <div className="minusNumber2">
+            {symbolInfo2?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo2?.symbolText}{symbolInfo2?.number}{symbolInfo2?.symbolText == '-' ? '%' : ''}</div>}
+            {symbolInfo2?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo2?.symbolText}{symbolInfo2?.symbolText == '+'? '%' : ''}
+              <div className="fenBox">
+                <div className="fen1">{symbolInfo2?.fen2}</div>
+                <div className="fen2">{symbolInfo2?.fen1}</div>
+              </div>
+            </div>}
+          </div>}
+          {(symbolInfo2?.symbolName == 'doublePlus' || symbolInfo2?.symbolName == 'minusDouble') && <div className="twoNum">
+            <div className={`right1 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo2?.symbolText}{symbolInfo2?.number}{(symbolInfo2?.symbolText == '+' || symbolInfo2?.symbolText == '-') ? '%' : ''}</div>
+            <div className={`right2 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo2?.symbolText}{symbolInfo2?.number}{(symbolInfo2?.symbolText == '+' || symbolInfo2?.symbolText == '-') ? '%' : ''}</div>
+          </div>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default GamePage;

src/pages/gamePage/gamePage.less

+@import "../../res.less";
+
+.gamePage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+
+  .bg {
+    width: 100%;
+    height: 1624px;
+    position: absolute;
+    .sparkBg("gamePage/bg.jpg");
+  }
+
+  .countBg {
+    width: 148px;
+    height: 61px;
+    line-height: 67px;
+    position: absolute;
+    left: 575px;
+    top: 61px;
+    color: #ffffff;
+    font-size: 30px;
+    .sparkBg("gamePage/countBg.png");
+    box-sizing: border-box;
+
+    .count {
+      width: 116px;
+      height: 54px;
+      position: absolute;
+      left: 70px;
+    }
+  }
+
+  .numPaper {
+    width: 357px;
+    height: 219px;
+    position: absolute;
+    left: 204px;
+    top: 371px;
+    .sparkBg("gamePage/numberBg.png");
+
+    .number {
+      width: 290px;
+      height: 150px;
+      position: absolute;
+      left: 18px;
+      top: 46px;
+      font-size: 60px;
+      color: #10631c;
+      font-weight: bold;
+      line-height: 150px;
+      text-align: center;
+      // background-color: #ffffff;
+    }
+  }
+
+  .minusBg {
+    color: #792818!important;
+    .sparkBg("gamePage/minus2.png")!important;
+  }
+
+  .leftNum {
+    width: 332px;
+    height: 266px;
+    position: absolute;
+    left: 45px;
+    top: 778px;
+
+    .selected {
+      width: 332px;
+      height: 266px;
+      position: absolute;
+      .sparkBg("gamePage/selectBg.png");
+    }
+
+    .number1 {
+      width: 280px;
+      height: 180px;
+      position: absolute;
+      left: 35px;
+      top: 25px;
+      .sparkBg("gamePage/plus.png");
+
+      .text1 {
+        width: 212px;
+        height: 112px;
+        line-height: 112px;
+        text-align: center;
+        position: absolute;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        color: #10631c;
+        // background-color: #ffffff;
+      }
+
+      .text2 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        line-height: 112px;
+        text-align: center;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        color: #10631c;
+        .fenBox {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+         
+          .fen1 {
+            padding-bottom: 6px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            border-bottom: 3px solid #10631c;
+          }
+
+          .fen2 {
+            padding-top: 10px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+      } 
+     
+
+
+      
+    }
+
+    .minusNumber1 {
+      width: 280px;
+      height: 180px;
+      position: absolute;
+      left: 35px;
+      top: 25px;
+      .sparkBg("gamePage/minus.png");
+
+      .text1 {
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        line-height: 112px;
+        text-align: center;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        color: #792818;
+        // background-color: #ffffff;
+      }
+
+      .text2 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        line-height: 112px;
+        text-align: center;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        color: #792818;
+        .fenBox {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+         
+          .fen1 {
+            padding-bottom: 6px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            border-bottom: 3px solid #792818;
+          }
+
+          .fen2 {
+            padding-top: 10px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+      } 
+    }
+
+    .twoNum {
+      .left1 {
+        width: 151px;
+        height: 80px;
+        position: absolute;
+        left: 80px;
+        top: 60px;
+        text-align: center;
+        line-height: 80px;
+        font-size: 32px;
+        color: #10631c;
+        font-weight: bold;
+        .sparkBg("gamePage/plus2.png");
+      }
+
+      .left2 {
+        width: 151px;
+        height: 80px;
+        position: absolute;
+        left: 110px;
+        top: 115px;
+        text-align: center;
+        line-height: 80px;
+        font-size: 32px;
+        color: #10631c;
+        font-weight: bold;
+        .sparkBg("gamePage/plus2.png");
+      }
+    }
+  }
+
+  .rightNum {
+    width: 332px;
+    height: 266px;
+    position: absolute;
+    left: 370px;
+    top: 778px;
+
+    .selected {
+      width: 332px;
+      height: 266px;
+      position: absolute;
+      .sparkBg("gamePage/selectBg.png");
+    }
+
+    .number2 {
+      width: 280px;
+      height: 180px;
+      position: absolute;
+      left: 35px;
+      top: 25px;
+      .sparkBg("gamePage/plus.png");
+      .text1 {
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        line-height: 112px;
+        text-align: center;
+        color: #10631c;
+        // background-color: #ffffff;
+      }
+      .text2 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        line-height: 112px;
+        text-align: center;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        color: #10631c;
+        .fenBox {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+         
+          .fen1 {
+            padding-bottom: 6px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            border-bottom: 3px solid #10631c;
+          }
+
+          .fen2 {
+            padding-top: 10px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+      } 
+    }
+
+    .minusNumber2 {
+      width: 280px;
+      height: 180px;
+      position: absolute;
+      left: 35px;
+      top: 25px;
+      .sparkBg("gamePage/minus.png");
+      .text1 {
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        line-height: 112px;
+        text-align: center;
+        color: #792818;
+        // background-color: #ffffff;
+      }
+      .text2 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 212px;
+        height: 112px;
+        position: absolute;
+        line-height: 112px;
+        text-align: center;
+        left: 20px;
+        top: 44px;
+        font-size: 44px;
+        font-weight: bold;
+        color: #792818;
+        .fenBox {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+         
+          .fen1 {
+            padding-bottom: 6px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            border-bottom: 3px solid #792818;
+          }
+
+          .fen2 {
+            padding-top: 10px;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+          }
+        }
+      } 
+    }
+
+    .twoNum {
+      .right1 {
+        width: 151px;
+        height: 80px;
+        position: absolute;
+        left: 80px;
+        top: 60px;
+        text-align: center;
+        line-height: 80px;
+        font-size: 32px;
+        color: #10631c;
+        font-weight: bold;
+        .sparkBg("gamePage/plus2.png");
+      }
+
+
+
+      .right2 {
+        width: 151px;
+        height: 80px;
+        position: absolute;
+        left: 110px;
+        top: 115px;
+        text-align: center;
+        line-height: 80px;
+        font-size: 32px;
+        color: #10631c;
+        font-weight: bold;
+        .sparkBg("gamePage/plus2.png");
+      }
+    }
+  }
+}
\ No newline at end of file

src/store/index.js

@@ -20,7 +20,7 @@ const store = makeAutoObservable({
 
     myPrize: "myPrize", // TODO 举例子 新宿台奖品页
     index: PAGE_MAP.LOADING_PAGE,
-  }[skinId] || PAGE_MAP.LOADING_PAGE,
+  }[skinId] || PAGE_MAP.HOME_PAGE,
 
   pageData: {},
 

src/utils/constants.js

@@ -17,5 +17,6 @@ export const DEFAULT_NET_ERROR = '网络异常，请稍后再试';
 export const PAGE_MAP = {
   HOME_PAGE: "homePage",
   LOADING_PAGE: "loadingPage",
+  GAME_PAGE: "gamePage",
 };