dashbord mockdata

mock/dashboard.js

@@ -2,28 +2,50 @@ const qs = require('qs')
 const Mock = require('mockjs')
 const Watch = require("watchjs")
 import mockStorge from '../src/utils/mockStorge'
+import {color} from '../src/utils/theme'
 
-
-let dataKey = mockStorge('Dashboard',Mock.mock({
+let dataKey = mockStorge('Dashboard', Mock.mock({
   'sales|16': [
     {
       'name|+1': 2000,
       'Clothes|200-500': 1,
       'Food|180-700': 1,
-      'Electronics|300-850': 1,
+      'Electronics|300-850': 1
     }
   ],
-  quote:{
+  quote: {
     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'
   },
+  numbers: [
+    {
+      icon: 'dot-chart',
+      color: color.green,
+      title: 'Online Review',
+      number: 2781
+    }, {
+      icon: 'pay-circle-o',
+      color: color.blue,
+      title: 'New Customers',
+      number: 3241
+    }, {
+      icon: 'message',
+      color: color.purple,
+      title: 'Active Projects',
+      number: 253
+    }, {
+      icon: 'paper-clip',
+      color: color.red,
+      title: 'Referrals',
+      number: 4324
+    }
+  ]
 }))
 
 module.exports = {
   'GET /api/dashboard' (req, res) {
-    console.log(global[dataKey])
     res.json(global[dataKey])
-  },
+  }
 }

src/components/skin.less

@@ -6,4 +6,9 @@
   .ant-modal-content{
     box-shadow: none;
   }
+  .ant-card{
+    &:hover{
+      overflow: auto;
+    }
+  }
 }

src/models/dashboard.js

@@ -175,6 +175,7 @@ export default {
     },
     sales:[],
     quote:{},
+    numbers:[],
   },
   subscriptions : {
     setup({dispatch}) {

src/routes/dashboard.js

@@ -9,40 +9,9 @@ import Weather from '../components/dashboard/weather'
 import styles from './dashboard.less'
 import {color} from '../utils'
 
-const numberCardData = [
-  {
-    icon: 'dot-chart',
-    color: color.green,
-    title: 'Online Review',
-    number: 2781
-  }, {
-    icon: 'pay-circle-o',
-    color: color.blue,
-    title: 'New Customers',
-    number: 3241
-  }, {
-    icon: 'message',
-    color: color.purple,
-    title: 'Active Projects',
-    number: 253
-  }, {
-    icon: 'paper-clip',
-    color: color.red,
-    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'
-}
-
 function Dashboard({dashboard}) {
-  const {weather,sales,quote} = dashboard
-  const numberCards = numberCardData.map((item, key) => <Col key={key} lg={6} md={12}>
+  const {weather, sales, quote, numbers} = dashboard
+  const numberCards = numbers.map((item, key) => <Col key={key} lg={6} md={12}>
     <NumberCard {...item}/>
   </Col>)
 
@@ -53,13 +22,13 @@ function Dashboard({dashboard}) {
         <Card bordered={false} bodyStyle={{
           padding: '24px 36px 24px 0'
         }}>
-          <Sales  data={sales}/>
+          <Sales data={sales}/>
         </Card>
       </Col>
       <Col lg={6} md={24}>
         <Row gutter={24}>
           <Col lg={24} md={12}>
-            <Card bordered={false} bodyStyle={{
+            <Card bordered={false} className={styles.weather} bodyStyle={{
               padding: 0,
               height: 204,
               background: color.blue
@@ -68,7 +37,7 @@ function Dashboard({dashboard}) {
             </Card>
           </Col>
           <Col lg={24} md={12}>
-            <Card bordered={false} bodyStyle={{
+            <Card bordered={false} className={styles.quote} bodyStyle={{
               padding: 0,
               height: 204,
               background: color.red

src/routes/dashboard.less

@@ -4,3 +4,15 @@
     margin-bottom: 24px;
   }
 }
+
+.weather{
+  &:hover{
+    box-shadow: 4px 4px 40px rgba(143,201,251,.6);
+  }
+}
+
+.quote{
+  &:hover{
+    box-shadow: 4px 4px 40px rgba(246,152,153,.6);
+  }
+}