diff --git a/demoHtml/flex/README.md b/demoHtml/flex/README.md index 386ea75..44a10b9 100644 --- a/demoHtml/flex/README.md +++ b/demoHtml/flex/README.md @@ -123,6 +123,23 @@ mainData = { } ``` +## 历史任务 +* 实现一个列表页，列表页里面包含多个index.html生成的模板 +* 列表页面的js文件格式请参照index.js的写法，包括使用jquery进行初始化等，保持代码风格一致 +* 列表页面一个子项宽度为400px,从左到右依次排列，超出换行，并且保证换行后每行的每个子项左右间距相同 +* 子项高度根据内容自动撑开 +* 子项的数据参考data.json +``` +子项布局参考 + +image (占满，固定高度) + +name + action btn （action btn 点击后弹出选项 1. 复制 2. 删除 3. 编辑 4. 应用） + +date +``` +* 子项数据直接使用data.json，并复制内部子项10份，更改id和name保证不重复 + @@ -143,3 +160,19 @@ mainData = { - 新的实现方式通过遍历由下划线分割的属性名部分，动态地创建任意层级的嵌套对象。例如，`a_b_c` 会被正确地转换为 `{ a: { b: { c: value } } }`。 - **文件改动**: - `js/index.js`: 更新了 `transformUnderscoreData` 函数的实现逻辑，使其更加灵活和通用。 + +### 本次会话总结 +- **任务**: 优化 `list.html` 列表页的布局和交互功能。 +- **布局优化点**: + - **最后一行对齐问题**: 解决了由于 `justify-content: space-around` 导致的最后一行项目居中或分散的问题，通过将 `#list-panel` 的 `justify-content` 改为 `flex-start`，确保最后一行从左到右对齐。 + - **子项宽度及排版**: 将 `.list-item` 的固定宽度 `400px` 修改为 `calc(25% - 7.5px)`，实现了每行4个子项的弹性布局，并合理处理了子项间的 `gap` 间距。 + - **底部内边距缺失**: 解决了 `#list-panel` 底部 `padding` 显示不全的问题，通过为 `#list-panel` 添加 `width: 100%`，确保其在 flex 父容器中正确撑开。 +- **交互优化点**: + - **模板名称显示**: 修复了列表项中模板名称 (`item.name`) 未显示的问题，通过在 `js/list.js` 中动态生成的 HTML 结构中添加 `${item.name}`。 + - **操作按钮样式优化**: 优化了点击“...”按钮弹出的操作菜单（`.action-menu`）的样式： + - 为 `.action-menu` 添加 `min-width: 80px;`，防止文字换行。 + - 为 `.action-menu button` 添加 `white-space: nowrap;` 禁止文字换行，将 `text-align` 改为 `center`，并增加 `transition` 效果。 + - **操作按钮事件**: 为操作菜单中的四个按钮（复制、删除、编辑、应用）添加了点击事件监听，点击时会在控制台打印相应的操作名称。 +- **文件改动**: + - `css/list.css`: 修改了 `#list-panel` 和 `.action-menu` 的样式，以及 `.list-item` 和 `.action-menu button` 的样式。 + - `js/list.js`: 修改了 `listItem` 的 HTML 模板以显示名称，并添加了四个操作按钮的点击事件监听器。 \ No newline at end of file diff --git a/demoHtml/flex/css/list.css b/demoHtml/flex/css/list.css new file mode 100644 index 0000000..c3d1a0d --- /dev/null +++ b/demoHtml/flex/css/list.css @@ -0,0 +1,83 @@ +#main { + height: unset; + overflow-y: auto; /* 允许垂直滚动 */ +} + +#list-panel { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 10px; /* 调整子项内容间距 */ + padding: 20px; + width: 100%; + overflow-y: scroll; +} + +.list-item { + width: calc(25% - 7.5px); + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; +} + +.list-item-image { + width: 100%; + height: 225px; /* 16:9 aspect ratio for 400px width */ + object-fit: cover; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.list-item-content { + padding: 10px 15px; /* 调整子项内容间距 */ + display: flex; + justify-content: space-between; + align-items: center; +} +.list-item-name { + font-size: 18px; + font-weight: 600; +} +.list-item-actions { + position: relative; +} +.action-btn { + background: none; + border: none; + cursor: pointer; + font-size: 20px; +} +.action-menu { + display: none; + position: absolute; + right: 0; + top: 30px; + background-color: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 1; + min-width: 80px; + padding: 5px 0; +} +.action-menu button { + display: block; + width: 100%; + padding: 8px 12px; + border: none; + background: none; + text-align: center; + cursor: pointer; + white-space: nowrap; + transition: background-color 0.2s ease; + color: #333; +} +.action-menu button:hover { + background-color: #f0f0f0; +} +.list-item-date { + padding: 0 15px 10px; /* 调整子项内容间距 */ + font-size: 12px; + color: #999; +} diff --git a/demoHtml/flex/data.json b/demoHtml/flex/data.json index be63f32..ec3b5a5 100644 --- a/demoHtml/flex/data.json +++ b/demoHtml/flex/data.json @@ -1,136 +1,1412 @@ -{ - "mainData": { - "type": "screen", - "id": "grid_mjwdt2rookzdwukwhkd", - "children": [ - { - "w": 320, - "type": "text", - "childrenType": "", - "name": "文本", - "background": "#e15b5b91", - "fontSize": 20, - "color": "#22ff0091", - "text": "我是测试文本", - "fontWeight": "normal", - "eventsType": "click", - "eventsAction": "", - "defaultFocus": false, - "leftId": "", - "rightId": "", - "upId": "", - "downId": "", - "focusedStyle_background": "", - "focusedStyle_border_width": 0, - "focusedStyle_border_color": "", - "focusedStyle_scale": 1, - "x": 1600, - "y": 0, - "id": "text_mjwed122tesl6qelizj", - "content": "我是测试文本", - "xCopy": 10, - "yCopy": 0, - "wCopy": 2, - "hCopy": 1, - "h": 120 - }, - { - "w": 320, - "h": 240, - "type": "image", - "name": "图片", - "background": "#114db58f", - "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", - "eventsType": "click", - "eventsAction": "", - "defaultFocus": false, - "leftId": "", - "rightId": "", - "upId": "", - "downId": "", - "focusedStyle_background": "", - "focusedStyle_border_width": 0, - "focusedStyle_border_color": "", - "focusedStyle_scale": 1, - "x": 0, - "y": 840, - "id": "image_mjweczmglkeuds146x", - "content": "\n \n ", - "xCopy": 0, - "yCopy": 7, - "wCopy": 2, - "hCopy": 2 - } - ], - "version": "1.0.0", - "width": 1920, - "height": 1080, - "background": "", - "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" +[ + { + "id": "item1", + "name": "测试模板1", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } }, - "welcomeData": { - "type": "screen", - "id": "grid_mjwdt2rmpf3kas429w", - "children": [ - { - "w": 320, - "h": 240, - "type": "image", - "name": "图片111", - "background": "#4addb8c7", - "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", - "eventsType": "click", - "eventsAction": "", - "defaultFocus": false, - "leftId": "", - "rightId": "", - "upId": "", - "downId": "", - "focusedStyle_background": "#000000", - "focusedStyle_border_width": "2", - "focusedStyle_border_color": "#ffffff", - "focusedStyle_scale": "1.2", - "x": 160, - "y": 720, - "id": "image_mjwdt6mv4cx4dmc9e7y", - "content": "\n \n ", - "xCopy": 1, - "yCopy": 6, - "wCopy": 2, - "hCopy": 2 - }, - { - "w": 320, - "h": 240, - "type": "image", - "name": "图片", - "background": "#14009629", - "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", - "eventsType": "click", - "eventsAction": "", - "defaultFocus": false, - "leftId": "", - "rightId": "", - "upId": "", - "downId": "", - "focusedStyle_background": "", - "focusedStyle_border_width": 0, - "focusedStyle_border_color": "", - "focusedStyle_scale": 1, - "x": 1600, - "y": 840, - "id": "image_mjwdtdn85h9ngxddaiv", - "content": "\n \n ", - "xCopy": 10, - "yCopy": 7, - "wCopy": 2, - "hCopy": 2 - } - ], - "version": "1.0.0", - "width": 1920, - "height": 1080, - "background": "", - "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + { + "id": "item2", + "name": "测试模板2", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item3", + "name": "测试模板3", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item4", + "name": "测试模板4", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item5", + "name": "测试模板5", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item6", + "name": "测试模板6", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item7", + "name": "测试模板7", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item8", + "name": "测试模板8", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item9", + "name": "测试模板9", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } + }, + { + "id": "item10", + "name": "测试模板10", + "createTime": "2025-12-20 00:00:00", + "updateTime": "2026-01-02 00:00:00", + "isApply": true, + "mainData": { + "type": "screen", + "id": "grid_mjwdt2rookzdwukwhkd", + "children": [ + { + "w": 320, + "type": "text", + "childrenType": "", + "name": "鏂囨湰", + "background": "#e15b5b91", + "fontSize": 20, + "color": "#22ff0091", + "text": "鎴戞槸娴嬭瘯鏂囨湰", + "fontWeight": "normal", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 0, + "id": "text_mjwed122tesl6qelizj", + "content": "\u003cspan style=\"font-size: 20px; color: rgba(34, 255, 0, 0.57); font-weight: normal;\"\u003e鎴戞槸娴嬭瘯鏂囨湰\u003c/span\u003e", + "xCopy": 10, + "yCopy": 0, + "wCopy": 2, + "hCopy": 1, + "h": 120 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#114db58f", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 0, + "y": 840, + "id": "image_mjweczmglkeuds146x", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 0, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + }, + "welcomeData": { + "type": "screen", + "id": "grid_mjwdt2rmpf3kas429w", + "children": [ + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖111", + "background": "#4addb8c7", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "#000000", + "focusedStyle_border_width": "2", + "focusedStyle_border_color": "#ffffff", + "focusedStyle_scale": "1.2", + "x": 160, + "y": 720, + "id": "image_mjwdt6mv4cx4dmc9e7y", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 1, + "yCopy": 6, + "wCopy": 2, + "hCopy": 2 + }, + { + "w": 320, + "h": 240, + "type": "image", + "name": "鍥剧墖", + "background": "#14009629", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png", + "eventsType": "click", + "eventsAction": "", + "defaultFocus": false, + "leftId": "", + "rightId": "", + "upId": "", + "downId": "", + "focusedStyle_background": "", + "focusedStyle_border_width": 0, + "focusedStyle_border_color": "", + "focusedStyle_scale": 1, + "x": 1600, + "y": 840, + "id": "image_mjwdtdn85h9ngxddaiv", + "content": "\n \u003cimg class=\"image-container default-image\" src=\"https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png\"\u003e\n ", + "xCopy": 10, + "yCopy": 7, + "wCopy": 2, + "hCopy": 2 + } + ], + "version": "1.0.0", + "width": 1920, + "height": 1080, + "background": "", + "image": "https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png" + } } -} +] diff --git a/demoHtml/flex/js/list.js b/demoHtml/flex/js/list.js new file mode 100644 index 0000000..79f08af --- /dev/null +++ b/demoHtml/flex/js/list.js @@ -0,0 +1,60 @@ +(function () { + $(function () { + $.getJSON('data.json', function (data) { + var listPanel = $('#list-panel'); + $.each(data, function (index, item) { + var listItem = ` +
+ ${item.name} +
+ ${item.name} +
+ +
+ + + + +
+
+
+
+ 更新时间：${item.updateTime} +
+
+ `; + listPanel.append(listItem); + }); + + // Action button click handler + listPanel.on('click', '.action-btn', function (e) { + e.stopPropagation(); + var menu = $(this).siblings('.action-menu'); + $('.action-menu').not(menu).hide(); + menu.toggle(); + }); + + // Hide menu when clicking outside + $(document).on('click', function () { + $('.action-menu').hide(); + }); + + // Event handlers for action menu buttons + listPanel.on('click', '.copy-btn', function () { + console.log('复制'); + }); + + listPanel.on('click', '.delete-btn', function () { + console.log('删除'); + }); + + listPanel.on('click', '.edit-btn', function () { + console.log('编辑'); + }); + + listPanel.on('click', '.apply-btn', function () { + console.log('应用'); + }); + }); + }); +})(); diff --git a/demoHtml/flex/list.html b/demoHtml/flex/list.html new file mode 100644 index 0000000..218ac7f --- /dev/null +++ b/demoHtml/flex/list.html @@ -0,0 +1,31 @@ + + + + + + 模板列表 + + + + + +
+ +
+
+
+
+ + +