From 8021306124318449590e77ff3593f5133fa6e097 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Tue, 6 Dec 2016 22:51:21 +0800
Subject: [PATCH] Quote

---
 src/components/dashboard/quote.js   | 24 ++++++++++++++
 src/components/dashboard/quote.less | 50 +++++++++++++++++++++++++++++
 src/routes/dashboard.js             | 11 ++++++-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dashboard/quote.js
 create mode 100644 src/components/dashboard/quote.less

diff --git a/src/components/dashboard/quote.js b/src/components/dashboard/quote.js
new file mode 100644
index 0000000..12e96d7
--- /dev/null
+++ b/src/components/dashboard/quote.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react'
+import { Icon } from 'antd'
+import styles from './quote.less'
+import {classnames} from '../../utils'
+
+function Quote(props) {
+  const { name, content, title, avatar } = props
+  return (
+    <div className={styles.quote}>
+      <div className={styles.inner}>
+        {content}
+      </div>
+      <div className={styles.footer}>
+        <div className={styles.description}>
+          <p>-{name}-</p>
+          <p>{title}</p>
+        </div>
+        <div className={styles.avatar} style={{backgroundImage:`url(${avatar})`}}></div>
+      </div>
+    </div>
+  )
+}
+
+export default Quote
diff --git a/src/components/dashboard/quote.less b/src/components/dashboard/quote.less
new file mode 100644
index 0000000..c7e63e8
--- /dev/null
+++ b/src/components/dashboard/quote.less
@@ -0,0 +1,50 @@
+@import "../vars.less";
+
+.quote {
+  color: #fff;
+  height: 100%;
+  width: 100%;
+  padding: 24px;
+  font-size: 16px;
+  font-weight: 700;
+
+  .inner {
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    text-indent: 24px;
+  }
+
+  .footer {
+    position: relative;
+    margin-top: 14px;
+
+    .description {
+      width: 100%;
+      p{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: 60px;
+        text-align: right;
+        &:last-child{
+          font-weight: 100;
+        }
+      }
+    }
+
+    .avatar {
+      width: 48px;
+      height: 48px;
+      background-position: center;
+      background-size: cover;
+      border-radius: 50%;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index b315acc..f882d2e 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 import {Link} from 'dva/router'
 import {Row, Col, Icon, Card} from 'antd'
 import NumberCard from '../components/dashboard/numberCard'
+import Quote from '../components/dashboard/quote'
 import Sales from '../components/dashboard/sales'
 import styles from './dashboard.less'
 import {color} from '../utils'
@@ -37,6 +38,12 @@ function Dashboard() {
   const numberCards = numberCardData.map((item,key) => <Col  key={key} lg={6} md={12}>
     <NumberCard {...item}/>
   </Col>)
+  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',
+  }
   return (<Row gutter={24}>
           {numberCards}
           <Col lg={18} md={24}>
@@ -47,7 +54,9 @@ function Dashboard() {
           <Col lg={6} md={24}>
             <Row gutter={24}>
              <Col lg={24} md={12}>
-               <Card bordered={false} bodyStyle={{padding:0,height:204,background:color.blue}}></Card>
+               <Card bordered={false} bodyStyle={{padding:0,height:204,background:color.blue}}>
+                 <Quote {...quoteProps}/>
+               </Card>
              </Col>
              <Col lg={24} md={12}>
                <Card bordered={false} bodyStyle={{padding:0,height:204,background:color.purple}}></Card>