自定义头部返回组件

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

@@ -1,4 +1,6 @@
 import Footer from "@/components/Footer";
+import HeaderBack from "@/components/HeaderBack";
+
 import { getMessages } from "next-intl/server";
 import { ReactNode } from "react";
 export default async function LocaleLayout({
@@ -11,7 +13,7 @@ export default async function LocaleLayout({
     const messages = await getMessages();
     return (
         <div>
-            <div>header back</div>
+            <HeaderBack />
             {children}
             <Footer />
         </div>

src/components/ButtonOwn/index.tsx

@@ -15,8 +15,7 @@ export interface ButtonProps {
     [props: string]: any
 }
 
-const ButtonOwn: FC<PropsWithChildren<ButtonProps>> = (props) => {
-    const { children = '', active = false, callbackFun } = props;
+const ButtonOwn: FC<PropsWithChildren<ButtonProps>> = ({children = '', active = false, callbackFun}) => {
     const style = clsx({
         [styles.button]: true,
         [styles.active]: active,

src/components/DomainFooter/index.tsx

@@ -12,7 +12,7 @@ export interface FooterProps {
     [props: string]: any
 }
 
-const DomainFooter: FC<PropsWithChildren<FooterProps>> = (props) => {
+const DomainFooter: FC<PropsWithChildren<FooterProps>> = () => {
     const style = clsx({
         [styles.iconfontIcon]: true,
     }, 'iconfont icon-a-18');

src/components/HeaderBack/index.tsx

@@ -0,0 +1,36 @@
+import { FC, PropsWithChildren, ReactNode } from "react";
+import clsx from "clsx";
+import styles from "./style.module.scss";
+
+/**
+ * @description 自定义头部返回组件
+ * @param {string} title header标题
+ * @param {() => ReactNode} headerRender 自定义渲染
+ */
+
+export interface HeaderProps {
+    title?: string;
+    headerRender?: () => ReactNode;
+}
+
+const Header: FC<PropsWithChildren<HeaderProps>> = ({title = ''}) => {
+    const icon1 = clsx({
+        [styles.iconfontIcon1]: true,
+    },'iconfont icon-xiangzuo1');
+    const icon2 = clsx({
+        [styles.iconfontIcon2]: true,
+    },'iconfont icon-company_nav_icon_home');
+    return (
+        <div className={styles.headerBack}>
+            <div className={styles.left}>
+                <span className={icon1}></span>
+            </div>
+            <span className={styles.title}>{title}</span>
+            <span className={styles.right}>
+                <span className={icon2}></span>
+            </span>
+        </div>
+    );
+};
+
+export default Header;

src/components/HeaderBack/style.module.scss

@@ -0,0 +1,41 @@
+
+.headerBack {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: .44rem;
+  background-color: #000;
+  padding: 0 .14rem;
+  box-sizing: border-box;
+  transform: translateZ(0);
+  display: flex;
+  align-items: center;
+
+  .iconfontIcon1 {
+    color: #fff;
+    width: .4rem;
+    font-size: .22rem;
+  }
+
+  .iconfontIcon2 {
+    color: #fff;
+    width: .4rem;
+    font-size: .26rem;
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+  }
+
+  .title {
+    color: #fff;
+    font-size: .16rem;
+    width: 100%;
+  }
+
+  .right {
+    width: .4rem;
+    text-align: right;
+  }
+}

src/styles/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @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');
+  src: url('iconfont.woff2?t=1721355370286') format('woff2'),
+       url('iconfont.woff?t=1721355370286') format('woff'),
+       url('iconfont.ttf?t=1721355370286') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-company_nav_icon_home:before {
+  content: "\e63b";
+}
+
+.icon-vip:before {
+  content: "\e645";
+}
+
 .icon-zuqiu2:before {
   content: "\e618";
 }