feat: 补满 4×9 nametag 网格

assets/css/page3.css

@@ -4,10 +4,10 @@
 .sparrow { color: #ff7a3f; }
 .grass { color: #4fc353; }
 .hydrant { color: #a93b43; }
-/* 火山岩 / 熔岩参考色，按暗度 70% 压暗（保留 30% 明度） */
-.rock { color: color-mix(in srgb, #d07a38 30%, #000); }
-.lava-a { color: color-mix(in srgb, #ff8f3f 30%, #000); }
-.lava-b { color: color-mix(in srgb, #ff5a2a 30%, #000); }
+/* 火山岩 / 熔岩参考色，按明度 50% 处理 */
+.rock { color: color-mix(in srgb, #d07a38 50%, #000); }
+.lava-a { color: color-mix(in srgb, #ff8f3f 50%, #000); }
+.lava-b { color: color-mix(in srgb, #ff5a2a 50%, #000); }
 
 /* 前景标题：不参与网格，字号与位置自由；
    top 的 em 相对自身 1.6em 字号，3.125em = 距顶部 5 个背景格 */
@@ -26,20 +26,19 @@
   z-index: 1;
 }
 
-/* 演职员表大区块：4 × 9 姓名网格，背景 alpha 0.5 */
-.nametag-block {
+/* 演职员表 nametag：5 × 2 格，格内居中 */
+.nametag {
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
   z-index: 1;
-  display: grid;
-  background: rgba(10, 8, 6, 0.5);
-}
-
-.nametag-name {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 5em;
+  height: 2em;
+  background: rgba(10, 8, 6, 0.54);
+}
+
+.nametag-name {
   color: #e6dac6;
   font-size: 1em;
   font-weight: 400;

assets/js/page3.js

@@ -123,55 +123,44 @@
   credits.textContent = '演职员表';
   scene.append(credits);
 
-  /* 35 个姓名：4 列 × 9 行，放在一个半透明大区块上 */
+  /* 36 个 nametag：4 列 × 9 行，补满 */
   const NAMES = [
     '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
     '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
     '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓',
     '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥',
     '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵',
+    '虞韫嘉',
   ];
 
   const TAG = {
     cols: 4,
     rows: 9,
-    width: 3,
-    height: 1,
+    width: 5,
+    height: 2,
     gapX: 1,
     gapY: 1,
-    padding: 1,
+    left: 2,
     top: 12,
   };
 
-  const blockWidth =
-    TAG.padding * 2 + TAG.cols * TAG.width + (TAG.cols - 1) * TAG.gapX;
-  const blockHeight =
-    TAG.padding * 2 + TAG.rows * TAG.height + (TAG.rows - 1) * TAG.gapY;
-
-  const block = document.createElement('div');
-  block.className = 'nametag-block';
-  block.style.top = `${TAG.top}em`;
-  block.style.width = `${blockWidth}em`;
-  block.style.height = `${blockHeight}em`;
-  block.style.padding = `${TAG.padding}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++) {
-      if (row === TAG.rows - 1 && col === TAG.cols - 1) continue;
-
       const name = NAMES[nameIndex++];
       if (!name) break;
 
-      const label = document.createElement('div');
+      const tag = 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);
     }
   }
 })();