update

update（修改页面）
注册页
2024-05-22 18:47:27 +08:00 · 2024-05-22 18:34:41 +08:00 · 2024-05-22 17:41:51 +08:00
26 changed files with 3593 additions and 1888 deletions
--- a/.env.development
+++ b/.env.development
@ -1,2 +1,4 @@
 VITE_APP_DEV = 'dev-api'
-VITE_API_URL = 'http://192.168.10.166:8096'
+# VITE_API_URL = 'http://192.168.10.166:8096'
 # VITE_API_URL = 'https://8.217.122.133:10020'
 VITE_API_URL = 'https://api.pineer.cc'
--- a/.env.production
+++ b/.env.production
@ -1,2 +1,4 @@
 VITE_APP_DEV = 'prod-api'
-VITE_API_URL = 'http://192.168.10.166:8096'
+# VITE_API_URL = 'http://192.168.10.166:8096'
 # VITE_API_URL = 'https://8.217.122.133:10020'
 VITE_API_URL = 'https://api.pineer.cc'
--- a/.yarn/install-state.gz
+++ b/.yarn/install-state.gz
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -0,0 +1 @@
 nodeLinker: node-modules
--- a/index.html
+++ b/index.html
@ -1,10 +1,16 @@
-<!doctype html>
+<!--
 * @LastEditors: John
 * @Date: 2024-05-22 18:06:14
 * @LastEditTime: 2024-05-22 18:43:14
 * @Author: John
 -->
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/assets/img/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>NEER-APP-H5</title>
+    <title>Pioneer</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "react-i18next": "^14.0.1",
    "react-router-dom": "^6.21.3",
    "sass": "^1.70.0",
    "ts-md5": "^1.3.1",
    "zustand": "^4.5.0"
  },
  "devDependencies": {
--- a/src/App.css
+++ b/src/App.css
@ -1,8 +1,6 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
-  margin: 0 auto;
+  /* margin: 0 auto; */
  padding: 2rem;
  text-align: center;
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,17 +1,23 @@
 /*
 * @LastEditors: John
 * @Date: 2024-05-22 18:06:14
 * @LastEditTime: 2024-05-22 18:45:10
 * @Author: John
 */
 import "./App.css";
 import { useEffect } from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { HashRouter as Router, Route, Routes } from "react-router-dom";
 import SignIn from "./pages/SignIn";
 import Download from "./pages/Download";
 import SelectCountry from "./pages/SelectCountry";
 import { useTranslation } from "react-i18next";
 function App() {
-  const {i18n} = useTranslation()
+  const { i18n } = useTranslation();
-  const lang:string = navigator.language.split('-')[1].toLocaleLowerCase()
+  const lang: string = navigator.language.split("-")[1].toLocaleLowerCase();
-  useEffect(()=>{    
+  useEffect(() => {
-    i18n.changeLanguage(lang)
+    i18n.changeLanguage("en");
-  },[ i18n,lang])
+  }, [i18n, lang]);
  return (
    <Router>
      <div>
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -2,13 +2,27 @@ import { request } from "./request";
 import { AxiosRequestConfig } from 'axios';
 //发送验证码
-export const sendCode = <T>(params: any,config:AxiosRequestConfig) =>
+export const sendCode = <T>(params: {
  areaCode?: string; // 区号，只有手机号才有
  account: string; // 账号（邮箱或手机号）
  status: 1 | 2; // 1=登录 2=注册
  signature: string;
  timestamp: string;
 },config:AxiosRequestConfig) =>
  request.get<T>("/api/account/sendVerificationCode", params, {
    timeout: 15000,
    ...config
  });
 //注册
-export const signUp = <T>(params: any,config:AxiosRequestConfig) =>
+export const signUp = <T>(params: {
  account: string; // account
  area?: string; // 顶级区域：朝鲜/平壤、中国/广东
  areaCode?: string; // 区号，只有手机号才有
  authCode: string; // 验证码
  district?: string; // 二级区域：具体的区域
  shareCode: string; // invitation code
  userName: string; // 用户名称
 },config:AxiosRequestConfig) =>
  request.post<T>("/api/account/signUp", params, {
    timeout: 15000,
    ...config
--- a/src/assets/iconfont/email.svg
+++ b/src/assets/iconfont/email.svg
@ -9,7 +9,7 @@
        <g>
            <path
                d="M15.38570390625,3.583333L2.33317390625,3.583333C2.2623339062500003,3.583333,2.19317390625,3.592083,2.12692390625,3.6091670000000002L8.449003906249999,9.93083C8.61171390625,10.09349,8.87546390625,10.09349,9.03817390625,9.93083L15.38570390625,3.583333ZM16.28690390625,3.86042L11.19520390625,8.952079999999999L16.33070390625,14.0871C16.436903906250002,13.9471,16.49980390625,13.7725,16.49980390625,13.5833L16.49980390625,4.41667C16.49980390625,4.20292,16.41940390625,4.00833,16.28730390625,3.86042L16.28690390625,3.86042ZM15.48150390625,14.4167L10.60650390625,9.54125L9.62733390625,10.52042C9.13916390625,11.00867,8.347593906250001,11.00867,7.85942390625,10.52042L6.88067390625,9.54125L2.05400390625,14.3688C2.14150390625,14.3996,2.23525390625,14.4167,2.33358390625,14.4167L15.48190390625,14.4167L15.48150390625,14.4167ZM1.51275390625,13.7308L6.29150390625,8.95167L1.5306709062500001,4.19167C1.51018390625,4.26491,1.4998099062499999,4.34061,1.49983690625,4.41667L1.49983690625,13.5833C1.49983690625,13.6333,1.50400390625,13.6829,1.51275390625,13.7308ZM2.33317390625,2.75L15.66650390625,2.75C16.58700390625,2.75,17.33320390625,3.4961919999999997,17.33320390625,4.41667L17.33320390625,13.5833C17.33320390625,14.5038,16.58700390625,15.25,15.66650390625,15.25L2.33317390625,15.25C1.41269590625,15.25,0.66650390625,14.5038,0.66650390625,13.5833L0.66650390625,4.41667C0.666503757238,3.4961919999999997,1.41269590625,2.75,2.33317390625,2.75Z"
-                fill="#333333" fill-opacity="1" />
+                fill="#999999" fill-opacity="1" />
        </g>
    </g>
 </svg>
--- a/src/assets/iconfont/email_Select.svg
+++ b/src/assets/iconfont/email_Select.svg
@ -9,7 +9,7 @@
        <g>
            <path
                d="M15.38570390625,3.583333L2.33317390625,3.583333C2.2623339062500003,3.583333,2.19317390625,3.592083,2.12692390625,3.6091670000000002L8.449003906249999,9.93083C8.61171390625,10.09349,8.87546390625,10.09349,9.03817390625,9.93083L15.38570390625,3.583333ZM16.28690390625,3.86042L11.19520390625,8.952079999999999L16.33070390625,14.0871C16.436903906250002,13.9471,16.49980390625,13.7725,16.49980390625,13.5833L16.49980390625,4.41667C16.49980390625,4.20292,16.41940390625,4.00833,16.28730390625,3.86042L16.28690390625,3.86042ZM15.48150390625,14.4167L10.60650390625,9.54125L9.62733390625,10.52042C9.13916390625,11.00867,8.347593906250001,11.00867,7.85942390625,10.52042L6.88067390625,9.54125L2.05400390625,14.3688C2.14150390625,14.3996,2.23525390625,14.4167,2.33358390625,14.4167L15.48190390625,14.4167L15.48150390625,14.4167ZM1.51275390625,13.7308L6.29150390625,8.95167L1.5306709062500001,4.19167C1.51018390625,4.26491,1.4998099062499999,4.34061,1.49983690625,4.41667L1.49983690625,13.5833C1.49983690625,13.6333,1.50400390625,13.6829,1.51275390625,13.7308ZM2.33317390625,2.75L15.66650390625,2.75C16.58700390625,2.75,17.33320390625,3.4961919999999997,17.33320390625,4.41667L17.33320390625,13.5833C17.33320390625,14.5038,16.58700390625,15.25,15.66650390625,15.25L2.33317390625,15.25C1.41269590625,15.25,0.66650390625,14.5038,0.66650390625,13.5833L0.66650390625,4.41667C0.666503757238,3.4961919999999997,1.41269590625,2.75,2.33317390625,2.75Z"
-                fill="#BF62FF" fill-opacity="1" />
+                fill="#FCB44B" fill-opacity="1" />
        </g>
    </g>
 </svg>
--- a/src/assets/iconfont/phone.svg
+++ b/src/assets/iconfont/phone.svg
--- a/src/assets/iconfont/phone_Select.svg
+++ b/src/assets/iconfont/phone_Select.svg
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/components/EmailForm.tsx
+++ b/src/components/EmailForm.tsx
@ -1,20 +1,26 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, Button } from "antd-mobile";
 import "../pages/SignIn.scss";
 import { useCountdown } from "../hooks/useCountdown";
 import { sendCode, signUp } from "../api";
-import { sendCodeTypes, signUpTypes,ErrorType } from "../type/SignIn";
+import { sendCodeTypes, signUpTypes, ErrorType } from "../type/SignIn";
 import { Toast } from "antd-mobile";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Md5 } from "ts-md5";
 function EmailForm() {
  const formRef: any = useRef()
  const location = useLocation()
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { start, time } = useCountdown();
  const [email, setEmail] = useState("");
  const [authCode, setAuthCode] = useState("");
  const [shareCode, setShareCode] = useState("");
  const [remainingTime, setRemainingTime] = useState(0);
  const config = {
    headers: {
      "Accept-Language": navigator.language,
@ -25,11 +31,16 @@ function EmailForm() {
      if (email === "") {
        return;
      }
      const timestamp = `${new Date().getTime()}`;
      const res = await sendCode<sendCodeTypes>(
        {
          account: email,
          areaCode: "",
          status: 2,
          signature: Md5.hashStr(
            `Neer${email},${2},${timestamp}GetCode`
          ),
          timestamp
        },
        config
      );
@ -45,11 +56,11 @@ function EmailForm() {
        Toast.show({
          content: t('Send failure'),
          afterClose: () => {
-            start(60 * 1000);
+            // start(60 * 1000);
          },
        });
      }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
      // 检查 error 是否是 ErrorType 类型
      if (typeof error === 'object' && error !== null && 'msg' in error) {
        const typedError = error as ErrorType; // 使用类型断言
@ -66,9 +77,26 @@ function EmailForm() {
      console.warn(error);
    }
  };
  const getShareCode = (url: string) => {
    const newStr = url.replace('?', '')?.split('&')
    if (!newStr) return ''
    const shareStr = newStr.find(item => item.includes('shareCode'))
    if (!shareStr) return ''
    if (shareStr) {
      const code = shareStr.split('=')[1]
      if (code) {
        // setShareCode(code)
        return code
      }
    }
    return ''
  }
  useEffect(() => {
    setRemainingTime(time / 1000);
  }, [time]);
  const handleSignUp = async () => {
    if (email === "" || authCode === "") {
      return;
@ -80,21 +108,26 @@ function EmailForm() {
          area: "",
          areaCode: "",
          authCode: authCode,
-          shareCode: shareCode,
+          shareCode: shareCode || formRef.current?.getFieldValue('shareCode'),
          userName: ""
        },
        config
      );
      console.log("res", res);
      if (res.status === 200 && res.data.data.token) {
        console.log(111)
        Toast.show({
          content: res.data.msg,
        });
        setTimeout(() => {
          navigate("/Download")
        }, 1000)
      } else {
        Toast.show({
          content: res.data.msg,
        });
      }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
      // 检查 error 是否是 ErrorType 类型
      if (typeof error === 'object' && error !== null && 'msg' in error) {
        const typedError = error as ErrorType; // 使用类型断言
@ -110,7 +143,11 @@ function EmailForm() {
  };
  return (
    <Form
      ref={formRef}
      name="form"
      initialValues={{
        shareCode: getShareCode(location.search)
      }}
      footer={
        <Button
          block
--- a/src/components/PhoneForm.tsx
+++ b/src/components/PhoneForm.tsx
@ -1,15 +1,17 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, Button } from "antd-mobile";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import "../pages/SignIn.scss";
 import useUserStore from "../store/user.ts";
 import { useCountdown } from "../hooks/useCountdown";
 import { sendCode, signUp } from "../api";
-import { sendCodeTypes, signUpTypes,ErrorType} from "../type/SignIn";
+import { sendCodeTypes, signUpTypes, ErrorType } from "../type/SignIn";
 import { Toast } from "antd-mobile";
-
+import { Md5 } from "ts-md5";
 function PhoneForm() {
  const formRef: any = useRef()
  const location = useLocation()
  const { t } = useTranslation();
  const { start, time } = useCountdown();
  const navigate = useNavigate();
@ -19,6 +21,22 @@ function PhoneForm() {
    UpdateCurrentPhoneNumber,
    UpdatePreviousPathName,
  } = useUserStore();
  const getShareCode = (url: string) => {
    const newStr = url.replace('?', '')?.split('&')
    if (!newStr) return ''
    const shareStr = newStr.find(item => item.includes('shareCode'))
    if (!shareStr) return ''
    if (shareStr) {
      const code = shareStr.split('=')[1]
      if (code) {
        // setShareCode(code)
        return code
      }
    }
    return ''
  }
  const defaultAreaCode = "+1";
  const [authCode, setAuthCode] = useState("");
  const [shareCode, setShareCode] = useState("");
@ -41,15 +59,21 @@ function PhoneForm() {
      if (CurrentPhoneNumber === "") {
        return;
      }
      const timestamp = `${new Date().getTime()}`;
      const res = await sendCode<sendCodeTypes>({
        account: CurrentPhoneNumber,
-        areaCode: SelectCountry?.code,
+        areaCode: SelectCountry?.code || defaultAreaCode,
        status: 2,
-      },config);
+        signature: Md5.hashStr(
          `Neer${CurrentPhoneNumber},${2},${timestamp}GetCode`
        ),
        timestamp
      }, config);
      console.log("res", res);
      if (res.status === 200 && res.data.data.sms) {
        console.log(111)
        Toast.show({
-          content:t('send successfully'),
+          content: t('send successfully'),
          afterClose: () => {
            start(60 * 1000);
          },
@ -58,11 +82,11 @@ function PhoneForm() {
        Toast.show({
          content: t('Send failure'),
          afterClose: () => {
-            start(60 * 1000);
+            // start(60 * 1000);
          },
        });
      }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
      // 检查 error 是否是 ErrorType 类型
      if (typeof error === 'object' && error !== null && 'msg' in error) {
        const typedError = error as ErrorType; // 使用类型断言
@ -83,29 +107,33 @@ function PhoneForm() {
    setRemainingTime(time / 1000)
  }, [time]);
-  const handleSignUp = async () =>{    
+  const handleSignUp = async () => {
-    if(CurrentPhoneNumber === '' || authCode === '') {
+    if (CurrentPhoneNumber === '' || authCode === '') {
-     return
+      return
    }
    try {
      const res = await signUp<signUpTypes>({
-        account:CurrentPhoneNumber,
+        account: CurrentPhoneNumber,
-        area:SelectCountry?.cn,
+        area: SelectCountry?.cn,
-        areaCode:SelectCountry?.code,
+        areaCode: SelectCountry?.code,
-        authCode:authCode,
+        authCode: authCode,
-        shareCode:shareCode
+        shareCode: shareCode || formRef.current?.getFieldValue('shareCode'),
-      },config)
+        userName: ""
-      console.log('res',res)
+      }, config)
-      if(res.status === 200 && res.data.data.token) {
+      console.log('res', res)
      if (res.status === 200 && res.data.data.token) {
        Toast.show({
          content: res.data.msg,
        })
-      }else {
+        setTimeout(() => {
          navigate("/Download")
        }, 1000)
      } else {
        Toast.show({
          content: res.data.msg,
        })
      }
-    } catch (error:unknown) {
+    } catch (error: unknown) {
      // 检查 error 是否是 ErrorType 类型
      if (typeof error === 'object' && error !== null && 'msg' in error) {
        const typedError = error as ErrorType; // 使用类型断言
@ -124,6 +152,9 @@ function PhoneForm() {
  return (
    <Form
      name="form"
      initialValues={{
        shareCode: getShareCode(location.search)
      }}
      footer={
        <Button
          block
--- a/src/i18n/cn/translation.json
+++ b/src/i18n/cn/translation.json
@ -1,24 +1,23 @@
 {
-    "E-mail": "电子邮件",
+  "E-mail": "電子郵件",
-    "phone":"电话",
+  "phone": "電話",
-    "Please enter your email address":"请输入您的电子邮件地址",
+  "Please enter your email address": "請輸入您的電子郵件地址",
-    "Please enter the email verification code":"请输入电子邮件验证码",
+  "Please enter the email verification code": "請輸入電子郵件驗證碼",
-    "Please enter your phone number":"请输入您的电话号码",
+  "Please enter your phone number": "請輸入您的電話號碼",
-    "Please enter SMS verification code":"请输入短信验证码",
+  "Please enter SMS verification code": "請輸入短信驗證碼",
-    "Send verification code":"发送验证码",
+  "Send verification code": "發送驗證碼",
-    "Please enter the invitation code (optional)":"请输入邀请码(可选)",
+  "Please enter the invitation code (optional)": "請輸入邀請碼(可選)",
-    "register":"注册",
+  "register": "注冊",
-    "If you already have an account":"如果你已经有一个帐户",
+  "If you already have an account": "已有帳戶",
-    "download the APP directly":"直接下载APP",
+  "download the APP directly": "直接下載APP",
-    "Continuing to represent you in agreeing to our":"继续代表你方同意我们的",
+  "Continuing to represent you in agreeing to our": "繼續代表妳方同意我們的",
-    "Terms of Service":"服务条款",
+  "Terms of Service": "服務條款",
-    "and":"和",
+  "and": "和",
-    "Privacy Policy":"隐私政策",
+  "Privacy Policy": "隱私政策",
-    "Select country/region":"选择国家/地区",
+  "Select country/region": "選擇國家/地區",
-    "seconds":  "秒",
+  "seconds": "秒",
-    "Official Website":"官方网站",
+  "Official Website": "官方網站",
-    "Download":"下载",
+  "Download": "下載",
-    "send successfully":"发送成功",
+  "send successfully": "發送成功",
-    "Send failure":"发送失败"
+  "Send failure": "發送失敗"
-  }
+}
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@ -7,7 +7,7 @@
  "Please enter SMS verification code":"Please enter SMS verification code",
  "Send verification code":"Send verification code",
  "Please enter the invitation code (optional)":"Please enter the invitation code (optional)",
-  "register":"register",
+  "register":"Register",
  "If you already have an account":"If you already have an account",
  "download the APP directly":"download the APP directly",
  "Continuing to represent you in agreeing to our":"Continuing to represent you in agreeing to our",
--- a/src/index.css
+++ b/src/index.css
@ -1,5 +1,5 @@
-:
+body,
- {
+html {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
@ -13,16 +13,19 @@
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 #root {
  padding: 0;
  background: #fafafb;
 }
 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
 }
 a:hover {
  color: #535bf2;
 }
@ -51,22 +54,30 @@ button {
  cursor: pointer;
  transition: border-color 0.25s;
 }
 button:hover {
  border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
 }
 .adm-form-item-feedback-error {
  text-align: left;
 }
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
--- a/src/pages/Download.scss
+++ b/src/pages/Download.scss
@ -1,5 +1,5 @@
 .container {
-    background: #fafafb;
+    background: #131313;
    width: 100vw;
    min-height: 100vh;
    padding: 4.625rem 2.5rem;
@ -18,12 +18,16 @@
    .btn-box {
        margin-top: 11.4375rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .btn-item {
            width: 18.4375rem;
            height: 2.75rem;
            border-radius: .3125rem;
            box-sizing: border-box;
-            border: .0625rem solid #BF62FF;
+            border: .0625rem solid #FCB44B;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
@ -36,7 +40,7 @@
            a {
                font-family: PingFang SC;
                font-size: 1.125rem;
-                color: #333333;
+                color: #ffffff;
            }
        }
    }
--- a/src/pages/Download.tsx
+++ b/src/pages/Download.tsx
@ -1,5 +1,5 @@
-import googleIcon from '../assets/img/google.png'
+// import googleIcon from '../assets/img/google.png'
-import appStoreIcon from '../assets/img/app_store.png'
+// import appStoreIcon from '../assets/img/app_store.png'
 import { useTranslation } from "react-i18next";
 import Logo from "../assets/img/logo.png"
@ -14,19 +14,19 @@ function Download() {
        <img src={Logo} alt="" />
      </div>
      <div className="btn-box">
-        <div className="btn-item">
+        {/* <div className="btn-item">
            <img src={googleIcon}alt="" />
-            <a href="">Google Play</a>
+            <a>Google Play</a>
        </div>
        <div className="btn-item">
            <img src={appStoreIcon} alt="" />
-            <a href="">App Store</a>
+            <a>App Store</a>
        </div> */}
        <div className="btn-item">
            <a href="https://d.pineer.cc/app-release.apk">{t('Download')} APK</a>
        </div>
        <div className="btn-item">
-            <a href="http://8.217.122.133/upload/apk/app-release.apk">{t('Download')} APK</a>
+            <a href="https://www.pineer.cc">{t('Official Website')}</a>
        </div>
        <div className="btn-item">
            <a href="">{t('Official Website')}</a>
        </div>
      </div>
    </div>
--- a/src/pages/SelectCountry.scss
+++ b/src/pages/SelectCountry.scss
@ -55,7 +55,7 @@
            }
        }
        .area-box {
-            overflow: scroll;
+            overflow-y: scroll;
            height: calc(100vh - 7.5rem);
            padding: 0 1.5rem;
            box-sizing: border-box;
@ -69,8 +69,8 @@
                line-height: 3.25rem;
                border-bottom: .0625rem solid #D8D8D8;
                &.selected {
-                    border-bottom: .0625rem solid  #BF62FF;
+                    border-bottom: .0625rem solid  #FCB44B;
-                    color: #BF62FF;
+                    color: #FCB44B;
                }
            }
        }
--- a/src/pages/SignIn.scss
+++ b/src/pages/SignIn.scss
@ -1,15 +1,32 @@
 .popoverContainer {
  .adm-popover-inner {
    .adm-popover-inner-content {
      padding: 0 !important;
    }
  }
 }
 .container {
  background: #fafafb;
  width: 100vw;
  min-height: 100vh;
  padding: 4.625rem 2.5rem;
  box-sizing: border-box;
  position: relative;
  .language {
    position: absolute;
    right: 3rem;
    top: 2rem;
    color: #fff;
  }
  .logo {
    width: 4.25rem;
    height: 4.25rem;
    margin-left: 50%;
    transform: translateX(-50%);
    img {
      width: 100%;
      height: 100%;
@ -26,14 +43,16 @@
      font-size: 18px;
      font-weight: normal;
      line-height: normal;
-      color: #333333;
+      color: #999999;
      display: flex;
      align-items: center;
      margin-right: 2.0625rem;
      &.selected {
-        border-bottom: .0625rem solid #BF62FF;
+        border-bottom: .0625rem solid #FCB44B;
-        color:#BF62FF;
+        color: #FCB44B;
      }
      img {
        margin-right: .4375rem;
      }
@ -47,16 +66,19 @@
  }
  .adm-list-item {
-    background: #FFFFFF;
+    background: #333333;
    margin-bottom: 1.7rem;
    width: 100%;
    height: 2.75rem;
    border-radius: .3125rem;
    box-sizing: border-box;
-    border: 1px solid #999999 !important;
+    border: 1px solid #56512c !important;
-    box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 50%);
+    // box-shadow: 0px 2px 5px 0px rgba(153, 153, 153, 50%);
    padding-left: 0;
    .adm-input-element {
      color: #c6c6c6;
      &::placeholder {
        font-size: .75rem;
        color: #999999
@ -67,55 +89,70 @@
  .adm-list-item-content {
    border-style: none;
  }
  .adm-list-item-content-main {
    padding: 0;
  }
  .adm-input {
-    padding: .75rem 0;
+    padding: 0.5rem 0 0.6rem 0;
    padding-left: .625rem;
  }
  .send-code {
    font-family: PingFang SC;
    font-size: .75rem;
-    color: #BF62FF;
+    color: #0957c0;
-    margin-bottom:.9375rem;
+    margin-bottom: 1.5375rem;
    margin-top: -0.5rem;
    text-align: right;
  }
  .adm-form-footer {
    display: flex;
    justify-content: center;
  }
  .submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.1875rem;
    height: 2.75rem;
    border-radius: .3125rem;
-    background: #BF62FF;
+    background: #FCB44B;
    font-family: PingFang SC;
    font-size: .75rem;
-    color: #FFFFFF;
+    color: #333;
  }
  .to-download {
    font-family: PingFang SC;
    font-size: .875rem;
-    color: #BF62FF;
+    color: #0957c0;
  }
  .terms-service {
    font-family: PingFang SC;
    font-size: .75rem;
    text-align: center;
    width: 100%;
    margin-top: 5rem;
    p {
      color: #999999;
    }
-    span {
+
-      color:#BF62FF;
+    span>a {
      color: #0957c0;
    }
  }
  .phone-box {
    display: flex;
    align-items: center;
    border-radius: .3125rem;
    span {
      width: 3.75rem;
      height: 2.6rem;
@ -123,18 +160,17 @@
      text-align: center;
      font-family: PingFang SC;
      font-size: .75rem;
-      color: #666666;
+      color: #c6c6c6;
-      background: #EAEAEA;
+      background: #333333;
-      border-right: .0625rem solid #999999;
+      border-right: .0625rem solid #5d5d5d;
      border-left: .0625rem solid #999999;
      border-bottom: .0625rem solid #999999;
      border-top-left-radius: .3125rem;
      border-bottom-left-radius: .3125rem;
    }
    .adm-input {
-      padding-top: 0.55rem;
+      padding-top: 0rem;
      padding-left: 0.625rem;
-      padding-bottom: 0;
+      padding-bottom: 0.1rem;
    }
  }
 }
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, getI18n } from "react-i18next";
 import phoneIconSelect from "../assets/iconfont/phone_Select.svg";
 import phoneIcon from "../assets/iconfont/phone.svg";
 import emailIcon from "../assets/iconfont/email.svg";
@ -10,13 +10,15 @@ import EmailForm from "../components/EmailForm";
 import PhoneForm from "../components/PhoneForm";
 import { useNavigate } from "react-router-dom";
 import useUserStore from "../store/user.ts";
 import { Popover } from "antd-mobile";
 console.log('language',navigator.language)
 function SignIn() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
  const lang: string = getI18n().language
  const [visible, setVisible] = useState(false)
  const [selectIndex, setSelectIndex] = useState<number>(0);
-  const {previousPathName,UpdatePreviousPathName} = useUserStore()
+  const { previousPathName, UpdatePreviousPathName } = useUserStore()
  const navigate = useNavigate();
  const handleTabs = (num: number) => {
    return () => {
@ -25,15 +27,48 @@ function SignIn() {
    };
  };
  useEffect(() => {
-      // 当组件加载时，保存当前路径
+    // 当组件加载时，保存当前路径
-      console.log("previousPathName", previousPathName);
+    console.log("previousPathName", previousPathName);
-      if (previousPathName === "/SelectCountry") {
+    if (previousPathName === "/SelectCountry") {
-        setSelectIndex(1);
+      setSelectIndex(1);
-      }
+    }
  }, [previousPathName]);
  return (
    <div className="container">
      <div className="language">
        <Popover
          className="popoverContainer"
          mode='dark'
          visible={visible}
          placement='bottom-end'
          trigger='click'
          content={<ul style={{
            listStyle: 'none',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-start',
            alignItems: 'center',
            margin: 0,
            padding: '5px 10px',
            fontSize: 14,
            background: '#333333',
            borderRadius: 6
          }}>
            <li style={{ borderBottom: '1px solid #2f2f2f', padding: '5px 10px', cursor: 'pointer' }}><span onClick={() => {
              i18n.changeLanguage('cn')
              setVisible(false)
            }}>中文（繁体）</span></li>
            <li style={{ padding: '5px 10px', cursor: 'pointer' }}><span onClick={() => {
              i18n.changeLanguage('en')
              setVisible(false)
            }}>English</span></li>
          </ul>}
        >
          <span style={{ cursor: 'pointer' }} onClick={() => setVisible(!visible)}>{lang === 'cn' ? '中文' : 'English'}</span>
        </Popover>
      </div>
      <div className="logo">
        <img src={Logo} alt="" />
      </div>
@ -55,15 +90,15 @@ function SignIn() {
      </div>
      {selectIndex === 0 && <EmailForm></EmailForm>}
      {selectIndex === 1 && <PhoneForm></PhoneForm>}
-      <div className="to-download" onClick={()=> navigate("/Download")}>
+      <div className="to-download">
-        <p>{t("If you already have an account")}</p>
+        <p style={{ color: '#999999' }}>{t("If you already have an account")}</p>
-        <p>{t("download the APP directly")}</p>
+        <p onClick={() => navigate("/Download")}>{t("Download the APP directly")}</p>
      </div>
      <div className="terms-service">
        <p>{t("Continuing to represent you in agreeing to our")}</p>
        <p>
-          <span>{t("Terms of Service")}</span> {t("and")}{" "}
+          <span><a target="_blank" href="https://lm0-1.gitbook.io/terms-of-service/">{t("Terms of Service")}</a></span> {t("and")}{" "}
-          <span>{t("Privacy Policy")}</span>
+          <span><a target="_blank" href="https://lm0-1.gitbook.io/privacy-policy/">{t("Privacy Policy")}</a></span>
        </p>
      </div>
    </div>
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
john	2173394a71	update	2024-05-22 18:47:27 +08:00
john	7d465ca568	update（修改页面）	2024-05-22 18:34:41 +08:00
xia.zhang	d6ebf4aef5	注册页	2024-05-22 17:41:51 +08:00