From 750679e3cc065499a9ae94fcc335011964e4c0b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=A2=A6=E7=91=B6?= <3079802420@qq.com>
Date: Wed, 4 Dec 2024 20:34:04 +0800
Subject: [PATCH] 1203

---
 ...\345\206\214\351\241\265\351\235\242.html" | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 "32 \347\216\213\346\242\246\347\221\266/20241203 \350\277\233\351\230\266/\346\263\250\345\206\214\351\241\265\351\235\242.html"
diff --git "a/32 \347\216\213\346\242\246\347\221\266/20241203 \350\277\233\351\230\266/\346\263\250\345\206\214\351\241\265\351\235\242.html" "b/32 \347\216\213\346\242\246\347\221\266/20241203 \350\277\233\351\230\266/\346\263\250\345\206\214\351\241\265\351\235\242.html"
new file mode 100644
index 0000000..cf95465
--- /dev/null
+++ "b/32 \347\216\213\346\242\246\347\221\266/20241203 \350\277\233\351\230\266/\346\263\250\345\206\214\351\241\265\351\235\242.html"	
@@ -0,0 +1,171 @@
+<!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>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+  
+        .list {
+          width: 990px;
+          margin: 100px auto 0;
+        }
+  
+        .item {
+          padding: 15px;
+          transition: all 0.5s;
+          display: flex;
+          border-top: 1px solid #e4e4e4;
+        }
+  
+        .item:nth-child(4n) {
+          margin-left: 0;
+        }
+  
+        .item:hover {
+          cursor: pointer;
+          background-color: #f5f5f5;
+        }
+  
+        .item img {
+          width: 80px;
+          height: 80px;
+          margin-right: 10px;
+        }
+  
+        .item .name {
+          font-size: 18px;
+          margin-right: 10px;
+          color: #333;
+          flex: 2;
+        }
+  
+        .item .name .tag {
+          display: block;
+          padding: 2px;
+          font-size: 12px;
+          color: #999;
+        }
+  
+        .item .price,
+        .item .sub-total {
+          font-size: 18px;
+          color: firebrick;
+          flex: 1;
+        }
+  
+        .item .price::before,
+        .item .sub-total::before,
+        .amount::before {
+          content: "¥";
+          font-size: 12px;
+        }
+  
+        .item .spec {
+          flex: 2;
+          color: #888;
+          font-size: 14px;
+        }
+  
+        .item .count {
+          flex: 1;
+          color: #aaa;
+        }
+  
+        .total {
+          width: 990px;
+          margin: 0 auto;
+          display: flex;
+          justify-content: flex-end;
+          border-top: 1px solid #e4e4e4;
+          padding: 20px;
+        }
+  
+        .total .amount {
+          font-size: 18px;
+          color: firebrick;
+          font-weight: bold;
+          margin-right: 50px;
+        }
+  
+        
+      </style>
+</head>
+<body>
+    <script>
+        // 数据
+        const goodsList = [
+          {
+            id: "4001172",
+            name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
+            price: 289.9,
+            picture:
+              "https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
+            count: 2,
+            spec: { color: "白色" },
+          },
+          {
+            id: "4001009",
+            name: "竹制干泡茶盘正方形沥水茶台品茶盘",
+            price: 109.8,
+            picture:
+              "https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
+            count: 3,
+            spec: { size: "40cm*40cm", color: "黑色" },
+          },
+          {
+            id: "4001874",
+            name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
+            price: 488,
+            picture:
+              "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
+            count: 1,
+            spec: { color: "青色", sum: "一大四小" },
+          },
+          {
+            id: "4001649",
+            name: "大师监制龙泉青瓷茶叶罐",
+            price: 139,
+            picture:
+              "https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
+            count: 8,
+            spec: { size: "小号", color: "紫色" },
+            gift: "50g茶叶,清洗球,礼盒",
+          },
+        ];
+    
+    
+        // 获取列表容器
+        const listContainer = document.querySelector('.list');
+    
+        function gifts(gift) {
+          return gift.split(',').map(gift => `<span class="tag">【赠品】${gift}</span>`).join('');
+        }
+        // 渲染商品列表
+        goodsList.forEach(item => {
+          const itemElement = document.createElement('div');
+          itemElement.className = 'item';
+          itemElement.innerHTML = `
+            <img src="${item.picture}" alt="${item.name}" />
+            <p class="name">${item.name}${item.gift ? gifts(item.gift) : ''}</p>
+            <p class="spec">${Object.values(item.spec).join('/')}</p>
+            <p class="price">¥${item.price.toFixed(2)}</p>
+            <p class="count">x${item.count}</p>
+            <p class="sub-total">¥${(item.price * item.count).toFixed(2)}</p>
+          `;
+          listContainer.appendChild(itemElement);
+        });
+    
+        // 计算总金额
+        const amount = goodsList.reduce((sum, item) => sum + (item.price * item.count), 0);
+        const totalElement = document.querySelector('.total .amount');
+        totalElement.textContent = amount.toFixed(2);
+    
+      </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

