skill-forge-hub 1.0.7 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.en.md +19 -0
- package/CHANGELOG.md +19 -0
- package/README.en.md +20 -7
- package/README.md +20 -7
- package/SKILLS_CATALOG.md +119 -0
- package/annual-report/SKILL.md +13 -3
- package/annual-report/resources/disk-and-html.md +1 -0
- package/annual-report/resources/reference.html +3 -3
- package/annual-report/resources/skillforge-guide.html +409 -0
- package/annual-report/resources/skillforge-guide.txt +132 -0
- package/annual-report/user-config.md +1 -1
- package/article-to-html/SKILL.md +13 -1
- package/article-to-html/resources/skillforge-guide.html +409 -0
- package/article-to-html/resources/skillforge-guide.txt +132 -0
- package/article-to-html/user-config.md +1 -1
- package/cli.js +60 -19
- package/commit-heatmap/SKILL.md +70 -0
- package/commit-heatmap/resources/collect.md +22 -0
- package/commit-heatmap/resources/generate.md +15 -0
- package/commit-heatmap/resources/html-rules.md +21 -0
- package/commit-heatmap/resources/reference.html +228 -0
- package/commit-heatmap/resources/skillforge-guide.html +409 -0
- package/commit-heatmap/resources/skillforge-guide.txt +132 -0
- package/commit-heatmap/resources/usage-guide.md +23 -0
- package/commit-heatmap/user-config.md +12 -0
- package/daily-report/SKILL.md +12 -2
- package/daily-report/resources/disk-and-html.md +1 -1
- package/daily-report/resources/reference.html +1 -1
- package/daily-report/resources/skillforge-guide.html +409 -0
- package/daily-report/resources/skillforge-guide.txt +132 -0
- package/daily-report/user-config.md +1 -1
- package/data-prepper/SKILL.md +54 -0
- package/data-prepper/resources/clean-rules.md +18 -0
- package/data-prepper/resources/overview.md +17 -0
- package/data-prepper/resources/read-data.md +13 -0
- package/data-prepper/resources/skillforge-guide.html +409 -0
- package/data-prepper/resources/skillforge-guide.txt +132 -0
- package/data-prepper/resources/usage-guide.md +24 -0
- package/data-prepper/user-config.md +11 -0
- package/decision-log/SKILL.md +53 -0
- package/decision-log/resources/index.md +21 -0
- package/decision-log/resources/record.md +19 -0
- package/decision-log/resources/skillforge-guide.html +409 -0
- package/decision-log/resources/skillforge-guide.txt +132 -0
- package/decision-log/resources/usage-guide.md +23 -0
- package/decision-log/user-config.md +9 -0
- package/deck-stage/SKILL.md +14 -11
- package/deck-stage/resources/cover-template.html +1 -1
- package/deck-stage/resources/skillforge-guide.html +409 -0
- package/deck-stage/resources/skillforge-guide.txt +132 -0
- package/docs/architecture.en.md +2 -1
- package/docs/architecture.md +2 -1
- package/docs/articles/ai-daily-report-correct-pose.md +39 -0
- package/docs/articles/ai-prompt-management-skill-pouch.md +37 -0
- package/docs/directory-submission.md +106 -0
- package/docs/install.en.md +57 -1
- package/docs/install.md +57 -1
- package/docs/usage-examples.en.md +50 -0
- package/docs/usage-examples.md +50 -0
- package/magic-deck/SKILL.md +15 -6
- package/magic-deck/resources/deck-spec.md +1 -1
- package/magic-deck/resources/reference.html +1 -1
- package/magic-deck/resources/skillforge-guide.html +409 -0
- package/magic-deck/resources/skillforge-guide.txt +132 -0
- package/magic-deck/user-config.md +1 -1
- package/meeting-minutes/SKILL.md +11 -1
- package/meeting-minutes/resources/disk-and-html.md +1 -0
- package/meeting-minutes/resources/reference.html +1 -1
- package/meeting-minutes/resources/skillforge-guide.html +409 -0
- package/meeting-minutes/resources/skillforge-guide.txt +132 -0
- package/meeting-minutes/user-config.md +1 -1
- package/meta-forge/SKILL.md +13 -3
- package/meta-forge/resources/forge-rules.md +4 -1
- package/meta-forge/resources/skillforge-guide.html +409 -0
- package/meta-forge/resources/skillforge-guide.txt +132 -0
- package/meta-forge/user-config.md +1 -1
- package/monthly-report/SKILL.md +11 -1
- package/monthly-report/resources/disk-and-html.md +1 -0
- package/monthly-report/resources/reference.html +1 -1
- package/monthly-report/resources/skillforge-guide.html +409 -0
- package/monthly-report/resources/skillforge-guide.txt +132 -0
- package/monthly-report/user-config.md +1 -1
- package/one-pager/SKILL.md +83 -0
- package/one-pager/resources/content.md +18 -0
- package/one-pager/resources/design-process.md +117 -0
- package/one-pager/resources/generate.md +28 -0
- package/one-pager/resources/html-rules.md +66 -0
- package/one-pager/resources/reference.html +1290 -0
- package/one-pager/resources/skillforge-guide.html +409 -0
- package/one-pager/resources/skillforge-guide.txt +132 -0
- package/one-pager/resources/usage-guide.md +37 -0
- package/one-pager/resources/user-template-example.html +63 -0
- package/one-pager/user-config.md +14 -0
- package/package.json +12 -2
- package/prompt-pouch/SKILL.md +16 -16
- package/prompt-pouch/resources/reference.html +181 -43
- package/prompt-pouch/resources/skillforge-guide.html +409 -0
- package/prompt-pouch/resources/skillforge-guide.txt +132 -0
- package/prompt-pouch/resources/usage-guide.md +3 -3
- package/quarterly-report/SKILL.md +11 -1
- package/quarterly-report/resources/disk-and-html.md +1 -0
- package/quarterly-report/resources/reference.html +1 -1
- package/quarterly-report/resources/skillforge-guide.html +409 -0
- package/quarterly-report/resources/skillforge-guide.txt +132 -0
- package/quarterly-report/user-config.md +1 -1
- package/release-notes/SKILL.md +54 -0
- package/release-notes/resources/collect.md +17 -0
- package/release-notes/resources/publish-checklist.md +11 -0
- package/release-notes/resources/skillforge-guide.html +409 -0
- package/release-notes/resources/skillforge-guide.txt +132 -0
- package/release-notes/resources/usage-guide.md +25 -0
- package/release-notes/resources/write.md +27 -0
- package/release-notes/user-config.md +15 -0
- package/skill-doctor/SKILL.md +53 -0
- package/skill-doctor/resources/checks.md +27 -0
- package/skill-doctor/resources/report.md +26 -0
- package/skill-doctor/resources/skillforge-guide.html +409 -0
- package/skill-doctor/resources/skillforge-guide.txt +132 -0
- package/skill-doctor/resources/usage-guide.md +22 -0
- package/skill-doctor/user-config.md +9 -0
- package/spec-doc2spec/SKILL.md +13 -9
- package/spec-doc2spec/resources/skillforge-guide.html +409 -0
- package/spec-doc2spec/resources/skillforge-guide.txt +132 -0
- package/spec-doc2spec/user-config.md +1 -1
- package/spec-spec2doc/SKILL.md +13 -12
- package/spec-spec2doc/resources/skillforge-guide.html +409 -0
- package/spec-spec2doc/resources/skillforge-guide.txt +132 -0
- package/spec-spec2doc/user-config.md +1 -1
- package/team-report-collector/SKILL.md +70 -0
- package/team-report-collector/resources/collect.md +23 -0
- package/team-report-collector/resources/generate.md +14 -0
- package/team-report-collector/resources/html-rules.md +22 -0
- package/team-report-collector/resources/reference.html +384 -0
- package/team-report-collector/resources/skillforge-guide.html +409 -0
- package/team-report-collector/resources/skillforge-guide.txt +132 -0
- package/team-report-collector/resources/usage-guide.md +25 -0
- package/team-report-collector/user-config.md +12 -0
- package/template/SKILL.md +2 -2
- package/template/user-config.md +1 -1
- package/twin-docs/SKILL.md +53 -0
- package/twin-docs/resources/glossary.md +12 -0
- package/twin-docs/resources/skillforge-guide.html +409 -0
- package/twin-docs/resources/skillforge-guide.txt +132 -0
- package/twin-docs/resources/sync-check.md +15 -0
- package/twin-docs/resources/translate.md +20 -0
- package/twin-docs/resources/usage-guide.md +24 -0
- package/twin-docs/user-config.md +11 -0
- package/weekly-report/SKILL.md +12 -2
- package/weekly-report/resources/disk-and-html.md +1 -1
- package/weekly-report/resources/reference.html +1 -1
- package/weekly-report/resources/skillforge-guide.html +409 -0
- package/weekly-report/resources/skillforge-guide.txt +132 -0
- package/weekly-report/user-config.md +1 -1
|
@@ -0,0 +1,1290 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN" data-theme="tech" data-template="classic">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="sf-template" content="one-pager@10">
|
|
7
|
+
<meta name="poster-id" content="REF-POSTER-0000">
|
|
8
|
+
<title>AI 改变工作 · 一页纸海报</title>
|
|
9
|
+
<style>
|
|
10
|
+
/* ═══ 二十一主题令牌：13 核心契约（跨技能同源，html[data-theme] 运行时切换，THEME 生成时定默认） ═══ */
|
|
11
|
+
:root, [data-theme="tech"]{
|
|
12
|
+
--bg:#0a1929; --bg2:#071525; --panel:rgba(11,30,55,.9); --panel-solid:#0b1e37;
|
|
13
|
+
--text:#bae6fd; --muted:#5b7fa5; --accent:#0ea5e9; --accent2:#14b8a6;
|
|
14
|
+
--border:rgba(14,165,233,.18); --glow:rgba(14,165,233,.35); --glow-soft:rgba(14,165,233,.15);
|
|
15
|
+
--title-grad:linear-gradient(90deg,#7dd3fc,#0ea5e9 45%,#818cf8);
|
|
16
|
+
--tag-bg:rgba(14,165,233,.12);
|
|
17
|
+
}
|
|
18
|
+
[data-theme="biz"]{
|
|
19
|
+
--bg:#e8ecf5; --bg2:#dde3ef; --panel:rgba(255,255,255,.97); --panel-solid:#ffffff;
|
|
20
|
+
--text:#1e293b; --muted:#64748b; --accent:#2563eb; --accent2:#0891b2;
|
|
21
|
+
--border:rgba(37,99,235,.14); --glow:rgba(37,99,235,.18); --glow-soft:rgba(37,99,235,.12);
|
|
22
|
+
--title-grad:linear-gradient(90deg,#1e40af,#2563eb 55%,#0891b2);
|
|
23
|
+
--tag-bg:rgba(37,99,235,.08);
|
|
24
|
+
}
|
|
25
|
+
[data-theme="mono"]{ /* IDEA 黑亮：JetBrains New UI Dark 官方 */
|
|
26
|
+
--bg:#1e1f22; --bg2:#2b2d30; --panel:rgba(43,45,48,.95); --panel-solid:#2b2d30;
|
|
27
|
+
--text:#dfe1e5; --muted:#9aa0a6; --accent:#3574f0; --accent2:#5e9aff;
|
|
28
|
+
--border:rgba(53,116,240,.26); --glow:rgba(53,116,240,.3); --glow-soft:rgba(53,116,240,.13);
|
|
29
|
+
--title-grad:linear-gradient(90deg,#dfe1e5,#5e9aff 50%,#3574f0);
|
|
30
|
+
--tag-bg:rgba(53,116,240,.13);
|
|
31
|
+
}
|
|
32
|
+
[data-theme="light"]{ /* IDEA 白亮：IntelliJ Light 官方 */
|
|
33
|
+
--bg:#ffffff; --bg2:#f2f2f2; --panel:rgba(255,255,255,.98); --panel-solid:#ffffff;
|
|
34
|
+
--text:#1e1f22; --muted:#6e7781; --accent:#2675bf; --accent2:#4a9be0;
|
|
35
|
+
--border:rgba(38,117,191,.18); --glow:rgba(38,117,191,.2); --glow-soft:rgba(38,117,191,.1);
|
|
36
|
+
--title-grad:linear-gradient(90deg,#1e5f9f,#2675bf 55%,#4a9be0);
|
|
37
|
+
--tag-bg:rgba(38,117,191,.08);
|
|
38
|
+
}
|
|
39
|
+
[data-theme="warm"]{
|
|
40
|
+
--bg:#f7ebd9; --bg2:#efe0c8; --panel:rgba(255,250,243,.97); --panel-solid:#fffaf3;
|
|
41
|
+
--text:#43301f; --muted:#8a7565; --accent:#d97706; --accent2:#ea580c;
|
|
42
|
+
--border:rgba(217,119,6,.18); --glow:rgba(217,119,6,.22); --glow-soft:rgba(217,119,6,.14);
|
|
43
|
+
--title-grad:linear-gradient(90deg,#b45309,#d97706 50%,#ea580c);
|
|
44
|
+
--tag-bg:rgba(217,119,6,.08);
|
|
45
|
+
}
|
|
46
|
+
[data-theme="ink"]{ /* 水墨国风：宣纸米白 + 墨黑 + 朱砂红 */
|
|
47
|
+
--bg:#f5f1e8; --bg2:#ece6d6; --panel:rgba(255,253,247,.97); --panel-solid:#fffdf7;
|
|
48
|
+
--text:#2b2620; --muted:#8a8073; --accent:#b03a2e; --accent2:#8c2f25;
|
|
49
|
+
--border:rgba(43,38,32,.16); --glow:rgba(176,58,46,.22); --glow-soft:rgba(176,58,46,.12);
|
|
50
|
+
--title-grad:linear-gradient(90deg,#2b2620,#4a4238 55%,#b03a2e);
|
|
51
|
+
--tag-bg:rgba(176,58,46,.08);
|
|
52
|
+
}
|
|
53
|
+
[data-theme="jade"]{ /* 翡翠绿：深绿基底，环保/健康/金融 */
|
|
54
|
+
--bg:#0c1f1a; --bg2:#081713; --panel:rgba(13,38,31,.9); --panel-solid:#0d261f;
|
|
55
|
+
--text:#d1f0e2; --muted:#5f8f7e; --accent:#2dd4a7; --accent2:#34d399;
|
|
56
|
+
--border:rgba(45,212,167,.18); --glow:rgba(45,212,167,.32); --glow-soft:rgba(45,212,167,.14);
|
|
57
|
+
--title-grad:linear-gradient(90deg,#a7f3d0,#2dd4a7 45%,#fbbf24);
|
|
58
|
+
--tag-bg:rgba(45,212,167,.12);
|
|
59
|
+
}
|
|
60
|
+
[data-theme="rose"]{ /* 玫瑰金：粉调浪漫，女性向/生活方式 */
|
|
61
|
+
--bg:#2a1520; --bg2:#1f0f18; --panel:rgba(48,24,38,.9); --panel-solid:#301826;
|
|
62
|
+
--text:#fbd8e4; --muted:#a56b80; --accent:#f472b6; --accent2:#fb7185;
|
|
63
|
+
--border:rgba(244,114,182,.2); --glow:rgba(244,114,182,.34); --glow-soft:rgba(244,114,182,.15);
|
|
64
|
+
--title-grad:linear-gradient(90deg,#fbcfe8,#f472b6 45%,#fbbf24);
|
|
65
|
+
--tag-bg:rgba(244,114,182,.13);
|
|
66
|
+
}
|
|
67
|
+
[data-theme="midnight"]{ /* 午夜金：黑金质感，高端发布/奢华 */
|
|
68
|
+
--bg:#12100c; --bg2:#0d0b08; --panel:rgba(28,24,18,.95); --panel-solid:#1c1812;
|
|
69
|
+
--text:#f3e8d0; --muted:#8d8168; --accent:#e3b341; --accent2:#f59e0b;
|
|
70
|
+
--border:rgba(227,179,65,.22); --glow:rgba(227,179,65,.32); --glow-soft:rgba(227,179,65,.14);
|
|
71
|
+
--title-grad:linear-gradient(90deg,#fdf3d8,#e3b341 50%,#b7791f);
|
|
72
|
+
--tag-bg:rgba(227,179,65,.12);
|
|
73
|
+
}
|
|
74
|
+
[data-theme="violet"]{ /* 霓虹紫：赛博潮流，电竞/创意 */
|
|
75
|
+
--bg:#140b26; --bg2:#0e081c; --panel:rgba(28,16,52,.9); --panel-solid:#1c1034;
|
|
76
|
+
--text:#e4dcfb; --muted:#8b7bb8; --accent:#a78bfa; --accent2:#e879f9;
|
|
77
|
+
--border:rgba(167,139,250,.22); --glow:rgba(167,139,250,.38); --glow-soft:rgba(167,139,250,.16);
|
|
78
|
+
--title-grad:linear-gradient(90deg,#c4b5fd,#a78bfa 45%,#f0abfc);
|
|
79
|
+
--tag-bg:rgba(167,139,250,.14);
|
|
80
|
+
}
|
|
81
|
+
[data-theme="swiss"]{ /* 瑞士国际主义：红白黑，Helvetica 时代海报 */
|
|
82
|
+
--bg:#f4f4f2; --bg2:#e7e7e2; --panel:rgba(255,255,255,.97); --panel-solid:#ffffff;
|
|
83
|
+
--text:#1a1a1a; --muted:#6b6b6b; --accent:#e63946; --accent2:#1a1a1a;
|
|
84
|
+
--border:rgba(26,26,26,.16); --glow:rgba(230,57,70,.18); --glow-soft:rgba(230,57,70,.1);
|
|
85
|
+
--title-grad:linear-gradient(90deg,#1a1a1a,#e63946 55%,#1a1a1a);
|
|
86
|
+
--tag-bg:rgba(230,57,70,.1);
|
|
87
|
+
}
|
|
88
|
+
[data-theme="bauhaus"]{ /* 包豪斯：米白底 + 三原色，几何构成 */
|
|
89
|
+
--bg:#f5f0e6; --bg2:#eae2d2; --panel:rgba(255,253,248,.97); --panel-solid:#fffdf8;
|
|
90
|
+
--text:#1c1a17; --muted:#6e675c; --accent:#e63946; --accent2:#1f5eff;
|
|
91
|
+
--border:rgba(28,26,23,.16); --glow:rgba(230,57,70,.2); --glow-soft:rgba(230,57,70,.12);
|
|
92
|
+
--title-grad:linear-gradient(90deg,#e63946,#1c1a17 45%,#1f5eff);
|
|
93
|
+
--tag-bg:rgba(244,194,13,.28);
|
|
94
|
+
}
|
|
95
|
+
[data-theme="memphis"]{ /* 孟菲斯：奶油粉底 + 粉青撞色，几何波点 */
|
|
96
|
+
--bg:#fff5f6; --bg2:#fde9ec; --panel:rgba(255,255,255,.97); --panel-solid:#ffffff;
|
|
97
|
+
--text:#3a2b2e; --muted:#8d777c; --accent:#ff7bac; --accent2:#35d0ba;
|
|
98
|
+
--border:rgba(58,43,46,.16); --glow:rgba(255,123,172,.22); --glow-soft:rgba(255,123,172,.12);
|
|
99
|
+
--title-grad:linear-gradient(90deg,#ff7bac,#35d0ba 60%,#ff7bac);
|
|
100
|
+
--tag-bg:rgba(255,123,172,.12);
|
|
101
|
+
}
|
|
102
|
+
[data-theme="morandi"]{ /* 莫兰迪：高级灰调，静谧雅致 */
|
|
103
|
+
--bg:#e8e4de; --bg2:#ddd8d0; --panel:rgba(244,241,236,.97); --panel-solid:#f4f1ec;
|
|
104
|
+
--text:#4a463f; --muted:#8b857b; --accent:#c9a9a6; --accent2:#a3b18a;
|
|
105
|
+
--border:rgba(74,70,63,.16); --glow:rgba(201,169,166,.2); --glow-soft:rgba(201,169,166,.12);
|
|
106
|
+
--title-grad:linear-gradient(90deg,#4a463f,#c9a9a6 55%,#a3b18a);
|
|
107
|
+
--tag-bg:rgba(163,177,138,.18);
|
|
108
|
+
}
|
|
109
|
+
[data-theme="nordic"]{ /* 北欧：暖白 + 原木 + 苔绿，克制冷感 */
|
|
110
|
+
--bg:#f7f5f1; --bg2:#ebe7df; --panel:rgba(255,255,255,.97); --panel-solid:#ffffff;
|
|
111
|
+
--text:#2f2e2c; --muted:#8a8478; --accent:#b08d57; --accent2:#6b7f5e;
|
|
112
|
+
--border:rgba(47,46,44,.14); --glow:rgba(176,141,87,.2); --glow-soft:rgba(176,141,87,.1);
|
|
113
|
+
--title-grad:linear-gradient(90deg,#2f2e2c,#b08d57 55%,#6b7f5e);
|
|
114
|
+
--tag-bg:rgba(107,127,94,.14);
|
|
115
|
+
}
|
|
116
|
+
[data-theme="artdeco"]{ /* 装饰艺术：黑金酒红，浮华年代 */
|
|
117
|
+
--bg:#0e0d0b; --bg2:#171512; --panel:rgba(30,27,22,.95); --panel-solid:#1e1b16;
|
|
118
|
+
--text:#e8d9b0; --muted:#8d8168; --accent:#d4af37; --accent2:#722f37;
|
|
119
|
+
--border:rgba(212,175,55,.24); --glow:rgba(212,175,55,.32); --glow-soft:rgba(212,175,55,.14);
|
|
120
|
+
--title-grad:linear-gradient(90deg,#f7e7c3,#d4af37 50%,#b08a2e);
|
|
121
|
+
--tag-bg:rgba(212,175,55,.12);
|
|
122
|
+
}
|
|
123
|
+
[data-theme="noir"]{ /* 黑白电影：纯黑白灰，胶片质感 */
|
|
124
|
+
--bg:#101010; --bg2:#1b1b1b; --panel:rgba(28,28,28,.96); --panel-solid:#1c1c1c;
|
|
125
|
+
--text:#f2f2f2; --muted:#8f8f8f; --accent:#ffffff; --accent2:#b3b3b3;
|
|
126
|
+
--border:rgba(242,242,242,.2); --glow:rgba(255,255,255,.2); --glow-soft:rgba(255,255,255,.1);
|
|
127
|
+
--title-grad:linear-gradient(90deg,#ffffff,#b3b3b3 60%,#ffffff);
|
|
128
|
+
--tag-bg:rgba(255,255,255,.12);
|
|
129
|
+
}
|
|
130
|
+
[data-theme="classicblue"]{ /* 经典蓝：Pantone 2020 年度色 */
|
|
131
|
+
--bg:#0a2f52; --bg2:#07203a; --panel:rgba(15,76,129,.92); --panel-solid:#0f4c81;
|
|
132
|
+
--text:#e3f0fa; --muted:#7fa8cc; --accent:#7fb3d5; --accent2:#f4c20d;
|
|
133
|
+
--border:rgba(127,179,213,.22); --glow:rgba(127,179,213,.3); --glow-soft:rgba(127,179,213,.13);
|
|
134
|
+
--title-grad:linear-gradient(90deg,#e3f0fa,#7fb3d5 50%,#f4c20d);
|
|
135
|
+
--tag-bg:rgba(127,179,213,.14);
|
|
136
|
+
}
|
|
137
|
+
[data-theme="pop"]{ /* 波普：明黄底高饱和撞色，安迪·沃霍尔 */
|
|
138
|
+
--bg:#f7d32b; --bg2:#eecb1e; --panel:rgba(255,255,255,.95); --panel-solid:#ffffff;
|
|
139
|
+
--text:#1a1a1a; --muted:#5a5430; --accent:#e63946; --accent2:#1d4ed8;
|
|
140
|
+
--border:rgba(26,26,26,.22); --glow:rgba(230,57,70,.22); --glow-soft:rgba(230,57,70,.12);
|
|
141
|
+
--title-grad:linear-gradient(90deg,#1d4ed8,#e63946 55%,#1a1a1a);
|
|
142
|
+
--tag-bg:rgba(29,78,216,.1);
|
|
143
|
+
}
|
|
144
|
+
[data-theme="retro"]{ /* 复古胶片：米黄暖褐，胶片年代 */
|
|
145
|
+
--bg:#f3e5cf; --bg2:#e9d6b8; --panel:rgba(255,250,242,.97); --panel-solid:#fffaf2;
|
|
146
|
+
--text:#5a4632; --muted:#96866e; --accent:#a63d2f; --accent2:#6b705c;
|
|
147
|
+
--border:rgba(90,70,50,.2); --glow:rgba(166,61,47,.22); --glow-soft:rgba(166,61,47,.12);
|
|
148
|
+
--title-grad:linear-gradient(90deg,#5a4632,#a63d2f 55%,#6b705c);
|
|
149
|
+
--tag-bg:rgba(166,61,47,.1);
|
|
150
|
+
}
|
|
151
|
+
[data-theme="coral"]{ /* 珊瑚橙：Pantone 2019 年度色 */
|
|
152
|
+
--bg:#fff1ec; --bg2:#fde3da; --panel:rgba(255,255,255,.97); --panel-solid:#ffffff;
|
|
153
|
+
--text:#463530; --muted:#97827a; --accent:#ff6f61; --accent2:#ff8e72;
|
|
154
|
+
--border:rgba(70,53,48,.16); --glow:rgba(255,111,97,.24); --glow-soft:rgba(255,111,97,.13);
|
|
155
|
+
--title-grad:linear-gradient(90deg,#ff6f61,#ff8e72 55%,#ff6f61);
|
|
156
|
+
--tag-bg:rgba(255,111,97,.12);
|
|
157
|
+
}
|
|
158
|
+
[data-theme="acid"]{ /* 酸性荧光：Y2K 酸性设计，荧光绿×电紫 */
|
|
159
|
+
--bg:#0c0c08; --bg2:#14140c; --panel:rgba(20,20,12,.92); --panel-solid:#131309;
|
|
160
|
+
--text:#f2f5e9; --muted:#8f9384; --accent:#c6ff00; --accent2:#b026ff;
|
|
161
|
+
--border:rgba(198,255,0,.28); --glow:rgba(198,255,0,.38); --glow-soft:rgba(198,255,0,.15);
|
|
162
|
+
--title-grad:linear-gradient(90deg,#c6ff00,#b026ff 60%,#c6ff00);
|
|
163
|
+
--tag-bg:rgba(198,255,0,.12);
|
|
164
|
+
}
|
|
165
|
+
[data-theme="cyber"]{ /* 赛博霓虹：赛博朋克夜城，品红×电青 */
|
|
166
|
+
--bg:#060a1f; --bg2:#0b1233; --panel:rgba(10,16,44,.92); --panel-solid:#0a102c;
|
|
167
|
+
--text:#e8f0ff; --muted:#7c8bb0; --accent:#ff2d95; --accent2:#00e5ff;
|
|
168
|
+
--border:rgba(0,229,255,.3); --glow:rgba(255,45,149,.35); --glow-soft:rgba(0,229,255,.15);
|
|
169
|
+
--title-grad:linear-gradient(90deg,#ff2d95,#00e5ff 55%,#ff2d95);
|
|
170
|
+
--tag-bg:rgba(0,229,255,.12);
|
|
171
|
+
}
|
|
172
|
+
[data-theme="cream"]{ /* 奶油纸：奶油纸张印刷质感，墨棕×朱红 */
|
|
173
|
+
--bg:#f7f0df; --bg2:#efe4cb; --panel:rgba(255,252,244,.97); --panel-solid:#fdfaf1;
|
|
174
|
+
--text:#3a3226; --muted:#8c8070; --accent:#c8432e; --accent2:#8a5a2b;
|
|
175
|
+
--border:rgba(58,50,38,.2); --glow:rgba(200,67,46,.22); --glow-soft:rgba(200,67,46,.1);
|
|
176
|
+
--title-grad:linear-gradient(90deg,#c8432e,#8a5a2b 60%,#c8432e);
|
|
177
|
+
--tag-bg:rgba(200,67,46,.1);
|
|
178
|
+
}
|
|
179
|
+
[data-theme="academic"]{ /* 学术蓝：学术会议海报经典深蓝 */
|
|
180
|
+
--bg:#f6f8fb; --bg2:#e8edf5; --panel:rgba(255,255,255,.97); --panel-solid:#ffffff;
|
|
181
|
+
--text:#1c2733; --muted:#5c6b7f; --accent:#1a3c6e; --accent2:#3e6fa3;
|
|
182
|
+
--border:rgba(28,60,110,.18); --glow:rgba(26,60,110,.2); --glow-soft:rgba(26,60,110,.1);
|
|
183
|
+
--title-grad:linear-gradient(90deg,#1a3c6e,#3e6fa3 60%,#1a3c6e);
|
|
184
|
+
--tag-bg:rgba(26,60,110,.1);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
*{margin:0;padding:0;box-sizing:border-box}
|
|
188
|
+
html,body{height:100%;background:var(--bg)}
|
|
189
|
+
body{background:linear-gradient(180deg,var(--bg) 12%,var(--bg2) 135%);color:var(--text);font-family:system-ui,'Segoe UI',Roboto,sans-serif;overflow:hidden;position:relative}
|
|
190
|
+
|
|
191
|
+
/* ═══ 舞台与八套模板（html[data-template] 决定渲染哪套；模板管布局、主题管配色，80 种组合） ═══ */
|
|
192
|
+
.stage{height:100svh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;overflow:hidden}
|
|
193
|
+
.serif{font-family:Georgia,'Songti SC','SimSun',serif}
|
|
194
|
+
.mono{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
|
|
195
|
+
|
|
196
|
+
/* 1. classic 经典舞台：徽章 + 渐变巨字 + 分隔线 + 金句 + 三列要点卡 */
|
|
197
|
+
.tpl-classic{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:min(60%,1200px);height:100%;padding:6vh 0}
|
|
198
|
+
.tpl-classic .badge{font-size:12px;letter-spacing:3px;color:var(--accent);margin-bottom:22px}
|
|
199
|
+
.tpl-classic h1{font-size:clamp(40px,5vw,64px);line-height:1.2;font-weight:800;letter-spacing:2px;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px;text-shadow:0 0 40px var(--glow)}
|
|
200
|
+
.tpl-classic .divider{width:64px;height:2px;background:var(--title-grad);border-radius:2px;margin:0 auto 26px}
|
|
201
|
+
.tpl-classic .quote{font-size:22px;font-style:italic;color:var(--text);line-height:1.8;margin-bottom:40px}
|
|
202
|
+
.tpl-classic .quote::before{content:"「";color:var(--accent)}
|
|
203
|
+
.tpl-classic .quote::after{content:"」";color:var(--accent)}
|
|
204
|
+
.tpl-classic ul.points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px;text-align:left;width:100%}
|
|
205
|
+
.tpl-classic ul.points li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.7;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:18px 16px}
|
|
206
|
+
.tpl-classic .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--glow);flex:none;margin-top:8px}
|
|
207
|
+
|
|
208
|
+
/* 2. minimal 极简留白：瑞士平面，左上小标 + 衬线巨字 + 细线 + 编号竖排要点 */
|
|
209
|
+
.tpl-minimal{display:flex;flex-direction:column;justify-content:center;text-align:left;width:min(74%,1200px);height:100%;padding:6vh 0}
|
|
210
|
+
.tpl-minimal .badge{font-size:11px;letter-spacing:4px;color:var(--muted);margin-bottom:30px;display:flex;align-items:center;gap:14px}
|
|
211
|
+
.tpl-minimal .badge::before{content:'';width:28px;height:1px;background:var(--accent)}
|
|
212
|
+
.tpl-minimal h1{font-family:Georgia,'Songti SC','SimSun',serif;font-weight:700;font-size:clamp(42px,5.4vw,70px);line-height:1.28;color:var(--text);margin-bottom:36px}
|
|
213
|
+
.tpl-minimal .rule{width:100%;height:1px;background:var(--border);margin-bottom:30px}
|
|
214
|
+
.tpl-minimal .quote{font-size:18px;font-style:italic;color:var(--muted);line-height:1.8;margin-bottom:40px}
|
|
215
|
+
.tpl-minimal ol.points{list-style:none;display:flex;flex-direction:column;gap:20px;margin-bottom:50px}
|
|
216
|
+
.tpl-minimal ol.points li{display:flex;align-items:baseline;gap:24px;font-size:17px;line-height:1.6;color:var(--text)}
|
|
217
|
+
.tpl-minimal .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--accent);letter-spacing:1px;flex:none}
|
|
218
|
+
.tpl-minimal .meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
219
|
+
|
|
220
|
+
/* 3. magazine 杂志社论：刊头通栏线 + 左文右栏 + 首字下沉金句 */
|
|
221
|
+
.tpl-magazine{display:flex;flex-direction:column;justify-content:center;width:min(78%,1200px);height:100%;padding:6vh 0}
|
|
222
|
+
.tpl-magazine .masthead{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:3px;color:var(--muted);padding-bottom:14px;border-bottom:2px solid var(--text);margin-bottom:36px}
|
|
223
|
+
.tpl-magazine .masthead::after{content:'';flex:1;height:1px;background:var(--border)}
|
|
224
|
+
.tpl-magazine .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
|
|
225
|
+
.tpl-magazine h1{font-family:Georgia,'Songti SC','SimSun',serif;font-weight:700;font-size:clamp(36px,4.4vw,54px);line-height:1.32;color:var(--text);margin-bottom:24px}
|
|
226
|
+
.tpl-magazine .quote{font-size:17px;line-height:1.95;color:var(--muted);font-style:italic}
|
|
227
|
+
.tpl-magazine .quote::first-letter{font-size:46px;float:left;line-height:.85;margin:4px 10px 0 0;color:var(--accent);font-family:Georgia,serif;font-style:normal;font-weight:700}
|
|
228
|
+
.tpl-magazine ul.points{list-style:none;display:flex;flex-direction:column;gap:20px;border-left:1px solid var(--border);padding-left:26px}
|
|
229
|
+
.tpl-magazine ul.points li{display:flex;gap:14px;font-size:16px;line-height:1.65;color:var(--text)}
|
|
230
|
+
.tpl-magazine .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--accent);padding-top:3px;flex:none}
|
|
231
|
+
.tpl-magazine .footbar{margin-top:40px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
232
|
+
|
|
233
|
+
/* 4. hero 巨幕：电影海报式巨型关键词 + 底部要点横条 */
|
|
234
|
+
.tpl-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;padding:6vh 8vw;position:relative}
|
|
235
|
+
.tpl-hero .badge{font-size:12px;letter-spacing:4px;color:var(--accent);margin-bottom:28px}
|
|
236
|
+
.tpl-hero h1{font-size:clamp(56px,10vw,140px);font-weight:900;letter-spacing:6px;line-height:1.06;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:28px;text-shadow:0 0 60px var(--glow)}
|
|
237
|
+
.tpl-hero .quote{font-size:20px;letter-spacing:2px;color:var(--text);opacity:.92;margin-bottom:8vh}
|
|
238
|
+
.tpl-hero ul.points{list-style:none;display:flex;gap:16px;width:min(84%,1100px)}
|
|
239
|
+
.tpl-hero ul.points li{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:16px 14px;font-size:15px;line-height:1.6;display:flex;flex-direction:column;gap:8px;text-align:left}
|
|
240
|
+
.tpl-hero .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--accent);letter-spacing:1px}
|
|
241
|
+
.tpl-hero footer{position:absolute;bottom:4.5vh;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
242
|
+
|
|
243
|
+
/* 5. timeline 时间叙事：中央竖线 + 节点圆点 + 要点左右交替卡片 */
|
|
244
|
+
.tpl-timeline{display:flex;flex-direction:column;justify-content:center;width:min(76%,1100px);height:100%;padding:6vh 0}
|
|
245
|
+
.tpl-timeline .head{text-align:center;margin-bottom:8vh}
|
|
246
|
+
.tpl-timeline h1{font-size:clamp(34px,4.2vw,50px);font-weight:800;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px}
|
|
247
|
+
.tpl-timeline .quote{font-size:16px;font-style:italic;color:var(--muted)}
|
|
248
|
+
.tpl-timeline .track{position:relative;width:100%}
|
|
249
|
+
.tpl-timeline .track::before{content:'';position:absolute;left:50%;top:2%;bottom:2%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:.5}
|
|
250
|
+
.tpl-timeline .row{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;margin-bottom:24px;position:relative}
|
|
251
|
+
.tpl-timeline .mid{display:flex;justify-content:center;grid-column:2;grid-row:1;z-index:1}
|
|
252
|
+
.tpl-timeline .dot{width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 0 16px var(--glow)}
|
|
253
|
+
.tpl-timeline .card{grid-column:1;grid-row:1;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px 20px;font-size:15px;line-height:1.65;text-align:right}
|
|
254
|
+
.tpl-timeline .row:nth-child(odd) .card{grid-column:3;text-align:left}
|
|
255
|
+
.tpl-timeline .card .num{display:block;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--accent);letter-spacing:1px;margin-bottom:4px}
|
|
256
|
+
.tpl-timeline footer{text-align:center;margin-top:5vh;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
257
|
+
|
|
258
|
+
/* 6. grid 卡片栅格：标题区 + 2×2 大圆角卡片（编号描边角标 + 渐变顶条） */
|
|
259
|
+
.tpl-grid{display:flex;flex-direction:column;justify-content:center;width:min(80%,1200px);height:100%;padding:6vh 0}
|
|
260
|
+
.tpl-grid .head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:5vh}
|
|
261
|
+
.tpl-grid h1{font-size:clamp(38px,4.6vw,56px);font-weight:800;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
|
|
262
|
+
.tpl-grid .quote{font-size:15px;font-style:italic;color:var(--muted);text-align:right;max-width:42%;line-height:1.7}
|
|
263
|
+
.tpl-grid .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
|
|
264
|
+
.tpl-grid .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px 26px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:150px}
|
|
265
|
+
.tpl-grid .card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.85}
|
|
266
|
+
.tpl-grid .card.wide{grid-column:1/-1;min-height:110px}
|
|
267
|
+
.tpl-grid .card .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;font-weight:700;color:transparent;-webkit-text-stroke:1px var(--accent);line-height:1}
|
|
268
|
+
.tpl-grid .card .t{font-size:16px;line-height:1.65;color:var(--text)}
|
|
269
|
+
.tpl-grid footer{margin-top:4vh;text-align:center;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
270
|
+
|
|
271
|
+
/* 7. dashboard 数据仪表：KPI 环形图 + 要点进度条 + 右栏标题金句 */
|
|
272
|
+
.tpl-dash{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center;width:min(82%,1200px);height:100%;padding:6vh 0}
|
|
273
|
+
.tpl-dash .kpi{display:flex;flex-direction:column;align-items:center;gap:30px}
|
|
274
|
+
.tpl-dash .ring{width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--accent) 0 82%,var(--panel-solid) 82% 100%);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 44px var(--glow-soft)}
|
|
275
|
+
.tpl-dash .ring::after{content:'';position:absolute;inset:15px;border-radius:50%;background:var(--bg)}
|
|
276
|
+
.tpl-dash .val{position:relative;z-index:1;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:44px;font-weight:700;color:var(--text)}
|
|
277
|
+
.tpl-dash .lab{position:absolute;bottom:44px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;color:var(--muted);z-index:1}
|
|
278
|
+
.tpl-dash .bars{display:flex;flex-direction:column;gap:20px;width:100%}
|
|
279
|
+
.tpl-dash .bar .row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--text)}
|
|
280
|
+
.tpl-dash .bar .row .pct{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent)}
|
|
281
|
+
.tpl-dash .bar .track{height:10px;background:var(--panel-solid);border:1px solid var(--border);border-radius:99px;overflow:hidden}
|
|
282
|
+
.tpl-dash .bar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
|
|
283
|
+
.tpl-dash .side h1{font-size:clamp(34px,4.2vw,50px);font-weight:800;line-height:1.3;margin-bottom:16px;color:var(--text)}
|
|
284
|
+
.tpl-dash .side .quote{font-size:17px;font-style:italic;color:var(--muted);line-height:1.8;margin-bottom:24px}
|
|
285
|
+
.tpl-dash .side .extra{list-style:none;display:flex;flex-direction:column;gap:12px}
|
|
286
|
+
.tpl-dash .side .extra li{display:flex;gap:12px;font-size:15px;color:var(--text);align-items:baseline}
|
|
287
|
+
.tpl-dash .side .extra .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--accent)}
|
|
288
|
+
.tpl-dash .side .foot{margin-top:28px;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
289
|
+
|
|
290
|
+
/* 8. brutalist 新粗野：撞色块 + 4px 粗框 + 8px 硬阴影 + 零圆角 */
|
|
291
|
+
.tpl-brutal{display:flex;flex-direction:column;justify-content:center;gap:28px;width:min(80%,1100px);height:100%;padding:6vh 0}
|
|
292
|
+
.tpl-brutal .badge{align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--bg);background:var(--accent);padding:6px 16px;border:4px solid var(--text);box-shadow:6px 6px 0 var(--accent2)}
|
|
293
|
+
.tpl-brutal h1{font-size:clamp(44px,6.4vw,80px);font-weight:900;line-height:1.08;color:var(--bg);background:var(--text);padding:12px 28px;align-self:flex-start;border:4px solid var(--text);box-shadow:10px 10px 0 var(--accent)}
|
|
294
|
+
.tpl-brutal .quote{font-size:18px;font-weight:600;line-height:1.75;border-left:10px solid var(--accent2);padding-left:20px;max-width:88%}
|
|
295
|
+
.tpl-brutal ul.points{list-style:none;display:flex;flex-wrap:wrap;gap:16px}
|
|
296
|
+
.tpl-brutal ul.points li{font-size:15px;font-weight:700;padding:12px 20px;background:var(--panel-solid);border:4px solid var(--text);box-shadow:6px 6px 0 var(--accent2)}
|
|
297
|
+
.tpl-brutal ul.points li .num{margin-right:10px;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent)}
|
|
298
|
+
.tpl-brutal footer{font-size:11px;font-weight:700;letter-spacing:2px;border-top:4px solid var(--text);padding-top:14px;display:flex;justify-content:space-between;align-items:center;color:var(--text)}
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
/* 9. swiss 瑞士国际主义：严格左对齐网格 + 超大无衬线标题 + 底部信息通栏 */
|
|
302
|
+
.tpl-swiss{display:flex;flex-direction:column;justify-content:center;width:min(82%,1100px);height:100%;padding:6vh 0;text-align:left}
|
|
303
|
+
.tpl-swiss .badge{font-size:11px;font-weight:700;letter-spacing:4px;color:var(--accent);margin-bottom:3.5vh;display:flex;align-items:center;gap:14px}
|
|
304
|
+
.tpl-swiss .badge::before{content:'';width:36px;height:3px;background:var(--accent)}
|
|
305
|
+
.tpl-swiss h1{font-size:clamp(46px,6.4vw,82px);font-weight:900;line-height:1.06;letter-spacing:-1px;color:var(--text);margin-bottom:3vh}
|
|
306
|
+
.tpl-swiss .rule{width:100%;height:2px;background:var(--text);margin-bottom:3vh;position:relative}
|
|
307
|
+
.tpl-swiss .rule::after{content:'';position:absolute;right:0;top:0;width:18%;height:2px;background:var(--accent)}
|
|
308
|
+
.tpl-swiss .quote{font-size:17px;line-height:1.8;color:var(--muted);margin-bottom:4vh;max-width:72%}
|
|
309
|
+
.tpl-swiss ul.points{list-style:none;display:flex;gap:28px;margin-bottom:5vh}
|
|
310
|
+
.tpl-swiss ul.points li{flex:1;font-size:14px;line-height:1.7;color:var(--text);border-top:1px solid var(--border);padding-top:14px}
|
|
311
|
+
.tpl-swiss ul.points li .num{display:block;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--accent);margin-bottom:8px}
|
|
312
|
+
.tpl-swiss footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
313
|
+
|
|
314
|
+
/* 10. bauhaus 包豪斯：几何元素（圆/方/三角）+ 三原色块 + 粗黑线 */
|
|
315
|
+
.tpl-bauhaus{display:flex;flex-direction:column;justify-content:center;width:min(82%,1100px);height:100%;padding:6vh 0;position:relative}
|
|
316
|
+
.tpl-bauhaus .geo{position:absolute;top:8vh;right:3vw;display:flex;gap:18px;align-items:flex-end;opacity:.92}
|
|
317
|
+
.tpl-bauhaus .geo .c{width:60px;height:60px;border-radius:50%;background:var(--accent)}
|
|
318
|
+
.tpl-bauhaus .geo .s{width:46px;height:46px;background:var(--accent2);transform:rotate(24deg)}
|
|
319
|
+
.tpl-bauhaus .geo .t{width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:46px solid var(--accent)}
|
|
320
|
+
.tpl-bauhaus .badge{font-size:12px;font-weight:800;letter-spacing:3px;color:var(--bg);background:var(--accent);padding:6px 14px;align-self:flex-start;margin-bottom:3.5vh}
|
|
321
|
+
.tpl-bauhaus h1{font-size:clamp(42px,5.8vw,74px);font-weight:900;line-height:1.1;color:var(--text);margin-bottom:3vh;max-width:78%}
|
|
322
|
+
.tpl-bauhaus .quote{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:4vh;max-width:60%}
|
|
323
|
+
.tpl-bauhaus ul.points{list-style:none;display:flex;gap:18px;margin-bottom:5vh}
|
|
324
|
+
.tpl-bauhaus ul.points li{flex:1;font-size:15px;line-height:1.7;color:var(--text);background:var(--panel-solid);padding:16px 14px;border-top:6px solid var(--accent)}
|
|
325
|
+
.tpl-bauhaus ul.points li:nth-child(2){border-top-color:var(--accent2)}
|
|
326
|
+
.tpl-bauhaus ul.points li .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;color:var(--accent);margin-right:8px}
|
|
327
|
+
.tpl-bauhaus .footbar{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:4px solid var(--text);font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
328
|
+
.tpl-bauhaus .footbar::before{content:'';width:60px;height:12px;background:var(--accent2)}
|
|
329
|
+
|
|
330
|
+
/* 11. mondrian 蒙德里安：黑粗线网格 + 红黄蓝色块填充 */
|
|
331
|
+
.tpl-mondrian{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr auto;gap:10px;width:min(84%,1150px);height:88%;background:var(--panel-solid);border:8px solid var(--text)}
|
|
332
|
+
.tpl-mondrian .cell{position:relative;overflow:hidden}
|
|
333
|
+
.tpl-mondrian .main{grid-row:1;grid-column:1;display:flex;flex-direction:column;justify-content:center;padding:4vh 3vw}
|
|
334
|
+
.tpl-mondrian .side{grid-row:1/3;grid-column:2;background:var(--accent);display:flex;flex-direction:column;justify-content:center;padding:3vh 2vw}
|
|
335
|
+
.tpl-mondrian .band{grid-row:2;grid-column:1;background:var(--accent2);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
|
|
336
|
+
.tpl-mondrian .badge{font-size:11px;letter-spacing:3px;color:var(--muted);margin-bottom:2vh}
|
|
337
|
+
.tpl-mondrian h1{font-size:clamp(36px,4.6vw,60px);font-weight:900;line-height:1.15;color:var(--text);margin-bottom:2vh}
|
|
338
|
+
.tpl-mondrian .quote{font-size:15px;line-height:1.8;color:var(--muted)}
|
|
339
|
+
.tpl-mondrian .side ul{list-style:none;display:flex;flex-direction:column;gap:16px}
|
|
340
|
+
.tpl-mondrian .side li{font-size:14px;font-weight:700;line-height:1.6;color:var(--bg);display:flex;gap:10px;align-items:flex-start}
|
|
341
|
+
.tpl-mondrian .side .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;font-size:13px;color:var(--bg);border:2px solid var(--bg);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none}
|
|
342
|
+
.tpl-mondrian .band .lab{font-size:11px;letter-spacing:2px;color:var(--bg);font-weight:700}
|
|
343
|
+
.tpl-mondrian .band .v{font-size:13px;font-weight:900;color:var(--bg)}
|
|
344
|
+
|
|
345
|
+
/* 12. editorial 编辑刊：刊头通栏双线 + 首字下沉 + 左右双栏 */
|
|
346
|
+
.tpl-editorial{display:flex;flex-direction:column;justify-content:center;width:min(80%,1150px);height:100%;padding:5vh 0}
|
|
347
|
+
.tpl-editorial .masthead{display:flex;justify-content:space-between;align-items:baseline;border-top:3px solid var(--text);border-bottom:1px solid var(--text);padding:12px 0;margin-bottom:4vh;font-size:11px;letter-spacing:3px;color:var(--muted)}
|
|
348
|
+
.tpl-editorial .masthead b{font-size:15px;color:var(--text);letter-spacing:4px}
|
|
349
|
+
.tpl-editorial .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:6vw;margin-bottom:4vh}
|
|
350
|
+
.tpl-editorial h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(38px,4.4vw,56px);font-weight:700;line-height:1.28;color:var(--text);margin-bottom:2.5vh}
|
|
351
|
+
.tpl-editorial h1::first-letter{font-size:1.9em;color:var(--accent);float:left;line-height:.9;margin:4px 10px 0 0;font-weight:900}
|
|
352
|
+
.tpl-editorial .quote{font-size:16px;line-height:1.9;color:var(--muted);font-style:italic}
|
|
353
|
+
.tpl-editorial ul.points{list-style:none;display:flex;flex-direction:column;gap:18px}
|
|
354
|
+
.tpl-editorial ul.points li{display:flex;gap:14px;font-size:15px;line-height:1.7;color:var(--text);padding-bottom:14px;border-bottom:1px solid var(--border)}
|
|
355
|
+
.tpl-editorial ul.points li:last-child{border-bottom:none}
|
|
356
|
+
.tpl-editorial .num{font-family:Georgia,serif;font-size:30px;font-weight:900;color:var(--accent);line-height:1;flex:none}
|
|
357
|
+
.tpl-editorial .footbar{display:flex;justify-content:space-between;border-top:3px double var(--text);padding-top:14px;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
358
|
+
|
|
359
|
+
/* 13. typo 大字报：巨型标题撑满 + 底部要点三列 */
|
|
360
|
+
.tpl-typo{display:flex;flex-direction:column;justify-content:flex-end;width:min(88%,1200px);height:100%;padding:6vh 2vw 5vh;text-align:left}
|
|
361
|
+
.tpl-typo .badge{font-size:11px;letter-spacing:4px;color:var(--accent);margin-bottom:2vh}
|
|
362
|
+
.tpl-typo h1{font-size:clamp(60px,9.2vw,128px);font-weight:900;line-height:.97;letter-spacing:-2px;color:var(--text);margin-bottom:2.5vh}
|
|
363
|
+
.tpl-typo .quote{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:4vh;max-width:60%}
|
|
364
|
+
.tpl-typo ul.points{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:4vh;border-top:2px solid var(--text);padding-top:18px}
|
|
365
|
+
.tpl-typo ul.points li{font-size:14px;line-height:1.7;color:var(--text)}
|
|
366
|
+
.tpl-typo ul.points li .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;color:var(--accent);margin-right:8px}
|
|
367
|
+
.tpl-typo footer{font-size:10px;letter-spacing:2px;color:var(--muted);display:flex;justify-content:space-between}
|
|
368
|
+
|
|
369
|
+
/* 14. memphis 孟菲斯：波点底纹 + 撞色徽章 + 卡片微斜错落 */
|
|
370
|
+
.tpl-memphis{display:flex;flex-direction:column;justify-content:center;width:min(84%,1150px);height:100%;padding:6vh 0;position:relative}
|
|
371
|
+
.tpl-memphis .dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--border) 3px,transparent 3px);background-size:44px 44px;opacity:.6}
|
|
372
|
+
.tpl-memphis .badge{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--bg);background:var(--accent);padding:8px 16px;border-radius:999px;margin-bottom:3.5vh;transform:rotate(-2deg)}
|
|
373
|
+
.tpl-memphis h1{font-size:clamp(42px,5.6vw,70px);font-weight:900;line-height:1.1;color:var(--text);margin-bottom:3vh}
|
|
374
|
+
.tpl-memphis .quote{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:4vh;max-width:66%}
|
|
375
|
+
.tpl-memphis ul.points{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:5vh}
|
|
376
|
+
.tpl-memphis ul.points li{font-size:15px;line-height:1.7;color:var(--text);background:var(--panel-solid);border:3px solid var(--text);border-radius:14px;padding:18px 16px;display:flex;gap:12px;align-items:flex-start}
|
|
377
|
+
.tpl-memphis ul.points li:nth-child(odd){transform:rotate(-1.2deg)}
|
|
378
|
+
.tpl-memphis ul.points li:nth-child(even){transform:rotate(1.2deg);background:var(--tag-bg)}
|
|
379
|
+
.tpl-memphis .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;font-size:15px;color:var(--accent);background:var(--bg);border-radius:8px;padding:4px 8px;flex:none}
|
|
380
|
+
.tpl-memphis footer{font-size:11px;letter-spacing:2px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
|
|
381
|
+
|
|
382
|
+
/* 15. exhibit 展览海报：展签卡片（白卡黑框硬影微斜）+ 大标题 + 底注 */
|
|
383
|
+
.tpl-exhibit{display:flex;flex-direction:column;justify-content:center;width:min(82%,1150px);height:100%;padding:6vh 0;position:relative}
|
|
384
|
+
.tpl-exhibit .wall-label{position:absolute;top:6vh;right:0;font-size:10px;letter-spacing:3px;color:var(--muted);writing-mode:vertical-rl}
|
|
385
|
+
.tpl-exhibit .title-block{display:flex;align-items:baseline;gap:20px;margin-bottom:3vh}
|
|
386
|
+
.tpl-exhibit .title-block h1{font-size:clamp(42px,5.4vw,68px);font-weight:800;line-height:1.12;color:var(--text)}
|
|
387
|
+
.tpl-exhibit .title-block .yr{font-family:Georgia,serif;font-size:20px;font-style:italic;color:var(--accent)}
|
|
388
|
+
.tpl-exhibit .quote{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:4vh;max-width:70%}
|
|
389
|
+
.tpl-exhibit .label-card{background:var(--panel-solid);border:3px solid var(--text);padding:24px 26px;box-shadow:10px 10px 0 var(--accent);transform:rotate(-.6deg);margin-bottom:5vh}
|
|
390
|
+
.tpl-exhibit .label-card .lab{font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:14px;font-weight:700}
|
|
391
|
+
.tpl-exhibit .label-card ul{list-style:none;display:flex;gap:24px;flex-wrap:wrap}
|
|
392
|
+
.tpl-exhibit .label-card li{flex:1;min-width:180px;font-size:14px;line-height:1.7;color:var(--text)}
|
|
393
|
+
.tpl-exhibit .label-card .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent);font-weight:800;margin-right:8px}
|
|
394
|
+
.tpl-exhibit footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted)}
|
|
395
|
+
|
|
396
|
+
/* 16. window 荷兰视窗：不对称 2:1 网格 + 色块开窗 */
|
|
397
|
+
.tpl-window{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1.2fr 1fr;gap:14px;width:min(84%,1150px);height:86%;padding:4vh 0}
|
|
398
|
+
.tpl-window .win{overflow:hidden;position:relative}
|
|
399
|
+
.tpl-window .w-main{grid-column:1;grid-row:1/3;background:var(--panel-solid);border:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;padding:5vh 3vw}
|
|
400
|
+
.tpl-window .w-top{grid-column:2;grid-row:1;background:var(--accent);display:flex;flex-direction:column;justify-content:center;padding:3vh 2vw}
|
|
401
|
+
.tpl-window .w-bottom{grid-column:2;grid-row:2;border:3px solid var(--text);background:var(--bg2);display:flex;flex-direction:column;justify-content:center;padding:3vh 2vw}
|
|
402
|
+
.tpl-window .badge{font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:2.5vh}
|
|
403
|
+
.tpl-window h1{font-size:clamp(34px,4.2vw,54px);font-weight:900;line-height:1.15;color:var(--text);margin-bottom:3vh}
|
|
404
|
+
.tpl-window .w-main ul{list-style:none;display:flex;flex-direction:column;gap:14px}
|
|
405
|
+
.tpl-window .w-main li{font-size:14px;line-height:1.65;color:var(--text);display:flex;gap:10px;align-items:baseline}
|
|
406
|
+
.tpl-window .w-main .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--accent);font-weight:800}
|
|
407
|
+
.tpl-window .w-top .k{font-size:11px;letter-spacing:2px;color:var(--bg);font-weight:700;margin-bottom:12px}
|
|
408
|
+
.tpl-window .w-top .v{font-size:clamp(18px,2.2vw,28px);font-weight:900;color:var(--bg);line-height:1.4}
|
|
409
|
+
.tpl-window .w-bottom .v{font-size:14px;line-height:1.7;color:var(--text);margin-bottom:16px}
|
|
410
|
+
.tpl-window .w-bottom footer{font-size:9px;letter-spacing:1px;color:var(--muted)}
|
|
411
|
+
|
|
412
|
+
|
|
413
|
+
/* 17. newspaper 报纸头版：报头 + 通栏大标题 + 双栏细排 */
|
|
414
|
+
.tpl-newspaper{display:flex;flex-direction:column;width:min(88%,1150px);height:100%;padding:4vh 0}
|
|
415
|
+
.tpl-newspaper .mast{text-align:center;border-top:4px double var(--text);border-bottom:1px solid var(--text);padding:1.5vh 0;margin-bottom:2.5vh}
|
|
416
|
+
.tpl-newspaper .mast h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:2px;color:var(--text)}
|
|
417
|
+
.tpl-newspaper .mast .meta{font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:5px;display:flex;justify-content:center;gap:16px}
|
|
418
|
+
.tpl-newspaper .headline{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.25;color:var(--text);border-bottom:3px solid var(--text);padding-bottom:1.5vh;margin-bottom:2vh}
|
|
419
|
+
.tpl-newspaper .cols{columns:2;column-gap:3vw;column-rule:1px solid var(--border)}
|
|
420
|
+
.tpl-newspaper .lead{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:2vh;break-inside:avoid}
|
|
421
|
+
.tpl-newspaper .lead::first-letter{font-size:2.6em;float:left;line-height:.85;margin:3px 8px 0 0;color:var(--accent);font-family:Georgia,serif;font-weight:900}
|
|
422
|
+
.tpl-newspaper ul.points{list-style:none}
|
|
423
|
+
.tpl-newspaper ul.points li{font-size:13px;line-height:1.75;color:var(--text);padding:7px 0;border-top:1px dotted var(--border);break-inside:avoid;display:flex;gap:8px}
|
|
424
|
+
.tpl-newspaper ul.points .num{font-family:Georgia,serif;color:var(--accent);font-weight:800;flex:none}
|
|
425
|
+
.tpl-newspaper footer{display:flex;justify-content:space-between;border-top:2px solid var(--text);margin-top:auto;padding-top:10px;font-size:9px;letter-spacing:2px;color:var(--muted)}
|
|
426
|
+
|
|
427
|
+
/* 18. popart 波普艺术：半色调网点 + 粗描边硬影 + 撞色块 */
|
|
428
|
+
.tpl-popart{display:flex;flex-direction:column;justify-content:center;width:min(84%,1150px);height:100%;position:relative;padding:6vh 0}
|
|
429
|
+
.tpl-popart .halftone{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--border) 2px,transparent 2px);background-size:16px 16px;opacity:.5}
|
|
430
|
+
.tpl-popart .badge{align-self:flex-start;font-size:13px;font-weight:900;letter-spacing:2px;color:var(--bg);background:var(--accent);padding:8px 18px;border:3px solid var(--text);box-shadow:5px 5px 0 var(--text);margin-bottom:3.5vh;transform:rotate(-1.5deg)}
|
|
431
|
+
.tpl-popart h1{font-size:clamp(46px,6vw,84px);font-weight:900;line-height:1.05;color:var(--bg);-webkit-text-stroke:2.5px var(--text);margin-bottom:2.5vh;text-shadow:4px 4px 0 var(--accent)}
|
|
432
|
+
.tpl-popart .quote{font-size:16px;font-weight:800;color:var(--text);background:var(--tag-bg);border:3px solid var(--text);padding:12px 18px;margin-bottom:4vh;box-shadow:6px 6px 0 var(--accent2)}
|
|
433
|
+
.tpl-popart ul.points{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
|
|
434
|
+
.tpl-popart ul.points li{font-size:15px;font-weight:800;color:var(--bg);background:var(--accent2);border:3px solid var(--text);padding:14px 16px;box-shadow:5px 5px 0 var(--text);display:flex;gap:10px;align-items:center}
|
|
435
|
+
.tpl-popart ul.points li:nth-child(even){background:var(--accent)}
|
|
436
|
+
.tpl-popart ul.points .num{font-family:ui-monospace,'SF Mono',Menlo,monospace;background:var(--bg);color:var(--text);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:900;flex:none}
|
|
437
|
+
.tpl-popart footer{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--muted);margin-top:4vh}
|
|
438
|
+
|
|
439
|
+
/* 19. opart 欧普艺术：放射线视错觉 + 同心框核心 */
|
|
440
|
+
.tpl-opart{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;overflow:hidden}
|
|
441
|
+
.tpl-opart .rays{position:absolute;inset:-40%;pointer-events:none;background:repeating-conic-gradient(var(--text) 0deg 3deg,transparent 3deg 10deg);opacity:.22}
|
|
442
|
+
.tpl-opart .core{position:relative;width:min(78%,1050px);background:var(--panel-solid);border:2px solid var(--text);padding:6vh 4vw;text-align:center;box-shadow:0 0 0 12px var(--bg2),0 0 0 14px var(--text)}
|
|
443
|
+
.tpl-opart .badge{font-size:11px;letter-spacing:5px;color:var(--accent);margin-bottom:2.5vh}
|
|
444
|
+
.tpl-opart h1{font-size:clamp(38px,5vw,64px);font-weight:900;letter-spacing:1px;color:var(--text);margin-bottom:2.5vh;line-height:1.15}
|
|
445
|
+
.tpl-opart .quote{font-size:15px;color:var(--muted);margin-bottom:3.5vh}
|
|
446
|
+
.tpl-opart ul.points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px}
|
|
447
|
+
.tpl-opart ul.points li{font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px}
|
|
448
|
+
.tpl-opart ul.points .num{width:22px;height:22px;border:2px solid var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--text)}
|
|
449
|
+
.tpl-opart footer{margin-top:3.5vh;font-size:10px;letter-spacing:3px;color:var(--muted)}
|
|
450
|
+
|
|
451
|
+
/* 20. artnouveau 新艺术：慕夏拱形 + 双线内衬 + 卷草装饰 */
|
|
452
|
+
.tpl-artnouveau{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(80%,1050px);height:100%;text-align:center;padding:5vh 0}
|
|
453
|
+
.tpl-artnouveau .arch{position:relative;width:100%;border:2px solid var(--accent);border-radius:46% 46% 0 0 / 22% 22% 0 0;padding:7vh 5vw 4vh;background:var(--panel)}
|
|
454
|
+
.tpl-artnouveau .arch::after{content:'';position:absolute;inset:12px;border:1px solid var(--border);border-radius:inherit;pointer-events:none}
|
|
455
|
+
.tpl-artnouveau .ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:3vh;color:var(--accent);font-size:16px}
|
|
456
|
+
.tpl-artnouveau .ornament::before,.tpl-artnouveau .ornament::after{content:'';height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--accent))}
|
|
457
|
+
.tpl-artnouveau .ornament::after{background:linear-gradient(90deg,var(--accent),transparent)}
|
|
458
|
+
.tpl-artnouveau .badge{font-size:11px;letter-spacing:6px;color:var(--accent2);margin-bottom:2.5vh}
|
|
459
|
+
.tpl-artnouveau h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(36px,4.6vw,58px);font-weight:700;color:var(--text);margin-bottom:2vh;line-height:1.3}
|
|
460
|
+
.tpl-artnouveau .quote{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:4vh;max-width:72%;margin-left:auto;margin-right:auto}
|
|
461
|
+
.tpl-artnouveau ul.points{list-style:none;display:flex;justify-content:center;gap:3vw;flex-wrap:wrap;margin-bottom:4vh}
|
|
462
|
+
.tpl-artnouveau ul.points li{font-size:14px;color:var(--text);line-height:1.8}
|
|
463
|
+
.tpl-artnouveau ul.points .num{font-family:Georgia,serif;font-size:15px;font-style:italic;color:var(--accent);margin-right:8px}
|
|
464
|
+
.tpl-artnouveau footer{font-size:10px;letter-spacing:3px;color:var(--muted);display:flex;gap:24px}
|
|
465
|
+
|
|
466
|
+
/* 21. acid 酸性设计：液态金属 blob + 荧光斜切徽章（风格本体色特许：金属灰） */
|
|
467
|
+
.tpl-acid{display:flex;flex-direction:column;justify-content:center;width:min(82%,1100px);height:100%;padding:6vh 0;position:relative}
|
|
468
|
+
.tpl-acid .liquid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,var(--border) 46%,transparent 52%),repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 90px);opacity:.8}
|
|
469
|
+
.tpl-acid .blob{position:absolute;top:8%;right:6%;width:min(24vw,190px);height:min(24vw,190px);border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;background:conic-gradient(from 210deg,rgba(180,180,170,.9),rgba(70,70,80,.9),rgba(220,220,210,.9),rgba(90,90,100,.9),rgba(180,180,170,.9));box-shadow:inset 0 0 24px rgba(0,0,0,.35);opacity:.85}
|
|
470
|
+
.tpl-acid .badge{font-size:12px;font-weight:900;letter-spacing:3px;color:var(--bg);background:var(--accent);padding:7px 16px;border-radius:2px;transform:skewX(-12deg);margin-bottom:3vh;align-self:flex-start}
|
|
471
|
+
.tpl-acid h1{font-size:clamp(44px,5.8vw,76px);font-weight:900;line-height:1.02;letter-spacing:-1px;color:var(--text);margin-bottom:2.5vh}
|
|
472
|
+
.tpl-acid .quote{font-size:15px;color:var(--muted);margin-bottom:4vh;max-width:70%;border-left:4px solid var(--accent);padding-left:16px}
|
|
473
|
+
.tpl-acid ul.points{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4vh}
|
|
474
|
+
.tpl-acid ul.points li{font-size:14px;font-weight:800;color:var(--text);background:var(--panel-solid);border:1.5px solid var(--border);border-radius:2px;padding:10px 14px;display:flex;gap:8px;align-items:center;transform:skewX(-6deg)}
|
|
475
|
+
.tpl-acid ul.points li>*{transform:skewX(6deg)}
|
|
476
|
+
.tpl-acid ul.points .num{color:var(--accent);font-family:ui-monospace,'SF Mono',Menlo,monospace}
|
|
477
|
+
.tpl-acid footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted);border-top:1px dashed var(--border);padding-top:12px}
|
|
478
|
+
|
|
479
|
+
/* 22. glitch 故障艺术：RGB 错位标题 + 阶梯裁切卡（风格本体色特许：品红/青错位影） */
|
|
480
|
+
.tpl-glitch{display:flex;flex-direction:column;justify-content:center;width:min(84%,1150px);height:100%;padding:6vh 0;position:relative}
|
|
481
|
+
.tpl-glitch .bars{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,0,200,.06) 18px 21px,rgba(0,255,255,.06) 21px 24px)}
|
|
482
|
+
.tpl-glitch .badge{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;letter-spacing:3px;color:var(--accent);border:1.5px solid var(--accent);padding:5px 12px;margin-bottom:3vh;align-self:flex-start}
|
|
483
|
+
.tpl-glitch h1{position:relative;font-size:clamp(44px,6vw,80px);font-weight:900;line-height:1.05;color:var(--text);margin-bottom:3vh}
|
|
484
|
+
.tpl-glitch h1::before,.tpl-glitch h1::after{content:attr(data-t);position:absolute;inset:0;opacity:.7}
|
|
485
|
+
.tpl-glitch h1::before{color:#f0f;transform:translate(-3px,2px);clip-path:inset(12% 0 58% 0)}
|
|
486
|
+
.tpl-glitch h1::after{color:#0ff;transform:translate(3px,-2px);clip-path:inset(58% 0 12% 0)}
|
|
487
|
+
.tpl-glitch .quote{font-size:15px;color:var(--muted);margin-bottom:4vh;max-width:70%;font-family:ui-monospace,'SF Mono',Menlo,monospace}
|
|
488
|
+
.tpl-glitch ul.points{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:4vh}
|
|
489
|
+
.tpl-glitch ul.points li{font-size:14px;color:var(--text);background:var(--panel-solid);border:1px solid var(--border);padding:12px 14px;display:flex;gap:10px;align-items:baseline;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
|
|
490
|
+
.tpl-glitch ul.points .num{font-family:ui-monospace,'SF Mono',Menlo,monospace;color:var(--accent);font-weight:800}
|
|
491
|
+
.tpl-glitch footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted);font-family:ui-monospace,'SF Mono',Menlo,monospace}
|
|
492
|
+
|
|
493
|
+
/* 23. vaporwave 蒸汽波：落日渐变 + 透视网格地平线（风格本体色特许：粉紫地平线） */
|
|
494
|
+
.tpl-vaporwave{display:flex;flex-direction:column;justify-content:flex-end;width:min(86%,1150px);height:100%;padding:7vh 0 6vh;position:relative}
|
|
495
|
+
.tpl-vaporwave .sun{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:min(34vw,260px);height:min(34vw,260px);border-radius:50%;background:linear-gradient(180deg,var(--accent2),transparent 62%);opacity:.55;pointer-events:none}
|
|
496
|
+
.tpl-vaporwave .grid{position:absolute;bottom:0;left:0;right:0;height:42%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(180,80,255,.28)),repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 34px);transform:perspective(340px) rotateX(58deg);transform-origin:bottom}
|
|
497
|
+
.tpl-vaporwave .badge{font-size:12px;letter-spacing:5px;color:var(--bg);background:linear-gradient(90deg,var(--accent),var(--accent2));padding:7px 18px;border-radius:999px;margin-bottom:3vh;align-self:flex-start}
|
|
498
|
+
.tpl-vaporwave h1{font-size:clamp(40px,5.4vw,70px);font-weight:900;line-height:1.1;letter-spacing:1px;color:var(--text);margin-bottom:2.5vh}
|
|
499
|
+
.tpl-vaporwave .quote{font-size:15px;color:var(--muted);margin-bottom:4vh;max-width:64%}
|
|
500
|
+
.tpl-vaporwave ul.points{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4vh}
|
|
501
|
+
.tpl-vaporwave ul.points li{font-size:14px;color:var(--text);border:1.5px solid var(--border);border-radius:10px;padding:10px 16px;background:var(--panel)}
|
|
502
|
+
.tpl-vaporwave ul.points .num{color:var(--accent);font-family:Georgia,serif;font-style:italic;margin-right:8px}
|
|
503
|
+
.tpl-vaporwave footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:3px;color:var(--muted)}
|
|
504
|
+
|
|
505
|
+
/* 24. cyber 赛博朋克：霓虹切角框 + 扫描线 + 发光标题 */
|
|
506
|
+
.tpl-cyber{display:flex;flex-direction:column;justify-content:center;width:min(82%,1100px);height:100%;padding:6vh 0;position:relative}
|
|
507
|
+
.tpl-cyber .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 26px,var(--glow-soft) 26px 27px)}
|
|
508
|
+
.tpl-cyber .frame{position:relative;border:1.5px solid var(--accent);padding:5vh 4vw;background:var(--panel);clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
|
|
509
|
+
.tpl-cyber .frame::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border:1.5px solid var(--border);clip-path:inherit;pointer-events:none}
|
|
510
|
+
.tpl-cyber .frame::before{content:'';position:absolute;top:0;left:0;width:40%;height:1.5px;background:var(--accent);box-shadow:0 0 12px var(--glow)}
|
|
511
|
+
.tpl-cyber .badge{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:2.5vh}
|
|
512
|
+
.tpl-cyber h1{font-size:clamp(38px,5vw,64px);font-weight:900;line-height:1.1;color:var(--text);margin-bottom:2.5vh;text-shadow:0 0 18px var(--glow)}
|
|
513
|
+
.tpl-cyber .quote{font-size:15px;color:var(--muted);margin-bottom:3.5vh}
|
|
514
|
+
.tpl-cyber ul.points{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:3.5vh}
|
|
515
|
+
.tpl-cyber ul.points li{font-size:14px;color:var(--text);border-left:3px solid var(--accent);padding:6px 0 6px 12px;flex:1;min-width:200px}
|
|
516
|
+
.tpl-cyber ul.points .num{color:var(--accent);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;margin-right:8px}
|
|
517
|
+
.tpl-cyber footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted);font-family:ui-monospace,'SF Mono',Menlo,monospace}
|
|
518
|
+
|
|
519
|
+
/* 25. academic 学术墙报：横幅标题 + 三栏（摘要/图表/结论） */
|
|
520
|
+
.tpl-academic{display:flex;flex-direction:column;width:min(88%,1150px);height:100%;padding:4vh 0}
|
|
521
|
+
.tpl-academic .banner{background:var(--accent);color:var(--bg);text-align:center;padding:3vh 2vw;border-radius:2px;margin-bottom:2.5vh}
|
|
522
|
+
.tpl-academic .banner h1{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.3;color:var(--bg)}
|
|
523
|
+
.tpl-academic .banner .sub{font-size:11px;letter-spacing:2px;opacity:.85;margin-top:8px}
|
|
524
|
+
.tpl-academic .cols{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:2vw;flex:1;min-height:0}
|
|
525
|
+
.tpl-academic .col{border:1px solid var(--border);padding:2.5vh 1.6vw;background:var(--panel)}
|
|
526
|
+
.tpl-academic .col h2{font-size:13px;letter-spacing:2px;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:8px;margin-bottom:2vh}
|
|
527
|
+
.tpl-academic .col p{font-size:13px;line-height:1.8;color:var(--text)}
|
|
528
|
+
.tpl-academic .col .quote{font-size:14px;line-height:1.9;color:var(--muted);font-style:italic;margin-bottom:2vh}
|
|
529
|
+
.tpl-academic .fig{border:2px dashed var(--border);height:120px;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:2vh;background:var(--bg2)}
|
|
530
|
+
.tpl-academic ul.points{list-style:none;display:flex;flex-direction:column;gap:12px}
|
|
531
|
+
.tpl-academic ul.points li{font-size:13px;line-height:1.7;color:var(--text);display:flex;gap:8px}
|
|
532
|
+
.tpl-academic ul.points .num{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;color:var(--accent);font-weight:800;flex:none}
|
|
533
|
+
.tpl-academic footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:1.5vh;border-top:1px solid var(--border);padding-top:10px}
|
|
534
|
+
|
|
535
|
+
/* 26. recruit 招聘海报：岗位巨字 + 亮点标签 + 福利卡 + CTA */
|
|
536
|
+
.tpl-recruit{display:flex;flex-direction:column;justify-content:center;width:min(82%,1100px);height:100%;padding:6vh 0}
|
|
537
|
+
.tpl-recruit .badge{align-self:flex-start;font-size:12px;font-weight:900;letter-spacing:2px;color:var(--bg);background:var(--accent);padding:7px 16px;border-radius:4px;margin-bottom:2.5vh}
|
|
538
|
+
.tpl-recruit h1{font-size:clamp(40px,5.4vw,72px);font-weight:900;line-height:1.1;color:var(--text);margin-bottom:1.5vh}
|
|
539
|
+
.tpl-recruit .quote{font-size:16px;color:var(--muted);margin-bottom:3.5vh}
|
|
540
|
+
.tpl-recruit .chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:3.5vh}
|
|
541
|
+
.tpl-recruit .chips span{font-size:13px;font-weight:800;color:var(--accent);border:2px solid var(--accent);border-radius:999px;padding:6px 16px;background:var(--tag-bg)}
|
|
542
|
+
.tpl-recruit ul.points{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:3.5vh}
|
|
543
|
+
.tpl-recruit ul.points li{font-size:15px;line-height:1.7;color:var(--text);background:var(--panel-solid);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start}
|
|
544
|
+
.tpl-recruit ul.points .num{color:var(--accent);font-weight:900}
|
|
545
|
+
.tpl-recruit .cta{align-self:center;font-size:14px;font-weight:800;letter-spacing:2px;color:var(--bg);background:var(--accent);padding:12px 40px;border-radius:999px;box-shadow:0 6px 18px var(--glow)}
|
|
546
|
+
.tpl-recruit footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:2.5vh}
|
|
547
|
+
|
|
548
|
+
/* 27. invitation 邀请函：烫金双线框 + 衬线大字 + 装饰分隔 */
|
|
549
|
+
.tpl-invitation{display:flex;align-items:center;justify-content:center;width:min(80%,1050px);height:100%}
|
|
550
|
+
.tpl-invitation .card{position:relative;width:100%;border:1px solid var(--accent);outline:1px solid var(--accent);outline-offset:6px;background:var(--panel);padding:6vh 4vw;text-align:center}
|
|
551
|
+
.tpl-invitation .badge{font-size:11px;letter-spacing:6px;color:var(--accent);margin-bottom:3vh}
|
|
552
|
+
.tpl-invitation h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(36px,4.6vw,58px);font-weight:700;color:var(--text);margin-bottom:2vh;line-height:1.35}
|
|
553
|
+
.tpl-invitation .rule{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:2.5vh;color:var(--accent);font-size:13px}
|
|
554
|
+
.tpl-invitation .rule::before,.tpl-invitation .rule::after{content:'';height:1px;width:90px;background:linear-gradient(90deg,transparent,var(--accent))}
|
|
555
|
+
.tpl-invitation .rule::after{background:linear-gradient(90deg,var(--accent),transparent)}
|
|
556
|
+
.tpl-invitation .quote{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:3.5vh}
|
|
557
|
+
.tpl-invitation ul.points{list-style:none;display:flex;justify-content:center;gap:3vw;flex-wrap:wrap;margin-bottom:3.5vh}
|
|
558
|
+
.tpl-invitation ul.points li{font-size:14px;color:var(--text);line-height:2}
|
|
559
|
+
.tpl-invitation ul.points .num{color:var(--accent);font-weight:800;margin-right:8px}
|
|
560
|
+
.tpl-invitation footer{font-size:10px;letter-spacing:3px;color:var(--muted);border-top:1px solid var(--border);padding-top:14px;display:flex;justify-content:center;gap:24px}
|
|
561
|
+
|
|
562
|
+
/* 28. notice 公告：红头大字 + 正文首行缩进 + 落款 */
|
|
563
|
+
.tpl-notice{display:flex;flex-direction:column;width:min(76%,1000px);height:100%;padding:5vh 0}
|
|
564
|
+
.tpl-notice .head{text-align:center;border-bottom:3px solid var(--accent);padding-bottom:2.5vh;margin-bottom:3.5vh}
|
|
565
|
+
.tpl-notice .head .badge{font-size:clamp(30px,3.8vw,48px);font-weight:900;letter-spacing:14px;color:var(--accent);line-height:1.3}
|
|
566
|
+
.tpl-notice .head .meta{font-size:11px;letter-spacing:2px;color:var(--muted);margin-top:10px}
|
|
567
|
+
.tpl-notice h1{font-size:clamp(22px,2.6vw,32px);font-weight:800;text-align:center;color:var(--text);margin-bottom:3vh;line-height:1.5}
|
|
568
|
+
.tpl-notice .quote{font-size:15px;line-height:2;color:var(--text);text-indent:2em;margin-bottom:3vh}
|
|
569
|
+
.tpl-notice ul.points{list-style:none;margin-bottom:3vh}
|
|
570
|
+
.tpl-notice ul.points li{font-size:15px;line-height:2;color:var(--text);padding:6px 0;border-bottom:1px dashed var(--border);display:flex;gap:10px}
|
|
571
|
+
.tpl-notice ul.points .num{color:var(--accent);font-weight:800}
|
|
572
|
+
.tpl-notice footer{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--muted);gap:6px;margin-top:auto}
|
|
573
|
+
|
|
574
|
+
/* 29. inkwash 水墨：宣纸底 + 墨色远山 + 朱印落款（风格本体色特许：宣纸米/墨黑/朱砂红） */
|
|
575
|
+
.tpl-inkwash{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;overflow:hidden;background:#f5f0e3}
|
|
576
|
+
.tpl-inkwash .mt{position:absolute;border-radius:50%;pointer-events:none;background:#26221e}
|
|
577
|
+
.tpl-inkwash .m1{width:76%;height:26%;left:-6%;bottom:-7%;opacity:.07}
|
|
578
|
+
.tpl-inkwash .m2{width:92%;height:30%;left:14%;bottom:-13%;opacity:.13}
|
|
579
|
+
.tpl-inkwash .m3{width:104%;height:34%;left:24%;bottom:-17%;opacity:.2}
|
|
580
|
+
.tpl-inkwash .sun{position:absolute;right:15%;top:11%;width:min(15vw,110px);height:min(15vw,110px);border-radius:50%;background:#b03a2e;opacity:.92;pointer-events:none}
|
|
581
|
+
.tpl-inkwash .content{position:relative;display:flex;flex-direction:column;justify-content:center;width:min(82%,1060px);height:100%;padding:7vh 0}
|
|
582
|
+
.tpl-inkwash .seal{align-self:flex-start;font-family:Georgia,'Songti SC','SimSun',serif;font-size:13px;font-weight:700;letter-spacing:2px;color:#f5f0e3;background:#b03a2e;padding:8px 12px;border-radius:4px;margin-bottom:3vh}
|
|
583
|
+
.tpl-inkwash h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(38px,5.2vw,66px);font-weight:700;color:#26221e;line-height:1.4;margin-bottom:2.5vh}
|
|
584
|
+
.tpl-inkwash .quote{font-size:16px;font-style:italic;color:#6b645a;margin-bottom:4vh;max-width:72%;border-left:3px solid #b03a2e;padding-left:18px;line-height:1.9}
|
|
585
|
+
.tpl-inkwash ul.points{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:4vh}
|
|
586
|
+
.tpl-inkwash ul.points li{font-size:15px;color:#26221e;display:flex;gap:12px;align-items:baseline;line-height:1.8}
|
|
587
|
+
.tpl-inkwash ul.points .num{font-family:Georgia,'Songti SC','SimSun',serif;color:#b03a2e;font-weight:700;flex:none}
|
|
588
|
+
.tpl-inkwash footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:3px;color:#6b645a;border-top:1px solid rgba(38,34,30,.18);padding-top:14px}
|
|
589
|
+
|
|
590
|
+
/* 30. palace 红金宫廷：朱红底 + 回纹金边双线框 + 衬线金字（风格本体色特许：朱红/鎏金/米白） */
|
|
591
|
+
.tpl-palace{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(160deg,#7a1f1f,#5e1717);padding:6vh 0}
|
|
592
|
+
.tpl-palace .frame{position:relative;width:min(80%,1060px);height:100%;display:flex;flex-direction:column;justify-content:center;border:2px solid #d4af37;outline:1px solid #d4af37;outline-offset:5px;padding:7vh 5vw;text-align:center;background:repeating-linear-gradient(90deg,rgba(212,175,55,.08) 0 2px,transparent 2px 34px)}
|
|
593
|
+
.tpl-palace .frame::after{content:'';position:absolute;inset:9px;border:1px solid rgba(212,175,55,.5);pointer-events:none}
|
|
594
|
+
.tpl-palace .badge{font-size:12px;letter-spacing:8px;color:#d4af37;margin-bottom:2.5vh}
|
|
595
|
+
.tpl-palace h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(36px,4.8vw,62px);font-weight:700;color:#f5ead1;margin-bottom:2vh;line-height:1.4}
|
|
596
|
+
.tpl-palace .divider{display:flex;align-items:center;gap:14px;justify-content:center;color:#d4af37;font-size:13px;margin-bottom:2.5vh}
|
|
597
|
+
.tpl-palace .divider::before,.tpl-palace .divider::after{content:'';height:1px;width:110px;background:linear-gradient(90deg,transparent,#d4af37)}
|
|
598
|
+
.tpl-palace .divider::after{background:linear-gradient(90deg,#d4af37,transparent)}
|
|
599
|
+
.tpl-palace .quote{font-size:15px;font-style:italic;color:#e8cba0;margin-bottom:3.5vh;max-width:70%;margin-left:auto;margin-right:auto}
|
|
600
|
+
.tpl-palace ul.points{list-style:none;display:flex;justify-content:center;gap:3.5vw;flex-wrap:wrap;margin-bottom:3.5vh}
|
|
601
|
+
.tpl-palace ul.points li{font-size:14px;color:#f5ead1;display:flex;gap:8px;align-items:center;line-height:1.8}
|
|
602
|
+
.tpl-palace ul.points .num{width:22px;height:22px;border:1px solid #d4af37;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#d4af37;flex:none}
|
|
603
|
+
.tpl-palace footer{display:flex;justify-content:center;gap:26px;font-size:10px;letter-spacing:3px;color:#d8b878}
|
|
604
|
+
|
|
605
|
+
/* 31. landscape 青绿山水：clip-path 层叠山峦 + 留白天际 + 题跋落款（风格本体色特许：青绿/赭石/留白） */
|
|
606
|
+
.tpl-landscape{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;overflow:hidden;background:#f4f1e8}
|
|
607
|
+
.tpl-landscape .peak{position:absolute;left:-6%;right:-6%;pointer-events:none}
|
|
608
|
+
.tpl-landscape .p1{bottom:36%;height:32%;background:#a8c6b4;clip-path:polygon(0 100%,8% 42%,18% 66%,30% 30%,44% 58%,56% 38%,68% 62%,80% 34%,100% 70%,100% 100%)}
|
|
609
|
+
.tpl-landscape .p2{bottom:23%;height:32%;background:#6ea08d;clip-path:polygon(0 100%,12% 48%,26% 72%,40% 40%,58% 68%,72% 44%,86% 70%,100% 50%,100% 100%)}
|
|
610
|
+
.tpl-landscape .p3{bottom:9%;height:30%;background:#4a8a76;clip-path:polygon(0 100%,10% 58%,30% 78%,50% 52%,70% 80%,88% 60%,100% 84%,100% 100%)}
|
|
611
|
+
.tpl-landscape .p4{bottom:-5%;height:24%;background:#356b5a;clip-path:polygon(0 100%,18% 62%,42% 86%,64% 66%,84% 90%,100% 74%,100% 100%)}
|
|
612
|
+
.tpl-landscape .content{position:relative;display:flex;flex-direction:column;justify-content:center;width:min(82%,1060px);height:100%;padding:7vh 0}
|
|
613
|
+
.tpl-landscape .badge{align-self:flex-start;font-family:Georgia,'Songti SC','SimSun',serif;font-size:12px;letter-spacing:6px;color:#356b5a;border:1px solid #356b5a;padding:6px 14px;margin-bottom:3vh}
|
|
614
|
+
.tpl-landscape h1{font-family:Georgia,'Songti SC','SimSun',serif;font-size:clamp(36px,4.8vw,62px);font-weight:700;color:#26352e;line-height:1.45;margin-bottom:2vh;max-width:82%}
|
|
615
|
+
.tpl-landscape .quote{font-size:15px;color:#5c6b62;margin-bottom:4vh;max-width:64%;line-height:1.9}
|
|
616
|
+
.tpl-landscape ul.points{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:3.5vh}
|
|
617
|
+
.tpl-landscape ul.points li{font-size:14px;color:#26352e;display:flex;gap:10px;align-items:baseline}
|
|
618
|
+
.tpl-landscape ul.points .num{font-family:Georgia,'Songti SC','SimSun',serif;color:#b06a3b;font-weight:700;flex:none}
|
|
619
|
+
.tpl-landscape footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:3px;color:#5c6b62}
|
|
620
|
+
|
|
621
|
+
/* 32. watermark 水印公文：斜置大字背景水印 + 居中公文正文（颜色跟随主题令牌） */
|
|
622
|
+
.tpl-watermark{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;overflow:hidden}
|
|
623
|
+
.tpl-watermark .wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-size:min(28vw,340px);font-weight:900;letter-spacing:12px;color:var(--accent);opacity:.07;white-space:nowrap;pointer-events:none}
|
|
624
|
+
.tpl-watermark .doc{position:relative;width:min(78%,1020px);height:100%;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}
|
|
625
|
+
.tpl-watermark .head{text-align:center;border-bottom:2px solid var(--accent);padding-bottom:2.5vh;margin-bottom:3.5vh}
|
|
626
|
+
.tpl-watermark .head .badge{font-size:clamp(26px,3.4vw,42px);font-weight:900;letter-spacing:10px;color:var(--accent);line-height:1.3}
|
|
627
|
+
.tpl-watermark .head .meta{font-size:11px;letter-spacing:2px;color:var(--muted);margin-top:10px}
|
|
628
|
+
.tpl-watermark h1{font-size:clamp(24px,2.8vw,36px);font-weight:800;text-align:center;color:var(--text);margin-bottom:3vh;line-height:1.5}
|
|
629
|
+
.tpl-watermark .quote{font-size:15px;line-height:2;color:var(--text);text-indent:2em;margin-bottom:3vh}
|
|
630
|
+
.tpl-watermark ul.points{list-style:none;margin-bottom:3vh}
|
|
631
|
+
.tpl-watermark ul.points li{font-size:15px;line-height:2;color:var(--text);padding:8px 0;border-bottom:1px dashed var(--border);display:flex;gap:12px;align-items:baseline}
|
|
632
|
+
.tpl-watermark ul.points .num{flex:none;align-self:center;width:24px;height:24px;border:1.5px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--accent);font-weight:800}
|
|
633
|
+
.tpl-watermark footer{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--muted);gap:6px;margin-top:auto}
|
|
634
|
+
|
|
635
|
+
/* ▼ 用户模板 CSS 内嵌点（TPL_DIR 模板的 TPL_CSS 块插到本行之前，无用户模板则保持原样） */
|
|
636
|
+
/* ═══ 切换坞（可折叠）：模板坞（32 标签七组流派 + 用户模板）在顶部、主题坞（25 色点 5×5）在右下角；默认折叠成胶囊把手，点开选完自动收起 ═══ */
|
|
637
|
+
.dock-tpl{position:fixed;right:18px;top:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:1001}
|
|
638
|
+
.dock-theme{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:1001}
|
|
639
|
+
.dock-bar{display:flex;align-items:center;gap:8px;background:var(--panel-solid);border:1px solid var(--border);border-radius:999px;padding:7px 13px;color:var(--text);cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.3);transition:border-color .15s ease;font-family:inherit}
|
|
640
|
+
.dock-bar:hover{border-color:var(--accent)}
|
|
641
|
+
.dock-bar .bar-arrow{font-size:9px;color:var(--muted);transition:transform .2s ease}
|
|
642
|
+
.dock-tpl.fold .dock-body,.dock-theme.fold .dock-body{display:none}
|
|
643
|
+
.dock-tpl.fold .bar-arrow{transform:rotate(-90deg)}
|
|
644
|
+
.dock-theme.fold .bar-arrow{transform:rotate(-90deg)}
|
|
645
|
+
.dock-theme .bar-arrow{transform:rotate(180deg)}
|
|
646
|
+
.dock-body{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;background:var(--panel-solid);border:1px solid var(--border);border-radius:14px;padding:8px 10px;max-width:min(720px,calc(100vw - 36px));box-shadow:0 4px 18px rgba(0,0,0,.3)}
|
|
647
|
+
.dock-theme .dock-body{display:grid;grid-template-columns:repeat(5,18px);gap:11px 10px;border-radius:14px;padding:12px 13px;max-width:none}
|
|
648
|
+
.tp-sep{flex-basis:100%;font-size:10px;letter-spacing:2px;color:var(--muted);margin:5px 4px 1px;text-align:right}
|
|
649
|
+
.tp-sep::before{content:'— ';color:var(--accent)}
|
|
650
|
+
.bar-cur{width:17px;height:17px;pointer-events:none}
|
|
651
|
+
.th-tip{position:fixed;pointer-events:none;background:var(--panel-solid);border:1px solid var(--border);color:var(--text);font-size:11px;letter-spacing:1px;padding:4px 11px;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.3);z-index:1002;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;white-space:nowrap}
|
|
652
|
+
.th-tip.show{opacity:1;transform:none}
|
|
653
|
+
[data-theme="light"] .th-tip{box-shadow:0 10px 28px rgba(30,31,34,.16)}
|
|
654
|
+
.tp-btn{font-size:12px;font-family:inherit;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:999px;padding:5px 11px;cursor:pointer;letter-spacing:1px;transition:all .15s ease;white-space:nowrap}
|
|
655
|
+
.tp-btn:hover{color:var(--text);border-color:var(--border)}
|
|
656
|
+
.tp-btn.on{color:var(--accent);background:var(--tag-bg);border-color:var(--accent);font-weight:600}
|
|
657
|
+
.th-dot{width:18px;height:18px;border-radius:50%;cursor:pointer;border:1.5px solid rgba(127,127,127,.35);transition:transform .15s ease}
|
|
658
|
+
.th-dot:hover{transform:scale(1.18)}
|
|
659
|
+
.th-dot.on{border-color:var(--text)}
|
|
660
|
+
.th-dot[data-t="tech"]{background:#0ea5e9}
|
|
661
|
+
.th-dot[data-t="biz"]{background:#2563eb}
|
|
662
|
+
.th-dot[data-t="mono"]{background:#1e1f22}
|
|
663
|
+
.th-dot[data-t="light"]{background:#ffffff}
|
|
664
|
+
.th-dot[data-t="warm"]{background:#d97706}
|
|
665
|
+
.th-dot[data-t="ink"]{background:#b03a2e}
|
|
666
|
+
.th-dot[data-t="jade"]{background:#2dd4a7}
|
|
667
|
+
.th-dot[data-t="rose"]{background:#f472b6}
|
|
668
|
+
.th-dot[data-t="midnight"]{background:#e3b341}
|
|
669
|
+
.th-dot[data-t="violet"]{background:#a78bfa}
|
|
670
|
+
.th-dot[data-t="swiss"]{background:#e63946}
|
|
671
|
+
.th-dot[data-t="bauhaus"]{background:linear-gradient(135deg,#e63946 33%,#f4c20d 33% 66%,#1f5eff 66%)}
|
|
672
|
+
.th-dot[data-t="memphis"]{background:linear-gradient(135deg,#ff7bac 50%,#35d0ba 50%)}
|
|
673
|
+
.th-dot[data-t="morandi"]{background:linear-gradient(135deg,#c9a9a6 50%,#a3b18a 50%)}
|
|
674
|
+
.th-dot[data-t="nordic"]{background:linear-gradient(135deg,#b08d57 50%,#6b7f5e 50%)}
|
|
675
|
+
.th-dot[data-t="artdeco"]{background:linear-gradient(135deg,#d4af37 50%,#722f37 50%)}
|
|
676
|
+
.th-dot[data-t="noir"]{background:linear-gradient(135deg,#f2f2f2 50%,#1c1c1c 50%)}
|
|
677
|
+
.th-dot[data-t="classicblue"]{background:#0f4c81}
|
|
678
|
+
.th-dot[data-t="pop"]{background:linear-gradient(135deg,#f7d32b 50%,#e63946 50%)}
|
|
679
|
+
.th-dot[data-t="retro"]{background:linear-gradient(135deg,#f3e5cf 50%,#a63d2f 50%)}
|
|
680
|
+
.th-dot[data-t="coral"]{background:#ff6f61}
|
|
681
|
+
.th-dot[data-t="acid"]{background:#c6ff00}
|
|
682
|
+
.th-dot[data-t="cyber"]{background:#00e5ff}
|
|
683
|
+
.th-dot[data-t="cream"]{background:#c8432e}
|
|
684
|
+
.th-dot[data-t="academic"]{background:#1a3c6e}
|
|
685
|
+
|
|
686
|
+
/* ═══ 入场动画 + 截图模式 + 响应式 ═══ */
|
|
687
|
+
.anim{animation:riseIn .55s ease both;opacity:0}
|
|
688
|
+
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
|
|
689
|
+
html[data-shot] .anim{animation:none!important;opacity:1!important;transform:none!important}
|
|
690
|
+
html[data-shot] .dock-tpl,html[data-shot] .dock-theme{display:none!important}
|
|
691
|
+
@media (max-width:680px){
|
|
692
|
+
.tpl-classic{width:86%}.tpl-classic ul.points{grid-template-columns:1fr}
|
|
693
|
+
.tpl-magazine .cols{grid-template-columns:1fr;gap:28px}
|
|
694
|
+
.tpl-dash{grid-template-columns:1fr;gap:36px}
|
|
695
|
+
.tpl-grid .cards{grid-template-columns:1fr}
|
|
696
|
+
.tpl-hero ul.points{flex-direction:column;gap:12px}
|
|
697
|
+
.tp-btn{font-size:11px;padding:4px 8px}
|
|
698
|
+
.dock-body{max-width:calc(100vw - 36px)}
|
|
699
|
+
}
|
|
700
|
+
</style>
|
|
701
|
+
</head>
|
|
702
|
+
<body>
|
|
703
|
+
<div class="stage" id="stage"></div>
|
|
704
|
+
<div class="dock-tpl fold" id="tplDock">
|
|
705
|
+
<button class="dock-bar" id="tplBar" type="button" title="模板切换（点击展开/收起）"><span class="bar-tpl-name">模板</span><span class="bar-arrow">▾</span></button>
|
|
706
|
+
<div class="dock-body">
|
|
707
|
+
<span class="tp-sep">现代主义</span>
|
|
708
|
+
<button class="tp-btn on" data-tpl="classic" title="经典舞台">经典</button>
|
|
709
|
+
<button class="tp-btn" data-tpl="minimal" title="极简留白">极简</button>
|
|
710
|
+
<button class="tp-btn" data-tpl="swiss" title="瑞士国际主义">瑞士</button>
|
|
711
|
+
<button class="tp-btn" data-tpl="window" title="荷兰视窗分割">视窗</button>
|
|
712
|
+
<span class="tp-sep">编辑出版</span>
|
|
713
|
+
<button class="tp-btn" data-tpl="magazine" title="杂志社论">杂志</button>
|
|
714
|
+
<button class="tp-btn" data-tpl="editorial" title="编辑刊跨栏">编辑刊</button>
|
|
715
|
+
<button class="tp-btn" data-tpl="typo" title="大字报纯排版">大字报</button>
|
|
716
|
+
<button class="tp-btn" data-tpl="newspaper" title="报纸头版">报纸</button>
|
|
717
|
+
<span class="tp-sep">数据商务</span>
|
|
718
|
+
<button class="tp-btn" data-tpl="dashboard" title="数据仪表">数据</button>
|
|
719
|
+
<button class="tp-btn" data-tpl="grid" title="卡片栅格">栅格</button>
|
|
720
|
+
<button class="tp-btn" data-tpl="timeline" title="时间叙事">时间线</button>
|
|
721
|
+
<button class="tp-btn" data-tpl="hero" title="巨幕大字">巨幕</button>
|
|
722
|
+
<span class="tp-sep">艺术流派</span>
|
|
723
|
+
<button class="tp-btn" data-tpl="bauhaus" title="包豪斯几何">包豪斯</button>
|
|
724
|
+
<button class="tp-btn" data-tpl="mondrian" title="蒙德里安色块">蒙德里安</button>
|
|
725
|
+
<button class="tp-btn" data-tpl="memphis" title="孟菲斯撞色">孟菲斯</button>
|
|
726
|
+
<button class="tp-btn" data-tpl="exhibit" title="展览海报展签">展览</button>
|
|
727
|
+
<button class="tp-btn" data-tpl="popart" title="波普艺术">波普</button>
|
|
728
|
+
<button class="tp-btn" data-tpl="opart" title="欧普视错觉">欧普</button>
|
|
729
|
+
<button class="tp-btn" data-tpl="artnouveau" title="新艺术装饰">新艺术</button>
|
|
730
|
+
<span class="tp-sep">国风雅韵</span>
|
|
731
|
+
<button class="tp-btn" data-tpl="inkwash" title="水墨留白">水墨</button>
|
|
732
|
+
<button class="tp-btn" data-tpl="palace" title="红金宫廷">宫廷</button>
|
|
733
|
+
<button class="tp-btn" data-tpl="landscape" title="青绿山水">青绿</button>
|
|
734
|
+
<span class="tp-sep">先锋实验</span>
|
|
735
|
+
<button class="tp-btn" data-tpl="brutalist" title="新粗野主义">粗野</button>
|
|
736
|
+
<button class="tp-btn" data-tpl="acid" title="酸性设计">酸性</button>
|
|
737
|
+
<button class="tp-btn" data-tpl="glitch" title="故障艺术">故障</button>
|
|
738
|
+
<button class="tp-btn" data-tpl="vaporwave" title="蒸汽波">蒸汽波</button>
|
|
739
|
+
<button class="tp-btn" data-tpl="cyber" title="赛博朋克">赛博</button>
|
|
740
|
+
<span class="tp-sep">场景专用</span>
|
|
741
|
+
<button class="tp-btn" data-tpl="academic" title="学术墙报">学术</button>
|
|
742
|
+
<button class="tp-btn" data-tpl="recruit" title="招聘海报">招聘</button>
|
|
743
|
+
<button class="tp-btn" data-tpl="invitation" title="邀请函">邀请函</button>
|
|
744
|
+
<button class="tp-btn" data-tpl="notice" title="公告通知">公告</button>
|
|
745
|
+
<button class="tp-btn" data-tpl="watermark" title="水印公文">水印</button>
|
|
746
|
+
<!-- ▼ 用户模板按钮内嵌点（「我的模板」分组标 + 用户按钮插到本行之后，无用户模板则保持原样） -->
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="dock-theme fold" id="themeDock">
|
|
750
|
+
<div class="dock-body">
|
|
751
|
+
<span class="th-dot on" data-t="tech" title="深蓝科技"></span>
|
|
752
|
+
<span class="th-dot" data-t="biz" title="浅色商务"></span>
|
|
753
|
+
<span class="th-dot" data-t="mono" title="IDEA 黑亮"></span>
|
|
754
|
+
<span class="th-dot" data-t="light" title="IDEA 白亮"></span>
|
|
755
|
+
<span class="th-dot" data-t="warm" title="温暖渐变"></span>
|
|
756
|
+
<span class="th-dot" data-t="ink" title="水墨国风"></span>
|
|
757
|
+
<span class="th-dot" data-t="jade" title="翡翠绿"></span>
|
|
758
|
+
<span class="th-dot" data-t="rose" title="玫瑰金"></span>
|
|
759
|
+
<span class="th-dot" data-t="midnight" title="午夜金"></span>
|
|
760
|
+
<span class="th-dot" data-t="violet" title="霓虹紫"></span>
|
|
761
|
+
<span class="th-dot" data-t="swiss" title="瑞士红黑"></span>
|
|
762
|
+
<span class="th-dot" data-t="bauhaus" title="包豪斯三原色"></span>
|
|
763
|
+
<span class="th-dot" data-t="memphis" title="孟菲斯撞色"></span>
|
|
764
|
+
<span class="th-dot" data-t="morandi" title="莫兰迪高级灰"></span>
|
|
765
|
+
<span class="th-dot" data-t="nordic" title="北欧浅木"></span>
|
|
766
|
+
<span class="th-dot" data-t="artdeco" title="装饰艺术黑金"></span>
|
|
767
|
+
<span class="th-dot" data-t="noir" title="黑白电影"></span>
|
|
768
|
+
<span class="th-dot" data-t="classicblue" title="经典蓝"></span>
|
|
769
|
+
<span class="th-dot" data-t="pop" title="波普撞色"></span>
|
|
770
|
+
<span class="th-dot" data-t="retro" title="复古胶片"></span>
|
|
771
|
+
<span class="th-dot" data-t="coral" title="珊瑚橙"></span>
|
|
772
|
+
<span class="th-dot" data-t="acid" title="酸性荧光"></span>
|
|
773
|
+
<span class="th-dot" data-t="cyber" title="赛博霓虹"></span>
|
|
774
|
+
<span class="th-dot" data-t="cream" title="奶油纸"></span>
|
|
775
|
+
<span class="th-dot" data-t="academic" title="学术蓝"></span>
|
|
776
|
+
</div>
|
|
777
|
+
<button class="dock-bar" id="thBar" type="button" title="主题切换（点击展开/收起）"><span class="th-dot bar-cur" data-t="tech"></span><span class="bar-tpl-name" id="thName">主题</span><span class="bar-arrow">▾</span></button>
|
|
778
|
+
</div>
|
|
779
|
+
<script>
|
|
780
|
+
(function(){
|
|
781
|
+
/* ═══════════ 数据区（生成海报时只替换此对象 + <title> + poster-id，其余一律不动） ═══════════ */
|
|
782
|
+
var DATA = {
|
|
783
|
+
tag: "ONE PAGER",
|
|
784
|
+
title: "AI 改变工作",
|
|
785
|
+
quote: "让机器做重复的事，让人做有温度的事",
|
|
786
|
+
points: [
|
|
787
|
+
{ t: "重塑流程，把琐碎交给算法" },
|
|
788
|
+
{ t: "释放创造，把时间还给思考" },
|
|
789
|
+
{ t: "数据驱动，把决策交给证据" }
|
|
790
|
+
],
|
|
791
|
+
footnote: "",
|
|
792
|
+
kpi: "82%"
|
|
793
|
+
};
|
|
794
|
+
/* ═══════════ 三十二套布局模板（只描述结构与类名，颜色一律走主题令牌；TPL_DIR 用户模板生成时并入 TPLS） ═══════════ */
|
|
795
|
+
function esc(s){ return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
796
|
+
function N(i){ return String(i+1).padStart(2,'0'); }
|
|
797
|
+
var F = 'GENERATED BY AI TEAM';
|
|
798
|
+
var TPL = {
|
|
799
|
+
classic: function(){
|
|
800
|
+
var lis = DATA.points.map(function(p){ return '<li class="anim"><span class="dot"></span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
801
|
+
return '<div class="tpl-classic">'
|
|
802
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
803
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
804
|
+
+ '<div class="divider anim"></div>'
|
|
805
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
806
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
807
|
+
+ '<footer class="anim">'+F+'</footer>'
|
|
808
|
+
+ (DATA.footnote ? '<div class="footnote anim" style="font-size:11px;color:var(--muted);margin-top:8px">'+esc(DATA.footnote)+'</div>' : '')
|
|
809
|
+
+ '</div>';
|
|
810
|
+
},
|
|
811
|
+
minimal: function(){
|
|
812
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
813
|
+
return '<div class="tpl-minimal">'
|
|
814
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
815
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
816
|
+
+ '<div class="rule anim"></div>'
|
|
817
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
818
|
+
+ '<ol class="points anim">'+lis+'</ol>'
|
|
819
|
+
+ '<div class="meta anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></div>'
|
|
820
|
+
+ '</div>';
|
|
821
|
+
},
|
|
822
|
+
magazine: function(){
|
|
823
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
824
|
+
return '<div class="tpl-magazine">'
|
|
825
|
+
+ '<div class="masthead anim"><span>'+esc(DATA.tag)+'</span><span>ISSUE 01</span></div>'
|
|
826
|
+
+ '<div class="cols">'
|
|
827
|
+
+ '<div><h1 class="anim">'+esc(DATA.title)+'</h1><div class="quote anim">'+esc(DATA.quote)+'</div></div>'
|
|
828
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
829
|
+
+ '</div>'
|
|
830
|
+
+ '<div class="footbar anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></div>'
|
|
831
|
+
+ '</div>';
|
|
832
|
+
},
|
|
833
|
+
hero: function(){
|
|
834
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
835
|
+
return '<div class="tpl-hero">'
|
|
836
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
837
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
838
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
839
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
840
|
+
+ '<footer class="anim">'+F+(DATA.footnote ? ' · '+esc(DATA.footnote) : '')+'</footer>'
|
|
841
|
+
+ '</div>';
|
|
842
|
+
},
|
|
843
|
+
timeline: function(){
|
|
844
|
+
var rows = DATA.points.map(function(p,i){
|
|
845
|
+
return '<div class="row"><div class="mid"><span class="dot anim"></span></div>'
|
|
846
|
+
+ '<div class="card anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></div></div>';
|
|
847
|
+
}).join('');
|
|
848
|
+
return '<div class="tpl-timeline">'
|
|
849
|
+
+ '<div class="head"><h1 class="anim">'+esc(DATA.title)+'</h1><div class="quote anim">'+esc(DATA.quote)+'</div></div>'
|
|
850
|
+
+ '<div class="track">'+rows+'</div>'
|
|
851
|
+
+ '<footer class="anim">'+F+(DATA.footnote ? ' · '+esc(DATA.footnote) : '')+'</footer>'
|
|
852
|
+
+ '</div>';
|
|
853
|
+
},
|
|
854
|
+
grid: function(){
|
|
855
|
+
var cards = DATA.points.map(function(p,i){
|
|
856
|
+
var w = (DATA.points.length === 5 && i === 4) ? ' wide' : '';
|
|
857
|
+
return '<div class="card anim'+w+'"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></div>';
|
|
858
|
+
}).join('');
|
|
859
|
+
return '<div class="tpl-grid">'
|
|
860
|
+
+ '<div class="head"><h1 class="anim">'+esc(DATA.title)+'</h1><div class="quote anim">'+esc(DATA.quote)+'</div></div>'
|
|
861
|
+
+ '<div class="cards">'+cards+'</div>'
|
|
862
|
+
+ '<footer class="anim">'+F+(DATA.footnote ? ' · '+esc(DATA.footnote) : '')+'</footer>'
|
|
863
|
+
+ '</div>';
|
|
864
|
+
},
|
|
865
|
+
dashboard: function(){
|
|
866
|
+
var pct = parseInt(String(DATA.kpi||'82%')) || 82;
|
|
867
|
+
var first = DATA.points.slice(0,3);
|
|
868
|
+
var rest = DATA.points.slice(3);
|
|
869
|
+
var widths = [82,66,50];
|
|
870
|
+
var bars = first.map(function(p,i){
|
|
871
|
+
return '<div class="bar anim"><div class="row"><span class="t">'+esc(p.t)+'</span><span class="pct">'+widths[i]+'%</span></div>'
|
|
872
|
+
+ '<div class="track"><div class="fill" style="width:'+widths[i]+'%"></div></div></div>';
|
|
873
|
+
}).join('');
|
|
874
|
+
var extra = rest.map(function(p,i){
|
|
875
|
+
return '<li class="anim"><span class="num">'+N(i+3)+'</span><span class="t">'+esc(p.t)+'</span></li>';
|
|
876
|
+
}).join('');
|
|
877
|
+
return '<div class="tpl-dash">'
|
|
878
|
+
+ '<div class="kpi">'
|
|
879
|
+
+ '<div class="ring anim" style="background:conic-gradient(var(--accent) 0 '+pct+'%,var(--panel-solid) '+pct+'% 100%)"><span class="val">'+esc(DATA.kpi||'82%')+'</span><span class="lab">'+esc(DATA.tag)+'</span></div>'
|
|
880
|
+
+ '<div class="bars">'+bars+'</div>'
|
|
881
|
+
+ '</div>'
|
|
882
|
+
+ '<div class="side">'
|
|
883
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
884
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
885
|
+
+ (extra ? '<ul class="extra">'+extra+'</ul>' : '')
|
|
886
|
+
+ '<div class="foot anim">'+F+(DATA.footnote ? ' · '+esc(DATA.footnote) : '')+'</div>'
|
|
887
|
+
+ '</div>'
|
|
888
|
+
+ '</div>';
|
|
889
|
+
},
|
|
890
|
+
brutalist: function(){
|
|
891
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
892
|
+
return '<div class="tpl-brutal">'
|
|
893
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
894
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
895
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
896
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
897
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
898
|
+
+ '</div>';
|
|
899
|
+
},
|
|
900
|
+
swiss: function(){
|
|
901
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
902
|
+
return '<div class="tpl-swiss">'
|
|
903
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
904
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
905
|
+
+ '<div class="rule anim"></div>'
|
|
906
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
907
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
908
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
909
|
+
+ '</div>';
|
|
910
|
+
},
|
|
911
|
+
bauhaus: function(){
|
|
912
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
913
|
+
return '<div class="tpl-bauhaus">'
|
|
914
|
+
+ '<div class="geo anim"><span class="c"></span><span class="s"></span><span class="t"></span></div>'
|
|
915
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
916
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
917
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
918
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
919
|
+
+ '<div class="footbar anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></div>'
|
|
920
|
+
+ '</div>';
|
|
921
|
+
},
|
|
922
|
+
mondrian: function(){
|
|
923
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span>'+esc(p.t)+'</span></li>'; }).join('');
|
|
924
|
+
return '<div class="tpl-mondrian">'
|
|
925
|
+
+ '<div class="cell main"><div class="badge anim">'+esc(DATA.tag)+'</div><h1 class="anim">'+esc(DATA.title)+'</h1><div class="quote anim">'+esc(DATA.quote)+'</div></div>'
|
|
926
|
+
+ '<div class="cell side"><ul class="anim">'+lis+'</ul></div>'
|
|
927
|
+
+ '<div class="cell band anim"><span class="lab">'+F+'</span><span class="v">'+esc(DATA.footnote||'')+'</span></div>'
|
|
928
|
+
+ '</div>';
|
|
929
|
+
},
|
|
930
|
+
editorial: function(){
|
|
931
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
932
|
+
return '<div class="tpl-editorial">'
|
|
933
|
+
+ '<div class="masthead anim"><span>'+esc(DATA.tag)+'</span><b>SPECIAL EDITION</b></div>'
|
|
934
|
+
+ '<div class="cols">'
|
|
935
|
+
+ '<div><h1 class="anim">'+esc(DATA.title)+'</h1><div class="quote anim">'+esc(DATA.quote)+'</div></div>'
|
|
936
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
937
|
+
+ '</div>'
|
|
938
|
+
+ '<div class="footbar anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></div>'
|
|
939
|
+
+ '</div>';
|
|
940
|
+
},
|
|
941
|
+
typo: function(){
|
|
942
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
943
|
+
return '<div class="tpl-typo">'
|
|
944
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
945
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
946
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
947
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
948
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
949
|
+
+ '</div>';
|
|
950
|
+
},
|
|
951
|
+
memphis: function(){
|
|
952
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span>'+esc(p.t)+'</span></li>'; }).join('');
|
|
953
|
+
return '<div class="tpl-memphis">'
|
|
954
|
+
+ '<div class="dots"></div>'
|
|
955
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
956
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
957
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
958
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
959
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
960
|
+
+ '</div>';
|
|
961
|
+
},
|
|
962
|
+
exhibit: function(){
|
|
963
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
964
|
+
return '<div class="tpl-exhibit">'
|
|
965
|
+
+ '<div class="wall-label anim">'+esc(DATA.tag)+'</div>'
|
|
966
|
+
+ '<div class="title-block"><h1 class="anim">'+esc(DATA.title)+'</h1><span class="yr anim">2026</span></div>'
|
|
967
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
968
|
+
+ '<div class="label-card anim"><div class="lab">EXHIBIT NOTES</div><ul>'+lis+'</ul></div>'
|
|
969
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
970
|
+
+ '</div>';
|
|
971
|
+
},
|
|
972
|
+
window: function(){
|
|
973
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
974
|
+
return '<div class="tpl-window">'
|
|
975
|
+
+ '<div class="win w-main"><div class="badge anim">'+esc(DATA.tag)+'</div><h1 class="anim">'+esc(DATA.title)+'</h1><ul class="anim">'+lis+'</ul></div>'
|
|
976
|
+
+ '<div class="win w-top"><div class="k anim">'+esc(DATA.tag)+'</div><div class="v anim">'+esc(DATA.quote)+'</div></div>'
|
|
977
|
+
+ '<div class="win w-bottom"><div class="v anim">'+esc(DATA.footnote||'')+'</div><footer class="anim">'+F+'</footer></div>'
|
|
978
|
+
+ '</div>';
|
|
979
|
+
}
|
|
980
|
+
};
|
|
981
|
+
|
|
982
|
+
/* ▼ 用户模板渲染函数内嵌点（TPL_DIR 模板的 TPL_FN 块插到本行之后，无用户模板则保持原样） */
|
|
983
|
+
|
|
984
|
+
TPL['newspaper'] = function(){
|
|
985
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
986
|
+
return '<div class="tpl-newspaper">'
|
|
987
|
+
+ '<div class="mast anim"><h1>'+esc(DATA.tag)+'</h1><div class="meta"><span>VOL.01</span><span>MORNING EDITION</span></div></div>'
|
|
988
|
+
+ '<div class="headline anim">'+esc(DATA.title)+'</div>'
|
|
989
|
+
+ '<div class="cols"><div class="lead anim">'+esc(DATA.quote)+'</div><ul class="anim">'+lis+'</ul></div>'
|
|
990
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
991
|
+
+ '</div>';
|
|
992
|
+
};
|
|
993
|
+
TPL['popart'] = function(){
|
|
994
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
995
|
+
return '<div class="tpl-popart">'
|
|
996
|
+
+ '<div class="halftone"></div>'
|
|
997
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
998
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
999
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1000
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1001
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1002
|
+
+ '</div>';
|
|
1003
|
+
};
|
|
1004
|
+
TPL['opart'] = function(){
|
|
1005
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1006
|
+
return '<div class="tpl-opart">'
|
|
1007
|
+
+ '<div class="rays"></div>'
|
|
1008
|
+
+ '<div class="core"><div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1009
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1010
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1011
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1012
|
+
+ '<footer class="anim">'+F+(DATA.footnote ? ' · '+esc(DATA.footnote) : '')+'</footer></div>'
|
|
1013
|
+
+ '</div>';
|
|
1014
|
+
};
|
|
1015
|
+
TPL['artnouveau'] = function(){
|
|
1016
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1017
|
+
return '<div class="tpl-artnouveau">'
|
|
1018
|
+
+ '<div class="arch">'
|
|
1019
|
+
+ '<div class="ornament anim">❧</div>'
|
|
1020
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1021
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1022
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1023
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1024
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1025
|
+
+ '</div>'
|
|
1026
|
+
+ '</div>';
|
|
1027
|
+
};
|
|
1028
|
+
TPL['acid'] = function(){
|
|
1029
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span>'+esc(p.t)+'</span></li>'; }).join('');
|
|
1030
|
+
return '<div class="tpl-acid">'
|
|
1031
|
+
+ '<div class="liquid"></div>'
|
|
1032
|
+
+ '<div class="blob"></div>'
|
|
1033
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1034
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1035
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1036
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1037
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1038
|
+
+ '</div>';
|
|
1039
|
+
};
|
|
1040
|
+
TPL['glitch'] = function(){
|
|
1041
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1042
|
+
return '<div class="tpl-glitch">'
|
|
1043
|
+
+ '<div class="bars"></div>'
|
|
1044
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1045
|
+
+ '<h1 class="anim" data-t="'+esc(DATA.title)+'">'+esc(DATA.title)+'</h1>'
|
|
1046
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1047
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1048
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1049
|
+
+ '</div>';
|
|
1050
|
+
};
|
|
1051
|
+
TPL['vaporwave'] = function(){
|
|
1052
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1053
|
+
return '<div class="tpl-vaporwave">'
|
|
1054
|
+
+ '<div class="sun"></div>'
|
|
1055
|
+
+ '<div class="grid"></div>'
|
|
1056
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1057
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1058
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1059
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1060
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1061
|
+
+ '</div>';
|
|
1062
|
+
};
|
|
1063
|
+
TPL['cyber'] = function(){
|
|
1064
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1065
|
+
return '<div class="tpl-cyber">'
|
|
1066
|
+
+ '<div class="scan"></div>'
|
|
1067
|
+
+ '<div class="frame"><div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1068
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1069
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1070
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1071
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer></div>'
|
|
1072
|
+
+ '</div>';
|
|
1073
|
+
};
|
|
1074
|
+
TPL['academic'] = function(){
|
|
1075
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1076
|
+
return '<div class="tpl-academic">'
|
|
1077
|
+
+ '<div class="banner anim"><h1>'+esc(DATA.title)+'</h1><div class="sub">'+esc(DATA.tag)+'</div></div>'
|
|
1078
|
+
+ '<div class="cols">'
|
|
1079
|
+
+ '<div class="col anim"><h2>ABSTRACT</h2><p class="quote">'+esc(DATA.quote)+'</p><div class="fig">FIGURE · 图表位</div></div>'
|
|
1080
|
+
+ '<div class="col anim"><h2>KEY FINDINGS</h2><ul class="points">'+lis+'</ul></div>'
|
|
1081
|
+
+ '<div class="col anim"><h2>CONCLUSION</h2><p>'+esc(DATA.footnote||DATA.quote)+'</p><div class="fig">QR · 引用位</div></div>'
|
|
1082
|
+
+ '</div>'
|
|
1083
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.tag)+' · '+F+'</span></footer>'
|
|
1084
|
+
+ '</div>';
|
|
1085
|
+
};
|
|
1086
|
+
TPL['recruit'] = function(){
|
|
1087
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1088
|
+
return '<div class="tpl-recruit">'
|
|
1089
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1090
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1091
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1092
|
+
+ '<div class="chips anim"><span>高薪</span><span>期权</span><span>弹性</span></div>'
|
|
1093
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1094
|
+
+ '<div class="cta anim">立即投递</div>'
|
|
1095
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1096
|
+
+ '</div>';
|
|
1097
|
+
};
|
|
1098
|
+
TPL['invitation'] = function(){
|
|
1099
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1100
|
+
return '<div class="tpl-invitation">'
|
|
1101
|
+
+ '<div class="card">'
|
|
1102
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1103
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1104
|
+
+ '<div class="rule anim">✿</div>'
|
|
1105
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1106
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1107
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1108
|
+
+ '</div>'
|
|
1109
|
+
+ '</div>';
|
|
1110
|
+
};
|
|
1111
|
+
TPL['notice'] = function(){
|
|
1112
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span>'+esc(p.t)+'</li>'; }).join('');
|
|
1113
|
+
return '<div class="tpl-notice">'
|
|
1114
|
+
+ '<div class="head anim"><div class="badge">'+esc(DATA.tag)+'</div><div class="meta">'+F+'</div></div>'
|
|
1115
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1116
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1117
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1118
|
+
+ '<footer class="anim"><span>'+esc(DATA.footnote||'')+'</span><span>'+F+'</span></footer>'
|
|
1119
|
+
+ '</div>';
|
|
1120
|
+
};
|
|
1121
|
+
TPL['inkwash'] = function(){
|
|
1122
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
1123
|
+
return '<div class="tpl-inkwash">'
|
|
1124
|
+
+ '<div class="mt m1"></div><div class="mt m2"></div><div class="mt m3"></div><div class="sun"></div>'
|
|
1125
|
+
+ '<div class="content">'
|
|
1126
|
+
+ '<div class="seal anim">'+esc(DATA.tag)+'</div>'
|
|
1127
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1128
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1129
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1130
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1131
|
+
+ '</div>'
|
|
1132
|
+
+ '</div>';
|
|
1133
|
+
};
|
|
1134
|
+
TPL['palace'] = function(){
|
|
1135
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
1136
|
+
return '<div class="tpl-palace">'
|
|
1137
|
+
+ '<div class="frame">'
|
|
1138
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1139
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1140
|
+
+ '<div class="divider anim">✼</div>'
|
|
1141
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1142
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1143
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1144
|
+
+ '</div>'
|
|
1145
|
+
+ '</div>';
|
|
1146
|
+
};
|
|
1147
|
+
TPL['landscape'] = function(){
|
|
1148
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
1149
|
+
return '<div class="tpl-landscape">'
|
|
1150
|
+
+ '<div class="peak p1"></div><div class="peak p2"></div><div class="peak p3"></div><div class="peak p4"></div>'
|
|
1151
|
+
+ '<div class="content">'
|
|
1152
|
+
+ '<div class="badge anim">'+esc(DATA.tag)+'</div>'
|
|
1153
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1154
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1155
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1156
|
+
+ '<footer class="anim"><span>'+F+'</span><span>'+esc(DATA.footnote||'')+'</span></footer>'
|
|
1157
|
+
+ '</div>'
|
|
1158
|
+
+ '</div>';
|
|
1159
|
+
};
|
|
1160
|
+
TPL['watermark'] = function(){
|
|
1161
|
+
var lis = DATA.points.map(function(p,i){ return '<li class="anim"><span class="num">'+N(i)+'</span><span class="t">'+esc(p.t)+'</span></li>'; }).join('');
|
|
1162
|
+
return '<div class="tpl-watermark">'
|
|
1163
|
+
+ '<div class="wm">'+esc(DATA.title)+'</div>'
|
|
1164
|
+
+ '<div class="doc">'
|
|
1165
|
+
+ '<div class="head anim"><div class="badge">'+esc(DATA.tag)+'</div><div class="meta">'+F+'</div></div>'
|
|
1166
|
+
+ '<h1 class="anim">'+esc(DATA.title)+'</h1>'
|
|
1167
|
+
+ '<div class="quote anim">'+esc(DATA.quote)+'</div>'
|
|
1168
|
+
+ '<ul class="points anim">'+lis+'</ul>'
|
|
1169
|
+
+ '<footer class="anim"><span>'+esc(DATA.footnote||'')+'</span><span>'+F+'</span></footer>'
|
|
1170
|
+
+ '</div>'
|
|
1171
|
+
+ '</div>';
|
|
1172
|
+
};
|
|
1173
|
+
|
|
1174
|
+
/* ═══════════ 页面 ID 自愈（沿用旧版机制） ═══════════ */
|
|
1175
|
+
var KEY = 'sf-heal:' + location.pathname;
|
|
1176
|
+
var m = document.querySelector('meta[name="poster-id"]');
|
|
1177
|
+
var ok = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(m ? m.content : '');
|
|
1178
|
+
var ID;
|
|
1179
|
+
if (ok) { ID = m.content; }
|
|
1180
|
+
else {
|
|
1181
|
+
var v = localStorage.getItem(KEY);
|
|
1182
|
+
if (!v) { v = crypto.randomUUID(); localStorage.setItem(KEY, v); }
|
|
1183
|
+
ID = v;
|
|
1184
|
+
m.setAttribute('content', v);
|
|
1185
|
+
console.warn('[poster] 非法 id meta 已自愈为 ' + v);
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
/* ═══════════ 主题换肤（十套配色） ═══════════ */
|
|
1189
|
+
var THEMES = ['tech','biz','mono','light','warm','ink','jade','rose','midnight','violet','swiss','bauhaus','memphis','morandi','nordic','artdeco','noir','classicblue','pop','retro','coral','acid','cyber','cream','academic'];
|
|
1190
|
+
var THEME_KEY = 'poster:' + ID + '-theme';
|
|
1191
|
+
var savedTheme = null;
|
|
1192
|
+
try { savedTheme = localStorage.getItem(THEME_KEY); } catch(e) {}
|
|
1193
|
+
if (savedTheme && THEMES.indexOf(savedTheme) !== -1) document.documentElement.setAttribute('data-theme', savedTheme);
|
|
1194
|
+
var curT = document.documentElement.getAttribute('data-theme');
|
|
1195
|
+
if (THEMES.indexOf(curT) === -1) { curT = 'tech'; document.documentElement.setAttribute('data-theme', curT); }
|
|
1196
|
+
var TH_DOTS = document.querySelectorAll('#themeDock .dock-body .th-dot');
|
|
1197
|
+
var TH_LABELS = {};
|
|
1198
|
+
TH_DOTS.forEach(function(d){ TH_LABELS[d.getAttribute('data-t')] = d.getAttribute('title') || ''; });
|
|
1199
|
+
var thTip = document.createElement('div');
|
|
1200
|
+
thTip.className = 'th-tip';
|
|
1201
|
+
document.body.appendChild(thTip);
|
|
1202
|
+
function updateThBar(){
|
|
1203
|
+
var bc = document.querySelector('#thBar .bar-cur'); if (bc) bc.setAttribute('data-t', curT);
|
|
1204
|
+
var tn = document.getElementById('thName'); if (tn) tn.textContent = '主题 · ' + (TH_LABELS[curT] || '自定义');
|
|
1205
|
+
}
|
|
1206
|
+
TH_DOTS.forEach(function(d){ d.classList.toggle('on', d.getAttribute('data-t') === curT); });
|
|
1207
|
+
TH_DOTS.forEach(function(d){
|
|
1208
|
+
d.addEventListener('click', function(){
|
|
1209
|
+
var t = d.getAttribute('data-t');
|
|
1210
|
+
curT = t;
|
|
1211
|
+
document.documentElement.setAttribute('data-theme', t);
|
|
1212
|
+
try { localStorage.setItem(THEME_KEY, t); } catch(e) {}
|
|
1213
|
+
TH_DOTS.forEach(function(x){ x.classList.toggle('on', x === d); });
|
|
1214
|
+
updateThBar();
|
|
1215
|
+
document.getElementById('themeDock').classList.add('fold');
|
|
1216
|
+
});
|
|
1217
|
+
d.addEventListener('mouseenter', function(){
|
|
1218
|
+
var name = TH_LABELS[d.getAttribute('data-t')];
|
|
1219
|
+
if (!name) return;
|
|
1220
|
+
thTip.textContent = name;
|
|
1221
|
+
thTip.classList.add('show');
|
|
1222
|
+
var r = d.getBoundingClientRect();
|
|
1223
|
+
var tw = thTip.offsetWidth;
|
|
1224
|
+
thTip.style.left = Math.min(Math.max(r.left + r.width / 2 - tw / 2, 8), window.innerWidth - tw - 8) + 'px';
|
|
1225
|
+
thTip.style.top = Math.max(r.top - 34, 8) + 'px';
|
|
1226
|
+
});
|
|
1227
|
+
d.addEventListener('mouseleave', function(){ thTip.classList.remove('show'); });
|
|
1228
|
+
});
|
|
1229
|
+
|
|
1230
|
+
/* ═══════════ 模板切换（三十二套布局七组流派随点随换，记忆上次选择） ═══════════ */
|
|
1231
|
+
var TPLS = ['classic','minimal','magazine','hero','timeline','grid','dashboard','brutalist','swiss','bauhaus','mondrian','editorial','typo','memphis','exhibit','window','newspaper','popart','opart','artnouveau','acid','glitch','vaporwave','cyber','academic','recruit','invitation','notice','inkwash','palace','landscape','watermark']; /* ▼ 用户模板 name 内嵌点：数组末尾（'watermark' 之后）追加 ,'{name}'，无用户模板则保持原样 */
|
|
1232
|
+
var TPL_KEY = 'poster:' + ID + '-tpl';
|
|
1233
|
+
var savedTpl = null;
|
|
1234
|
+
try { savedTpl = localStorage.getItem(TPL_KEY); } catch(e) {}
|
|
1235
|
+
if (savedTpl && TPLS.indexOf(savedTpl) !== -1) document.documentElement.setAttribute('data-template', savedTpl);
|
|
1236
|
+
var curP = document.documentElement.getAttribute('data-template');
|
|
1237
|
+
if (TPLS.indexOf(curP) === -1) { curP = 'classic'; document.documentElement.setAttribute('data-template', curP); }
|
|
1238
|
+
|
|
1239
|
+
function render(){
|
|
1240
|
+
var stage = document.getElementById('stage');
|
|
1241
|
+
stage.innerHTML = TPL[curP] ? TPL[curP]() : TPL.classic();
|
|
1242
|
+
var els = stage.querySelectorAll('.anim');
|
|
1243
|
+
els.forEach(function(e,i){ e.style.animationDelay = (i * 0.12) + 's'; });
|
|
1244
|
+
setTimeout(function(){ els.forEach(function(e){ e.style.opacity = '1'; e.style.transform = 'none'; }); }, 2000);
|
|
1245
|
+
fit();
|
|
1246
|
+
}
|
|
1247
|
+
document.querySelectorAll('.tp-btn').forEach(function(b){
|
|
1248
|
+
b.classList.toggle('on', b.getAttribute('data-tpl') === curP);
|
|
1249
|
+
b.addEventListener('click', function(){
|
|
1250
|
+
curP = b.getAttribute('data-tpl');
|
|
1251
|
+
document.documentElement.setAttribute('data-template', curP);
|
|
1252
|
+
try { localStorage.setItem(TPL_KEY, curP); } catch(e) {}
|
|
1253
|
+
document.querySelectorAll('.tp-btn').forEach(function(x){ x.classList.toggle('on', x === b); });
|
|
1254
|
+
var bt = document.querySelector('#tplBar .bar-tpl-name'); if (bt) bt.textContent = '模板 · ' + b.textContent;
|
|
1255
|
+
document.getElementById('tplDock').classList.add('fold');
|
|
1256
|
+
render();
|
|
1257
|
+
});
|
|
1258
|
+
});
|
|
1259
|
+
|
|
1260
|
+
/* ═══════════ 一屏自适应缩放 + ?shot 截图模式 ═══════════ */
|
|
1261
|
+
function fit(){
|
|
1262
|
+
var stage = document.getElementById('stage');
|
|
1263
|
+
stage.style.transform = 'none';
|
|
1264
|
+
var scale = Math.min(1, window.innerHeight / (stage.scrollHeight + 1));
|
|
1265
|
+
if (scale < 1) { stage.style.transform = 'scale(' + scale + ')'; stage.style.transformOrigin = 'center center'; }
|
|
1266
|
+
}
|
|
1267
|
+
render();
|
|
1268
|
+
/* ═══════════ 折叠把手：默认折叠、点击展开、选中后自动收起 ═══════════ */
|
|
1269
|
+
function bindBar(dockId){
|
|
1270
|
+
var dock = document.getElementById(dockId);
|
|
1271
|
+
if (!dock) return;
|
|
1272
|
+
dock.querySelector('.dock-bar').addEventListener('click', function(){ dock.classList.toggle('fold'); });
|
|
1273
|
+
}
|
|
1274
|
+
bindBar('tplDock');
|
|
1275
|
+
bindBar('themeDock');
|
|
1276
|
+
var initTplBtn = document.querySelector('#tplDock .tp-btn[data-tpl="' + curP + '"]');
|
|
1277
|
+
var btEl = document.querySelector('#tplBar .bar-tpl-name');
|
|
1278
|
+
if (btEl) btEl.textContent = '模板 · ' + (initTplBtn ? initTplBtn.textContent : '自定义');
|
|
1279
|
+
updateThBar();
|
|
1280
|
+
window.addEventListener('resize', fit);
|
|
1281
|
+
if (location.search.indexOf('shot') !== -1) {
|
|
1282
|
+
document.documentElement.setAttribute('data-shot', '1');
|
|
1283
|
+
var els = document.querySelectorAll('.anim');
|
|
1284
|
+
els.forEach(function(e){ e.style.opacity = '1'; e.style.transform = 'none'; e.style.animationDelay = '0s'; });
|
|
1285
|
+
fit();
|
|
1286
|
+
}
|
|
1287
|
+
})();
|
|
1288
|
+
</script>
|
|
1289
|
+
</body>
|
|
1290
|
+
</html>
|