Merge remote-tracking branch 'origin/master'

src/case/ShopApp/src/App.css

@@ -39,6 +39,7 @@ p.p1,p.p2,p.p3{
     margin-top: 45px;
     background: #ffffff;
     border: 2px solid red;
+    height: 100%;
 }
 
 

src/case/ShopApp/src/components/ProductDetailPage/Card.css

@@ -0,0 +1,12 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    width: 100%;
+    border-radius: 5px;
+}
+
+
+
+.container {
+    padding: 2px 16px;
+}

src/case/ShopApp/src/components/ProductDetailPage/Card.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+import './Card.css'
+
+
+export default class Card extends Component{
+    constructor(props){
+        super(props)
+        console.log('1',props)
+        this.state={
+            product:props.product
+        }
+    }
+
+
+    componentWillReceiveProps(props){
+        console.log('5',props)
+        this.setState({
+            product:props.product
+        })
+    }
+
+    render(){
+        const product =this.state.product
+        return (
+            <div className="card">
+                <img src={product.img} alt="Avatar" style={{width:"100%",height:'200px'}}/>
+                <div className="container">
+                    <h4>{product.name}</h4> 
+                    <p>www.runoob.com</p> 
+                </div>
+            </div>
+        )
+    }
+}

src/case/ShopApp/src/components/ProductDetailPage/ProductDetail.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Card from './Card'
 
 import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
@@ -20,13 +21,15 @@ export default class ProductDetail extends Component{
         })
     }
 
-    componentDidMount(){
+    componentWillMount(){
         this.getProduct()
     }
+
+    
     render(){
         return(
             <div>
-                商品详情页
+               <Card product={this.state.product}/>
             </div>
         )
     }