feat: 第 2 页新增灯笼与酒水单前景列表

右上角以链/笼/灯/穗拼出灯笼；前景标题「酒水单」下按 references/节目单.txt
排两列曲目（前 5 后 7，数字与曲名各自左对齐）；酒杯改为深绿玻璃色。

assets/css/page2.css

@@ -4,12 +4,59 @@
 .table { color: color-mix(in srgb, #c08a4e 60%, #000); }
 .chair { color: color-mix(in srgb, #d98f3f 65%, #000); }
 .gun { color: color-mix(in srgb, #93a9c9 62%, #000); }
-.cup { color: color-mix(in srgb, #f2a83c 85%, #000); }
+.cup { color: color-mix(in srgb, #5fd08a 40%, #000); }
 .candle { color: color-mix(in srgb, #efd9a8 65%, #000); }
 .flame { color: color-mix(in srgb, #ff4b3a 80%, #000); }
 .barrel { color: color-mix(in srgb, #a86a2e 58%, #000); }
 .lid { color: color-mix(in srgb, #b03a2e 62%, #000); }
 .wine { color: rgba(244, 238, 222, 0.5); }
-.lamp { color: color-mix(in srgb, #e0d3bf 58%, #000); }
+.chain { color: color-mix(in srgb, #aeb4bd 62%, #000); }
-.bulb { color: #ffe23a; }
+.shade { color: color-mix(in srgb, #ef7d22 70%, #000); }
-.glow { color: color-mix(in srgb, #ffe23a 22%, #000); }
+.cap { color: color-mix(in srgb, #ef7d22 70%, #000); }
+.tassel { color: color-mix(in srgb, #d8382a 80%, #000); }
+.core { color: #ffe23a; }
+
+/* 前景标题「酒水单」：字号与颜色同 page3 的「演职员表」；
+   em 相对自身 1.6em 字号，3.125em = 距顶 5 格，2.5em = 距左 4 格 */
+.listing {
+  position: absolute;
+  top: 3.125em;
+  left: 2.5em;
+  margin: 0;
+  color: #f2f2f2;
+  font-size: 1.6em;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+/* 酒水单列表：前景两列，各自定位；
+   字号 1.25em，故 em = 格数 ÷ 1.25（如 9 格 = 7.2em） */
+.program {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  color: #e6dac6;
+  font-size: 1.25em;
+  line-height: 2;
+}
+
+.program-col { position: absolute; }
+.program-col-1 { top: 10em; left: 3.2em; }
+.program-col-2 { top: 12em; left: 14.4em; }
+
+.program-item {
+  display: flex;
+}
+
+.program-no {
+  width: 2.6em;
+  text-align: left;
+}
+
+.program-name {
+  text-align: left;
+  white-space: nowrap;
+}

assets/js/page2.js

@@ -55,21 +55,67 @@
       ...block(25, 39, 2, 3, '酒', 'wine'),
       ...block(24, 42, 4, 1, '桶', 'barrel'),
 
-      /* 吊灯：右上角，9 格宽；吊线—倒锥灯罩—T 形灯泡 */
+      /* 灯笼：右上角，4 格宽；灰链—橙笼作顶盖—橙侧边去角，内里亮黄灯芯 */
-      ...block(23, 0, 1, 3, '灯', 'lamp'),
+      { text: '链', x: 23, y: 0, cls: 'chain' },
-      ...block(21, 3, 5, 1, '灯', 'lamp'),
+      ...block(22, 1, 2, 1, '链', 'chain'),
-      ...block(20, 4, 7, 1, '灯', 'lamp'),
+      { text: '链', x: 22, y: 2, cls: 'chain' },
-      ...block(19, 5, 9, 1, '灯', 'lamp'),
+      ...block(22, 3, 2, 1, '笼', 'cap'),
+      ...block(21, 4, 1, 3, '笼', 'shade'),
+      ...block(24, 4, 1, 3, '笼', 'shade'),
+      ...block(22, 4, 2, 3, '灯', 'core'),
+      ...block(22, 7, 2, 1, '笼', 'shade'),
 
-      /* 光：灯泡四周的暗黄光晕，上方被灯罩遮住不放 */
+      /* 穗：灯笼底下四字，上行两格、下行左右分开 */
-      ...block(21, 6, 1, 2, '光', 'glow'),
+      ...block(22, 8, 2, 1, '穗', 'tassel'),
-      ...block(25, 6, 1, 2, '光', 'glow'),
+      { text: '穗', x: 21, y: 9, cls: 'tassel' },
-      ...block(22, 7, 1, 1, '光', 'glow'),
+      { text: '穗', x: 23, y: 9, cls: 'tassel' },
-      ...block(24, 7, 1, 1, '光', 'glow'),
-      ...block(22, 8, 3, 1, '光', 'glow'),
-
-      ...block(22, 6, 3, 1, '灯', 'bulb'),
-      { text: '灯', x: 23, y: 7, cls: 'bulb' },
     ],
   });
+
+  const scene = document.querySelector('.scene');
+  const listing = document.createElement('h1');
+  listing.className = 'listing';
+  listing.textContent = '酒水单';
+  scene.append(listing);
+
+  /* 酒水单：前景两列，前 5 后 7；罗马数字与曲目名各自左对齐 */
+  const PROGRAM = [
+    ['I', '听'], ['II', '酒歌'], ['III', '眼睛'], ['IV', '黑'], ['V', '天'],
+    ['VI', '麻雀'], ['VII', '业火'], ['VIII', '问'], ['IX', '难'], ['X', '画'],
+    ['XI', '田'], ['XII', '今生'],
+  ];
+
+  const programColumn = (items) => {
+    const col = document.createElement('div');
+    col.className = 'program-col';
+
+    for (const [no, name] of items) {
+      const row = document.createElement('div');
+      row.className = 'program-item';
+
+      const numeral = document.createElement('span');
+      numeral.className = 'program-no';
+      numeral.textContent = no;
+
+      const label = document.createElement('span');
+      label.className = 'program-name';
+      label.textContent = name;
+
+      row.append(numeral, label);
+      col.append(row);
+    }
+
+    return col;
+  };
+
+  const program = document.createElement('div');
+  program.className = 'program';
+
+  const first = programColumn(PROGRAM.slice(0, 5));
+  const second = programColumn(PROGRAM.slice(5));
+  first.classList.add('program-col-1');
+  second.classList.add('program-col-2');
+
+  program.append(first, second);
+  scene.append(program);
 })();

references/节目单.txt

@@ -0,0 +1,12 @@
+I 听
+II 酒歌
+III 眼睛
+IV 黑
+V 天
+VI 麻雀
+VII 业火
+VIII 问
+IX 难
+X 画
+XI 田
+XII 今生