47 lines
3.1 KiB
HTML
47 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=844, initial-scale=1">
|
|
<title>P9.1 首战视觉切片灰盒</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
html, body { width: 844px; height: 390px; margin: 0; overflow: hidden; }
|
|
body { font-family: sans-serif; color: #182127; background: #d7e0dd; }
|
|
.canvas { position: relative; width: 844px; height: 390px; }
|
|
.box { position: absolute; border: 2px solid #34424a; background: rgba(255,255,255,.52); }
|
|
.box b { display: block; padding: 4px 7px; color: white; background: #34424a; font-size: 12px; }
|
|
.top { left: 12px; top: 10px; width: 820px; height: 54px; }
|
|
.world { left: 18px; top: 72px; width: 544px; height: 242px; background: #a9c3b8; }
|
|
.rail { left: 570px; top: 72px; width: 256px; height: 242px; }
|
|
.dock { left: 18px; top: 322px; width: 808px; height: 56px; }
|
|
.party { position: absolute; left: 54px; top: 100px; width: 345px; height: 116px; border-bottom: 4px solid #34424a; }
|
|
.actor { position: absolute; bottom: 0; width: 84px; height: 104px; display: grid; place-items: center; color: white; background: #566970; border: 3px solid white; }
|
|
.second { left: 34px; }.lead { right: 30px; background: #c94e52; }
|
|
.enemy { position: absolute; right: 32px; top: 68px; width: 92px; height: 115px; display: grid; place-items: center; color: white; background: #855579; border: 3px solid #182127; }
|
|
.gap { position: absolute; left: 382px; top: 128px; width: 72px; border-top: 4px dashed #c94e52; }
|
|
.focal { position: absolute; padding: 3px 7px; color: white; font-weight: bold; font-size: 11px; border-radius: 2px; }
|
|
.first { left: 294px; top: 80px; background: #c94e52; }
|
|
.second-focal { left: 588px; top: 84px; background: #13818a; }
|
|
.third { right: 26px; bottom: 67px; background: #d6a72e; color: #182127; }
|
|
.rail ul { margin: 14px 12px; padding-left: 18px; font-size: 12px; line-height: 1.65; }
|
|
.dock .button { position: absolute; right: 8px; top: -2px; width: 248px; height: 56px; display: grid; place-items: center; color: #182127; background: #d6a72e; border: 2px solid #182127; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="canvas">
|
|
<section class="box top"><b>TOP STATUS RAIL · 820 x 54</b></section>
|
|
<section class="box world">
|
|
<b>MAIN WORLD / CAUSAL EVENT · 544 x 242</b>
|
|
<div class="party"><span class="actor second">1<br>第二位</span><span class="actor lead">0<br>先行位</span></div>
|
|
<div class="gap"></div><div class="enemy">敌人</div>
|
|
</section>
|
|
<aside class="box rail"><b>CONTEXT RAIL · 256 x 242</b><ul><li>当前证据</li><li>行动与目标</li><li>精确前后值</li><li>因果解释</li></ul></aside>
|
|
<footer class="box dock"><b>BOTTOM ACTION DOCK · 808 x 56</b><span class="button">PRIMARY ACTION · 248 x 56</span></footer>
|
|
<span class="focal first">1 · 当前事件 / 受影响角色</span>
|
|
<span class="focal second-focal">2 · 原因 / 精确变化</span>
|
|
<span class="focal third">3 · 下一步 ↓</span>
|
|
</main>
|
|
</body>
|
|
</html>
|