「我的」静态页面

src/assets/icon_check_s_s.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.457683563232422" height="13.825667381286621" viewBox="0 0 13.457683563232422 13.825667381286621"><g><path d="M1.02746,0L12.4302,0C12.9977,-2.83122e-7,13.4577,0.472588,13.4577,1.05556L13.4577,12.7701C13.4577,13.3531,12.9977,13.8257,12.4302,13.8257L1.02746,13.8257C0.46001,13.8257,2.75587e-7,13.3531,0,12.7701L0,1.05556C2.75587e-7,0.472588,0.46001,2.83122e-7,1.02746,0ZM5.7656,9.60819C5.91047,9.60819,6.05483,9.55119,6.1699,9.44194L10.1719,5.31314C10.3935,5.08117,10.3935,4.70963,10.1719,4.47767C9.94953,4.24591,9.58559,4.24591,9.36325,4.47767L5.7656,8.18689L3.8838,6.24467C3.66147,6.01291,3.29753,6.01291,3.07519,6.24467C2.8536,6.47663,2.8536,6.84817,3.07519,7.08014L5.36129,9.43772C5.47174,9.55119,5.62073,9.60819,5.7656,9.60819Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

src/assets/icon_check_s_u.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"><g><rect x="0.5" y="0.5" width="12" height="12" rx="0.5" fill-opacity="0" stroke-opacity="1" stroke="#B9B9B9" fill="none" stroke-width="1"/></g></svg>

src/components/MeasureItem.tsx

@@ -0,0 +1,73 @@
+import icon_check_s from '../assets/icon_check_s_s.svg';
+import icon_check_u from '../assets/icon_check_s_u.svg';
+/*
+name: '测量名称1',
+time: '03-02 10:20',
+line: '京沪线',
+segment: 'A段',
+direction: '上行',
+railType: '60轨',
+*/
+
+export default function MeasureItem(props: {
+  name: string;
+  time: string;
+  line: string;
+  segment: string;
+  direction: string;
+  railType: string;
+}) {
+  return (
+    <div>
+      <h1 className="text-base font-medium mx-2 my-2">{props.name}</h1>
+
+      <section className="flex mx-2">
+        <p className="flex-1 text-sm ">{`${props.line}`}</p>
+        <p className="flex-1 text-sm ">{`${props.segment}`}</p>
+        <p className="flex-1 text-sm text-right">{`${props.direction}方向`}</p>
+      </section>
+
+      <section className="mx-2 text-sm  h-8 flex items-center justify-between">
+        <span>{props.railType}</span>
+        <span>{props.time}</span>
+      </section>
+    </div>
+  );
+}
+
+export function MeasureItemEx(props: {
+  name: string;
+  time: string;
+  line: string;
+  segment: string;
+  direction: string;
+  railType: string;
+  selected: boolean;
+  onSelected?: () => void;
+}) {
+  return (
+    <div className="flex" onClick={props.onSelected}>
+      <div className="w-12 flex justify-center items-center" >
+        {props.selected ? (
+          <img src={icon_check_s} alt="icon" />
+        ) : (
+          <img src={icon_check_u} alt="icon" />
+        )}
+      </div>
+      <div className="flex-1">
+        <h1 className="text-base font-medium mx-2 my-2">{props.name}</h1>
+
+        <section className="flex mx-2">
+          <p className="flex-1 text-sm ">{`${props.line}`}</p>
+          <p className="flex-1 text-sm ">{`${props.segment}`}</p>
+          <p className="flex-1 text-sm text-right">{`${props.direction}方向`}</p>
+        </section>
+
+        <section className="mx-2 text-sm  h-8 flex items-center justify-between">
+          <span>{props.railType}</span>
+          <span>{props.time}</span>
+        </section>
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -26,12 +26,14 @@
     padding-right: 1rem;
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
-    border-radius: 6px;
     color: #fff;
   }
   .btn-contained:active {
     opacity: 0.8;
   }
+  .btn-contained:disabled {
+    background-color: #ccc;
+  }
   .btn-outlined {
     display: flex;
     justify-content: center;
@@ -43,11 +45,24 @@
     padding-right: 1rem;
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
-    border-radius: 6px;
   }
   .btn-outlined:active {
     opacity: 0.8;
   }
+  .btn-elevated {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #e5eaf6;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    color: #333;
+  }
+  .btn-elevated:active {
+    opacity: 0.8;
+  }
 }
 body {
   margin: 0;

src/pages/Measure.tsx

@@ -19,8 +19,8 @@ export default function Measure() {
         </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>
+          <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>
         </section>
 
         <section className="grid grid-cols-2 gap-[10px] px-3">

src/pages/Mine.scss

@@ -0,0 +1,6 @@
+.all-list {
+    height: calc(100vh - var(--navBarHeight) - 80px - var(--tabBarHeight));
+}
+.unUpload-list {
+    height: calc(100vh - var(--navBarHeight) - 80px - 52px - var(--tabBarHeight));
+}

src/pages/Mine.tsx

@@ -1,10 +1,123 @@
-import { NavBar } from "antd-mobile";
+import { List, NavBar } from 'antd-mobile';
+import { useState } from 'react';
+import MeasureItem, { MeasureItemEx } from '../components/MeasureItem';
+import './Mine.scss';
+
+const dataList = [
+  {
+    id: 1,
+    name: '测量名称1',
+    time: '03-02 10:20',
+    line: '京沪线',
+    segment: 'A段',
+    direction: '上行',
+    railType: '60轨',
+  },
+  {
+    id: 2,
+    name: '测量名称2',
+    time: '03-02 10:20',
+    line: '京沪线',
+    segment: 'B段',
+    direction: '下行',
+    railType: '60轨',
+  },
+  {
+    id: 3,
+    name: '测量名称3',
+    time: '03-02 10:20',
+    line: '京沪线',
+    segment: 'C段',
+    direction: '上行',
+    railType: '60轨',
+  },
+  {
+    id: 4,
+    name: '测量名称2',
+    time: '03-02 10:20',
+    line: '京沪线',
+    segment: 'D段',
+    direction: '下行',
+    railType: '60轨',
+  },
+  {
+    id: 5,
+    name: '测量名称2',
+    time: '03-02 10:20',
+    line: '京沪线',
+    segment: 'E段',
+    direction: '下行',
+    railType: '60轨',
+  },
+];
 
 export default function Mine() {
+  const [tabIndex, setTabIndex] = useState(1);
+  const [selectIds, setSelectIds] = useState<number[]>([]);
+  const onItemSelected = (id: number) => {
+    if (selectIds.includes(id)) {
+      setSelectIds(selectIds.filter(i => i !== id));
+    } else {
+      setSelectIds([...selectIds, id]);
+    }
+  };
   return (
     <div>
-          <NavBar className='bg-white' back={null}>我的</NavBar>
-          <div className="home-page-content">Mine</div>
+      <NavBar className="bg-white" back={null}>
+        我的
+      </NavBar>
+      <div className="home-page-content">
+        <section className="px-4 py-5 flex">
+          <div
+            className={`flex-1 h-10 rounded-l-md ${
+              tabIndex === 0 ? 'btn-contained' : 'btn-elevated'
+            }`}
+            onClick={() => setTabIndex(0)}>
+            测量数据
+          </div>
+          <div
+            className={`flex-1 h-10 rounded-r-md ${
+              tabIndex === 1 ? 'btn-contained' : 'btn-elevated'
+            }`}
+            onClick={() => setTabIndex(1)}>
+            未上传数据
+          </div>
+        </section>
+        <main>
+          {tabIndex === 0 && (
+            <div className="all-list overflow-x-hidden overflow-y-auto">
+              <List>
+                {dataList.map(item => (
+                  <List.Item key={item.id}>
+                    <MeasureItem {...item} />
+                  </List.Item>
+                ))}
+              </List>
+            </div>
+          )}
+          {tabIndex === 1 && (
+            <>
+            <div className='flex items-center gap-3 px-4 mb-4'>
+                <button className='btn-contained rounded-md h-9 w-[100px]' disabled={selectIds.length === 0} >上传</button>
+                <p className='text-sm text-[#AFAFAF]'>可在设置页面配置上传地址</p>
+            </div>
+            <div className="unUpload-list overflow-x-hidden overflow-y-auto">
+              <List>
+                {dataList.map(item => (
+                  <List.Item key={item.id}>
+                    <MeasureItemEx
+                      {...item}
+                      selected={selectIds.includes(item.id)}
+                      onSelected={() => onItemSelected(item.id)}
+                    />
+                  </List.Item>
+                ))}
+              </List>
+            </div>
+            </>
+          )}
+        </main>
+      </div>
     </div>
   );
 }

src/pages/Setting.tsx

@@ -64,10 +64,7 @@ export default function Setting() {
           </div>
         </section>
 
-        <div className='btn-contained h-12 mx-9 my-8 text-base font-medium'>
-            保存
-        </div>
-
+        <div className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium">保存</div>
       </div>
     </div>
   );