numbercard

src/components/dashboard/numberCard.js

@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react'
+import {Icon} from 'antd'
+import styles from './numberCard.less'
+
+function NumberCard(props) {
+  const {icon, color, title, number} = props
+  return (
+    <div className={styles.numberCard}>
+      <Icon className={styles.iconWarp} type={icon}/>
+      <div className={styles.content}>
+        <p className={styles.title}>{title||'Online Review'}</p>
+        <p className={styles.number}>{number||'1654,563'}</p>
+      </div>
+    </div>
+  )
+}
+
+export default NumberCard

src/components/dashboard/numberCard.less

@@ -0,0 +1,23 @@
+.numberCard{
+  box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.05);
+  display: flex;
+  padding: 32px;
+  font-family: monospace;
+  .iconWarp{
+    font-size: 54px;
+  }
+  .content{
+    width: 100%;
+    padding-left: 24px;
+    .title{
+      line-height: 16px;
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    .number{
+      line-height: 32px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+}

src/components/layout/common.less

@@ -56,6 +56,9 @@ body {
 
   .ant-table-tbody > tr > td {
     text-align: center;
+    &:last-child{
+      border-right: none;
+    }
   }
 
   &.ant-table-small {

src/components/layout/main.less

@@ -1,4 +1,4 @@
-@import "./vars.less";
+@import "../vars.less";
 
 .layout {
   position: relative;

src/components/vars.less

@@ -1,4 +1,4 @@
-@import "../../../node_modules/antd/lib/style/themes/default.less";
+@import "../../node_modules/antd/lib/style/themes/default.less";
 // // Prefix
 // @ant-prefix             : ant;
 //

src/router.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Router, Route , IndexRedirect , hashHistory} from 'dva/router'
+import { Router, Route , IndexRedirect } from 'dva/router'
 import App from './routes/app'
 import Error from './routes/error'
 import Dashboard from './routes/dashboard'

src/routes/dashboard.js

@@ -1,14 +1,25 @@
 import React, { PropTypes } from 'react'
 import { Link } from 'dva/router'
+import { Row, Col, Icon } from 'antd'
+import NumberCard from '../components/dashboard/numberCard'
 
 function Dashboard() {
   return (
     <div>
-      <h1>Hello Antd.</h1>
-      <hr />
-      <ul>
-        <li>You can go to <Link to="/users">/users</Link></li>
-      </ul>
+      <Row type="flex" justify="space-between">
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+       <Col span={5}>
+         <NumberCard icon='dot-chart' />
+       </Col>
+     </Row>
     </div>
   )
 }