域名说明Footer组件

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

@@ -164,34 +164,4 @@
     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

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 import ButtonOwn from "@/components/ButtonOwn";
+import DomainFooter from "@/components/DomainFooter";
 import './page.css'
 
 interface Props {}
@@ -8,7 +9,6 @@ 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">
@@ -40,13 +40,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                     <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>
-            
+            <DomainFooter />
         </div>
     );
 };

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

@@ -100,34 +100,4 @@
     background: linear-gradient(180deg, #ff9323, #ff6a01);
     cursor: pointer;
     opacity: 1;
-}
-
-.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]/resetPhone/page.tsx

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 import ButtonOwn from "@/components/ButtonOwn";
+import DomainFooter from "@/components/DomainFooter";
 import './page.css'
 import React from "react";
 
@@ -24,13 +25,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                     <ButtonOwn active={true}>Continuar</ButtonOwn>
                 </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>
-            
+            <DomainFooter />
         </div>
     );
 };

src/components/ButtonOwn/style.module.scss

@@ -15,13 +15,13 @@
   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;
+  &.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;
+  }
 }

src/components/DomainFooter/index.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React, { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import styles from "./style.module.scss";
+
+/**
+ * @description 域名说明Footer组件
+ * @param {any} children 插槽内容
+ */
+export interface FooterProps {
+    children?: any;
+    [props: string]: any
+}
+
+const DomainFooter: FC<PropsWithChildren<FooterProps>> = (props) => {
+    const style = 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>
+            </div>
+        </div>
+    );
+};
+
+export default DomainFooter;

src/components/DomainFooter/style.module.scss

@@ -0,0 +1,29 @@
+.footer-box {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+
+  .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;
+
+    .iconfontIcon {
+      color: #e53535;
+      font-size: .2rem;
+    }
+  }
+}