idealjs/stack
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 风格册新增拟物页（木桌/纸叠卡/相框凹槽/蜡封/黄铜铆钉），封面改 3×3 满幅

Browse Source
This commit is contained in:
cqh963852 committed 2026-10-04 22:26:26 +08:00
1 parent 42635c65ec
commit 158f2b9bbc
2 files changed
+106 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

design-refs/mockup/design-styles.html
+106 -13
View File
@@ -84,12 +84,12 @@
<div class="page">
<div class="story-head">
<span class="tag">&lt;DesignStyles /&gt;</span>
<h2>设计风格探索 · 七种风格 × 课程书架</h2>
<div class="desc">同一套课程卡信息（章节卡 · 16:9 预期区 · 状态 · 路线）在七种风格语言下重演，供横向对比与择路。均遵守：不用色彩渐变。</div>
<h2>设计风格探索 · 八种风格 × 课程书架</h2>
<div class="desc">同一套课程卡信息（章节卡 · 16:9 预期区 · 状态 · 路线）在八种风格语言下重演，供横向对比与择路。均遵守：不用色彩渐变。</div>
</div>
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
<div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;">
<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>
@@ -125,15 +125,20 @@
<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>。风格可分层混用，规则见各页右栏。</div>
<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 / 08</div>
<div class="pagenum">01 / 09</div>
</div>
<!-- ================= P2 瑞士风格 ================= -->
@@ -211,7 +216,7 @@
</div>
<div class="footline">设计风格探索 · Swiss · stack idealjs</div>
<div class="pagenum">02 / 08</div>
<div class="pagenum">02 / 09</div>
</div>
<!-- ================= P3 孟菲斯 ================= -->
@@ -285,7 +290,7 @@
</div>
<div class="footline">设计风格探索 · Memphis · stack idealjs</div>
<div class="pagenum">03 / 08</div>
<div class="pagenum">03 / 09</div>
</div>
<!-- ================= P4 拼贴风 ================= -->
@@ -373,7 +378,7 @@
</div>
<div class="footline">设计风格探索 · Collage · stack idealjs</div>
<div class="pagenum">04 / 08</div>
<div class="pagenum">04 / 09</div>
</div>
<!-- ================= P5 波普风 ================= -->
@@ -446,7 +451,7 @@
</div>
<div class="footline">设计风格探索 · Pop Art · stack idealjs</div>
<div class="pagenum">05 / 08</div>
<div class="pagenum">05 / 09</div>
</div>
<!-- ================= P6 扁平风 ================= -->
@@ -514,7 +519,7 @@
</div>
<div class="footline">设计风格探索 · Flat · stack idealjs</div>
<div class="pagenum">06 / 08</div>
<div class="pagenum">06 / 09</div>
</div>
<!-- ================= P7 像素风 ================= -->
@@ -601,7 +606,7 @@
</div>
<div class="footline">设计风格探索 · Pixel · stack idealjs</div>
<div class="pagenum">07 / 08</div>
<div class="pagenum">07 / 09</div>
</div>
<!-- ================= P8 极简风 ================= -->
@@ -672,7 +677,95 @@
</div>
<div class="footline">设计风格探索 · Minimal · stack idealjs</div>
<div class="pagenum">08 / 08</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>
design-refs/mockup/design-styles.pdf
BIN
View File
Binary file not shown.