386 lines
9.5 KiB
HTML
386 lines
9.5 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>《在路上》MV 风格锚点板</title>
|
||
<style>
|
||
:root {
|
||
--bg: #171716;
|
||
--panel: #222220;
|
||
--panel-2: #2b2a27;
|
||
--line: #3a3934;
|
||
--text: #ece8dd;
|
||
--muted: #b6b0a4;
|
||
--dim: #8d877d;
|
||
--accent: #c88745;
|
||
--cold: #8fa2aa;
|
||
--danger: #d7b179;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 100%;
|
||
min-height: 100%;
|
||
background: var(--bg);
|
||
font-family: "Microsoft YaHei", "Noto Sans CJK SC", "PingFang SC", "Segoe UI", sans-serif;
|
||
color: var(--text);
|
||
}
|
||
|
||
body {
|
||
display: grid;
|
||
place-items: start center;
|
||
}
|
||
|
||
.board {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
padding: 28px;
|
||
display: grid;
|
||
grid-template-rows: 132px 770px 88px;
|
||
gap: 18px;
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 36%),
|
||
radial-gradient(circle at 80% 14%, rgba(199, 135, 69, 0.10), transparent 25%),
|
||
var(--bg);
|
||
}
|
||
|
||
.top {
|
||
border: 1px solid var(--line);
|
||
background: rgba(34, 34, 32, 0.86);
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
align-items: center;
|
||
padding: 22px 28px;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0;
|
||
font-size: 44px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.subtitle {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 20px;
|
||
line-height: 1.2;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.principles {
|
||
display: grid;
|
||
gap: 10px;
|
||
text-align: right;
|
||
max-width: 890px;
|
||
min-width: 760px;
|
||
font-size: 23px;
|
||
line-height: 1.22;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
|
||
.principles span:last-child {
|
||
color: var(--cold);
|
||
}
|
||
|
||
.main {
|
||
display: grid;
|
||
grid-template-columns: 1340px 502px;
|
||
gap: 22px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.samples {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
gap: 18px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.sample {
|
||
border: 1px solid var(--line);
|
||
background: var(--panel);
|
||
display: grid;
|
||
grid-template-rows: 272px 1fr;
|
||
overflow: hidden;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
}
|
||
|
||
.image-wrap {
|
||
position: relative;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
background: #111;
|
||
}
|
||
|
||
.image-wrap img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.anchor-mark {
|
||
position: absolute;
|
||
top: 14px;
|
||
left: 14px;
|
||
padding: 6px 10px;
|
||
border: 1px solid rgba(236, 232, 221, 0.24);
|
||
background: rgba(17, 17, 16, 0.70);
|
||
color: var(--text);
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.status {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 14px;
|
||
padding: 6px 10px;
|
||
border: 1px solid rgba(199, 135, 69, 0.48);
|
||
background: rgba(37, 28, 22, 0.76);
|
||
color: var(--danger);
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.sample-text {
|
||
padding: 12px 16px 11px;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
align-content: center;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sample h2 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
line-height: 1.1;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.function {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 16px;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.avoid {
|
||
margin: 0;
|
||
color: var(--accent);
|
||
font-size: 15px;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rules {
|
||
border: 1px solid var(--line);
|
||
background: rgba(34, 34, 32, 0.90);
|
||
padding: 18px;
|
||
display: grid;
|
||
grid-template-rows: repeat(5, 1fr);
|
||
gap: 13px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.rule {
|
||
border: 1px solid rgba(58, 57, 52, 0.92);
|
||
background: rgba(43, 42, 39, 0.86);
|
||
padding: 16px 17px;
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 9px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.rule h3 {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
line-height: 1.1;
|
||
letter-spacing: 0;
|
||
color: var(--text);
|
||
}
|
||
|
||
.rule p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 17px;
|
||
line-height: 1.45;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.rule strong {
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.bottom {
|
||
border: 1px solid var(--line);
|
||
background: rgba(34, 34, 32, 0.86);
|
||
display: grid;
|
||
grid-template-columns: 1.18fr 1fr;
|
||
align-items: center;
|
||
gap: 28px;
|
||
padding: 16px 24px;
|
||
}
|
||
|
||
.review-standard {
|
||
margin: 0;
|
||
font-size: 25px;
|
||
line-height: 1.25;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
|
||
.review-standard span {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.questions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 8px 14px;
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
color: var(--muted);
|
||
font-size: 17px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.questions li::before {
|
||
content: "· ";
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="board" aria-label="《在路上》MV 风格锚点板">
|
||
<header class="top">
|
||
<div class="title">
|
||
<h1>《在路上》MV 风格锚点板</h1>
|
||
<p class="subtitle">Style Anchor Board｜Landscape Narrative Road Film</p>
|
||
</div>
|
||
<div class="principles">
|
||
<span>现实纪实质感 + 克制的诗性超现实 + 公路纪录片式风景叙事</span>
|
||
<span>世界比人更大，路比人更长，人只是持续前行的坐标</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="main">
|
||
<div class="samples">
|
||
<article class="sample">
|
||
<div class="image-wrap">
|
||
<img src="../../intake/imgs/A.风景主导型蓝图.png" alt="A 清晨泥泞旷野">
|
||
<div class="anchor-mark">A</div>
|
||
</div>
|
||
<div class="sample-text">
|
||
<h2>A｜清晨泥泞旷野</h2>
|
||
<p class="function">风景主导｜世界先于人出现</p>
|
||
<p class="avoid">不要旅游片 / 英雄背影</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sample">
|
||
<div class="image-wrap">
|
||
<img src="../../intake/imgs/B.高位观察型蓝图.png" alt="B 高位观察">
|
||
<div class="anchor-mark">B</div>
|
||
</div>
|
||
<div class="sample-text">
|
||
<h2>B｜高位观察</h2>
|
||
<p class="function">城市边缘｜系统里的小人物</p>
|
||
<p class="avoid">不要城市宣传 / 科技感</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sample">
|
||
<div class="image-wrap">
|
||
<img src="style-anchor-c-repair-v1.png" alt="C 泥泞里的星空">
|
||
<div class="anchor-mark">C</div>
|
||
<div class="status">修正版已通过</div>
|
||
</div>
|
||
<div class="sample-text">
|
||
<h2>C｜泥泞里的星空</h2>
|
||
<p class="function">灵魂意象｜低处看见宇宙</p>
|
||
<p class="avoid">不要日出 / 魔法 / 鞋靴广告</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sample">
|
||
<div class="image-wrap">
|
||
<img src="../../intake/imgs/D.夜路篝火型蓝图.png" alt="D 夜路小火">
|
||
<div class="anchor-mark">D</div>
|
||
</div>
|
||
<div class="sample-text">
|
||
<h2>D｜夜路小火</h2>
|
||
<p class="function">结尾温度｜远方也有人在走</p>
|
||
<p class="avoid">不要露营 / 聚会 / 胜利</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<aside class="rules" aria-label="风格规则区">
|
||
<section class="rule">
|
||
<h3>色彩系统</h3>
|
||
<p>冷灰 / 土褐 / 暗卡其 / 煤黑 / 湿地暗蓝灰<br><strong>暖色只作为情绪信号</strong></p>
|
||
</section>
|
||
<section class="rule">
|
||
<h3>光线系统</h3>
|
||
<p>自然冷光、湿冷城市边缘、暗夜深度、小范围火光<br>C 用泥水星点，不用日出日落</p>
|
||
</section>
|
||
<section class="rule">
|
||
<h3>构图系统</h3>
|
||
<p>环境优先，人物后置<br>常规人物约 1/8-1/5，大远景可更小</p>
|
||
</section>
|
||
<section class="rule">
|
||
<h3>质感系统</h3>
|
||
<p>泥要湿，路要旧，城市要冷硬，火要小<br>诗性来自现实质感，不来自炫光特效</p>
|
||
</section>
|
||
<section class="rule">
|
||
<h3>禁止跑偏</h3>
|
||
<p>人物写真 / 旅行广告 / 城市宣传 / 赛博科技 / 露营聚会 / 胜利海报</p>
|
||
</section>
|
||
</aside>
|
||
</section>
|
||
|
||
<footer class="bottom">
|
||
<p class="review-standard">第一眼看到的应该是<span>路、世界、泥、夜色和火光</span>；人物只是其中继续前行的坐标。</p>
|
||
<ul class="questions">
|
||
<li>像同一支 MV 吗？</li>
|
||
<li>人物是否过大？</li>
|
||
<li>诗性是否来自现实质感？</li>
|
||
<li>是否仍然在继续走？</li>
|
||
</ul>
|
||
</footer>
|
||
</main>
|
||
</body>
|
||
</html>
|