feat: 修改首页样式

src/api/home.ts

@@ -27,12 +27,19 @@ export interface GroupType {
      *   1 普通游戏（现金+ 彩金） 2:免费币 3：重玩币"
      */
     bet_type: 1 | 2 | 3;
+
+    image: string;
 }
 
 /**
  * entity.Category
  */
 export interface Category {
+    /**
+     * 厂商图标
+     */
+    image: string;
+
     /**
      * 多语言名字
      */

src/app/[locale]/(TabBar)/[[...share]]/@mediaWidget/page.tsx

@@ -5,7 +5,7 @@ const Page = async () => {
     const socials = await getSocialsApi();
     if (socials && socials.length === 0) return null;
     return (
-        <div className={"mb-[0.0694rem] px-[0.4167rem]"}>
+        <div className={"mb-[0.0694rem]"}>
             <Media socials={socials} />
         </div>
     );

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

@@ -6,6 +6,7 @@ import { useSystemStore } from "@/stores/useSystemStore";
 import { Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 import { FC, useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import HomeGames from "./HomeGames";
@@ -18,6 +19,7 @@ const buttonGroup = [
         url: "/freeGames",
         locale: true,
         lock: false,
+        image: "/home/free.png",
     },
     {
         icon: "qianbao3",
@@ -26,6 +28,7 @@ const buttonGroup = [
         url: "/replayGames",
         locale: true,
         lock: false,
+        image: "/home/replay.png",
     },
     {
         icon: "liwulipinjiangpin",
@@ -34,6 +37,7 @@ const buttonGroup = [
         url: "/promo",
         locale: true,
         lock: false,
+        image: "/home/promoto.png",
     },
     // {
     //     icon: "pro-youxi1",
@@ -58,6 +62,7 @@ const buttonGroup = [
         url: "/gameList?gameListFlag=10&type=1&bet_type=1&name=live",
         locale: true,
         lock: false,
+        image: "/home/live.png",
     },
     {
         icon: "yingyong",
@@ -66,6 +71,7 @@ const buttonGroup = [
         url: "/download",
         locale: true,
         lock: false,
+        image: "/home/app.png",
     },
 ] as const;
 
@@ -100,12 +106,22 @@ const TabItem = ({
 
     const rootCls = clsx(
         "relative flex flex-1 cursor-pointer items-center flex-col",
-        active?"text-[#d0f5fb]":"text-[#d0f5fb]"
+        active ? "text-[#d0f5fb]" : "text-[#d0f5fb]"
     );
     return (
         <div className={rootCls} onClick={() => handler(item)}>
-            <span className={item.icon === "qianbao3" ? cls2 : cls}></span>
-            <span className={"ml-[0.03rem] truncate text-[0.15rem]"}>
+            <div className="flex h-[.55rem] items-end justify-center">
+                {!item.image && <span className={cls}></span>}
+                {item.image && (
+                    <Image src={item.image} width={45} height={55} alt={item.url}></Image>
+                )}
+            </div>
+
+            <span
+                className={
+                    "ml-[0.03rem] truncate whitespace-normal break-all text-center text-[0.13rem]"
+                }
+            >
                 {item.locale ? t(item.category_name) : item.category_name}
             </span>
             {/* {item.isHot && (
@@ -153,14 +169,14 @@ const Tabs: FC<Props> = (props) => {
         setActive(index);
     };
 
-
     const groupGames = tabs[active]?.category;
+
     return (
         <>
             <Box pt={false} className="px-[.3rem] pb-[.2rem]">
-                <Swiper slidesPerView={5} centeredSlides={true} loop={true} centeredSlidesBounds>
+                <Swiper slidesPerView={5} centeredSlides={true} centeredSlidesBounds>
                     {tabData?.map((group, index) => (
-                        <SwiperSlide key={index} >
+                        <SwiperSlide key={index}>
                             <TabItem
                                 item={group as TabItemType}
                                 active={index === active}

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

@@ -84,7 +84,7 @@ const Layout: FC<PropsWithChildren<Props>> = async (props) => {
                     </Box> */}
 
                     {/*媒体*/}
-                    <Box> {mediaWidget}</Box>
+                    <Box none> {mediaWidget}</Box>
                     {/* 搜索组件 */}
                     <Box none className="px-[.12rem]">
                         {searchWidget}

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

@@ -3,7 +3,6 @@ import { GroupType } from "@/api/home";
 import { server } from "@/utils/server";
 import dynamic from "next/dynamic";
 
-
 const HomeTabs = dynamic(() => import("./_home/HomeTabs"));
 
 const TIME = 0;
@@ -22,7 +21,6 @@ const getGames = async () => {
 
 export default async function Page(props: any) {
     const group = await getGames();
-    return (
-        <HomeTabs tabs={group} />
-    );
+    console.log(group);
+    return <HomeTabs tabs={group} />;
 }

src/components/Card/Card.tsx

@@ -58,19 +58,19 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
         if (type === 2 && Number(wallet.free_score) <= 0) {
             // router.push("/deposit");
             Toast.show({
-                icon: 'fail',
-                content: 'No free coins',
-                maskClickable: false
-            })
+                icon: "fail",
+                content: "No free coins",
+                maskClickable: false,
+            });
             return;
         }
         // 重玩游戏
         if (type === 3 && Number(wallet.lose_score) <= 0) {
             Toast.show({
-                icon: 'fail',
-                content: 'No replay coins',
-                maskClickable: false
-            })
+                icon: "fail",
+                content: "No replay coins",
+                maskClickable: false,
+            });
             return;
         }
 
@@ -170,17 +170,17 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                             {/* 只是PG游戏展示demo试玩按钮 */}
                             {(item?.category_name === "Pragmaticplay" ||
                                 item?.category_name === "PP") && (
-                                    <Button
-                                        onClick={() => demoPlayGameHandler({ ...item!, demo: 1 })}
-                                        className={
-                                            "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
-                                            " bg-[#3a3a3a]" +
-                                            " font-bold"
-                                        }
-                                    >
-                                        {t("demo")}
-                                    </Button>
-                                )}
+                                <Button
+                                    onClick={() => demoPlayGameHandler({ ...item!, demo: 1 })}
+                                    className={
+                                        "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +
+                                        " bg-[#3a3a3a]" +
+                                        " font-bold"
+                                    }
+                                >
+                                    {t("demo")}
+                                </Button>
+                            )}
                             <Button
                                 onClick={() => playGameHandler(item!)}
                                 style={{

src/components/Card/style.module.scss

@@ -1,100 +1,110 @@
-.gameContainer{
-  background-image: url('/home/gamecontainer.png');
-  background-size: 100% 100%;
-  padding-bottom: .2rem;
+.gameContainer {
+    background-image: url("/home/gamecontainer.png");
+    background-size: 100% 100%;
+    padding-bottom: 0.2rem;
 }
 
 .cardWrap {
-  position: relative;
-  //width: 1.1rem;
-  height: 1.54rem;
-  overflow: hidden;
-  background: #212a36;
-  border-radius: .1rem;
-  border: 1px solid #5eabb6;
+    position: relative;
+    //width: 1.1rem;
+    height: 1.54rem;
+    overflow: hidden;
+    background: #212a36;
+    border-radius: 0.1rem;
+    border: 1px solid #5eabb6;
 }
-.cardWrapGmeInfo{
-  color: #fff;
-  font-size: .2rem;
-  margin: .2rem 0 0 .17rem;
+.cardWrapGmeInfo {
+    color: #fff;
+    font-size: 0.2rem;
+    margin: 0.2rem 0 0 0.17rem;
 }
 
-.mainTitle{
-    height: .34rem;
+.mainTitle {
+    height: 0.34rem;
     display: flex;
     position: relative;
     justify-content: space-between;
-    background-image: url('/home/gametitle.png');
+    background-image: url("/home/gametitle.png");
     background-size: 100% 100%;
     align-items: center;
-    img{
-      overflow-clip-margin: content-box;
-      overflow: clip;
-      flex: 1;
-    }
-  .mainLeft{
-    display: flex;
-    // background: #1a1a1a;
-    padding-left: 0.12rem;
-    align-items: center;
-    width: 2.1rem;
-    // position: relative;
-    // top: .06rem;
+    // img{
+    //   overflow-clip-margin: content-box;
+    //   overflow: clip;
+    //   flex: 1;
+    // }
+    .mainLeft {
+        display: flex;
+        // background: #1a1a1a;
+        padding-left: 0.12rem;
+        align-items: center;
+        width: 2.1rem;
+        // position: relative;
+        // top: .06rem;
 
-    .mainLeftIcon{
-      flex-shrink: 0;
-      width: .25rem;
-      height: .34rem;
-      font-size: 0.18rem;
-      align-content: center;
-      text-align: center;
-    }
+        .mainLeftIcon {
+            flex-shrink: 0;
+            width: 0.25rem;
+            height: 0.34rem;
+            font-size: 0.18rem;
+            align-content: center;
+            text-align: center;
+        }
 
-    .marginLeftTitle{
-      font-size: .13rem;
-      color: #fff;
-      margin: 0 .08rem 0 .06rem;
-      white-space: nowrap;
-    }
-    .marginLeftTag{
-      font-size: .14rem;
-      color: #ff6a01;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-  .mainRight{
-    // position: absolute;
-    // top: .08rem;
-    // right: 0;
-    display: flex;
-    padding-right: 0.12rem;
-    div{
-      padding: 0.05rem;
-      display: flex;
-      height: .25rem;
-      align-items: center;
-      // background: #1a1a1a;
-      border-radius: .04rem;
-      justify-content: center;
-      margin-left: .05rem;
-      font-size: .12rem;
-      font-weight: 700;
-      color: #b3b3b3;
+        .marginLeftTitle {
+            font-size: 0.13rem;
+            color: #fff;
+            margin: 0 0.08rem 0 0.06rem;
+            white-space: nowrap;
+        }
+        .marginLeftTag {
+            font-size: 0.14rem;
+            color: #ff6a01;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
+    .mainRight {
+        // position: absolute;
+        // top: .08rem;
+        // right: 0;
+        display: flex;
+        padding-right: 0.12rem;
+        line-height: 1;
+        div {
+            padding: 0.05rem;
+            display: flex;
+            height: 0.25rem;
+            align-items: center;
+            // background: #1a1a1a;
+            border-radius: 0.04rem;
+            justify-content: center;
+            margin-left: 0.05rem;
+            font-size: 0.12rem;
+            font-weight: 700;
+            color: #b3b3b3;
+        }
 
-    .marginRightCount {
-      color: $primary-color;
-      margin-left: 0.05rem;
-      background-image: url('/home/page.png');
-      background-size: 100% 100%;
-      padding: .1rem .25rem .15rem .25rem;
-    }
-    span{
-      font-size: 0.12rem;
-      color: #d76bff;
+        .marginRightCount {
+            color: $primary-color;
+            margin-left: 0.05rem;
+            background-image: url("/home/page.png");
+            background-size: 100% 100%;
+            width: 0.5rem;
+            height: 0.4rem;
+            display: flex;
+            justify-content: center;
+            position: relative;
+            top: 0.02rem;
+            span {
+                position: relative;
+                top: -0.02rem;
+            }
+        }
+        span {
+            font-size: 0.12rem;
+            color: #d76bff;
+        }
     }
-  }
 }

src/components/Manufacturer/style.module.scss

@@ -1,34 +1,34 @@
-.container{
-    padding: .24rem;
-    background-image: url('/home/provid_container_bg.png');
+.container {
+    padding: 0rem 0.24rem 0.24rem 0.24rem;
+    background-image: url("/home/provid_container_bg.png");
     background-size: 100% 100%;
 }
-.manufactureritem{
-    background-image: url('/home/provid_bg.png');
+.manufactureritem {
+    background-image: url("/home/provid_bg.png");
     background-size: 100% 100%;
-    height: .8rem;
+    height: 0.8rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    .providerIcon{
-        width: .3rem;
+    .providerIcon {
+        width: 0.5rem;
         position: relative;
-        top: .14rem;
+        top: 0.04rem;
     }
-    .providerText{
+    .providerText {
         position: relative;
-        top: -.08rem;
+        top: -0.08rem;
     }
-    &:global(.swiper-slide-active){
-        background-image: url('/home/provid_bg_active.png');
+    &:global(.swiper-slide-active) {
+        background-image: url("/home/provid_bg_active.png");
         position: relative;
-        top: -.04rem;
-        .providerIcon{
-            top: .18rem;
+        top: -0.04rem;
+        .providerIcon {
+            top: 0.04rem;
         }
-        .providerText{
-            top: -.04rem;
+        .providerText {
+            top: -0.04rem;
         }
     }
 }

src/components/Media/index.tsx

@@ -25,7 +25,7 @@ export const Media: FC<MediaType> = (props) => {
     }, []);
     return (
         <div
-            className={`grid justify-items-center`}
+            className={`flex items-center justify-center gap-x-[0.05rem] gap-y-[0.05rem]`}
             style={{
                 gridTemplateColumns: ` repeat(${data.length >= 5 ? 5 : data.length},1fr)`,
             }}
@@ -36,9 +36,9 @@ export const Media: FC<MediaType> = (props) => {
                         key={index}
                         href={service.url}
                         target={"_blank"}
-                        className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded"
+                        className="bg-white m-[0.05rem] h-[0.6rem] w-[0.6rem] rounded"
                     >
-                        <img className={"h-[0.3889rem] w-[0.3889rem]"} src={service.icon_url}></img>
+                        <img className={"h-[0.6rem] w-[0.6rem]"} src={service.icon_url}></img>
                     </Link>
                 );
             })}