fix: 增加规则说明弹窗

src/app/[locale]/affiliate/component/TabsCom/index.tsx

@@ -1,10 +1,59 @@
 "use client";
 import { usePathname, useRouter } from "@/i18n/routing";
-import { Mask, Tabs } from "antd-mobile";
+import { Popup, Tabs } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, useState } from "react";
+import Image from "next/image";
+import { FC, ReactNode, useState } from "react";
 
 interface Props {}
+
+interface LevelProps {
+    url: string;
+    level: string;
+    body: ReactNode;
+    footer: ReactNode;
+}
+const LevelCard: FC<LevelProps> = (props) => {
+    const { url, level, body, footer } = props;
+    return (
+        <div className={"relative"}>
+            <div
+                className={
+                    "absolute left-1/2 -translate-x-1/2 rounded-[0.1389rem]" +
+                    " border-[1px]" +
+                    " w-[0.8333rem] border-[#00a1f5]"
+                }
+            >
+                <Image
+                    src={url}
+                    alt={""}
+                    className={"rounded-[0.1389rem]"}
+                    width={130}
+                    height={100}
+                />
+                <div
+                    className={
+                        "absolute bottom-[0.0208rem] right-[0.0347rem] h-[0.1806rem] w-[0.1806rem] rounded" +
+                        " flex items-center justify-center bg-[#00a1f5] text-[0.0972rem] font-black"
+                    }
+                >
+                    {level}
+                </div>
+            </div>
+            <div
+                className={
+                    "mt-[0.6944rem] rounded-[0.0694rem] border-[1px] border-[#22343e] pt-[0.2083rem]" +
+                    " px-[0.0694rem] text-center"
+                }
+            >
+                {body}
+                <div className={"-mx-[0.0694rem] border-t-[1px] border-[#22343e] py-[0.0694rem]"}>
+                    {footer}
+                </div>
+            </div>
+        </div>
+    );
+};
 const App: FC<Props> = (props) => {
     const pathname = usePathname();
     const t = useTranslations("TabsCom");
@@ -54,14 +103,156 @@ const App: FC<Props> = (props) => {
                     );
                 })}
             </Tabs>
-            <Mask visible={visible}>
-                <div
-                    className={"flex items-center justify-between p-[0.1389rem]" + " bg-[#17181c]"}
-                >
-                    <p>Regras de cálculo de comissão</p>
-                    <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
+            <Popup
+                visible={visible}
+                getContainer={null}
+                onMaskClick={() => {
+                    setVisible(false);
+                }}
+                position="right"
+                bodyStyle={{ width: "100%" }}
+            >
+                <div className={"h-[100%] w-[100%] overflow-scroll bg-[#0e1b22]"}>
+                    <div
+                        className={
+                            "absolute top-0 flex items-center justify-between " +
+                            " h-[0.4167rem] w-[100%] border-[1px] bg-[#17181c] px-[0.1389rem]" +
+                            " border-[#666]"
+                        }
+                    >
+                        <p>Regras de cálculo de comissão</p>
+                        <i className={"iconfont icon-guanbi"} onClick={() => setVisible(false)}></i>
+                    </div>
+                    {/*body*/}
+                    <div className={"mt-[0.4167rem] px-[0.1389rem] pt-[0.1389rem]"}>
+                        <div
+                            className={"rounded-[5px] border-[1px] border-[#22343e] p-[0.0694rem]"}
+                        >
+                            <div className={"flex items-center"}>
+                                <div className={"relative ml-[0.0694rem]"}>
+                                    <Image
+                                        src={"/avatar/1.png"}
+                                        alt={""}
+                                        className={
+                                            "rounded-[0.1389rem] border-[2px] border-[#e5811d]"
+                                        }
+                                        width={168}
+                                        height={168}
+                                    />
+                                    <div
+                                        className={
+                                            "absolute bottom-[0.0347rem] right-[0.0556rem]" +
+                                            " w-[0.2778rem]" +
+                                            " flex h-[0.2778rem] rounded-[50%] bg-[#e5811d]" +
+                                            " items-center justify-center"
+                                        }
+                                    >
+                                        A
+                                    </div>
+                                </div>
+                                <div className={"ml-[0.2083rem] text-[#465f80]"}>
+                                    <p> O C3 é poderoso e também possui </p>
+                                    <span className={"text-[#e5811d]"}>110</span>
+                                    <span>/million</span>
+                                </div>
+                            </div>
+
+                            <div className={"mt-[0.1389rem]"}>
+                                Desempenho total 3,31M, Bônus total do agente{" "}
+                                <span className={"text-[#e5811d]"}>2500</span>
+                            </div>
+                            <div>
+                                Desempenho de subordinado 180K, Contribuiu
+                                <span className={"text-[#e5811d]"}> 1980</span>
+                            </div>
+                            <div className={"text-center"}>
+                                Outro desempenho 3,13M, Contribuir
+                                <span className={"text-[#e5811d]"}> 520</span>
+                            </div>
+                        </div>
+
+                        <div className={"mt-[0.1042rem] grid grid-cols-3"}>
+                            <Image
+                                src={"/avatar/right.png"}
+                                alt={""}
+                                width={80}
+                                className={"justify-self-end"}
+                                height={200}
+                            />
+                            <Image
+                                src={"/avatar/up.png"}
+                                className={"justify-self-center"}
+                                alt={""}
+                                width={23}
+                                height={100}
+                            />
+                            <Image src={"/avatar/left.png"} alt={""} width={80} height={200} />
+                        </div>
+                        <div className={"grid grid-cols-3 text-[0.0972rem]"}>
+                            <div className={"text-center"}>
+                                <p>Contribuição de B1:</p>
+                                <p className={"text-center text-[#e5811d]"}>1320</p>
+                                <p>
+                                    Outras contribuições de C1 e C2:{" "}
+                                    <span className={"text-[#e5811d]"}>520</span>{" "}
+                                </p>
+                            </div>
+
+                            <div className={"text-center"}>
+                                <p> Contribuir para A: </p>
+                                <p className={"text-[#e5811d]"}>440</p>
+                            </div>
+                            <div className={"text-center"}>
+                                <p> Contribuição de B3: </p>
+                                <p className={"text-[#e5811d]"}>220</p>
+                                <p>
+                                    Outras contribuições de C3:
+                                    <span className={"text-[#e5811d]"}> 0</span>
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className={"mt-[3px] grid grid-cols-3 gap-[0.1389rem]"}>
+                            <LevelCard
+                                url={"/avatar/2.png"}
+                                level={"B1"}
+                                body={
+                                    <div className={"text-[#495b73]"}>
+                                        Subagente ganha, geralmente
+                                        <p>
+                                            <span className={"text-[#e5811d]"}>70</span> /10K
+                                        </p>
+                                    </div>
+                                }
+                                footer={<p>Apostas válidas 120K</p>}
+                            />
+                            <LevelCard
+                                url={"/avatar/3.png"}
+                                level={"B2"}
+                                body={
+                                    <div className={"text-[#495b73]"}>
+                                        B2 não tem subordinados, por isso não tem lucros
+                                    </div>
+                                }
+                                footer={<p>Apostas válidas 120K</p>}
+                            />
+                            <LevelCard
+                                url={"/avatar/4.png"}
+                                level={"B3"}
+                                body={
+                                    <div className={"text-[#495b73]"}>
+                                        Muito bem subagente, ganhou
+                                        <p>
+                                            <span className={"text-[#e5811d]"}>110</span> /10K
+                                        </p>
+                                    </div>
+                                }
+                                footer={<p>Apostas válidas 20K</p>}
+                            />
+                        </div>
+                    </div>
                 </div>
-            </Mask>
+            </Popup>
         </div>
     );
 };