feat: 修改新UI

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "node scripts/swEnv.js .env.development .env.local && next dev ",
     "dev:build": "node scripts/swEnv.js .env.development .env.local  && next build",
-    "dev:prod": "node scripts/swEnv.js .env.production .env.local  && next dev",
+    "dev:prod": "node scripts/swEnv.js .env.production .env.local  && next dev  -p 4001",
     "build:prod": "node scripts/swEnv.js .env.production .env.local  && next build",
     "dev:test": "node scripts/swEnv.js .env.test .env.local && next dev",
     "build:test": "node scripts/swEnv.js .env.test .env.local && next build",
@@ -13,8 +13,8 @@
     "build:uat": "node scripts/swEnv.js .env.uat .env.local  && next build",
     "dev:third": "node scripts/swEnv.js .env.third .env.local  && next dev",
     "build:third": "node scripts/swEnv.js .env.third .env.local  && next build",
-    "dev:hk": "node scripts/swEnv.js .env.hk .env.local  && next dev",
-    "dev:br": "node scripts/swEnv.js .env.br .env.local  && next dev",
+    "dev:hk": "node scripts/swEnv.js .env.hk .env.local  && next dev -p 4001",
+    "dev:br": "node scripts/swEnv.js .env.br .env.local  && next dev -p 4001",
     "build:hk": "  node scripts/swEnv.js .env.hk .env.local  && next build",
     "build:br": "node scripts/swEnv.js .env.br .env.local  && next build",
     "start": "next start",

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

@@ -14,10 +14,7 @@ const HomeSwiper: FC<Props> = (props) => {
     const { banners = [] } = props;
 
     return (
-        <div
-            style={{ height: "1.86rem" }}
-            className={"home-banner overflow-hidden" + " bg-[#212a36]"}
-        >
+        <div className={"home-banner overflow-hidden"}>
             <Swiper
                 autoplay={{ delay: 2500 }}
                 pagination={{ clickable: true }}
@@ -28,7 +25,11 @@ const HomeSwiper: FC<Props> = (props) => {
                 modules={[Pagination, Autoplay]}
             >
                 {banners.map((banner, index) => (
-                    <SwiperSlide key={index}>
+                    <SwiperSlide
+                        style={{ height: "1.2rem", overflow: "hidden" }}
+                        className="rounded-[.1rem]"
+                        key={index}
+                    >
                         <Box none action={banner.action_type} actionData={banner.action_params}>
                             <CustomImage
                                 width={"100%"}

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

@@ -1,6 +1,6 @@
 "use client";
 import { GroupType, PrizeTypes } from "@/api/home";
-import Box from "@/components/Box";
+import CustomTabs from "@/components/Tabs";
 import { useRouter } from "@/i18n/routing";
 import { useSystemStore } from "@/stores/useSystemStore";
 import { getToken } from "@/utils/Cookies";
@@ -8,8 +8,8 @@ import { Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import { FC, useState } from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
 import HomeGames from "./HomeGames";
+
 // import HomePrize from "./HomePrize";
 
 const buttonGroup: any = [
@@ -92,34 +92,33 @@ const TabItem = ({
 
     // const cls2 = clsx("iconfont text-[.34rem]", `icon-${item.icon}`);
 
-    const rootCls = clsx(
-        "relative aspect-square flex cursor-pointer rounded-[.1rem] pt-[.1rem] items-center justify-center flex-col bg-[#2b353f] text-[#596b73]"
-        // active ? "text-[#596b73]" : "text-[ #596b73]"
-    );
-
     return (
-        <div className={rootCls} onClick={() => handler(item)}>
-            <div className="flex items-end justify-center">
+        <div
+            className={clsx(
+                "relative flex cursor-pointer items-center rounded-[.1rem] bg-[var(--main-background)] px-[.1rem] py-[.04rem]",
+                !!active ? "text-[#fff]" : "text-[var(--textColor2)]"
+            )}
+            onClick={() => handler(item)}
+        >
+            <div className="relative z-[2] inline-block flex w-[.24rem] items-center justify-center">
                 {!item.image && <span className={cls}></span>}
                 {item.image && (
                     <img
                         src={item.image}
-                        width={36}
-                        height={36}
-                        style={{ width: ".36rem" }}
+                        style={{ height: ".24rem" }}
                         alt={item.url}
                         className={clsx(item.isAnimation ? "animate-slow-bounce" : "")}
                     ></img>
                 )}
             </div>
 
-            <span
+            <div
                 className={
-                    "break-word mt-[.02rem] flex h-[.26rem] items-center justify-center truncate whitespace-normal px-[.02rem] text-center text-[0.1rem] leading-[1]"
+                    "relative z-[2] min-w-[0] flex-1 whitespace-nowrap px-[.02rem] text-center text-[0.1rem]"
                 }
             >
                 {item.locale ? t(item.category_name) : item.category_name}
-            </span>
+            </div>
             {/* {item.isHot && (
                 <img
                     className={"absolute -top-[0.12rem] right-0 h-[0.21rem] w-[0.21rem]"}
@@ -152,25 +151,44 @@ const Tabs: FC<Props> = (props) => {
         }
         return true;
     });
-    const tabData = [...tabs, ...newButtonGroup];
+    const tabData = [...tabs, ...newButtonGroup].map((item, idx) => {
+        return {
+            ...item,
+            name: item.category_name,
+            id: `${item.category_name}_${idx}`,
+            headerRender: () => (
+                <TabItem
+                    item={item as TabItemType}
+                    active={`${item.category_name}_${idx}` === active || (!active && idx === 0)}
+                ></TabItem>
+            ),
+        };
+    });
 
-    const [active, setActive] = useState<number>(0);
+    const [active, setActive] = useState<string | undefined>();
     const router = useRouter();
-    const selectHandler = (item: TabItemType, index: number) => {
-        if (item.bet_type === 2 || item.bet_type === 3) {
-            router.push(
-                `/gameList/?gameListFlag=${item.category[0].jump_id}&type=1&bet_type=${item.bet_type}`
-            );
-            return;
-        }
-        setActive(index);
+    const selectHandler = (index?: String) => {
+        // if (item.bet_type === 2 || item.bet_type === 3) {
+        //     router.push(
+        //         `/gameList/?gameListFlag=${item.category[0].jump_id}&type=1&bet_type=${item.bet_type}`
+        //     );
+        //     return;
+        // }
+        setActive(index as string);
     };
 
-    const groupGames = tabs[active]?.category;
+    const groupGames = tabs[0]?.category;
 
     return (
         <>
-            <div className="sticky top-[0rem] z-[3] bg-[#0b0e10] px-[.1rem] pb-[.05rem] pt-[.05rem]">
+            <div className="homeTabsContainer sticky top-[0rem] z-[3] bg-[var(--primary1)] px-[.1rem] pb-[.05rem] pt-[.05rem]">
+                <CustomTabs
+                    items={tabData as any}
+                    activeKey={active}
+                    onChanage={selectHandler}
+                ></CustomTabs>
+            </div>
+            {/* <div className="sticky top-[0rem] z-[3] bg-[var(--primary1)] px-[.1rem] pb-[.05rem] pt-[.05rem]">
                 <Swiper
                     slidesPerView={4.5}
                     spaceBetween={4}
@@ -200,8 +218,11 @@ const Tabs: FC<Props> = (props) => {
                             </Box>
                         </SwiperSlide>
                     ))}
+                    <div className="absolute left-[0] bg-gradient-to-r from-[var(--gradient-left6)] to-[var(--gradient-right6)]">
+                        2323
+                    </div>
                 </Swiper>
-            </div>
+            </div> */}
             {/* <HomePrize data={prize}></HomePrize> */}
 
             <HomeGames groupGames={groupGames} />

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

@@ -63,7 +63,7 @@ const Layout: FC<PropsWithChildren<Props>> = async (props) => {
             <main id="maincontainer" className={"main-header"}>
                 {/*弹窗*/}
                 <Suspense fallback={<Placeholder />}>{popupWidget}</Suspense>
-                <div className={"px-spacing-x py-spacing-y"}>
+                <div className={"px-spacing-x py-spacing-y pb-[0] pt-[.15rem]"}>
                     {/* swiper */}
                     <Suspense fallback={<SwiperPlaceHolder />}>{swiperWidget}</Suspense>
                 </div>

src/app/[locale]/style.module.scss

@@ -3,5 +3,6 @@
 
     // background-size: 100% auto;
     // background-repeat: repeat-y;
-    background-color: #0b0e10;
+    // background-color: #0b0e10;
+    background-color: var(--primary1);
 }

src/app/globals.scss

@@ -11,12 +11,13 @@
 @import "swiper/css/virtual";
 
 :root {
+    --mobile-header-height: 0.48rem;
     --swiper-pagination-color: #fff;
     --swiper-pagination-bullet-active-bg: #fff;
     --swiper-pagination-bullet-inactive-color: hsla(0, 0%, 100%, 0.8);
     //--primary-color: #ff6a01;
 
-    --bg-color: #0b0e10;
+    --bg-color: #fefdee;
     --block-color: #1e252b;
     --block-foreground-color: #e2e9ef;
     --block-text-color: #a9b2bb;
@@ -27,12 +28,68 @@
 
     --tips-color: #dba40b;
     --tips-foreground-color: #1f2830;
-    --adm-color-fill-content: #191f24 !important;
+    --adm-color-fill-content: #fefdee !important;
+
+    --primary1: #fefdee;
+    --primary2: #fde997;
+    --primary3: #f9d22f;
+    --primary4: #f5b800;
+    --primary5: #6c6c6c;
+    --primary6: #272932;
+    --primary7: #3dfb9f;
+    --primary8: #2ca446;
+    --primary9: #fd0;
+    --primary10: #134b1a;
+    --primary11: #f78725;
+    --primary12: #8ff99d;
+    --primary13: #fff;
+    --primary20: #ff5a00;
+    --primary21: #24ee89;
+    --primary22: #1a783596;
+    --primary23: #1a7835;
+    --primary24: #162c21;
+    --primary-button: #0d910d;
+    --textColor1: #272932;
+    --textColor2: #6c6c6c;
+    --textColor3: #fff;
+    --textColor4: #ff383b;
+    --textColor5: #0d910d;
+    --textColor6: #ff5a00;
+    --textColor7: #24ee89;
+    --textColor8: #fd0;
+    --textColor9: #dec38f;
+    --textWhite: #fff;
+    --main-background: #fde997;
+    --gradient-left1: #fde997;
+    --gradient-right1: #f1ca1b;
+    --gradient-left2: #8d5314;
+    --gradient-right2: #a75f1c;
+    --gradient-left3: #fff;
+    --gradient-right3: #fce896;
+    --gradient-left4: #fde997;
+    --gradient-right4: #f8c92d;
+    --gradient-left5: #fff;
+    --gradient-right5: #56c3fb;
+    --gradient-left6: #63cd7b;
+    --gradient-right6: #2ca446;
+    --borderRadius: 0.75rem;
 }
 .home-banner {
     --swiper-pagination-bullet-width: 0.23rem;
     --swiper-pagination-bullet-height: 0.05rem;
     --swiper-pagination-bullet-border-radius: 0.03rem;
+    .swiper-pagination {
+        position: initial;
+        .swiper-pagination-bullet {
+            background-color: var(--main-background);
+            width: 0.054rem;
+            opacity: 1;
+            &.swiper-pagination-bullet-active {
+                width: 0.15rem;
+                background-color: var(--textColor4);
+            }
+        }
+    }
 }
 .promotion-swiper {
     --swiper-pagination-bullet-width: 0.0833rem;
@@ -280,3 +337,21 @@ input[type="number"] {
         transform: translateY(0);
     }
 }
+.homeTabsContainer {
+    .adm-tabs-tab-wrapper {
+        padding: 0 !important;
+    }
+    .adm-tabs-tab {
+        padding: 0 2px;
+    }
+    .adm-tabs-tab-line {
+        height: 100%;
+        background: linear-gradient(to right, var(--gradient-left6), var(--gradient-right6));
+        border-radius: 0.1rem;
+        z-index: 1;
+    }
+    .adm-tabs-header-mask {
+        display: none;
+        width: 0 !important;
+    }
+}

src/components/Card/SwiperGroup.tsx

@@ -59,7 +59,7 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
     );
     const swiperData: SwiperDataItem[] = useMemo(() => {
         const result: any = [];
-        const pageNum = page * group.line_num - 1;
+        const pageNum = page * group.line_num;
         const totalLenth = group?.game_list?.length || 0;
         if (totalLenth <= 0) return [];
         const canshowList =
@@ -78,25 +78,25 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                 key: `${group.category_name}_${i}`,
                 data: [
                     ...data,
-                    {
-                        isCustom: true,
-                        category_name: group.category_name,
-                        id: 0,
-                        game_icon: "",
-                        game_id: "",
-                        game_name: "",
-                        game_name_cn: "",
-                        game_type: "",
-                        provider: "",
-                        release_date: "",
-                        action_type: group.action_type,
-                        action_params: group.action_params,
-                        additional: {
-                            default: () => {
-                                todoHandler && todoHandler(group);
-                            },
-                        },
-                    },
+                    // {
+                    //     isCustom: true,
+                    //     category_name: group.category_name,
+                    //     id: 0,
+                    //     game_icon: "",
+                    //     game_id: "",
+                    //     game_name: "",
+                    //     game_name_cn: "",
+                    //     game_type: "",
+                    //     provider: "",
+                    //     release_date: "",
+                    //     action_type: group.action_type,
+                    //     action_params: group.action_params,
+                    //     additional: {
+                    //         default: () => {
+                    //             todoHandler && todoHandler(group);
+                    //         },
+                    //     },
+                    // },
                 ],
             });
         }
@@ -112,7 +112,7 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
     const iconClass = clsx(styles.mainLeftIcon, "pro-iconfont", `pro-${group.icon}`);
 
     return (
-        <div>
+        <div id={`#jump_${group.jump_id}`}>
             {visibleTitle && (
                 <div>
                     <div className={styles.mainTitle}>
@@ -173,7 +173,7 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                 <div className={"px-spacing-x py-spacing-y"}>
                     <Swiper
                         spaceBetween={10}
-                        slidesPerView={1}
+                        slidesPerView={1.1}
                         onSwiper={(swiper) => {
                             swiperRef.current = swiper;
                         }}

src/components/Header/index.tsx

@@ -43,6 +43,7 @@ const Header: FC<HeaderProps> = (props) => {
                 <HeaderTitle visibleLanguage={visibleLanguage} />
                 <HeaderRight />
             </div>
+            <div className=""></div>
         </header>
     );
 };

src/components/Header/style.module.scss

@@ -1,16 +1,21 @@
 .headerWrap {
-    height: calc($-header-height);
-    //position: fixed;
-    //z-index: 9;
+    height: var(--mobile-header-height);
     width: 100%;
-    //max-width: $-body-width;
-
-    //transform: translate3d(200px, 0, 0);
-    // background: $-theme-color ;
-    // background-image: url("/home/headerbg.png");
-    background-color: #1e252b;
-    background-size: 100% 250%;
-    // padding-bottom: 0.04rem;
+    position: relative;
+    background-image: url("/header/bg_2cituan.webp");
+    background-position: left bottom;
+    background-repeat: repeat-x;
+    &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -0.04rem;
+        height: 0.1rem;
+        background-image: url("/header/bg_2cituan.webp");
+        background-position: left bottom;
+        background-repeat: repeat-x;
+    }
     .headerMain {
         position: relative;
         padding: 3px 0;
@@ -18,6 +23,7 @@
         display: flex;
         align-items: center;
         height: 100%;
+        background-color: var(--primary3);
         .headerLeft {
             // position: absolute;
             display: block;

src/components/Tabs/index.tsx

@@ -3,15 +3,16 @@ import { Tabs } from "antd-mobile";
 import { FC, PropsWithChildren, ReactNode } from "react";
 import styles from "./style.module.scss";
 interface Item {
-    id: number;
+    id: number | string;
     name: string | ReactNode;
-    content: number;
+    content?: number;
     render?: ReactNode;
+    headerRender?: () => ReactNode;
 }
 interface Props {
     items: Item[];
     activeKey?: string;
-    onChanage?: (key?: String) => void;
+    onChanage?: (key?: string) => void;
 }
 // <Badge
 //   className={"flex items-center justify-center text-[20px]"}
@@ -31,7 +32,6 @@ const Transactions: FC<PropsWithChildren<Props>> = (props) => {
 
     const tabChange = (key: string) => {
         if (typeof onChanage === "function") {
-            console.log(key);
             onChanage(key);
         }
     };
@@ -64,24 +64,29 @@ const Transactions: FC<PropsWithChildren<Props>> = (props) => {
                             // >
                             //     {tab.name}
                             // </Badge>
-                            <div style={{ position: "relative" }}>
-                                {tab.name}
-                                {tab.content > 0 && (
-                                    <div
-                                        className={`mr-[0.1rem] flex h-[0.15rem] w-[0.15rem] items-center justify-center text-[#fff]`}
-                                        style={{
-                                            position: "absolute",
-                                            borderRadius: "0.075rem",
-                                            backgroundColor: "#ff311b",
-                                            fontSize: "0.1rem",
-                                            top: "-0.02rem",
-                                            right: "-0.24rem",
-                                        }}
-                                    >
-                                        {tab.content}
+                            <>
+                                {!tab?.headerRender && (
+                                    <div style={{ position: "relative" }}>
+                                        {tab.name}
+                                        {!!tab.content && (
+                                            <div
+                                                className={`mr-[0.1rem] flex h-[0.15rem] w-[0.15rem] items-center justify-center text-[#fff]`}
+                                                style={{
+                                                    position: "absolute",
+                                                    borderRadius: "0.075rem",
+                                                    backgroundColor: "#ff311b",
+                                                    fontSize: "0.1rem",
+                                                    top: "-0.02rem",
+                                                    right: "-0.24rem",
+                                                }}
+                                            >
+                                                {tab.content}
+                                            </div>
+                                        )}
                                     </div>
                                 )}
-                            </div>
+                                {tab?.headerRender && tab.headerRender()}
+                            </>
                         }
                     >
                         {tab.render}