|
|
@@ -1,124 +1,275 @@
|
|
|
"use client";
|
|
|
|
|
|
-import { Mask } from "antd-mobile";
|
|
|
-import clsx from "clsx";
|
|
|
-import Image from "next/image";
|
|
|
-import { Fragment, useEffect, useRef, useState } from "react";
|
|
|
+import { useRef, useState } from "react";
|
|
|
+import LotteryWheel from "./LotteryWheel";
|
|
|
import styles from "./style.module.scss";
|
|
|
-import LotteryWheel from './LotteryWheel';
|
|
|
-
|
|
|
-
|
|
|
-const CashMainCom = ()=>{
|
|
|
- return (
|
|
|
- <div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
|
|
|
- <div className={styles.haveCash}>
|
|
|
- <img src="/wheel/cash.png" alt="" className={styles.cashImg} />
|
|
|
- <div > R$ <span className={styles.cash}>94.15</span></div>
|
|
|
- <span className={styles.withdraw}><img src="/wheel/pix.png" alt=""/> SACAR </span>
|
|
|
- </div>
|
|
|
- <div className={styles.progress}>
|
|
|
- <div className={styles.num}> 94.15%</div>
|
|
|
- <div className={styles.bar}>
|
|
|
- <span style={{width: "calc(97.15% - 0.07rem)"}}></span>
|
|
|
+const CashMainCom = () => {
|
|
|
+ return (
|
|
|
+ <div className={`${styles.cashMain} ${styles.cashMain} ${styles.type1}`}>
|
|
|
+ <div className={styles.haveCash}>
|
|
|
+ <img src="/wheel/cash.png" alt="" className={styles.cashImg} />
|
|
|
+ <div>
|
|
|
+ {" "}
|
|
|
+ R$ <span className={styles.cash}>94.15</span>
|
|
|
+ </div>
|
|
|
+ <span className={styles.withdraw}>
|
|
|
+ <img src="/wheel/pix.png" alt="" /> SACAR{" "}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className={styles.progress}>
|
|
|
+ <div className={styles.num}> 94.15%</div>
|
|
|
+ <div className={styles.bar}>
|
|
|
+ <span style={{ width: "calc(97.15% - 0.07rem)" }}></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.needCash}>
|
|
|
+ {" "}
|
|
|
+ Ainda e necessário <span className={styles.needCashNum}>5.85</span> para realizar do
|
|
|
+ saque{" "}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div className={styles.needCash}> Ainda e necessário <span className={styles.needCashNum}>5.85</span> para realizar do saque </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
-}
|
|
|
+ );
|
|
|
+};
|
|
|
+const DrawMain1 = () => {
|
|
|
+ return (
|
|
|
+ <div className={styles.drawMain}>
|
|
|
+ <div className={styles.draw}>
|
|
|
+ {/*<img src="/wheel/d.png" className={styles.lamp} />*/}
|
|
|
+ {/*<img src="/wheel/light1.png" className={styles.light1} />*/}
|
|
|
+ {/*<img src="/wheel/light2.png" className={styles.light2} />*/}
|
|
|
+ {/*<div className={styles.pointer}>*/}
|
|
|
+ {/* <img src="/wheel/pointer.png" />*/}
|
|
|
+ {/*</div>*/}
|
|
|
+ {/*<img src="/wheel/bg_light.png" className={styles.drawBgImg} />*/}
|
|
|
+ {/*<div className={`${styles.drawLen} ${styles.position} `}></div>*/}
|
|
|
|
|
|
-const DrawMain=()=>{
|
|
|
- return (
|
|
|
- <div className={styles.drawMain}>
|
|
|
- <div className={styles.draw}>
|
|
|
- <img src="/wheel/d.png" className={styles.lamp}/>
|
|
|
- <img src="/wheel/light1.png" className={styles.light1}/>
|
|
|
- <img src="/wheel/light2.png" className={styles.light2}/>
|
|
|
- <div className={styles.pointer}>
|
|
|
- <img src="/wheel/pointer.png" />
|
|
|
- </div>
|
|
|
- <img src="/wheel/bg_light.png" className={styles.drawBgImg}/>
|
|
|
- <div className={`${styles.drawLen} ${styles.position} `}></div>
|
|
|
- {/* <div className={styles.drawContents}>
|
|
|
+ {/* <div className={styles.drawContents}>
|
|
|
<canvas id={styles.draw} width={306} height={306} />
|
|
|
</div> */}
|
|
|
- <LotteryWheel />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
-}
|
|
|
+ <LotteryWheel />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+const DrawMain = () => {
|
|
|
+ const [blocks] = useState([
|
|
|
+ {
|
|
|
+ padding: "20",
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/inner-circle.png",
|
|
|
+ width: "100%",
|
|
|
+ height: "100%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const [prizes] = useState([
|
|
|
+ { background: "#fde187", fonts: [{ text: "0" }] },
|
|
|
+ { background: "#faf3c3", fonts: [{ text: "1" }] },
|
|
|
+ { background: "#fde187", fonts: [{ text: "2" }] },
|
|
|
+ { background: "#faf3c3", fonts: [{ text: "3" }] },
|
|
|
+ { background: "#fde187", fonts: [{ text: "4" }] },
|
|
|
+ { background: "#faf3c3", fonts: [{ text: "5" }] },
|
|
|
+ { background: "#fde187", fonts: [{ text: "6" }] },
|
|
|
+ { background: "#faf3c3", fonts: [{ text: "7" }] },
|
|
|
+ ]);
|
|
|
+ const [buttons] = useState([
|
|
|
+ {
|
|
|
+ radius: "30%",
|
|
|
+ imgs: [
|
|
|
+ {
|
|
|
+ src: "/wheels/pointer.png",
|
|
|
+ width: "100%",
|
|
|
+ top: "-130%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const myLucky = useRef<any>();
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className={"relative mt-[260px] flex h-[3rem] items-center justify-center"}
|
|
|
+ style={{ background: "/wheels/bg.png", backgroundSize: "100% 100%", zIndex: 2 }}
|
|
|
+ >
|
|
|
+ <img src={"/wheels/bg.png"} className={"absolute -top-[115%]"} />
|
|
|
+ <img
|
|
|
+ src="/wheels/header-bg.png"
|
|
|
+ alt=""
|
|
|
+ className={"absolute -top-[15%] z-10 h-[1.4889rem]"}
|
|
|
+ />
|
|
|
+
|
|
|
+ <svg width="100%" height="2.7778rem" className={"absolute -top-[15%] z-[11]"}>
|
|
|
+ <path
|
|
|
+ d="M 63 162 C 119 36, 341 0,566 168"
|
|
|
+ stroke="blue"
|
|
|
+ stroke-width="4"
|
|
|
+ id="circle"
|
|
|
+ fill="transparent"
|
|
|
+ />
|
|
|
+ <text
|
|
|
+ style={{
|
|
|
+ fill: "#ff3333",
|
|
|
+ fontSize: "20px",
|
|
|
+ fontWeight: "bold",
|
|
|
+ textShadow: "0.1em 0.1em rgba(0,0,0,0.5)",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <textPath xlinkHref="#circle" textAnchor="middle" startOffset="50%" dy="0">
|
|
|
+ <tspan>Lorem ipsum dolor sit amet.</tspan>
|
|
|
+ </textPath>
|
|
|
+ </text>
|
|
|
+ </svg>
|
|
|
+ {/*<svg viewBox="0 -15 200 50" style={{ width: "100%", height: "100%" }}>*/}
|
|
|
+ {/* /!*<path d="M0 30 C 50 5, 150 5 200 30" fill="transparent" id="circle" />*!/*/}
|
|
|
+
|
|
|
+ {/* <path*/}
|
|
|
+ {/* d="M0 100 C 100 0, 100 0, 200 100"*/}
|
|
|
+ {/* fill="transparent"*/}
|
|
|
+ {/* stroke="blue"*/}
|
|
|
+ {/* stroke-width="2"*/}
|
|
|
+ {/* id="circle"*/}
|
|
|
+ {/* />*/}
|
|
|
|
|
|
-const DrawContent = ()=>{
|
|
|
- return (
|
|
|
- <div className={styles.drawContent}>
|
|
|
- <div className={styles.text}>
|
|
|
- <span ><span style={{color: "rgb(135, 149, 177)"}}>Expira em</span> 2d 19:18:13</span>
|
|
|
- </div>
|
|
|
- <div className={styles.cashButton}>
|
|
|
- <div> Convide amigos para ajudar com saques </div>
|
|
|
- <div className={`${styles.iconfont} ${styles.iconShare}`}></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
-}
|
|
|
+ {/* <text*/}
|
|
|
+ {/* style={{*/}
|
|
|
+ {/* fill: "#ff3333",*/}
|
|
|
+ {/* fontSize: "20px",*/}
|
|
|
+ {/* fontWeight: "bold",*/}
|
|
|
+ {/* textShadow: "0.1em 0.1em rgba(0,0,0,0.5)",*/}
|
|
|
+ {/* }}*/}
|
|
|
+ {/* >*/}
|
|
|
+ {/* <textPath xlinkHref="#circle" textAnchor="middle" startOffset="50%" dy="0">*/}
|
|
|
+ {/* <tspan>Lorem ipsum dolor sit amet.</tspan>*/}
|
|
|
+ {/* </textPath>*/}
|
|
|
+ {/* </text>*/}
|
|
|
+ {/*</svg>*/}
|
|
|
+ <img src={"/wheels/outer-circle.png"} className={"absolute h-[100%]"} />
|
|
|
|
|
|
-const Report=()=>{
|
|
|
- const winListData = Array(500).fill('1')
|
|
|
- return (
|
|
|
- <div className={styles.report}>
|
|
|
- <div className={`${styles.vanTabs} ${styles.vanTabsLine}`}>
|
|
|
- <div className={styles.vanTabsWrap}>
|
|
|
- <div className={styles.vanTabsNav}>
|
|
|
- <div className={`${styles.vanTabItem} ${styles.vanTabAcrive}`}>Relatório</div>
|
|
|
- <div className={`${styles.vanTabItem}`}>Minha Referencia</div>
|
|
|
- </div>
|
|
|
+ {/*<img src={"/wheels/inner-circle.png"} className={"absolute h-[98%]"} />*/}
|
|
|
+ <div>
|
|
|
+ {/*<LuckyWheel*/}
|
|
|
+ {/* ref={myLucky}*/}
|
|
|
+ {/* width="2.95rem"*/}
|
|
|
+ {/* height="2.95rem"*/}
|
|
|
+ {/* blocks={blocks}*/}
|
|
|
+ {/* prizes={prizes}*/}
|
|
|
+ {/* buttons={buttons}*/}
|
|
|
+ {/* onStart={() => {*/}
|
|
|
+ {/* // 点击抽奖按钮会触发star回调*/}
|
|
|
+ {/* myLucky.current?.play();*/}
|
|
|
+ {/* setTimeout(() => {*/}
|
|
|
+ {/* const index = (Math.random() * 6) >> 0;*/}
|
|
|
+ {/* myLucky.current?.stop(index);*/}
|
|
|
+ {/* }, 2500);*/}
|
|
|
+ {/* }}*/}
|
|
|
+ {/* onEnd={(prize: any) => {*/}
|
|
|
+ {/* // 抽奖结束会触发end回调*/}
|
|
|
+ {/* alert("恭喜你抽到 " + prize.fonts[0].text + " 号奖品");*/}
|
|
|
+ {/* }}*/}
|
|
|
+ {/*/>*/}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div className={styles.vanTabsContent}>
|
|
|
- <div className={styles.vantabpane}>
|
|
|
- <div className={styles.tabContent}>
|
|
|
- <div className={`${styles.winList} ${styles.swipernoswiping} ${styles.type2}`}>
|
|
|
- {winListData.length>0 && winListData.map((item,index)=>{
|
|
|
- return (
|
|
|
- <div className={styles.item} key={index}>
|
|
|
- <span className={`${styles.name} ${styles.omitWrap}`}>5533******412</span>
|
|
|
- <span className={styles.tipText}> Acabou de saca </span>
|
|
|
- <div className={styles.value}>
|
|
|
- <span className={styles.addCash}>+100</span>
|
|
|
- <span className={styles.unit}> R$</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- })}
|
|
|
- </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const DrawContent = () => {
|
|
|
+ return (
|
|
|
+ <div className={styles.drawContent}>
|
|
|
+ <div className={styles.text}>
|
|
|
+ <span>
|
|
|
+ <span style={{ color: "rgb(135, 149, 177)" }}>Expira em</span> 2d 19:18:13
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className={styles.cashButton}>
|
|
|
+ <div> Convide amigos para ajudar com saques</div>
|
|
|
+ <div className={`${styles.iconfont} ${styles.iconShare}`}></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div className={styles.rules}>
|
|
|
- <h2>Regras</h2>
|
|
|
- <ul className={styles.tipsContent}>
|
|
|
- <li>1.Você pode iniciar um saque quando o valor acumulado atingir 100 BRL. </li>
|
|
|
- <li>2.Convidar amigos para se registrarem no 9f.com irá ajudá- lo a sacar dinheiro rapidamente.</li>
|
|
|
- <li>3. Cada usuário receberá uma única rodada grátis por dia. </li>
|
|
|
- <li>4.Cada usuário tem um período de validade de 3 dias para cada atividade e pode participar da atividade várias vezes.</li>
|
|
|
- <li>5.Se você receber um bônus de dinheiro extra, pode jogar jogos de graça e ganhar ainda mais dinheiro real.</li>
|
|
|
- <li>6.Se voce nao retirar o dinheiro dentro de 3 dias,ele ser perdido.</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
-}
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
+const Report = () => {
|
|
|
+ const winListData = Array(500).fill("1");
|
|
|
+ return (
|
|
|
+ <div className={styles.report}>
|
|
|
+ <div className={`${styles.vanTabs} ${styles.vanTabsLine}`}>
|
|
|
+ <div className={styles.vanTabsWrap}>
|
|
|
+ <div className={styles.vanTabsNav}>
|
|
|
+ <div className={`${styles.vanTabItem} ${styles.vanTabAcrive}`}>
|
|
|
+ Relatório
|
|
|
+ </div>
|
|
|
+ <div className={`${styles.vanTabItem}`}>Minha Referencia</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.vanTabsContent}>
|
|
|
+ <div className={styles.vantabpane}>
|
|
|
+ <div className={styles.tabContent}>
|
|
|
+ <div
|
|
|
+ className={`${styles.winList} ${styles.swipernoswiping} ${styles.type2}`}
|
|
|
+ >
|
|
|
+ {winListData.length > 0 &&
|
|
|
+ winListData.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div className={styles.item} key={index}>
|
|
|
+ <span
|
|
|
+ className={`${styles.name} ${styles.omitWrap}`}
|
|
|
+ >
|
|
|
+ 5533******412
|
|
|
+ </span>
|
|
|
+ <span className={styles.tipText}>
|
|
|
+ {" "}
|
|
|
+ Acabou de saca{" "}
|
|
|
+ </span>
|
|
|
+ <div className={styles.value}>
|
|
|
+ <span className={styles.addCash}>+100</span>
|
|
|
+ <span className={styles.unit}> R$</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.rules}>
|
|
|
+ <h2>Regras</h2>
|
|
|
+ <ul className={styles.tipsContent}>
|
|
|
+ <li>1.Você pode iniciar um saque quando o valor acumulado atingir 100 BRL. </li>
|
|
|
+ <li>
|
|
|
+ 2.Convidar amigos para se registrarem no 9f.com irá ajudá- lo a sacar
|
|
|
+ dinheiro rapidamente.
|
|
|
+ </li>
|
|
|
+ <li>3. Cada usuário receberá uma única rodada grátis por dia. </li>
|
|
|
+ <li>
|
|
|
+ 4.Cada usuário tem um período de validade de 3 dias para cada atividade e
|
|
|
+ pode participar da atividade várias vezes.
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 5.Se você receber um bônus de dinheiro extra, pode jogar jogos de graça e
|
|
|
+ ganhar ainda mais dinheiro real.
|
|
|
+ </li>
|
|
|
+ <li>6.Se voce nao retirar o dinheiro dentro de 3 dias,ele ser perdido.</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
const CashWheelClient = () => {
|
|
|
return (
|
|
|
- <div className={styles.cashWheelClient}>
|
|
|
- <CashMainCom />
|
|
|
- <DrawMain/>
|
|
|
- <DrawContent />
|
|
|
- <Report />
|
|
|
- {/* <LotteryWheel/> */}
|
|
|
- </div>
|
|
|
+ <>
|
|
|
+ <div className={"mb-[40px] border-4"}>123</div>
|
|
|
+ <DrawMain />
|
|
|
+ {/*<div className={styles.cashWheelClient}>*/}
|
|
|
+ {/* <CashMainCom />*/}
|
|
|
+ {/* <DrawMain />*/}
|
|
|
+ {/* <DrawContent />*/}
|
|
|
+ {/* <Report />*/}
|
|
|
+ {/* /!* <LotteryWheel/> *!/*/}
|
|
|
+ {/*</div>*/}
|
|
|
+ </>
|
|
|
);
|
|
|
};
|
|
|
|
Before
