Merge branch 'dev' into feature-XianCH

README.md

@@ -12,3 +12,8 @@ First, run the development server:
 ```bash
   - /src/il8n.ts
 ```
+## src
+````angular2html
+  extend: 存放带有logo-header的页面
+  oridinary: 存放header为返回按钮的页面
+````

next.config.mjs

@@ -1,12 +1,14 @@
 /** @type {import('next').NextConfig} */
 import createNextIntlPlugin from  'next-intl/plugin';
-
+import path from 'path';
 const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
-    transpilePackages: ['antd']
+    sassOptions: {
+      prependData: `@import "./src/styles/variables.scss";`
+    }
 };
 
 export default withNextIntl(nextConfig);

package.json

@@ -19,7 +19,8 @@
     "next-intl": "^3.17.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.8"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",

pnpm-lock.yaml

@@ -25,10 +25,10 @@ importers:
         version: 11.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: 14.2.4
-        version: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8)
       next-intl:
         specifier: ^3.17.0
-        version: 3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1)
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -38,6 +38,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      sass:
+        specifier: ^1.77.8
+        version: 1.77.8
     devDependencies:
       '@types/node':
         specifier: ^20.14.10
@@ -1235,7 +1238,7 @@ packages:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
   anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==, tarball: https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz}
     engines: {node: '>= 8'}
 
   arg@5.0.2:
@@ -1310,7 +1313,7 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==, tarball: https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz}
     engines: {node: '>=8'}
 
   brace-expansion@1.1.11:
@@ -1320,7 +1323,7 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
   braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==, tarball: https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz}
     engines: {node: '>=8'}
 
   busboy@1.6.0:
@@ -1347,7 +1350,7 @@ packages:
     engines: {node: '>=10'}
 
   chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==, tarball: https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz}
     engines: {node: '>= 8.10.0'}
 
   client-only@0.0.1:
@@ -1662,7 +1665,7 @@ packages:
     engines: {node: ^10.12.0 || >=12.0.0}
 
   fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==, tarball: https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz}
     engines: {node: '>=8'}
 
   find-up@5.0.0:
@@ -1820,6 +1823,9 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
+  immutable@4.3.6:
+    resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==, tarball: https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1864,7 +1870,7 @@ packages:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
 
   is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==, tarball: https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz}
     engines: {node: '>=8'}
 
   is-boolean-object@1.1.2:
@@ -1919,7 +1925,7 @@ packages:
     engines: {node: '>= 0.4'}
 
   is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==, tarball: https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz}
     engines: {node: '>=0.12.0'}
 
   is-path-inside@3.0.3:
@@ -2445,7 +2451,7 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
   readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==, tarball: https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz}
     engines: {node: '>=8.10.0'}
 
   reflect.getprototypeof@1.0.6:
@@ -2494,6 +2500,11 @@ packages:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
 
+  sass@1.77.8:
+    resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==, tarball: https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -2649,7 +2660,7 @@ packages:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
   to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==, tarball: https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz}
     engines: {node: '>=8.0'}
 
   ts-api-utils@1.3.0:
@@ -5516,6 +5527,8 @@ snapshots:
 
   ignore@5.3.1: {}
 
+  immutable@4.3.6: {}
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -5791,11 +5804,11 @@ snapshots:
 
   negotiator@0.6.3: {}
 
-  next-intl@3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
+  next-intl@3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1):
     dependencies:
       '@formatjs/intl-localematcher': 0.2.32
       negotiator: 0.6.3
-      next: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8)
       react: 18.3.1
       use-intl: 3.17.0(react@18.3.1)
 
@@ -5804,7 +5817,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8):
     dependencies:
       '@next/env': 14.2.4
       '@swc/helpers': 0.5.5
@@ -5826,6 +5839,7 @@ snapshots:
       '@next/swc-win32-ia32-msvc': 14.2.4
       '@next/swc-win32-x64-msvc': 14.2.4
       '@opentelemetry/api': 1.9.0
+      sass: 1.77.8
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -6120,6 +6134,12 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.1.4
 
+  sass@1.77.8:
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.6
+      source-map-js: 1.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0

src/app/[locale]/(extend)/about/page.tsx

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+
+interface Props {}
+
+const About: FC<PropsWithChildren<Props>> = (props) => {
+    return <div>hello About</div>;
+};
+
+export default About;

src/app/[locale]/(extend)/layout.tsx

@@ -0,0 +1,18 @@
+import Layout from "@/components/Layout";
+import { getMessages } from "next-intl/server";
+import { ReactNode } from "react";
+
+export default async function LocaleLayout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const messages = await getMessages();
+    return (
+        <div className="">
+            <Layout>{children}</Layout>
+        </div>
+    );
+}

src/app/[locale]/(ordinary)/info/page.tsx

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+
+interface Props {}
+
+const Info: FC<PropsWithChildren<Props>> = (props) => {
+    return <div>hello Info</div>;
+};
+
+export default Info;

src/app/[locale]/(ordinary)/layout.tsx

@@ -0,0 +1,19 @@
+import Footer from "@/components/Footer";
+import { getMessages } from "next-intl/server";
+import { ReactNode } from "react";
+export default async function LocaleLayout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const messages = await getMessages();
+    return (
+        <div>
+            <div>header back</div>
+            {children}
+            <Footer />
+        </div>
+    );
+}

src/app/[locale]/home/page.tsx → src/app/[locale]/(ordinary)/project/page.tsx

@@ -3,7 +3,7 @@ import { FC, PropsWithChildren } from "react";
 interface Props {}
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
-    return <div className="border-2 border-b-slate-900">hello Home</div>;
+    return <div>hello Project</div>;
 };
 
 export default App;

src/app/[locale]/deposit/page.tsx

@@ -1,15 +1,52 @@
 import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import { Image } from "@nextui-org/image";
 // import logo from '../../../assets/imgs/deposit/logo.png'
 import './page.css'
 
 interface Props {}
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
+    // let [amount, setAmount] = React.useState(0)
+    let amount = 50
+    let amountList = [10,20,50,100,200,500,1000,5000,10000]
+
+    const setAmountFun = (amount = 0) => {
+        // setAmount(amount)
+    }
+
     return (
-    <div className="deposit-box">
-       {/* <img src={logo} className="logo" alt="logo" /> */}
-       <div className="btn">PIX 1</div>
-    </div>
+        <div className="deposit-box">
+            {/* <Image
+                className="img-box"
+                width={300}
+                radius="none"
+                alt="logo"
+                src="https://nextui-docs-v2.vercel.app/images/hero-card-complete.jpeg"
+                /> */}
+            <div className="img-box"></div>
+            <p className="btn-box" color="primary">PIX Ⅰ</p>
+            <div className="amount-box">
+                <span>Montante (BRL):</span>
+                <input type="number" placeholder="Mín. 10.00"/>
+            </div>
+            <ul className="ul-box">
+                {
+                    amountList.map((item, index) => (
+                        <li className={amount==item?'active':''} key={index}>
+                            <span className="hot"></span>
+                            <div className="amountContent">
+                                <span className="iconfont icon-unit-brl"></span>
+                                <span> {item}</span>
+                            </div>
+                            <span className="amountTips">Oferecer 100%</span>
+                        </li>
+                    ))
+                }
+        
+            </ul>
+            <div className={clsx("button topUp", {active: amount>0})}>Depositar Agora</div>
+        </div>
     );
 };
 

src/app/[locale]/layout.tsx

@@ -1,4 +1,3 @@
-import PageTransitionEffect from "@/components/PageTransitionEffect";
 import clsx from "clsx";
 import { Viewport } from "next";
 import { NextIntlClientProvider } from "next-intl";
@@ -6,7 +5,10 @@ import { getMessages } from "next-intl/server";
 import { Inter as FontSans } from "next/font/google";
 import { ReactNode } from "react";
 import "../globals.css";
+
+import PageTransitionEffect from "@/components/PageTransitionEffect";
 import { Providers } from "./providers";
+
 // 加载字体
 const fontSans = FontSans({
     subsets: ["latin"],
@@ -30,7 +32,7 @@ export default async function LocaleLayout({
         <html lang={locale} suppressHydrationWarning>
             <body className={clsx("font-sans", fontSans.variable)}>
                 <NextIntlClientProvider messages={messages}>
-                    <Providers themeProps={{ defaultTheme: "light", attribute: "class" }}>
+                    <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
                         <PageTransitionEffect>{children}</PageTransitionEffect>
                     </Providers>
                 </NextIntlClientProvider>

src/app/[locale]/login/page.css

@@ -0,0 +1,225 @@
+
+.login-box {
+    width: 100%;
+    min-height: 100vh;
+    background-color: rgb(31, 31, 31);
+    display: flex;
+    flex-direction: column;
+}
+
+.main {
+    background-color: #1f1f1f;
+    padding: .72rem .18rem 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main .title {
+    font-size: .18rem;
+}
+
+.main .title h2 {
+    color: #ff6a01;
+    text-align: center;
+}
+
+.main .otherAccount {
+    margin: .2rem 0 .1rem;
+}
+
+.main .otherAccount .ggAfb,.main .otherAccount .ggAfb span {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.main .otherAccount .ggAfb span {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 67%;
+    border-radius: .04rem;
+    height: .42rem;
+    color: #fff;
+    font-size: .1rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main .otherAccount .ggAfb span.gg {
+    background-color: #06b594;
+}
+
+.main .otherAccount .ggAfb span i {
+    width: .26rem;
+    height: .26rem;
+    margin-right: .13rem;
+    background-image: url('https://9f.com/img/gg.ef7c3bc6.svg');
+    background-size: 100% 100%;
+}
+
+.main .otherAccount .or {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    margin-top: .16rem;
+}
+
+.main .otherAccount .or:after,.main .otherAccount .or:before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 0;
+    border-top: .01rem solid #666;
+}
+
+.main .otherAccount .or span {
+    display: block;
+    margin: 0 .03rem;
+    font-size: .12rem;
+    color: #ddd;
+}
+
+.main .phoneInput, .passwordInput {
+    width: 100%;
+    height: auto;
+    background-color: #494949;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.main .passwordInput {
+    margin: .13rem 0 .04rem;
+}
+
+.main .phoneInput .after {
+    margin-left: .1rem;
+    font-size: .14rem;
+    color: #868686;
+}
+
+.main .phoneInput input {
+    padding-left: .14rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main .passwordInput .iconfont {
+    font-size: .16rem;
+}
+
+.main .passwordInput input {
+    text-indent: .23rem;
+}
+
+.main input {
+    flex: 1;
+    background-color: #494949;
+    height: .48rem;
+    color: #868686;
+    font-size: .14rem;
+    outline: none;
+}
+
+.main input::placeholder{
+	color: #868686;
+}
+
+.main .btnContent {
+    margin: .29rem 0 .19rem;
+}
+
+.main .btnContent .tips {
+    text-align: center;
+    margin-bottom: .06rem;
+    color: #e53535;
+    font-size: 0.12rem;
+}
+
+.button {
+    display: block;
+    width: 100%;
+    height: .44rem;
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
+    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
+    background: -o-linear-gradient(top, #ff9323, #ff6a01);
+    background: linear-gradient(180deg, #ff9323, #ff6a01);
+    color: #fff;
+    text-align: center;
+    line-height: .44rem;
+    font-size: .14rem;
+    border-radius: 4px;
+    cursor: not-allowed;
+    opacity: .4;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.button.active {
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
+    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
+    background: -o-linear-gradient(top, #ff9323, #ff6a01);
+    background: linear-gradient(180deg, #ff9323, #ff6a01);
+    cursor: pointer;
+    opacity: 1;
+}
+
+.main .link {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+.main .link .forgotText {
+    font-size: .12rem;
+    color: #fff;
+    text-align: center;
+    display: block;
+}
+
+.footer-box {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+}
+
+.footer-box .text {
+    height: .81rem;
+    background-color: #131212;
+    color: #7d7d7d;
+    font-size: .12rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    padding: 0 .36rem;
+}
+
+.footer-box .text .iconfont {
+    color: #e53535;
+    font-size: .2rem;
+}

src/app/[locale]/login/page.tsx

@@ -0,0 +1,54 @@
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import './page.css'
+
+interface Props {}
+
+const App: FC<PropsWithChildren<Props>> = (props) => {
+    let amount = 50
+    let amountList = [10,20,50,100,200,500,1000,5000,10000]
+
+
+    return (
+        <div className="login-box">
+            <div className="main">
+                <div className="title"><h2>Bem Vindo ao 9F.COM</h2></div>
+                <div className="otherAccount">
+                    <div className="ggAfb">
+                        <span className="gg">
+                            <i></i> Entrar com Google+ 
+                        </span>
+                    </div>
+                    <div className="or">
+                        <span>OU</span>
+                    </div>
+                </div>
+                <div className="phoneInput">
+                    <span className="after">+55</span>
+                    <input type="tel" placeholder="Número de Celular" />
+                </div>
+                <div className="passwordInput">
+                    <input placeholder="Senha" type="password" />
+                    <span className="iconfont icon-noeyes"></span>
+                </div>
+                <div className="btnContent">
+                    <div className="tips"> O número de telefone não existe. </div>
+                    <button className="button active">Login</button>
+                </div>
+                <div className="link">
+                    <span className="forgotText">Esqueci minha senha?</span>
+                    <span className="forgotText">Criar Conta Nova</span>
+                </div>
+            </div>
+            <div className="footer-box">
+                <div className="text">
+                    <span>© 9F.COM todos direitos reservados</span>
+                    <span className="iconfont icon-a-18"></span>
+                </div>
+            </div>
+            
+        </div>
+    );
+};
+
+export default App;

src/app/[locale]/page.tsx

@@ -1,25 +1,20 @@
-"use client";
-import { useRouter } from "@/i18n";
+import Layout from "@/components/Layout";
 import { LocalPropsWithChildren } from "@/types";
-import { Button } from "@nextui-org/button";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { FC } from "react";
-
+const arr = Array.from({ length: 100 }).map((_, i) => i);
+const Header = () => {
+    return <div>header</div>;
+};
 const App: FC<LocalPropsWithChildren> = (props) => {
     const t = useTranslations("global");
-    const router = useRouter();
-    const handler = () => {
-        router.push("/home");
-    };
     return (
-        <div>
-            hello React
-            <Link href="/home">跳转</Link>
-            <Button color={"primary"} onClick={handler}>
-                {t("title")}
-            </Button>
-        </div>
+        <Layout>
+            <div>
+                this page
+                <div className="iconfont icon-zuqiu2"></div>
+            </div>
+        </Layout>
     );
 };
 

src/app/[locale]/profile/page.css

@@ -0,0 +1,229 @@
+
+.main {
+    padding: .44rem 0 .04rem;
+    min-height: 100vh;
+    background-color: #1f1f1f;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+.main .userContent {
+    background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
+    background: -webkit-linear-gradient(top, #ffaa30, #ffe6be);
+    background: -o-linear-gradient(top, #ffaa30 0, #ffe6be 100%);
+    background: linear-gradient(180deg, #ffaa30, #ffe6be);
+    min-height: .93rem;
+}
+
+.main .userInfo {
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    height: .56rem;
+    padding: .11rem .18rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main .userInfo>div {
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: .36rem;
+    font-size: .14rem;
+    color: #000;
+}
+
+.main .userInfo>div .bgImg {
+    width: .36rem;
+    height: .36rem;
+    margin-right: .1rem;
+    background-color: transparent;
+    background-image: url('https://9f.com/img/logo_5.6a41c34a.png');
+    background-size: 100% 100%;
+}
+
+.main .userInfo>div>div {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    height: .36rem;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+.main .userInfo>div .phone {
+    font-size: .12rem;
+}
+
+.main .userInfo .goto {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.main .userInfo .iconfont {
+    font-size: .16rem;
+    font-weight: 700;
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+    margin-left: .04rem;
+}
+
+.main .coin{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    padding: .07rem 0 .3rem;
+    margin: 0 .18rem;
+    border-top: .01rem dotted #d9a801;
+}
+
+.main .coin>div {
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 50%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main .coin>div:first-child {
+    border-right: .01rem dotted #d9a801;
+}
+
+.main .coin>div .iconfont {
+    margin: 0 .08rem;
+    font-size: .18rem;
+}
+
+.main .coin>div>div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.main .coin>div div span {
+    font-size: .12rem;
+}
+
+.main .coin>div div .num {
+    width: 100%;
+    height: auto;
+    display: flex;
+}
+
+.main .coin>div div .num span {
+    font-size: .14rem;
+}
+
+.main .coin>div div .num span:first-child {
+    margin-right: .04rem;
+}
+
+.main .link {
+    width: 100%;
+    height: auto;
+    margin-top: -.22rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.main .link span {
+    width: 1.63rem;
+    height: .44rem;
+    line-height: .44rem;
+    background: -o-linear-gradient(top, #ff9323, #ff6a01);
+    background: linear-gradient(180deg, #ff9323, #ff6a01);
+    border-radius: .04rem;
+    color: #fff;
+    font-size: .14rem;
+    margin: 0 .08rem;
+    text-align: center;
+}
+
+.main ul li {
+    color: #fff;
+    height: .5rem;
+    line-height: .5rem;
+    font-size: .14rem;
+    border-bottom: .01rem solid #3f3f3f;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin: 0 .18rem;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    line-height: .2rem;
+}
+
+.main ul li.free {
+    padding-top: .12rem;
+    margin: 0;
+    padding: 0 .18rem;
+    border-bottom: .08rem solid #131212;
+}
+
+.main ul li>div {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.main ul li .icon-hot {
+    font-size: .16rem;
+    color: #fc9b26;
+    margin-left: .1rem;
+}
+
+.main ul li div.content .iconfont {
+    margin-right: .04rem;
+    margin-left: .1rem;
+    font-size: .18rem;
+}
+
+.main ul li .iconfont.icon-to {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.main .logOut {
+    color: #fff;
+    font-size: .12rem;
+    width: 1rem;
+    height: .34rem;
+    line-height: .34rem;
+    display: block;
+    margin: .1rem auto .3rem;
+    text-align: center;
+    cursor: pointer;
+}

src/app/[locale]/profile/page.tsx

@@ -0,0 +1,80 @@
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import './page.css'
+
+interface Props {}
+
+const App: FC<PropsWithChildren<Props>> = (props) => {
+    // let [amount, setAmount] = React.useState(0)
+    let amount = 50
+    let amountList = [10,20,50,100,200,500,1000,5000,10000,500,1000,5000,10000]
+
+    const setAmountFun = (amount = 0) => {
+        // setAmount(amount)
+    }
+
+    return (
+        <div className="main">
+            <div className="userContent">
+                <div className="userInfo">
+                    <div>
+                        <div className="bgImg"></div>
+                        <div>
+                            <span>Conta</span>
+                            <span className="phone">5516982013895</span>
+                        </div>
+                    </div>
+                    <div className="goto">
+                        <span>Login</span>
+                        <span className="iconfont icon-to"></span>
+                    </div>
+                </div>
+                <div className="coin">
+                    <div>
+                        <span className="iconfont icon-wallet"></span>
+                        <div>
+                            <span> Saldo </span>
+                            <div className="num">
+                                <span className="uppercase">brl </span>
+                                <span>0.00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <span className="iconfont icon-gift2"></span>
+                        <div>
+                            <span> Bônus </span>
+                            <div className="num">
+                                <span className="uppercase">brl </span>
+                                <span>0.00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="link">
+                <span>Depósito</span>
+                <span>Sacar</span>
+            </div>
+
+            <ul>
+                {
+                    amountList.map((item, index) => (
+                        <li className={index==0?'free':''} key={index}>
+                            <div className="content"> Afiliado - Ganhe R$ 10.000 por dia | 9F.COM 
+                                <span data-v-5c42ece6="" className="iconfont icon-hot"></span>
+                                <div data-v-5c42ece6=""></div>
+                            </div>
+                            <div><span className="iconfont icon-to"></span></div>
+                        </li>
+                    ))
+                }
+            </ul>
+
+            <span className="logOut">Login</span>
+        </div>
+    );
+};
+
+export default App;

src/app/[locale]/providers.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { useRouter } from "@/i18n";
+import { setHtmlFontSize } from "@/utils";
 import { NextUIProvider } from "@nextui-org/system";
 import { ThemeProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";
-import { ReactNode } from "react";
-import { setHtmlFontSize } from "@/utils/index"
+import { ReactNode, useLayoutEffect } from "react";
 
 export interface ProvidersProps {
     children: ReactNode;
@@ -13,6 +13,10 @@ export interface ProvidersProps {
 
 export const Providers = ({ children, themeProps }: ProvidersProps) => {
     const router = useRouter();
+    useLayoutEffect(() => {
+        // 调用响应式方法
+        setHtmlFontSize();
+    }, []);
     return (
         <div id="app">
             <NextUIProvider navigate={router.push}>
@@ -21,6 +25,3 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
         </div>
     );
 };
-
-// 调用响应式方法
-setHtmlFontSize()

src/app/globals.css

@@ -1,15 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@import "@/styles/iconfont/iconfont.css";
 html, body {
     width: 100vw;
     height: auto;
 }
 
+::-webkit-scrollbar {
+  width: 0;
+}
 #app {
     max-width: 4.02rem;
     width: 100vw;
     height: auto;
     margin: 0 auto;
+    font-size: 0.14rem;
 }

src/components/Footer/index.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { useRouter } from "@/i18n";
+import clsx from "clsx";
+import { FC, PropsWithChildren, ReactNode } from "react";
+import styles from "./style.module.scss";
+
+/**
+ * @description 底部组件
+ * @param footerPlaceholder 底部占位元素
+ * @param footerRender 底部渲染元素
+ *
+ */
+export interface FooterProps {
+    footerPlaceholder?: boolean;
+    footerRender?: () => ReactNode;
+}
+
+const Footer: FC<PropsWithChildren<FooterProps>> = (props) => {
+    const { footerPlaceholder = true, footerRender } = props;
+    const cs = clsx({
+        [styles.placeholder]: footerPlaceholder,
+    });
+
+    const router = useRouter();
+
+    return (
+        <div className={cs}>
+            <div className={styles.footerWrap}>
+                {footerRender ? footerRender() : <div>defaultFooter</div>}
+            </div>
+        </div>
+    );
+};
+
+export default Footer;

src/components/Footer/style.module.scss

@@ -0,0 +1,14 @@
+
+.placeholder{
+  height: .6rem;
+  max-width: 4.02rem;
+}
+.footerWrap{
+  position: fixed;
+  max-width: 4.02rem;
+  width: 100%;
+  height: .6rem;
+  background-color: $-footer-bg;
+  z-index: 10;
+  bottom: 0;
+}

src/components/Header/index.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { FC, PropsWithChildren, ReactNode } from "react";
+
+/**
+ * @description HeaderProps
+ * @param {boolean} headerPlaceholder 是否展示展位元素
+ * @param {() => ReactNode} headerRender 自定义渲染
+ */
+export interface HeaderProps {
+    headerPlaceholder?: boolean;
+    headerRender?: () => ReactNode;
+}
+
+import { useRouter } from "@/i18n";
+import clsx from "clsx";
+import styles from "./style.module.scss";
+const DefaultHeader: FC = () => {
+    const router = useRouter();
+    return (
+        <div className={styles.headerMain}>
+            <div className={styles.headerLeft}>
+                <div
+                    className="iconfont icon-gengduo"
+                    onClick={() => router.push("/project")}
+                ></div>
+            </div>
+            <div className={styles.headerTitle}></div>
+            <div className={styles.headerRight}></div>
+        </div>
+    );
+};
+
+const Header: FC<PropsWithChildren<HeaderProps>> = (props) => {
+    const { headerPlaceholder = true, headerRender } = props;
+    const cs = clsx({
+        [styles.placeholder]: headerPlaceholder,
+    });
+    return (
+        <div className={cs}>
+            <div className={styles.headerWrap}>
+                {headerRender ? headerRender() : <DefaultHeader />}
+            </div>
+        </div>
+    );
+};
+
+export default Header;

src/components/Header/style.module.scss

@@ -0,0 +1,21 @@
+
+.placeholder {
+  height: 0.4rem;
+}
+
+.headerWrap{
+    height: 0.4rem;
+    position: fixed;
+    z-index: 9;
+    width: 100%;
+    max-width: 4.02rem;
+    transform: translateZ(0);
+    background: $-theme-color ;
+    border: 1px solid blue;
+
+  .headerMain{
+    position: relative;
+    padding: 3px 0;
+    box-sizing: border-box;
+  }
+}

src/components/Layout/index.tsx

@@ -0,0 +1,17 @@
+import Footer, { FooterProps } from "@/components/Footer";
+import Header, { HeaderProps } from "@/components/Header";
+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;
+    return (
+        <div className="relative h-[100vh]">
+            <Header {...props}></Header>
+            <main className={styles.main}>{children}</main>
+            <Footer {...props}></Footer>
+        </div>
+    );
+};
+
+export default Layout;

src/components/Layout/style.module.scss

@@ -0,0 +1,6 @@
+
+
+.main{
+  border: 1px solid white;
+  overflow-x:  hidden;
+}

src/components/PageTransitionEffect/index.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { usePathname } from "@/i18n";
-import { AnimatePresence, motion } from "framer-motion";
 import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { usePathname } from "next/navigation";
 import { ReactNode, useContext, useRef } from "react";
 
 // FrozenRouter 组件，保持页面切换过程中上下文的持久化
@@ -25,22 +24,24 @@ const variants = {
 const PageTransitionEffect = ({ children }: { children: ReactNode }) => {
     // 使用 usePathname 钩子获取路径名作为 key，以在路由更改时触发重新渲染
     const key = usePathname();
-    console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 28`, key);
-    return (
-        <AnimatePresence mode="popLayout">
-            <motion.div
-                key={key}
-                initial="hidden"
-                animate="enter"
-                exit="exit"
-                transition={{ type: "linear" }}
-                className="overflow-hidden"
-            >
-                {/*<FrozenRouter></FrozenRouter>*/}
-                {children}
-            </motion.div>
-        </AnimatePresence>
-    );
+
+    return children;
+    // return (
+    //     <AnimatePresence mode="popLayout">
+    //         {/*<motion.div*/}
+    //         {/*    key={key}*/}
+    //         {/*    initial="hidden"*/}
+    //         {/*    animate="enter"*/}
+    //         {/*    exit="exit"*/}
+    //         {/*    variants={variants}*/}
+    //         {/*    transition={{ type: "linear" }}*/}
+    //         {/*    className="overflow-hidden"*/}
+    //         {/*>*/}
+    //         {/*    <FrozenRouter>{children}</FrozenRouter>*/}
+    //         {/*</motion.div>*/}
+    //         {children}
+    //     </AnimatePresence>
+    // );
 };
 
 export default PageTransitionEffect;

src/styles/iconfont/iconfont.css

@@ -0,0 +1,451 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4617618 */
+  src: url('./iconfont.woff2?t=1721287881311') format('woff2'),
+       url('./iconfont.woff?t=1721287881311') format('woff'),
+       url('./iconfont.ttf?t=1721287881311') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-zuqiu2:before {
+  content: "\e618";
+}
+
+.icon-star_full:before {
+  content: "\e62c";
+}
+
+.icon-jilu1:before {
+  content: "\e63a";
+}
+
+.icon-gantanhao1:before {
+  content: "\e674";
+}
+
+.icon-gantanhao:before {
+  content: "\e673";
+}
+
+.icon-qiehuan:before {
+  content: "\e647";
+}
+
+.icon-zhankai:before {
+  content: "\e62d";
+}
+
+.icon-shipin1:before {
+  content: "\e672";
+}
+
+.icon-yincangshipin:before {
+  content: "\e671";
+}
+
+.icon-up-copy:before {
+  content: "\e605";
+}
+
+.icon-shipin:before {
+  content: "\e616";
+}
+
+.icon-yonghu:before {
+  content: "\e660";
+}
+
+.icon-meiyoushuju:before {
+  content: "\e644";
+}
+
+.icon-liwuhuodong:before {
+  content: "\e604";
+}
+
+.icon-xiala1:before {
+  content: "\e62a";
+}
+
+.icon-wenhao:before {
+  content: "\e6c9";
+}
+
+.icon-xianshikejian:before {
+  content: "\e8d4";
+}
+
+.icon-mianfei:before {
+  content: "\e670";
+}
+
+.icon-qiandai:before {
+  content: "\e66f";
+}
+
+.icon-zhuanjiangjin:before {
+  content: "\e642";
+}
+
+.icon-13:before {
+  content: "\e60f";
+}
+
+.icon-rili:before {
+  content: "\e66e";
+}
+
+.icon-qianbao:before {
+  content: "\e610";
+}
+
+.icon-tuite:before {
+  content: "\e6f0";
+}
+
+.icon-fuzhi:before {
+  content: "\e64f";
+}
+
+.icon-xiangyou2:before {
+  content: "\e614";
+}
+
+.icon-igw-f-copy:before {
+  content: "\e638";
+}
+
+.icon-fenxiang1:before {
+  content: "\e624";
+}
+
+.icon-tishi:before {
+  content: "\e87f";
+}
+
+.icon-whatsapp:before {
+  content: "\ea07";
+}
+
+.icon-facebook:before {
+  content: "\ea0c";
+}
+
+.icon-dengpaobeifen:before {
+  content: "\e612";
+}
+
+.icon-bangzhu:before {
+  content: "\e602";
+}
+
+.icon-zhuanpanshezhi:before {
+  content: "\e66d";
+}
+
+.icon-xiangyou1:before {
+  content: "\e60c";
+}
+
+.icon-cs-xs-1:before {
+  content: "\e63e";
+}
+
+.icon-duanxinguanli:before {
+  content: "\e60d";
+}
+
+.icon-fenxiang:before {
+  content: "\e61b";
+}
+
+.icon-Upxiangshang30:before {
+  content: "\e6e2";
+}
+
+.icon-guanjun:before {
+  content: "\e887";
+}
+
+.icon-moxige:before {
+  content: "\e603";
+}
+
+.icon-zh_cn:before {
+  content: "\e639";
+}
+
+.icon-yinni:before {
+  content: "\e683";
+}
+
+.icon-guanbi:before {
+  content: "\e695";
+}
+
+.icon-yundongzuqiu:before {
+  content: "\e62b";
+}
+
+.icon-yuyin:before {
+  content: "\e601";
+}
+
+.icon-yingyong:before {
+  content: "\e600";
+}
+
+.icon--guoji:before {
+  content: "\e8ab";
+}
+
+.icon-shuju:before {
+  content: "\e65f";
+}
+
+.icon-lishijilu:before {
+  content: "\e687";
+}
+
+.icon-paiqiu:before {
+  content: "\e60a";
+}
+
+.icon-jiangbei:before {
+  content: "\e872";
+}
+
+.icon-jilu:before {
+  content: "\e60b";
+}
+
+.icon-zuqiu1:before {
+  content: "\e686";
+}
+
+.icon-yingguo:before {
+  content: "\e66a";
+}
+
+.icon-xibanya:before {
+  content: "\e66b";
+}
+
+.icon-xiangyou:before {
+  content: "\e625";
+}
+
+.icon-qiuyi:before {
+  content: "\e6ed";
+}
+
+.icon-shujucanmou:before {
+  content: "\e87e";
+}
+
+.icon-kongbairili:before {
+  content: "\e629";
+}
+
+.icon-yincangmima:before {
+  content: "\e622";
+}
+
+.icon-choujiang:before {
+  content: "\e64a";
+}
+
+.icon-xianshimima:before {
+  content: "\e6dd";
+}
+
+.icon-shouye1:before {
+  content: "\e619";
+}
+
+.icon-mima:before {
+  content: "\e659";
+}
+
+.icon-24gf-thumbsUp:before {
+  content: "\eb33";
+}
+
+.icon-tuandui:before {
+  content: "\e611";
+}
+
+.icon-sousuo1:before {
+  content: "\e635";
+}
+
+.icon-wujiaoxing:before {
+  content: "\e637";
+}
+
+.icon-shouye2:before {
+  content: "\e6d8";
+}
+
+.icon-fuzhiwendang:before {
+  content: "\e627";
+}
+
+.icon-yanzhengma-mianxing:before {
+  content: "\e685";
+}
+
+.icon-bofang-fang-F:before {
+  content: "\e63d";
+}
+
+.icon-a-18:before {
+  content: "\e669";
+}
+
+.icon-xiangzuo1:before {
+  content: "\e653";
+}
+
+.icon-kefu:before {
+  content: "\e668";
+}
+
+.icon-hot-:before {
+  content: "\e6bf";
+}
+
+.icon-Photo:before {
+  content: "\e86b";
+}
+
+.icon-icon-shenpiliu-yucunkuan:before {
+  content: "\e665";
+}
+
+.icon-shouye:before {
+  content: "\e658";
+}
+
+.icon-xiangshang:before {
+  content: "\e613";
+}
+
+.icon-header-18:before {
+  content: "\e649";
+}
+
+.icon-cunkuan:before {
+  content: "\e643";
+}
+
+.icon-shoucang:before {
+  content: "\e8f9";
+}
+
+.icon-icons_video:before {
+  content: "\e636";
+}
+
+.icon-feiji:before {
+  content: "\e628";
+}
+
+.icon-7:before {
+  content: "\e606";
+}
+
+.icon-shexiangji:before {
+  content: "\e60e";
+}
+
+.icon-lianxiwomen:before {
+  content: "\e661";
+}
+
+.icon-douyin:before {
+  content: "\e8db";
+}
+
+.icon-mofang:before {
+  content: "\e617";
+}
+
+.icon-yulechangsuo-youxiyouyi:before {
+  content: "\e7de";
+}
+
+.icon-15:before {
+  content: "\e626";
+}
+
+.icon-huobao:before {
+  content: "\e667";
+}
+
+.icon-yewutuijian:before {
+  content: "\e621";
+}
+
+.icon-ziyuanjrit:before {
+  content: "\e632";
+}
+
+.icon-qita-:before {
+  content: "\e63c";
+}
+
+.icon-huo:before {
+  content: "\e66c";
+}
+
+.icon-PG:before {
+  content: "\e623";
+}
+
+.icon-xiala:before {
+  content: "\e607";
+}
+
+.icon-zuqiu:before {
+  content: "\e615";
+}
+
+.icon-liwulipinjiangpin:before {
+  content: "\e7b6";
+}
+
+.icon-yunzhibo:before {
+  content: "\e633";
+}
+
+.icon-zuopinchuangzuo:before {
+  content: "\e634";
+}
+
+.icon-laba:before {
+  content: "\e6ac";
+}
+
+.icon-xiangzuo:before {
+  content: "\e608";
+}
+
+.icon-sousuo:before {
+  content: "\e664";
+}
+
+.icon-baxi:before {
+  content: "\e609";
+}
+
+.icon-gengduo:before {
+  content: "\e663";
+}
+

src/styles/variables.scss

@@ -0,0 +1,5 @@
+
+$-theme-color: #000;
+$-footer-bg: #292929;
+
+

src/utils/index.ts

@@ -1,18 +1,19 @@
 // 设置根节点html的字体大小用于移动端适配使用
 export const setHtmlFontSize = () => {
+    console.count("setHtmlFontSize");
     (function (doc, win) {
-        var htmlDom = doc.getElementsByTagName('html')[0],
-            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+        var htmlDom = doc.getElementsByTagName("html")[0],
+            resizeEvt = "orientationchange" in win ? "orientationchange" : "resize",
             recalc = function () {
-                requestAnimationFrame(()=>{
+                requestAnimationFrame(() => {
                     var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
                     if (!clientWidth) return;
-                    htmlDom.style.fontSize = clientWidth>=579 ? '144px' : 145 * (clientWidth / 579) + 'px';
+                    htmlDom.style.fontSize = clientWidth>=578.88 ? '144px' : 154.5 * (clientWidth / 578.88) + 'px';
                 })
             };
         if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
         doc.addEventListener('DOMContentLoaded', recalc, false);
-        setTimeout(()=>recalc(),10)
+        setTimeout(()=>recalc(),1000)
     })(document, window);
-}
+};

tailwind.config.ts

@@ -1,5 +1,10 @@
 import { nextui } from "@nextui-org/react";
 import type { Config } from "tailwindcss";
+
+const fontSize: any = Array.from({ length: 100 }).reduce((map: any, _, index) => {
+    map[index] = `${index}px`;
+    return map;
+}, {});
 const config: Config = {
     content: [
         "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -8,13 +13,8 @@ const config: Config = {
         "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
-        screens: {
-            sm: "480px",
-            md: "768px",
-            lg: "976px",
-            xl: "1440px",
-        },
         extend: {
+            fontSize,
             backgroundImage: {
                 "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                 "gradient-conic":
@@ -24,8 +24,20 @@ const config: Config = {
     },
     plugins: [
         nextui({
+            layout: {
+                fontSize: {
+                    // tiny: "10px", // text-tiny
+                    // small: "12px", // text-small
+                    // medium: "14px", // text-medium
+                    // large: "16px", // text-large
+                },
+            },
             themes: {
-                dark: {},
+                dark: {
+                    colors: {
+                        primary: "#ff6a01",
+                    },
+                },
                 light: {},
             },
         }),