From ade6dd662c93dcb2e8bcb62fb92c718d199fb0d8 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Wed, 19 Mar 2025 15:06:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E9=87=8F=E9=9D=99=E6=80=81=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StepItem.tsx | 20 ++++++++++++++++++++
 src/index.css               | 26 ++++++++++++++++++++++++++
 src/pages/Measure.tsx       | 30 ++++++++++++++++++++++++++++--
 tailwind.config.js          |  7 +++++++
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/components/StepItem.tsx

diff --git a/src/components/StepItem.tsx b/src/components/StepItem.tsx
new file mode 100644
index 0000000..40fd110
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 915a28f..0c1d2ad 100644
--- a/src/index.css
+++ b/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 {
diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx
index 82d1a59..c61c06a 100644
--- a/src/pages/Measure.tsx
+++ b/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>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index c0958ec..31958bc 100644
--- a/tailwind.config.js
+++ b/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: [],