底部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";