diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index 2a68616..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.tsx b/src/App.tsx
index a53698a..9143dbd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,77 @@
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { NavBar, SafeArea, TabBar } from 'antd-mobile';
+
+import icon_1_s from './assets/tabIcon/icon_tab1_s.svg';
+import icon_1_u from './assets/tabIcon/icon_tab1_u.svg';
+import icon_2_s from './assets/tabIcon/icon_tab2_s.svg';
+import icon_2_u from './assets/tabIcon/icon_tab2_u.svg';
+import icon_3_s from './assets/tabIcon/icon_tab3_s.svg';
+import icon_3_u from './assets/tabIcon/icon_tab3_u.svg';
+import icon_4_s from './assets/tabIcon/icon_tab4_s.svg';
+import icon_4_u from './assets/tabIcon/icon_tab4_u.svg';
+
+const BottomBar = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { pathname } = location;
+ const setRouteActive = (value: string) => {
+ navigate(value);
+ };
+
+ const tabs = [
+ {
+ key: '/home/measure',
+ title: '首页',
+ icon_s: icon_1_s,
+ icon_n: icon_1_u,
+ },
+ {
+ key: '/home/setting',
+ title: '设置',
+ icon_s: icon_2_s,
+ icon_n: icon_2_u,
+ },
+ {
+ key: '/home/bluetooth',
+ title: '蓝牙',
+ icon_s: icon_3_s,
+ icon_n: icon_3_u,
+ },
+ {
+ key: '/home/mine',
+ title: '我的',
+ icon_s: icon_4_s,
+ icon_n: icon_4_u,
+ },
+ ];
+
+ return (
+ setRouteActive(value)}>
+ {tabs.map(item => (
+
+ active ?
:
+ }
+ title={item.title}
+ />
+ ))}
+
+ );
+};
function App() {
return (
);
}
diff --git a/src/assets/tabIcon/icon_tab1_s.svg b/src/assets/tabIcon/icon_tab1_s.svg
new file mode 100644
index 0000000..a0c9862
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab1_s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab1_u.svg b/src/assets/tabIcon/icon_tab1_u.svg
new file mode 100644
index 0000000..1c26714
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab1_u.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab2_s.svg b/src/assets/tabIcon/icon_tab2_s.svg
new file mode 100644
index 0000000..ef186d2
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab2_s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab2_u.svg b/src/assets/tabIcon/icon_tab2_u.svg
new file mode 100644
index 0000000..f454206
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab2_u.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab3_s.svg b/src/assets/tabIcon/icon_tab3_s.svg
new file mode 100644
index 0000000..aeb3e01
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab3_s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab3_u.svg b/src/assets/tabIcon/icon_tab3_u.svg
new file mode 100644
index 0000000..a927327
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab3_u.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab4_s.svg b/src/assets/tabIcon/icon_tab4_s.svg
new file mode 100644
index 0000000..208f621
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab4_s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/tabIcon/icon_tab4_u.svg b/src/assets/tabIcon/icon_tab4_u.svg
new file mode 100644
index 0000000..390bcc2
--- /dev/null
+++ b/src/assets/tabIcon/icon_tab4_u.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 17df0e7..915a28f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,22 @@
@tailwind components;
@tailwind utilities;
+:root {
+ --primaryColor: #3e63cb;
+ --tabBarHeight: 50px;
+ --navBarHeight: 45px;
+}
+
+@layer utilities {
+ .main-page-content {
+ height: calc(100vh - var(--navBarHeight));
+ background-color: #f5f6fa;
+ }
+ .home-page-content {
+ height: calc(100vh - var(--tabBarHeight) - var(--navBarHeight));
+ background-color: #f5f6fa;
+ }
+}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/index.tsx b/src/index.tsx
index 032464f..14dd949 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,13 +3,57 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import {
+ createHashRouter,
+ Navigate,
+ RouterProvider,
+} from "react-router-dom";
+import Measure from './pages/Measure';
+import Setting from './pages/Setting';
+import Bluetooth from './pages/Bluetooth';
+import Mine from './pages/Mine';
+import MeasureSave from './pages/MeasureSave';
+
+const router = createHashRouter([
+ {
+ path: "/",
+ element:
+ },
+ {
+ path: "/home",
+ element: ,
+ children: [
+ {
+ path: "measure",
+ element:
+ },
+ {
+ path: "setting",
+ element:
+ },
+ {
+ path: "bluetooth",
+ element:
+ },
+ {
+ path: "mine",
+ element:
+ }
+ ]
+ },
+ {
+ path: "/measure/save",
+ element:
+ }
+]);
+
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
-
+
);
@@ -17,3 +61,4 @@ root.render(
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
+
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/pages/Bluetooth.tsx b/src/pages/Bluetooth.tsx
new file mode 100644
index 0000000..13595ea
--- /dev/null
+++ b/src/pages/Bluetooth.tsx
@@ -0,0 +1,10 @@
+import { NavBar } from 'antd-mobile';
+
+export default function Bluetooth() {
+ return (
+
+ );
+}
diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx
new file mode 100644
index 0000000..82d1a59
--- /dev/null
+++ b/src/pages/Measure.tsx
@@ -0,0 +1,10 @@
+import { NavBar } from 'antd-mobile';
+
+export default function Measure() {
+ return (
+
+ );
+}
diff --git a/src/pages/MeasureSave.tsx b/src/pages/MeasureSave.tsx
new file mode 100644
index 0000000..436baf7
--- /dev/null
+++ b/src/pages/MeasureSave.tsx
@@ -0,0 +1,14 @@
+import { NavBar } from "antd-mobile";
+import { useNavigate } from "react-router";
+
+export default function MeasureSave() {
+ const navigate = useNavigate()
+ const back = () => navigate(-1);
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Mine.tsx b/src/pages/Mine.tsx
new file mode 100644
index 0000000..9ce37cc
--- /dev/null
+++ b/src/pages/Mine.tsx
@@ -0,0 +1,10 @@
+import { NavBar } from "antd-mobile";
+
+export default function Mine() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
new file mode 100644
index 0000000..2669b2c
--- /dev/null
+++ b/src/pages/Setting.tsx
@@ -0,0 +1,10 @@
+import { NavBar } from "antd-mobile";
+
+export default function Setting() {
+ return (
+
+ );
+}
\ No newline at end of file