14 lines
10 KiB
JSON
14 lines
10 KiB
JSON
{
|
|
"template_name": "Toy风",
|
|
"description": "Toy风",
|
|
"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>Toy风PPT模板</title>\n \n <!-- 引入外部字体和图标库 -->\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\">\n \n <!-- 引入图表库 (示例) -->\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <!-- <script src=\"https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js\"></script> -->\n <!-- <script src=\"https://d3js.org/d3.v7.min.js\"></script> -->\n\n <style>\n /* \n * 所有CSS样式均内联在此<style>标签中，以确保模板的自包含性。\n * 这是比将style属性写在每个元素上更优、更易维护的“内联”实践。\n */\n\n /* 1. 基础与重置样式 */\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; /* 页面背景色，用于衬托幻灯片 */\n font-family: 'Nunito', sans-serif;\n }\n\n /* 2. 响应式缩放容器 */\n .slide-container {\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* 3. 幻灯片核心画布 (严格1280x720) */\n .slide {\n width: 1280px;\n height: 720px;\n background-color: #FFFBEB; /* 温暖的米黄色背景，像画纸 */\n position: relative;\n overflow: hidden; /* 确保所有内容都在720px高度内 */\n transform-origin: center center; /* 设置缩放中心 */\n color: #333;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n }\n\n /* 4. 装饰性元素 (模拟积木/贴纸) */\n .deco-shape {\n position: absolute;\n border-radius: 50%;\n }\n .shape1 { background-color: #3B82F6; width: 150px; height: 150px; top: -50px; right: 50px; opacity: 0.8; }\n .shape2 { background-color: #FBBF24; width: 80px; height: 80px; top: 80px; right: -20px; opacity: 0.9; }\n .shape3 { background-color: #EF4444; width: 200px; height: 200px; bottom: -100px; left: -80px; opacity: 0.7; }\n .shape4 { background-color: #22C55E; width: 40px; height: 40px; bottom: 80px; left: 60px; }\n\n /* 5. 页面元素样式 */\n .page-title {\n position: absolute;\n top: 40px;\n left: 60px;\n background-color: #3B82F6; /* 鲜艳的蓝色标题背景 */\n color: white;\n padding: 15px 30px;\n border-radius: 15px;\n font-size: 36px;\n font-weight: 900;\n display: inline-block;\n box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);\n z-index: 10;\n }\n\n .page-content {\n position: absolute;\n top: 150px;\n left: 60px;\n right: 60px;\n bottom: 60px;\n padding: 20px;\n z-index: 5;\n }\n\n .pagination {\n position: absolute;\n bottom: 25px;\n right: 40px;\n font-size: 20px;\n font-weight: 700;\n color: #A1A1AA;\n background-color: rgba(255, 255, 255, 0.7);\n padding: 5px 15px;\n border-radius: 20px;\n z-index: 10;\n }\n\n /* 6. 内容区域具体样式 */\n .page-content h2 {\n font-size: 32px;\n color: #1F2937;\n margin-bottom: 20px;\n border-bottom: 4px solid #FBBF24; /* 黄色下划线，像蜡笔画的 */\n padding-bottom: 10px;\n display: inline-block;\n }\n \n .page-content p {\n font-size: 22px;\n line-height: 1.6;\n color: #4B5563;\n margin-bottom: 20px;\n }\n\n .page-content ul {\n list-style: none;\n padding-left: 10px;\n }\n\n .page-content ul li {\n font-size: 22px;\n line-height: 1.8;\n color: #4B5563;\n margin-bottom: 10px;\n position: relative;\n padding-left: 35px;\n }\n\n /* 自定义列表项标记，像一个彩色按钮 */\n .page-content ul li::before {\n content: '';\n position: absolute;\n left: 0;\n top: 10px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #22C55E;\n }\n\n .page-content .icon-example {\n font-size: 24px;\n color: #EF4444;\n margin-right: 10px;\n }\n\n /* 为图表库预留的容器样式 */\n .chart-container {\n width: 100%;\n max-width: 600px; /* 控制图表大小 */\n height: 300px;\n margin-top: 30px;\n }\n\n </style>\n</head>\n<body>\n\n <div class=\"slide-container\">\n <div class=\"slide\">\n <!-- 装饰性背景元素 -->\n <div class=\"deco-shape shape1\"></div>\n <div class=\"deco-shape shape2\"></div>\n <div class=\"deco-shape shape3\"></div>\n <div class=\"deco-shape shape4\"></div>\n\n <!-- 页面标题占位符 -->\n <div class=\"page-title\">\n {{ page_title }}\n </div>\n\n <!-- 页面内容占位符 -->\n <div class=\"page-content\">\n \n <!-- 以下为内容示例，实际使用时会被 {{ page_content }} 替换 -->\n <h2>这是一个内容标题</h2>\n <p>\n 这里是段落内容区域。您可以放置文本、图片或者其他多媒体元素。\n <i class=\"fa-solid fa-star icon-example\"></i>Font Awesome 图标也可以在这里使用。\n </p>\n <ul>\n <li>这是列表项一：圆润的设计风格。</li>\n <li>这是列表项二：明亮活泼的色彩。</li>\n <li>这是列表项三：清晰易读的布局。</li>\n </ul>\n\n <!-- 图表容器示例 (支持Chart.js, ECharts, D3.js等) -->\n <div class=\"chart-container\">\n <canvas id=\"myChart\"></canvas>\n </div>\n\n </div>\n\n <!-- 页码占位符 -->\n <div class=\"pagination\">\n <span class=\"current-page\">{{ current_page_number }}</span> / <span class=\"total-pages\">{{ total_page_count }}</span>\n </div>\n </div>\n </div>\n\n <script>\n // 确保幻灯片始终保持16:9并居中显示的核心脚本\n function scaleSlide() {\n const slide = document.querySelector('.slide');\n const container = document.querySelector('.slide-container');\n \n const slideWidth = 1280;\n const slideHeight = 720;\n \n const containerWidth = container.offsetWidth;\n const containerHeight = container.offsetHeight;\n \n const scaleX = containerWidth / slideWidth;\n const scaleY = containerHeight / slideHeight;\n \n // 取较小的缩放比例以确保整个幻灯片可见\n const scale = Math.min(scaleX, scaleY);\n \n slide.style.transform = `scale(${scale})`;\n }\n \n // 页面加载和窗口大小改变时调整缩放\n window.onload = scaleSlide;\n window.onresize = scaleSlide;\n\n // Chart.js 示例图表脚本\n // 实际使用时，这部分逻辑应由内容生成系统动态提供\n const ctx = document.getElementById('myChart');\n if (ctx) {\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['玩具A', '玩具B', '玩具C', '玩具D', '玩具E'],\n datasets: [{\n label: '销量',\n data: [12, 19, 3, 5, 2],\n backgroundColor: [\n 'rgba(239, 68, 68, 0.7)',\n 'rgba(251, 191, 36, 0.7)',\n 'rgba(59, 130, 246, 0.7)',\n 'rgba(34, 197, 94, 0.7)',\n 'rgba(168, 85, 247, 0.7)'\n ],\n borderColor: [\n 'rgb(239, 68, 68)',\n 'rgb(251, 191, 36)',\n 'rgb(59, 130, 246)',\n 'rgb(34, 197, 94)',\n 'rgb(168, 85, 247)'\n ],\n borderWidth: 2,\n borderRadius: 8\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n }\n },\n scales: {\n y: {\n beginAtZero: true\n }\n }\n }\n });\n }\n </script>\n\n</body>\n</html>",
|
|
"tags": [
|
|
"Toy风"
|
|
],
|
|
"is_default": false,
|
|
"export_info": {
|
|
"exported_at": "2025-10-04T06:53:14.666Z",
|
|
"original_id": 16,
|
|
"original_created_at": 1755855865.1131823
|
|
}
|
|
} |