设置静态页面

src/assets/icon_arr_s_r.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="6.4200310707092285" height="11.820231437683105" viewBox="0 0 6.4200310707092285 11.820231437683105"><g transform="matrix(-1,0,0,1,12.840062141418457,0)"><path d="M12.33019107070923,11.8202C12.460611070709229,11.8202,12.59117107070923,11.7705,12.690731070709228,11.6709C12.889841070709227,11.4718,12.889841070709227,11.1489,12.690731070709228,10.95L7.650801070709228,5.91005L12.690731070709228,0.870258C12.889841070709227,0.671289,12.889841070709227,0.348302,12.690731070709228,0.149333C12.491621070709229,-0.0497778,12.168911070709228,-0.0497778,11.969801070709227,0.149333L6.569341070709228,5.54965C6.370261070709229,5.74879,6.370261070709229,6.07159,6.569341070709228,6.27072L11.969801070709227,11.6709C12.06922107070923,11.7705,12.199781070709228,11.8202,12.33019107070923,11.8202Z" fill="#3D3D3D" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/index.css

@@ -29,6 +29,9 @@
     border-radius: 6px;
     color: #fff;
   }
+  .btn-contained:active {
+    opacity: 0.8;
+  }
   .btn-outlined {
     display: flex;
     justify-content: center;
@@ -42,6 +45,9 @@
     padding-bottom: 0.25rem;
     border-radius: 6px;
   }
+  .btn-outlined:active {
+    opacity: 0.8;
+  }
 }
 body {
   margin: 0;

src/pages/Measure.tsx

@@ -1,5 +1,6 @@
 import { NavBar } from 'antd-mobile';
 import StepItem from '../components/StepItem';
+import { Link } from 'react-router-dom';
 
 export default function Measure() {
   return (
@@ -14,7 +15,7 @@ export default function Measure() {
 
         <section className="h-10 bg-[#e3e8f5] flex justify-between items-center px-4">
           <p className="text-text">北京铁路局 /客运段/京沪线/左侧</p>
-          <p className="text-primary underline">修改</p>
+          <Link to="/home/setting" className="text-primary underline">修改</Link>
         </section>
 
         <section className="flex items-center gap-4 px-4 my-4">

src/pages/Setting.tsx

@@ -1,10 +1,74 @@
-import { NavBar } from "antd-mobile";
+import { NavBar } from 'antd-mobile';
+import icon_arr_r from '../assets/icon_arr_s_r.svg';
 
 export default function Setting() {
-    return (
-        <div>
-          <NavBar className='bg-white' back={null}>设置</NavBar>
-          <div className="home-page-content">Setting</div>
+  return (
+    <div>
+      <NavBar className="bg-white" back={null}>
+        设置
+      </NavBar>
+      <div className="home-page-content overflow-x-hidden overflow-y-auto">
+        <section>
+          <div className="h-[42px] px-5">
+            <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">
+              上传地址设置
+            </h1>
+          </div>
+          <div className="bg-white px-5 text-sm text-text">
+            <div className="h-12 flex items-center border-b border-[#eee]">
+              <span>IP地址</span>
+              <input
+                type="text"
+                placeholder="请填写"
+                className="border-0 outline-none self-stretch text-right flex-1 ml-4"
+              />
+            </div>
+            <div className="h-12 flex items-center">
+              <span>端口</span>
+              <input
+                type="number"
+                placeholder="请填写"
+                className="border-0 outline-none self-stretch text-right flex-1 ml-4"
+              />
+            </div>
+          </div>
+        </section>
+        <section>
+          <div className="h-[42px] px-5">
+            <h1 className="h-[42px] leading-[42px] text-base text-text font-medium">信息设置</h1>
+          </div>
+          <div className="bg-white px-5 text-sm text-text">
+          <div className="h-12 flex items-center border-b border-[#eee]">
+              <span>铁路局名称</span>
+              <span className="ml-auto mr-4">北京铁路局</span>
+              <img src={icon_arr_r} alt="arr" />
+            </div>
+            <div className="h-12 flex items-center border-b border-[#eee]">
+              <span>线路名称</span>
+              <span className="ml-auto mr-4">京沪线</span>
+              <img src={icon_arr_r} alt="arr" />
+            </div>
+            <div className="h-12 flex items-center border-b border-[#eee]">
+              <span>路段名称</span>
+              <span className="ml-auto mr-4">客运段</span>
+              <img src={icon_arr_r} alt="arr" />
+            </div>
+            <div className="h-12 flex items-center">
+              <span>方向</span>
+              <input
+                type="text"
+                placeholder="请填写"
+                className="border-0 outline-none self-stretch text-right flex-1 ml-4"
+              />
+            </div>
+          </div>
+        </section>
+
+        <div className='btn-contained h-12 mx-9 my-8 text-base font-medium'>
+            保存
         </div>
-      );
+
+      </div>
+    </div>
+  );
 }