Files
LandPPT/template_examples/大气红.json

14 lines
9.1 KiB
JSON
Raw Normal View History

2025-11-07 09:05:51 +08:00
{
"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 <!-- : <EFBFBD><EFBFBD>
"tags": [
"大气红"
],
"is_default": false,
"export_info": {
"exported_at": "2025-10-04T06:54:11.328Z",
"original_id": 13,
"original_created_at": 1755854080.1743069
}
}