fix: 修改返水详情

package.json

@@ -54,6 +54,7 @@
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8.4.39",
+    "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.3.2",
     "prettier-plugin-organize-imports": "^4.0.0",
     "prettier-plugin-tailwindcss": "^0.6.5",

pnpm-lock.yaml

@@ -96,6 +96,9 @@ importers:
       postcss:
         specifier: ^8.4.39
         version: 8.4.39
+      postcss-pxtorem:
+        specifier: ^6.1.0
+        version: 6.1.0(postcss@8.4.39)
       prettier:
         specifier: ^3.3.2
         version: 3.3.3
@@ -444,28 +447,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@14.2.4':
     resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-linux-x64-gnu@14.2.4':
     resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-x64-musl@14.2.4':
     resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@14.2.4':
     resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==}
@@ -1750,6 +1749,11 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
+  postcss-pxtorem@6.1.0:
+    resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
+    peerDependencies:
+      postcss: ^8.0.0
+
   postcss-selector-parser@6.1.1:
     resolution: {integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==}
     engines: {node: '>=4'}
@@ -4233,6 +4237,10 @@ snapshots:
       postcss: 8.4.39
       postcss-selector-parser: 6.1.1
 
+  postcss-pxtorem@6.1.0(postcss@8.4.39):
+    dependencies:
+      postcss: 8.4.39
+
   postcss-selector-parser@6.1.1:
     dependencies:
       cssesc: 3.0.0

postcss.config.mjs

@@ -3,6 +3,6 @@ const config = {
     plugins: {
         tailwindcss: {},
     },
-}
+};
 
-export default config
+export default config;

src/app/[locale]/(navbar)/cashbackDetails/DetailsTable.tsx

@@ -1,5 +1,4 @@
 "use client";
-import Box from "@/components/Box";
 import Table, { TableHeaderItem } from "@/components/Table";
 import { useTranslations } from "next-intl";
 import { JSX } from "react";
@@ -60,17 +59,14 @@ const DetailsTable = (props: Props) => {
         return Promise.resolve();
     };
     return (
-        <Box className={"mt-[20px] rounded-[10px] bg-[#ededed]"}>
-            <div className={"mb-[10px]"}> {t("cashbackStatus")}</div>
-            <Table
-                columns={columns}
-                dataSource={data}
-                loadMore={loadMore}
-                hasMore={false}
-                isLoadMore={false}
-                isBackground={true}
-            />
-        </Box>
+        <Table
+            columns={columns}
+            dataSource={data}
+            loadMore={loadMore}
+            hasMore={false}
+            isLoadMore={false}
+            isBackground={false}
+        />
     );
 };
 

src/app/[locale]/(navbar)/cashbackDetails/layout.tsx

@@ -1,4 +1,3 @@
-import Box from "@/components/Box";
 import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
 import { ReactNode } from "react";
@@ -15,13 +14,10 @@ export default async function Layout({
     children: ReactNode;
     params: { locale: string };
 }) {
-    const t = await getTranslations("cashback");
     return (
         <>
-            <HeaderBack showBack={true} title={t("cashbackTitle")} />
-            <main className={"main-header bg-[#1f2225] text-[#000]"}>
-                <Box>{children}</Box>
-            </main>
+            <HeaderBack showBack={true} />
+            <main className={"main-header bg-[#feecde] text-[#000]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(navbar)/cashbackDetails/page.tsx

@@ -1,4 +1,5 @@
 import { server } from "@/utils/server";
+import Image from "next/image";
 import DetailsTable, { Datum } from "./DetailsTable";
 
 const getTableData = () => {
@@ -12,20 +13,46 @@ const Page = async () => {
     const result = await getTableData();
     return (
         <div>
-            <img src={"/img/cashback-details.jpg"} />
+            <Image alt={"cashback"} width={750} height={650} src={"/cashback/header-bg.png"} />
 
-            <div className={"mt-[0.1389rem] text-[0.12rem] text-[#fff]"}>
-                <h1>Devolvendo aos usuários</h1>
-                <ul>
-                    <li>1. Perder mais, dar mais;</li>
-                    <li>2. Quanto maior o nível VIP, maior o reembolso;</li>
-                    <li>
-                        3. Os prêmios de retorno são emitidos automaticamente na carteira de replay;
-                    </li>
-                </ul>
-            </div>
+            <div className={"p-[0.125rem]"}>
+                <div
+                    className={
+                        "bg-[url(/cashback/content-1.png)] bg-[length:100%_100%]" + " h-[2.5rem]"
+                    }
+                >
+                    <h1
+                        className={
+                            "pt-[0.1rem] text-center font-bold text-primary-color" +
+                            " text-[0.1528rem]"
+                        }
+                    >
+                        Descrição das atividades
+                    </h1>
+                    <div className={"mx-[0.2778rem] mt-[0.1389rem] text-[0.125rem]"}>
+                        <ul className={"list-decimal pl-[0.2083rem]"}>
+                            <li>Perder mais, dar mais;</li>
+                            <li className={"mt-[0.0556rem]"}>
+                                Quanto maior o nível VIP, maior o reembolso;
+                            </li>
+                            <li className={"mt-[0.0556rem]"}>
+                                Os prêmios de retorno são emitidos automaticamente na carteira de
+                                replay;
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                {/*<Image alt={"cashback"} width={750} height={650} src={""} />*/}
 
-            <DetailsTable data={result.data} />
+                <div
+                    className={
+                        "bg-[url(/cashback/content-2.png)] bg-[length:100%_100%] pt-[0.5556rem]" +
+                        " -mt-[1rem] pb-[0.1389rem]"
+                    }
+                >
+                    <DetailsTable data={result.data} />
+                </div>
+            </div>
         </div>
     );
 };

src/app/[locale]/(navbar)/recharge/page.tsx

@@ -13,14 +13,14 @@ const getActivityApi = () => {
 };
 const Page = async () => {
     const activities = await getActivityApi();
-    const hasEndTimeActivities = activities.data.first_pay.find((item) => item.end_time > 0);
+    const hasEndTimeActivities = activities.data.first_pay?.find((item) => item.end_time > 0);
     const endtime =
         hasEndTimeActivities && hasEndTimeActivities.end_time > 0
             ? hasEndTimeActivities.end_time * 1000
             : 0;
     return (
         <>
-            <div className={"mb-[0.2778rem] mt-[0.1389rem] flex flex-col items-center"}>
+            <div className={"mb-[0.2778rem] mt-[0.2083rem] flex flex-col items-center"}>
                 <Image src={"/recharge/success.png"} alt={"success"} width={80} height={80} />
                 <h1 className={"mt-[0.2083rem] font-bold"}>Parabéns</h1>
                 <p className={"mt-[5px] text-[0.12rem]"}>Sua conta foi criada com sucesso.</p>
@@ -31,7 +31,7 @@ const Page = async () => {
                     " from-[#f8e4bf] to-[#f2ae38] p-[0.1389rem]"
                 }
             >
-                <div className={"absolute -top-[0.125rem] left-1/2 -translate-x-1/2"}>
+                <div className={"absolute -top-[0.12rem] left-1/2 -translate-x-1/2"}>
                     <Image
                         src={"/recharge/title_bg.png"}
                         alt={"Novo Usuário"}
@@ -41,7 +41,7 @@ const Page = async () => {
                     <span
                         className={
                             "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" +
-                            " font-bold text-[#ff7301]"
+                            " text-[0.125rem] font-bold text-[#ff7301]"
                         }
                     >
                         Novo Usuário

src/app/[locale]/providers.tsx

@@ -2,7 +2,6 @@
 import Sidebar from "@/components/Layout/Sidebar";
 import Loading from "@/components/Loading";
 import { useSystemStore } from "@/stores/useSystemStore";
-import { setHtmlFontSize } from "@/utils";
 import { ConfigProvider } from "antd-mobile";
 import enUS from "antd-mobile/es/locales/en-US";
 import { useLocale } from "next-intl";
@@ -10,6 +9,7 @@ import { ThemeProviderProps } from "next-themes/dist/types";
 import { ReactNode, useLayoutEffect, useRef } from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 
+import { setHtmlFontSize } from "@/utils";
 import { useDebounceEffect } from "ahooks";
 import { initializeApp } from "firebase/app";
 import { getMessaging, getToken, onMessage } from "firebase/messaging";
@@ -142,6 +142,7 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
             initFirebase();
         }
     }, []);
+
     return (
         <ConfigProvider locale={enUS}>
             <Layout>{children}</Layout>

src/components/Table/index.tsx

@@ -30,7 +30,7 @@ interface Props {
  */
 
 const TheadItem = ({ headItem }: { headItem: TableHeaderItem }) => {
-    const cls = clsx(`text-${headItem.align || "right"}`);
+    const cls = clsx(`text-${headItem.align || "right"} `);
     return <th className={cls}>{headItem.title}</th>;
 };
 const TbodyItem = ({ data, config, index, children }: any) => {
@@ -56,13 +56,13 @@ const Table: FC<Props> = (props) => {
         isBackground = false,
     } = props;
 
-    const cls = clsx(" table-header-group text-[grey] text-[.11rem]");
+    const cls = clsx(" table-header-group text-[grey] text-[.11rem] ");
 
     const bodyCls = clsx(maxHeight ? ` max-h-[${maxHeight}]` : "", "overflow-y-scroll");
 
     const headerTrCls = clsx(
         "h-[40px] border-b-1 border-[#e8e8e8]",
-        isBackground && "odd:bg-[#dedede] even:bg-[#d1d1d1]"
+        isBackground && "odd:bg-[#dedede] even:bg-[#d1d1d1] "
     );
     const colGroup = columns.map((item, index) => {
         return <col key={index} style={{ width: item.width }} />;