diff --git a/src/assets/icon_check_s_s.svg b/src/assets/icon_check_s_s.svg
new file mode 100644
index 0000000..2f3a609
--- /dev/null
+++ b/src/assets/icon_check_s_s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/icon_check_s_u.svg b/src/assets/icon_check_s_u.svg
new file mode 100644
index 0000000..626ca84
--- /dev/null
+++ b/src/assets/icon_check_s_u.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/MeasureItem.tsx b/src/components/MeasureItem.tsx
new file mode 100644
index 0000000..e0e8d2f
--- /dev/null
+++ b/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 (
+
+
{props.name}
+
+
+ {`${props.line}`}
+ {`${props.segment}`}
+ {`${props.direction}方向`}
+
+
+
+ {props.railType}
+ {props.time}
+
+
+ );
+}
+
+export function MeasureItemEx(props: {
+ name: string;
+ time: string;
+ line: string;
+ segment: string;
+ direction: string;
+ railType: string;
+ selected: boolean;
+ onSelected?: () => void;
+}) {
+ return (
+
+
+ {props.selected ? (
+

+ ) : (
+

+ )}
+
+
+
{props.name}
+
+
+ {`${props.line}`}
+ {`${props.segment}`}
+ {`${props.direction}方向`}
+
+
+
+ {props.railType}
+ {props.time}
+
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index 321fc6d..d624967 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx
index d525bdf..bbd562b 100644
--- a/src/pages/Measure.tsx
+++ b/src/pages/Measure.tsx
@@ -19,8 +19,8 @@ export default function Measure() {
diff --git a/src/pages/Mine.scss b/src/pages/Mine.scss
new file mode 100644
index 0000000..24d0ace
--- /dev/null
+++ b/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));
+}
\ No newline at end of file
diff --git a/src/pages/Mine.tsx b/src/pages/Mine.tsx
index 9ce37cc..3953207 100644
--- a/src/pages/Mine.tsx
+++ b/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() {
- return (
-
- );
-}
\ No newline at end of file
+ const [tabIndex, setTabIndex] = useState(1);
+ const [selectIds, setSelectIds] = useState([]);
+ const onItemSelected = (id: number) => {
+ if (selectIds.includes(id)) {
+ setSelectIds(selectIds.filter(i => i !== id));
+ } else {
+ setSelectIds([...selectIds, id]);
+ }
+ };
+ return (
+
+
+ 我的
+
+
+
+ setTabIndex(0)}>
+ 测量数据
+
+ setTabIndex(1)}>
+ 未上传数据
+
+
+
+ {tabIndex === 0 && (
+
+
+ {dataList.map(item => (
+
+
+
+ ))}
+
+
+ )}
+ {tabIndex === 1 && (
+ <>
+
+
+
+ {dataList.map(item => (
+
+ onItemSelected(item.id)}
+ />
+
+ ))}
+
+
+ >
+ )}
+
+
+
+ );
+}
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
index 51d5e8e..4f7f31b 100644
--- a/src/pages/Setting.tsx
+++ b/src/pages/Setting.tsx
@@ -38,7 +38,7 @@ export default function Setting() {
信息设置
-
+
铁路局名称
北京铁路局

@@ -64,10 +64,7 @@ export default function Setting() {
-
- 保存
-
-
+
保存
);