footer公共组件开发

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

@@ -37,14 +37,14 @@ const Deposit: FC<PropsWithChildren<Props>> = (props) => {
                         <li className={amount==item?'active':''} key={index}>
                             <span className="hot"></span>
                             <div className="amountContent">
-                                <span className="iconfont icon-unit-brl"></span>
+                                {/* <span className="iconfont icon-unit-brl"></span> */}
+                                <span className="iconfont">R$</span>
                                 <span> {item}</span>
                             </div>
                             <span className="amountTips">Oferecer 100%</span>
                         </li>
                     ))
                 }
-        
             </ul>
             <div className="topUp">
                 <ButtonOwn active={amount>0?true:false}>Depositar Agora</ButtonOwn>

src/components/Footer/index.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { useRouter } from "@/i18n";
-import clsx from "clsx";
 import { FC, PropsWithChildren, ReactNode } from "react";
-import styles from "./style.module.scss";
+import clsx from "clsx";
+import "./style.scss";
 
 /**
- * @description 底部组件
+ * @description 底部Tab组件
  * @param footerPlaceholder 底部占位元素
  * @param footerRender 底部渲染元素
  *
@@ -16,18 +16,44 @@ export interface FooterProps {
 }
 
 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 className="footer-box">
+            <ul>
+                <li>
+                    <div className="icon-box">
+                        <span className="iconfont icon-home"></span>
+                    </div>
+                    <label>Início</label>
+                </li>
+                <li className="active">
+                    <div className="icon-box">
+                        <span className="iconfont icon-qianbao1"></span>
+                    </div>
+                    <label>Depósito</label>
+                </li>
+                <li>
+                    <div className="icon-box">
+                        <i className="icon-afiliado"></i>
+                        <i className="icon-rs"></i>
+                    </div>
+                    <label>Afiliado</label>
+                </li>
+                <li>
+                    <div className="icon-box">
+                        <span className="iconfont icon-tiyu"></span>
+                        <i className="icon-hot"></i>
+                    </div>
+                    <label>Esportes</label>
+                </li>
+                <li>
+                    <div className="icon-box">
+                        <span className="iconfont icon-yonghu"></span>
+                    </div>
+                    <label>Perfil</label>
+                </li>
+            </ul>
         </div>
     );
 };

src/components/Footer/style.module.scss

@@ -1,14 +0,0 @@
-
-.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/Footer/style.scss

@@ -0,0 +1,91 @@
+.footer-box {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  width: 100vw;
+  max-width: 4.02rem;
+  height: .6rem;
+  background-color: #292929;
+
+  ul {
+    width: 100%;
+    height: 100%;
+    padding-bottom: 0.12rem;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+
+    li {
+      position: relative;
+      width: 20%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      
+      &.active {
+
+        .icon-box {
+          position: relative;
+  
+          span {
+            color: #ff6a01;
+          }
+        }
+
+        label {
+          color: #ff6a01;
+        }
+      }
+
+      .icon-box {
+        position: relative;
+        width: 100%;
+        height: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+          font-size: .18rem;
+          color: #a7a7a7;
+        }
+
+        .icon-afiliado {
+          width: .55rem;
+          height: .55rem;
+          background: url('/imgs/iconTab/afiliado.png') no-repeat;
+          background-size: 100%;
+          margin-bottom: .05rem;
+        }
+
+        .icon-rs {
+          position: absolute;
+          bottom: -0.03rem;
+          right: 0.05rem;
+          font-size: .12rem;
+          width: .25rem;
+          height: .3rem;
+          background: url('/imgs/iconTab/rs.png') no-repeat;
+          background-size: 100%;
+        }
+
+        .icon-hot {
+          position: absolute;
+          top: -0.02rem;
+          right: 0.02rem;
+          font-size: .12rem;
+          width: .25rem;
+          height: .25rem;
+          background: url('/imgs/iconTab/hot.png') no-repeat;
+          background-size: 100%;
+        }
+      }
+
+      label {
+        font-size: .1rem;
+        color: #a7a7a7;
+      }
+    }
+  }
+}

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4617618 */
-  src: url('iconfont.woff2?t=1721376810409') format('woff2'),
-       url('iconfont.woff?t=1721376810409') format('woff'),
-       url('iconfont.ttf?t=1721376810409') format('truetype');
+  src: url('iconfont.woff2?t=1721442589809') format('woff2'),
+       url('iconfont.woff?t=1721442589809') format('woff'),
+       url('iconfont.ttf?t=1721442589809') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-HOT_32x16:before {
+  content: "\e64b";
+}
+
+.icon-HOT_xiaohao_24x12:before {
+  content: "\e648";
+}
+
+.icon-qianbao1:before {
+  content: "\e878";
+}
+
+.icon-home:before {
+  content: "\e61a";
+}
+
+.icon-tiyu:before {
+  content: "\e769";
+}
+
 .icon-huakuai:before {
   content: "\e767";
 }