添加蓝牙信息

src/App.tsx

@@ -68,7 +68,7 @@ function App() {
       <div>
         <Outlet />
       </div>
-      <div>
+      <div className='border-t border-[#ebebeb]'>
         <BottomBar />
       </div>
       <SafeArea position="bottom" />

src/assets/icon_arr_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13" height="13" viewBox="0 0 13 13"><defs><clipPath id="master_svg0_2_2042"><rect x="0" y="0" width="13" height="13" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_2_2042)"><g><path d="M9.993750551757813,4.834375C9.871880551757812,4.7124998,9.709380551757812,4.671875,9.546880551757813,4.671875L3.4531275517578126,4.7125002C3.2906285517578127,4.7125002,3.1281275517578124,4.7531253,3.0062525517578127,4.875C2.7625030517578124,5.11875,2.7625030517578124,5.484375,3.0062525517578127,5.728125L6.053130551757812,8.775005C6.093750551757813,8.815625,6.175000551757813,8.856255,6.215630551757812,8.896875L6.256250551757812,8.937495C6.459380551757812,9.018754999999999,6.743750551757813,8.978125,6.906250551757813,8.815625L9.953130551757813,5.728125C10.237500551757812,5.44375,10.196880551757813,5.078125,9.993750551757813,4.834375Z" fill="#3D3D3D" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

src/assets/icon_bluetooth.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="10" height="15" viewBox="0 0 10 15"><g><path d="M6.7674,7.5L10,10.7572L5.78936,15L4.30071,15L4.30071,9.9855L1.05248,13.2585L5.32382e-7,12.1972L4.30071,7.86375L4.30071,7.13625L0,2.80275L1.05247,1.7415L4.30071,5.0145L4.30071,0L5.78936,0L10,4.24275L6.7674,7.5ZM5.78936,8.63625L5.78936,12.879L7.89431,10.7572L5.78936,8.63625ZM5.78936,6.36375L7.89431,4.24275L5.78936,2.121L5.78936,6.36375Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/components/CustomNavBar.scss

@@ -0,0 +1,21 @@
+.bluetooth-battery {
+    position: relative;
+    font-size: 12px;
+    height: 16px;
+    padding-left: 2px;
+    padding-right: 2px;
+    color: var(--primaryColor);
+    border: solid 1px var(--primaryColor);
+    border-radius: 2px;
+    &::after {
+        content: " ";
+        position: absolute;
+        width: 4px;
+        height: 8px;
+        background-color: var(--primaryColor);
+        right: -4px;
+        top: 3px;
+        border-top-right-radius: 2px;
+        border-bottom-right-radius: 2px;
+    }
+}

src/components/CustomNavBar.tsx

@@ -0,0 +1,34 @@
+import icon_bluetooth from '../assets/icon_bluetooth.svg';
+import icon_arr_d from '../assets/icon_arr_down.svg';
+import './CustomNavBar.scss';
+import { useState } from 'react';
+
+export default function CustomNavBar({ title }: { title: string }) {
+  const [showDetail, setShowDetail] = useState(false);
+
+  return (
+    <div className="relative bg-white h-[--navBarHeight] border-b border-[#D8D8D8]">
+      {/** 温度，水平仪 */}
+      <div
+        className="absolute h-[30px] w-full bg-white border-t border-[#D8D8D8] flex items-center gap-2 px-4"
+        style={{ top: showDetail ? '100%' : 0, transition: 'top 300ms' }}>
+        <span className="flex-1">温度: 31.2°C</span>
+        <span className="flex-1">X轴倾斜: -0.496</span>
+        <span className="flex-1">Y轴倾斜: 3.005</span>
+      </div>
+      {/** 导航栏 */}
+      <div className="absolute left-0 top-0 w-full h-full flex items-center px-3 bg-white">
+        <h1 className="text-lg text-text ml-3">{title}</h1>
+        <div className="ml-auto flex items-center" onClick={() => setShowDetail(!showDetail)}>
+          <div className="bluetooth-battery flex justify-center items-center">78%</div>
+          <img src={icon_bluetooth} alt="icon" className="mx-2" />
+          <span>设备已连接</span>
+          <img src={icon_arr_d} alt="arr" style={{
+            transform: showDetail ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 300ms'
+          }} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Measure.tsx

@@ -1,13 +1,20 @@
 import { NavBar } from 'antd-mobile';
 import StepItem from '../components/StepItem';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import CustomNavBar from '../components/CustomNavBar';
 
 export default function Measure() {
+  const navigate = useNavigate();
+
+  const onSaveClick = () => {
+    navigate('/measure/save');
+  };
   return (
-    <div>
-      <NavBar className="bg-white" back={null}>
-        测量
-      </NavBar>
+    <div className="relative pt-[--navBarHeight]">
+      <div className="absolute top-0 w-full z-10">
+        <CustomNavBar title={'测量'}></CustomNavBar>
+      </div>
+
       <main className="home-page-content overflow-x-hidden overflow-y-auto">
         <div className="relative h-0 p-0 pb-[75%]">
           <div className="absolute left-0 right-0 top-0 bottom-0 bg-title"></div>
@@ -15,12 +22,16 @@ export default function Measure() {
 
         <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
           <p className="text-text">北京铁路局 /客运段/京沪线/左侧</p>
-          <Link to="/home/setting" className="text-primary underline">修改</Link>
+          <Link to="/home/setting" className="text-primary underline">
+            修改
+          </Link>
         </section>
 
         <section className="flex items-center gap-4 px-4 my-4">
           <div className="btn-contained rounded-md text-sm h-10 flex-1">开始测量</div>
-          <div className="btn-contained rounded-md text-sm h-10 flex-1">保存</div>
+          <div className="btn-contained rounded-md text-sm h-10 flex-1" onClick={onSaveClick}>
+            保存
+          </div>
         </section>
 
         <section className="grid grid-cols-2 gap-[10px] px-3">