注册登录页面布局

src/app/[locale]/(ordinary)/login/page.scss

@@ -1,148 +0,0 @@
-.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;
-    .title {
-      font-size: .18rem;
-      h2 {
-        color: #ff6a01;
-        text-align: center;
-      }
-    }
-    .otherAccount {
-      margin: .2rem 0 .1rem;
-      .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;
-          &.gg {
-            background-color: #06b594;
-          }
-          i {
-            width: .26rem;
-            height: .26rem;
-            margin-right: .13rem;
-            background-image: url('https://9f.com/img/gg.ef7c3bc6.svg');
-            background-size: 100% 100%;
-          }
-        }
-      }
-      .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;
-        span {
-          display: block;
-          margin: 0 .03rem;
-          font-size: .12rem;
-          color: #ddd;
-        }
-      }
-    }
-    .passwordInput {
-      margin: .13rem 0 .04rem;
-      .iconfont {
-        font-size: .16rem;
-      }
-      input {
-        text-indent: .23rem;
-      }
-    }
-    .phoneInput {
-      .after {
-        margin-left: .1rem;
-        font-size: .14rem;
-        color: #868686;
-      }
-      input {
-        padding-left: .14rem;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-      }
-    }
-    input {
-      flex: 1;
-      background-color: #494949;
-      height: .48rem;
-      color: #868686;
-      font-size: .14rem;
-      outline: none;
-      &::placeholder {
-        color: #868686;
-      }
-    }
-    .btnContent {
-      margin: .29rem 0 .19rem;
-      .tips {
-        text-align: center;
-        margin-bottom: .06rem;
-        color: #e53535;
-        font-size: 0.12rem;
-      }
-    }
-    .link {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-      justify-content: space-between;
-      .forgotText {
-        font-size: .12rem;
-        color: #fff;
-        text-align: center;
-        display: block;
-      }
-    }
-  }
-  .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 .or:after,.main .otherAccount .or:before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 0;
-    border-top: .01rem solid #666;
-  }
-  .main .phoneInput, .passwordInput {
-    width: 100%;
-    height: auto;
-    background-color: #494949;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-  }
-  

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

@@ -1,48 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import ButtonOwn from "@/components/ButtonOwn";
-import DomainFooter from "@/components/DomainFooter";
-import './page.scss'
-
-interface Props {}
-
-const Login: 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>
-                    <ButtonOwn active={true}>Login</ButtonOwn>
-                </div>
-                <div className="link">
-                    <span className="forgotText">Esqueci minha senha?</span>
-                    <span className="forgotText">Criar Conta Nova</span>
-                </div>
-            </div>
-            <DomainFooter />
-        </div>
-    );
-};
-
-export default Login;

src/app/[locale]/login/component/FromCom/index.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { FC, PropsWithChildren, useState } from "react";
+import clsx from "clsx";
+import ButtonOwn from "@/components/ButtonOwn";
+import "./style.scss";
+
+/**
+ * @description 登录注册From表单
+ * @param {string} type 使用类型
+ * @param {() => void} callbackFun 回调方法
+ */
+export interface FromComProps {
+    type?: string;
+    text?: string;
+    callbackFun?: () => void;
+}
+
+const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', callbackFun}) => {
+    let [visible, setVisible] = useState(false)
+
+    const spanClassName = clsx("iconfont", {
+        "icon-kejian": visible,
+        "icon-bukejian": !visible,
+    });
+
+    return (
+        <div className="FromCom">
+            <div className="phoneInput">
+                <span className="after">+55</span>
+                <input type="tel" placeholder="Número de Celular" maxLength={11}/>
+            </div>
+            <div className="passwordInput">
+                <input type={visible?'text':'password'} placeholder="Senha" />
+                <span className={spanClassName} onClick={() => setVisible(!visible)}></span>
+            </div>
+            <div className="btnContent">
+                <div className="tips"> O número de telefone não existe. </div>
+                <ButtonOwn active={true}>{type == 'login'? 'Login' : 'Criar conta'}</ButtonOwn>
+            </div>
+            <div className="link">
+                {
+                    type == 'login' ? (
+                        <>
+                            <span>Esqueci minha senha?</span>
+                            <span>Criar Conta Nova</span>
+                        </>
+                    ) : <span className="active">Já tem uma conta? Log in</span>
+                }     
+            </div>
+        </div>
+    );
+};
+
+export default FromCom;

src/app/[locale]/login/component/FromCom/style.scss

@@ -0,0 +1,84 @@
+.FromCom {
+  background-color: #1f1f1f;
+  padding: 0 .18rem;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  .passwordInput {
+    margin: .13rem 0 .04rem;
+    padding: 0 .23rem;
+
+    .iconfont {
+      margin-left: .05rem;
+      font-size: .18rem;
+      color: #000;
+    }
+  }
+
+  .phoneInput {
+    .after {
+      margin-left: .1rem;
+      font-size: .14rem;
+      color: #868686;
+    }
+    input {
+      padding-left: .14rem;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+  }
+  
+  input {
+    flex: 1;
+    background-color: #494949;
+    height: .48rem;
+    line-height: auto;
+    color: #868686;
+    font-size: .14rem;
+    outline: none;
+    &::placeholder {
+      color: #868686;
+    }
+  }
+
+  .btnContent {
+    margin: .29rem 0 .19rem;
+    .tips {
+      text-align: center;
+      margin-bottom: .06rem;
+      color: #e53535;
+      font-size: 0.12rem;
+    }
+  }
+
+  .link {
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+
+    span {
+      font-size: .12rem;
+      color: #fff;
+      text-align: center;
+      display: block;
+
+      &.active {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.FromCom .phoneInput, .FromCom .passwordInput {
+  width: 100%;
+  height: auto;
+  background-color: #494949;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-top: .16rem;
+}
+  

src/app/[locale]/login/component/GoogleCom/index.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import "./style.scss";
+
+/**
+ * @description 谷歌登录注册组件
+ * @param {string} title 标题
+ * @param {string} text 按钮文本
+ * @param {() => void} callbackFun 回调方法
+ */
+export interface GoogleComProps {
+    title?: string;
+    text?: string;
+    callbackFun?: () => void;
+}
+
+const GoogleCom: FC<PropsWithChildren<GoogleComProps>> = ({title = 'Bem Vindo ao 9F.COM', text = 'Entrar com Google+', callbackFun}) => {
+    return (
+        <div className="GoogleCom">
+            <div className="title"><h2>{title}</h2></div>
+            <div className="otherAccount">
+                <div className="ggAfb" onClick={callbackFun}>
+                    <span className="gg">
+                        <i></i> {text}
+                    </span>
+                </div>
+                <div className="or">
+                    <span>OU</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GoogleCom;

src/app/[locale]/login/component/GoogleCom/style.scss

@@ -0,0 +1,85 @@
+.GoogleCom {
+  background-color: #1f1f1f;
+  padding: .72rem .18rem 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  .title {
+    font-size: .16rem;
+
+    h2 {
+      color: #ff6a01;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .otherAccount {
+    margin: .2rem 0 .1rem;
+    
+    .ggAfb {
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+
+      span {
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -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;
+
+        &.gg {
+          background-color: #06b594;
+        }
+        i {
+          width: .26rem;
+          height: .26rem;
+          margin-right: .13rem;
+          background-image: url('https://9f.com/img/gg.ef7c3bc6.svg');
+          background-size: 100% 100%;
+        }
+      }
+    }
+
+    .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;
+
+      span {
+        display: block;
+        margin: 0 .03rem;
+        font-size: .12rem;
+        color: #ddd;
+      }
+
+      &:after,&:before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 0;
+        border-top: .01rem solid #666;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.login-box, .register-box {
+    width: 100%;
+    min-height: 100vh;
+    background-color: rgb(31, 31, 31);
+    display: flex;
+    flex-direction: column;
+}

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

@@ -0,0 +1,22 @@
+"use client";
+import { FC, PropsWithChildren } from "react";
+import HeaderBack from "@/components/HeaderBack";
+import GoogleCom from "./component/GoogleCom";
+import FromCom from "./component/FromCom";
+import DomainFooter from "@/components/DomainFooter";
+import './page.scss'
+
+interface Props {}
+
+const Login: FC<PropsWithChildren<Props>> = () => {
+    return (
+        <div className="login-box">
+            <HeaderBack />
+            <GoogleCom />
+            <FromCom />
+            <DomainFooter />
+        </div>
+    );
+};
+
+export default Login;

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

@@ -0,0 +1,22 @@
+"use client";
+import { FC, PropsWithChildren } from "react";
+import HeaderBack from "@/components/HeaderBack";
+import GoogleCom from "../login/component/GoogleCom";
+import FromCom from "../login/component/FromCom";
+import DomainFooter from "@/components/DomainFooter";
+import '../login/page.scss'
+
+interface Props {}
+
+const Register: FC<PropsWithChildren<Props>> = () => {
+    return (
+        <div className="register-box">
+            <HeaderBack />
+            <GoogleCom title="Bem-vindo à 9F.COM" text="Registre-se com Google+"/>
+            <FromCom type="register"/>
+            <DomainFooter />
+        </div>
+    );
+};
+
+export default Register;

src/components/ButtonOwn/index.tsx

@@ -7,6 +7,7 @@ import styles from "./style.module.scss";
  * @description 自定义button按钮
  * @param {any} children 插槽内容
  * @param {boolean} active 是否高亮
+ * @param {() => void} callbackFun 回调方法
  */
 export interface ButtonOwnProps {
     children?: any;
@@ -16,13 +17,12 @@ export interface ButtonOwnProps {
 }
 
 const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({children = '', active = false, callbackFun}) => {
-    const style = clsx({
+    const divClassName = clsx({
         [styles.button]: true,
         [styles.active]: active,
     });
-    
     return (
-        <div className={style} onClick={callbackFun}>{children}</div>
+        <div className={divClassName} onClick={callbackFun}>{children}</div>
     );
 };
 

src/components/DomainFooter/index.tsx

@@ -13,14 +13,14 @@ export interface DomainFooterProps {
 }
 
 const DomainFooter: FC<PropsWithChildren<DomainFooterProps>> = () => {
-    const style = clsx({
+    const spanClassName = clsx({
         [styles.iconfontIcon]: true,
     }, 'iconfont icon-a-18');
     return (
         <div className={styles['footer-box']}>
             <div className={styles.text}>
                 <span>© 9F.COM todos direitos reservados</span>
-                <span className={style}></span>
+                <span className={spanClassName}></span>
             </div>
         </div>
     );

src/components/DomainFooter/style.module.scss

@@ -23,7 +23,7 @@
 
     .iconfontIcon {
       color: #e53535;
-      font-size: .2rem;
+      font-size: .18rem;
     }
   }
 }

src/components/HeaderBack/index.tsx

@@ -9,7 +9,6 @@ import styles from "./style.module.scss";
  * @param {ReactNode} children 插槽内容
  * @param {() => ReactNode} headerRender 自定义渲染
  */
-
 export interface HeaderBackProps {
     title?: string;
     children?: ReactNode;
@@ -17,21 +16,21 @@ export interface HeaderBackProps {
 }
 
 const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({title = '', children}) => {
-    const icon1 = clsx({
+    const iconClassName1 = clsx({
         [styles.iconfontIcon1]: true,
     },'iconfont icon-xiangzuo1');
-    const icon2 = clsx({
+    const iconClassName2 = clsx({
         [styles.iconfontIcon2]: true,
     },'iconfont icon-company_nav_icon_home');
     return (
         <div className={styles.headerBack}>
             <div className={styles.left}>
-                <span className={icon1}></span>
+                <span className={iconClassName1}></span>
             </div>
             {title && <span className={styles.title}>{title}</span>}
             {children}
             <span className={styles.right}>
-                <span className={icon2}></span>
+                <span className={iconClassName2}></span>
             </span>
         </div>
     );

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1721355370286') format('woff2'),
-       url('iconfont.woff?t=1721355370286') format('woff'),
-       url('iconfont.ttf?t=1721355370286') format('truetype');
+  src: url('iconfont.woff2?t=1721359549912') format('woff2'),
+       url('iconfont.woff?t=1721359549912') format('woff'),
+       url('iconfont.ttf?t=1721359549912') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bukejian:before {
+  content: "\e62e";
+}
+
+.icon-kejian:before {
+  content: "\e61c";
+}
+
 .icon-company_nav_icon_home:before {
   content: "\e63b";
 }