卡片快速的实现商品卡片的代码，两列布局，移动端实现，具体代码可以参考代码，使用chatgtp, 实现的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
  #product-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  
  .product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
    width: calc(50% - 20px);
    margin: 10px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px #aaa;
    overflow: hidden;
    flex-basis: calc(50% - 24px); /* 每个项目占据一行的一半空间 */
  }
  
  .product-img {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  .product-img img {
    width: 100%;
    height: auto;
  }
  
  .product-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90px;
    width: 100%;
    padding: 10px;
    padding-left: 30px;
  }
  
  .product-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  
  .product-rating {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }
</style>
</head>
<body>


<div id="product-container">
</div>

<script>
// 获取商品数据
const products = [
  { title: 'Product A',  imgSrc: 'https://tu.sioe.cn/gj/qiege/image.jpg', productDescrib: '秦天轮到。1小时' },
  { title: 'Product B', imgSrc: 'https://tu.sioe.cn/gj/qiege/image.jpg', productDescrib: '秦天轮到。1小时' },
  { title: 'Product C', imgSrc: 'https://tu.sioe.cn/gj/qiege/image.jpg', productDescrib: '秦天轮到。1小时' }
];

// 获取商品列表容器元素
const productList = document.getElementById('product-container');
 let content = '';
  for (var i = 0; i < products.length; i++) {
    content += `
    <div class="product-card">
        <div class="product-img">
        <img src="${products[i]["imgSrc"]}" data-atf="true">
        </div>
        <div class="product-info">
        <h3 class="product-title">${products[i]["title"]}</h3>
        <div class="product-rating">
            ${products[i]["productDescrib"]}
        </div>
        </div>
    </div>
 `}

 //将替换后的 HTML 内容放入容器
 productList.innerHTML = content;
</script>
</body>
</html>