diff --git a/assets/css/page3.css b/assets/css/page3.css index 5850151..0c66499 100644 --- a/assets/css/page3.css +++ b/assets/css/page3.css @@ -26,19 +26,18 @@ z-index: 1; } -/* 演职员表 nametag:5 × 2 格,格内居中 */ -.nametag { +/* 演职员表大区块:4 × 9 姓名网格,背景 alpha 0.5 */ +.nametag-block { position: absolute; z-index: 1; - display: flex; - align-items: center; - justify-content: center; - width: 5em; - height: 2em; - background: rgba(10, 8, 6, 0.4); + display: grid; + background: rgba(10, 8, 6, 0.5); } .nametag-name { + display: flex; + align-items: center; + justify-content: center; color: #e6dac6; font-size: 1em; font-weight: 400; diff --git a/assets/js/page3.js b/assets/js/page3.js index 67affe5..c8a4d1c 100644 --- a/assets/js/page3.js +++ b/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'); - 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'); + const label = document.createElement('div'); label.className = 'nametag-name'; label.textContent = name; - - tag.append(label); - scene.append(tag); + block.append(label); } } })();