Browse Source

feat: 修改

year 1 month ago
parent
commit
43b32620dd

BIN
public/home/back.png


+ 35 - 3
src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -17,9 +17,10 @@ import useWheelStore from "@/stores/useWheelStore";
 import { getToken } from "@/utils/Cookies";
 import { useRequest } from "ahooks";
 import { Badge } from "antd-mobile";
+import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useRef, useState, useTransition } from "react";
 
 interface Props {
     services: ServiceTypes[];
@@ -265,8 +266,8 @@ const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
 const ServiceWidget: FC<Props> = (props) => {
     const { services } = props;
     const [type, setType] = useState<number>(0);
-
-    console.log(1122, services);
+    const [isShowBack, setIsShowBack] = useState<boolean>(false);
+    const [isPending, startTransition] = useTransition();
 
     const { eventView } = useEventPoint();
     const newServices = services?.filter((item) => item.status === 1) || [];
@@ -283,16 +284,47 @@ const ServiceWidget: FC<Props> = (props) => {
         // setSocials(socials);
         // pixel 埋点
         // eventView();
+        setTimeout(() => {
+            const mainBox = document.querySelector("#maincontainer");
+            if (mainBox) {
+                mainBox.addEventListener("scroll", (e: any) => {
+                    const topNum = e.target.scrollTop;
+                    if (topNum > 400) {
+                        setIsShowBack(true);
+                    } else {
+                        setIsShowBack(false);
+                    }
+                });
+            }
+        }, 1000);
     }, []);
 
     const t = useTranslations("HomePage");
 
+    const doBack = () => {
+        const mainBox = document.querySelector("#maincontainer");
+        if (mainBox) {
+            mainBox.scrollTo({ top: 0, behavior: "smooth" });
+        }
+    };
+
     return (
         <>
             <div
                 className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
             >
                 {/* {React.cloneElement(curComponents, { onDestory: modalDestory })} */}
+                <img
+                    className={clsx("mb-[.2rem] w-[.54rem]")}
+                    style={{
+                        // display: isShowBack ? "block" : "none",
+                        transform: isShowBack ? `translateX(0)` : `translateX(300%)`,
+                        pointerEvents: isShowBack ? "auto" : "none",
+                    }}
+                    onClick={doBack}
+                    src="/home/back.png"
+                    alt=""
+                />
                 <SlotSection />
                 {/*轮盘  */}
                 <WheelSection />

+ 3 - 3
src/app/[locale]/(TabBar)/[[...share]]/_home/HomeTabs.tsx

@@ -97,9 +97,9 @@ const TabItem = ({
                 {item.image && (
                     <img
                         src={item.image}
-                        width={32}
-                        height={32}
-                        style={{ width: ".32rem" }}
+                        width={36}
+                        height={36}
+                        style={{ width: ".36rem" }}
                         alt={item.url}
                         className={clsx(item.isAnimation ? "animate-slow-bounce" : "")}
                     ></img>

+ 30 - 0
src/app/[locale]/(TabBar)/deposit/component/deposit/index.module.scss

@@ -5,25 +5,53 @@
     :global(.adm-list-default .adm-list-body) {
         border: none !important;
     }
+    :global(.adm-list-item) {
+        padding-left: 0 !important;
+    }
+    :global(.adm-list-item-content-main) {
+        padding: 0.08rem 0;
+        display: flex;
+        align-items: center;
+    }
+    :global(.adm-form-item-feedback-error) {
+        font-size: 0.1rem;
+    }
     :global(.adm-list-item-content) {
         border: none !important;
     }
     :global(.adm-list-item-content-prefix) {
         width: auto !important;
+        padding-right: 0 !important;
         label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             color: #fff !important;
         }
     }
     :global(.adm-form-item-label) {
         color: #768d95;
     }
+    :global(.adm-list-item-content-extra) {
+        // height: 0.36rem;
+    }
     .extraPart {
         font-size: 0.12rem;
         display: flex;
         align-items: center;
     }
+    .amountInput {
+        :global(.adm-list-item-content-main) {
+            padding: 0.12rem 0;
+        }
+        ::placeholder {
+            font-size: 0.16rem;
+            color: #768d95;
+        }
+    }
     ::placeholder {
         color: #37434c !important;
+        font-size: 0.12rem;
     }
 }
 
@@ -43,6 +71,8 @@
     overflow: hidden;
     &.active {
         border: 1px solid #11de68;
+        font-weight: 700;
+        color: #11de68;
         .checked {
             display: block;
         }

+ 10 - 10
src/app/[locale]/(TabBar)/deposit/component/deposit/index.tsx

@@ -271,14 +271,15 @@ const Deposit = () => {
                                     )}
                                     onClick={() => channelChangeHandler(item)}
                                 >
-                                    <div className="text-center">
-                                        <img
+                                    <div className="text-center text-[.15rem]">
+                                        {/* <img
                                             className="inline-block h-[.15rem]"
                                             src={item.icon}
                                             alt=""
-                                        />
+                                        /> */}
+                                        {item.name}
                                     </div>
-                                    <div className="mt-[.02rem] text-[#11de68]">
+                                    <div className="mt-[.02rem] text-[.13rem]">
                                         R${shopType.condition.min}~{shopType.condition.max}
                                     </div>
                                     {/* <i className={clsx("iconfont icon-gouxuan1", styles.checked)}></i> */}
@@ -294,7 +295,7 @@ const Deposit = () => {
                             name="amount"
                             className={styles.amontForm}
                             layout="horizontal"
-                            label="R$"
+                            label={<div className="px-[.1rem]">R$</div>}
                             extra={
                                 <div className={styles.extraPart}>
                                     <span className="mr-[.1rem] text-[.14rem] text-[#11de68]">
@@ -306,6 +307,7 @@ const Deposit = () => {
                         >
                             <Input
                                 type={"text"}
+                                className={styles.amountInput}
                                 max={shopType?.condition?.max}
                                 onChange={inputChange}
                                 placeholder={`${shopType?.condition?.min}-${shopType?.condition?.max}`}
@@ -334,12 +336,10 @@ const Deposit = () => {
                                         amountChange(item.pay_value);
                                     }}
                                 >
-                                    <div className="text-[.16rem] text-[#11de68]">
-                                        R$ {item.pay_value}
-                                    </div>
+                                    <div className="text-[.16rem]">R$ {item.pay_value}</div>
                                     {item.localReward?.showAmount && (
                                         <div className="h-[.14rem] text-[#eac61f]">
-                                            {item.localReward?.showAmount}
+                                            +{item.localReward?.showAmount}
                                         </div>
                                     )}
                                 </div>
@@ -397,7 +397,7 @@ const Deposit = () => {
                         Histórico
                     </Button>
                 </div>
-                <div className="mt-[.2rem] text-[.1rem] text-[#74888f]">
+                <div className="mt-[.2rem] text-[.12rem] text-[#74888f]">
                     O CPF a que pertence a conta de pagamento deve ser omesmo que preencheu ao
                     levantar o dinheiro, caso contrário o levantamento não será bem-sucedido.
                 </div>

+ 19 - 1
src/app/[locale]/(TabBar)/deposit/component/withdraw/index.module.scss

@@ -2,9 +2,17 @@
     padding-bottom: 0.8rem;
     width: calc((100% - 20px) / 2);
     overflow: auto;
+    :global(.adm-list-item) {
+        padding-left: 0 !important;
+    }
     :global(.adm-list-default .adm-list-body) {
         border: none !important;
     }
+    :global(.adm-list-item-content-main) {
+        padding: 0.08rem 0;
+        display: flex;
+        align-items: center;
+    }
     :global(.adm-form-item-feedback-error) {
         font-size: 0.1rem;
     }
@@ -25,7 +33,7 @@
     }
     :global(.adm-form-item-label) {
         color: #768d95;
-        font-size: 0.13rem;
+        font-size: 0.15rem;
     }
     :global(.adm-list-item-content-extra) {
         height: 0.36rem;
@@ -35,8 +43,15 @@
         display: flex;
         align-items: center;
     }
+    .amountInput {
+        ::placeholder {
+            font-size: 0.16rem;
+            color: #768d95;
+        }
+    }
     ::placeholder {
         color: #37434c !important;
+        font-size: 0.12rem;
     }
 }
 .amontForm {
@@ -79,6 +94,8 @@
     overflow: hidden;
     &.active {
         border: 1px solid #11de68;
+        font-weight: 700;
+        color: #11de68;
         .checked {
             display: block;
         }
@@ -114,6 +131,7 @@
     align-items: center;
     justify-content: center;
     padding: 0 0.15rem;
+    font-weight: 700;
     color: #37434c;
 }
 .line {

+ 19 - 13
src/app/[locale]/(TabBar)/deposit/component/withdraw/index.tsx

@@ -291,14 +291,15 @@ const Withdraw = () => {
                                 )}
                                 onClick={() => channelChangeHandler(item)}
                             >
-                                <div className="text-center">
-                                    <img
+                                <div className="text-center text-[.15rem]">
+                                    {/* <img
                                         className="inline-block h-[.15rem]"
                                         src={item.icon}
                                         alt=""
-                                    />
+                                    /> */}
+                                    {item.name}
                                 </div>
-                                <div className="mt-[.02rem] text-[#11de68]">
+                                <div className="mt-[.02rem] text-[.13rem] text-[#11de68]">
                                     R${item.min_amount}~{item.max_amount}
                                 </div>
                             </p>
@@ -320,8 +321,8 @@ const Withdraw = () => {
                     }}
                 ></i>
             </div>
-            <div className="pb-[.1rem] text-[#74888f]">Valor do Saque</div>
-            <div className={styles.quick}>
+            {/* <div className="pb-[.1rem] text-[#74888f]">Valor do Saque</div> */}
+            {/* <div className={styles.quick}>
                 {quicks.map((item) => {
                     return (
                         <div
@@ -342,7 +343,7 @@ const Withdraw = () => {
                         </div>
                     );
                 })}
-            </div>
+            </div> */}
             <div className="flex items-center py-[.1rem]">
                 <i className="iconfont icon-22222_huaban1 mr-[.1rem] text-[#789098]"></i>
                 <span className="text-[.12rem] text-[#eac61f]">
@@ -353,7 +354,7 @@ const Withdraw = () => {
                 <Form ref={formInstanceRef} onFinish={onFinish} onValuesChange={valuesChange}>
                     <Form.Item
                         className={styles.amontForm}
-                        label="R$"
+                        label={<div className="px-[.1rem]">R$</div>}
                         layout="horizontal"
                         extra={
                             <div
@@ -372,12 +373,18 @@ const Withdraw = () => {
                         }
                         name="amount"
                     >
-                        <Input onChange={(value) => setAmount(value)} />
+                        <Input
+                            className={styles.amountInput}
+                            onChange={(value) => setAmount(value)}
+                            placeholder={`${currentChannel.min_amount}~${currentChannel.max_amount}`}
+                        />
                     </Form.Item>
 
                     <div className={styles.line}></div>
                     <div className={styles.channelText}>
-                        <span className="mr-[.1rem] text-[#768d95]">Método de Retirada</span>
+                        <span className="mr-[.1rem] text-[.14rem] text-[#768d95]">
+                            Método de Retirada
+                        </span>
                         {currentChannel.icon && (
                             <div className="rounded-[.04rem] border-[1px] border-[#16432f] px-[.06rem] py-[.02rem]">
                                 <img className="h-[.2rem]" src={currentChannel.icon} alt="" />
@@ -557,7 +564,6 @@ const Withdraw = () => {
                             {wallet.point}
                         </span>
                     </li>
-
                     <li>
                         <div className={"flex items-center pt-[.1rem]"}>
                             <ProgressBar
@@ -583,7 +589,7 @@ const Withdraw = () => {
                         {!faltaData.canWithdraw && (
                             <Button
                                 color={"primary"}
-                                className={"mx-auto flex-1 rounded-[.2rem_!important]"}
+                                className={"mx-auto flex-1 rounded-[.2rem_!important] font-bold"}
                                 style={{
                                     "--background-color": "#11de68",
                                     "--border-color": "#11de68",
@@ -597,7 +603,7 @@ const Withdraw = () => {
                         {faltaData.canWithdraw && (
                             <Button
                                 color={"primary"}
-                                className={"ml-[30px] flex-1 rounded-[.2rem_!important]"}
+                                className={"ml-[30px] flex-1 rounded-[.2rem_!important] font-bold"}
                                 style={{
                                     "--background-color": "#11de68",
                                     "--border-color": "#11de68",

+ 1 - 1
src/app/[locale]/(enter)/components/Form/index.tsx

@@ -331,7 +331,7 @@ const FormComponent: FC<Props> = (props) => {
                 initialValues={params.current}
                 onFinish={onFinish}
                 footer={
-                    <ButtonOwn active className={styles.btn}>
+                    <ButtonOwn active className={clsx(styles.btn, "font-bold")}>
                         {type === "login" ? t("form.loginText") : t("form.registerText")}
                     </ButtonOwn>
                 }

+ 1 - 2
src/app/[locale]/(enter)/login/layout.tsx

@@ -18,13 +18,12 @@ export default async function Layout({
     const t = await getTranslations("ProfilePage");
     // const services = await getServicesApi();
     return (
-        <div className="h-[100%] bg-[#000000]">
+        <div className="h-[100%] bg-[#1f2831]">
             {/* <HeaderBack showBack={false} useBg={false} /> */}
             {/* <main className={""} id={"loginLayout"}>
                
             </main> */}
             {children}
-            div
         </div>
     );
 }

+ 4 - 4
src/app/[locale]/(enter)/login/page.tsx

@@ -34,7 +34,7 @@ const Login = () => {
 
     return (
         <div className={styles.page}>
-            <div className="relative h-[1.8rem]">
+            <div className="relative h-[2.2rem]">
                 <div
                     onClick={() => router.back()}
                     className="absolute right-[10px] top-[10px] flex h-[.32rem] w-[.32rem] items-center justify-center rounded-[50%] bg-[rgba(0,0,0,.5)]"
@@ -43,8 +43,8 @@ const Login = () => {
                 </div>
             </div>
             <div className="flex min-h-[0] flex-1 flex-col">
-                <div className="pb-[.4rem] text-center text-[.18rem]">
-                    <span className="text-[#afbbc6]">Bem Vindo ao</span>
+                <div className="pb-[.4rem] text-center text-[.16rem] font-bold">
+                    <span className="mr-[.1rem] text-[#afbbc6]">Bem Vindo ao</span>
                     <span className="text-[#0abd71]">BCWIN777.com</span>
                 </div>
                 <div className="flex items-center justify-center pb-[.4rem]">
@@ -61,7 +61,7 @@ const Login = () => {
                                 }}
                             >
                                 <img src={item.icon} className="mr-[.04rem] h-[0.24rem]" alt="" />
-                                <span>{item.text}</span>
+                                <span className="text-[.16rem] text-[#677787]">{item.text}</span>
                             </div>
                         );
                     })}

+ 1 - 1
src/components/FooterTip/index.tsx

@@ -5,7 +5,7 @@ const FooterTip = () => {
     const t = useTranslations("LoginPage");
     return (
         <div className={"flex items-center justify-center bg-[#191f25] px-[.1rem] py-[.2rem]"}>
-            <span className={"mr-[10px] text-[12px] text-[#465461]"}>{t("childTips")}</span>
+            <span className={"mr-[10px] text-[.13rem] text-[#465461]"}>{t("childTips")}</span>
             <span className={"iconfont icon-a-18 text-[.2rem] text-[red]"}></span>
         </div>
     );