user

src/components/dashboard/cpu.js

@@ -1,23 +1,43 @@
 import React, {PropTypes} from 'react'
-import {Icon,Table,Tag} from 'antd'
 import styles from './cpu.less'
 import {classnames,color} from '../../utils'
+import CountUp from 'react-countup'
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'
 
+const countUpProps = {
+  start:0,
+  duration:2.75,
+  useEasing:true,
+  useGrouping:true,
+  separator:','
+}
+
 function Cpu(props) {
   return <div className={styles.cpu}>
     <div className={styles.number}>
       <div className={styles.item}>
         <p>usage</p>
-        <p>{props.usage}</p>
+        <p><CountUp
+            end={props.usage}
+            suffix="GB"
+            {...countUpProps}
+          /></p>
       </div>
       <div className={styles.item}>
         <p>space</p>
-        <p>{props.space}</p>
+        <p><CountUp
+            end={props.space}
+            suffix="GB"
+            {...countUpProps}
+          /></p>
       </div>
       <div className={styles.item}>
         <p>cpu</p>
-        <p>{props.cpu}</p>
+        <p><CountUp
+            end={props.cpu}
+            suffix="%"
+            {...countUpProps}
+          /></p>
       </div>
     </div>
     <ResponsiveContainer minHeight={300}>

src/components/dashboard/cpu.less

@@ -16,7 +16,7 @@
           width: 1px;
           height: 40px;
           position: absolute;
-          background:  @border-color-split;
+          background:  #f5f5f5;
           top: 12px;
         }
       }

src/components/dashboard/user.js

@@ -0,0 +1,51 @@
+import React, {PropTypes} from 'react'
+import {Button} from 'antd'
+import styles from './user.less'
+import CountUp from 'react-countup'
+import {classnames,color} from '../../utils'
+const countUpProps = {
+  start:0,
+  duration:2.75,
+  useEasing:true,
+  useGrouping:true,
+  separator:','
+}
+
+function User(props) {
+  const {avatar,name,email}=props
+  return <div className={styles.user}>
+    <div className={styles.header}>
+      <div className={styles.headerinner}>
+        <div className={styles.avatar} style={{backgroundImage:`url(${avatar})`}}></div>
+        <h5 className={styles.name}>{name}</h5>
+        <p>{email}</p>
+      </div>
+    </div>
+    <div className={styles.number}>
+       <div className={styles.item}>
+         <p>EARNING SALES</p>
+         <p style={{color:color.green}}><CountUp
+             end={props.sales}
+             prefix="$"
+             {...countUpProps}
+           /></p>
+       </div>
+       <div className={styles.item}>
+         <p>ITEM SOLD</p>
+         <p style={{color:color.blue}}><CountUp
+             end={props.sold}
+             {...countUpProps}
+           /></p>
+       </div>
+    </div>
+    <div className={styles.footer}>
+      <Button type="ghost" size="large">View Profile</Button>
+    </div>
+  </div>
+}
+
+User.propTypes = {
+  props: PropTypes.object
+}
+
+export default User

src/components/dashboard/user.less

@@ -0,0 +1,84 @@
+@import "../vars.less";
+.user{
+  .header{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    color: #fff;
+    height: 200px;
+    background-image: url(http://hbfile.b0.upaiyun.com/img/home/banner/ae28b900fda7f5f4975dd9e13f628150ed627e7c1036e2);
+    background-repeat: no-repeat;
+    background-size: cover;
+    align-items: center;
+    .headerinner{
+      z-index: 2;
+    }
+     &::after{
+       content: '';
+       background: @purple;
+       position: absolute;
+       width: 100%;
+       height: 200px;
+       left: 0;
+       top:0;
+       opacity: .4;
+       z-index: 1;
+     }
+    .avatar{
+      width: 64px;
+      height: 64px;
+      background-position: center;
+      background-size: cover;
+      border-radius: 50%;
+      display: inline-block;
+    }
+    .name{
+      font-size: 16px;
+    }
+  }
+  .number {
+    display: flex;
+    height: 116px;
+    justify-content: space-between;
+    border-bottom: solid 1px #f5f5f5;
+    .item {
+      text-align: center;
+      height: 116px;
+      width: 100%;
+      position: relative;
+      padding: 30px 0;
+      &+.item{
+        &::before{
+          content: '';
+          display: block;
+          width: 1px;
+          height: 116px;
+          position: absolute;
+          background: #f5f5f5;
+          top: 0;
+        }
+      }
+      p{
+        color: #757575;
+        &:first-child{
+          font-size: 16px;
+        }
+        &:last-child{
+          font-size: 20px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  .footer{
+    height: 116px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    :global .ant-btn{
+      color: @purple;
+      border-color: @purple;
+      padding: 6px 16px;
+    }
+  }
+}

src/components/vars.less

@@ -179,6 +179,7 @@
 //Color
 
 @dark-half:#494949;
+@purple:#d897eb;
 
 // Shadow
 @shadow-1           : 4px 4px 20px 0 rgba(0,0,0,0.01);

src/routes/dashboard.js

@@ -11,6 +11,7 @@ import Comments from '../components/dashboard/comments'
 import Completed from '../components/dashboard/completed'
 import Browser from '../components/dashboard/browser'
 import Cpu from '../components/dashboard/cpu'
+import User from '../components/dashboard/user'
 import styles from './dashboard.less'
 import {color} from '../utils'
 
@@ -87,8 +88,8 @@ function Dashboard({dashboard}) {
         </Card>
       </Col>
       <Col lg={8} md={24}>
-        <Card bordered={false} {...bodyStyle}>
-            {/* <User data={user}/> */}
+        <Card bordered={false} bodyStyle={{...bodyStyle.bodyStyle,padding:0}}>
+            <User {...user}/>
         </Card>
       </Col>
     </Row>