dashbord layout

This commit is contained in:
zuiidea
2016-11-28 23:31:15 +08:00
parent 7f0e81d8b9
commit 6a54b616ec
2 changed files with 44 additions and 15 deletions
+38 -15
View File
@@ -3,6 +3,7 @@ import {Link} from 'dva/router'
import {Row, Col, Icon, Card} from 'antd'
import NumberCard from '../components/dashboard/numberCard'
import Sales from '../components/dashboard/sales'
import styles from './dashboard.less'
import {color} from '../utils'
const numberCardData = [
@@ -36,21 +37,43 @@ function Dashboard() {
const numberCards = numberCardData.map((item,key) => <Col key={key} lg={6} md={12}>
<NumberCard {...item}/>
</Col>)
return (
<div>
<Row gutter={24}>
{numberCards}
</Row>
<Row gutter={24}>
<Col lg={18} md={24}>
<Card bordered={false} bodyStyle={{padding:'24px 36px 24px 0'}}>
<Sales />
</Card>
</Col>
</Row>
</div>
)
}
return (<Row gutter={24}>
{numberCards}
<Col lg={18} md={24}>
<Card bordered={false} bodyStyle={{padding:'24px 36px 24px 0'}}>
<Sales />
</Card>
</Col>
<Col lg={6} md={24}>
<Row gutter={24}>
<Col lg={24} md={12}>
<Card bordered={false} bodyStyle={{padding:0,height:204,background:color.blue}}></Card>
</Col>
<Col lg={24} md={12}>
<Card bordered={false} bodyStyle={{padding:0,height:204,background:color.purple}}></Card>
</Col>
</Row>
</Col>
<Col lg={12} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:color.red}}></Card>
</Col>
<Col lg={12} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:color.green}}></Card>
</Col>
<Col lg={24} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
</Col>
<Col lg={8} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
</Col>
<Col lg={8} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
</Col>
<Col lg={8} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
</Col>
</Row>
)}
Dashboard.propTypes = {
location: PropTypes.object
+6
View File
@@ -0,0 +1,6 @@
:global {
.ant-card {
border-radius: 0;
margin-bottom: 24px;
}
}