修改UI对齐

src/pages/Basic/List/Device/index.less

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

src/pages/Basic/List/Device/index.tsx

@@ -133,181 +133,185 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
 
   return (
     <div className={styles.page}>
-      <div className={styles.name}>
-        {' '}
-        <b /> <span>开通设施管理设备</span>
-      </div>
-      <div className={styles.status}>
-        当前状态：<span>{'未开通'}</span>
-      </div>
-      <Tabs
-        activeKey={type}
-        onChange={(k: string) => {
-          dispatch({
-            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"
+      <div className={styles.wrap}>
+        <div className={styles.name}>
+          {' '}
+          <b /> <span>开通设施管理设备</span>
+        </div>
+        <div className={styles.status}>
+          当前状态：<span>{'未开通'}</span>
+        </div>
+        <Tabs
+          activeKey={type}
+          onChange={(k: string) => {
+            dispatch({
+              type: 'basic/setActionData',
+              payload: { type: k },
+            });
+          }}
         >
-          上传至服务器
-        </Button>
+          <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>导入64字节</span>
+            <span>数据中心名称</span>
             <Input
-              readOnly
-              value={file1?.name}
+              value={dataName}
+              onChange={(e) => handleInput('dataName', e.target.value)}
               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>
+            <span>设备出厂编号</span>
             <Input
-              readOnly
-              value={file2?.name}
+              value={deviceNo}
+              onChange={(e) => handleInput('deviceNo', e.target.value)}
               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>
+            <span>管理节点名称</span>
             <Input
-              readOnly
-              value={file3?.name}
+              value={nodeName}
+              onChange={(e) => handleInput('nodeName', e.target.value)}
               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>
+            <span>选择保障单位</span>
             <Input
-              readOnly
-              value={file4?.name}
+              value={supportUnit}
+              onChange={(e) => handleInput('supportUnit', e.target.value)}
               size="large"
               style={{ width: 255, margin: '20px 10px' }}
             />
-            <Button
-              disabled={uploadDisabled}
-              onClick={() => handleFile('file4')}
-              type="primary"
-              ghost
+          </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"
-            >
-              {!!file4?.file ? '已选择' : '浏览'}
-            </Button>
+              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"
+          >
+            上传至服务器
+          </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>
-      <Button
-        onClick={open}
-        disabled={!btnDisabled}
-        className="mt20"
-        type="primary"
-      >
-        点击开通
-      </Button>
     </div>
   );
 };