lovecoding
/
Web1020


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!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>
        body {
            background-color: #f5f5f5;
        }

        .card-content {
            width: 250px;
            /* border:1px solid black; */
            float: left;
            padding: 20px;
            background-color: #fff;
            /* 阴影  第一个值横向偏移 第二个值纵向偏移 第三个值扩散值 第四个值阴影颜色 */
            box-shadow: 0 0 5px #666;
            margin:10px;
        }

        .card-img {
            text-align: center;
        }

        .card-img img {
            width: 200px;
        }

        .card-info h3,.card-info p{
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .title-bar{
            float: left;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        
    </div>

    <script src="./ajax.js"></script>
    <script>
        let oBox = document.getElementsByClassName("box")[0];
        ajaxFun("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList", function (res) {
            let dataList = res.data;
            let htmlStr = "";
            for(let j=0;j<dataList.length;j++){
                htmlStr += `<div class="title-bar">${dataList[j].title}</div>`
                for(let i=0;i<dataList[j].productDtoList.length;i++){
                    let {pic,prodName,brief,price} = dataList[j].productDtoList[i];
                    htmlStr += `
                        <div class="card-content">
                            <div class="card-img">
                                <img src="${pic}" alt="图片">
                            </div>
                            <div class="card-info">
                                <h3>${prodName}</h3>
                                <p>${brief}</p>
                                <p>¥${price}</p>
                            </div>
                        </div>
                    `
                }
            }
            oBox.innerHTML = htmlStr;
        })
    </script>
</body>

</html>