Files
LandPPT/template_examples/速度黄.json

14 lines
8.3 KiB
JSON
Raw Normal View History

2025-11-07 09:05:53 +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 <!-- 外部库支持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>
"tags": [
"速度黄"
],
"is_default": false,
"export_info": {
"exported_at": "2025-10-04T06:53:01.960Z",
"original_id": 12,
"original_created_at": 1755852075.756903
}
}