14 lines
9.1 KiB
JSON
14 lines
9.1 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 <!-- 1. 技术库支持 (CDN) -->\n <!-- Font Awesome 图标库 -->\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css\">\n \n <!-- ECharts.js 图表库 -->\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js\"></script>\n \n <!-- Chart.js 图表库 -->\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js\"></script>\n\n <!-- D3.js 数据可视化库 -->\n <script src=\"https://d3js.org/d3.v7.min.js\"></script>\n\n <!-- 2. 核心内联样式，用于实现响应式和基础布局 -->\n <style>\n /* 这是一个例外，用于设置基础的页面样式和响应式容器。\n 在实际的模板系统中，这些样式也应当被内联到body和外层div上。\n 为了代码的可读性和演示效果，暂时保留在此处。\n 最终交付时，可将这些样式也通过JS或模板引擎处理为内联样式。*/\n body, html {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n background-color: #f0f2f5; /* 页面背景色，突出PPT页面 */\n overflow: hidden; /* 防止在某些极端情况下出现滚动条 */\n }\n </style>\n</head>\n<body style=\"display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体', sans-serif;\">\n\n <!-- 响应式比例容器: 保持16:9的关键 -->\n <div id=\"ppt-aspect-ratio-container\" style=\"position: relative; width: 100%; max-width: 1280px; padding-top: 56.25%; /* 720 / 1280 = 0.5625 */\">\n\n <!-- PPT页面主画布: 所有内容在此区域内，绝对定位以填充比例容器 -->\n <div id=\"ppt-slide-canvas\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\">\n\n <!-- === 顶部装饰与标题区 === -->\n <header style=\"position: relative; height: 120px; width: 100%; background-color: #c00000; color: #fff; flex-shrink: 0; z-index: 10;\">\n <!-- 顶部背景装饰图案 (可替换为更复杂的SVG或图片) -->\n <div style=\"position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMjgwIDEyMCI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTI4MCIgeTI9IjEyMCI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZDEwMD AwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjMDAwMDAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjgwIiBoZWlnaHQ9IjEyMCIgZmlsbD0idXJsKCNncmFkKSIgLz4KPC9zdmc+'); background-size: cover;\"></div>\n \n <!-- 页面标题占位符 -->\n <div style=\"position: absolute; left: 60px; top: 50%; transform: translateY(-50%); display: flex; align-items: center;\">\n <i class=\"fas fa-star\" style=\"font-size: 28px; color: #ffeb3b; margin-right: 20px;\"></i>\n <h1 id=\"page-title\" style=\"font-size: 36px; font-weight: bold; margin: 0; padding: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\">\n {{ page_title }}\n </h1>\n </div>\n </header>\n\n <!-- === 主要内容区 === -->\n <main id=\"page-content-wrapper\" style=\"flex-grow: 1; padding: 40px 60px; overflow: hidden;\">\n <!-- 内容占位符: 用户的实际内容将替换这里 -->\n <div id=\"page-content\" style=\"width: 100%; height: 100%;\">\n <!-- 示例内容：两栏布局 -->\n <div style=\"display: flex; width: 100%; height: 100%; gap: 40px;\">\n <!-- 左侧文本区 -->\n <div style=\"flex: 1; display: flex; flex-direction: column; gap: 20px;\">\n <div style=\"display: flex; align-items: center;\">\n <i class=\"fas fa-caret-right\" style=\"color: #c00000; font-size: 24px; margin-right: 15px;\"></i>\n <p style=\"font-size: 22px; margin: 0; color: #333;\">这是第一点核心内容，用简洁的语言概括。</p>\n </div>\n <div style=\"display: flex; align-items: center;\">\n <i class=\"fas fa-caret-right\" style=\"color: #c00000; font-size: 24px; margin-right: 15px;\"></i>\n <p style=\"font-size: 22px; margin: 0; color: #333;\">这是第二点核心内容，详细阐述具体细节。</p>\n </div>\n <ul style=\"list-style-type: none; padding-left: 40px; margin: 0;\">\n <li style=\"font-size: 20px; color: #555; margin-bottom: 10px;\">子要点一：详细说明。</li>\n <li style=\"font-size: 20px; color: #555; margin-bottom: 10px;\">子要点二：补充信息。</li>\n </ul>\n <div style=\"display: flex; align-items: center;\">\n <i class=\"fas fa-caret-right\" style=\"color: #c00000; font-size: 24px; margin-right: 15px;\"></i>\n <p style=\"font-size: 22px; margin: 0; color: #333;\">这是第三点核心内容，对未来进行展望。</p>\n </div>\n </div>\n <!-- 右侧图表区 -->\n <div style=\"flex: 1; border: 1px solid #ddd; padding: 10px; background-color: #fafafa; display: flex; justify-content: center; align-items: center;\">\n <!-- ECharts/Chart.js 容器占位符 -->\n <div id=\"chart-container\" style=\"width: 100%; height: 100%;\">\n <!-- JS图表库将在此处渲染图表 -->\n <p style=\"text-align: center; color: #999; font-size: 18px;\">图表区域 (ECharts, Chart.js, D3.js)</p>\n </div>\n </div>\n </div>\n <!-- {{ page_content }} : 实际使用时，上述示例内容将被替换为这个占位符 -->\n </div>\n </main>\n\n <!-- === 底部装饰与页码区 === -->\n <footer style=\"height: 50px; width: 100%; background-color: #f9f9f9; flex-shrink: 0; border-top: 3px solid #ffc107;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 60px;\">\n <div style=\"font-size: 16px; color: #888;\">内部学习资料，请勿外传</div>\n <!-- 页码占位符 -->\n <div id=\"page-number\" style=\"font-size: 18px; color: #555; font-weight: bold;\">\n <span id=\"current-page\">{{ current_page_number }}</span> / <span id=\"total-pages\">{{ total_page_count }}</span>\n </div>\n </div>\n </footer>\n\n </div>\n </div>\n\n <script>\n // 示例：如何使用ECharts渲染图表\n // 1. 获取图表容器\n var chartDom = document.getElementById('chart-container');\n // 2. 初始化ECharts实例\n var myChart = echarts.init(chartDom);\n // 3. 配置图表选项\n var option = {\n title: {\n text: '示例数据分析',\n left: 'center',\n textStyle: {\n fontSize: 18,\n color: '#333'\n }\n },\n tooltip: {},\n xAxis: {\n data: ['第一季度', '第二季度', '第三季度', '第四季度']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [50, 200, 360, 100],\n itemStyle: {\n color: '#c00000'\n }\n }]\n };\n // 4. 应用配置\n myChart.setOption(option);\n\n // 当窗口大小变化时，让图表也自适应\n window.addEventListener('resize', function() {\n myChart.resize();\n });\n </script>\n\n</body>\n</html>",
|
||
"tags": [
|
||
"大气红"
|
||
],
|
||
"is_default": false,
|
||
"export_info": {
|
||
"exported_at": "2025-10-04T06:54:11.328Z",
|
||
"original_id": 13,
|
||
"original_created_at": 1755854080.1743069
|
||
}
|
||
} |