tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update styles

pull/25/head
afc163 9 years ago
parent
0153ec1388
commit
7c2ec98824
3 changed files with 51 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/layouts/BasicLayout.less
  2. 94
      src/routes/List/TableList.js
  3. 22
      src/routes/List/TableList.less

2
src/layouts/BasicLayout.less
View File

@ -11,7 +11,7 @@
height: 64px; height: 64px;
position: relative; position: relative;
line-height: 64px; line-height: 64px;
padding-left: 32px; padding-left: 24px;
transition: all .3s; transition: all .3s;
background: #002140; background: #002140;
overflow: hidden; overflow: hidden;

94
src/routes/List/TableList.js
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Card, Row, Col, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message } from 'antd'; import { Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message } from 'antd';
import StandardTable from '../../components/StandardTable'; import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@ -156,11 +156,6 @@ export default class TableList extends PureComponent {
const { rule: { loading: ruleLoading, data }, form: { getFieldDecorator } } = this.props; const { rule: { loading: ruleLoading, data }, form: { getFieldDecorator } } = this.props;
const { selectedRows, modalVisible, addInputValue } = this.state; const { selectedRows, modalVisible, addInputValue } = this.state;
const formItemLayout = {
labelCol: { xs: 5, sm: 8, lg: 6, xl: 6 },
wrapperCol: { xs: 18, sm: 16, lg: 17, xl: 17 },
};
const menu = ( const menu = (
<Menu onClick={this.handleMenuClick} selectedKeys={[]}> <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
<Menu.Item key="remove">删除</Menu.Item> <Menu.Item key="remove">删除</Menu.Item>
@ -173,56 +168,47 @@ export default class TableList extends PureComponent {
<Card bordered={false}> <Card bordered={false}>
<div className={styles.tableList}> <div className={styles.tableList}>
<div className={styles.tableListForm}> <div className={styles.tableListForm}>
<Form onSubmit={this.handleSearch}> <Form onSubmit={this.handleSearch} layout="inline">
<Row> <div style={{ marginBottom: 16 }}>
<Col md={8} sm={12} xs={24}> <FormItem label="规则编号">
<FormItem {...formItemLayout} label="规则编号"> {getFieldDecorator('no')(
{getFieldDecorator('no')( <Input placeholder="请输入" style={{ width: 272 }} />
<Input placeholder="请输入" /> )}
)} </FormItem>
</FormItem> <FormItem label="使用状态">
</Col> {getFieldDecorator('status')(
<Col md={8} sm={12} xs={24}> <Select placeholder="请选择" style={{ width: 272 }}>
<FormItem {...formItemLayout} label="状态"> <Option value="0">关闭</Option>
{getFieldDecorator('status')( <Option value="1">运行中</Option>
<Select placeholder="请选择" style={{ width: '100%' }}> </Select>
<Option value="0">关闭</Option> )}
<Option value="1">运行中</Option> </FormItem>
</Select> <span className={styles.formButton}>
)} <Button type="primary" htmlType="submit">查询</Button>
</FormItem> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
</Col> <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
<Col md={8} sm={12} xs={24} style={{ marginBottom: 24 }}> {this.state.expandForm ? '收起' : '展开'} <Icon type={this.state.expandForm ? 'up' : 'down'} />
<div className={styles.formButton}> </a>
<Button type="primary" htmlType="submit">查询</Button> </span>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button> </div>
<a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggleForm}>
{this.state.expandForm ? '收起' : '展开'} <Icon type={this.state.expandForm ? 'up' : 'down'} />
</a>
</div>
</Col>
</Row>
{ {
this.state.expandForm && ( this.state.expandForm && (
<Row> <div style={{ marginBottom: 16 }}>
<Col md={8} sm={12} xs={24}> <FormItem label="更新时间">
<FormItem {...formItemLayout} label="更新时间"> {getFieldDecorator('updatedAt')(
{getFieldDecorator('updatedAt')( <DatePicker style={{ width: 272 }} />
<DatePicker style={{ width: '100%' }} /> )}
)} </FormItem>
</FormItem> <FormItem label="调用次数">
</Col> {getFieldDecorator('callNo')(
<Col md={8} sm={12} xs={24}> <InputNumber
<FormItem {...formItemLayout} label="调用次数"> prefix={<Icon type="right" />}
{getFieldDecorator('callNo')( placeholder="请输入"
<InputNumber style={{ width: 272 }}
prefix={<Icon type="right" />} />
placeholder="请输入" )}
/> </FormItem>
)} </div>
</FormItem>
</Col>
</Row>
) )
} }
</Form> </Form>

22
src/routes/List/TableList.less
View File

@ -3,11 +3,6 @@
.tableList { .tableList {
padding-bottom: 8px; padding-bottom: 8px;
:global {
.ant-form-item {
margin-bottom: 24px;
}
}
.tableListOperator { .tableListOperator {
margin-bottom: 16px; margin-bottom: 16px;
button { button {
@ -16,20 +11,23 @@
} }
} }
.tableListForm :global(.ant-form-item) {
margin-right: 48px;
margin-bottom: 8px;
}
.formButton { .formButton {
margin-left: 40px; white-space: nowrap;
position: relative;
top: 2px;
} }
@media screen and (max-width: @screen-lg) { @media screen and (max-width: @screen-lg) {
.formButton { .tableListForm :global(.ant-form-item) {
margin-left: 20px; margin-right: 24px;
} }
} }
@media screen and (max-width: @screen-md) { @media screen and (max-width: @screen-md) {
.formButton { .tableListForm :global(.ant-form-item) {
margin-left: 0; margin-right: 8px;
} }
} }

Write Preview
Loading…
Cancel
Save