improve style

pull/410/head
vapao 2021-09-28 14:37:50 +08:00
parent f26635e9ad
commit 31979fbe4e
2 changed files with 39 additions and 8 deletions

View File

@ -9,6 +9,7 @@ import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Modal, Form, Input, TreeSelect, Button, Upload, Alert, message } from 'antd'; import { Modal, Form, Input, TreeSelect, Button, Upload, Alert, message } from 'antd';
import { http, X_TOKEN } from 'libs'; import { http, X_TOKEN } from 'libs';
import store from './store'; import store from './store';
import styles from './index.module.less';
export default observer(function () { export default observer(function () {
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -126,13 +127,13 @@ export default observer(function () {
<Input placeholder="请输入主机名称"/> <Input placeholder="请输入主机名称"/>
</Form.Item> </Form.Item>
<Form.Item required label="连接地址" style={{marginBottom: 0}}> <Form.Item required label="连接地址" style={{marginBottom: 0}}>
<Form.Item name="username" style={{display: 'inline-block', width: 'calc(30%)'}}> <Form.Item name="username" className={styles.formAddress1} style={{width: 'calc(30%)'}}>
<Input addonBefore="ssh" placeholder="用户名"/> <Input addonBefore="ssh" placeholder="用户名"/>
</Form.Item> </Form.Item>
<Form.Item name="hostname" style={{display: 'inline-block', width: 'calc(40%)'}}> <Form.Item name="hostname" className={styles.formAddress2} style={{width: 'calc(40%)'}}>
<Input addonBefore="@" placeholder="主机名/IP"/> <Input addonBefore="@" placeholder="主机名/IP"/>
</Form.Item> </Form.Item>
<Form.Item name="port" style={{display: 'inline-block', width: 'calc(30%)'}}> <Form.Item name="port" className={styles.formAddress3} style={{width: 'calc(30%)'}}>
<Input addonBefore="-p" placeholder="端口"/> <Input addonBefore="-p" placeholder="端口"/>
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>

View File

@ -29,3 +29,33 @@
.selector :global(.ant-modal-footer) { .selector :global(.ant-modal-footer) {
border-top: none border-top: none
} }
.formAddress1 {
display: inline-block;
:global(.ant-input) {
border-radius: 0;
}
}
.formAddress2 {
display: inline-block;
:global(.ant-input-group-addon) {
border-left: none;
border-radius: 0;
}
:global(.ant-input) {
border-radius: 0;
}
}
.formAddress3 {
display: inline-block;
:global(.ant-input-group-addon) {
border-left: none;
border-radius: 0;
}
}