feat: 修改

src/api/home.ts

@@ -147,6 +147,10 @@ export interface GameListRep {
     category_name?: string;
 
     coin_types?: number;
+
+    isCustom?: boolean;
+
+    toDo?: () => void;
 }
 
 /**

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

@@ -4,7 +4,6 @@ import SwiperGroup from "@/components/Card/SwiperGroup";
 import Manufacturer from "@/components/Manufacturer";
 import { useRouter } from "@/i18n/routing";
 import React from "react";
-import HomeSearch from "./HomeSearch";
 
 interface Props {
     groupGames: Category[];
@@ -55,9 +54,9 @@ const HomeGames = (props: Props) => {
                     <Manufacturer data={providers}></Manufacturer>
                 </React.Fragment>
             )}
-            <div className="mb-[.2rem] px-[.12rem]">
+            {/* <div className="mb-[.2rem] px-[.12rem]">
                 <HomeSearch></HomeSearch>
-            </div>
+            </div> */}
 
             {groupGames.map((group, index) => {
                 if (group.type !== 2) {

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

@@ -34,7 +34,7 @@ const HomeSwiper: FC<Props> = (props) => {
                                 width={"100%"}
                                 height={"1.86rem"}
                                 lazy
-                                // className="rounded-[0.1rem] border-[0.01rem] border-[#47aaae]"9
+                                className="rounded-[0.1rem]"
                                 src={banner.content}
                                 // style={{ height: "1.86rem", width: "100%" }}
                                 alt={"banner"}

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

@@ -71,7 +71,7 @@ const Layout: FC<PropsWithChildren<Props>> = async (props) => {
             {clientWidget}
             <DownloadSection />
             <Header></Header>
-            <main id="maincontainer" className={"main-header"}>
+            <main id="maincontainer" className={"main-header pb-[.6rem]"}>
                 {/*弹窗*/}
                 <Suspense fallback={<Placeholder />}>{popupWidget}</Suspense>
                 <Box>

src/app/globals.scss

@@ -88,13 +88,13 @@ body {
     overflow: scroll;
 }
 .main-footer {
-    height: calc(100% - $-footer-height);
+    height: 100%; // calc(100% - $-footer-height);
     overflow-y: scroll;
 }
 .main-header {
     height: calc(100% - $-header-height);
     overflow-y: scroll;
-  overflow-x: hidden;
+    overflow-x: hidden;
 }
 
 input {

src/components/Card/Card.tsx

@@ -15,6 +15,8 @@ export interface CardProps {
     item?: GameListRep;
     render?: (value: GameListRep) => ReactNode;
     groupType?: Category["bet_type"];
+    isShowOnline?: boolean;
+    isShowFavorite?: boolean;
 }
 
 const Card: FC<PropsWithChildren<CardProps>> = (props) => {
@@ -143,10 +145,12 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                         height={"1.54rem"}
                         className={"h-[100%] w-[100%]"}
                     />
-                    <div className={styles.cardOnline}>2323 On-Line</div>
-                    <div className={styles.favorite}>
-                        <i className="iconfont icon-ertong"></i>
-                    </div>
+                    {props.isShowOnline && <div className={styles.cardOnline}>2323 On-Line</div>}
+                    {props.isShowFavorite && (
+                        <div className={styles.favorite}>
+                            <i className="iconfont icon-ertong"></i>
+                        </div>
+                    )}
                 </div>
             )}
 

src/components/Card/GroupCard.tsx

@@ -17,7 +17,21 @@ const GroupCard: FC<GroupProps> = (props) => {
     return (
         // <div className={"flex flex-wrap justify-between gap-y-4"}>
         <div className={cls}>
-            {data?.map((item, index) => <Card key={index} item={item} {...other} />)}
+            {data?.map((item, index) => {
+                if (item.isCustom) {
+                    return (
+                        <div
+                            key={index}
+                            onClick={() => {
+                                item.toDo && item.toDo();
+                            }}
+                        >
+                            <img src="/home/placehold.png" alt="" />
+                        </div>
+                    );
+                }
+                return <Card key={index} item={item} {...other} />;
+            })}
         </div>
     );
 };

src/components/Card/SwiperGroup.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Box from "@/components/Box";
-import { FC, PropsWithChildren, ReactNode, useRef } from "react";
+import { FC, PropsWithChildren, ReactNode, useMemo, useRef } from "react";
 
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 
@@ -51,23 +51,58 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
         "pt-[0.08rem]"
         // "pb-[0.11rem]",
     );
-    if (!group.game_list) return;
-    const lineNum = page * group.line_num;
-
-    const gameList = group.game_list.slice(0, group.line_config_amount);
-    const swiperData = Array(gameList.length ? Math.ceil(gameList.length / lineNum) : 0)
-        .fill(0)
-        .map((_, index) => {
-            const showData = gameList
-                .slice(index * lineNum, index * lineNum + lineNum)
-                .map((subItem) => ({ ...subItem, category_name: group.category_name }));
-
-            return {
-                key: index,
-                data: showData,
-            };
-        });
-    console.log(swiperData);
+    const swiperData = useMemo(() => {
+        const max = page * group.line_num;
+        let gameList = group.game_list;
+        if (group.game_list.length >= max) {
+            gameList = group.game_list.slice(0, max - 1);
+            gameList.push({
+                isCustom: true,
+                category_name: group.category_name,
+                id: 0,
+                game_icon: "",
+                game_id: "",
+                game_name: "",
+                game_name_cn: "",
+                game_type: "",
+                provider: "",
+                release_date: "",
+                toDo: () => {
+                    todoHandler && todoHandler(group);
+                },
+            });
+        }
+
+        return [
+            {
+                index: 0,
+                key: group.category_name,
+                data: gameList,
+            },
+        ];
+    }, [group, page]);
+    if (!swiperData?.length) return;
+
+    // const lineNum = page * group.line_num;
+
+    // const gameList = group.game_list.slice(0, group.line_config_amount);
+    // const swiperData = Array(gameList.length ? Math.ceil(gameList.length / lineNum) : 0)
+    //     .fill(0)
+    //     .map((_, index) => {
+    //         const showData = gameList
+    //             .slice(index * lineNum, index * lineNum + lineNum)
+    //             .map((subItem) => ({ ...subItem, category_name: group.category_name }));
+    //         console.log(150, 2 + index * page);
+    //         if (index + 1 === group.line_num && group.game_list.length >= gameList.length) {
+    //             showData.splice(2 + index * page, 1, { isCustom: true });
+    //         }
+
+    //         return {
+    //             key: index,
+    //             data: showData,
+    //         };
+    //     });
+    // console.log(150, swiperData);
     const prev = () => {
         swiperRef.current!.slidePrev();
     };
@@ -104,10 +139,12 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                             {visibleTodos && (
                                 <div onClick={() => todoHandler && todoHandler(group)}>
                                     {/* Todos */}
-                                    <div className="text-[#d76bff]">Todo</div>
-                                    <div className={styles.marginRightCount}>
-                                        <span>{group.to_tal}</span>
+                                    <div className="bg-[#2b353f] px-[.02rem] py-[.02rem] text-[#788f97]">
+                                        todos
                                     </div>
+                                    {/* <div className={styles.marginRightCount}>
+                                        <span>{group.to_tal}</span>
+                                    </div> */}
                                 </div>
                             )}
 

src/components/Footer/index.tsx

@@ -26,12 +26,12 @@ export interface FooterProps {
 const whitRouter = ["/deposit", "/profile"];
 const tabList = [
     {
-        iconSpanName: "icon-zhuye",
+        iconSpanName: "icon-ic-shouye",
         label: "start",
         path: "/",
     },
     {
-        iconSpanName: "icon-qianbao3",
+        iconSpanName: "icon-qianbao11",
         label: "deposit",
         path: "/deposit",
     },
@@ -41,12 +41,12 @@ const tabList = [
         path: "/affiliate/summary",
     },
     {
-        iconSpanName: "icon-lihe",
+        iconSpanName: "icon-liwu",
         label: "promocoes",
         path: "/promo",
     },
     {
-        iconSpanName: "icon-yonghu",
+        iconSpanName: "icon-gerenzhongxin",
         label: "profile",
         path: "/profile",
     },
@@ -157,12 +157,12 @@ const Footer: FC = () => {
                             >
                                 <div className="icon-box">
                                     {index == 2 ? (
-                                        <div className="relative top-[-.08rem] flex h-[.64rem] w-[.64rem] items-center justify-center overflow-hidden rounded-[50%]">
+                                        <div className="relative top-[-.04rem] flex h-[.64rem] w-[.64rem] items-center justify-center overflow-hidden">
                                             {/* <Image src="/home/game.png" width={84} height={84} alt='middle'></Image> */}
                                             <img
-                                                src={"/home/game.png"}
+                                                src={"/home/game2.png"}
                                                 style={{
-                                                    width: ".5rem",
+                                                    width: ".6rem",
                                                     maxWidth: "1000%",
                                                     position: "relative",
                                                 }}

src/components/Footer/style.scss

@@ -1,3 +1,10 @@
+.footer-placeholder {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+}
 .footer-box {
     // background-color: #292929;
     display: flex;
@@ -5,21 +12,21 @@
     //max-width: $-body-width;
     width: 100%;
     height: $-footer-height;
-    background-image: url("/home/tabbar_12.png");
+    background-image: url("/home/tabbar_14.png");
     background-size: 100% 100%;
     position: relative;
-    &::before {
-        content: "";
-        position: absolute;
-        bottom: 0.6rem;
-        left: 0;
-        right: 0;
-        background-image: url("/home/tabbar_13.png");
-        background-size: 100% 100%;
-        height: 0.6rem;
-        z-index: 1;
-        pointer-events: none;
-    }
+    // &::before {
+    //     content: "";
+    //     position: absolute;
+    //     bottom: 0.6rem;
+    //     left: 0;
+    //     right: 0;
+    //     background-image: url("/home/tabbar_13.png");
+    //     background-size: 100% 100%;
+    //     height: 0.6rem;
+    //     z-index: 1;
+    //     pointer-events: none;
+    // }
     .footer-item {
         width: 100%;
         height: 100%;
@@ -42,12 +49,12 @@
                     position: relative;
 
                     span {
-                        color: #1cfffc;
+                        color: #12cf63;
                     }
                 }
 
                 label {
-                    color: #1cfffc;
+                    color: #12cf63;
                 }
             }
 
@@ -61,7 +68,7 @@
 
                 span {
                     font-size: 0.2rem;
-                    color: #fff;
+                    color: #505d62;
                 }
 
                 .icon-afiliado {
@@ -97,8 +104,8 @@
             }
 
             label {
-                font-size: 0.13rem;
-                color: #fff;
+                font-size: 0.11rem;
+                color: #505d62;
                 font-weight: 500;
             }
         }

src/components/Manufacturer/index.tsx

@@ -45,7 +45,7 @@ const HomeProvider: React.FC<Props> = ({ data }) => {
         if (renderData.length === 5) return 3;
         return renderData.length % 2 === 1 ? renderData.length : renderData.length - 1;
     }, [renderData]);
-    console.log(slidesPerView);
+
     return (
         <div className={styles.container}>
             <Swiper
@@ -53,11 +53,12 @@ const HomeProvider: React.FC<Props> = ({ data }) => {
                 onSwiper={(swiper) => {
                     swiperRef.current = swiper;
                 }}
-                centeredSlides={true}
-                loop={true} // 仅在数据量足够时启用 loop
+                // centeredSlides={true}
+                loop={false} // 仅在数据量足够时启用 loop
                 onSlideChange={(swiper) => {
                     setActIdx(swiper.activeIndex);
                 }}
+                spaceBetween={6}
                 pagination={{}}
             >
                 {renderData?.map((item: any, idx) => (
@@ -65,25 +66,25 @@ const HomeProvider: React.FC<Props> = ({ data }) => {
                         key={item.id}
                         className={clsx(styles.manufactureritem)}
                         onClick={() => todoHandler(item)}
-                        style={{
-                            width: "100px", // 确保每个项目都有相同的宽度
-                        }}
+                        // style={{
+                        //     width: "100px", // 确保每个项目都有相同的宽度
+                        // }}
                     >
-                        <img src={item.game_icon} className={styles.providerIcon}></img>
-                        {/* <div className={clsx(styles.providerText, "text-[12px]")}>
-                            {item.provider}
-                        </div> */}
+                        <div className="flex h-[100%] flex-col items-center justify-center">
+                            <img src={item.game_icon} className={styles.providerIcon} alt=""></img>
+                            <div className="mt-[.06rem] text-[.1rem]">{item.provider}</div>
+                        </div>
                     </SwiperSlide>
                 ))}
             </Swiper>
-            <i
+            {/* <i
                 className={clsx("iconfont icon-xiangyou2", styles.left)}
                 onClick={() => changeSwiper(-1)}
             ></i>
             <i
                 className={clsx("iconfont icon-xiangyou2", styles.right)}
                 onClick={() => changeSwiper(1)}
-            ></i>
+            ></i> */}
         </div>
     );
 };

src/components/Manufacturer/style.module.scss

@@ -1,6 +1,6 @@
 .container {
-    padding: 0rem 0.24rem 0.24rem 0.24rem;
-    background-image: url("/home/provid_container_bg.png");
+    padding: 0rem 0.15rem 0.2rem 0.15rem;
+    // background-image: url("/home/provid_container_bg.png");
     background-size: 100% 100%;
     position: relative;
     .left {
@@ -23,13 +23,15 @@
     }
 }
 .manufactureritem {
-    background-image: url("/home/provid_bg.png");
+    // background-image: url("/home/provid_bg.png");
     background-size: 100% 100%;
     height: 0.8rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
+    background-color: #2b353f;
+    border-radius: 0.06rem;
     .providerIcon {
         width: 0.5rem;
         position: relative;
@@ -39,17 +41,17 @@
         position: relative;
         top: -0.08rem;
     }
-    &:global(.swiper-slide-active) {
-        background-image: url("/home/provid_bg_active.png");
-        position: relative;
-        top: -0.04rem;
-        .providerIcon {
-            top: 0.04rem;
-        }
-        .providerText {
-            top: -0.04rem;
-        }
-    }
+    // &:global(.swiper-slide-active) {
+    //     background-image: url("/home/provid_bg_active.png");
+    //     position: relative;
+    //     top: -0.04rem;
+    //     .providerIcon {
+    //         top: 0.04rem;
+    //     }
+    //     .providerText {
+    //         top: -0.04rem;
+    //     }
+    // }
 }
 
 @keyframes transformR {

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1744720863888') format('woff2'),
-       url('iconfont.woff?t=1744720863888') format('woff'),
-       url('iconfont.ttf?t=1744720863888') format('truetype');
+  src: url('iconfont.woff2?t=1749449040165') format('woff2'),
+       url('iconfont.woff?t=1749449040165') format('woff'),
+       url('iconfont.ttf?t=1749449040165') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,106 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhouka:before {
+  content: "\e69b";
+}
+
+.icon-yueka:before {
+  content: "\e69a";
+}
+
+.icon-zhekou:before {
+  content: "\e855";
+}
+
+.icon-meiyuan2:before {
+  content: "\e734";
+}
+
+.icon-xitongtongzhi:before {
+  content: "\e6a7";
+}
+
+.icon-youjian:before {
+  content: "\e69c";
+}
+
+.icon-a-zhucaidan_huaban1:before {
+  content: "\e9ff";
+}
+
+.icon-tuichu2:before {
+  content: "\e681";
+}
+
+.icon-xiugaimima:before {
+  content: "\e6fa";
+}
+
+.icon-meiyuanzhanghuyue:before {
+  content: "\e682";
+}
+
+.icon-zhuishou-meiyuan-shi:before {
+  content: "\e697";
+}
+
+.icon-kuaishou:before {
+  content: "\e698";
+}
+
+.icon-liwu:before {
+  content: "\e696";
+}
+
+.icon-zhankai1:before {
+  content: "\e861";
+}
+
+.icon-mofang2:before {
+  content: "\e680";
+}
+
+.icon-qianbao11:before {
+  content: "\e666";
+}
+
+.icon-ic-shouye:before {
+  content: "\e67e";
+}
+
+.icon-gerenzhongxin:before {
+  content: "\e67f";
+}
+
+.icon-wenhao1:before {
+  content: "\e699";
+}
+
+.icon-bianji:before {
+  content: "\ec11";
+}
+
+.icon-tuite1:before {
+  content: "\e67a";
+}
+
+.icon-xiaoxi:before {
+  content: "\e67b";
+}
+
+.icon-yonghu1:before {
+  content: "\e67c";
+}
+
+.icon-fuzhi1:before {
+  content: "\e67d";
+}
+
+.icon-phone-fill:before {
+  content: "\e780";
+}
+
 .icon-zhuyi:before {
   content: "\e662";
 }