限制全局样式作用范围

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

@@ -11,6 +11,7 @@
     position: relative;
     padding: 2px 16px;
     padding-top: 10px;
+    font-size: 10px;
 }
 
 .price{
@@ -21,6 +22,8 @@
     
 }
 
-.footer{
+.container  .Cfooter{
+    position: absolute;
+    bottom: 2px;
     padding: 5px 0;
 }

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

@@ -28,10 +28,8 @@ export default class Card extends Component{
                 <div className="container">
                     <h4>{product.name}</h4> 
                     <p>{product.intro}</p>
+                    <p>剩余:{product.stock}</p>
                     <span className="price">￥{product.price}</span>
-                    <div className="footer">
-                        <span>剩余:{product.stock}</span>
-                    </div>
                 </div>
             </div>
         )