outline-mobile/src/pages/Measure.tsx

import { NavBar } from 'antd-mobile';
import StepItem from '../components/StepItem';
import { Link } from 'react-router-dom';

export default function Measure() {
  return (
    <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>
          <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 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>
  );
}