14 lines
8.9 KiB
JSON
14 lines
8.9 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 <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=Noto+Sans+SC:wght@400;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css\">\n\n <!-- 图表库 (CDN) - 按需引入 -->\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js\"></script>\n <script src=\"https://d3js.org/d3.v7.min.js\"></script>\n\n <style>\n /* --- 基础与布局 --- */\n html, body {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n background-color: #333; /* 模拟PPT放映时的深色背景 */\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Noto Sans SC', sans-serif;\n }\n\n /* 响应式容器，严格控制16:9比例 */\n .slide-container {\n width: 100%;\n max-width: 1280px;\n aspect-ratio: 16 / 9; /* 现代CSS方法保持宽高比 */\n position: relative;\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n }\n\n /* 幻灯片主画布 (1280x720) */\n .slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #F5EFE6; /* 温暖的米白色，像面皮 */\n overflow: hidden; /* 核心要求：绝对不允许出现滚动条 */\n display: flex;\n flex-direction: column;\n color: #4A4A4A; /* 主要文字颜色 */\n box-sizing: border-box; /* 确保padding在尺寸内 */\n }\n\n /* --- 装饰元素 --- */\n /* 顶部装饰：模拟饺子褶皱的柔和波浪 */\n .header-wave {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1;\n }\n \n /* 背景点缀：模拟酱油碟或水渍的圆形 */\n .slide::before {\n content: '';\n position: absolute;\n bottom: -80px;\n right: -80px;\n width: 300px;\n height: 300px;\n background-color: #E8C8A0; /* 饺子皮煮熟后的淡黄色 */\n border-radius: 50%;\n opacity: 0.3;\n z-index: 0;\n }\n\n /* --- 内容区域 --- */\n /* 页面标题 */\n .page-title-container {\n padding: 40px 60px 20px 60px;\n z-index: 2;\n }\n .page-title {\n font-size: 48px;\n font-weight: 700;\n color: #A97155; /* 酱油棕色，突出标题 */\n margin: 0;\n border-left: 8px solid #D24545; /* 辣椒油红色，作为点缀 */\n padding-left: 20px;\n }\n\n /* 页面主要内容 */\n .page-content-container {\n flex-grow: 1;\n padding: 10px 60px 60px 60px;\n z-index: 2;\n line-height: 1.8;\n font-size: 24px;\n overflow: hidden; /* 内容区自身也不能滚动 */\n }\n \n /* 内容区样式示例 */\n .page-content-container ul {\n list-style-type: none;\n padding-left: 20px;\n }\n .page-content-container ul li {\n padding-left: 1.5em;\n text-indent: -1.5em;\n margin-bottom: 12px;\n }\n .page-content-container ul li::before {\n content: '\\f105'; /* Font Awesome 右箭头图标 */\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n color: #5C8374; /* 葱花的绿色 */\n margin-right: 10px;\n }\n .page-content-container a {\n color: #A97155;\n text-decoration: none;\n border-bottom: 2px solid #E8C8A0;\n transition: all 0.2s ease;\n }\n .page-content-container a:hover {\n color: #D24545;\n border-bottom-color: #D24545;\n }\n\n /* --- 页脚与页码 --- */\n .page-footer {\n position: absolute;\n bottom: 25px;\n right: 60px;\n display: flex;\n align-items: center;\n font-size: 18px;\n color: #A97155;\n z-index: 2;\n }\n \n /* 页脚饺子图标 */\n .dumpling-icon {\n width: 32px;\n height: 32px;\n margin-right: 15px;\n }\n\n /* 页码 */\n .page-number {\n font-weight: bold;\n }\n </style>\n</head>\n<body>\n\n <div class=\"slide-container\">\n <div class=\"slide\">\n \n <!-- 顶部装饰波浪SVG (内联，确保自包含) -->\n <svg class=\"header-wave\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1280 80\" preserveAspectRatio=\"none\">\n <path d=\"M1280 0 C1000 60, 800 20, 500 70 C300 90, 100 30, 0 50 L0 0 Z\" fill=\"#E8C8A0\" opacity=\"0.6\"/>\n <path d=\"M1280 0 C1100 40, 900 10, 600 50 C400 70, 200 20, 0 40 L0 0 Z\" fill=\"#E8C8A0\" opacity=\"0.4\"/>\n </svg>\n\n <!-- 1. 页面标题 -->\n <div class=\"page-title-container\">\n <h1 class=\"page-title\">{{ page_title }}</h1>\n </div>\n\n <!-- 2. 页面内容 -->\n <div class=\"page-content-container\">\n <!-- \n 这是主要内容区域。\n 文本、列表、图片和图表都应放置在此处。\n 例如，要插入一个Chart.js图表，可以在这里放置一个 <canvas> 元素。\n <canvas id=\"myChart\" style=\"width:100%;max-width:800px;max-height:400px;\"></canvas>\n -->\n <div id=\"page-content-wrapper\">\n {{ page_content }}\n </div>\n </div>\n\n <!-- 3. 页脚与页码 -->\n <div class=\"page-footer\">\n <!-- 页脚装饰图标SVG (内联) -->\n <svg class=\"dumpling-icon\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M 10 50 C 10 22, 40 10, 50 10 C 60 10, 90 22, 90 50 C 90 78, 60 90, 50 90 C 40 90, 10 78, 10 50 Z\" fill=\"#F5EFE6\" stroke=\"#A97155\" stroke-width=\"5\"/>\n <path d=\"M 50 10 C 55 18, 60 12, 65 18 C 70 12, 75 18, 80 14\" fill=\"none\" stroke=\"#A97155\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n </svg>\n <div class=\"page-number\">\n <span>{{ current_page_number }}</span> / <span>{{ total_page_count }}</span>\n </div>\n </div>\n\n </div>\n </div>\n\n <!-- \n 使用示例:\n 您可以将 {{ page_content }} 占位符替换为实际的HTML内容。\n 比如下面的示例内容：\n -->\n <script>\n // 这是一个示例，用于演示如何动态填充内容\n const sampleContent = `\n <p>这里是您的主要内容区域，支持富文本格式。</p>\n <ul>\n <li><i class=\"fa-solid fa-utensils\" style=\"color: #5C8374;\"></i> <b>主题明确</b>：设计灵感源自传统美食饺子。</li>\n <li><i class=\"fa-solid fa-chart-pie\" style=\"color: #5C8374;\"></i> <b>图表支持</b>：完美兼容 Chart.js, ECharts, D3.js。</li>\n <li><i class=\"fa-solid fa-mobile-screen-button\" style=\"color: #5C8374;\"></i> <b>响应式设计</b>：在任何屏幕上都能保持完美的16:9比例。</li>\n </ul>\n <p>您可以自由插入图片、表格，或者像这样<a href=\"#\">添加一个链接</a>。</p>\n `;\n\n // 实际使用时，您的模板引擎会处理占位符替换\n document.getElementById('page-content-wrapper').innerHTML = sampleContent;\n document.querySelector('.page-title').textContent = '饺子风主题介绍';\n document.querySelector('.page-number span:first-child').textContent = '1';\n document.querySelector('.page-number span:last-child').textContent = '10';\n </script>\n\n</body>\n</html>",
|
||
"tags": [
|
||
"饺子风"
|
||
],
|
||
"is_default": false,
|
||
"export_info": {
|
||
"exported_at": "2025-10-04T06:53:24.510Z",
|
||
"original_id": 17,
|
||
"original_created_at": 1755856369.830841
|
||
}
|
||
} |