用易语言实现类似商品列表界面布局方法，求易语言代码 - 精易论坛

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>商品陈列</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f5f5f5;

        }

        .product-list {

            padding: 10px;

            max-width: 600px;

            margin: 0 auto;

        }

        .product-item {

            display: flex;

            background-color: #fff;

            border-radius: 10px;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            margin-bottom: 15px; /* 增加行间距 */

            overflow: hidden;

            height: 150px; /* 增加每一行的高度 */

        }

        .product-image {

            flex: 1; /* 占50%宽度 */

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 15px; /* 增加内边距 */

        }

        .product-image img {

            max-width: 100%;

            max-height: 100%;

            border-radius: 8px;

        }

        .product-content {

            flex: 1; /* 占50%宽度 */

            padding: 15px; /* 增加内边距 */

            display: flex;

            flex-direction: column;

            justify-content: center;

        }

        .product-title {

            font-size: 1.2em; /* 增大字体 */

            font-weight: bold;

            margin-bottom: 8px; /* 增加标题和描述的间距 */

        }

        .product-description {

            font-size: 1em; /* 增大字体 */

            color: #666;

            margin-bottom: 12px; /* 增加描述和价格的间距 */

        }

        .product-price {

            font-size: 1.1em; /* 增大字体 */

            color: #e74c3c;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div class="product-list" id="productList">

        <!-- 商品项将通过 JavaScript 动态添加 -->

    </div>



    <script>

        // 商品数据

        const products = [

            {

                image: "https://via.placeholder.com/300",

                title: "商品1",

                description: "这是商品1的描述，详细介绍商品的特点和用途。",

                price: "￥99.99"

            },

            {

                image: "https://via.placeholder.com/300",

                title: "商品2",

                description: "这是商品2的描述，详细介绍商品的特点和用途。",

                price: "￥199.99"

            },

            {

                image: "https://via.placeholder.com/300",

                title: "商品3",

                description: "这是商品3的描述，详细介绍商品的特点和用途。",

                price: "￥299.99"

            },

            {

                image: "https://via.placeholder.com/300",

                title: "商品4",

                description: "这是商品4的描述，详细介绍商品的特点和用途。",

                price: "￥399.99"

            }

        ];



        // 获取商品列表容器

        const productList = document.getElementById("productList");



        // 动态添加商品

        products.forEach(product => {

            const productItem = document.createElement("div");

            productItem.className = "product-item";



            // 商品图片

            const productImage = document.createElement("div");

            productImage.className = "product-image";

            const img = document.createElement("img");

            img.src = product.image;

            img.alt = product.title;

            productImage.appendChild(img);



            // 商品内容

            const productContent = document.createElement("div");

            productContent.className = "product-content";

            const title = document.createElement("div");

            title.className = "product-title";

            title.textContent = product.title;

            const description = document.createElement("div");

            description.className = "product-description";

            description.textContent = product.description;

            const price = document.createElement("div");

            price.className = "product-price";

            price.textContent = product.price;



            productContent.appendChild(title);

            productContent.appendChild(description);

            productContent.appendChild(price);



            // 将图片和内容添加到商品项

            productItem.appendChild(productImage);

            productItem.appendChild(productContent);



            // 将商品项添加到商品列表

            productList.appendChild(productItem);

        });

    </script>

</body>

</html>