Merge branch 'dev' into feature-chaojie

messages/br.json

@@ -10,5 +10,9 @@
     "login": "Login",
     "register": "Cadastre-se",
     "locale": "Preferência de Localização"
+  },
+  "Game": {
+    "demo":"Demo",
+    "join":"JUGUE"
   }
 }

src/api/home.ts

@@ -4,35 +4,35 @@ export interface EntityGameListRep {
     /**
      * 游戏ICON
      */
-    game_icon?: string;
+    game_icon: string;
     /**
      * 游戏ID
      */
-    game_id?: string;
+    game_id: string;
     /**
      * 游戏名称
      */
-    game_name?: string;
+    game_name: string;
     /**
      * 游戏名称中文
      */
-    game_name_cn?: string;
+    game_name_cn: string;
     /**
      * 游戏类型
      */
-    game_type?: string;
+    game_type: string;
     /**
      * id
      */
-    id?: number;
+    id: number;
     /**
      * 厂商名字 besoft 等等
      */
-    provider?: string;
+    provider: string;
     /**
      * 时间
      */
-    release_date?: string;
+    release_date: string;
 }
 
 export interface GroupType {

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

@@ -1,30 +1,16 @@
 "use client";
 import { getGamesApi, GroupType } from "@/api/home";
-import { getUserApi } from "@/api/test";
 import { SwiperGroup } from "@/components/Card";
 import { FC, PropsWithChildren, useEffect, useState } from "react";
 import "swiper/css";
 interface Props {}
-const urls = [
-    "https://images.hibigwin.com/9f/202405/mqletkfLwGeZkSH.jpg",
-    "https://images.hibigwin.com/9f/202402/jLkCmSkItvcqlid.jpg",
-    "https://images.hibigwin.com/9f/202404/DDnZEhXKutDVIYn.jpg",
-    "https://images.hibigwin.com/9f/202406/wOBQjusbGUZkBMA.jpg",
-    "https://images.hibigwin.com/9f/202402/jLkCmSkItvcqlid.jpg",
-    "https://images.hibigwin.com/9f/202405/mqletkfLwGeZkSH.jpg",
-    "https://images.hibigwin.com/9f/202407/LPpEiiltiXwcdYz.jpg",
-    "https://images.hibigwin.com/9f/202406/veFfaahiTGAyDpy.jpg",
-];
+
 const HomeSwiper: FC<PropsWithChildren<Props>> = (props) => {
     const [groupGames, setGroupGames] = useState<GroupType[]>([]);
     useEffect(() => {
         getGamesApi().then((res) => {
             setGroupGames(res.data);
         });
-
-        getUserApi().then((res) => {
-            console.log(`🎯🎯🎯🎯🎯-> in HomeGames.tsx on 25`, res);
-        });
     }, []);
     return (
         <div>

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

@@ -1,9 +1,6 @@
 "use client";
 import { FC, PropsWithChildren } from "react";
-import "swiper/css";
-import "swiper/css/autoplay";
-import "swiper/css/pagination";
-import "swiper/css/virtual";
+
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 interface Props {}

src/app/[locale]/affiliate/faq/page.css

@@ -69,7 +69,7 @@
     width: .4rem;
     text-align: right;
 }
-.headerBack .right .icon-shouye1 {
+.headerBack .right .icon-home_line {
     display: inline-block;
     font-size: .24rem;
     color: #fff;
@@ -340,4 +340,25 @@ ul.rules li {
 }
 .referralFaq .content div p {
     margin: .04rem 0;
+}
+.van-tab {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 4px;
+    color: #646566;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }

src/app/[locale]/affiliate/faq/page.tsx

@@ -1,40 +1,57 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import { useRouter } from "@/i18n";
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
-                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        <span className="right" onClick={()=>goPage('home')}>
+                            <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('referrals')}>
                                     <span className="van-tab__text">REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/payments/page.css

@@ -69,7 +69,7 @@
     width: .4rem;
     text-align: right;
 }
-.headerBack .right .icon-shouye1 {
+.headerBack .right .icon-home_line {
     display: inline-block;
     font-size: .24rem;
     color: #fff;
@@ -271,4 +271,25 @@ body .van-list__finished-text {
 .van-list__placeholder {
     height: 0;
     pointer-events: none;
+}
+.van-tab {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 4px;
+    color: #646566;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }

src/app/[locale]/affiliate/payments/page.tsx

@@ -1,40 +1,57 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import { useRouter } from "@/i18n";
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
-                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        <span className="right" onClick={()=>goPage('home')}>
+                            <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('referrals')}>
                                     <span className="van-tab__text">REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/referrals/page.css

@@ -69,7 +69,7 @@
     width: .4rem;
     text-align: right;
 }
-.headerBack .right .icon-shouye1 {
+.headerBack .right .icon-home_line {
     display: inline-block;
     font-size: .24rem;
     color: #fff;
@@ -339,4 +339,25 @@ body .van-list__finished-text {
     font-family: SWISSC-BT;
     font-size: .18rem;
     color: #000;
+}
+.van-tab {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 4px;
+    color: #646566;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }

src/app/[locale]/affiliate/referrals/page.tsx

@@ -1,40 +1,58 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import { useRouter } from "@/i18n";
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
+
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
-                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        <span className="right" onClick={()=>goPage('home')}>
+                            <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('referrals')}>
                                     <span className="van-tab__text">REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/report/page.css

@@ -69,7 +69,7 @@
     width: .4rem;
     text-align: right;
 }
-.headerBack .right .icon-shouye1 {
+.headerBack .right .icon-home_line {
     display: inline-block;
     font-size: .24rem;
     color: #fff;
@@ -271,4 +271,25 @@ body .van-list__finished-text {
 .van-list__placeholder {
     height: 0;
     pointer-events: none;
+}
+.van-tab {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 4px;
+    color: #646566;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }

src/app/[locale]/affiliate/report/page.tsx

@@ -1,40 +1,57 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import {useRouter} from '@/i18n'
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
-                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        <span className="right" onClick={()=>goPage('home')}>
+                            <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab">
-                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                <div className="van-tab" onClick={()=>goPage('referrals')}>
+                                    <span className="van-tab__text" >REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/summary/page.css

@@ -572,7 +572,7 @@ ul.rules li {
     width: .4rem;
     cursor: pointer;
 }
-.headerBack .right .icon-shouye1{
+.headerBack .right .icon-company_nav_icon_home{
     display: inline-block;
     font-size: .24rem;
     color: #fff;
@@ -591,7 +591,7 @@ ul.rules li {
     color: #40dba9;
     font-size: .1rem;
 }
-.summary .content .wallet .tip .icon-dengpaobeifen {
+.summary .content .wallet .tip .icon-tishi1 {
     font-size: .12rem;
     margin-right: .02rem;
     color: #009d80;

src/app/[locale]/affiliate/summary/page.tsx

@@ -1,44 +1,71 @@
-import { FC, PropsWithChildren } from "react";
+'use client'
+import { FC, PropsWithChildren, useRef, useState } from "react";
 import './page.css'
+import { useRouter } from "@/i18n"
 
 interface Props { }
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
-    // function handleSlide(e:any):void{
-    //     const startX = e.clientX - sliderRef.current.offsetX
-    // }
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            // console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
+    const sliderRef = useRef<HTMLDivElement>(null)
+    const [num,setNum] = useState(100)
+    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
+        if(sliderRef.current){
+            const startX = sliderRef.current.getBoundingClientRect().x
+            const x = e.clientX - startX
+            const xRem = x/(144*0.6)
+            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
+            setNum(intNum)
+            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
+            sliderRef.current.style.width = scale
+        }
+    }
     return (
             <div className="vux-drawer">
                 <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                     <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
                         <div className="headerBack">
-                            <div className="left">
+                            <div className="left" onClick={()=>goPage()}>
                                 <span className="iconfont icon-xiangzuo1"/>
                             </div>
                             <div className="title">
                                 Afiliado
                                 <span> - Ganhe R$ 10.000 por dia</span>
                             </div>
-                            <div className="right">
-                                <span className="iconfont icon-shouye1 router-link-active"/>
+                            <div className="right" onClick={()=>goPage('home')}>
+                                <span className="iconfont icon-company_nav_icon_home router-link-active"/>
                             </div>
                         </div>
                         <div className="tabs alginLeft van-tabs van-tabs--line">
                             <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                                 <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true">
+                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('summary')}>
                                         <span className="van-tab__text">PAINEL</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('referrals')}>
                                         <span className="van-tab__text">REFERÊNCIAS</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('report')}>
                                         <span className="van-tab__text">RELATÓRIO</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('payments')}>
                                         <span className="van-tab__text">PAGAMENTOS</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('faq')}>
                                         <span className="van-tab__text">FAQ</span>
                                     </div>
                                     <div role="tab" className="van-tab">
@@ -151,7 +178,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                             <div className="wallet">
                                                 <div className="btn"> TRANSFERIR PARA A CARTEIRA </div>
                                                 <div className="tip">
-                                                    <span className="iconfont icon-dengpaobeifen"></span>
+                                                    <span className="iconfont icon-tishi1"></span>
                                                     Valor mínimo de transferência de  10 BRL
                                                 </div>
                                             </div>
@@ -226,7 +253,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div className="title">
                                         <div>
                                             Regras de recompensas por comissão‰ 
-                                            <span className="iconfont icon-wenhao"></span>
+                                            <span className="iconfont icon-bangzhu"></span>
                                         </div>
                                     </div>
                                     <div className="hint">
@@ -236,13 +263,13 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                         <div className="imgContent">
                                             <img src="/img/cash.png" alt="" />
                                             <div>
-                                                Número de indicações > 100
+                                                Número de indicações > {num}
                                                 <br />
-                                                Comissão > R$ 5,000 todo mês!
+                                                Comissão > R$ {num*50} todo mês!
                                             </div>
-                                            <div className="slider van-slider" style={{height: "0.02rem"}}>
-                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}}>
-                                                    <div role="slider" className="van-slider__button-wrapper">
+                                            <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
+                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}} ref={sliderRef}>
+                                                    <div role="slider" className="van-slider__button-wrapper" >
                                                         <div className="img"></div>
                                                     </div>
                                                 </div>

src/app/[locale]/page.tsx

@@ -11,13 +11,13 @@ const App: FC<LocalPropsWithChildren> = (props) => {
     const t = useTranslations("global");
     return (
         <Layout>
-            <>
+            <div>
                 <Box>
                     <HomeSwiper></HomeSwiper>
                     <HomeCard></HomeCard>
                 </Box>
                 <HomeGames />
-            </>
+            </div>
         </Layout>
     );
 };

src/app/globals.css

@@ -3,6 +3,13 @@
 @tailwind utilities;
 @import "@/styles/iconfont/iconfont.css";
 
+/* swiper */
+@import "swiper/css";
+@import "swiper/css/autoplay";
+@import "swiper/css/pagination";
+@import "swiper/css/virtual";
+
+
 :root{
   --swiper-pagination-bullet-width: 0.23rem;
   --swiper-pagination-bullet-height: 0.05rem;
@@ -31,4 +38,5 @@ html {
     height: auto;
     margin: 0 auto;
     font-size: 0.14rem;
+    position: relative;
 }

src/components/Card/Card.tsx

@@ -1,17 +1,84 @@
+"use client";
+import { EntityGameListRep } 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 styles from "./style.module.scss";
 export interface CardProps {
-    url?: string;
-    alt?: string;
-    render?: () => ReactNode;
+    item?: EntityGameListRep;
+    render?: (value: EntityGameListRep) => ReactNode;
 }
-
 const Card: FC<PropsWithChildren<CardProps>> = (props) => {
-    const { render, url, alt } = props;
+    const { render, item } = props;
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+    const app: HTMLElement = document.querySelector("#app")!;
+    const t = useTranslations("Game");
+    const handler = (game: EntityGameListRep) => {
+        onOpen();
+    };
     return (
-        <div className={styles.cardWrap}>
-            {render ? render() : <img src={url} alt={alt} className={"h-1/1"} />}
-        </div>
+        <>
+            <div className={styles.cardWrap} onClick={() => handler(item!)}>
+                {render ? (
+                    render(item!)
+                ) : (
+                    <img src={item?.game_icon} alt={item?.game_name_cn} className={"h-1/1"} />
+                )}
+            </div>
+            <Modal
+                isOpen={isOpen}
+                portalContainer={app}
+                placement={"bottom"}
+                onOpenChange={onOpenChange}
+                classNames={{
+                    header: "px-0 pb-0 ",
+                    wrapper: "w-[100vw]  m-auto",
+                    closeButton: "text-[20px] top-[0rem] right-0 text-[#fff] ",
+                    backdrop: "absolute top-0 left-0 sm:my-0 ",
+                    base: "my-0 my-0 sm:mx-[0] mx-0 sm:my-0 max-w-[4.02rem]  ",
+                    body: "py-[12px]",
+                }}
+            >
+                <ModalContent>
+                    {(onClose) => (
+                        <>
+                            <ModalBody className={"w-[4rem] text-[0.1111rem]"}>
+                                <div className={"w-1/1 flex flex-1"}>
+                                    <div className={styles.cardWrap}>
+                                        <img src={item?.game_icon} alt={item?.game_name_cn} />
+                                    </div>
+                                    <div className={styles.cardWrapGmeInfo}>
+                                        <p className={"h-[0.6rem]"}>{item?.game_name_cn}</p>
+
+                                        <div className={"flex w-[2.2rem] justify-around"}>
+                                            <Button
+                                                className={
+                                                    "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
+                                                    " bg-[#3a3a3a]" +
+                                                    " font-bold"
+                                                }
+                                            >
+                                                {t("demo")}
+                                            </Button>
+                                            <Button
+                                                className={
+                                                    "h-[0.39rem] w-[0.89rem] text-[0.15rem]" +
+                                                    " rounded-[0.05rem]" +
+                                                    " bg-[#009d80]" +
+                                                    " font-bold"
+                                                }
+                                            >
+                                                {t("join")}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </ModalBody>
+                        </>
+                    )}
+                </ModalContent>
+            </Modal>
+        </>
     );
 };
 

src/components/Card/GroupCard.tsx

@@ -19,7 +19,7 @@ const GroupCard: FC<GroupProps> = (props) => {
     );
     return (
         <div className={"flex flex-wrap justify-between gap-y-4"}>
-            {data?.map((item, index) => <Card key={index} url={item.game_icon} {...other} />)}
+            {data?.map((item, index) => <Card key={index} item={item} {...other} />)}
         </div>
     );
 };

src/components/Card/SwiperGroup.tsx

@@ -1,10 +1,7 @@
 "use client";
 import Box from "@/components/Box";
 import { FC, PropsWithChildren, useRef } from "react";
-import "swiper/css";
-import "swiper/css/autoplay";
-import "swiper/css/pagination";
-import "swiper/css/virtual";
+
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 
 import { GroupType } from "@/api/home";

src/components/Card/style.module.scss

@@ -8,7 +8,11 @@
   background: #212a36;
   border-radius: .1rem;
 }
-
+.cardWrapGmeInfo{
+  color: #fff;
+  font-size: .2rem;
+  margin: .2rem 0 0 .17rem;
+}
 
 .mainTitle{
     height: .34rem;

src/components/Layout/index.tsx

@@ -4,7 +4,7 @@ import { FC, PropsWithChildren } from "react";
 import styles from "./style.module.scss";
 type Props = FooterProps & HeaderProps;
 const Layout: FC<PropsWithChildren<Props>> = (props) => {
-    const { children, headerRender, footerRender } = props;
+    const { children } = props;
     return (
         <div className="relative h-[100vh]">
             <Header {...props}></Header>

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1721442589809') format('woff2'),
-       url('iconfont.woff?t=1721442589809') format('woff'),
-       url('iconfont.ttf?t=1721442589809') format('truetype');
+  src: url('iconfont.woff2?t=1721445755488') format('woff2'),
+       url('iconfont.woff?t=1721445755488') format('woff'),
+       url('iconfont.ttf?t=1721445755488') format('truetype');
 }
 
 .iconfont {
@@ -13,12 +13,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-HOT_32x16:before {
-  content: "\e64b";
+.icon-tishi1:before {
+  content: "\e61d";
 }
 
-.icon-HOT_xiaohao_24x12:before {
-  content: "\e648";
+.icon-home_line:before {
+  content: "\e824";
 }
 
 .icon-qianbao1:before {