lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .product-card {
            width: 234px;
            /* margin: 100px auto; */
            /* 如果数值为0 那么单位可以省略 如果值是0.X 0也可以省略 0.5=.5 */
            box-shadow: 0 0 10px rgba(0, 0, 0, .5);
            padding: 10px;
            text-align: center;
            float: left;
            margin-right: 20px;
        }

        .product-img img {
            width: 100%;
        }

        .product-title {
            /* 文字大小尽量不要小于12px */
            font-size: 14px;
            font-weight: 400;
            color: #333;
        }

        .product-info {
            font-size: 12px;
            color: #b0b0b0;
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .product-price span {
            color: #ff6700;
        }

        .product-price del {
            color: #b0b0b0;
        }
    </style>
</head>

<body>
    <div class="product-list"></div>
    <!-- <div class="product-card">
        <div class="product-img">
            <img src="./img/phone2.png" alt="img">
        </div>
        <div class="product-title">REDMI Turbo 5 MAX</div>
        <div class="product-info">天玑 9500s | 9000mAh 最大小米电池 | 1.5K 超级阳光屏</div>
        <div class="product-price">
            <span>2299元起</span>
            <del>2499元</del>
        </div>
    </div> -->
    <script>
        // 获取数据
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 解析响应体
                let data = JSON.parse(xhr.responseText);
                data = data.data[0].productDtoList;
                console.log(data);
                // 渲染商品列表
                let productHTML = ``;
                // 渲染商品列表
                for(let i=0;i<data.length;i++){
                    productHTML += `
                    <div class="product-card">
                        <div class="product-img">
                            <img src="${data[i].pic}" alt="img">
                        </div>
                        <div class="product-title">${data[i].prodName}</div>
                        <div class="product-info">${data[i].brief}</div>
                        <div class="product-price">
                            <span>${data[i].price}元起</span>
                        </div>
                    </div>`
                }
                // 渲染商品列表到页面中
                let productList = document.querySelector(".product-list");
                productList.innerHTML = productHTML;
            }
        }
    </script>
</body>

</html>