|
@@ -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}
|