feat: 将 35 个姓名放入半透明大区块

- 姓名按 4 列 × 9 行排列，仍保留右下角空位
- 大区块背景 alpha 0.5，不再为每个姓名单独绘制底板

assets/css/page3.css

@@ -26,19 +26,18 @@
   z-index: 1;
 }
 
-/* 演职员表 nametag：5 × 2 格，格内居中 */
+/* 演职员表大区块：4 × 9 姓名网格，背景 alpha 0.5 */
-.nametag {
+.nametag-block {
   position: absolute;
   z-index: 1;
-  display: flex;
+  display: grid;
-  align-items: center;
+  background: rgba(10, 8, 6, 0.5);
-  justify-content: center;
-  width: 5em;
-  height: 2em;
-  background: rgba(10, 8, 6, 0.4);
 }
 
 .nametag-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: #e6dac6;
   font-size: 1em;
   font-weight: 400;

assets/js/page3.js

@@ -123,7 +123,7 @@
   credits.textContent = '演职员表';
   scene.append(credits);
 
-  /* 35 个 nametag：4 列 × 9 行，右下角缺一个 */
+  /* 35 个姓名：4 列 × 9 行，放在一个半透明大区块上 */
   const NAMES = [
     '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
     '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
@@ -143,6 +143,21 @@
     top: 12,
   };
 
+  const blockWidth = TAG.cols * TAG.width + (TAG.cols - 1) * TAG.gapX;
+  const blockHeight = TAG.rows * TAG.height + (TAG.rows - 1) * TAG.gapY;
+
+  const block = document.createElement('div');
+  block.className = 'nametag-block';
+  block.style.left = `${TAG.left}em`;
+  block.style.top = `${TAG.top}em`;
+  block.style.width = `${blockWidth}em`;
+  block.style.height = `${blockHeight}em`;
+  block.style.gridTemplateColumns = `repeat(${TAG.cols}, ${TAG.width}em)`;
+  block.style.gridAutoRows = `${TAG.height}em`;
+  block.style.columnGap = `${TAG.gapX}em`;
+  block.style.rowGap = `${TAG.gapY}em`;
+  scene.append(block);
+
   let nameIndex = 0;
   for (let row = 0; row < TAG.rows; row++) {
     for (let col = 0; col < TAG.cols; col++) {
@@ -151,17 +166,10 @@
       const name = NAMES[nameIndex++];
       if (!name) break;
 
-      const tag = document.createElement('div');
+      const label = document.createElement('div');
-      tag.className = 'nametag';
-      tag.style.left = `${TAG.left + col * (TAG.width + TAG.gapX)}em`;
-      tag.style.top = `${TAG.top + row * (TAG.height + TAG.gapY)}em`;
-
-      const label = document.createElement('span');
       label.className = 'nametag-name';
       label.textContent = name;
-
+      block.append(label);
-      tag.append(label);
-      scene.append(tag);
     }
   }
 })();