feat: 修改

src/api/activity.ts

@@ -53,3 +53,75 @@ export const claimActivityReward = (data: { id: number; activity_id: number }) =
         data,
     });
 };
+
+export interface ContinuousResult {
+    id: number;
+    name: string;
+    type: number;
+    act_time_type: number;
+    start_at: number;
+    end_at: number;
+    display_start_time: number;
+    display_end_time: number;
+    act_page: number;
+    background_type: number;
+    Background: string;
+    act_promotion_url: string;
+    pay_amount: number;
+    total_bet: number;
+    reward: number;
+    cur_num: number;
+    tally_time: number;
+    is_op: boolean;
+    remark: string;
+    list: {
+        stage: ContinuousStageItem[];
+        list: Record<number, Record<number, ContinuousListItem>>;
+        reward_list: Record<number, Record<number, ContinuousRewardItem>>;
+    };
+}
+
+export interface ContinuousStageItem {
+    id: number;
+    is_sign: number;
+    pay_num: number;
+    target_num: number;
+    target_reward: number;
+    diff_num: number;
+    is_suss: number;
+    start_at: number;
+    end_at: number;
+    claim_time: number;
+}
+export interface ContinuousListItem {
+    id: number;
+    is_sign: number;
+    pay_num: number;
+    target_num: number;
+    target_reward: number;
+    diff_num: number;
+    is_suss: number;
+    start_at: number;
+    end_at: number;
+    claim_time: number;
+}
+export interface ContinuousRewardItem {
+    id: number;
+    is_sign: number;
+    pay_num: number;
+    target_num: number;
+    target_reward: number;
+    diff_num: number;
+    is_suss: number;
+    start_at: number;
+    end_at: number;
+    claim_time: number;
+}
+
+// 连续充值
+export const getContinuousRechargeInfo = (data: { activity_id: number }) => {
+    return server.post<ContinuousResult>({
+        url: "/v1/api/user/activity/continuousRechargeInfo",
+        data,
+    });
+};

src/app/[locale]/(doings)/continuous/page.tsx

@@ -1,10 +1,38 @@
 "use client";
+import {
+    ContinuousListItem,
+    ContinuousResult,
+    ContinuousRewardItem,
+    ContinuousStageItem,
+    getContinuousRechargeInfo,
+} from "@/api/activity";
 import CutDown from "@/components/CutDown";
 import { useRouter } from "@/i18n/routing";
 import clsx from "clsx";
+import { useSearchParams } from "next/navigation";
 import React from "react";
 import styles from "./page.module.scss";
 
+interface Cfg1Item {
+    text: string;
+    text2: string;
+    key: number;
+    footer: string;
+    footer2?: string;
+}
+
+interface StageItem extends ContinuousStageItem, Cfg1Item {}
+
+interface ListItem {
+    dayId: number;
+    data: ContinuousListItem;
+}
+
+interface RewardItem {
+    dayId: number;
+    data: ContinuousRewardItem[];
+}
+
 const DayItem = ({ dayColor = "#297fcf", num = 0 }) => {
     return (
         <div>
@@ -32,6 +60,8 @@ const DayItem = ({ dayColor = "#297fcf", num = 0 }) => {
 };
 
 const Page = () => {
+    const query = Object.fromEntries(useSearchParams());
+    const [data, setData] = React.useState<ContinuousResult>({} as ContinuousResult);
     const router = useRouter();
     const dayContainer = React.useRef<HTMLDivElement>(null);
     const colors = [
@@ -46,43 +76,102 @@ const Page = () => {
         "#ec3b23",
     ];
 
-    const goDeposit = () => {
-        router.push("/deposit");
+    React.useEffect(() => {
+        getData();
+    }, []);
+    const getData = async () => {
+        const res = await getContinuousRechargeInfo({ activity_id: Number(query.activity_id) });
+        if (res.code === 200) {
+            setData(res.data);
+        }
     };
-
-    const cfg1 = React.useMemo(() => {
-        return [
-            {
+    const cfg1: Record<number, Cfg1Item> = React.useMemo(() => {
+        return {
+            1: {
                 text: "LOGIN ",
                 text2: "PLATINUM",
                 key: 1,
                 footer: "Alcançou",
             },
-            {
+            2: {
                 text: "LOGIN",
                 text2: "GOLD",
                 key: 2,
                 footer: "Alcançou",
-                footer2: "5R",
             },
-            {
+            3: {
                 text: "LOGIN",
                 text2: "DIAMANTE",
                 key: 3,
                 footer: "Alcançou",
-                footer2: "5R",
             },
-            {
+            4: {
                 text: "ENTRAR NO",
                 text2: "MONOPOLY",
                 key: 4,
                 footer: "Ainda preciso",
-                footer2: "5R",
             },
-        ];
+        };
     }, []);
 
-    const data = [1, 2, 3, 4, 5, 6, 7, , 8, 9, 0, 11, 12, 13, 14, 15, 16, 17];
+    const stage = React.useMemo<StageItem[]>(() => {
+        let stags = data?.list?.stage;
+        if (!data?.list?.stage) {
+            stags = [
+                { id: 1 },
+                { id: 2 },
+                { id: 3 },
+                { id: 4 },
+            ] as unknown as ContinuousStageItem[];
+        }
+        const result: StageItem[] = stags
+            .map((item) => {
+                return {
+                    ...item,
+                    ...cfg1[item.id],
+                    footer2: item.target_num ? `${item.target_num}R` : "",
+                };
+            })
+            .sort((a: ContinuousStageItem, b: ContinuousStageItem) => a.id - b.id);
+        return result;
+    }, [data?.list?.stage, cfg1]);
+
+    const list = React.useMemo<ListItem[]>(() => {
+        if (!data?.list?.list) {
+            return [];
+        }
+        const result: ListItem[] = [] as ListItem[];
+        Object.keys(data?.list?.list).forEach((key: string) => {
+            const item = data?.list?.list[key as any];
+            const key1 = Object.keys(item)[0];
+            result.push({ dayId: Number(key), data: item[key1 as any] });
+        });
+
+        return result.sort((a, b) => a.dayId - b.dayId);
+    }, [data?.list?.list]);
+
+    const reward_list = React.useMemo<RewardItem[]>(() => {
+        if (!data?.list?.reward_list) {
+            return [];
+        }
+        const result: RewardItem[] = [] as RewardItem[];
+
+        Object.keys(data?.list?.reward_list).forEach((key: string) => {
+            const item = data?.list?.reward_list[key as any];
+            const res2: ContinuousRewardItem[] = [];
+            Object.keys(item).forEach((key2: string) => {
+                const item2 = item[key2 as any];
+                res2.push(item2);
+            });
+            result.push({ dayId: Number(key), data: res2 });
+        });
+
+        return result;
+    }, [data?.list?.reward_list]);
+
+    const goDeposit = () => {
+        router.push("/deposit");
+    };
 
     return (
         <div className={clsx(styles.continuePage)}>
@@ -101,54 +190,58 @@ const Page = () => {
                     <div className={styles.inner}>
                         <div className={styles.innerContainer}>
                             <div className={styles.box}>
-                                {cfg1.map((item) => {
-                                    return (
-                                        <div
-                                            key={item.key}
-                                            className={styles.boxItem}
-                                            style={{
-                                                backgroundImage: `url('/continuous/v${item.key}.png')`,
-                                            }}
-                                        >
-                                            <div className={styles.boxItemTop}>
-                                                <div className={styles.boxItemTopText}>
-                                                    {item.text}
-                                                </div>
-                                                <div className={styles.boxItemTopText}>
-                                                    {item.text2}
-                                                </div>
-                                            </div>
-                                            <div className={styles.boxItemBottom}>
-                                                <div>{item.footer}</div>
-                                                <div>{item.footer2}</div>
-                                            </div>
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                            <div className={styles.daybox}>
-                                <div className={styles.dayContainer} ref={dayContainer}>
-                                    {data.map((item) => {
+                                {!!stage.length &&
+                                    stage.map((item) => {
                                         return (
                                             <div
-                                                key={item}
-                                                className={clsx(styles.dayItem, styles.active)}
+                                                key={item.id}
+                                                className={styles.boxItem}
+                                                style={{
+                                                    backgroundImage: `url('/continuous/v${item.id}.png')`,
+                                                }}
                                             >
-                                                <div className={styles.dayItemText}>{item} dia</div>
-                                                <div className={styles.dayitemTextActive}>
-                                                    <img src="/continuous/s1.png" alt="" />
-                                                    <div className="flex flex-row items-end text-[#dbc6ff]">
-                                                        <span className="relative top-[1px] mt-[2px] text-[.13rem]">
-                                                            {item}
-                                                        </span>
-                                                        <span>dia</span>
+                                                <div className={styles.boxItemTop}>
+                                                    <div className={styles.boxItemTopText}>
+                                                        {item.text}
+                                                    </div>
+                                                    <div className={styles.boxItemTopText}>
+                                                        {item.text2}
                                                     </div>
-                                                    <div>recarga</div>
-                                                    <div className="text-[#ffb400]">10000</div>
+                                                </div>
+                                                <div className={styles.boxItemBottom}>
+                                                    <div>{item.footer}</div>
+                                                    <div>{item.footer2}</div>
                                                 </div>
                                             </div>
                                         );
                                     })}
+                            </div>
+                            <div className={styles.daybox}>
+                                <div className={styles.dayContainer} ref={dayContainer}>
+                                    {!!list?.length &&
+                                        list.map((item) => {
+                                            return (
+                                                <div
+                                                    key={item.dayId}
+                                                    className={clsx(styles.dayItem, styles.active)}
+                                                >
+                                                    <div className={styles.dayItemText}>
+                                                        {item.dayId} dia
+                                                    </div>
+                                                    <div className={styles.dayitemTextActive}>
+                                                        <img src="/continuous/s1.png" alt="" />
+                                                        <div className="flex flex-row items-end text-[#dbc6ff]">
+                                                            <span className="relative top-[1px] mt-[2px] text-[.13rem]">
+                                                                {/* {item} */}
+                                                            </span>
+                                                            <span>dia</span>
+                                                        </div>
+                                                        <div>recarga</div>
+                                                        <div className="text-[#ffb400]">10000</div>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
                                 </div>
                             </div>
                             <div className={styles.premio}>
@@ -186,38 +279,50 @@ const Page = () => {
                                     <div className="mt-[.1rem]">
                                         <div className={clsx(styles.introItem, styles.odd)}>
                                             <div className={styles.idx1}></div>
-                                            {cfg1.map((item) => {
+                                            {Object.keys(cfg1)
+                                                .sort(
+                                                    (a: string, b: string) => Number(a) - Number(b)
+                                                )
+                                                .map((key) => {
+                                                    const item = cfg1[Number(key)];
+                                                    return (
+                                                        <div key={item.key}>
+                                                            <img
+                                                                src={`/continuous/s${item.key}.png`}
+                                                                alt=""
+                                                                className="w-[.3rem]"
+                                                            />
+                                                            <span className="text-[.1rem]">
+                                                                {item.text}
+                                                            </span>
+                                                            <span className="text-[.1rem]">
+                                                                {item.text2}
+                                                            </span>
+                                                        </div>
+                                                    );
+                                                })}
+                                        </div>
+                                        {!!reward_list.length &&
+                                            reward_list.map((item) => {
                                                 return (
-                                                    <div key={item.key}>
-                                                        <img
-                                                            src={`/continuous/s${item.key}.png`}
-                                                            alt=""
-                                                            className="w-[.3rem]"
-                                                        />
-                                                        <span className="text-[.1rem]">
-                                                            {item.text}
-                                                        </span>
-                                                        <span className="text-[.1rem]">
-                                                            {item.text2}
-                                                        </span>
+                                                    <div
+                                                        key={item.dayId}
+                                                        className={clsx(styles.introItem)}
+                                                    >
+                                                        <div className={styles.idx1}>
+                                                            dia{item.dayId}
+                                                        </div>
+                                                        {!!item.data.length &&
+                                                            item.data.map((citem) => {
+                                                                return (
+                                                                    <div key={citem.id}>
+                                                                        {citem.target_num}
+                                                                    </div>
+                                                                );
+                                                            })}
                                                     </div>
                                                 );
                                             })}
-                                        </div>
-                                        <div className={clsx(styles.introItem)}>
-                                            <div className={styles.idx1}>dia5</div>
-                                            <div>2323</div>
-                                            <div>2323</div>
-                                            <div>2323</div>
-                                            <div>2323</div>
-                                        </div>
-                                        <div className={clsx(styles.introItem, styles.odd)}>
-                                            <div className={styles.idx1}>dia5</div>
-                                            <div>2323</div>
-                                            <div>2323</div>
-                                            <div>2323</div>
-                                            <div>2323</div>
-                                        </div>
                                     </div>
                                 </div>
                             </div>

src/app/[locale]/(doings)/fission/(locale)/layout.tsx

@@ -0,0 +1,25 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+import styles from "./page.module.scss";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <div className={styles.page}>
+            <HeaderBack
+                className={styles.fissionHeader}
+                showBack={true}
+                title={"Baú de Fissão"}
+                useBg={false}
+            />
+            <main className={"main-header"}>{children}</main>
+        </div>
+    );
+}

src/app/[locale]/(doings)/fission/(locale)/page.module.scss

@@ -0,0 +1,165 @@
+.page {
+    height: 100%;
+}
+.fissionPage {
+    height: 100%;
+    overflow: auto;
+    background-color: #5a1791;
+}
+.container {
+    position: relative;
+    .img {
+        width: 100%;
+    }
+    .content {
+        border-radius: 0.3rem 0.3rem 0 0;
+        border-top: 2px solid #fad127;
+        position: relative;
+        top: -0.3rem;
+        background-color: #5a1791;
+        padding: 0.2rem 0.15rem;
+        &::after {
+            content: "";
+            position: absolute;
+            border-radius: 0.3rem 0.3rem 0 0;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: -0.3rem;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 1) inset;
+            pointer-events: none;
+        }
+    }
+    .box {
+        background-color: #6b309c;
+        border-radius: 0.1rem;
+    }
+}
+.copy {
+    width: 0.2rem;
+    height: 0.2rem;
+    background-image: url("/fission/copy.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+}
+.fissionHeader {
+    background-color: #1d0630;
+    div,
+    span {
+        color: #fff !important;
+    }
+}
+.itemWrap {
+    // flex: 1 0 0.63rem;
+    .arrow {
+        flex: 1;
+    }
+    &:nth-last-child(1) {
+        .arrow {
+            display: none;
+            flex: 0 0 0;
+        }
+    }
+    &:nth-child(4n) {
+        .arrow {
+            display: none;
+            flex: 0 0 0;
+        }
+    }
+}
+.item {
+    position: relative;
+    width: 0.63rem;
+    .itemImg {
+        width: 100%;
+        height: 0.57rem;
+        background-image: url("/fission/box.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        background-position: center;
+    }
+    .itemMoney {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        padding-top: 0.21rem;
+        font-size: 0.14rem;
+        font-weight: 700;
+        text-align: center;
+        background: linear-gradient(to bottom, #ffffc2, #ffd74c);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        filter: drop-shadow(2px 2px 0 #fd1d9c) drop-shadow(2px -2px 0 #fd1d9c)
+            drop-shadow(-2px 2px 0 #fd1d9c) drop-shadow(-2px -2px 0 #fd1d9c);
+        &:after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 0.31rem;
+            transform: translateX(-50%);
+            width: 50%;
+            height: 1px;
+            box-shadow: 0 0 0.1rem rgb(241, 188, 73, 0.5);
+        }
+    }
+    &.active {
+        .itemImg,
+        .itemMoney {
+            animation: shake 0.8s ease-in-out infinite;
+        }
+    }
+    &.disabled {
+        .itemMoney {
+            filter: drop-shadow(2px 2px 0 #277229) drop-shadow(2px -2px 0 #277229)
+                drop-shadow(-2px 2px 0 #277229) drop-shadow(-2px -2px 0 #277229);
+        }
+        .itemImg {
+            background-image: url("/fission/box_open.png");
+        }
+    }
+}
+.hr {
+    width: 100%;
+    height: 1px;
+    background-color: #7b459e;
+    margin: 0.15rem 0;
+}
+
+.ttitle {
+    position: absolute;
+    left: 0.3rem;
+    right: 0.3rem;
+    background: url("/fission/tbg.png") no-repeat center;
+    background-size: 100% 100%;
+    height: 0.4rem;
+    top: -0.06rem;
+    text-align: center;
+    line-height: 0.3rem;
+    font-size: 0.16rem;
+    font-weight: 700;
+}
+/* 定义晃动动画关键帧 */
+@keyframes shake {
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0) rotate(-1deg);
+    }
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0) rotate(1deg);
+    }
+    30%,
+    70% {
+        transform: translate3d(-3px, 0, 0) rotate(-3deg);
+    }
+    40%,
+    60% {
+        transform: translate3d(3px, 0, 0) rotate(1deg);
+    }
+    50% {
+        transform: translate3d(-3px, 0, 0) rotate(3deg);
+    }
+}

src/app/[locale]/(doings)/fission/(locale)/page.tsx

@@ -0,0 +1,268 @@
+"use client";
+import { getShareLinkApi } from "@/api/config";
+import { useRouter } from "@/i18n/routing";
+import { useUserInfoStore } from "@/stores/useUserInfoStore";
+import { copyText } from "@/utils/methods";
+import { Toast } from "antd-mobile";
+import clsx from "clsx";
+import { useTranslations } from "next-intl";
+import { usePathname } from "next/navigation";
+import React from "react";
+import styles from "./page.module.scss";
+
+const Item = ({ type = "shake" }) => {
+    return (
+        <div
+            className={clsx(
+                "min-w-fit mb-[.2rem] flex flex-shrink-0 flex-grow flex-row items-center",
+                styles.itemWrap
+            )}
+        >
+            <div
+                className={clsx(
+                    styles.item,
+                    // styles.disabled,
+                    styles.active,
+                    "flex flex-col items-center text-[.12rem]"
+                )}
+            >
+                <div className={clsx(styles.itemImg, "mb-[.05rem]")}></div>
+                <div>Promoção</div>
+                <div>
+                    <span className="text-[#ffc000]">1</span> Pessoa
+                </div>
+                <div className={styles.itemMoney}>
+                    <span>+3000</span>
+                </div>
+            </div>
+            <div
+                className={clsx(styles.arrow, "relative top-[-.2rem] flex flex-row justify-center")}
+            >
+                <img src="/fission/arrow.png" className={clsx("w-[.2rem]")} alt="" />
+            </div>
+        </div>
+    );
+};
+
+const Page: React.FC = () => {
+    const t = useTranslations();
+    const router = useRouter();
+    const { userInfo } = useUserInfoStore();
+    const pathname = usePathname();
+    const [BASE_URL, setBaseUrl] = React.useState("");
+
+    const url = React.useMemo(() => {
+        const shareUrl = `${BASE_URL}?share_id=${userInfo ? userInfo.referrer_code : "xxxxxx"}`;
+        return encodeURIComponent(`${shareUrl}`);
+    }, [BASE_URL, userInfo]);
+    const SHARE_SOURCE = React.useMemo(() => {
+        return [
+            {
+                icon: "/summary/Facebook.png",
+                label: "Facebook",
+                shareUrl: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+            },
+            {
+                icon: "/summary/WhatsApp.png",
+                label: "WhatsApp",
+                shareUrl: `https://api.whatsapp.com/send?text=${url}`,
+            },
+            {
+                icon: "/summary/Telegram.png",
+                label: "Telegram",
+                shareUrl: `https://t.me/share/url?url=${url}`,
+            },
+            {
+                icon: "/summary/Twitter.png",
+                label: "Twitter",
+                shareUrl: `https://twitter.com/intent/tweet?text=${url}`,
+            },
+            {
+                icon: "/summary/Email.png",
+                label: "Email",
+                shareUrl: `mailto: ?&subject=&cc=&bcc=&body=${url}`,
+            },
+        ];
+    }, [url]);
+
+    React.useEffect(() => {
+        init();
+    }, []);
+    const init = async () => {
+        const res = await getShareLinkApi();
+        if (res.code === 200) {
+            const url =
+                res.data.find((item) => item.type === 2)?.url ??
+                window.location.href.replace(pathname, "");
+            setBaseUrl(url);
+        }
+    };
+
+    return (
+        <div className={styles.fissionPage}>
+            <div className={styles.container}>
+                <img className={styles.img} src="/fission/title.png" alt="" />
+                <div className={styles.content}>
+                    <div
+                        className={clsx(
+                            "mb-[.09rem] flex flex-row items-center justify-between p-[.1rem]",
+                            styles.box
+                        )}
+                    >
+                        <div
+                            className={clsx(
+                                "mr-[.1rem] overflow-hidden text-ellipsis whitespace-nowrap"
+                            )}
+                        >
+                            Meu link:{decodeURIComponent(url)}
+                        </div>
+                        <span
+                            className={styles.copy}
+                            onClick={() => {
+                                copyText(decodeURIComponent(url));
+                                Toast.show({
+                                    icon: "success",
+                                    content: t("SummaryPage.copySuc"),
+                                    maskClickable: false,
+                                });
+                            }}
+                        ></span>
+                    </div>
+                    <div className={clsx(styles.box, "mb-[.1rem] p-[.1rem]")}>
+                        <div className={clsx("mb-[.1rem] text-[.14rem] font-bold")}>
+                            Compartilhamento Rápido
+                        </div>
+                        <div className={clsx("flex flex-row items-center")}>
+                            {SHARE_SOURCE.map((item) => {
+                                return (
+                                    <a
+                                        href={item.shareUrl}
+                                        target={"_blank"}
+                                        className={clsx(
+                                            "mr-[.1rem] w-[.4rem] overflow-hidden rounded-[50%]"
+                                        )}
+                                        key={item.label}
+                                    >
+                                        <img className={styles.icon} src={item.icon} alt="" />
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    </div>
+                    <div
+                        className={clsx(
+                            styles.box,
+                            "mb-[.2rem] flex flex-row items-center justify-between p-[.1rem]"
+                        )}
+                    >
+                        <div>
+                            <div>Meus subordinados diretos</div>
+                            <div>
+                                <span className="text-[#ffae00]">0Pessoa </span>
+                                (Válido <span className="text-[#ffae00]">0Pessoa</span>)
+                            </div>
+                        </div>
+                        <div
+                            className={clsx("text-[#2dd0df]")}
+                            onClick={() => router.push("/fission/detail")}
+                        >
+                            Detalhes&gt;
+                        </div>
+                    </div>
+
+                    <div className={clsx("mb-[.1rem] flex flex-row flex-wrap justify-start")}>
+                        <Item></Item>
+                        <Item></Item>
+                        <Item type={"shake"}></Item>
+                        <Item></Item>
+                        <Item></Item>
+                        <Item></Item>
+                        <Item></Item>
+                        <Item></Item>
+                        <Item></Item>
+                    </div>
+
+                    <div className={clsx(styles.box, "p-[.1rem]")}>
+                        <div>
+                            0 que é o número de promoção efetiva?(Preenchendo as seguintes
+                            condições)
+                        </div>
+                        <div className={styles.hr}></div>
+                        <div className="flex flex-row items-center justify-between">
+                            <div>Primeiro depósito do subordinado</div>
+                            <div className="text-[#2dd0df]">≥0,00</div>
+                        </div>
+                        <div className={styles.hr}></div>
+                        <div className="flex flex-row items-center justify-between">
+                            <div>Depositos acumulados do subordinado</div>
+                            <div className="text-[#2dd0df]">≥0,00</div>
+                        </div>
+                        <div className={styles.hr}></div>
+                        <div className="flex flex-row items-center justify-between">
+                            <div>quantidade de apostas acumuladas pelo subordinado</div>
+                            <div className="text-[#2dd0df]">≥0,00</div>
+                        </div>
+                        <div className={styles.hr}></div>
+                        <div className="flex flex-row items-center justify-between">
+                            <div>Dias acumulados de depósito do subordinado</div>
+                            <div className="text-[#2dd0df]">≥0,00</div>
+                        </div>
+                        <div className={styles.hr}></div>
+                        <div className="flex flex-row items-center justify-between">
+                            <div>Número acumulado de recargas dos subordinados</div>
+                            <div className="text-[#2dd0df]">≥0,00</div>
+                        </div>
+                    </div>
+                    <div
+                        className={clsx(
+                            styles.box,
+                            "relative mt-[.4rem] p-[.15rem] pl-[.3rem] pt-[.4rem]"
+                        )}
+                    >
+                        <div className={styles.ttitle}>Detalhes do Evento</div>
+                        <ul className="list-decimal">
+                            <li>
+                                Convide amigos para receber um bônus. Ao completar diferentes
+                                números de convites, você pode ganhar o bônus correspondente, com um
+                                valor máximo de 88.888. Quanto mais amigos você convidar, maiores
+                                serão as recompensas; As apostas feitas pelos subordinados são
+                                consideradas válidas apenas nas seguintes plataformas；Todas as
+                                Plataformas;
+                            </li>
+                            <li>
+                                Esta atividade é um presente adicional da plataforma.Você também
+                                pode desfrutar de outras recompensas e comissões de agentes, o que
+                                significa que você pode aproveitar a a chance de ganhar bônus varias
+                                vezes;
+                            </li>
+                            <li>
+                                As recompensas só podem ser reivindicadas manualmente no iOS,
+                                Android e H5, e serão distribuídas automaticamente se expiradas;
+                            </li>
+                            <li>
+                                O bônus (excluindo o principal) concedido por esta atividade requer
+                                1 vez o valor em apostas valida para serem retiradas;
+                            </li>
+                            <li>
+                                Esta atividade está limitada ao titular da conta para operações
+                                humanas normais. Alugar, usar cheats, robôs, jogar com contas
+                                diferentes,jogar com varias pessoas, arbitragem, interfaces,
+                                acordos, explorar vulnerabilidades, controle de grupo ou outros
+                                meios técnicos são proibidos.Caso contrário, as recompensas podem
+                                ser canceladas ou deduzidas, congeladas ou até mesmo colocadas em
+                                uma lista;
+                            </li>
+                            <li>
+                                Para evitar mal-entendidos de interpretação de texto, a plataforma
+                                reserva o direito de interpretação e descisão final para à
+                                plataforma.
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Page;

src/app/[locale]/(doings)/fission/detail/layout.tsx

@@ -0,0 +1,25 @@
+import HeaderBack from "@/components/HeaderBack";
+import { getTranslations } from "next-intl/server";
+import { ReactNode } from "react";
+import styles from "./page.module.scss";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const t = await getTranslations("Header");
+    return (
+        <div className={styles.page}>
+            <HeaderBack
+                className={styles.fissionHeader}
+                showBack={true}
+                title={"Detalhes"}
+                useBg={false}
+            />
+            <main className={"main-header"}>{children}</main>
+        </div>
+    );
+}

src/app/[locale]/(doings)/fission/detail/page.module.scss

@@ -0,0 +1,52 @@
+.page {
+    height: 100%;
+}
+.fissionHeader {
+    background-color: #1d0630;
+    div,
+    span {
+        color: #fff !important;
+    }
+}
+.detail {
+    background-color: #300d47;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+    .container {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+    }
+    :global(.adm-input-element) {
+        background-color: #3d125b !important;
+        padding: 0.08rem 0.15rem;
+        border-radius: 0.2rem;
+    }
+    :global(.adm-button) {
+        background-color: none !important;
+        border: none;
+    }
+    .searchbox {
+        background-color: #3d125b !important;
+        border-radius: 0.2rem;
+    }
+    :global(.adm-list-item-content) {
+        border-top: none !important;
+    }
+    :global(.adm-list-default .adm-list-body) {
+        border-top: none !important;
+        border-bottom: none !important;
+    }
+    .item {
+        display: flex;
+        align-items: stretch;
+        font-size: 0.1rem;
+        div {
+            flex: 1;
+            text-align: center;
+            color: #d7c9e0;
+        }
+    }
+}

src/app/[locale]/(doings)/fission/detail/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { Button, DotLoading, InfiniteScroll, Input, List } from "antd-mobile";
+
+import clsx from "clsx";
+import { useState } from "react";
+import styles from "./page.module.scss";
+const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
+    return (
+        <>
+            {hasMore ? (
+                <>
+                    <span>Loading</span>
+                    <DotLoading />
+                </>
+            ) : (
+                <span>--- 我是有底线的 ---</span>
+            )}
+        </>
+    );
+};
+
+const Detail = () => {
+    const [data, setData] = useState<(string | number)[]>([]);
+    const [hasMore, setHasMore] = useState(true);
+    async function loadMore() {
+        setData((val) => [...val, ...[1, 2, 3, 4, 5, 6, 7]]);
+        setHasMore(true);
+    }
+    return (
+        <div className={styles.detail}>
+            <div className={clsx("m-[.15rem] flex items-center", styles.searchbox)}>
+                <Input placeholder="Por favor, insira o ID"></Input>
+                <div className="ml-[.1rem]">
+                    <Button size="middle">
+                        <i className="iconfont icon-sousuo2"></i>
+                    </Button>
+                </div>
+            </div>
+            <div className={styles.container}>
+                <div className={clsx(styles.item)}>
+                    <div>Tempo</div>
+                    <div>ID do membro</div>
+                    <div>Valor do depósito</div>
+                    <div>Número de depósitos</div>
+                    <div>Número de depósitos</div>
+                </div>
+                <List>
+                    {data.map((item, index) => (
+                        <List.Item key={index}>
+                            <div className={clsx(styles.item)}>
+                                <div>2025/04/23 14:46:23</div>
+                                <div>100,00R$</div>
+                                <div className="text-[#309a1f_!important]">100,00R$</div>
+                                <div>100,00R$</div>
+                                <div>100,00R$</div>
+                            </div>
+                        </List.Item>
+                    ))}
+                </List>
+                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
+                    <InfiniteScrollContent hasMore={hasMore} />
+                </InfiniteScroll>
+            </div>
+        </div>
+    );
+};
+
+export default Detail;

src/components/CutDown/index.tsx

@@ -12,8 +12,6 @@ const TimeLeft = ({
         leftTime: endTime * 1000,
     });
 
-    console.log(time);
-
     return (
         <div className={"flex text-[0.1389rem]"}>
             <div className={"text-center"}>