底部tabBar组件

src/components/bar-footer/index.module.scss

@@ -0,0 +1,10 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 55px;
+  box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.04);
+  background: #ffffff;
+  z-index: 100;
+}

src/components/bar-footer/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { NavBar, Badge, TabBar } from "antd-mobile";
+import styles from "./index.module.scss";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+
+export const TabBarFooter: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { pathname } = location;
+
+  const tabs = [
+    {
+      key: "/",
+      title: "首页",
+      icon: (active: boolean) =>
+        active ? (
+          <i
+            style={{ fontSize: 30, color: "#FF4D4F" }}
+            className="iconfont icon-icon-shouye"
+          ></i>
+        ) : (
+          <i
+            style={{ fontSize: 30, color: "#cccccc" }}
+            className="iconfont icon-waterprint"
+          ></i>
+        ),
+    },
+    {
+      key: "/study",
+      title: "学习",
+      icon: (active: boolean) =>
+        active ? (
+          <i
+            style={{ fontSize: 30, color: "#FF4D4F" }}
+            className="iconfont icon-icon-xuexi"
+          ></i>
+        ) : (
+          <i
+            style={{ fontSize: 30, color: "#cccccc" }}
+            className="iconfont icon-icon-xuexi"
+          ></i>
+        ),
+    },
+    {
+      key: "/member",
+      title: "我的",
+      icon: (active: boolean) =>
+        active ? (
+          <i
+            style={{ fontSize: 30, color: "#FF4D4F" }}
+            className="iconfont icon-icon-wode"
+          ></i>
+        ) : (
+          <i
+            style={{ fontSize: 30, color: "#cccccc" }}
+            className="iconfont icon-icon-wode"
+          ></i>
+        ),
+    },
+  ];
+
+  return (
+    <div className={styles["footer"]}>
+      <TabBar activeKey={pathname} onChange={(value) => navigate(value)}>
+        {tabs.map((item) => (
+          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+        ))}
+      </TabBar>
+    </div>
+  );
+};

src/components/footer/index.module.scss

@@ -0,0 +1,9 @@
+.footer-box {
+  width: 100%;
+  height: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.3);
+  line-height: 12px;
+  margin: 30px 0px;
+}

src/components/footer/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./index.module.scss";
+import { useSelector } from "react-redux";
+
+export const Footer: React.FC = () => {
+  const systemConfig = useSelector((state: any) => state.systemConfig.value);
+
+  return (
+    <div className={styles["footer-box"]}>{systemConfig.pcIndexFooterMsg}</div>
+  );
+};

src/components/index.ts

@@ -1 +1,3 @@
-export * from "./empty"
+export * from "./empty";
+export * from "./footer";
+export * from "./bar-footer";

src/main.scss

@@ -1,14 +1,16 @@
+@import "./assets/iconfont/iconfont.css";
+
 body {
   margin: 0;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
 :root {
-  --adm-color-primary: #FF4D4F;
+  --adm-color-primary: #ff4d4f !important;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
@@ -24,7 +26,25 @@ code {
 
   --adm-font-size-main: var(--adm-font-size-5);
 
-  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
-  helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
-  'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue",
+    helvetica, segoe ui, arial, roboto, "PingFang SC", "miui",
+    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+}
+
+.adm-badge-wrapper {
+  height: 30px;
+}
+
+.adm-tab-bar-item-title {
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 11px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.adm-tab-bar-item-active {
+  .adm-tab-bar-item-title {
+    color: #ff4d4f !important;
+  }
 }

src/pages/index/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
+import { Footer, TabBarFooter } from "../../components";
 
 const IndexPage = () => {
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
@@ -20,7 +21,11 @@ const IndexPage = () => {
 
   return (
     <div className="main-body">
-      <div className="content">我是首页</div>
+      <div className="content">
+        我是首页
+        <Footer></Footer>
+      </div>
+      <TabBarFooter></TabBarFooter>
     </div>
   );
 };