diff --git a/assets/css/page2.css b/assets/css/page2.css index cd6f0cf..1c98ac1 100644 --- a/assets/css/page2.css +++ b/assets/css/page2.css @@ -1,5 +1,6 @@ -/* 第 2 页:无「天」背景;地、桌、椅、枪 */ +/* 第 2 页:满铺淡色「墙」背景,明度同 page1 的「天」 */ +.wall { color: rgba(190, 200, 240, 0.15); } .ground { color: color-mix(in srgb, #8a7350 55%, #000); } .table { color: color-mix(in srgb, #c08a4e 60%, #000); } .chair { color: color-mix(in srgb, #d98f3f 65%, #000); } @@ -16,11 +17,16 @@ .tassel { color: color-mix(in srgb, #d8382a 80%, #000); } .core { color: #ffe23a; } +/* 墙上画框:偏橄榄的古铜金,避免与本页既有的橙、棕、亮黄重复;画面为灰白 */ +.frame { color: color-mix(in srgb, #e0c34a 62%, #000); } +.picture { color: color-mix(in srgb, #e8e8e4 42%, #000); } + /* 前景标题「酒水单」:字号与颜色同 page3 的「演职员表」; - em 相对自身 1.6em 字号,3.125em = 距顶 5 格,2.5em = 距左 4 格 */ + em 相对自身 1.6em 字号,2.9375em = 距顶 4.7 格(居中于留空行 4–6), + 2.5em = 距左 4 格 */ .listing { position: absolute; - top: 3.125em; + top: 2.9375em; left: 2.5em; margin: 0; color: #f2f2f2; @@ -33,7 +39,7 @@ } /* 酒水单列表:前景两列,各自定位; - 字号 1.25em,故 em = 格数 ÷ 1.25(如 9 格 = 7.2em) */ + 字号 1.25em,故 em = 格数 ÷ 1.25(如 12.25 格 = 9.8em) */ .program { position: absolute; inset: 0; @@ -44,8 +50,8 @@ } .program-col { position: absolute; } -.program-col-1 { top: 10em; left: 3.2em; } -.program-col-2 { top: 12em; left: 14.4em; } +.program-col-1 { top: 10.2em; left: 4em; } /* 距顶 12.75 格、距左 5 格,居中于行 12–25 */ +.program-col-2 { top: 11.8em; left: 13.6em; } /* 距顶 14.75 格、距左 17 格,居中于行 14–32 */ .program-item { display: flex; diff --git a/assets/js/page2.js b/assets/js/page2.js index 29510f8..cda1b1a 100644 --- a/assets/js/page2.js +++ b/assets/js/page2.js @@ -1,6 +1,5 @@ /* 第 2 页场景数据 - 全部为背景字:地、桌、椅、枪,均按格对齐。 - 本页不铺「天」,空白格保持为空。 */ + 背景字满铺「墙」,明度同 page1 的「天」;前景文字四周整格扣空。 */ (() => { /* 按矩形铺字,逐行生成一条 glyph */ @@ -12,10 +11,14 @@ cls, })); + /* 扣空:按整格清空,保证留下的背景都是完整字 */ + const clear = (x, y, w, h) => block(x, y, w, h, ' ', 'void'); + TextScene.render({ cols: 28, rows: 44, - skyChar: '', + skyChar: '墙', + skyClass: 'wall', glyphs: [ /* 地:最后一排 */ { text: '地'.repeat(28), x: 0, y: 43, cls: 'ground' }, @@ -55,20 +58,34 @@ ...block(25, 39, 2, 3, '酒', 'wine'), ...block(24, 42, 4, 1, '桶', 'barrel'), - /* 灯笼:右上角,4 格宽;灰链—橙笼作顶盖—橙侧边去角,内里亮黄灯芯 */ - { text: '链', x: 23, y: 0, cls: 'chain' }, - ...block(22, 1, 2, 1, '链', 'chain'), - { text: '链', x: 22, y: 2, cls: 'chain' }, - ...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'), + /* 灯笼:右上角,4 格宽;链加长两节使整体下移两格,并整体右移一格 */ + { text: '链', x: 24, y: 0, cls: 'chain' }, + { text: '链', x: 24, y: 1, cls: 'chain' }, + { text: '链', x: 24, y: 2, cls: 'chain' }, + ...block(23, 3, 2, 1, '链', 'chain'), + { text: '链', x: 23, y: 4, cls: 'chain' }, + ...block(23, 5, 2, 1, '笼', 'cap'), + ...block(22, 6, 1, 3, '笼', 'shade'), + ...block(25, 6, 1, 3, '笼', 'shade'), + ...block(23, 6, 2, 3, '灯', 'core'), + ...block(23, 9, 2, 1, '笼', 'shade'), /* 穗:灯笼底下四字,上行两格、下行左右分开 */ - ...block(22, 8, 2, 1, '穗', 'tassel'), - { text: '穗', x: 21, y: 9, cls: 'tassel' }, - { text: '穗', x: 23, y: 9, cls: 'tassel' }, + ...block(23, 10, 2, 1, '穗', 'tassel'), + { text: '穗', x: 22, y: 11, cls: 'tassel' }, + { text: '穗', x: 24, y: 11, cls: 'tassel' }, + + /* 画框:墙上 8×6 矩形,「框」为边、「图」作画面 */ + ...block(12, 3, 8, 1, '框', 'frame'), + ...block(12, 8, 8, 1, '框', 'frame'), + ...block(12, 4, 1, 4, '框', 'frame'), + ...block(19, 4, 1, 4, '框', 'frame'), + ...block(13, 4, 6, 4, '图', 'picture'), + + /* 前景留白:文字外框各放约半格,再向外取整格扣空,文字在其中居中 */ + ...clear(3, 4, 7, 3), /* 「酒水单」y4.7–6.3 → 行 4–6 */ + ...clear(4, 12, 8, 14), /* 第一列 y12.75–25.25 → 行 12–25 */ + ...clear(16, 14, 8, 19), /* 第二列 y14.75–32.25 → 行 14–32 */ ], });