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 #38bdf8; /* 蓝色装饰条 */\n padding-left: 12px;\n }\n\n .slide-content p {\n margin-bottom: 16px;\n }\n\n .slide-content ul {\n list-style-type: none;\n padding-left: 10px;\n }\n\n .slide-content li {\n margin-bottom: 12px;\n display: flex;\n align-items: flex-start;\n }\n\n /* Font Awesome 图标样式 */\n .slide-content li i {\n color: #38bdf8; /* 使用明亮的蓝色 */\n margin-right: 12px;\n margin-top: 6px; /* 微调图标位置，使其与文本对齐 */\n font-size: 18px;\n }\n\n /* 图表容器占位符样式 */\n .chart-placeholder {\n width: 100%;\n height: 280px; /* 在720p高度内预留一个合理的高度 */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 6px;\n margin-top: 20px;\n }\n\n /* --- 页脚与页码 --- */\n .slide-footer {\n position: absolute;\n bottom: 30px;\n right: 60px;\n font-size: 16px;\n color: #94a3b8; /* 页码使用较浅的颜色 */\n flex-shrink: 0;\n }\n \n /* --- 装饰性元素 --- */\n .slide-decoration {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 8px; /* 底部装饰条 */\n background-image: linear-gradient(to right, #0ea5e9, #67e8f9); /* 清新渐变色 */\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n </style>\n</head>\n<body>\n\n <div class=\"slide-container\">\n <div class=\"slide-aspect-ratio-box\">\n <div class=\"slide\">\n \n <!-- 1. 页面标题占位符 -->\n <header class=\"slide-title\">\n {{ page_title }}\n </header>\n\n <!-- 2. 页面内容占位符 -->\n <main class=\"slide-content\">\n {{ page_content }}\n \n <!-- 以下为内容占位符的示例，您可以根据实际需求替换 -->\n <!-- \n <h3><i class=\"fas fa-lightbulb\"></i> 核心要点</h3>\n <ul>\n <li><i class=\"fas fa-check-circle\"></i> 严格的尺寸控制与16:9响应式布局。</li>\n <li><i class=\"fas fa-check-circle\"></i> 所有样式内联，确保模板的独立与便携。</li>\n <li><i class=\"fas fa-check-circle\"></i> 集成Font Awesome图标与图表库支持。</li>\n </ul>\n <h3><i class=\"fas fa-chart-pie\"></i> 数据可视化</h3>\n <p>下方区域可用于集成Chart.js、ECharts等图表库。</p>\n <div class=\"chart-placeholder\">\n 图表将在此处渲染 \n <canvas id=\"myChart\"></canvas>\n </div>\n -->\n </main>\n\n <!-- 3. 页脚与页码占位符 -->\n <footer class=\"slide-footer\">\n <span>{{ current_page_number }}</span> / <span>{{ total_page_count }}</span>\n </footer>\n \n <!-- 4. 底部装饰条 -->\n <div class=\"slide-decoration\"></div>\n\n </div>\n </div>\n </div>\n\n <script>\n // 这是一个可选的脚本示例，用于演示如何使用Chart.js\n // 在实际使用中，图表数据应由您的系统动态生成\n /*\n const ctx = document.getElementById('myChart');\n if (ctx) {\n new Chart(ctx, {\n type: 'bar', // 图表类型：条形图\n data: {\n labels: ['一月', '二月', '三月', '四月', '五月', '六月'],\n datasets: [{\n label: '月度销售额',\n data: [12, 19, 3, 5, 2, 3],\n backgroundColor: 'rgba(14, 165, 233, 0.6)', // 使用主题色\n borderColor: 'rgba(14, 165, 233, 1)',\n borderWidth: 1,\n borderRadius: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true\n }\n },\n plugins: {\n legend: {\n display: false // 简洁起见，隐藏图例\n }\n }\n }\n });\n }\n */\n </script>\n\n</body>\n</html>",
|
||
"tags": [
|
||
"清新风"
|
||
],
|
||
"is_default": false,
|
||
"export_info": {
|
||
"exported_at": "2025-10-04T06:54:40.086Z",
|
||
"original_id": 15,
|
||
"original_created_at": 1755855551.7143126
|
||
}
|
||
} |