opti: table布局优化

This commit is contained in:
wenbo.dong 2017-09-26 17:10:51 +08:00
parent d742105763
commit 309ddd06ee
4 changed files with 28 additions and 10 deletions

View File

@ -277,7 +277,7 @@ class View extends Component {
return <p style={{whiteSpace: 'pre-wrap'}}>{item.example}</p>;
}
}, {
title: '备注',
title: '备注',
dataIndex: 'desc',
key: 'desc',
render(_, item) {
@ -304,11 +304,11 @@ class View extends Component {
<Row className="row">
<Col span={4} className="colKey">接口名称</Col>
<Col span={8}>{this.props.curData.title}</Col>
<Col span={4} className="colKey">建人</Col>
<Col span={4} className="colKey">&ensp;&ensp;</Col>
<Col span={8} className="colValue"><Link className="user-name" to={"/user/profile/" + this.props.curData.uid} ><img src={'/api/user/avatar?uid=' + this.props.curData.uid} className="user-img" />{this.props.curData.username}</Link></Col>
</Row>
<Row className="row">
<Col span={4} className="colKey"> </Col>
<Col span={4} className="colKey">&emsp;&emsp;</Col>
<Col span={8} className={'tag-status ' + this.props.curData.status}>{status[this.props.curData.status]}</Col>
<Col span={4} className="colKey">更新时间</Col>
<Col span={8}>{formatTime(this.props.curData.up_time)}</Col>

View File

@ -149,6 +149,17 @@
.right-content{
min-height: 5rem;
background: #fff;
.caseContainer {
table {
border-radius: 4px;
// border-collapse: collapse;
}
.ant-table-small .ant-table-thead > tr > th {
text-align: left;
background-color: #f8f8f8;
}
tr:nth-child(even){background: #f8f8f8;}
}
.interface-content{
.ant-tabs-nav{
width:100%;
@ -195,11 +206,17 @@
}
th {
text-align: left;
font-weight: normal;
background-color: #f8f8f8;
text-indent: .4em;
}
tr {
text-indent: .4em;
}
th, td {
border: 1px solid #e9e9e9;
padding: 8px;
}
tr:nth-child(odd){background: rgba(236, 238, 241, 0.67);}
tr:nth-child(odd){background: #f8f8f8;}
tr:nth-child(even){background: #fff;}
}
}

View File

@ -234,7 +234,7 @@ class ProjectMember extends Component {
</Row>
</Modal>
<Table columns={columns} dataSource={this.state.projectMemberList} pagination={false} locale={{emptyText: <ErrMsg type="noMemberInProject"/>}} className="setting-project-member"/>
<Card title={this.state.groupName + ' 分组成员 ' + '(' + this.state.groupMemberList.length + ') 人'} noHovering className="setting-group">
<Card bordered={false} title={this.state.groupName + ' 分组成员 ' + '(' + this.state.groupMemberList.length + ') 人'} noHovering className="setting-group">
{this.state.groupMemberList.length ? this.state.groupMemberList.map((item, index) => {
return (<div key={index} className="card-item">
<img src={location.protocol + '//' + location.host + '/api/user/avatar?uid=' + item.uid} className="item-img" />

View File

@ -25,14 +25,15 @@
}
}
.setting-project-member {
border: 1px solid #e9e9e9;
border-radius: 2px;
}
// .setting-project-member {
// border: 1px solid #e9e9e9;
// border-radius: 4px;
// }
.setting-group {
margin-top: .48rem;
border-radius: 2px;
border-bottom: 1px solid #eee;
.ant-card-head {
background-color: #eee;
padding: 0 .08rem !important;