add style to card

src/case/ShopApp/src/App.css

@@ -11,7 +11,6 @@
     width: 300px;
     height: 534px;
     overflow: hidden;
-    padding: 15px 0;
     overflow-x: hidden;
     overflow-y: hidden;
     background:#fff;
@@ -38,7 +37,7 @@ p.p1,p.p2,p.p3{
 .pageWrap{
     margin-top: 45px;
     background: #ffffff;
-    border: 2px solid red;
+    /*border: 2px solid red;*/
     height: 100%;
 }
 

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

@@ -1,5 +1,5 @@
 .card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     width: 100%;
     border-radius: 5px;
@@ -8,5 +8,19 @@
 
 
 .container {
+    position: relative;
     padding: 2px 16px;
+    padding-top: 10px;
+}
+
+.price{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: red;
+    
+}
+
+.footer{
+    padding: 5px 0;
 }

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

@@ -27,7 +27,11 @@ export default class Card extends Component{
                 <img src={product.img} alt="Avatar" style={{width:"100%",height:'200px'}}/>
                 <div className="container">
                     <h4>{product.name}</h4> 
-                    <p>www.runoob.com</p> 
+                    <p>{product.intro}</p>
+                    <span className="price">￥{product.price}</span>
+                    <div className="footer">
+                        <span>剩余:{product.stock}</span>
+                    </div>
                 </div>
             </div>
         )