diff --git "a/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/.gitignore" "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/.gitignore"
new file mode 100644
index 0000000000000000000000000000000000000000..35410cacdc5e87f985c93a96520f5e11a5c822e4
--- /dev/null
+++ "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/.gitignore"	
@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git "a/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/20241203 1124_\350\264\255\347\211\251\350\275\246.iml" "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/20241203 1124_\350\264\255\347\211\251\350\275\246.iml"
new file mode 100644
index 0000000000000000000000000000000000000000..d6ebd4805981b8400db3e3291c74a743fef9a824
--- /dev/null
+++ "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/20241203 1124_\350\264\255\347\211\251\350\275\246.iml"	
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git "a/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/misc.xml" "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/misc.xml"
new file mode 100644
index 0000000000000000000000000000000000000000..b73c6500fc67d2401f8d431429c18b4ea5971eaf
--- /dev/null
+++ "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/misc.xml"	
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MavenRunner">
+    <option name="vmOptions" value="-DarchetypeCatalog=internal" />
+  </component>
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file
diff --git "a/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/modules.xml" "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/modules.xml"
new file mode 100644
index 0000000000000000000000000000000000000000..8d2f086d718163b3b508db65897cf0e5549c7361
--- /dev/null
+++ "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/.idea/modules.xml"	
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/20241203 1124_购物车.iml" filepath="$PROJECT_DIR$/.idea/20241203 1124_购物车.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git "a/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/index2.html" "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/index2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..324d60062917445d149f7fa76dc29ae70eda594e
--- /dev/null
+++ "b/\345\275\255\346\260\270\347\233\233/20241203 1124_\350\264\255\347\211\251\350\275\246/index2.html"	
@@ -0,0 +1,194 @@
+<!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">1000.00</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茶叶,清洗球,礼盒",
+        },
+    ];
+
+    const list = document.querySelector('.list')
+    list.innerHTML = goodsList.map(item => {
+        const {name, price, picture, count, spec, gift} = item
+        // console.log(spec)
+        // console.log(gift)
+        const speca = Object.values(spec).join('/');
+        console.log(Object.values(spec))
+        const gifta = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : '';
+
+        return ` <div class="item">
+        <img
+          src="${picture}"
+          alt=""
+        />
+        <p class="name">
+          ${name}
+         ${gifta}
+        </p>
+        <p class="spec">${speca}</p>
+        <p class="price">${price.toFixed(2)}</p>
+        <p class="count">x${count}</p>
+        <p class="sub-total">${(price * count).toFixed(2)}</p>
+      </div>`
+    }).join('')
+
+    const amout = document.querySelector('.amount')
+    amout.innerHTML = goodsList.reduce((sum, item) => {
+        return sum + item.price * item.count;
+    }, 0).toFixed(2)
+</script>
+</body>
+</html>
+
