14 lines
9.3 KiB
JSON
14 lines
9.3 KiB
JSON
|
{
|
|||
|
|
"template_name": "清新风",
|
|||
|
|
"description": "清新风",
|
|||
|
|
"html_template": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>清新风PPT模板</title>\n\n <!-- 外部库支持 (CDN) -->\n <!-- Font Awesome: 用于图标 -->\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css\">\n <!-- Chart.js: 用于图表 (可替换为 ECharts, D3.js 等) -->\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n \n <!-- \n 所有CSS样式均内联在此处，以确保模板的自包含性。\n 这里未使用Tailwind CSS框架，而是采用原生CSS，以避免额外的构建步骤，\n 但其命名和设计思路借鉴了原子化CSS的思想，易于理解和维护。\n -->\n <style>\n /* --- 基础与重置 --- */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden; /* 核心要求：绝对不允许出现滚动条 */\n background-color: #f0f2f5; /* 页面背景色，衬托PPT页面 */\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n }\n\n /* --- 响应式比例容器 --- */\n /* 外层容器，使用Flexbox实现垂直和水平居中 */\n .slide-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 1vw; /* 留出一些边距，让视觉更舒适 */\n }\n\n /* 核心！用于保持16:9比例的容器 */\n .slide-aspect-ratio-box {\n width: 100%;\n max-width: 1280px; /* 最大宽度限制 */\n aspect-ratio: 16 / 9; /* 现代CSS属性，强制保持16:9 */\n position: relative; /* 为内部绝对定位的slide提供基准 */\n box-shadow: 0 8px 24px rgba(0, 32, 64, 0.1); /* 增加立体感 */\n border-radius: 8px; /* 轻微的圆角，更显柔和 */\n }\n\n /* --- PPT页面本身 --- */\n .slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n \n /* 设计风格: 清新风 */\n background-color: #ffffff;\n /* 可选用渐变背景增加层次感 */\n /* background-image: linear-gradient(135deg, #f8fafc 0%, #eef2f5 100%); */\n \n color: #374151; /* 主文字颜色，深灰色而非纯黑 */\n border-radius: 8px; /* 与外层阴影容器保持一致 */\n \n /* 使用Flexbox进行内部布局 */\n display: flex;\n flex-direction: column;\n padding: 40px 60px; /* 内部安全边距 (对应720p下的像素) */\n }\n\n /* --- 页面元素样式 --- */\n /* 页面标题 */\n .slide-title {\n font-size: 42px; /* 在1280x720分辨率下，这是一个合适的标题大小 */\n font-weight: 600;\n color: #0ea5e9; /* 清新的天空蓝作为主题色 */\n margin-bottom: 24px;\n flex-shrink: 0; /* 防止标题被压缩 */\n }\n\n /* 页面主要内容区域 */\n .slide-content {\n flex-grow: 1; /* 占据剩余所有空间 */\n font-size: 20px;\n line-height: 1.7;\n overflow: hidden; /* 确保内容不会溢出此区域 */\n }\n\n /* 内容区通用样式 */\n .slide-content h3 {\n font-size: 24px;\n font-weight: 600;\n color: #1e293b;\n margin-top: 20px;\n margin-bottom: 12px;\n border-left: 4px solid
|
|||
|
|
"tags": [
|
|||
|
|
"清新风"
|
|||
|
|
],
|
|||
|
|
"is_default": false,
|
|||
|
|
"export_info": {
|
|||
|
|
"exported_at": "2025-10-04T06:54:40.086Z",
|
|||
|
|
"original_id": 15,
|
|||
|
|
"original_created_at": 1755855551.7143126
|
|||
|
|
}
|
|||
|
|
}
|