95 lines
5.2 KiB
HTML
95 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/svg+xml" href="logo/favicon.svg">
|
||
<title>海报技能中心 · 画个标</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; font-size: 14px; color: #1f2937; background: #f3f4f6; min-height: 100vh; }
|
||
a { color: #4f46e5; text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 54px; background: linear-gradient(90deg, #1e1b4b, #312e81); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 20; }
|
||
.topbar .brand { display: flex; align-items: center; gap: 10px; }
|
||
.topbar .brand .icon { font-size: 20px; }
|
||
.topbar .brand .name { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
|
||
.topbar .brand .tag { font-size: 11px; color: #c7d2fe; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 20px; }
|
||
.topbar .nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||
.topbar .nav a { color: #e0e7ff; font-size: 13px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; background: rgba(255,255,255,.1); transition: background .15s; }
|
||
.topbar .nav a:hover { background: rgba(255,255,255,.22); text-decoration: none; }
|
||
.topbar .nav a.active { background: #fff; color: #312e81; font-weight: 700; }
|
||
.wrap { max-width: 1080px; margin: 22px auto 60px; padding: 0 16px; }
|
||
.card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
||
.card h2 { font-size: 16px; color: #312e81; margin-bottom: 10px; }
|
||
.muted { color: #6b7280; line-height: 1.7; }
|
||
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
||
.cat-chip { font-size: 12px; padding: 4px 10px; border-radius: 20px; background: #eef2ff; color: #4f46e5; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- ===== 顶部工具栏 ===== -->
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<img class="icon" src="logo/logo-mark.svg" alt="画个标" width="20" height="20">
|
||
<span class="name">画个标</span>
|
||
<span class="tag">海报技能中心</span>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="index.html" title="LOGO 设计工作台">🎨 LOGO</a>
|
||
<a href="avatar.html" title="头像设计工作台">🖼 头像</a>
|
||
<a href="poster.html" title="海报设计工作台">📰 海报</a>
|
||
<a href="skills.html" title="共享技能中心">🧩 技能中心</a>
|
||
<a class="active" href="poster-skills.html" title="海报技能中心">🧩 海报技能</a>
|
||
<a href="sources.html" title="图标素材中心">📚 素材中心</a>
|
||
<a href="poster-sources.html" title="海报素材中心">📚 海报素材</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
<div class="card">
|
||
<h2>🧩 海报技能库</h2>
|
||
<p class="muted">集中管理海报专属设计技能（学习来源、详细说明、调用参数），分 8 类：版式构图 / 配色 / 字体排版 / 网格系统 / 视觉层级 / 印刷输出 / 创意手法 / 智能工作流。</p>
|
||
<div class="cats">
|
||
<span class="cat-chip">layout 版式构图</span>
|
||
<span class="cat-chip">color 配色</span>
|
||
<span class="cat-chip">typography 字体排版</span>
|
||
<span class="cat-chip">grid 网格系统</span>
|
||
<span class="cat-chip">hierarchy 视觉层级</span>
|
||
<span class="cat-chip">print 印刷输出</span>
|
||
<span class="cat-chip">creative 创意手法</span>
|
||
<span class="cat-chip">ai 智能工作流</span>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<h2>技能清单</h2>
|
||
<div id="skill-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/poster-skills/core.js?v=20260823d"></script>
|
||
<script src="js/poster-skills/skills.js?v=20260823d"></script>
|
||
<script>
|
||
const CAT_CN = { layout: '版式构图', color: '配色', typography: '字体排版', grid: '网格系统', hierarchy: '视觉层级', print: '印刷输出', creative: '创意手法', ai: '智能工作流' };
|
||
const list = document.getElementById('skill-list');
|
||
const skills = HGB_PosterSkills.all();
|
||
if (!skills.length) {
|
||
list.innerHTML = '<p class="muted">暂无海报技能。</p>';
|
||
} else {
|
||
const groups = {};
|
||
for (const s of skills) (groups[s.category] = groups[s.category] || []).push(s);
|
||
list.innerHTML = Object.keys(groups).map(cat => `
|
||
<div style="margin:14px 0;">
|
||
<h3 style="font-size:14px;color:#4f46e5;margin-bottom:8px;">${CAT_CN[cat] || cat}（${groups[cat].length}）</h3>
|
||
${groups[cat].map(s => `
|
||
<div style="padding:10px 12px;border-left:3px solid #e0e7ff;background:#f8fafc;border-radius:6px;margin-bottom:8px;">
|
||
<div style="font-weight:700;">${s.emoji} ${s.name} <span style="color:#6b7280;font-weight:400;">· ${s.scene}</span></div>
|
||
<div style="color:#6b7280;font-size:13px;margin-top:4px;">${s.summary}</div>
|
||
<div style="color:#9ca3af;font-size:12px;margin-top:4px;">来源：${s.source}</div>
|
||
</div>`).join('')}
|
||
</div>`).join('');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|