fix: Sildebar

next.config.mjs

@@ -6,6 +6,7 @@ const withNextIntl = createNextIntlPlugin();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
+  transpilePackages: ['antd-mobile'],
     sassOptions: {
       prependData: `@import "./src/styles/variables.scss";`
     },

src/api/home.ts

@@ -129,3 +129,42 @@ export const getGamesApi = () => {
         data: {},
     });
 };
+
+/**
+ * @description
+ * entity.GameInfo
+ */
+export interface GameInfo {
+    game_url: string;
+}
+/**
+ * form.LoginGameReq
+ */
+export interface GameRequest {
+    /**
+     * 玩家渠道，pc/mobile
+     */
+    channel?: string;
+    /**
+     * 用于显示全画面(部份游戏提供此功能)
+     */
+    full_screen?: boolean;
+    /**
+     * 游戏列表ID
+     */
+    id?: number;
+    /**
+     * 语言，cn/en
+     */
+    language?: string;
+    /**
+     * 用于主页按钮和重新导向 URL (部份游戏提供此功能)
+     */
+    return_url?: string;
+}
+export const getGameDetailApi = (data: GameRequest) => {
+    return server.post<GameInfo>({
+        url: "/v1/api/front/game_info_by_id",
+        data,
+    });
+};

src/app/[locale]/_home/HomeActions.tsx

@@ -27,7 +27,11 @@ const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
     return (
         <div>
             {/*about*/}
-            <div className={"grid cursor-pointer grid-cols-3 text-center text-[0.12rem]"}>
+            <div
+                className={
+                    "grid cursor-pointer grid-cols-3 text-center text-[0.12rem]" + " text-[#fff]"
+                }
+            >
                 <div onClick={() => handler("1")}>{t("Sobre")}</div>
                 <div
                     onClick={() => handler("2")}
@@ -40,10 +44,10 @@ const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
             {/* service */}
             <div className="mt-[0.26rem] flex flex-col items-center text-[0.12rem]">
                 <div className={"flex"}>
-                    <div className="m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded bg-white">
+                    <div className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded">
                         <img src="https://9f.com/img/service.fde992c6.png" alt="" />
                     </div>
-                    <div className="m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded bg-white">
+                    <div className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded">
                         <img src="https://9f.com/img/persons.da1a04fe.png" alt="" />
                     </div>
                 </div>
@@ -106,7 +110,7 @@ const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
                 </div>
             </div>
             {/*support*/}
-            <div className={"mt-[0.3rem] flex items-center justify-around pb-[0.5rem]"}>
+            <div className={"mt-[0.3rem] flex items-center justify-around pb-[0.5rem] text-[#fff]"}>
                 <div
                     className={
                         "h-[0.45rem] w-[0.45rem] rounded bg-gradient-to-b from-[#ff9323]" +

src/app/[locale]/_home/HomeGames.tsx

@@ -32,7 +32,8 @@ const TabItem = ({ data }: { data: TabItemType[] }) => {
             <div
                 key={index}
                 className={
-                    "relative mr-[0.06rem] flex h-[0.3rem] flex-1 cursor-pointer items-center rounded-[0.05rem] bg-[#3a3a3a] px-[0.08rem] py-[0.03rem] text-[0.12rem]"
+                    "relative mr-[0.06rem] flex h-[0.3rem] flex-1 cursor-pointer text-[#fff]" +
+                    " items-center rounded-[0.05rem] bg-[#3a3a3a] px-[0.08rem] py-[0.03rem] text-[0.12rem]"
                 }
                 onClick={() => handler(item)}
             >
@@ -76,7 +77,7 @@ const Tabs: FC = () => {
 const Manufacturer = (props: { data: GameListRep[] }) => {
     const { data } = props;
     const elements = data.map((item, index) => {
-        return <img key={index} src={item.game_icon} alt="" />;
+        return <img key={index} className={"rounded-[0.05rem]"} src={item.game_icon} alt="" />;
     });
 
     return <div className={"grid grid-cols-4 gap-x-2"}>{elements}</div>;

src/app/[locale]/layout.tsx

@@ -30,7 +30,7 @@ export default async function LocaleLayout({
     const messages = await getMessages();
     return (
         <html lang={locale} suppressHydrationWarning>
-            <body className={clsx("bg-amber-50 font-sans", fontSans.variable)}>
+            <body className={clsx("bg-white font-sans", fontSans.variable)}>
                 <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
                     <NextIntlClientProvider messages={messages}>
                         <PageTransitionEffect>{children}</PageTransitionEffect>

src/app/globals.css

@@ -17,6 +17,8 @@
   --swiper-pagination-color: #fff;
   --swiper-pagination-bullet-active-bg: #fff;
   --swiper-pagination-bullet-inactive-color: hsla(0, 0%, 100%, .8);
+
+  --adm-color-text: #fff;
 }
 html, body {
     width: 100vw;
@@ -45,4 +47,7 @@ html {
 /* ant-design-ui */
 .adm-toast-mask .adm-toast-main-icon .adm-toast-icon svg {
   margin: 0 auto;
-}
+}
+.adm-input input{
+  color: #fff;
+}

src/components/Card/Card.tsx

@@ -1,20 +1,30 @@
 "use client";
-import { EntityGameListRep } from "@/api/home";
+import { GameListRep, getGameDetailApi } from "@/api/home";
 import { Button, Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { FC, PropsWithChildren, ReactNode, useRef } from "react";
 import styles from "./style.module.scss";
 export interface CardProps {
-    item?: EntityGameListRep;
-    render?: (value: EntityGameListRep) => ReactNode;
+    item?: GameListRep;
+    render?: (value: GameListRep) => ReactNode;
 }
 const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     const { render, item } = props;
     const { isOpen, onOpen, onOpenChange } = useDisclosure();
     const app: HTMLElement = document.querySelector("#app")!;
     const t = useTranslations("Game");
-    const handler = (game: EntityGameListRep) => {
+    const urlRef = useRef<string>("");
+    const handler = (game: GameListRep) => {
         onOpen();
+        const params = {
+            id: game.id,
+        };
+        getGameDetailApi(params).then((res) => {
+            urlRef.current = res.data.game_url;
+        });
+    };
+    const playGameHandler = () => {
+        window.open(urlRef.current);
     };
     return (
         <>
@@ -52,6 +62,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
 
                                         <div className={"flex w-[2.2rem] justify-around"}>
                                             <Button
+                                                onClick={playGameHandler}
                                                 className={
                                                     "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
                                                     " bg-[#3a3a3a]" +
@@ -61,12 +72,8 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                                                 {t("demo")}
                                             </Button>
                                             <Button
-                                                className={
-                                                    "h-[0.39rem] w-[0.89rem] text-[0.15rem]" +
-                                                    " rounded-[0.05rem]" +
-                                                    " bg-[#009d80]" +
-                                                    " font-bold"
-                                                }
+                                                onClick={playGameHandler}
+                                                className={`h-[0.39rem] w-[0.89rem] rounded-[0.05rem] bg-[#009d80] text-[0.15rem] font-bold`}
                                             >
                                                 {t("join")}
                                             </Button>

src/components/Card/GroupCard.tsx

@@ -1,9 +1,9 @@
-import { EntityGameListRep } from "@/api/home";
+import { GameListRep } from "@/api/home";
 import clsx from "clsx";
 import { FC } from "react";
 import Card, { CardProps } from "./Card";
 export interface GroupProps extends CardProps {
-    data?: EntityGameListRep[];
+    data?: GameListRep[];
     col?: number;
     row?: number;
     gapX?: number;

src/components/Header/index.tsx

@@ -48,5 +48,4 @@ const Header: FC<HeaderProps> = (props) => {
         </div>
     );
 };
-
 export default Header;

src/components/Header/style.module.scss

@@ -93,6 +93,9 @@
         font-size: .15rem;
         display: flex;
         align-items: center;
+        a {
+          color: #fff;
+        }
         .rightActive{
           background: linear-gradient(180deg, #ff9323, #ff6a01);
           padding: .04rem .05rem;

src/components/Layout/Sidebar.tsx

@@ -1,5 +1,6 @@
 import Box from "@/components/Box";
 import { Tab, Tabs } from "@nextui-org/react";
+import { Input } from "antd-mobile";
 import { FC, PropsWithChildren } from "react";
 interface Props {}
 
@@ -70,23 +71,68 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
             </div>
 
             {/*  gift */}
-            <section className={"my-[0.11rem] flex items-center text-[0.15rem]"}>
+            <section className={"my-[0.11rem] flex items-center text-[0.15rem] text-[#fff]"}>
                 <span
                     className={"iconfont icon-liwulipinjiangpin mr-[0.0694rem] text-[0.16rem]"}
                 ></span>
                 <span> Promoções </span>
             </section>
             {/*  Esportes */}
-            <section className={"flex items-center rounded-[3px] bg-[#3a3a3a] p-[0.08rem]"}>
+            <section
+                className={"flex items-center rounded-[3px] bg-[#3a3a3a] p-[0.08rem] text-[#fff]"}
+            >
                 <i className={"iconfont icon-tiyu mr-[0.0694rem] text-[0.15rem]"}></i>
                 <div className={"flex-1"}>Esportes</div>
                 <i className={"iconfont icon-xiangyou1 text-[0.15rem]"}></i>
             </section>
             {/*  code */}
-            <section className={"mt-[0.11rem]"}>Have a promo code?</section>
-            <section className={"w-1/1 flex justify-between bg-[#3a3a3a] p-[3px]"}>
-                <input className="flex-1 border-0 bg-[#3a3a3a] outline" />
-                <span>Redeem</span>
+            <section className={"mt-[0.11rem] text-[#fff]"}>Have a promo code?</section>
+            <section className={"w-1/1 mt-[0.11rem] flex"}>
+                <div className={"flex-1 bg-[#3a3a3a] p-[0.0694rem]" + " text-[#fff]"}>
+                    <Input placeholder="Insira o código" clearable className={"text-[#fff]"} />
+                </div>
+                <button
+                    className={`w-[0.6rem] bg-gradient-to-b from-[#a28362] to-[#986847] text-[0.12rem] text-[#fff]`}
+                >
+                    Redeem
+                </button>
+            </section>
+
+            <section className={"mt-[0.11rem] text-[#fff]"}>Junte-se à nossa comunidade</section>
+
+            <section className={"mt-[0.11rem] text-[#fff]"}>
+                <div className={"flex"}>
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/telegram.9b8c9ead.png"
+                        alt=""
+                    />
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/instagram.9a6f2403.png"
+                        alt=""
+                    />
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/kwai.b9d0c480.png"
+                        alt=""
+                    />
+                </div>
+            </section>
+
+            <section className={"mt-[0.11rem] text-[#7d7d7d]"}>
+                <div className={"flex items-center p-[0.08rem]"}>
+                    <i className={"iconfont icon-bangzhu mr-[0.0694rem] text-[0.15rem]"}></i>
+                    <div className={"flex-1"}> Visitar o Centro de Ajuda</div>
+                </div>
+                <div className={"flex items-center p-[0.08rem]"}>
+                    <i className={"iconfont icon-duanxinguanli mr-[0.0694rem] text-[0.15rem]"}></i>
+                    <div className={"flex-1"}> Relatar Problema </div>
+                </div>
+                <div className={"flex items-center p-[0.08rem]"}>
+                    <i className={"iconfont icon-fenxiang mr-[0.0694rem] text-[0.15rem]"}></i>
+                    <div className={"flex-1"}> Adicionar à Tela inicial </div>
+                </div>
             </section>
         </Box>
     );