merge

src/components/CodePop/CodePop.jsx

@@ -50,7 +50,7 @@ class CodePop extends React.Component {
 
   render() {
     const {codeImg} = this.state;
-    return <div className="CodePop modal_center">
+    return <div className="CodePop">
       <div className="light"/>
       <div className="bg">
         <img className="code" src={codeImg}/>

src/components/CodePop/CodePop.less

@@ -18,28 +18,28 @@
 
   .bg {
     position: absolute;
-    left: 99px;
+    left: 96px;
     top: 358px;
-    width: 553px;
-    height: 721px;
+    width: 593px;
+    height: 672px;
     .sparkBg("CodePop/bg.png")
   }
 
   .code {
     position: absolute;
     left: 146px;
-    top: 371px;
-    width: 261px;
-    height: 261px;
+    top: 240px;
+    width: 254px;
+    height: 254px;
     //.sparkBg("CodePop/code.png")
   }
 
   .close {
     position: absolute;
-    left: 345px;
-    top: 1122px;
-    width: 60px;
-    height: 60px;
-    .sparkBg("common/closeBtn.png")
+    left: 343px;
+    top: 1040px;
+    width: 64px;
+    height: 64px;
+    .sparkBg("CodePop/close.png")
   }
 }
\ No newline at end of file

src/components/LoginPop/LoginPop.jsx

 import React from "react";
 import {observer} from "mobx-react";
 import "./LoginPop.less";
-import {Button} from "@src/components/Button";
-import {Toast} from "@spark/ui";
-import API from "@src/api";
-import {_asyncThrottle, getUrlParam} from "@src/utils/utils";
-import {REG_TEL} from "@src/utils/constants";
-import modalStore from "@src/store/modal";
-import {LOG_KEY, pageView, sensorLog} from "@src/utils/sensors";
+import {REG_TEL, _asyncThrottle, getUrlParam} from "../../utils/utils";
+import { LOG_KEY, pageView, sensorLog } from "../../utils/sensors.js";
+import { Button, Toast } from "@grace/ui";
+import API from "../../api";
+
 
 @observer
 class LoginPop extends React.Component {
@@ -60,10 +58,10 @@ class LoginPop extends React.Component {
 
     const {phone} = this.state;
     if (!phone) {
-      return Toast("请输入手机号");
+      return Toast.show("请输入手机号");
     }
     if (!REG_TEL.test(phone)) {
-      return Toast("请输入正确的手机号～");
+      return Toast.show("请输入正确的手机号～");
     }
     await this.getCode(phone);
   });
@@ -76,15 +74,15 @@ class LoginPop extends React.Component {
     const {phone, code} = this.state;
 
     if (!phone) {
-      return Toast("请输入手机号");
+      return Toast.show("请输入手机号");
     }
 
     if (!REG_TEL.test(phone)) {
-      return Toast("请输入正确的手机号～");
+      return Toast.show("请输入正确的手机号～");
     }
 
     if (!code) {  // 未输入验证码
-      return Toast("请输入验证码");
+      return Toast.show("请输入验证码");
     }
 
     await this.bindPhone();
@@ -99,7 +97,7 @@ class LoginPop extends React.Component {
 
     const {success} = await API.getCode(params);
     if (success) {
-      Toast("验证码已发送");
+      Toast.show("验证码已发送");
       this.setState({
         isSend: true,
         cd: 60,
@@ -121,12 +119,12 @@ class LoginPop extends React.Component {
     const {success, data, desc} = await API.bindPhone(param);
     if (success) {
       if(location.href.indexOf('localhost') > -1){
-        modalStore.closePop('Login')
+        ModalCtrl.closeModal()
       }else{
         location.replace(data);
       }
     } else {
-      Toast(desc);
+      Toast.show(desc);
     }
   };
 
@@ -151,6 +149,10 @@ class LoginPop extends React.Component {
     });
   };
 
+  handleClose = _asyncThrottle(() => {
+    ModalCtrl.closeModal();
+  })
+
 
   render() {
     const {phone, code, isSend, cd, reSend} = this.state;
@@ -188,6 +190,7 @@ class LoginPop extends React.Component {
 
         <Button className={loginBtnCls} onClick={this.closeLogin}/>
       </div>
+      <Button className="close" onClick={this.handleClose} />
     </div>;
   }
 }

src/components/LoginPop/LoginPop.less

@@ -16,13 +16,22 @@
     // .sparkBg("common/light.png");
   }
 
+  .close {
+    position: absolute;
+    left: 343px;
+    top: 1060px;
+    width: 64px;
+    height: 64px;
+    .sparkBg("LoginPop/close.png");
+  }
+
 
   .bg {
     position: absolute;
     left: 99px;
-    top: 363px;
-    width: 553px;
-    height: 691px;
+    top: 510px;
+    width: 593px;
+    height: 453px;
     .sparkBg("LoginPop/bg.png");
 
 
@@ -38,9 +47,9 @@
       font-size: 30px;
       outline: none;
       border: none;
-      border: 2px solid rgb(104, 192, 112);
-      background-color: rgb(255, 252, 243);
-      box-shadow: 0px 3px 2px 0px rgba(162, 225, 244, 0.31),inset 0px 1px 3px 0px rgba(253, 220, 218, 0.93);
+      border: 2px solid rgb(219, 128, 28);
+      background-color: rgb(255, 239, 211);
+      box-shadow: 0px 3px 2px 0px rgba(162, 225, 244, 0.31), inset 0px 1px 3px 0px rgba(253, 220, 218, 0.93);
       // border-width: 2px;
       // border-color: #e49224;
       color: rgb(54, 43, 42);
@@ -52,12 +61,15 @@
 
 
     .phoneInput {
-      top: 295px;
+      top: 90px;
+      left: 52px;
     }
 
     .codeInput {
       width: 221px;
-      top: 402px;
+      top: 184px;
+      left: 56px;
+      ;
     }
 
     .sendBtn {
@@ -67,11 +79,11 @@
       font-size: 26px;
       text-decoration: underline;
       text-underline-offset: 7px;
-      color: rgb(9, 3, 4);
+      color: rgb(239, 125, 30);
       text-align: center;
       position: absolute;
       left: 290px;
-      top: 405px;
+      top: 184px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -84,11 +96,11 @@
       font-size: 26px;
       text-decoration: underline;
       text-underline-offset: 5px;
-      color: #756b5e;
+      color: rgb(239, 125, 30);
       text-align: center;
       position: absolute;
       left: 290px;
-      top: 405px;
+      top: 184px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -97,18 +109,18 @@
     .LoginBtn {
       position: absolute;
       left: 129px;
-      top: 528px;
-      width: 310px;
-      height: 95px;
+      top: 290px;
+      width: 263px;
+      height: 92px;
       .webpBg("LoginPop/canSubmitBtn.png");
     }
 
     .LoginBtnNoAct {
       position: absolute;
       left: 129px;
-      top: 528px;
-      width: 310px;
-      height: 95px;
+      top: 290px;
+      width: 263px;
+      height: 92px;
       .webpBg("LoginPop/cannotSubmit.png");
     }
   }

src/components/NoPrizeCard/NoPrizeCard.jsx

@@ -10,15 +10,15 @@ import { Button } from "@grace/ui";
 import { PageCtrl } from "@/core/ctrls/PageCtrl";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
 
+import afterSvga from "../../assets/svga/7输出撕开.svga";
+
 @observer
 class NoPrizeCard extends React.Component {
-
   state = {
     card: true,
   };
 
   componentDidMount() {
-
     pageView("b12872", {
       page_name: "祝福语翻转页",
     });
@@ -31,14 +31,14 @@ class NoPrizeCard extends React.Component {
   /** card1文本选择 */
   opt1 = () => {
     const list = [
-      'NoPrizeCard/text1.png',
-      'NoPrizeCard/text2.png',
-      'NoPrizeCard/text3.png',
-      'NoPrizeCard/text4.png'
-    ]
-    const address = list[randomNum(0, 4)]
-    return address
-  }
+      "src/assets/NoPrizeCard/text1.png",
+      "src/assets/NoPrizeCard/text2.png",
+      "src/assets/NoPrizeCard/text3.png",
+      "src/assets/NoPrizeCard/text4.png",
+    ];
+    const address = list[randomNum(0, 4)];
+    return address;
+  };
 
   /** 切换按钮*/
   clickExchange1 = () => {
@@ -48,7 +48,7 @@ class NoPrizeCard extends React.Component {
     });
     this.setState({
       card: false,
-      svg: true
+      svg: true,
     });
 
     setTimeout(() => {
@@ -56,11 +56,9 @@ class NoPrizeCard extends React.Component {
         svg: false,
         card: false,
       });
-    }, 2000)
-
+    }, 2000);
   };
 
-
   /** 关闭按钮*/
   clickClose = _throttle(() => {
     ModalCtrl.closeModal();
@@ -68,49 +66,49 @@ class NoPrizeCard extends React.Component {
 
   render() {
     const { card } = this.state;
-    const { data } = this.props;
-    return <div className="NoPrizeCard modal_center">
-      {
-        card === true ?
+    const { productInfos } = this.props || {};
+    console.log(productInfos);
+    return (
+      <div className="NoPrizeCard modal_center">
+        {card === true ? (
           //翻转前
           <div className="card1">
-            {/* <SvgaPlayer className="bg" src={RES_PATH + "svga/5输出展开.svga"} loop={1} /> */}
             <span className="picture"></span>
-            {/* <img className="text" src={RES_PATH + this.opt1()} /> */}
+            <img className="text" src={this.opt1()} />
           </div>
+        ) : (
           //翻转后
-          : <div>
-            {/* <SvgaPlayer className="bg" src={RES_PATH + "svga/6输出切换.svga"} loop={1} /> */}
-            <Swiper className="prodSwiper"
-              slidesPerView={1}
-              pagination={{ clickable: true }}
+          <div>
+            <span className="afterBg"></span>
+            <Swiper
+              className="prodSwiper"
+              indicatorProps={{ style: { display: "none" } }}
             >
-              {
-                data?.productInfos?.map((item, index) => {
-                  return <SwiperSlide className="prodItem" key={index}>
-                    <span className="line"></span>
-                    <img className="picture2"
+              {productInfos?.map((item, index) => {
+                return (
+                  <SwiperSlide className="prodItem" key={index}>
+                    <img
+                      className="picture2"
                       src={item?.productImg}
                       alt={item?.productText}
                     />
-                    <div className="txt">
-                      {item?.productText}
-                    </div>
+                    <div className="txt">{item?.productText}</div>
                   </SwiperSlide>
-                })
-              }
+                );
+              })}
             </Swiper>
             {/* <Button className="exchange2" /> */}
+            <SvgaPlayer className="after" src={afterSvga} loop={1} />
           </div>
-      }
-
-      {
-        card === true && <Button className="exchange1 md27" onClick={this.clickExchange1} />
-      }
+        )}
 
+        {card === true && (
+          <Button className="exchange1" onClick={this.clickExchange1} />
+        )}
 
-      <Button className="close" onClick={this.clickClose} />
-    </div>;
+        <Button className="close" onClick={this.clickClose} />
+      </div>
+    );
   }
 }
 

src/components/NoPrizeCard/NoPrizeCard.less

@@ -6,37 +6,46 @@
   top: 0;
   width: 750px;
   height: 1624px;
+  .popupCenterShow();
 
-  .bg {
+  .after {
     position: absolute;
-    left: 63px;
-    top: 256px;
-    width: 623px;
-    height: 1053px;
+    left: 20px;
+    top: 270px;
+    width: 701px;
+    height: 1014px;
   }
 
   .picture {
     position: absolute;
-    left: 148px;
-    top: 495px;
-    width: 473px;
-    height: 725px;
+    left: 49px;
+    top: 252px;
+    width: 653px;
+    height: 888px;
     .sparkBg("NoPrizeCard/picture.png");
-    .fade-in;
+  }
+
+  .afterBg {
+    position: absolute;
+    left: 49px;
+    top: 252px;
+    width: 653px;
+    height: 888px;
+    .sparkBg("NoPrizeCard/afterBg.png");
   }
 
   .text {
     position: absolute;
-    left: 270px;
-    top: 1074px;
+    left: 275px;
+    top: 976px;
     width: 215px;
     height: 115px;
-    .fade-in;
+    // .fade-in;
   }
 
   .prodSwiper {
     position: absolute;
-    left: 148px;
+    left: 155px;
     top: 0px;
     width: 452px;
     height: 1258px;
@@ -49,19 +58,20 @@
       align-items: center;
       justify-content: center;
 
-      .line {
-        position: absolute;
-        left: 5px;
-        top: 1035px;
-        width: 438px;
-        height: 2px;
-        .sparkBg("NoPrizeCard/line.png")
-      }
+      // .line {
+      //   position: absolute;
+      //   left: 5px;
+      //   top: 1035px;
+      //   width: 438px;
+      //   height: 2px;
+      //   .sparkBg("NoPrizeCard/line.png")
+      // }
 
       .picture2 {
         position: absolute;
         left: 0px;
-        top: 495px;
+        // top: 495px;
+        top: 430px;
         width: 452px;
         height: 499px;
         border-radius: 18px;
@@ -69,12 +79,12 @@
       }      
 
       .txt {
-        font-size: 23px;
-        color: rgb(42, 98, 23);
+        font-size: 22px;
+        color: rgb(255, 255, 255);
         line-height: 1.391;
         text-align: left;
         position: absolute;
-        top: 1088px;
+        top: 980px;
         width: 417px;
         height: 86px;
         overflow-y: auto;
@@ -84,9 +94,9 @@
 
   .exchange1 {
     position: absolute;
-    left: 279px;
-    top: 1252px;
-    width: 191px;
+    left: 302px;
+    top: 1160px;
+    width: 133px;
     height: 29px;
     .sparkBg("NoPrizeCard/exchange.png")
   }
@@ -103,9 +113,9 @@
   .close {
     position: absolute;
     left: 345px;
-    top: 1332px;
-    width: 60px;
-    height: 60px;
-    .sparkBg("common/closeBtn.png")
+    top: 1276px;
+    width: 64px;
+    height: 64px;
+    .sparkBg("NoPrizeCard/close.png")
   }
 }
\ No newline at end of file

src/components/settlechance/settlechance.jsx

-'use strict';
+"use strict";
 
-import React from 'react';
-import { observer } from 'mobx-react';
-import './settlechance.less';
+import React from "react";
+import { observer } from "mobx-react";
+import "./settlechance.less";
+import { Button, Toast } from "@grace/ui";
+import { _asyncThrottle } from "../../utils/utils";
+import { PageCtrl } from "@/core/ctrls/PageCtrl";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
+import { SvgaPlayer } from "@grace/svgaplayer";
 
+import lightSvga from "../../assets/svga/6输出弹窗.svga";
+import Capsulepage from "../../pages/CapsulePage/CapsulePage";
 @observer
 class Settlechance extends React.Component {
   constructor(props) {
     super(props);
   }
+  
+  handleClose = _asyncThrottle(() => {
+    ModalCtrl.closeModal()
+  })
+
+  handleKnow = _asyncThrottle(() => {
+    ModalCtrl.closeModal()
+  })
+
+  handleDraw = _asyncThrottle(() => {
+    ModalCtrl.closeModal()
+    PageCtrl.changePage(Capsulepage)
+  })
+
+
+
   render() {
+    const { data } = this.props || {};
+    const {
+      drawChance = 0,
+      title = "银河系脑洞霸主",
+      desc = "你的脑洞能凭空造出‘榴莲味wiFi’和‘会蹦迪的沙发’,建议去给科幻片当编剧，拯救全人类！",
+    } = data || {};
     return (
       <div className="settlechance modal_center">
-        <span className="dongxiao"></span>
+        <SvgaPlayer className="light" src={lightSvga} />
         <span className="bg"></span>
-        <span className="draw"></span>
-        <span className="know"></span>
+        <Button className="draw" onClick={this.handleDraw} />
+        <Button className="know" onClick={this.handleKnow} />
         <span className="icon"></span>
-        <span className="title"></span>
-        <span className="tip1">获得了「银河系脑洞霸主」称号</span>
-        <span className="tip2">你的脑洞能凭空造出‘榴莲味wiFi’和‘会蹦迪的沙发’,建议去给科幻片当编剧，拯救全人类！</span>
-        <span className="tip3">恭喜获得抽奖机会+1</span>
-        <span className="close"></span>
+        <span className="ribbon"></span>
+        <span className="title">恭喜您, 答对{0}题</span>
+        <span className="tip1">获得了「{title}」称号</span>
+        <span className="tip2">{desc}</span>
+        <span className="tip3">恭喜获得抽奖机会+{drawChance}</span>
+        <Button className="close" onClick={this.handleClose} />
       </div>
     );
   }

src/components/settlechance/settlechance.less

 @import "../../res.less";
+
 .settlechance {
   width: 750px;
   height: 1624px;
   left: 0px;
   top: 0px;
   position: absolute;
-  .dongxiao {
+
+  @font-face {
+    font-family: "MaokenAssortedSans";
+    src: url('/src/assets/font/MaokenAssortedSans.ttf') format('truetype');
+    // font-display: swap;
+  }
+
+  .light {
     width: 750px;
-    height: 1008px;
+    height: 1624px;
     left: 0px;
-    top: 213px;
+    // top: 213px;
     position: absolute;
-    .sparkBg("settleChance/dongxiao.png");
+    // .sparkBg("settleChance/dongxiao.png");
   }
+
   .bg {
     width: 606px;
     height: 901px;
@@ -21,6 +30,7 @@
     position: absolute;
     .sparkBg("settleChance/bg.png");
   }
+
   .draw {
     width: 169px;
     height: 69px;
@@ -29,6 +39,7 @@
     position: absolute;
     .sparkBg("settleChance/draw.png");
   }
+
   .know {
     width: 263px;
     height: 92px;
@@ -37,6 +48,7 @@
     position: absolute;
     .sparkBg("settleChance/know.png");
   }
+
   .icon {
     width: 237px;
     height: 251px;
@@ -45,33 +57,62 @@
     position: absolute;
     .sparkBg("settleChance/icon.png");
   }
+
   .title {
+    // width: 636px;
+    width: 750px;
+    height: 201px;
+    // left: 138px;
+    left: -10px;
+    top: 288px;
+    font-size: 62px;
+    text-align: center;
+    position: absolute;
+    color: rgb(255, 245, 214);
+    font-family: "MaokenAssortedSans";
+  }
+
+  .ribbon {
     width: 636px;
     height: 201px;
-    left: 32px;
+    left: 30px;
     top: 214px;
     position: absolute;
-    .sparkBg("settleChance/title.png");
+    .sparkBg("settleChance/ribbon.png");
   }
+
   .tip1 {
-    width: 428px;
-    height: 30px;
-    left: 155px;
+    width: 460px;
+    height: 33px;
+    left: 134px;
     top: 488px;
+    text-align: center;
     position: absolute;
     font-size: 30px;
-    line-height: 30px;
+    line-height: 33px;
     color: rgba(153, 57, 27, 1);
+    font-weight: bold;
+    .lineClamp1();
   }
+
   .tip2 {
-    width: 438px;
-    height: 91px;
-    left: 159px;
+    width: 460px;
+    height: 84px;
+    left: 134px;
     top: 807px;
+    text-align: center;
     position: absolute;
-    font-size: 21px;
+    font-size: 22px;
+    line-height: 38px;
     color: rgba(169, 90, 62, 1);
+    // .lineClamp1();
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
+
   .tip3 {
     width: 276px;
     height: 28px;
@@ -81,7 +122,9 @@
     font-size: 29px;
     line-height: 28px;
     color: rgba(157, 66, 37, 1);
+    font-weight: bold;
   }
+
   .close {
     width: 64px;
     height: 64px;
@@ -90,4 +133,4 @@
     position: absolute;
     .sparkBg("settleChance/close.png");
   }
-}
+}
\ No newline at end of file

src/components/settlenochance/settlenochance.jsx

@@ -3,6 +3,10 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import './settlenochance.less';
+import { Button, Toast } from '@grace/ui';
+import { _asyncThrottle } from "../../utils/utils";
+import { PageCtrl } from "@/core/ctrls/PageCtrl";
+import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
 
 @observer
 class Settlenochance extends React.Component {

src/pages/CapsulePage/CapsulePage.jsx

@@ -13,9 +13,12 @@ import { Button, Toast } from "@grace/ui";
 import { PageCtrl } from "@/core/ctrls/PageCtrl";
 import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
 import { SvgaPlayer } from "@grace/svgaplayer";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper";
+import "swiper/css";
 import Homepage from "../HomePage/HomePage.tsx";
 import Prizepop from "../../components/prizepop/prizepop.jsx";
-import Noprizecard from "../../components/NoPrizeCard/NoPrizeCard.jsx";
+import NoPrizeCard from "../../components/NoPrizeCard/NoPrizeCard.jsx";
 
 import machineSvga from "../../assets/svga/1输出扭蛋机常态.svga";
 import normalSvga from "../../assets/svga/2输出待机啊.svga";
@@ -23,7 +26,7 @@ import dynamicSvga from "../../assets/svga/3输出出奖啊.svga";
 import output1Svga from "../../assets/svga/4中奖扭蛋.svga";
 import output2Svga from "../../assets/svga/5中奖弹窗.svga";
 
-import { LOG_KEY, pageView, sensorLog } from '../../utils/sensors.js';
+import { LOG_KEY, pageView, sensorLog } from "../../utils/sensors.js";
 
 @observer
 class Capsulepage extends React.Component {
@@ -78,7 +81,7 @@ class Capsulepage extends React.Component {
       }
     }
 
-    const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
+    const { remainDrawTimes = 0 } = this.state.drawInfo;
 
     // 抽奖次数为0
     if (!remainDrawTimes) {
@@ -98,7 +101,7 @@ class Capsulepage extends React.Component {
       const {
         boolPrize = false,
         prizeInfo = {},
-        productInfo = [],
+        productInfos = [],
       } = data || {};
 
       // const index = prizeVOs?.findIndex(
@@ -112,7 +115,7 @@ class Capsulepage extends React.Component {
       }, 1600);
       setTimeout(() => {
         this.setState({ btnDynamic: false });
-        this.stopOkHandle(boolPrize, prizeInfo, productInfo);
+        this.stopOkHandle(boolPrize, prizeInfo, productInfos);
       }, 2000);
       // this.turntableRef.braking(index);
     } else {
@@ -122,13 +125,13 @@ class Capsulepage extends React.Component {
   });
 
   // 抽奖停止处理
-  stopOkHandle = (boolPrize, prizeInfo, productInfo) => {
+  stopOkHandle = (boolPrize, prizeInfo, productInfos) => {
     this.btnStarting = false;
     setTimeout(() => {
       this.setState({ btnOutput: false });
     }, 1600);
 
-    // 此时判断是否中奖 true-中奖，取prizeInfo信息，false-为中奖，取productInfo
+    // 此时判断是否中奖 true-中奖，取prizeInfo信息，false-为中奖，取productInfos
     if (boolPrize) {
       // 中奖
       setTimeout(() => {
@@ -137,7 +140,7 @@ class Capsulepage extends React.Component {
     } else {
       // 没中奖
       setTimeout(() => {
-        ModalCtrl.showModal(Noprizecard, { productInfo });
+        ModalCtrl.showModal(NoPrizeCard, { productInfos });
       }, 1600);
     }
 
@@ -158,7 +161,8 @@ class Capsulepage extends React.Component {
 
   render() {
     const { btnDynamic, btnOutput } = this.state;
-    const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
+    const { prizeInfo = [], remainDrawTimes = 0 } = this.state.drawInfo;
+    console.log(prizeInfo);
     return (
       <div className="capsule">
         <span className="bg"></span>
@@ -182,6 +186,35 @@ class Capsulepage extends React.Component {
             <SvgaPlayer className="output2" src={output2Svga} />
           </>
         )}
+
+        {/* 底部奖品轮播 */}
+        <div className="bottomprize">
+          <div className="prizeindex">
+            <Swiper
+              autoplay={{
+                disableOnInteraction: false,
+                delay: 300,
+              }}
+              modules={[Autoplay]}
+              slidesPerView={3.6}
+              loop={true}
+              initialSlide={0}
+              speed={1600}
+              freeMode={true}
+              freeModeSticy={true}
+            >
+              {prizeInfo?.map((item, index) => (
+                <SwiperSlide key={index}>
+                  <div className="psample">
+                    <img className="psimg" src={item.prizeImg} alt={item.prizeName} />
+                    <span className="psname">{item.prizeName}</span>
+                  </div>
+                </SwiperSlide>
+                
+              ))}
+            </Swiper>
+          </div>
+        </div>
       </div>
     );
   }

src/pages/CapsulePage/CapsulePage.less

@@ -9,6 +9,7 @@
 
   overflow-x: hidden;
   overflow-y: auto;
+
   .bg {
     width: 750px;
     height: 1624px;
@@ -65,6 +66,7 @@
     height: 830px;
     top: 427px;
     // left: 114px;
+    z-index: 2;
   }
 
   .output2 {
@@ -73,6 +75,7 @@
     height: 830px;
     top: 427px;
     // left: 114px;
+    z-index: 2;
   }
 
   .mengceng {
@@ -81,6 +84,7 @@
     height: 1624px;
     // left: 114px;
     .sparkBg("capsulePage/mengceng.png");
+    z-index: 1;
   }
 
   // .task_btn {
@@ -232,4 +236,54 @@
   //   .sparkBg("capsulePage/cover.png");
   //   pointer-events: none;
   // }
+
+  .bottomprize {
+    width: 698px;
+    height: 158px;
+    left: 26px;
+    top: 1400px;
+    position: absolute;
+    z-index: 0;
+
+    .prizeindex {
+      width: 644px;
+      height: 133px;
+      left: 27px;
+      top: 14px;
+      position: absolute;
+
+      .psample {
+        width: 118px;
+        height: 200px;
+        left: 0px;
+        top: 0px;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        .psimg {
+          width: 142px;
+          height: 142px;
+          left: 0px;
+          top: 0px;
+          border-radius: 15px;
+          .sparkBg("capsulePage/PSBg.png");
+        }
+        
+        .psname {
+          width: 142px;
+          height: 30px;
+          left: 0;
+          top: 150px;
+          text-align: center;
+          position: absolute;
+          font-size: 26px;
+          line-height: 30px;
+          color: rgb(255, 255, 255);
+          .lineClamp1();
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

src/pages/HomePage/HomePage.tsx

@@ -19,8 +19,7 @@ import { CHANNEL_PARAMS, extranceName } from '@/utils/constants.js';
 import gameStore from "@/store/gameStore.ts";
 import GamePage from "@/pages/GamePage/GamePage.tsx";
 
-import CodePop from "../../components/CodePop/CodePop.jsx"
-import NoPrizeCard from "../../components/NoPrizeCard/NoPrizeCard.jsx"
+import Settlechance from "../../components/settlechance/settlechance.jsx"
 
 @observer
 class Homepage extends React.Component {
@@ -107,9 +106,7 @@ class Homepage extends React.Component {
           page_name: "活动首页",
           button_name: "规则按钮",
         });
-        // ModalCtrl.showModal(Rulepop);
-        // todo
-        ModalCtrl.showModal(NoPrizeCard);
+        ModalCtrl.showModal(Settlechance);
         break;
 
       // 6 拜访清单