LiLongLong
/
outline-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

「我的」静态页面

master
zhangjiming 5 months ago
parent
df53c833d7
commit
abf8886665
8 changed files with 223 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/icon_check_s_s.svg
  2. 1
      src/assets/icon_check_s_u.svg
  3. 73
      src/components/MeasureItem.tsx
  4. 19
      src/index.css
  5. 4
      src/pages/Measure.tsx
  6. 6
      src/pages/Mine.scss
  7. 119
      src/pages/Mine.tsx
  8. 5
      src/pages/Setting.tsx

1
src/assets/icon_check_s_s.svg
View File

@ -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>

1
src/assets/icon_check_s_u.svg
View File

@ -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>

73
src/components/MeasureItem.tsx
View File

@ -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>
);
}

19
src/index.css
View File

@ -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;

4
src/pages/Measure.tsx
View File

@ -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">

6
src/pages/Mine.scss
View File

@ -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));
}

119
src/pages/Mine.tsx
View File

@ -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>
);
}

5
src/pages/Setting.tsx
View File

@ -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>
);

Write Preview
Loading…
Cancel
Save