Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-24 00:53:52 +00:00
Code Issues Releases Wiki Activity

weathe - [x] r

Browse Source
This commit is contained in:
zuiidea
2016-12-15 00:07:18 +08:00
parent 0e3dcb2c67
commit f49ed470bd
4 changed files with 103 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+5 -1
View File
@@ -16,7 +16,11 @@
- [x] 数据列表
- [ ] 数据列表交互动效
- [x] 表单相关
- [ ] dashbord页面(部分完成)
- [ ] dashbord页面
- [x] 数字卡片
- [x] 数据曲线图
- [x] 实时天气卡片
- [x] 名言引用
- [ ] 可视化图表示例
## 开发及构建
src/components/dashboard/weather.js
+1 -1
View File
@@ -9,7 +9,7 @@ function Weather(props) {
<div className={styles.icon} style={{
backgroundImage: `url(${icon})`
}}></div>
<p style={styles.name}>{name}</p>
<p>{name}</p>
</div>
<div className={styles.right}>
<h1 className={styles.temperature}>{temperature + '°'}</h1>
src/components/dashboard/weather.less
+5 -3
View File
@@ -6,11 +6,13 @@
padding: 24px;
justify-content: space-between;
display: flex;
font-size: 14px;
.left {
display: flex;
flex-direction: column;
width: 50%;
width: 64px;
padding-top: 72px;
.icon {
width: 64px;
@@ -18,17 +20,17 @@
background-position: center;
background-size: cover;
}
.name {}
}
.right {
display: flex;
flex-direction: column;
width: 50%;
.temperature {
font-size: 36px;
text-align: right;
height: 64px;
}
.description {
src/routes/dashboard.js
+92 -63
View File
@@ -13,94 +13,123 @@ const numberCardData = [
{
icon: 'dot-chart',
color: color.green,
title:'Online Review',
number:2781
},
{
title: 'Online Review',
number: 2781
}, {
icon: 'pay-circle-o',
color: color.blue,
title:'New Customers',
number:3241
},
{
title: 'New Customers',
number: 3241
}, {
icon: 'message',
color: color.purple,
title:'Active Projects',
number:253
},
{
title: 'Active Projects',
number: 253
}, {
icon: 'paper-clip',
color: color.red,
title:'Referrals',
number:4324
title: 'Referrals',
number: 4324
}
]
const quoteProps={
name:'Joho Doe',
title:'Graphic Designer',
content:`I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.`,
avatar:'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
const quoteProps = {
name: 'Joho Doe',
title: 'Graphic Designer',
content: `I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.`,
avatar: 'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236'
}
function Dashboard({dashboard}) {
const {weather} = dashboard
const numberCards = numberCardData.map((item,key) => <Col key={key} lg={6} md={12}>
const numberCards = numberCardData.map((item, key) => <Col key={key} lg={6} md={12}>
<NumberCard {...item}/>
</Col>)
return (<Row gutter={24}>
{numberCards}
<Col lg={18} md={24}>
<Card bordered={false} bodyStyle={{padding:'24px 36px 24px 0'}}>
<Sales />
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
}}>
<Weather {...weather}/>
</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.red}}>
<Quote {...quoteProps}/>
</Card>
</Col>
<Col lg={24} md={12}>
<Card bordered={false} bodyStyle={{padding:0,height:204,background:color.blue}}>
<Weather {...weather}/>
</Card>
</Col>
</Row>
</Col>
<Col lg={12} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
</Col>
<Col lg={12} md={24}>
<Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></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 lg={24} md={12}>
<Card bordered={false} bodyStyle={{
padding: 0,
height: 204,
background: color.red
}}>
<Quote {...quoteProps}/>
</Card>
</Col>
</Row>
)}
</Col>
<Col lg={12} md={24}>
<Card bordered={false} bodyStyle={{
padding: 0,
height: 432,
background: '#fff'
}}></Card>
</Col>
<Col lg={12} md={24}>
<Card bordered={false} bodyStyle={{
padding: 0,
height: 432,
background: '#fff'
}}></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 = {
dashboard: PropTypes.object
}
function mapStateToProps({ dashboard }) {
return { dashboard }
function mapStateToProps({dashboard}) {
return {dashboard}
}
export default connect(mapStateToProps)(Dashboard)
// export default connect(({dashboard}) => ({dashboard}))(Dashboard)