|
|
@@ -0,0 +1,149 @@
|
|
|
+"use client";
|
|
|
+import { useRouter } from "@/i18n/routing";
|
|
|
+import clsx from "clsx";
|
|
|
+import React from "react";
|
|
|
+import styles from "./style.module.scss";
|
|
|
+
|
|
|
+const Deliver: React.FC = () => {
|
|
|
+ const [coords, setCoords] = React.useState<string>("");
|
|
|
+ const imgRef = React.useRef<HTMLImageElement>(null);
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const list = React.useMemo(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ deposit: "depósito",
|
|
|
+ code: "Codificação",
|
|
|
+ money: "prêmio",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deposit: "depósito",
|
|
|
+ code: "Codificação",
|
|
|
+ money: "prêmio22",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }, []);
|
|
|
+ React.useEffect(() => {
|
|
|
+ getCoords();
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
+ }, []);
|
|
|
+ //计算按钮坐标
|
|
|
+ const getCoords = () => {
|
|
|
+ if (!imgRef.current) {
|
|
|
+ setTimeout(() => {
|
|
|
+ getCoords();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ const img = imgRef.current;
|
|
|
+ const width = img?.naturalWidth || 0;
|
|
|
+ const cw = img?.clientWidth || 0;
|
|
|
+ const scaleNum = cw / width;
|
|
|
+ const x = 500 * scaleNum;
|
|
|
+ const y = 280 * scaleNum;
|
|
|
+ const ex = cw;
|
|
|
+ const ey = 390 * scaleNum;
|
|
|
+ setCoords(`${x},${y},${ex},${ey}`);
|
|
|
+ };
|
|
|
+ const goDeposite = () => {
|
|
|
+ router.push("/deposit");
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.deliverPage}>
|
|
|
+ <div className={clsx(styles.deliverPageContainer, "pb-[.2rem]")}>
|
|
|
+ <img
|
|
|
+ useMap="#planetmap"
|
|
|
+ src="/deliver/top.png"
|
|
|
+ ref={imgRef}
|
|
|
+ style={{ width: "100%" }}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <map name="planetmap">
|
|
|
+ <area shape="rect" coords={coords} alt="Sun" onClick={goDeposite}></area>
|
|
|
+ </map>
|
|
|
+ <div className={styles.deliverPageMoney}>
|
|
|
+ <div className={styles.progress}>
|
|
|
+ <div className={styles.progressInner}></div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.vip}>
|
|
|
+ <span>vip1</span>
|
|
|
+ <span>vip1</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className={styles.info}>
|
|
|
+ <div>
|
|
|
+ <span>Depósito de hoje:</span>
|
|
|
+ <span className={"text-[#ffd800]"}>R$ 100</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>Cota de codificação: </span>
|
|
|
+ <span className={"text-[#ffd800]"}>R$ 100</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={styles.text}>Valor a ser arrecadado hoje</div>
|
|
|
+ <div className={clsx("text-center", styles.moneyContainer)}>
|
|
|
+ <span className={clsx(styles.moneyText, "text-[.2rem]")}>R$ </span>
|
|
|
+ <span className={clsx(styles.moneyText, "text-[.6rem]")}>50.00</span>
|
|
|
+ </div>
|
|
|
+ <div className="mt-[.2rem] flex flex-row items-center justify-center">
|
|
|
+ <span className={styles.btn}>Recebido</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={clsx(styles.box, "p-[.2rem] pt-[.34rem]")}>
|
|
|
+ <div className={styles.boxTitle}>Detalhes do evento</div>
|
|
|
+ <div className="text-[.14rem]">
|
|
|
+ A partir de agora, todos os jogadores que depositarem mais de 500 reais no
|
|
|
+ mesmo dia e completarem os requisitos do código correspondente poderão
|
|
|
+ receber até 88.888 reais mais bônus no dia seguinte. Por exemplo: O Membro A
|
|
|
+ deposita mais de 300.000 reais no mesmo dia e completa os requisitos do
|
|
|
+ código. No dia seguinte, ele pode receber 3.888 yuans mais bônus. O bônus
|
|
|
+ pode ser reivindicado após 0:05 do dia seguinte, válido durante o dia, e a
|
|
|
+ recompensa será perdida após o limite de tempo!
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={clsx(styles.box, "pt-[.4rem]")}>
|
|
|
+ <div className={styles.boxTitle}>Recompensas de Atividade</div>
|
|
|
+ <div className={styles.list}>
|
|
|
+ {list.map((item, idx) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={JSON.stringify(item)}
|
|
|
+ className={clsx(styles.listItem, {
|
|
|
+ [styles.odd]: idx % 2 === 0,
|
|
|
+ })}
|
|
|
+ >
|
|
|
+ <div>depósito</div>
|
|
|
+ <div>Codificação</div>
|
|
|
+ <div>prêmio</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={clsx(styles.box, "pt-[.4rem]")}>
|
|
|
+ <div className={styles.boxTitle}>Regras de Atividade</div>
|
|
|
+ <div className="p-[.1rem] text-[.14rem]">
|
|
|
+ <div>1.Jogadores que se registraram com sucesso podem participar. </div>
|
|
|
+ <div>
|
|
|
+ 2.Os membros que atenderem aos requisitos da atividade só poderão
|
|
|
+ receber a recompensa no mesmo dia. O não recebimento da recompensa após
|
|
|
+ o prazo será considerado como renúncia automática dos direitos da
|
|
|
+ atividade.
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 3.O horário para reivindicar as recompensas da atividade é 5 minutos
|
|
|
+ após o dia seguinte.
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 4.A empresa reserva-se o direito de interpretar esta atividade e
|
|
|
+ reserva-se o direito de congelar e cancelar todos os direitos dos
|
|
|
+ membros.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Deliver;
|
year
