pu428f3pz
/
datacenter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改UI对齐

Browse Source
dev
陈博文 3 years ago
parent 13e9c7438e
commit cb259fee0a
2 changed files with 150 additions and 141 deletions
Show Stats Download Patch File Download Diff File

7
src/pages/Basic/List/Device/index.less
Unescape View File

@ -1,6 +1,11 @@
.page { .page {
background-color: #fff; background-color: #fff;
padding: 40px 118px; padding: 40px 0;
.wrap {
width: 1200px;
margin: 0 auto;
}
sup { sup {
color: red; color: red;

284
src/pages/Basic/List/Device/index.tsx
Unescape View File

@ -133,181 +133,185 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
return ( return (
<div className={styles.page}> <div className={styles.page}>
<div className={styles.name}> <div className={styles.wrap}>
{' '} <div className={styles.name}>
<b /> <span>开通设施管理设备</span> {' '}
</div> <b /> <span>开通设施管理设备</span>
<div className={styles.status}> </div>
当前状态：<span>{'未开通'}</span> <div className={styles.status}>
</div> 当前状态：<span>{'未开通'}</span>
<Tabs </div>
activeKey={type} <Tabs
onChange={(k: string) => { activeKey={type}
dispatch({ onChange={(k: string) => {
type: 'basic/setActionData', dispatch({
payload: { type: k }, type: 'basic/setActionData',
}); payload: { type: k },
}} });
> }}
<Tabs.TabPane key={'1'} tab="总部级" />
<Tabs.TabPane key={'2'} tab="大单位级别" />
</Tabs>
<div style={{ margin: '20px 0', fontWeight: 'bold', color: '#464F66' }}>
总部级设施管理设备开通
</div>
<Row align="middle">
<Row align="middle" className="mr40">
<sup>*</sup>
<span>数据中心名称</span>
<Input
value={dataName}
onChange={(e) => handleInput('dataName', e.target.value)}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
</Row>
<Row align="middle">
<sup>*</sup>
<span>设备出厂编号</span>
<Input
value={deviceNo}
onChange={(e) => handleInput('deviceNo', e.target.value)}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
</Row>
</Row>
<Row align="middle">
<Row align="middle" className="mr40">
<sup>*</sup>
<span>管理节点名称</span>
<Input
value={nodeName}
onChange={(e) => handleInput('nodeName', e.target.value)}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
</Row>
<Row align="middle">
<sup>*</sup>
<span>选择保障单位</span>
<Input
value={supportUnit}
onChange={(e) => handleInput('supportUnit', e.target.value)}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
</Row>
</Row>
<Row align="middle">
<Row align="middle" className="mr40">
<sup>*</sup>
<span>选择管理节点</span>
<Input
value={managerNode}
onChange={(e) => handleInput('managerNode', e.target.value)}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
</Row>
</Row>
<div className={styles.box3}>
<Button
onClick={uploadFile}
disabled={!(file1?.file && file2?.file && file3?.file && file4?.file)}
type="primary"
> >
上传至服务器 <Tabs.TabPane key={'1'} tab="总部级" />
</Button> <Tabs.TabPane key={'2'} tab="大单位级别" />
</Tabs>
<div style={{ margin: '20px 0', fontWeight: 'bold', color: '#464F66' }}>
总部级设施管理设备开通
</div>
<Row align="middle"> <Row align="middle">
<Row align="middle" className="mr40"> <Row align="middle" className="mr40">
<sup>*</sup> <sup>*</sup>
<span>导入64字节</span> <span>数据中心名称</span>
<Input <Input
readOnly value={dataName}
value={file1?.name} onChange={(e) => handleInput('dataName', e.target.value)}
size="large" size="large"
style={{ width: 255, margin: '20px 10px' }} style={{ width: 255, margin: '20px 10px' }}
/> />
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file1')}
type="primary"
ghost
size="large"
>
{!!file1?.file ? '已选择' : '浏览'}
</Button>
</Row> </Row>
<Row align="middle"> <Row align="middle">
<sup>*</sup> <sup>*</sup>
<span>导入32字节</span> <span>设备出厂编号</span>
<Input <Input
readOnly value={deviceNo}
value={file2?.name} onChange={(e) => handleInput('deviceNo', e.target.value)}
size="large" size="large"
style={{ width: 255, margin: '20px 10px' }} style={{ width: 255, margin: '20px 10px' }}
/> />
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file2')}
type="primary"
ghost
size="large"
>
{!!file2?.file ? '已选择' : '浏览'}
</Button>
</Row> </Row>
</Row> </Row>
<Row align="middle"> <Row align="middle">
<Row align="middle" className="mr40"> <Row align="middle" className="mr40">
<sup>*</sup> <sup>*</sup>
<span>导入20字节</span> <span>管理节点名称</span>
<Input <Input
readOnly value={nodeName}
value={file3?.name} onChange={(e) => handleInput('nodeName', e.target.value)}
size="large" size="large"
style={{ width: 255, margin: '20px 10px' }} style={{ width: 255, margin: '20px 10px' }}
/> />
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file3')}
type="primary"
ghost
size="large"
>
{!!file3?.file ? '已选择' : '浏览'}
</Button>
</Row> </Row>
<Row align="middle"> <Row align="middle">
<sup>*</sup> <sup>*</sup>
<span>导入16字节</span> <span>选择保障单位</span>
<Input <Input
readOnly value={supportUnit}
value={file4?.name} onChange={(e) => handleInput('supportUnit', e.target.value)}
size="large" size="large"
style={{ width: 255, margin: '20px 10px' }} style={{ width: 255, margin: '20px 10px' }}
/> />
<Button </Row>
disabled={uploadDisabled} </Row>
onClick={() => handleFile('file4')} <Row align="middle">
type="primary" <Row align="middle" className="mr40">
ghost <sup>*</sup>
<span>选择管理节点</span>
<Input
value={managerNode}
onChange={(e) => handleInput('managerNode', e.target.value)}
size="large" size="large"
> style={{ width: 255, margin: '20px 10px' }}
{!!file4?.file ? '已选择' : '浏览'} />
</Button>
</Row> </Row>
</Row> </Row>
<div className={styles.box3}>
<Button
onClick={uploadFile}
disabled={
!(file1?.file && file2?.file && file3?.file && file4?.file)
}
type="primary"
>
上传至服务器
</Button>
<Row align="middle">
<Row align="middle" className="mr40">
<sup>*</sup>
<span>导入64字节</span>
<Input
readOnly
value={file1?.name}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file1')}
type="primary"
ghost
size="large"
>
{!!file1?.file ? '已选择' : '浏览'}
</Button>
</Row>
<Row align="middle">
<sup>*</sup>
<span>导入32字节</span>
<Input
readOnly
value={file2?.name}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file2')}
type="primary"
ghost
size="large"
>
{!!file2?.file ? '已选择' : '浏览'}
</Button>
</Row>
</Row>
<Row align="middle">
<Row align="middle" className="mr40">
<sup>*</sup>
<span>导入20字节</span>
<Input
readOnly
value={file3?.name}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file3')}
type="primary"
ghost
size="large"
>
{!!file3?.file ? '已选择' : '浏览'}
</Button>
</Row>
<Row align="middle">
<sup>*</sup>
<span>导入16字节</span>
<Input
readOnly
value={file4?.name}
size="large"
style={{ width: 255, margin: '20px 10px' }}
/>
<Button
disabled={uploadDisabled}
onClick={() => handleFile('file4')}
type="primary"
ghost
size="large"
>
{!!file4?.file ? '已选择' : '浏览'}
</Button>
</Row>
</Row>
</div>
<Button
onClick={open}
disabled={!btnDisabled}
className="mt20"
type="primary"
>
点击开通
</Button>
</div> </div>
<Button
onClick={open}
disabled={!btnDisabled}
className="mt20"
type="primary"
>
点击开通
</Button>
</div> </div>
); );
}; };

Write Preview
Loading…
Cancel
Save