feat: 修改样式

src/app/[locale]/(TabBar)/deposit/DepositData.tsx

@@ -51,12 +51,17 @@ const DepositData: FC<Props> = (props) => {
     const [btns, setBtns] = useState<ShopProductItem[]>([]);
     const [formInput, setFormInput] = useState<ShopProductItem | null>(null);
     const { eventInitiate } = useEventPoint();
-
     const isStrictMode = useSystemStore((state) => state.identity_verify.deposit === 1);
-
+    const [middleHeight, setMiddleHeight] = useState<{ top: number; footer: number }>({
+        top: 50,
+        footer: 80,
+    }); // 中间区域高度
     const formInstanceRef = useRef<FormInstance>(null);
     let [amount, setAmount] = useState<number | undefined>(undefined);
 
+    const swiperBox = useRef<HTMLDivElement>(null);
+    const footerBox = useRef<HTMLDivElement>(null);
+
     const titleChangeHandler = (data: PayChannel) => {
         setAmount(undefined);
         if (typeof setChannel === "function") setChannel(data);
@@ -87,8 +92,15 @@ const DepositData: FC<Props> = (props) => {
             setFormInput(null);
             setBtns([]);
         }
+        computMiddleHeight();
     }, [shopInfo]);
 
+    const computMiddleHeight = () => {
+        const topHeight = swiperBox.current?.offsetHeight || 0;
+        const footerHeight = footerBox.current?.offsetHeight || 0;
+        setMiddleHeight({ top: topHeight, footer: footerHeight });
+    };
+
     const getCurrentProduct = (amount: number) => {
         if (!shopInfo?.products?.length) return null;
         let result = shopInfo?.products?.find((item) => item.pay_value === Number(amount));
@@ -206,36 +218,56 @@ const DepositData: FC<Props> = (props) => {
 
     return (
         <div className="deposit-box">
-            <Swiper slidesPerView={3} spaceBetween={10} centeredSlidesBounds>
-                {channel?.map((item, index) => (
-                    <SwiperSlide key={index}>
-                        <p
-                            className={clsx("btn-box truncate", {
-                                active: currentChannel?.id === item.id,
-                            })}
-                            onClick={() => titleChangeHandler(item)}
-                        >
-                            {item.name}
-                        </p>
-                    </SwiperSlide>
-                ))}
-            </Swiper>
+            <div ref={swiperBox} style={{ position: "sticky" }}>
+                <Swiper
+                    slidesPerView={3}
+                    spaceBetween={10}
+                    style={{ padding: "0 .1rem 0 .1rem", width: "100%" }}
+                    centeredSlidesBounds
+                >
+                    {channel?.map((item, index) => (
+                        <SwiperSlide key={index}>
+                            <p
+                                className={clsx("btn-box truncate", {
+                                    active: currentChannel?.id === item.id,
+                                })}
+                                onClick={() => titleChangeHandler(item)}
+                            >
+                                {item.name}
+                            </p>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            </div>
 
-            <Box className={"custom-form"} style={{ padding: 0 }}>
+            <Box
+                className={"custom-form"}
+                style={{
+                    padding: "0 .1rem",
+                    maxHeight: `clac(100% - ${middleHeight.top}px -${middleHeight.footer}px)`,
+                    overflow: "auto",
+                    // flex: 1,
+                    // minHeight: 0,
+                    // maxHeight: "100%",
+                    // display: "flex",
+                    // flexDirection: "column",
+                }}
+            >
                 <Form
                     style={{
                         "--border-bottom": "none",
                         "--border-top": "none",
                         "--border-inner": "none",
+                        // flex: "1 0",
                     }}
                     ref={formInstanceRef}
-                    footer={
-                        <>
-                            {!isEmpty && (
-                                <ButtonOwn deposit>{t("DepositPage.DepositarAgora")}</ButtonOwn>
-                            )}
-                        </>
-                    }
+                    // footer={
+                    //     <>
+                    //         {!isEmpty && (
+                    //             <ButtonOwn deposit>{t("DepositPage.DepositarAgora")}</ButtonOwn>
+                    //         )}
+                    //     </>
+                    // }
                     initialValues={userInfo}
                     onFinish={onFinish}
                     onValuesChange={onValuesChange}
@@ -307,11 +339,22 @@ const DepositData: FC<Props> = (props) => {
                         </div>
                     </div>
                 </Form>
-
+            </Box>
+            <div style={{ padding: ".1rem" }} ref={footerBox}>
+                {!isEmpty && (
+                    <ButtonOwn
+                        deposit
+                        callbackFun={() => {
+                            formInstanceRef.current?.submit();
+                        }}
+                    >
+                        {t("DepositPage.DepositarAgora")}
+                    </ButtonOwn>
+                )}
                 <div className={"mt-[5px] text-[0.12rem] text-[#3af3ff]"}>
                     {t("DepositPage.depositTips")}
                 </div>
-            </Box>
+            </div>
 
             <TipsModal title={"Tips"} ref={tipModelRef}>
                 <div className={"flex items-center justify-between"}>

src/components/ButtonOwn/index.tsx

@@ -38,7 +38,7 @@ const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({
             style={style}
             className={divClassName}
             {...other}
-            onClick={() => active && callbackFun && callbackFun()}
+            onClick={() => (active || deposit) && callbackFun && callbackFun()}
         >
             {children}
         </button>

src/styles/deposit.scss

@@ -1,11 +1,11 @@
 .deposit-box {
     width: 100%;
-    //height: 100%;
-    overflow-y: auto;
-    padding: 0.1rem 0.1rem;
+    height: 100%;
+    // overflow-y: auto;
+    // padding: 0.1rem 0.1rem;
     //background-color: #1f1f1f;
-    //display: flex;
-    //flex-direction: column;
+    display: flex;
+    flex-direction: column;
     @extend .customInputPage;
     .img-box {
         width: 129px;