From 01e9a402f41d1f53038384b1d38beff6cc537a7a Mon Sep 17 00:00:00 2001 From: cola0405 <1020151695@qq.com> Date: Thu, 28 May 2026 17:38:10 +0800 Subject: [PATCH] Fix xhs-post responsive scaling on landscape displays --- templates/full-decks/xhs-dark/README.md | 24 ++++ templates/full-decks/xhs-dark/index.html | 170 +++++++++++++++++++++++ templates/full-decks/xhs-dark/style.css | 66 +++++++++ templates/full-decks/xhs-post/style.css | 20 ++- 4 files changed, 278 insertions(+), 2 deletions(-) create mode 100644 templates/full-decks/xhs-dark/README.md create mode 100644 templates/full-decks/xhs-dark/index.html create mode 100644 templates/full-decks/xhs-dark/style.css diff --git a/templates/full-decks/xhs-dark/README.md b/templates/full-decks/xhs-dark/README.md new file mode 100644 index 0000000..82b4911 --- /dev/null +++ b/templates/full-decks/xhs-dark/README.md @@ -0,0 +1,24 @@ +# xhs-dark — 小红书暗黑科技风模板 + +竖屏 3:4 比例，深色主题 + 霓虹点缀，适合科技/数码/极客类内容。 + +## 特点 + +- 🌙 深色背景 + 霓虹紫/青/粉点缀 +- 📱 竖屏 810×1080，完美适配小红书 +- ⚡ 科技感贴纸 + 扫描线纹理 +- 💡 基于真实神经科学内容 + +## 使用 + +直接复制本文件夹，修改 `index.html` 中的内容即可。 + +## 主题色 + +| Token | 色值 | 用途 | +|-------|------|------| +| `--accent` | `#c084fc` | 主强调色（紫） | +| `--accent-2` | `#22d3ee` | 次要强调（青） | +| `--accent-3` | `#f472b6` | 第三强调（粉） | +| `--bg` | `#0a0a0f` | 背景 | +| `--surface` | `#1a1a2e` | 卡片背景 | diff --git a/templates/full-decks/xhs-dark/index.html b/templates/full-decks/xhs-dark/index.html new file mode 100644 index 0000000..8cfd2a0 --- /dev/null +++ b/templates/full-decks/xhs-dark/index.html @@ -0,0 +1,170 @@ + + + + +AI 工具提效实战分享 · 周一晚分享会 + + + + + + +
+ + +
+
1 / 9
+
周一晚分享
+
实战案例
+
+

2026.05.16 分享会

+

让 AI 替你
干活
的 4 个工具

+
+

Excel 批量处理 · OfficeCLI · HTML-PPT · MarkItDown

+
分 @周一晚分享
← 左滑 查看
+
+ + +
+
2 / 9
+
🎯
+

今晚讲什么

+
+
01 Excel 批量处理 — 4000+ 份报告自动生成
+
02 OfficeCLI — AI 专用的 Office 套件
+
03 HTML-PPT — 47 种动效的智能演示
+
04 MarkItDown — 万能格式转换器
+
+
+ + +
+
3 / 9
+
效率爆炸
+

01 / Excel 批量处理

+

4000+ 份验收报告
原来要几天，
现在只要几分钟。

+
+
+

痛点：人工逐份修改模板，重复性强、易出错、格式不统一

+
+
+

方案：30-40 分钟训练 Agent，自动拆分数据、填充模板、统一格式

+
+
+

结果：数分钟完成数百份报告，零差错、标准化输出

+
+
+
+ + +
+
4 / 9
+

02 / OfficeCLI

+

全球首个
为 AI 设计的
Office 套件。

+
+

🚀 一行代码，完全掌控 Word / Excel / PPT

+

开源免费 · 单一可执行文件 · 无需安装 Office · 零依赖 · 全平台

+
+
+

✨ 内置 Agent 友好渲染引擎

+

"渲染 → 看 → 改" 循环，Agent 能"看见"自己创建的内容

+
+
表格美化神器
+
+ + +
+
5 / 9
+
2
+

纯数据 → 专业表格
一键搞定。

+
+
+

自动识别：适配 1-N 任意列数，无需手动框选

+
+
+

批量处理：一键美化多个文件，替代人工排版

+
+
+

应用场景：验收汇报、资料归档、正式汇报

+
+
+

原始数据无样式 → OfficeCLI → 规整美观的专业表格

+
+ + +
+
6 / 9
+

03 / HTML-PPT

+

47 种动效，
让 PPT 自己
动起来。

+
+
+

🎨 36 套主题

+

一键切换风格，无需手动调配色

+
+
+

📐 31 种布局

+

覆盖封面、目录、数据、对比等场景

+
+
+

✨ 27 种 CSS 动效

+

淡入、滑入、3D 翻转等细腻过渡

+
+
+

🌟 20 种 Canvas 特效

+

粒子、烟花、知识图谱等光影效果

+
+
+
+ + +
+
7 / 9
+
Agent 一键生成
+

传统 PPT vs HTML-PPT

+
+
+

传统 PPT：人工选版式、排内容、调字体、对齐格式，细碎繁琐

+
+
+

HTML-PPT：输入需求 → Agent 套模板 → 一键生成整套演示文稿

+
+
+

动效老旧单一 → 47 种高阶动效，流畅丝滑

+

同质化严重 → 精致高级，适配专业场景

+
+ + +
+
8 / 9
+

04 / MarkItDown

+

微软出的
万能格式
转换器。

+
+

📄 文档 → PDF / Word / PPT / Excel

+

🌐 网页 → HTML

+

🖼️ 图片 → OCR 文字

+

🎵 音频 → 语音转录

+
+
+

核心优势：保留文档结构、LLM 友好、Token 效率高、支持插件扩展

+
+
+ + +
+
9 / 9
+
🚀
+

工具不是目的

+

提效才是

+

4 个工具，解决 4 类重复劳动：
表格处理 · 文档生成 · 演示制作 · 格式转换

+
+ #AI提效 + #办公自动化 + #Agent实战 + #周一晚分享 +
+
分 @周一晚分享
💜 收藏关注
+
+ +
+ + diff --git a/templates/full-decks/xhs-dark/style.css b/templates/full-decks/xhs-dark/style.css new file mode 100644 index 0000000..b1965ba --- /dev/null +++ b/templates/full-decks/xhs-dark/style.css @@ -0,0 +1,66 @@ +/* xhs-dark — 小红书暗黑科技风 3:4 */ +.tpl-xhs-dark{ + --bg:#0a0a0f;--bg-soft:#12121a;--surface:#1a1a2e;--surface-2:#16213e; + --border:rgba(139,92,246,.15);--border-strong:rgba(139,92,246,.3); + --text-1:#e2e8f0;--text-2:#94a3b8;--text-3:#64748b; + --accent:#c084fc;--accent-2:#22d3ee;--accent-3:#f472b6; + --grad:linear-gradient(135deg,#c084fc,#22d3ee 50%,#f472b6); + --good:#4ade80;--warn:#fbbf24;--bad:#f87171; + --radius:24px;--radius-lg:32px; + --shadow:0 14px 36px rgba(0,0,0,.4),0 0 0 1px rgba(139,92,246,.1); + font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif; +} +/* 竖屏适配：在横屏显示器上自动缩放 */ +.tpl-xhs-dark{background:#050508;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden} +.tpl-xhs-dark .deck{ + width:810px;height:1080px;position:relative;background:transparent; + transform-origin:center center; +} +/* 当视口高度不足以容纳 1080px 时，按比例缩放 */ +@media (max-height:1120px){ + .tpl-xhs-dark .deck{ + transform:scale(calc(100vh / 1120)); + } +} +/* 当视口宽度不足以容纳 810px 时，按比例缩放 */ +@media (max-width:850px){ + .tpl-xhs-dark .deck{ + transform:scale(calc(100vw / 850)); + } +} +.tpl-xhs-dark .slide{ + position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4; + padding:70px 64px;border-radius:28px;overflow:hidden; + background:var(--bg); +} +.tpl-xhs-dark .slide::before{content:"";position:absolute;inset:0;background: + radial-gradient(45% 30% at 80% 10%,rgba(192,132,252,.15),transparent 70%), + radial-gradient(50% 35% at 10% 95%,rgba(34,211,238,.1),transparent 70%), + radial-gradient(40% 30% at 90% 85%,rgba(244,114,182,.08),transparent 70%); + pointer-events:none;z-index:0} +.tpl-xhs-dark .slide::after{content:"";position:absolute;inset:0;background: + repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(139,92,246,.03) 2px,rgba(139,92,246,.03) 4px); + pointer-events:none;z-index:0} +.tpl-xhs-dark .slide > *{position:relative;z-index:1} +.tpl-xhs-dark .h1{font-size:72px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--text-1)} +.tpl-xhs-dark .h2{font-size:54px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--text-1)} +.tpl-xhs-dark .h3{font-size:36px;font-weight:800;color:var(--text-1)} +.tpl-xhs-dark .page-dot{position:absolute;top:40px;right:48px;background:var(--surface);color:var(--accent);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2} +.tpl-xhs-dark .sticker{position:absolute;padding:10px 18px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:0 0 20px rgba(192,132,252,.2),0 4px 12px rgba(0,0,0,.3)} +.tpl-xhs-dark .sticker.neon-pink{border-color:var(--accent-3);color:var(--accent-3);box-shadow:0 0 20px rgba(244,114,182,.25),0 4px 12px rgba(0,0,0,.3)} +.tpl-xhs-dark .sticker.neon-cyan{border-color:var(--accent-2);color:var(--accent-2);box-shadow:0 0 20px rgba(34,211,238,.25),0 4px 12px rgba(0,0,0,.3)} +.tpl-xhs-dark .sticker.neon-purple{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(192,132,252,.25),0 4px 12px rgba(0,0,0,.3)} +.tpl-xhs-dark .sticker.neon-green{border-color:var(--good);color:var(--good);box-shadow:0 0 20px rgba(74,222,128,.25),0 4px 12px rgba(0,0,0,.3)} +.tpl-xhs-dark .hand-box{background:var(--surface);border:1.5px solid var(--border);border-radius:22px;padding:24px 28px;box-shadow:var(--shadow)} +.tpl-xhs-dark .lede{color:var(--text-2);font-size:26px;line-height:1.55} +.tpl-xhs-dark .big-emoji{font-size:180px;line-height:1;text-align:center;filter:drop-shadow(0 0 30px rgba(192,132,252,.3))} +.tpl-xhs-dark .num-circle{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--bg);font-weight:900;font-size:36px;border:2px solid var(--accent);box-shadow:0 0 30px rgba(192,132,252,.4)} +.tpl-xhs-dark .step-card{background:var(--surface);border:1.5px solid var(--border);border-radius:22px;padding:26px 28px;box-shadow:var(--shadow);margin-bottom:24px} +.tpl-xhs-dark .step-card h4{font-size:28px;font-weight:800;margin:0 0 6px} +.tpl-xhs-dark .step-card p{font-size:18px;color:var(--text-2);margin:0} +.tpl-xhs-dark .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} +.tpl-xhs-dark .ht{background:var(--surface);color:var(--accent);border:1.5px solid var(--border);padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px} +.tpl-xhs-dark .cover-title{background:linear-gradient(180deg,transparent 60%,var(--accent) 60%,var(--accent) 92%,transparent 92%);padding:0 10px;color:var(--text-1)} +.tpl-xhs-dark .heart{color:var(--accent-3);font-size:28px} +.tpl-xhs-dark .bottom-bar{position:absolute;bottom:40px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--text-3);font-family:'JetBrains Mono',monospace;z-index:2} +.tpl-xhs-dark .avatar{width:54px;height:54px;border-radius:50%;background:var(--grad);border:2px solid var(--accent);box-shadow:0 0 20px rgba(192,132,252,.3);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--bg)} diff --git a/templates/full-decks/xhs-post/style.css b/templates/full-decks/xhs-post/style.css index 168d5a6..a785c03 100644 --- a/templates/full-decks/xhs-post/style.css +++ b/templates/full-decks/xhs-post/style.css @@ -10,8 +10,24 @@ --shadow:0 14px 36px rgba(90,40,30,.08); font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif; } -.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh} -.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent} +/* 竖屏适配：在横屏显示器上自动缩放 */ +.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden} +.tpl-xhs-post .deck{ + width:810px;height:1080px;position:relative;background:transparent; + transform-origin:center center; +} +/* 当视口高度不足以容纳 1080px 时，按比例缩放 */ +@media (max-height:1120px){ + .tpl-xhs-post .deck{ + transform:scale(calc(100vh / 1120)); + } +} +/* 当视口宽度不足以容纳 810px 时，按比例缩放 */ +@media (max-width:850px){ + .tpl-xhs-post .deck{ + transform:scale(calc(100vw / 850)); + } +} .tpl-xhs-post .slide{ position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4; padding:70px 64px;border-radius:28px;overflow:hidden;