From 546a71d75aaab6219aa39d1c0d30c60987541f50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E9=91=AB=E6=9D=B0?= <2173036056@qq.com>
Date: Thu, 5 Dec 2024 12:10:26 +0800
Subject: [PATCH] test

---
 ...51\345\261\225\344\275\234\344\270\232.md" | 200 ++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 "\345\215\242\351\221\253\346\235\260/20241203 \346\211\251\345\261\225\344\275\234\344\270\232/20241203 \346\211\251\345\261\225\344\275\234\344\270\232.md"
diff --git "a/\345\215\242\351\221\253\346\235\260/20241203 \346\211\251\345\261\225\344\275\234\344\270\232/20241203 \346\211\251\345\261\225\344\275\234\344\270\232.md" "b/\345\215\242\351\221\253\346\235\260/20241203 \346\211\251\345\261\225\344\275\234\344\270\232/20241203 \346\211\251\345\261\225\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..0971143
--- /dev/null
+++ "b/\345\215\242\351\221\253\346\235\260/20241203 \346\211\251\345\261\225\344\275\234\344\270\232/20241203 \346\211\251\345\261\225\344\275\234\344\270\232.md"	
@@ -0,0 +1,200 @@
+作业
+
+```html
+<!DOCTYPE html>
+<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>
+    * {
+      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>
+  <!-- <div class="list">
+    <div class="item">
+        <img
+          src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg"
+          alt=""
+        />
+        <p class="name">
+          称心如意手摇咖啡磨豆机咖啡豆研磨机
+          <span class="tag">【赠品】10优惠券</span>
+        </p>
+        <p class="spec">白色/10寸</p>
+        <p class="price">289.90</p>
+        <p class="count">x2</p>
+        <p class="sub-total">579.80</p>
+      </div>
+  </div> -->
+  <div class="total">
+    <div>合计：<span class="amount"></span></div>
+  </div>
+  <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茶叶,清洗球,礼盒",
+      },
+    ];
+
+    let total = 0;
+    const aArr = goodsList.map(item => {
+      //结构数组的数据为对象并取相应的属性
+      const { name, price, picture, count, spec, gift } = item
+      //商品总价（取小数点后两位）
+      const sum = (item.price * item.count).toFixed(2);
+      total += +sum;
+      console.log(sum);
+      //判断是否有gift属性，有就添加，没有就为空
+      const stringGift = gift ? gift.split(',').map(item => `<span class="tag">【赠品】 ${item}</span>`).join('') : '';
+      // 将对象中的属性spec对象变为字符串
+      const text = Object.values(spec).join('/');
+      return `<div class="item">
+        <img
+          src="${item.picture}"
+          alt=""
+        />
+        <p class="name">${item.name}
+        ${stringGift}
+        </p >
+        <p class="spec">${text}</p>
+        <p class="price">${item.price.toFixed(2)}</p>
+        <p class="count">x${item.count}</p>s
+        <p class="sub-total">${sum}</p>
+      </div >`
+    }).join('');
+    document.querySelector('.list').innerHTML = aArr;
+    document.querySelector('.amount').innerHTML = total.toFixed(2);
+
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

