14 lines
8.3 KiB
JSON
14 lines
8.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 <!-- 外部库支持：Font Awesome for icons -->\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css\">\n\n <!-- 外部库支持：图表库 (按需选择或全部保留) -->\n <!-- Chart.js -->\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <!-- ECharts.js -->\n <script src=\"https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js\"></script>\n <!-- D3.js -->\n <script src=\"https://d3js.org/d3.v7.min.js\"></script>\n\n</head>\n<body style=\"margin: 0; padding: 0; box-sizing: border-box; background-color: #2d2d2d; display: flex; justify-content: center; align-items: center; min-height: 100vh;\">\n\n <!-- \n 响应式容器：\n - 这是一个外层容器，用于在不同屏幕上保持16:9的宽高比。\n - 它通过 `max-width` 和 `aspect-ratio` 属性实现缩放。\n - 内部的 slide-canvas 才是我们真正的1280x720设计区域。\n -->\n <div class=\"responsive-wrapper\" style=\"width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; box-shadow: 0 10px 30px rgba(0,0,0,0.5);\">\n\n <!-- \n PPT页面画布 (1280x720)\n - 所有内容都在这个div内，确保视觉尺寸统一。\n - `overflow: hidden;` 是关键，它能确保任何情况下都不会出现滚动条。\n - `position: relative;` 用于内部元素的绝对定位。\n -->\n <div class=\"slide-canvas\" style=\"width: 100%; height: 100%; background-color: #1a1a1a; color: #ffffff; font-family: 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif; display: flex; flex-direction: column; position: relative; overflow: hidden;\">\n\n <!-- 背景装饰元素：增加动感和设计感 -->\n <div class=\"background-decoration\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.03) 75%, transparent 75%, transparent); background-size: 60px 60px;\"></div>\n \n <!-- 左侧速度黄装饰线 -->\n <div class=\"speed-line\" style=\"position: absolute; top: 0; left: 0; width: 12px; height: 100%; background-color: #FFC700; z-index: 2;\"></div>\n\n <!-- 页面主要内容容器 (Flex布局) -->\n <div class=\"slide-content-wrapper\" style=\"flex-grow: 1; display: flex; flex-direction: column; z-index: 1; padding: 40px 60px 40px 80px;\">\n\n <!-- 1. 页面标题区域 -->\n <header class=\"page-header\" style=\"flex-shrink: 0;\">\n <h1 class=\"page-title\" style=\"font-size: 48px; font-weight: bold; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 4px solid #FFC700; display: inline-block;\">\n {{ page_title }}\n </h1>\n </header>\n\n <!-- 2. 页面核心内容区域 -->\n <main class=\"page-main-content\" style=\"flex-grow: 1; font-size: 20px; line-height: 1.6; color: #e0e0e0; padding-top: 20px;\">\n <!-- \n 内容占位符:\n 在这里填入文本、列表、图片、图表等。\n 为了演示，下方提供了一个文本+图表的示例结构。\n -->\n {{ page_content }}\n\n <!-- 示例内容结构 (可替换) -->\n <div style=\"display: flex; gap: 30px; height: 100%;\">\n <!-- 左侧文本区 -->\n <div style=\"flex: 1;\">\n <p>这里是页面的主要内容区域，您可以自由地添加文本、列表和图标。</p>\n <ul style=\"padding-left: 25px;\">\n <li style=\"margin-bottom: 10px;\"> <i class=\"fa-solid fa-check\" style=\"color: #FFC700; margin-right: 10px;\"></i> 严格遵守1280x720像素尺寸。</li>\n <li style=\"margin-bottom: 10px;\"> <i class=\"fa-solid fa-check\" style=\"color: #FFC700; margin-right: 10px;\"></i> 所有样式内联，确保自包含性。</li>\n <li style=\"margin-bottom: 10px;\"> <i class=\"fa-solid fa-check\" style=\"color: #FFC700; margin-right: 10px;\"></i> 支持Font Awesome, Chart.js等库。</li>\n </ul>\n </div>\n <!-- 右侧图表区 -->\n <div style=\"flex: 1; display: flex; justify-content: center; align-items: center;\">\n <!-- \n 图表容器:\n 为 Chart.js, ECharts.js 或 D3.js 准备的容器。\n ECharts.js 使用 div, Chart.js 使用 canvas。\n -->\n <div id=\"chart-container\" style=\"width: 100%; height: 320px;\"></div>\n <!-- <canvas id=\"myChart\" style=\"max-width: 100%; max-height: 320px;\"></canvas> -->\n </div>\n </div>\n <!-- 示例内容结束 -->\n\n </main>\n\n <!-- 3. 页面页脚区域 -->\n <footer class=\"page-footer\" style=\"flex-shrink: 0; text-align: right; padding-top: 20px;\">\n <span class=\"page-number\" style=\"font-size: 18px; color: #a0a0a0; font-weight: bold;\">\n {{ current_page_number }} / {{ total_page_count }}\n </span>\n </footer>\n\n </div>\n </div>\n </div>\n\n <!-- \n 示例脚本: \n 演示如何在一个ECharts图表容器中初始化一个简单的图表。\n 实际使用时，您可以根据需要替换为自己的数据和图表类型。\n -->\n <script>\n // 等待DOM加载完成\n document.addEventListener('DOMContentLoaded', function () {\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('chart-container'));\n\n // 指定图表的配置项和数据\n var option = {\n tooltip: {},\n legend: {\n data: ['销量'],\n textStyle: {\n color: '#ffffff'\n }\n },\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],\n axisLine: {\n lineStyle: {\n color: '#a0a0a0'\n }\n }\n },\n yAxis: {\n axisLine: {\n lineStyle: {\n color: '#a0a0a0'\n }\n },\n splitLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.1)'\n }\n }\n },\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20],\n itemStyle: {\n color: '#FFC700'\n }\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n\n // 监听窗口大小变化，使图表自适应\n window.addEventListener('resize', function() {\n myChart.resize();\n });\n });\n </script>\n\n</body>\n</html>",
|
||
"tags": [
|
||
"速度黄"
|
||
],
|
||
"is_default": false,
|
||
"export_info": {
|
||
"exported_at": "2025-10-04T06:53:01.960Z",
|
||
"original_id": 12,
|
||
"original_created_at": 1755852075.756903
|
||
}
|
||
} |