From 5aca96bde809b5e314cd1311412cf4506bb0265c Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Mon, 26 Dec 2016 19:40:00 +0800
Subject: [PATCH] user

---
 src/components/dashboard/cpu.js    | 28 ++++++++--
 src/components/dashboard/cpu.less  |  2 +-
 src/components/dashboard/user.js   | 51 ++++++++++++++++++
 src/components/dashboard/user.less | 84 ++++++++++++++++++++++++++++++
 src/components/vars.less           |  1 +
 src/routes/dashboard.js            |  5 +-
 6 files changed, 164 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboard/cpu.js b/src/components/dashboard/cpu.js
index b579715..815a177 100644
--- a/src/components/dashboard/cpu.js
+++ b/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}>
diff --git a/src/components/dashboard/cpu.less b/src/components/dashboard/cpu.less
index d20cc00..9df141b 100644
--- a/src/components/dashboard/cpu.less
+++ b/src/components/dashboard/cpu.less
@@ -16,7 +16,7 @@
           width: 1px;
           height: 40px;
           position: absolute;
-          background:  @border-color-split;
+          background:  #f5f5f5;
           top: 12px;
         }
       }
diff --git a/src/components/dashboard/user.js b/src/components/dashboard/user.js
index e69de29..13a0e1c 100644
--- a/src/components/dashboard/user.js
+++ b/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
diff --git a/src/components/dashboard/user.less b/src/components/dashboard/user.less
index e69de29..cfe44e0 100644
--- a/src/components/dashboard/user.less
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/vars.less b/src/components/vars.less
index 562add5..0e8b7e5 100644
--- a/src/components/vars.less
+++ b/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);
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index e24b09c..e2bdbd7 100644
--- a/src/routes/dashboard.js
+++ b/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>