feat: 修改deposite

src/api/depositsApi.ts

@@ -1,3 +1,5 @@
+import { server } from "@/utils/client";
+
 export interface DepositsTypes {
     description: string;
     /**
@@ -57,3 +59,72 @@ export interface RewardsType {
     ratio: number;
     text?: string;
 }
+
+export interface PayChannel {
+    id: number;
+    name: string;
+    icon: string;
+}
+
+export interface ShopItem {
+    id: number;
+    name: string;
+    img: string;
+    pay_channel: PayChannel[];
+}
+
+export const getShopListApi = () => {
+    return server.request<ShopItem[]>({
+        url: "/v1/api/user/shop/getShopList",
+        method: "POST",
+    });
+};
+
+export interface ShopPayRewardItem {
+    ItemID: number;
+    Reward: number;
+    Amount: number;
+    Rollover: number;
+    MaxReward: number;
+}
+export interface ShopActivityRewardItem {
+    ItemID: number;
+    Reward: number;
+    Amount: number;
+    Rollover: number;
+    MaxReward: number;
+}
+export interface ShopProductItem {
+    id: number;
+    is_hot: number;
+    order: number;
+    par_value: number;
+    pay: number;
+    start_time: number;
+    end_time: number;
+    desc: number;
+    days: number;
+    is_suss: 0 | 1;
+    pay_reward: ShopPayRewardItem[];
+    activity_reward: ShopActivityRewardItem[];
+}
+
+export interface ShopInfo {
+    id: number;
+    renter_id: number;
+    has_pay: boolean;
+    num: number;
+    products: ShopProductItem[];
+    condition: {
+        Min: number;
+        Max: number;
+    };
+}
+
+export const getShopInfoApi = (data: { shop_id: number }) => {
+    return server.request<ShopInfo>({
+        url: "/v1/api/user/shop/getShopInfo",
+        method: "POST",
+        data,
+    });
+};

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

@@ -1,72 +1,72 @@
 "use client";
-import { DepositsTypes, RewardsType } from "@/api/depositsApi";
-import { getUserMoneyApi, getUserRechargeApi } from "@/api/user";
+import { DepositsTypes, PayChannel, ShopInfo } from "@/api/depositsApi";
 import Box from "@/components/Box";
 import ButtonOwn from "@/components/ButtonOwn";
 import TipsModal, { ModalProps } from "@/components/TipsModal";
-import { useUserInfoStore } from "@/stores/useUserInfoStore";
-import { neReg } from "@/utils";
-import { Button, Form, Input, Toast } from "antd-mobile";
-import { FormInstance } from "antd-mobile/es/components/form";
-import { useTranslations } from "next-intl";
-import { FC, useEffect, useLayoutEffect, useRef, useState } from "react";
-
-import actions from "@/app/[locale]/(TabBar)/deposit/actions";
-import Empty from "@/components/Empty";
-import { useEventPoint } from "@/hooks/useEventPoint";
-import { useRouter } from "@/i18n/routing";
 import { useSystemStore } from "@/stores/useSystemStore";
+import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import "@/styles/deposit.scss";
 import { server } from "@/utils/client";
+import { neReg } from "@/utils/index";
+import { Button, Form, Input } from "antd-mobile";
+import { FormInstance } from "antd-mobile/es/components/form";
 import clsx from "clsx";
+import { useTranslations } from "next-intl";
+import { FC, useMemo, useRef, useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
+import Reward from "./Reward";
+
 interface Props {
     onActiveChange?: (activeType: DepositsTypes) => void;
+    shopInfo?: ShopInfo;
+    channel?: PayChannel[];
+    currentChannel?: PayChannel;
+    setChannel?: (data: PayChannel) => void;
 }
 
-interface RewardsProps {
-    rewards: RewardsType[];
-}
-const RewardsText: FC<RewardsProps> = (props) => {
-    const { rewards } = props;
-    // {/*1现金2彩金3免费币4重玩币*/}
-    const t = useTranslations();
-    const calcRewards = rewards
-        .map((item) => {
-            // let text = item.ratio > 0 ? `${item.ratio}%` : `${item.reward}`;
-            // 根据coin_type添加后缀
-            const suffixes = {
-                1: t("ProfilePage.balance"),
-                2: t("ProfilePage.bonus"),
-                3: t("ProfilePage.free"),
-                4: t("ProfilePage.replay"),
-            };
-            let text = "";
-            // 设置基础奖励文本
-            if (item.ratio > 0) {
-                text = `${item.ratio}%`;
-            } else {
-                text = `${item.reward}`;
-            }
-            if (item.ratio > 0 && item.reward > 0) {
-                text = `${item.ratio}%${suffixes[item.coin_type]}, ${item.reward}`;
-            }
+// interface RewardsProps {
+//     rewards: any;
+// }
+// const RewardsText: FC<RewardsProps> = (props) => {
+//     const { rewards } = props;
+//     // {/*1现金2彩金3免费币4重玩币*/}
+//     const t = useTranslations();
+//     const calcRewards = rewards
+//         .map((item) => {
+//             // let text = item.ratio > 0 ? `${item.ratio}%` : `${item.reward}`;
+//             // 根据coin_type添加后缀
+//             const suffixes = {
+//                 1: t("ProfilePage.balance"),
+//                 2: t("ProfilePage.bonus"),
+//                 3: t("ProfilePage.free"),
+//                 4: t("ProfilePage.replay"),
+//             };
+//             let text = "";
+//             // 设置基础奖励文本
+//             if (item.ratio > 0) {
+//                 text = `${item.ratio}%`;
+//             } else {
+//                 text = `${item.reward}`;
+//             }
+//             if (item.ratio > 0 && item.reward > 0) {
+//                 text = `${item.ratio}%${suffixes[item.coin_type]}, ${item.reward}`;
+//             }
 
-            // 如果coin_type在suffixes中存在，则添加相应的后缀
-            if (suffixes.hasOwnProperty(item.coin_type)) {
-                text += suffixes[item.coin_type];
-            }
+//             // 如果coin_type在suffixes中存在，则添加相应的后缀
+//             if (suffixes.hasOwnProperty(item.coin_type)) {
+//                 text += suffixes[item.coin_type];
+//             }
 
-            return text;
-        })
-        .join(",");
+//             return text;
+//         })
+//         .join(",");
 
-    return (
-        <div className={"flex flex-1 flex-wrap break-all"}>
-            <span className="amountTips">+ {calcRewards} </span>
-        </div>
-    );
-};
+//     return (
+//         <div className={"flex flex-1 flex-wrap break-all"}>
+//             <span className="amountTips">+ {calcRewards} </span>
+//         </div>
+//     );
+// };
 
 const getDepositApi = async () => {
     return server
@@ -81,73 +81,81 @@ const getDepositApi = async () => {
         });
 };
 const DepositData: FC<Props> = (props) => {
+    const { shopInfo, channel, currentChannel, setChannel } = props;
     const t = useTranslations();
-    const router = useRouter();
+    // const router = useRouter();
     const userInfo = useUserInfoStore((state) => state.userInfo);
-    const { eventInitiate } = useEventPoint();
+    // const { eventInitiate } = useEventPoint();
 
     const isStrictMode = useSystemStore((state) => state.identity_verify.deposit === 1);
 
-    const [depositState, setDepositState] = useState<DepositsTypes[]>([]);
+    // const [depositState, setDepositState] = useState<DepositsTypes[]>([]);
 
-    const [activeType, setActiveType] = useState<Partial<DepositsTypes>>({});
+    // const [activeType, setActiveType] = useState<Partial<DepositsTypes>>({});
 
     const formInstanceRef = useRef<FormInstance>(null);
     let [amount, setAmount] = useState<number | undefined>(undefined);
 
-    useEffect(() => {
-        if (props.onActiveChange) {
-            props.onActiveChange(activeType as DepositsTypes);
-        }
-    }, [activeType]);
+    // useEffect(() => {
+    //     if (props.onActiveChange) {
+    //         props.onActiveChange(activeType as DepositsTypes);
+    //     }
+    // }, [activeType]);
 
-    const titleChangeHandler = (item: DepositsTypes, index: number) => {
+    const titleChangeHandler = (data: PayChannel) => {
         setAmount(undefined);
-        setActiveType(item);
+        if (typeof setChannel === "function") setChannel(data);
         formInstanceRef.current?.resetFields();
     };
 
-    const tipModelRef = useRef<ModalProps>(null); // 充值清空打码量弹窗
-    const [formData, setFormData] = useState<any>({}); // 存放表单数据
-    const onFinish = async (values: any) => {
-        const params = { ...values, channel_id: activeType.id, amount: +values.amount };
-        const res = await getUserMoneyApi();
-        if (res.data?.tips_reset_rollover) {
-            tipModelRef.current?.onOpen();
-            setFormData(params);
-            return;
-        }
-        handleUserRecharge(false, params);
-    };
+    const customProduct = useMemo(() => {
+        if (!shopInfo?.products?.length) return null;
+        return shopInfo?.products?.find((item) => item.pay === 0);
+    }, [shopInfo?.products]);
 
-    const handleUserRecharge = (is_reset_rollover: boolean, data?: any) => {
-        let params = data || formData;
-        getUserRechargeApi({ is_reset_rollover, ...params })
-            .then(async (res) => {
-                formInstanceRef.current?.resetFields();
-                tipModelRef.current?.onClose();
-                setAmount(undefined);
-                // const url =
-                //     "https://caixa.pay4z.com/brl/qrcode.html?tradeNo=T2501180056ijk21kJ&amount=20&payAmount=20&currency=BRL&expiredAt=2025-01-18%2001%3A11%3A31&expire=1737173491282&raw=00020101021226870014br.gov.bcb.pix2565qrcode.santsbank.com%2Fdynamic%2Fdc8cf003-1616-47f8-94e6-16be500d05b45204000053039865802BR5907LF%20LTDA6009Sao%20Paulo62070503***6304DF54&type=QRCODE";
+    console.log("customProduct", customProduct);
 
-                if (res.data.pay_url) {
-                    eventInitiate();
-                    // fix: ios 限制
-                    setTimeout(() => {
-                        window.open(res.data.pay_url);
-                    }, 0);
-                } else {
-                    Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
-                }
-                const data = await getDepositApi();
-                setDepositState(data);
-                setActiveType(data[0]);
-                await actions();
-            })
-            .catch((error) => {
-                Toast.show({ content: t(`code.${error.data.code}`), maskClickable: false });
-            });
-    };
+    const tipModelRef = useRef<ModalProps>(null); // 充值清空打码量弹窗
+    // const [formData, setFormData] = useState<any>({}); // 存放表单数据
+    // const onFinish = async (values: any) => {
+    //     const params = { ...values, channel_id: activeType.id, amount: +values.amount };
+    //     const res = await getUserMoneyApi();
+    //     if (res.data?.tips_reset_rollover) {
+    //         tipModelRef.current?.onOpen();
+    //         setFormData(params);
+    //         return;
+    //     }
+    //     handleUserRecharge(false, params);
+    // };
+    const handleUserRecharge = (type: boolean) => {};
+    // const handleUserRecharge = (is_reset_rollover: boolean, data?: any) => {
+    //     let params = data || formData;
+    //     getUserRechargeApi({ is_reset_rollover, ...params })
+    //         .then(async (res) => {
+    //             formInstanceRef.current?.resetFields();
+    //             tipModelRef.current?.onClose();
+    //             setAmount(undefined);
+    //             // const url =
+    //             //     "https://caixa.pay4z.com/brl/qrcode.html?tradeNo=T2501180056ijk21kJ&amount=20&payAmount=20&currency=BRL&expiredAt=2025-01-18%2001%3A11%3A31&expire=1737173491282&raw=00020101021226870014br.gov.bcb.pix2565qrcode.santsbank.com%2Fdynamic%2Fdc8cf003-1616-47f8-94e6-16be500d05b45204000053039865802BR5907LF%20LTDA6009Sao%20Paulo62070503***6304DF54&type=QRCODE";
+
+    //             if (res.data.pay_url) {
+    //                 eventInitiate();
+    //                 // fix: ios 限制
+    //                 setTimeout(() => {
+    //                     window.open(res.data.pay_url);
+    //                 }, 0);
+    //             } else {
+    //                 Toast.show({ icon: "success", content: t("code.200"), maskClickable: false });
+    //             }
+    //             const data = await getDepositApi();
+    //             setDepositState(data);
+    //             setActiveType(data[0]);
+    //             await actions();
+    //         })
+    //         .catch((error) => {
+    //             Toast.show({ content: t(`code.${error.data.code}`), maskClickable: false });
+    //         });
+    // };
 
     const onValuesChange = (changeValues: any) => {
         if (changeValues.amount) {
@@ -159,69 +167,37 @@ const DepositData: FC<Props> = (props) => {
         setAmount(value);
     };
     const amountValidator = (rules: any, value: any) => {
-        if (!value) return Promise.reject(new Error(t("form.amount")));
-        if (+value < activeType.min_amount!)
-            return Promise.reject(
-                new Error(t("form.amountMinReg", { amount: activeType.min_amount }))
-            );
-        if (+value > activeType.max_amount!)
-            return Promise.reject(
-                new Error(t("form.amountMaxReg", { amount: activeType.max_amount }))
-            );
+        // if (!value) return Promise.reject(new Error(t("form.amount")));
+        // if (+value < activeType.min_amount!)
+        //     return Promise.reject(
+        //         new Error(t("form.amountMinReg", { amount: activeType.min_amount }))
+        //     );
+        // if (+value > activeType.max_amount!)
+        //     return Promise.reject(
+        //         new Error(t("form.amountMaxReg", { amount: activeType.max_amount }))
+        //     );
         return Promise.resolve();
     };
 
-    useLayoutEffect(() => {
-        getDepositApi().then((data) => {
-            setDepositState(data);
-            setActiveType(data[0]);
-        });
-    }, []);
+    // useLayoutEffect(() => {
+    //     getDepositApi().then((data) => {
+    //         setDepositState(data);
+    //         setActiveType(data[0]);
+    //     });
+    // }, []);
 
-    if (!depositState.length) return <Empty />;
+    // if (!depositState.length) return <Empty />;
 
     return (
         <div className="deposit-box">
-            {/* <div className="img-box">
-                <img
-                    className={"h-[100%] w-[100%] object-cover"}
-                    src={activeType.icon || ""}
-                    alt={activeType.name || ""}
-                    width={160}
-                    height={40}
-                />
-            </div> */}
-
-            {/*<div className={"flex flex-wrap"}>*/}
-            {/*    {depositState.map((item, index) => {*/}
-            {/*        return (*/}
-            {/*            <Fragment key={item.id}>*/}
-            {/*                <p*/}
-            {/*                    className="btn-box truncate"*/}
-            {/*                    style={{*/}
-            {/*                        borderColor: activeType?.id === item.id ? "#ff9323" : "#333",*/}
-            {/*                    }}*/}
-            {/*                    onClick={() => titleChangeHandler(item, index)}*/}
-            {/*                >*/}
-            {/*                    {item.name}*/}
-            {/*                </p>*/}
-            {/*            </Fragment>*/}
-            {/*        );*/}
-            {/*    })}*/}
-            {/*</div>*/}
-            {/* {
-                                background: activeType?.id === item.id ? "#d917ff" : "transparent",
-                                boxShadow: activeType?.id === item.id ? "none":,
-                                borderColor: activeType?.id === item.id ? "#d917ff",
-                            } */}
             <Swiper slidesPerView={3} spaceBetween={10} centeredSlidesBounds>
-                {depositState?.map((item, index) => (
+                {channel?.map((item, index) => (
                     <SwiperSlide key={index}>
                         <p
                             className={clsx("btn-box truncate", {
-                                active: activeType?.id === item.id, // 检查是否为当前活动项，添加active类名
+                                active: currentChannel?.id === item.id,
                             })}
-                            onClick={() => titleChangeHandler(item, index)}
+                            onClick={() => titleChangeHandler(item)}
                         >
                             {item.name}
                         </p>
@@ -243,7 +219,7 @@ const DepositData: FC<Props> = (props) => {
                         </>
                     }
                     initialValues={userInfo}
-                    onFinish={onFinish}
+                    // onFinish={onFinish}
                     onValuesChange={onValuesChange}
                 >
                     {isStrictMode ? (
@@ -272,40 +248,34 @@ const DepositData: FC<Props> = (props) => {
                         rules={[{ required: true, type: "number", validator: amountValidator }]}
                     >
                         <Input
-                            placeholder={`${t("DepositPage.Montante")}: (${activeType?.min_amount}-${activeType?.max_amount})`}
+                            placeholder={`${t("DepositPage.Montante")}: (${shopInfo?.condition?.Min}-${shopInfo?.condition?.Max})`}
                             type={"number"}
-                            maxLength={activeType?.max_amount}
+                            maxLength={shopInfo?.condition?.Max}
                         />
                     </Form.Item>
 
                     <div className={"flex flex-col"}>
                         <div className={"flex-1"}>
                             <ul className="ul-box">
-                                {activeType?.products?.map((item, index) => (
-                                    <li
-                                        className={amount == item.amount ? "active" : ""}
-                                        key={index}
-                                        onClick={() => amountChange(item.amount)}
-                                    >
-                                        {!!item.badge && <span className="hot"></span>}
-                                        <div className="amountContent">
-                                            {/* <span className="iconfont icon-unit-brl"></span> */}
-                                            <span className="iconfont">R$</span>
-                                            <span> {item.amount}</span>
-                                        </div>
+                                {shopInfo?.products?.map((item, index) => {
+                                    if (item.pay <= 0) return null;
+                                    return (
+                                        <li
+                                            className={amount == item.pay / 100 ? "active" : ""}
+                                            key={index}
+                                            onClick={() => amountChange(item.pay / 100)}
+                                        >
+                                            {!!item.is_hot && <span className="hot"></span>}
+                                            <div className="amountContent">
+                                                {/* <span className="iconfont icon-unit-brl"></span> */}
+                                                <span className="iconfont">R$</span>
+                                                <span> {item.pay / 100}</span>
+                                            </div>
 
-                                        {item.rewards && (
-                                            <RewardsText
-                                                rewards={
-                                                    item.rewards &&
-                                                    item.rewards.sort(
-                                                        (p, n) => p.coin_type - n.coin_type
-                                                    )
-                                                }
-                                            />
-                                        )}
-                                    </li>
-                                ))}
+                                            <Reward data={item} />
+                                        </li>
+                                    );
+                                })}
                             </ul>
                         </div>
                     </div>

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

@@ -1,25 +1,48 @@
+import { ShopItem } from "@/api/depositsApi";
 import clsx from "clsx";
 import React from "react";
 import styles from "./left.module.scss";
 
 interface Props {
-    activeData: any;
+    data: any;
+    onChange?: (idx: number) => void;
+    channelData?: any;
+    actIdx?: number;
 }
 
-const Left: React.FC<Props> = ({ activeData }) => {
+const Left: React.FC<Props> = ({ channelData, data, actIdx = 0, onChange }) => {
+    const doChange = (idx: number) => {
+        if (actIdx !== idx && typeof onChange === "function") {
+            onChange && onChange(idx);
+        }
+    };
+
+    console.log(11220, channelData);
+
     return (
         <div className="h-[100%] overflow-auto border border-y-0 border-[#5ec5ff] shadow-[0_0_25px_#3d4083_inset]">
-            <div className="py-[.06rem] text-center">
-                <img
-                    src={activeData.icon}
-                    alt={activeData.name}
-                    className="inline-block w-[80%] object-cover"
-                />
-            </div>
-            <div className={clsx(styles.item, styles.active)}>Cartão Mensal</div>
-            <div className={clsx(styles.item)}>Cartão Mensal</div>
-            <div className={clsx(styles.item)}>Cartão Mensal</div>
-            <div className={clsx(styles.item)}>Cartão Mensal</div>
+            {channelData?.name && (
+                <div className="py-[.06rem] text-center">
+                    {channelData?.name}
+                    <img
+                        src={channelData?.icon}
+                        alt={channelData?.name}
+                        className="inline-block w-[80%] object-cover"
+                    />
+                </div>
+            )}
+            {!!data?.length &&
+                data.map((item: ShopItem, idx: number) => {
+                    return (
+                        <div
+                            key={`${item.id}_${idx}`}
+                            className={clsx(styles.item, { [styles.active]: actIdx === idx })}
+                            onClick={() => doChange(idx)}
+                        >
+                            Cartão Mensal
+                        </div>
+                    );
+                })}
         </div>
     );
 };

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

@@ -0,0 +1,37 @@
+import { ShopProductItem } from "@/api/depositsApi";
+import clsx from "clsx";
+import React from "react";
+import styles from "./reward.module.scss";
+
+interface Props {
+    data: ShopProductItem;
+}
+
+const Reward: React.FC<Props> = ({ data }) => {
+    console.log(data); //TODO: delet
+
+    return (
+        <div className={clsx(styles.rewardBox, "text-[.1rem] text-[#ccc]")}>
+            <div className="flex w-[100%] flex-row items-start justify-between">
+                <div>充值奖励</div>
+                <div>
+                    <div>2323</div>
+                    <div>2323</div>
+                    <div>2323</div>
+                    <div>2323</div>
+                </div>
+            </div>
+            <div className="flex w-[100%] flex-row items-start justify-between">
+                <div>活动奖励</div>
+                <div>
+                    <div>2323</div>
+                    <div>2323</div>
+                    <div>2323</div>
+                    <div>2323</div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Reward;

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

@@ -1,22 +1,78 @@
 "use client";
+import { getShopInfoApi, getShopListApi, ShopInfo } from "@/api/depositsApi";
 import React from "react";
 import DepositData from "./DepositData";
 import Left from "./Left";
 
 const Deposit = () => {
-    const [activeData, setActiveData] = React.useState({});
+    const [actIdx, setActIdx] = React.useState(0);
+    const [shopTypeList, setShopTypeList] = React.useState<any[]>([]);
+    const [currentChannel, setCurrentChannel] = React.useState<any>({});
+    const [shopInfo, setShopInfo] = React.useState<ShopInfo>({} as ShopInfo);
 
-    const activeDataChange = (data: any) => {
-        setActiveData(data);
+    const actChange = (idx: number) => {
+        setActIdx(idx);
+        doChangeChannel(shopTypeList[idx].pay_channel[0]); //TODO: dele
     };
+    const currentShop = React.useMemo(() => {
+        return shopTypeList[actIdx];
+    }, [actIdx, shopTypeList]);
 
+    React.useEffect(() => {
+        getData();
+    }, []);
+
+    React.useEffect(() => {
+        const id = shopTypeList[actIdx]?.id;
+        getInfo(id);
+    }, [actIdx, shopTypeList]);
+
+    const getData = async () => {
+        const res = await getShopListApi();
+        if (res?.code === 200 && res?.data) {
+            setShopTypeList(res?.data || []);
+            doChangeChannel(res?.data[actIdx].pay_channel[0]);
+        }
+    };
+
+    const getInfo = async (id: number) => {
+        if (!id) {
+            setShopInfo({} as ShopInfo);
+            return;
+        }
+        const res = await getShopInfoApi({ shop_id: id });
+        if (res?.code === 200 && res?.data) {
+            res.data.products.sort((a: any, b: any) => {
+                return a.pay - b.pay;
+            }); //TODO: sort sho
+            setShopInfo(res.data);
+        }
+    };
+
+    const doChangeChannel = (data: any) => {
+        setCurrentChannel(data);
+    };
+
+    console.log(9991, currentChannel);
     return (
         <div className="flex h-[100%] flex-row items-stretch">
             <div className="w-[1rem]">
-                <Left activeData={activeData}></Left>
+                <Left
+                    data={shopTypeList}
+                    onChange={actChange}
+                    channelData={currentChannel}
+                    actIdx={actIdx}
+                ></Left>
             </div>
+
             <div className="flex-1 overflow-auto">
-                <DepositData onActiveChange={activeDataChange} />
+                <DepositData
+                    onActiveChange={doChangeChannel}
+                    currentChannel={currentChannel}
+                    setChannel={doChangeChannel}
+                    shopInfo={shopInfo}
+                    channel={currentShop?.pay_channel || []}
+                />
             </div>
         </div>
     );

src/styles/deposit.scss

@@ -86,8 +86,8 @@
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
+        // display: grid;
+        // grid-template-columns: repeat(2, 1fr);
         justify-content: center;
         gap: 20px;
 
@@ -99,18 +99,19 @@
             border-radius: 0.06rem;
             color: #fff;
             font-size: 0.18rem;
+            margin-bottom: 0.1rem;
             // background: #494949;
-            display: flex;
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
-            -webkit-box-pack: center;
-            -ms-flex-pack: center;
-            justify-content: center;
+            // display: flex;
+            // -webkit-box-align: center;
+            // -ms-flex-align: center;
+            // align-items: center;
+            // -webkit-box-orient: vertical;
+            // -webkit-box-direction: normal;
+            // -ms-flex-direction: column;
+            // flex-direction: column;
+            // -webkit-box-pack: center;
+            // -ms-flex-pack: center;
+            // justify-content: center;
             position: relative;
             // overflow: hidden;
             cursor: pointer;
@@ -145,7 +146,7 @@
                 width: 100%;
                 display: flex;
                 align-items: center;
-                justify-content: center;
+                justify-content: flex-end;
 
                 .iconfont {
                     margin-right: 0.03rem;