|
@@ -0,0 +1,102 @@
|
|
|
+"use client";
|
|
|
+import CustomButton from "@/components/CustomButton";
|
|
|
+import VipProgress from "@/components/VipProgress";
|
|
|
+import React from "react";
|
|
|
+import styles from "./page.module.scss";
|
|
|
+
|
|
|
+const Page = () => {
|
|
|
+ const [vipLevel, setVipLevel] = React.useState(0);
|
|
|
+
|
|
|
+ const vipChange = (value: any) => {
|
|
|
+ setVipLevel(value);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.pageContainer}>
|
|
|
+ <VipProgress onChange={vipChange} vip_level={vipLevel}></VipProgress>
|
|
|
+ <div className="p-[.1rem]">
|
|
|
+ <div className={styles.card}>
|
|
|
+ <div className="relative z-[1]">
|
|
|
+ <div className="text-[16px] font-bold text-[var(--textColor1)]">
|
|
|
+ Pacote de Beneficios VIP
|
|
|
+ </div>
|
|
|
+ <div className="mt-[.1rem] font-bold text-[var(--textColor1)]">
|
|
|
+ Recarregue:
|
|
|
+ </div>
|
|
|
+ <div className="text-[24px] font-black text-[var(--textColor1)]">
|
|
|
+ R$ 100,00
|
|
|
+ </div>
|
|
|
+ <div className="mt-[.1rem] font-bold text-[var(--textColor1)]">
|
|
|
+ Valor total:
|
|
|
+ </div>
|
|
|
+ <div className="text-[24px] font-black text-[var(--textColor1)]">
|
|
|
+ R$ 100,00
|
|
|
+ </div>
|
|
|
+ <CustomButton className="mt-[.1rem] !w-full">Depósito</CustomButton>
|
|
|
+ </div>
|
|
|
+ <div className="absolute -right-[1px] top-[.15rem] aspect-[5.32/1] w-[120px] bg-[url('/vip_charge/H7_viplibao_jiaobiao_bg.webp')] bg-contain bg-no-repeat text-center text-[12px] text-[#fff]">
|
|
|
+ Recarga +130%
|
|
|
+ </div>
|
|
|
+ <div className="absolute right-[0] top-[.3rem] flex flex-col items-center">
|
|
|
+ <img
|
|
|
+ className="w-[1.5rem]"
|
|
|
+ src="/vip_charge/H7_viplibao_libiao_icon.webp"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ className="relative top-[-0.35rem] w-[1.2rem]"
|
|
|
+ src="/vip_charge/vip_tuodi_bg.webp"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className={styles.item}>
|
|
|
+ <div className="h-[100%]">
|
|
|
+ <div className="flex aspect-[2.73/1] w-[70px] items-center justify-center bg-[url('/vip_charge/H7_viplibao_jiaobiao2_bg.webp')] bg-contain bg-no-repeat">
|
|
|
+ 1 Dia
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>Pode receber</div>
|
|
|
+ <div className="fontfamily text-[24px] font-black text-[var(--textColor4)]">
|
|
|
+ R$ 100,00
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center">
|
|
|
+ <CustomButton
|
|
|
+ className="min-w-[120px] !px-[12px] !py-[15px] !text-[14px] !font-normal !leading-[1]"
|
|
|
+ type={"disable3"}
|
|
|
+ >
|
|
|
+ Não iniciado
|
|
|
+ </CustomButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="mb-[.2rem] mt-[.1rem] flex w-full flex-col gap-[8px] rounded-[var(--borderRadius)] bg-[var(--primary13)] p-[15px] text-[#cbd1cb]">
|
|
|
+ <h3 className="text-[12px] text-[var(--textColor1)]">
|
|
|
+ Regras do pacote de benefícios de upgrade VIP:
|
|
|
+ </h3>
|
|
|
+ <div className="flex w-full flex-col gap-[5px] text-[12px] text-[var(--textColor2)]">
|
|
|
+ <span>
|
|
|
+ 1. Ao subir de nivel VIP, o membro ganha um pacote de benefícios.
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ 2. Para ganhar recompensas extras, o valor do pacote precisa ser
|
|
|
+ recarregado.
|
|
|
+ </span>
|
|
|
+ <span>3. Cada nível VIP só recebe o pacote uma vez.</span>
|
|
|
+ <span>4. Após a recarga, o valor e a recompensa do dia são liberados.</span>
|
|
|
+ <span>5. Recompensas extras restantes saem no 2° e 3° dias.</span>
|
|
|
+ <span>
|
|
|
+ 6. As recompensas não expiram e podem ser retiradas a qualquer momento.
|
|
|
+ </span>
|
|
|
+ <span>7. Compras de múltiplos pacotes acumulam as recompensas.</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Page;
|