chore: 删除 design-styles 风格探索稿——使命完成,定稿见 design-system
This commit is contained in:
1 parent
f305416826
commit
4336553e98
3 files changed
+1
-773
No files matched your search
@@ -17,7 +17,7 @@ export TMPDIR="$HOME/.cache/h2p-tmp"
|
||||
|
||||
STEMS=("$@")
|
||||
if [ ${#STEMS[@]} -eq 0 ]; then
|
||||
STEMS=(course-shelf components color-system design-styles design-system)
|
||||
STEMS=(course-shelf components color-system design-system)
|
||||
fi
|
||||
|
||||
for STEM in "${STEMS[@]}"; do
|
||||
|
||||
@@ -1,772 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>设计风格探索 · 七种风格 × 课程书架 · stack idealjs</title>
|
||||
<style>
|
||||
/* ====== 页面基座(与组件/色彩稿一致) ====== */
|
||||
@page { size: 1280px 800px; margin: 0; }
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0; padding: 0; width: 1280px;
|
||||
background: #f0f0ef;
|
||||
font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: #1a1a1a;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.page {
|
||||
width: 1280px; height: 800px; position: relative;
|
||||
background: #f0f0ef; overflow: hidden; page-break-after: always;
|
||||
}
|
||||
.page:last-child { page-break-after: auto; }
|
||||
|
||||
@media screen {
|
||||
html { height: auto; display: flex; justify-content: center; background: #f0f0ef; }
|
||||
body { transform-origin: top center; scale: min(1, calc(100vw / 1280px)); margin: 0 auto; box-shadow: 0 0 48px rgba(15, 23, 42, 0.18); }
|
||||
}
|
||||
|
||||
.pagenum { position: absolute; bottom: 26px; right: 40px; font-size: 13px; color: #8a8a8a; letter-spacing: 2px; }
|
||||
.footline { position: absolute; bottom: 26px; left: 40px; font-size: 13px; color: #8a8a8a; letter-spacing: 1px; }
|
||||
|
||||
.story-head { position: absolute; top: 36px; left: 40px; right: 40px; }
|
||||
.story-head .tag {
|
||||
display: inline-block; font-size: 15px; font-weight: 700; color: #6d28d9;
|
||||
background: #efe6fb; border-radius: 8px; padding: 3px 12px;
|
||||
font-family: "DejaVu Sans Mono", "Noto Sans CJK SC", monospace;
|
||||
}
|
||||
.story-head h2 { margin: 8px 0 4px; font-size: 28px; font-weight: 800; color: #1a1a1a; }
|
||||
.story-head .desc { font-size: 14.5px; color: #6b6b6b; }
|
||||
|
||||
.canvas {
|
||||
background: #fbfbfa;
|
||||
border: 1px dashed #cfcfcd;
|
||||
border-radius: 18px;
|
||||
padding: 20px 22px;
|
||||
position: absolute;
|
||||
}
|
||||
.panel { background: #ffffff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(26,26,26,0.06); }
|
||||
.panel h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
|
||||
.note .idx {
|
||||
flex: none; width: 22px; height: 22px; border-radius: 50%;
|
||||
background: #1a1a1a; color: #ffffff; font-size: 13px; font-weight: 700;
|
||||
display: flex; align-items: center; justify-content: center; margin-top: 1px;
|
||||
}
|
||||
.note .txt { font-size: 13px; line-height: 1.55; color: #3d3d3d; }
|
||||
.note .txt b { color: #1a1a1a; }
|
||||
|
||||
table.spec { width: 100%; border-collapse: collapse; font-size: 12px; color: #3d3d3d; }
|
||||
table.spec th { text-align: left; font-weight: 700; color: #1a1a1a; border-bottom: 2px solid #d5d5d3; padding: 5px 8px 5px 0; }
|
||||
table.spec td { border-bottom: 1px solid #ececea; padding: 4px 8px 4px 0; vertical-align: top; }
|
||||
table.spec td.k { color: #1a1a1a; font-weight: 600; white-space: nowrap; }
|
||||
table.spec code { font-family: "DejaVu Sans Mono", monospace; font-size: 11.5px; background: #f4f2fa; color: #6d28d9; border-radius: 5px; padding: 1px 5px; }
|
||||
|
||||
/* ====== 通用样张元素 ====== */
|
||||
.demo-card { position: absolute; padding: 10px; }
|
||||
.demo-zone { display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.demo-t { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
|
||||
.swrow2 { display: flex; gap: 10px; align-items: flex-start; position: absolute; }
|
||||
.swchip { width: 92px; }
|
||||
.swchip .b { height: 30px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(26,26,26,0.06); }
|
||||
.swchip .n { font-family: "DejaVu Sans Mono", monospace; font-size: 9px; font-weight: 700; margin-top: 4px; white-space: nowrap; }
|
||||
.swchip .h { font-family: "DejaVu Sans Mono", monospace; font-size: 8.5px; color: #6b6b6b; }
|
||||
|
||||
/* 波普本戴点(硬边点阵,非渐变过渡) */
|
||||
.benday { background-image: radial-gradient(circle at 5px 5px, rgba(255,59,107,0.55) 2.2px, transparent 2.4px); background-size: 10px 10px; }
|
||||
|
||||
/* 像素框:硬边阶梯投影 */
|
||||
.pxframe { border: 2px solid #1d2b53; box-shadow: 4px 4px 0 #ffec27; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ================= P1 封面 · 七风格目录 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag"><DesignStyles /></span>
|
||||
<h2>设计风格探索 · 八种风格 × 课程书架</h2>
|
||||
<div class="desc">同一套课程卡信息(章节卡 · 16:9 预期区 · 状态 · 路线)在八种风格语言下重演,供横向对比与择路。均遵守:不用色彩渐变。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 1200px; height: 594px;">
|
||||
<div style="display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:14px; height:100%;">
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">瑞士风格 Swiss</b><span style="font-size:11px; color:#8a8a8a;">02</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#111111;"></span><span style="width:22px;height:14px;border-radius:3px;background:#ffffff;box-shadow:inset 0 0 0 1px #d5d5d3;"></span><span style="width:22px;height:14px;border-radius:3px;background:#f0f0ef;"></span><span style="width:22px;height:14px;border-radius:3px;background:#e4002b;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">网格与排印承担一切,红色只做信号。信息密度的最优解。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">孟菲斯 Memphis</b><span style="font-size:11px; color:#8a8a8a;">03</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#ff6b6b;"></span><span style="width:22px;height:14px;border-radius:3px;background:#ffd93d;"></span><span style="width:22px;height:14px;border-radius:3px;background:#4ecdc4;"></span><span style="width:22px;height:14px;border-radius:3px;background:#f7f0e8;box-shadow:inset 0 0 0 1px #d5d5d3;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">粗黑描边、硬投影与几何涂鸦,欢乐但吵闹。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">拼贴风 Collage</b><span style="font-size:11px; color:#8a8a8a;">04</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#d9c7a7;"></span><span style="width:22px;height:14px;border-radius:3px;background:#fffdf5;box-shadow:inset 0 0 0 1px #d5d5d3;"></span><span style="width:22px;height:14px;border-radius:3px;background:#b3402a;"></span><span style="width:22px;height:14px;border-radius:3px;background:#8a7a5c;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">纸片、胶带与图钉:知识像剪报被钉在线上,手作感强。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">波普风 Pop Art</b><span style="font-size:11px; color:#8a8a8a;">05</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#ffd500;"></span><span style="width:22px;height:14px;border-radius:3px;background:#ff3b6b;"></span><span style="width:22px;height:14px;border-radius:3px;background:#2b6bf3;"></span><span style="width:22px;height:14px;border-radius:3px;background:#111111;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">本戴点与爆炸框,完成章节像漫画的 POW!情绪最强。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">扁平风 Flat</b><span style="font-size:11px; color:#8a8a8a;">06</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#3b82f6;"></span><span style="width:22px;height:14px;border-radius:3px;background:#22c55e;"></span><span style="width:22px;height:14px;border-radius:3px;background:#f59e0b;"></span><span style="width:22px;height:14px;border-radius:3px;background:#eef2f7;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">纯色块分层、无影无纹理,工程实现最省。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">像素风 Pixel</b><span style="font-size:11px; color:#8a8a8a;">07</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#1d2b53;"></span><span style="width:22px;height:14px;border-radius:3px;background:#ff004d;"></span><span style="width:22px;height:14px;border-radius:3px;background:#00e436;"></span><span style="width:22px;height:14px;border-radius:3px;background:#fff1e8;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">任务地图与 HP 条:学习像通关,游戏化拉满。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">极简风 Minimal</b><span style="font-size:11px; color:#8a8a8a;">08</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#111111;"></span><span style="width:22px;height:14px;border-radius:3px;background:#6b6b6b;"></span><span style="width:22px;height:14px;border-radius:3px;background:#d5d5d3;"></span><span style="width:22px;height:14px;border-radius:3px;background:#a2b49b;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">留白与发丝线,颜色退到墨阶,仅 sage 一点呼吸。</div>
|
||||
</div>
|
||||
<div style="background:#fff; border-radius:14px; padding:16px 18px; border:1px solid #ececea;">
|
||||
<div style="display:flex; align-items:center; gap:10px;"><b style="font-size:15px;">拟物 Skeuomorphism</b><span style="font-size:11px; color:#8a8a8a;">09</span></div>
|
||||
<div style="display:flex; gap:5px; margin:9px 0;"><span style="width:22px;height:14px;border-radius:3px;background:#8b5e3c;"></span><span style="width:22px;height:14px;border-radius:3px;background:#f5efe0;"></span><span style="width:22px;height:14px;border-radius:3px;background:#b3402a;"></span><span style="width:22px;height:14px;border-radius:3px;background:#c9a86a;"></span></div>
|
||||
<div style="font-size:12px; color:#555; line-height:1.6;">木桌、精装书与蜡封:材质带来拥有感,最有仪式感。</div>
|
||||
</div>
|
||||
<div style="background:#111111; border-radius:14px; padding:16px 18px; color:#ffffff;">
|
||||
<b style="font-size:15px;">怎么选</b>
|
||||
<div style="font-size:12px; color:#c9c9c7; line-height:1.7; margin-top:8px;">主风格在瑞士 / 扁平 / 极简中取一(信息效率);<b style="color:#fff;">拟物</b>给课程卡与书架本体;孟菲斯 · 波普 · 像素做<b style="color:#fff;">成就与彩蛋层</b>;拼贴适合<b style="color:#fff;">实践经历栏目</b>。风格分层混用,规则见各页右栏。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Design Styles · stack idealjs</div>
|
||||
<div class="pagenum">01 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P2 瑞士风格 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Swiss</span>
|
||||
<h2>瑞士风格 · 网格与排印承担一切</h2>
|
||||
<div class="desc">客观、齐左、大字号对比,红只做信号;卡片无影,靠发丝线与网格定位。信息密度最高的选择。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
|
||||
<div style="position:absolute; left:26px; top:18px; font-size:88px; font-weight:800; line-height:1; color:#111111;">01</div>
|
||||
<div style="position:absolute; left:150px; top:34px;">
|
||||
<div style="font-size:10px; letter-spacing:3px; color:#e4002b; font-weight:700;">COURSE SHELF — FULL-STACK</div>
|
||||
<div style="font-size:21px; font-weight:800; margin-top:4px;">课程书架 · 全栈工程师教程</div>
|
||||
<div style="width:44px; height:3px; background:#e4002b; margin-top:8px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-card" style="left:26px; top:150px; width:236px; background:#ffffff; border:1px solid #d5d5d3;">
|
||||
<div class="demo-zone" style="height:132px; border:1px solid #111111; background:#ffffff;">
|
||||
<span style="font-size:30px;">🌐</span>
|
||||
<span style="position:absolute; right:6px; top:6px; font-size:8.5px; letter-spacing:1px; color:#111111;">16:9</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:13px; flex:1;">快速开始</b><span style="background:#111111; color:#fff; font-size:9px; font-weight:700; padding:2px 8px;">✓</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:306px; top:150px; width:236px; background:#ffffff; border:1px solid #d5d5d3;">
|
||||
<div class="demo-zone" style="height:132px; border:1px solid #111111; background:#ffffff;">
|
||||
<span style="font-size:30px;">⚛️</span>
|
||||
<span style="position:absolute; right:6px; top:6px; font-size:8.5px; letter-spacing:1px; color:#111111;">16:9</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:13px; flex:1;">React</b><span style="background:#111111; color:#fff; font-size:9px; font-weight:700; padding:2px 8px;">✓</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:586px; top:150px; width:236px; background:#ffffff; border:1px solid #d5d5d3;">
|
||||
<div class="demo-zone" style="height:132px; border:1px solid #111111; background:#ffffff;">
|
||||
<span style="font-size:30px;">🔗</span>
|
||||
<span style="position:absolute; right:6px; top:6px; font-size:8.5px; letter-spacing:1px; color:#8a8a8a;">LOCK</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:13px; flex:1;">全栈基础</b><span style="background:#ffffff; color:#8a8a8a; border:1px solid #d5d5d3; font-size:9px; font-weight:700; padding:2px 8px;">○</span></div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<line x1="26" y1="356" x2="854" y2="356" stroke="#111111" stroke-width="1"/>
|
||||
<rect x="144" y="353" width="6" height="6" fill="#e4002b"/>
|
||||
<rect x="424" y="353" width="6" height="6" fill="#111111"/>
|
||||
<rect x="704" y="353" width="6" height="6" fill="#8a8a8a"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:26px; top:380px; font-size:10.5px; color:#555555; letter-spacing:1px;">SEQUENCE 01–06 · GRID 12 COL · TYPE 2 STEP</div>
|
||||
|
||||
<div class="swrow2" style="left:26px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#111111;"></div><div class="n">ink</div><div class="h">#111111</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#ffffff;"></div><div class="n">paper</div><div class="h">#ffffff</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#f0f0ef;"></div><div class="n">desk</div><div class="h">#f0f0ef</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#8a8a8a;"></div><div class="n">gray</div><div class="h">#8a8a8a</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#e4002b;"></div><div class="n">signal-red</div><div class="h">#e4002b</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>黑 / 白 / 灰 + 单一信号红</td></tr>
|
||||
<tr><td class="k">卡片</td><td>无影,1px 发丝边框</td></tr>
|
||||
<tr><td class="k">排印</td><td>大数字 + 小注释,齐左</td></tr>
|
||||
<tr><td class="k">线条</td><td>1px 黑实线</td></tr>
|
||||
<tr><td class="k">站点</td><td>6px 方块(红=当前)</td></tr>
|
||||
<tr><td class="k">状态</td><td>黑块 ✓ / 灰框 ○</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:教程正文与目录——信息效率天花板。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:儿童向或庆功场景太冷静。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>混用</b>:可作全站骨架,其余风格做局部层。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Swiss · stack idealjs</div>
|
||||
<div class="pagenum">02 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P3 孟菲斯 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Memphis</span>
|
||||
<h2>孟菲斯 · 粗描边与几何涂鸦</h2>
|
||||
<div class="desc">反功能主义的欢乐:高饱和撞色、2px 黑描边、硬投影,圆点波浪三角当装饰。学习不必一脸严肃。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
|
||||
<div class="demo-card" style="left:36px; top:40px; width:236px; background:#ffd93d; border:2px solid #111111; border-radius:16px; box-shadow:5px 5px 0 #111111;">
|
||||
<div class="demo-zone" style="height:132px; background:#f7f0e8; border:2px solid #111111; border-radius:10px;">
|
||||
<span style="font-size:32px;">🌐</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:14px; flex:1;">快速开始</b><span style="background:#ff6b6b; color:#fff; border:2px solid #111; font-size:10px; font-weight:800; padding:2px 9px; border-radius:999px;">✓</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:316px; top:64px; width:236px; background:#4ecdc4; border:2px solid #111111; border-radius:16px; box-shadow:5px 5px 0 #111111; transform:rotate(-1.2deg);">
|
||||
<div class="demo-zone" style="height:132px; background:#f7f0e8; border:2px solid #111111; border-radius:10px;">
|
||||
<span style="font-size:32px;">⚛️</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:14px; flex:1;">React</b><span style="background:#ffd93d; color:#111; border:2px solid #111; font-size:10px; font-weight:800; padding:2px 9px; border-radius:999px;">✓</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:596px; top:36px; width:236px; background:#ff6b6b; border:2px solid #111111; border-radius:16px; box-shadow:5px 5px 0 #111111;">
|
||||
<div class="demo-zone" style="height:132px; background:#f7f0e8; border:2px solid #111111; border-radius:10px;">
|
||||
<span style="font-size:32px;">🔗</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:14px; flex:1;">全栈基础</b><span style="background:#fff; color:#111; border:2px dashed #111; font-size:10px; font-weight:800; padding:2px 9px; border-radius:999px;">?</span></div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<path d="M 60 300 q 12 -22 24 0 t 24 0 t 24 0 t 24 0 t 24 0 t 24 0" stroke="#ff6b6b" stroke-width="3" fill="none"/>
|
||||
<path d="M 620 320 l 14 24 h -28 z" fill="#4ecdc4" stroke="#111" stroke-width="2"/>
|
||||
<circle cx="560" cy="60" r="7" fill="#ffd93d" stroke="#111" stroke-width="2"/>
|
||||
<circle cx="585" cy="75" r="5" fill="#ff6b6b" stroke="#111" stroke-width="2"/>
|
||||
<circle cx="558" cy="86" r="4" fill="#4ecdc4" stroke="#111" stroke-width="2"/>
|
||||
<line x1="40" y1="360" x2="840" y2="360" stroke="#111111" stroke-width="3"/>
|
||||
<circle cx="150" cy="360" r="7" fill="#ffd93d" stroke="#111" stroke-width="2.5"/>
|
||||
<circle cx="430" cy="360" r="7" fill="#4ecdc4" stroke="#111" stroke-width="2.5"/>
|
||||
<circle cx="710" cy="360" r="7" fill="#ffffff" stroke="#111" stroke-width="2.5"/>
|
||||
<path d="M 825 345 l 6 12 13 2 -9 9 2 13 -12 -6 -12 6 2 -13 -9 -9 13 -2 z" fill="#ff6b6b" stroke="#111" stroke-width="2"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:36px; top:386px; font-size:11px; color:#111; font-weight:700;">装饰不进正文区:涂鸦只出现在留白与卡片边缘。</div>
|
||||
|
||||
<div class="swrow2" style="left:36px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#ff6b6b;"></div><div class="n">coral</div><div class="h">#ff6b6b</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#ffd93d;"></div><div class="n">mustard</div><div class="h">#ffd93d</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#4ecdc4;"></div><div class="n">teal</div><div class="h">#4ecdc4</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#f7f0e8;"></div><div class="n">cream</div><div class="h">#f7f0e8</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#111111;"></div><div class="n">ink</div><div class="h">#111111</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>珊瑚 / 芥末 / 湖蓝 + 奶油底</td></tr>
|
||||
<tr><td class="k">卡片</td><td>2px 黑描边 + 5px 硬投影</td></tr>
|
||||
<tr><td class="k">形状</td><td>大圆角,允许 ±1.5° 旋转</td></tr>
|
||||
<tr><td class="k">线条</td><td>3px 黑实线</td></tr>
|
||||
<tr><td class="k">站点</td><td>描边圆点,四色轮换</td></tr>
|
||||
<tr><td class="k">状态</td><td>彩底描边胶囊 / 星形</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:激励层——成就徽章、里程碑、空状态插画。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:正文阅读区,噪音大、久看累。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:涂鸦只上留白与边缘,永不进文字。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Memphis · stack idealjs</div>
|
||||
<div class="pagenum">03 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P4 拼贴风 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Collage</span>
|
||||
<h2>拼贴风 · 剪报、胶带与图钉</h2>
|
||||
<div class="desc">知识像剪报被钉在线上:牛皮纸、撕边纸片、和纸胶带、邮戳。手作感与档案感并存,适合"经历"类内容。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px; background:#e9e2d2;">
|
||||
<div style="position:absolute; left:0; top:0; right:0; height:200px; background:#d9c7a7; border-radius:17px 17px 0 0;"></div>
|
||||
<div style="position:absolute; left:0; top:200px; right:0; bottom:0; background:#fffdf5;"></div>
|
||||
|
||||
<div class="demo-card" style="left:40px; top:44px; width:238px; background:#fffdf5; border-radius:2px 16px 4px 12px / 12px 4px 14px 6px; box-shadow:2px 3px 8px rgba(90,70,40,0.18); transform:rotate(-1.4deg); border:1px solid #e4dcc8;">
|
||||
<div style="position:absolute; left:-14px; top:-8px; width:58px; height:16px; background:rgba(240,225,190,0.85); transform:rotate(-8deg); box-shadow:0 1px 2px rgba(90,70,40,0.15);"></div>
|
||||
<div class="demo-zone" style="height:130px; background:#efe9da; border-radius:3px;">
|
||||
<span style="font-size:30px;">🌐</span>
|
||||
<span style="position:absolute; right:6px; bottom:6px; font-size:8.5px; color:#8a7a5c; border:1px solid #b8ad93; border-radius:3px; padding:1px 5px; transform:rotate(-2deg);">16:9 · GIF</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:13.5px; flex:1;">快速开始</b><span style="color:#b3402a; border:2px solid #b3402a; border-radius:999px; font-size:9.5px; font-weight:800; padding:1px 8px; transform:rotate(-3deg);">✓ 完成</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:330px; top:66px; width:238px; background:#f7f3ea; border-radius:14px 3px 12px 4px / 4px 12px 6px 14px; box-shadow:2px 3px 8px rgba(90,70,40,0.18); transform:rotate(1.1deg); border:1px solid #e4dcc8;">
|
||||
<div style="position:absolute; right:-12px; top:-9px; width:58px; height:16px; background:rgba(217,199,167,0.9); transform:rotate(7deg); box-shadow:0 1px 2px rgba(90,70,40,0.15);"></div>
|
||||
<div class="demo-zone" style="height:130px; background:#e7e0cf; border-radius:3px;">
|
||||
<span style="font-size:30px;">⚛️</span>
|
||||
<span style="position:absolute; right:6px; bottom:6px; font-size:8.5px; color:#8a7a5c; border:1px solid #b8ad93; border-radius:3px; padding:1px 5px; transform:rotate(2deg);">16:9 · GIF</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:13.5px; flex:1;">React</b><span style="color:#b3402a; border:2px solid #b3402a; border-radius:999px; font-size:9.5px; font-weight:800; padding:1px 8px; transform:rotate(2deg);">✓ 完成</span></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-card" style="left:620px; top:88px; width:238px; background:#fffdf5; border-radius:12px 3px 10px 4px / 4px 10px 6px 12px; box-shadow:2px 3px 8px rgba(90,70,40,0.18); transform:rotate(1.5deg); border:1px solid #e4dcc8;">
|
||||
<div style="position:absolute; right:-10px; top:-9px; width:54px; height:15px; background:rgba(240,225,190,0.85); transform:rotate(6deg); box-shadow:0 1px 2px rgba(90,70,40,0.15);"></div>
|
||||
<div class="demo-zone" style="height:130px; background:#efe9da; border-radius:3px;">
|
||||
<span style="font-size:30px; opacity:0.75;">🔗</span>
|
||||
<span style="position:absolute; right:6px; bottom:6px; font-size:8.5px; color:#8a7a5c; border:1px solid #b8ad93; border-radius:3px; padding:1px 5px; transform:rotate(-2deg);">16:9 · GIF</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:13.5px; flex:1;">全栈基础</b><span style="color:#8a7a5c; border:2px solid #b8ad93; border-radius:999px; font-size:9.5px; font-weight:700; padding:1px 8px;">○ 待读</span></div>
|
||||
</div>
|
||||
<div style="position:absolute; left:40px; top:405px; width:200px; height:118px; background:#fffdf5; border-radius:2px 10px 3px 8px / 8px 3px 10px 4px; transform:rotate(-1deg); box-shadow:2px 3px 8px rgba(90,70,40,0.18); padding:12px 14px;">
|
||||
<div style="font-size:9px; letter-spacing:2px; color:#8a7a5c;">NOTES · 剪报</div>
|
||||
<div style="margin-top:7px; height:3px; background:#d9cdb4; border-radius:2px;"></div>
|
||||
<div style="margin-top:5px; height:3px; background:#d9cdb4; border-radius:2px; width:82%;"></div>
|
||||
<div style="margin-top:5px; height:3px; background:#d9cdb4; border-radius:2px; width:64%;"></div>
|
||||
<div style="margin-top:9px; width:64px; height:64px; border:2px solid #b3402a; border-radius:50%; color:#b3402a; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; transform:rotate(-12deg); margin-left:auto;">已归档</div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<path d="M 40 320 C 150 300, 260 340, 400 322 S 640 300, 840 326" stroke="#8a7a5c" stroke-width="2" fill="none" stroke-dasharray="7 5"/>
|
||||
<circle cx="120" cy="315" r="6" fill="#b3402a" stroke="#7c2c1d" stroke-width="1.5"/>
|
||||
<circle cx="118" cy="313" r="1.6" fill="#f3c9a5"/>
|
||||
<circle cx="420" cy="320" r="6" fill="#b3402a" stroke="#7c2c1d" stroke-width="1.5"/>
|
||||
<circle cx="418" cy="318" r="1.6" fill="#f3c9a5"/>
|
||||
<circle cx="710" cy="322" r="6" fill="#8a7a5c" stroke="#5f5340" stroke-width="1.5"/>
|
||||
<circle cx="708" cy="320" r="1.6" fill="#e8ddc8"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:40px; top:352px; font-size:11px; color:#6b5f47;">麻绳点划线 + 图钉:路线像钉在软木板上。</div>
|
||||
|
||||
<div class="swrow2" style="left:40px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#d9c7a7;"></div><div class="n">kraft</div><div class="h">#d9c7a7</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#fffdf5;"></div><div class="n">scrap</div><div class="h">#fffdf5</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#efe9da;"></div><div class="n">newsprint</div><div class="h">#efe9da</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#b3402a;"></div><div class="n">pin-red</div><div class="h">#b3402a</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#8a7a5c;"></div><div class="n">twine</div><div class="h">#8a7a5c</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>牛皮 / 纸白 / 新闻灰 + 邮戳红</td></tr>
|
||||
<tr><td class="k">卡片</td><td>撕边圆角 + 微旋转 + 软影</td></tr>
|
||||
<tr><td class="k">固定</td><td>和纸胶带(半透米色)</td></tr>
|
||||
<tr><td class="k">线条</td><td>麻绳点划(棕)</td></tr>
|
||||
<tr><td class="k">站点</td><td>图钉圆(红/黄铜)</td></tr>
|
||||
<tr><td class="k">状态</td><td>邮戳圆章「已归档」</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:实践经历栏目、学员作品墙、更新日志。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:需要精确对齐的表格与代码块。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:旋转只在卡片 ±1.5°,文字永不斜。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Collage · stack idealjs</div>
|
||||
<div class="pagenum">04 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P5 波普风 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Pop Art</span>
|
||||
<h2>波普风 · 本戴点与爆炸框</h2>
|
||||
<div class="desc">漫画分格的 3px 黑描边、本戴点半调、四色撞色;完成章节就该像一格漫画里的 POW!情绪最强的选择。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px; background:#ffd500;">
|
||||
<div class="demo-card" style="left:36px; top:40px; width:236px; background:#ffffff; border:3px solid #111111; border-radius:6px; box-shadow:6px 6px 0 #111111;">
|
||||
<div class="demo-zone benday" style="height:132px; border:2px solid #111; background-color:#ff9ebb;">
|
||||
<span style="font-size:32px; background:#fff; border:2px solid #111; border-radius:8px; padding:4px 8px;">🌐</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:15px; flex:1; letter-spacing:0.5px;">快速开始</b><span style="background:#111; color:#ffd500; font-size:10px; font-weight:900; padding:2px 9px;">✓</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:316px; top:40px; width:236px; background:#ffffff; border:3px solid #111111; border-radius:6px; box-shadow:6px 6px 0 #111111;">
|
||||
<div class="demo-zone benday" style="height:132px; border:2px solid #111; background-color:#9ec5ff;">
|
||||
<span style="font-size:32px; background:#fff; border:2px solid #111; border-radius:8px; padding:4px 8px;">⚛️</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:15px; flex:1; letter-spacing:0.5px;">React</b><span style="background:#111; color:#ffd500; font-size:10px; font-weight:900; padding:2px 9px;">✓</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:596px; top:40px; width:236px; background:#ffffff; border:3px solid #111111; border-radius:6px; box-shadow:6px 6px 0 #111111;">
|
||||
<div class="demo-zone" style="height:132px; border:2px solid #111; background-color:#eeeeee;">
|
||||
<span style="font-size:32px; filter:grayscale(1); opacity:0.6;">🔗</span>
|
||||
<span style="position:absolute; right:8px; top:8px; background:#111; color:#fff; font-size:9px; font-weight:900; padding:2px 7px;">未解锁</span>
|
||||
</div>
|
||||
<div class="demo-t"><b style="font-size:15px; flex:1; letter-spacing:0.5px;">全栈基础</b></div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<path d="M 60 236 l 11 23 25 3 -18 17 4 25 -22 -12 -22 12 4 -25 -18 -17 25 -3 z" fill="#ff3b6b" stroke="#111" stroke-width="2.5"/>
|
||||
<path d="M 300 240 l 10 20 22 3 -16 15 4 22 -20 -11 -20 11 4 -22 -16 -15 22 -3 z" fill="#2b6bf3" stroke="#111" stroke-width="2"/>
|
||||
<line x1="36" y1="360" x2="844" y2="360" stroke="#111111" stroke-width="4"/>
|
||||
<path d="M 140 344 l 7 14 15 2 -11 10 3 15 -14 -7 -14 7 3 -15 -11 -10 15 -2 z" fill="#ffd500" stroke="#111" stroke-width="2"/>
|
||||
<path d="M 430 344 l 7 14 15 2 -11 10 3 15 -14 -7 -14 7 3 -15 -11 -10 15 -2 z" fill="#2b6bf3" stroke="#111" stroke-width="2"/>
|
||||
<path d="M 720 344 l 7 14 15 2 -11 10 3 15 -14 -7 -14 7 3 -15 -11 -10 15 -2 z" fill="#ffffff" stroke="#111" stroke-width="2"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:122px; top:268px; font-size:15px; color:#111; font-weight:900; transform:rotate(-4deg); letter-spacing:1px;">POW!</div>
|
||||
<div style="position:absolute; left:362px; top:268px; font-size:14px; color:#111; font-weight:900; transform:rotate(-3deg); letter-spacing:1px;">DONE!</div>
|
||||
<div style="position:absolute; left:36px; top:390px; font-size:11.5px; color:#111; font-weight:700;">本戴点 = 硬边点阵图案(非色彩渐变);爆炸框只给"完成"时刻。</div>
|
||||
|
||||
<div class="swrow2" style="left:36px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#ffd500;"></div><div class="n">yellow</div><div class="h">#ffd500</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#ff3b6b;"></div><div class="n">pink</div><div class="h">#ff3b6b</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#2b6bf3;"></div><div class="n">blue</div><div class="h">#2b6bf3</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#9ec5ff;"></div><div class="n">halftone-b</div><div class="h">#9ec5ff</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#111111;"></div><div class="n">ink</div><div class="h">#111111</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>黄 / 粉 / 蓝 / 黑四色</td></tr>
|
||||
<tr><td class="k">卡片</td><td>3px 黑描边 + 6px 硬投影</td></tr>
|
||||
<tr><td class="k">底纹</td><td>本戴点(硬边点阵)</td></tr>
|
||||
<tr><td class="k">线条</td><td>4px 黑实线</td></tr>
|
||||
<tr><td class="k">站点</td><td>五角星(黄/蓝/白)</td></tr>
|
||||
<tr><td class="k">状态</td><td>POW! 爆炸框 / 黑标未解锁</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:庆功层——完成弹窗、里程碑海报、分享卡。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:整站主风格,视觉疲劳快。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:爆炸框一屏至多一个,只用给"完成"。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Pop Art · stack idealjs</div>
|
||||
<div class="pagenum">05 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P6 扁平风 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Flat</span>
|
||||
<h2>扁平风 · 纯色块与留白</h2>
|
||||
<div class="desc">无阴影、无描边、无纹理:层级靠色块对比与留白,状态即色块。工程实现最省、缩放最稳。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px; background:#eef2f7;">
|
||||
<div class="demo-card" style="left:36px; top:44px; width:236px; background:#ffffff; border-radius:12px;">
|
||||
<div class="demo-zone" style="height:132px; background:#3b82f6; border-radius:8px 8px 0 0;">
|
||||
<span style="font-size:32px; color:#ffffff;">🌐</span>
|
||||
</div>
|
||||
<div class="demo-t" style="padding:0 2px 2px;"><b style="font-size:13.5px; flex:1;">快速开始</b><span style="background:#22c55e; color:#fff; font-size:9.5px; font-weight:700; padding:2px 9px; border-radius:5px;">完成</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:316px; top:44px; width:236px; background:#ffffff; border-radius:12px;">
|
||||
<div class="demo-zone" style="height:132px; background:#f59e0b; border-radius:8px 8px 0 0;">
|
||||
<span style="font-size:32px; color:#ffffff;">⚛️</span>
|
||||
</div>
|
||||
<div class="demo-t" style="padding:0 2px 2px;"><b style="font-size:13.5px; flex:1;">React</b><span style="background:#22c55e; color:#fff; font-size:9.5px; font-weight:700; padding:2px 9px; border-radius:5px;">完成</span></div>
|
||||
</div>
|
||||
<div class="demo-card" style="left:596px; top:44px; width:236px; background:#ffffff; border-radius:12px;">
|
||||
<div class="demo-zone" style="height:132px; background:#94a3b8; border-radius:8px 8px 0 0;">
|
||||
<span style="font-size:32px; color:#ffffff; opacity:0.7;">🔗</span>
|
||||
</div>
|
||||
<div class="demo-t" style="padding:0 2px 2px;"><b style="font-size:13.5px; flex:1;">全栈基础</b><span style="background:#cbd5e1; color:#475569; font-size:9.5px; font-weight:700; padding:2px 9px; border-radius:5px;">未开始</span></div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<line x1="36" y1="310" x2="844" y2="310" stroke="#3b82f6" stroke-width="3"/>
|
||||
<circle cx="150" cy="310" r="6" fill="#22c55e"/>
|
||||
<circle cx="430" cy="310" r="6" fill="#22c55e"/>
|
||||
<circle cx="710" cy="310" r="6" fill="#cbd5e1"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:36px; top:336px; font-size:11px; color:#64748b;">层级完全靠色相对比:章节色块在上、灰阶状态在下、蓝线管路径。</div>
|
||||
|
||||
<div class="swrow2" style="left:36px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#3b82f6;"></div><div class="n">primary</div><div class="h">#3b82f6</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#22c55e;"></div><div class="n">done</div><div class="h">#22c55e</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#f59e0b;"></div><div class="n">amber</div><div class="h">#f59e0b</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#94a3b8;"></div><div class="n">locked</div><div class="h">#94a3b8</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#eef2f7;"></div><div class="n">surface</div><div class="h">#eef2f7</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>UI 蓝 / 绿 / 琥珀 + 灰阶</td></tr>
|
||||
<tr><td class="k">卡片</td><td>纯白圆角块,无影无边</td></tr>
|
||||
<tr><td class="k">层级</td><td>靠底色分区,不靠描边</td></tr>
|
||||
<tr><td class="k">线条</td><td>3px 主色实线</td></tr>
|
||||
<tr><td class="k">站点</td><td>实心圆,色即状态</td></tr>
|
||||
<tr><td class="k">状态</td><td>色块小标签(圆角 5)</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:主风格候选——与 Docusaurus 默认气质最近。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:层级多时区分度下降,需留白纪律。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:色块只承载层级,文字永远白底。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Flat · stack idealjs</div>
|
||||
<div class="pagenum">06 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P7 像素风 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Pixel</span>
|
||||
<h2>像素风 · 任务地图与 HP 条</h2>
|
||||
<div class="desc">8-bit 语汇:阶梯硬边框、等宽字、方块点阵路线与进度条。学习即通关,游戏化拉满。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px; background:#1d2b53;">
|
||||
<div class="demo-card pxframe" style="left:36px; top:44px; width:236px; background:#fff1e8;">
|
||||
<div class="demo-zone" style="height:126px; background:#29adff; border:2px solid #1d2b53;">
|
||||
<span style="font-size:32px; filter:saturate(1.4);">🌐</span>
|
||||
</div>
|
||||
<div class="demo-t" style="font-family:'DejaVu Sans Mono', monospace;">
|
||||
<b style="font-size:12px; flex:1;">快速开始</b>
|
||||
<span style="color:#00e436; font-size:11px; font-weight:700;">★ CLEARED</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:3px; margin-top:7px;">
|
||||
<span style="width:34px; height:9px; background:#00e436;"></span><span style="width:34px; height:9px; background:#00e436;"></span><span style="width:34px; height:9px; background:#00e436;"></span><span style="width:34px; height:9px; background:#38b098;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-card pxframe" style="left:316px; top:44px; width:236px; background:#fff1e8;">
|
||||
<div class="demo-zone" style="height:126px; background:#ffec27; border:2px solid #1d2b53;">
|
||||
<span style="font-size:32px;">⚛️</span>
|
||||
</div>
|
||||
<div class="demo-t" style="font-family:'DejaVu Sans Mono', monospace;">
|
||||
<b style="font-size:12px; flex:1;">React</b>
|
||||
<span style="color:#ff004d; font-size:11px; font-weight:700;">▶ PLAYING</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:3px; margin-top:7px;">
|
||||
<span style="width:34px; height:9px; background:#ff004d;"></span><span style="width:34px; height:9px; background:#ff004d;"></span><span style="width:34px; height:9px; background:#7e2553;"></span><span style="width:34px; height:9px; background:#7e2553;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-card pxframe" style="left:596px; top:44px; width:236px; background:#fff1e8;">
|
||||
<div class="demo-zone" style="height:126px; background:#5f574f; border:2px solid #1d2b53;">
|
||||
<span style="font-size:32px; opacity:0.55;">🔗</span>
|
||||
</div>
|
||||
<div class="demo-t" style="font-family:'DejaVu Sans Mono', monospace;">
|
||||
<b style="font-size:12px; flex:1;">全栈基础</b>
|
||||
<span style="color:#5f574f; font-size:11px; font-weight:700;">🔒 LOCKED</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:3px; margin-top:7px;">
|
||||
<span style="width:34px; height:9px; background:#c2c3c7;"></span><span style="width:34px; height:9px; background:#c2c3c7;"></span><span style="width:34px; height:9px; background:#c2c3c7;"></span><span style="width:34px; height:9px; background:#c2c3c7;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<path d="M 40 330 H 840" stroke="#fff1e8" stroke-width="4" stroke-dasharray="8 8"/>
|
||||
<rect x="146" y="324" width="12" height="12" fill="#00e436"/>
|
||||
<rect x="426" y="324" width="12" height="12" fill="#ffec27"/>
|
||||
<rect x="706" y="324" width="12" height="12" fill="#5f574f"/>
|
||||
<path d="M 846 318 h 12 l 6 -8 v 22 h -6 z" fill="#ff004d"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:36px; top:356px; font-size:11px; color:#c2c3c7; font-family:'DejaVu Sans Mono', monospace;">QUEST MAP · 方块站点=关卡 · 旗=下一目标 · HP条=学习进度</div>
|
||||
|
||||
<div class="swrow2" style="left:36px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#1d2b53; box-shadow:inset 0 0 0 1px rgba(255,241,232,0.55);"></div><div class="n" style="color:#c2c3c7;">navy</div><div class="h" style="color:#8a8a8a;">#1d2b53</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#ff004d;"></div><div class="n" style="color:#c2c3c7;">red</div><div class="h" style="color:#8a8a8a;">#ff004d</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#00e436;"></div><div class="n" style="color:#c2c3c7;">green</div><div class="h" style="color:#8a8a8a;">#00e436</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#ffec27;"></div><div class="n" style="color:#c2c3c7;">yellow</div><div class="h" style="color:#8a8a8a;">#ffec27</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#fff1e8;"></div><div class="n" style="color:#c2c3c7;">cream</div><div class="h" style="color:#8a8a8a;">#fff1e8</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>PICO-8 子集(海军蓝底)</td></tr>
|
||||
<tr><td class="k">卡片</td><td>2px 框 + 4px 阶梯硬投影</td></tr>
|
||||
<tr><td class="k">字体</td><td>等宽,全大写状态词</td></tr>
|
||||
<tr><td class="k">线条</td><td>4px 方块点阵(8/8)</td></tr>
|
||||
<tr><td class="k">站点</td><td>12px 方块 = 关卡</td></tr>
|
||||
<tr><td class="k">状态</td><td>★CLEARED / ▶PLAYING / 🔒</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:成就层与练习系统——关卡、积分、连击。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:长文阅读(等宽字排中文费力)。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:像素装饰不缩放抗锯齿;中文正文回到 Noto。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Pixel · stack idealjs</div>
|
||||
<div class="pagenum">07 / 09</div>
|
||||
</div>
|
||||
|
||||
<!-- ================= P8 极简风 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Minimal</span>
|
||||
<h2>极简风 · 减到只剩信息</h2>
|
||||
<div class="desc">留白即层级:发丝顶线代替卡片,文字即界面,颜色退到墨阶——只留 sage 一点呼吸。安静到极致。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px; background:#ffffff;">
|
||||
<div style="position:absolute; left:36px; top:44px; width:250px;">
|
||||
<div style="height:1px; background:#111111;"></div>
|
||||
<div class="demo-zone" style="height:120px; border:1px solid #d5d5d3; margin-top:14px;">
|
||||
<span style="font-size:26px; color:#6b6b6b;">🌐</span>
|
||||
</div>
|
||||
<div class="demo-t"><span style="font-size:10px; color:#a2b49b; font-weight:700;">01</span><b style="font-size:13.5px; flex:1; margin-left:4px;">快速开始</b><span style="font-size:11px; color:#111;">✓</span></div>
|
||||
</div>
|
||||
<div style="position:absolute; left:326px; top:44px; width:250px;">
|
||||
<div style="height:1px; background:#111111;"></div>
|
||||
<div class="demo-zone" style="height:120px; border:1px solid #d5d5d3; margin-top:14px;">
|
||||
<span style="font-size:26px; color:#6b6b6b;">⚛️</span>
|
||||
</div>
|
||||
<div class="demo-t"><span style="font-size:10px; color:#a2b49b; font-weight:700;">02</span><b style="font-size:13.5px; flex:1; margin-left:4px;">React</b><span style="font-size:11px; color:#111;">✓</span></div>
|
||||
</div>
|
||||
<div style="position:absolute; left:616px; top:44px; width:250px;">
|
||||
<div style="height:1px; background:#d5d5d3;"></div>
|
||||
<div class="demo-zone" style="height:120px; border:1px solid #ececea; margin-top:14px;">
|
||||
<span style="font-size:26px; color:#c9c9c7;">🔗</span>
|
||||
</div>
|
||||
<div class="demo-t"><span style="font-size:10px; color:#c9c9c7; font-weight:700;">03</span><b style="font-size:13.5px; flex:1; margin-left:4px; color:#8a8a8a;">全栈基础</b><span style="font-size:11px; color:#c9c9c7;">○</span></div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<line x1="36" y1="270" x2="866" y2="270" stroke="#c9c9c7" stroke-width="0.75"/>
|
||||
<circle cx="161" cy="270" r="2" fill="#a2b49b"/>
|
||||
<circle cx="451" cy="270" r="2" fill="#a2b49b"/>
|
||||
<circle cx="741" cy="270" r="2" fill="#d5d5d3"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:36px; top:296px; font-size:11px; color:#8a8a8a; letter-spacing:0.5px;">唯一的颜色留给路径(sage);完成的章节墨色加重,未到的退为浅灰。</div>
|
||||
|
||||
<div class="swrow2" style="left:36px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#111111;"></div><div class="n">ink</div><div class="h">#111111</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#6b6b6b;"></div><div class="n">ink-500</div><div class="h">#6b6b6b</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#d5d5d3;"></div><div class="n">hairline</div><div class="h">#d5d5d3</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#ffffff;"></div><div class="n">paper</div><div class="h">#ffffff</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#a2b49b;"></div><div class="n">sage(唯一彩)</div><div class="h">#a2b49b</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>墨阶 + 唯一 sage 强调</td></tr>
|
||||
<tr><td class="k">卡片</td><td>发丝顶线,无底无框</td></tr>
|
||||
<tr><td class="k">排印</td><td>序号小字 + 标题,留白分层</td></tr>
|
||||
<tr><td class="k">线条</td><td>0.75px 浅灰</td></tr>
|
||||
<tr><td class="k">站点</td><td>2px 圆点(sage)</td></tr>
|
||||
<tr><td class="k">状态</td><td>墨 ✓ / 浅灰 ○,无底色</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:正文与长阅读——零干扰。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:营销页与激励时刻,太平静。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:一屏只允许一个彩色元素(sage)。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Minimal · stack idealjs</div>
|
||||
<div class="pagenum">08 / 09</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ================= P9 拟物风格 ================= -->
|
||||
<div class="page">
|
||||
<div class="story-head">
|
||||
<span class="tag">Style · Skeuomorphism</span>
|
||||
<h2>拟物 · 木桌上的精装书与蜡封</h2>
|
||||
<div class="desc">材质即隐喻:纸叠卡片、相框凹槽的预期区、缝线与黄铜铆钉、蜡封纪念完成。最重也最贵——用在最有仪式感的地方。</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px; padding: 0; overflow: hidden; background:#8b5e3c; background-image: repeating-linear-gradient(90deg, rgba(62,42,26,0.10) 0 2px, rgba(62,42,26,0) 2px 18px), repeating-linear-gradient(0deg, rgba(62,42,26,0.05) 0 1px, rgba(62,42,26,0) 1px 46px);">
|
||||
<div style="position:absolute; left:0; right:0; top:0; height:12px; background:#6b4226; box-shadow: inset 0 -3px 0 rgba(62,42,26,0.45), 0 2px 0 rgba(255,240,214,0.25);"></div>
|
||||
|
||||
<div class="demo-card" style="left:36px; top:52px; width:238px; background:#f5efe0; border-radius:6px; box-shadow: 0 2px 0 #ffffff, 0 4px 0 #ece2cc, 0 6px 0 #f5efe0, 0 9px 16px rgba(40,24,10,0.35); padding:11px;">
|
||||
<div class="demo-zone" style="height:128px; border-radius:3px; background:#efe6cf; box-shadow: inset 0 2px 6px rgba(62,42,26,0.35), inset 0 -1px 0 rgba(255,255,255,0.7); border:3px solid #6b4226;">
|
||||
<span style="font-size:32px; filter:drop-shadow(0 2px 2px rgba(62,42,26,0.4));">🌐</span>
|
||||
<span style="position:absolute; right:5px; bottom:5px; font-size:8.5px; color:#6b4226;">16:9 · GIF</span>
|
||||
</div>
|
||||
<div class="demo-t">
|
||||
<b style="font-size:14px; flex:1; color:#3e2a1a; text-shadow:0 1px 1px rgba(255,255,255,0.95);">快速开始</b>
|
||||
<span style="width:22px; height:22px; border-radius:52% 46% 55% 47% / 47% 55% 45% 53%; background:#b3402a; transform:rotate(-6deg); box-shadow: inset 0 2px 2px rgba(255,200,160,0.5), inset 0 -3px 4px rgba(90,20,10,0.6), 0 2px 3px rgba(40,24,10,0.4); display:inline-flex; align-items:center; justify-content:center; color:#f5efe0; font-size:11px; font-weight:800;">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-card" style="left:322px; top:64px; width:238px; background:#f5efe0; border-radius:6px; box-shadow: 0 2px 0 #ffffff, 0 4px 0 #ece2cc, 0 6px 0 #f5efe0, 0 9px 16px rgba(40,24,10,0.35); padding:11px; transform:rotate(0.8deg);">
|
||||
<div class="demo-zone" style="height:128px; border-radius:3px; background:#efe6cf; box-shadow: inset 0 2px 6px rgba(62,42,26,0.35), inset 0 -1px 0 rgba(255,255,255,0.7); border:3px solid #6b4226;">
|
||||
<span style="font-size:32px; filter:drop-shadow(0 2px 2px rgba(62,42,26,0.4));">⚛️</span>
|
||||
<span style="position:absolute; right:5px; bottom:5px; font-size:8.5px; color:#6b4226;">16:9 · GIF</span>
|
||||
</div>
|
||||
<div class="demo-t">
|
||||
<b style="font-size:14px; flex:1; color:#3e2a1a; text-shadow:0 1px 1px rgba(255,255,255,0.95);">React</b>
|
||||
<span style="width:22px; height:22px; border-radius:47% 54% 45% 53% / 53% 46% 55% 47%; background:#b3402a; transform:rotate(5deg); box-shadow: inset 0 2px 2px rgba(255,200,160,0.5), inset 0 -3px 4px rgba(90,20,10,0.6), 0 2px 3px rgba(40,24,10,0.4); display:inline-flex; align-items:center; justify-content:center; color:#f5efe0; font-size:11px; font-weight:800;">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-card" style="left:608px; top:52px; width:238px; background:#f5efe0; border-radius:6px; box-shadow: 0 2px 0 #ffffff, 0 4px 0 #ece2cc, 0 6px 0 #f5efe0, 0 9px 16px rgba(40,24,10,0.35); padding:11px;">
|
||||
<div class="demo-zone" style="height:128px; border-radius:3px; background:#d9cdb4; box-shadow: inset 0 2px 6px rgba(62,42,26,0.4); border:3px solid #6b4226;">
|
||||
<span style="font-size:32px; opacity:0.8; filter:grayscale(0.4);">🔗</span>
|
||||
<span style="position:absolute; right:5px; top:5px; width:20px; height:16px; background:#c9a86a; border-radius:3px; box-shadow: inset 0 1px 0 rgba(255,240,200,0.8), inset 0 -2px 2px rgba(90,70,30,0.5); display:flex; align-items:center; justify-content:center; font-size:11px;">🔒</span>
|
||||
</div>
|
||||
<div class="demo-t">
|
||||
<b style="font-size:14px; flex:1; color:#8a7a5c; text-shadow:0 1px 0 rgba(255,255,255,0.6);">全栈基础</b>
|
||||
<span style="font-size:10px; color:#8a7a5c;">黄铜锁扣</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg style="position:absolute; left:0; top:0;" width="880" height="594" viewBox="0 0 880 594">
|
||||
<path d="M 36 330 C 160 314, 300 342, 440 328 S 700 316, 846 334" stroke="#3e2a1a" stroke-width="2.5" fill="none" stroke-dasharray="9 6"/>
|
||||
<circle cx="150" cy="325" r="6.5" fill="#c9a86a" stroke="#7a5a26" stroke-width="1.5"/>
|
||||
<circle cx="148" cy="323" r="1.8" fill="#ffefc9"/>
|
||||
<circle cx="430" cy="329" r="6.5" fill="#c9a86a" stroke="#7a5a26" stroke-width="1.5"/>
|
||||
<circle cx="428" cy="327" r="1.8" fill="#ffefc9"/>
|
||||
<circle cx="710" cy="326" r="6.5" fill="#c9a86a" stroke="#7a5a26" stroke-width="1.5"/>
|
||||
<circle cx="708" cy="324" r="1.8" fill="#ffefc9"/>
|
||||
</svg>
|
||||
<div style="position:absolute; left:36px; top:360px; font-size:11px; color:#f0e2c8;">缝线皮面点划 + 黄铜铆钉站点:路线像手工缝在桌面皮革上。</div>
|
||||
|
||||
<div class="swrow2" style="left:36px; bottom:20px;">
|
||||
<div class="swchip"><div class="b" style="background:#8b5e3c; box-shadow:inset 0 0 0 1px rgba(255,240,214,0.55);"></div><div class="n" style="color:#f0e2c8;">wood</div><div class="h" style="color:#cbb088;">#8b5e3c</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#6b4226;"></div><div class="n" style="color:#f0e2c8;">wood-dark</div><div class="h" style="color:#cbb088;">#6b4226</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#f5efe0;"></div><div class="n" style="color:#f0e2c8;">paper</div><div class="h" style="color:#cbb088;">#f5efe0</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#b3402a;"></div><div class="n" style="color:#f0e2c8;">wax</div><div class="h" style="color:#cbb088;">#b3402a</div></div>
|
||||
<div class="swchip"><div class="b" style="background:#c9a86a;"></div><div class="n" style="color:#f0e2c8;">brass</div><div class="h" style="color:#cbb088;">#c9a86a</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>风格 token</h3>
|
||||
<table class="spec">
|
||||
<tr><th>维度</th><th>取值</th></tr>
|
||||
<tr><td class="k">色彩</td><td>木色 / 纸白 / 蜡红 / 黄铜</td></tr>
|
||||
<tr><td class="k">卡片</td><td>纸叠边缘 + 落影(三层堆叠)</td></tr>
|
||||
<tr><td class="k">预期区</td><td>相框凹槽:厚边 + 内阴影</td></tr>
|
||||
<tr><td class="k">线条</td><td>皮面缝线(棕 9/6 点划)</td></tr>
|
||||
<tr><td class="k">站点</td><td>黄铜铆钉(高光 + 暗边)</td></tr>
|
||||
<tr><td class="k">状态</td><td>蜡封 ✓ / 黄铜锁扣 🔒</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 388px; left: 948px; width: 292px;" class="panel">
|
||||
<h3>适配判断</h3>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>适合</b>:课程卡本体与书架——材质给"拥有感"。</span></div>
|
||||
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>慎用</b>:全站铺满——维护重、渲染贵、易过时。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>规则</b>:材质预算同海拔——一屏一个主角物件。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="footline">设计风格探索 · Skeuomorphism · stack idealjs</div>
|
||||
<div class="pagenum">09 / 09</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Reference in new issue
Block a user