feat: 修改

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

@@ -7,7 +7,7 @@ import { getToken } from "@/utils/Cookies";
 import { Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
-import { FC, useState } from "react";
+import React, { FC, useState } from "react";
 import HomeGames from "./HomeGames";
 
 // import HomePrize from "./HomePrize";
@@ -71,7 +71,6 @@ const TabItem = ({
 }) => {
     const t = useTranslations("ButtonGroup");
     const router = useRouter();
-
     const handler = (item: TabItemType) => {
         if (!item.locale) {
             onClick && onClick(item);
@@ -136,12 +135,17 @@ interface Props {
 }
 const Tabs: FC<Props> = (props) => {
     const { tabs, prize } = props;
+    const router = useRouter();
     const { show_again_game, show_free_game } = useSystemStore((state) => {
         return {
             show_again_game: state.show_again_game,
             show_free_game: state.show_free_game,
         };
     });
+
+    const [active, setActive] = useState<string | undefined>();
+    const stickyRef = React.useRef<number>(0);
+    const containerRef = React.useRef<number>(0);
     const newButtonGroup = buttonGroup.filter((item: any) => {
         if (item.url === "/freeGames" && show_free_game !== 1) {
             return false;
@@ -151,37 +155,117 @@ const Tabs: FC<Props> = (props) => {
         }
         return true;
     });
-    const tabData = [...tabs, ...newButtonGroup].map((item, idx) => {
-        return {
-            ...item,
-            name: item.category_name,
-            id: `${item.category_name}_${idx}`,
-            headerRender: () => (
-                <TabItem
-                    item={item as TabItemType}
-                    active={`${item.category_name}_${idx}` === active || (!active && idx === 0)}
-                ></TabItem>
-            ),
-        };
-    });
 
-    const [active, setActive] = useState<string | undefined>();
-    const router = useRouter();
-    const selectHandler = (index?: String) => {
-        // if (item.bet_type === 2 || item.bet_type === 3) {
-        //     router.push(
-        //         `/gameList/?gameListFlag=${item.category[0].jump_id}&type=1&bet_type=${item.bet_type}`
-        //     );
-        //     return;
-        // }
-        setActive(index as string);
+    const groupGames = React.useMemo(() => {
+        return tabs[0]?.category;
+    }, [tabs]);
+
+    const tabData = React.useMemo(() => {
+        return [...tabs, ...newButtonGroup].map((item, idx) => {
+            return {
+                ...item,
+                name: item.category_name,
+                id: `${item.category_name}_${idx}`,
+                jump_id: groupGames[idx].jump_id,
+                headerRender: () => (
+                    <TabItem
+                        item={item as TabItemType}
+                        active={`${item.category_name}_${idx}` === active || (!active && idx === 0)}
+                    ></TabItem>
+                ),
+            };
+        });
+    }, [tabs, active, newButtonGroup, groupGames]);
+
+    const getTab = (id: string) => {
+        let result = tabData.find((item: any) => {
+            return item.id === id;
+        });
+        if (!result) {
+            result = tabData[0];
+        }
+        return result;
     };
 
-    const groupGames = tabs[0]?.category;
+    React.useEffect(() => {
+        initScroll();
+    }, []);
+
+    const getStickyContainerInfo = () => {
+        const dom = document.querySelector("#stickyContainer");
+        if (dom) {
+            stickyRef.current = dom.getBoundingClientRect().height;
+        }
+    };
+    const getContainerInfo = () => {
+        const dom = document.querySelector("#maincontainer");
+        if (dom) {
+            containerRef.current = dom.getBoundingClientRect().top;
+        }
+    };
+    const initScroll = () => {
+        const container = document.querySelector("#maincontainer");
+        if (!container) {
+            setTimeout(initScroll, 200);
+            return;
+        }
+        container.addEventListener("scroll", doScorll);
+    };
+
+    const doScorll = () => {
+        let target = null;
+        for (let i = 0; i < tabData.length; i++) {
+            const element = tabData[i];
+            const dom = document.querySelector(`#jump_${element.jump_id}`);
+            if (dom) {
+                const boundInfo = dom.getBoundingClientRect();
+                if (!stickyRef.current) {
+                    getStickyContainerInfo();
+                }
+                if (!containerRef.current) {
+                    getContainerInfo();
+                }
+                if (boundInfo.top < stickyRef.current + containerRef.current + 10) {
+                    target = element;
+                } else {
+                    break;
+                }
+            }
+        }
+        if (target) {
+            setActive(target.id);
+        }
+        requestAnimationFrame(doScorll);
+    };
+
+    const selectHandler = (id?: string) => {
+        if (!id) return;
+        const toTab = getTab(id);
+        const toDom = document.querySelector(`#jump_${toTab.jump_id}`);
+        const container = document.querySelector("#maincontainer");
+        if (!stickyRef.current) {
+            getStickyContainerInfo();
+        }
+        if (!containerRef.current) {
+            getContainerInfo();
+        }
+        if (toDom && container) {
+            const boundInfo = toDom.getBoundingClientRect();
+            const toScroll =
+                container.scrollTop + boundInfo.top - containerRef.current - stickyRef.current;
+            container.scrollTo({
+                top: toScroll,
+                behavior: "smooth",
+            });
+        }
+    };
 
     return (
         <>
-            <div className="homeTabsContainer sticky top-[0rem] z-[3] bg-[var(--primary1)] px-[.1rem] pb-[.05rem] pt-[.05rem]">
+            <div
+                className="homeTabsContainer sticky top-[0rem] z-[3] bg-[var(--primary1)] px-[.1rem] pb-[.05rem] pt-[.05rem]"
+                id="stickyContainer"
+            >
                 <CustomTabs
                     items={tabData as any}
                     activeKey={active}

src/components/Card/Card.tsx

@@ -47,6 +47,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
 
     const router = useRouter();
     const token = getToken();
+    // 点击检测弹窗
     const handler = (game: GameListRep) => {
         setVisible(true);
         brandRef.current = game;

src/components/Card/SwiperGroup.tsx

@@ -112,7 +112,7 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
     const iconClass = clsx(styles.mainLeftIcon, "pro-iconfont", `pro-${group.icon}`);
 
     return (
-        <div id={`#jump_${group.jump_id}`}>
+        <div id={`jump_${group.jump_id}`}>
             {visibleTitle && (
                 <div>
                     <div className={styles.mainTitle}>
@@ -149,8 +149,13 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                                     }}
                                 >
                                     {/* Todos */}
-                                    <div className="cursor-pointer bg-[#2b353f] px-[.02rem] py-[.02rem] text-[#788f97]">
-                                        todos
+                                    <div
+                                        className={clsx(
+                                            "cursor-pointer bg-[var(--main-background)] px-[.02rem] py-[.02rem] text-[var(--textColor1)]",
+                                            styles.btn
+                                        )}
+                                    >
+                                        Malas &gt;
                                     </div>
                                     {/* <div className={styles.marginRightCount}>
                                         <span>{group.to_tal}</span>

src/components/Card/style.module.scss

@@ -105,18 +105,18 @@
         display: flex;
         padding-right: 0.12rem;
         line-height: 1;
-        div {
-            padding: 0.05rem;
+        .btn {
+            padding: 0 0.1rem;
             display: flex;
-            height: 0.25rem;
+            height: 0.3rem;
             align-items: center;
             // background: #1a1a1a;
-            border-radius: 0.04rem;
+            border-radius: 0.15rem;
             justify-content: center;
             margin-left: 0.05rem;
             font-size: 0.12rem;
             font-weight: 700;
-            color: #b3b3b3;
+            color: var(--textColor1);
         }
 
         .marginRightCount {