测量静态页面

src/components/StepItem.tsx

@@ -0,0 +1,20 @@
+export default function StepItem({ state = 0, text }: { state: 0 | 1 | 2; text: string }) {
+  return (
+    <div className="flex items-center px-4 h-10 bg-white rounded gap-3">
+      <div
+        className={`rounded-full w-[14px] h-[14px] flex justify-center items-center ${
+          state === 2
+            ? 'bg-[#52C41A]/[0.35]'
+            : state === 1
+            ? 'bg-[#187ef9]/[0.35]'
+            : 'bg-[#c0c0c0]/[0.35]'
+        }`}>
+        <div
+          className={`rounded-full w-[10px] h-[10px] ${
+            state === 2 ? 'bg-[#52C41A]' : state === 1 ? 'bg-[#187ef9]' : 'bg-[#c0c0c0]'
+          }`}></div>
+      </div>
+      <p>{text}</p>
+    </div>
+  );
+}

src/index.css

@@ -17,6 +17,31 @@
     height: calc(100vh - var(--tabBarHeight) - var(--navBarHeight));
     background-color: #f5f6fa;
   }
+  .btn-contained {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--primaryColor);
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-radius: 6px;
+    color: #fff;
+  }
+  .btn-outlined {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    color:var(--primaryColor);
+    border: solid 1px var(--primaryColor);
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-radius: 6px;
+  }
 }
 body {
   margin: 0;
@@ -25,6 +50,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #fff;
 }
 
 code {

src/pages/Measure.tsx

@@ -1,10 +1,36 @@
 import { NavBar } from 'antd-mobile';
+import StepItem from '../components/StepItem';
 
 export default function Measure() {
   return (
     <div>
-      <NavBar className='bg-white' back={null}>测量</NavBar>
-      <div className="home-page-content">Measure</div>
+      <NavBar className="bg-white" back={null}>
+        测量
+      </NavBar>
+      <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>
+        </div>
+
+        <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
+          <p className="text-text">北京铁路局 /客运段/京沪线/左侧</p>
+          <p className="text-primary underline">修改</p>
+        </section>
+
+        <section className="flex items-center gap-4 px-4 my-4">
+          <div className="btn-contained text-sm h-10 flex-1">开始测量</div>
+          <div className="btn-contained text-sm h-10 flex-1">保存</div>
+        </section>
+
+        <section className="grid grid-cols-2 gap-[10px] px-3">
+          <StepItem state={2} text={'移到顶部停留2秒'} />
+          <StepItem state={2} text={'移到顶部停留2秒'} />
+          <StepItem state={0} text={'开始测量左侧'} />
+          <StepItem state={0} text={'开始测量右侧'} />
+          <StepItem state={1} text={'左侧测量完成'} />
+          <StepItem state={1} text={'右侧测量完成'} />
+        </section>
+      </main>
     </div>
   );
 }

tailwind.config.js

@@ -4,6 +4,13 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
+    colors: {
+			primary: "#3e63cb",
+			white: "#FFF",
+			title: "#646566",
+			text: "#333",
+			warn: "#f05a28",
+		},
     extend: {},
   },
   plugins: [],