diff --git a/demoHtml/flex/config.json b/demoHtml/flex/config.json
new file mode 100644
index 0000000..c6a7c15
--- /dev/null
+++ b/demoHtml/flex/config.json
@@ -0,0 +1,680 @@
+{
+    "layoutId": "simple_buttons_images", //界面模板ID
+    "version": "1.0.0",				   //数据版本
+    "name": "Test 222222",			   //模板名称
+    "width": 1920,						//模板设计宽度，必须严格填写，涉及绘制时按比例缩放
+    "height": 1080,						//模板设计高度，必须严格填写，涉及绘制时按比例缩放
+    "focusConfig": {
+      "defaultFocusId": "btn_home"		//界面绘制完成后，第一个获得焦点的组件ID
+    },
+    "rootView": {
+      "id": "root_container",		//组件ID
+      "type": "LinearLayout",		//组件类型
+      "x": 0,						//x轴坐标，暂时用不到。在AbsoluteLayout里才会用到
+      "y": 0, 					//y轴坐标，暂时用不到。在AbsoluteLayout里才会用到
+      "leftMargin": 0, 	//向左边距
+      "topMargin": 0,		//向上边距
+      "rightMargin": 0,	//向右边距
+      "bottomMargin": 0,	//向下边距
+      "width": -1,		//MATCH_PARENT = -1;    WRAP_CONTENT = -2;，其他>=0则按数据绘制实际大小
+      "height": -1,		//MATCH_PARENT = -1;    WRAP_CONTENT = -2;，其他>=0则按数据绘制实际大小
+      "orientation": 1,	//LinearLayout 特有属性，HORIZONTAL=0，VERTICAL=1
+      "background": {		    //所有background，不管在那一层均可设置如下属性
+        "color": "#FFFFFF", 	//背景颜色
+        "imageUrl": "",		//背景图片
+        "cornerRadius": {		//圆角
+          "topLeft": 8,		//上左圆角
+          "topRight": 8,		//上右圆角
+          "bottomLeft": 8,	//下左圆角
+          "bottomRight": 8	//下右圆角
+        },
+        "border": {			//边框
+          "width": 2,			//边框线宽
+          "color": "#1976D2"	//边框颜色
+        }
+      },
+      "children": [
+        {
+          "id": "header",//组件ID
+          "type": "LinearLayout",//组件类型
+          "x": 0,
+          "y": 10,
+          "leftMargin": 0, 
+          "topMargin": 0,
+          "rightMargin": 0,
+          "bottomMargin": 0,
+          "width": 1920,
+          "height": 100,
+          "orientation": 0,//LinearLayout 特有属性，HORIZONTAL=0，VERTICAL=1
+          "background": {	
+            "color": "#2196F3"
+          },
+          "children": [
+            {
+              "id": "title_text",
+              "type": "TextView",
+              "x": 0,
+              "y": 20,
+              "leftMargin": 0, 
+              "topMargin": 0,
+              "rightMargin": 0,
+              "bottomMargin": 0,
+              "width": 1920,
+              "height": 60,
+              "text": "Test 33333333333333", //文本内容
+              "textSize": 24,				   //文字大小
+              "textColor": "#FFFFFF",		   //文字颜色
+              "bold": true,				   //是否加粗
+              "focusable": false			   //是否可获得焦点
+            }
+          ]
+        },
+        {
+          "id": "main_content",//组件ID
+          "type": "LinearLayout",//组件类型
+          "x": 0,
+          "y": 80,
+          "leftMargin": 0, 
+          "topMargin": 0,
+          "rightMargin": 0,
+          "bottomMargin": 0,
+          "width": 1920,
+          "height": -2,
+          "orientation": 1,
+          "background": {
+            "color": "#FFFFFF"
+          },
+          "children": [
+            {
+              "id": "buttons_row",//组件ID
+              "type": "LinearLayout",//组件类型
+              "x": 0,
+              "y": 0,
+              "leftMargin": 0, 
+              "topMargin": 40,
+              "rightMargin": 0,
+              "bottomMargin": 0,
+              "width": 1920,
+              "height": 100,
+              "orientation": 0,
+              "gravity": 17, //17：内容居中，48：内容居上，80：内容居下，3：内容居左，5：内容居右，（还有左上，右上，左下，右下）
+              "background": {
+                "color": "#673AB7"
+              },
+              "children": [
+              {
+                  "id": "btn_home",
+                  "type": "LinearLayout",
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 0,
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 100,
+                  "height": 100,
+                  "orientation": 1,
+                  "gravity": 17,
+                  "focusable": true			   //是否可获得焦点，若设置了true，则优先该组件获取到焦点
+                  "children": [
+                    {
+                      "id": "btn_home1",
+                      "type": "TextView",
+                      "x": 0,
+                      "y": 0,
+                      "leftMargin": 0,
+                      "topMargin": 0,
+                      "rightMargin": 0,
+                      "bottomMargin": 0,
+                      "width": 100,
+                      "height": 40,
+                      "text": "首页",
+                      "gravity": 17,
+                      "textSize": 20,
+                      "textColor": "#29303f",
+                      "background": {
+                        "color": "#2196F3",
+                        "cornerRadius": {
+                          "topLeft": 8,
+                          "topRight": 8,
+                          "bottomLeft": 8,
+                          "bottomRight": 8
+                        },
+                        "border": {
+                          "width": 2,
+                          "color": "#1976D2"
+                        }
+                      }
+                    },
+                    {
+                      "id": "image_nature1",
+                      "type": "ImageView",
+                      "x": 0,
+                      "y": 0,
+                      "leftMargin": 0,
+                      "topMargin": 0,
+                      "rightMargin": 0,
+                      "bottomMargin": 0,
+                      "width": 50,
+                      "height": 50,
+                      "imageUrl": "https://images.unsplash.com/photo-1501854140801-50d01698950b",		//图片地址，可在线地址，也可本地文件名
+                      "placeholder": "https://via.placeholder.com/400x400/CCCCCC/FFFFFF?text=Nature", //占位图片地址，可在线地址，也可本地文件名
+                      "scaleType": "CENTER_CROP",    //        FIT_XY, FIT_CENTER, CENTER_CROP, CENTER_INSIDE                                           
+                      "background": {
+                        "color": "#E0E0E0",
+                        "cornerRadius": {
+                          "topLeft": 12,
+                          "topRight": 12,
+                          "bottomLeft": 12,
+                          "bottomRight": 12
+                        }
+                      }
+                    }
+                  ],
+                  "background": {
+                    "color": "#2196F3",
+                    "cornerRadius": {
+                      "topLeft": 8,
+                      "topRight": 8,
+                      "bottomLeft": 8,
+                      "bottomRight": 8
+                    },
+                    "border": {			//边框
+                      "width": 2,			//边框线宽
+                      "color": "#1976D2"	//边框颜色
+                    }
+                  },
+                  "focusConfig": {		//焦点配置
+                    "upId": null,			//遥控板操作下一个上移焦点ViewID
+                    "downId": "images_row",//遥控板操作下一个下移焦点ViewID
+                    "leftId": null,			//遥控板操作下一个左移焦点ViewID
+                    "rightId": "btn_settings",//遥控板操作下一个右移焦点ViewID
+                    "focusable": true,	//是否可获得焦点
+                    "focusableInTouchMode": false,	//在触摸模式下是否可获得焦点
+                    "defaultFocus": true,		//界面绘制完成后，是否第一个获得焦点
+                    "focusedStyle": {				//获得焦点时
+                      "background": {
+                        "color": "#1976D2"		//背景颜色
+                      },
+                      "border": {					//边框
+                        "width": 3,				//边框线宽
+                        "color": "#0D47A1"		//边框颜色
+                      },
+                      "scale": 1.1,				//缩放比例，动画默认300毫秒
+                      "focusAnimation": "scale",	//scale：缩放，pulse：脉冲（先放大，再缩小回原来大小）
+                      "animationDuration": 300	//动画持续时间，毫秒
+                    },
+            
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "首页按钮被点击"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "btn_settings",//组件ID
+                  "type": "TextView",//组件类型
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 40, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 200,
+                  "height": 80,
+                  "text": "设置",
+                  "gravity": 17,
+                  "textSize": 20,
+                  "textColor": "#29303f",
+                  "background": {
+                    "color": "#FF9800",
+                    "cornerRadius": {
+                      "topLeft": 8,
+                      "topRight": 8,
+                      "bottomLeft": 8,
+                      "bottomRight": 8
+                    }
+                  },
+                  "focusConfig": {
+                    "upId": null,
+                    "downId": "images_row",
+                    "leftId": "btn_home",
+                    "rightId": "btn_info",
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#F57C00"
+                      },
+                      "border": {
+                        "width": 3,
+                        "color": "#E65100"
+                      },
+                      "scale": 1.1,
+                      "focusAnimation": "scale",	//scale：缩放，pulse：脉冲（先放大，再缩小回原来大小）
+                      "animationDuration": 300	//动画持续时间，毫秒
+                    }
+                  },
+                  "events": [						//点击事件，定义跳转到哪里，可以定义APP内部功能或者网址
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "设置按钮被点击"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "btn_info",//组件ID
+                  "type": "TextView",//组件类型
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 40, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 200,
+                  "height": 80,
+                  "text": "信息",
+                  "gravity": 17,
+                  "textSize": 20,
+                  "textColor": "#29303f",
+                  "background": {
+                    "color": "#4CAF50",
+                    "cornerRadius": {
+                      "topLeft": 8,
+                      "topRight": 8,
+                      "bottomLeft": 8,
+                      "bottomRight": 8
+                    }
+                  },
+                  "focusConfig": {
+                    "upId": null,
+                    "downId": "images_row",
+                    "leftId": "btn_settings",
+                    "rightId": "btn_help",
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#388E3C"
+                      },
+                      "border": {
+                        "width": 3,
+                        "color": "#1B5E20"
+                      },
+                      "scale": 1.1,
+                      "focusAnimation": "scale",	//scale：缩放，pulse：脉冲（先放大，再缩小回原来大小）
+                      "animationDuration": 300	//动画持续时间，毫秒
+                    }
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "信息按钮被点击"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "btn_help",//组件ID
+                  "type": "TextView",//组件类型
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 40, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 200,
+                  "height": 80,
+                  "text": "帮助",
+                  "gravity": 17,
+                  "textSize": 20,
+                  "textColor": "#29303f",
+                  "background": {
+                    "color": "#9C27B0",
+                    "cornerRadius": {
+                      "topLeft": 8,
+                      "topRight": 8,
+                      "bottomLeft": 8,
+                      "bottomRight": 8
+                    }
+                  },
+                  "focusConfig": {
+                    "upId": null,
+                    "downId": "images_row",
+                    "leftId": "btn_info",
+                    "rightId": null,
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#7B1FA2"
+                      },
+                      "border": {
+                        "width": 3,
+                        "color": "#4A148C"
+                      },
+                      "scale": 1.1,
+                      "focusAnimation": "scale",	//scale：缩放，pulse：脉冲（先放大，再缩小回原来大小）
+                      "animationDuration": 300	//动画持续时间，毫秒
+                    }
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "帮助按钮被点击"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": "images_row",//组件ID
+              "type": "LinearLayout",//组件类型
+              "x": 0,
+              "y": 0,
+              "leftMargin": 0, 
+              "topMargin": 80,
+              "rightMargin": 0,
+              "bottomMargin": 0,
+              "width": 1920,
+              "height": 500,
+              "orientation": 0,
+              "gravity": 17,
+              "background": {
+                "color": "#FFFFFF"
+              },
+              "children": [
+                {
+                  "id": "image_nature",
+                  "type": "ImageView",
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 0, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 400,
+                  "height": 400,
+                  "imageUrl": "https://images.unsplash.com/photo-1501854140801-50d01698950b",
+                  "placeholder": "https://via.placeholder.com/400x400/CCCCCC/FFFFFF?text=Nature",
+                  "scaleType": "CENTER_CROP",
+                  "background": {
+                    "color": "#E0E0E0",
+                    "cornerRadius": {  //圆角
+                      "topLeft": 12,
+                      "topRight": 12,
+                      "bottomLeft": 12,
+                      "bottomRight": 12
+                    }
+                  },
+                  "shadow": {//阴影配置
+                    "radius": 8,
+                    "offsetX": 0,
+                    "offsetY": 4,
+                    "color": "#20000000"
+                  },
+                  "focusConfig": {
+                    "upId": "btn_home",
+                    "downId": null,
+                    "leftId": null,
+                    "rightId": "image_tech",
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#BBDEFB"
+                      },
+                      "border": {
+                        "width": 4,
+                        "color": "#2196F3"
+                      },
+                      "scale": 1.05,                  
+                      "focusAnimation": "border",
+                      "animationDuration": 300
+                    }
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "自然图片被点击",
+                        "imageId": "nature"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "image_tech",//组件ID
+                  "type": "ImageView",//组件类型
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 80, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 400,
+                  "height": 400,
+                  "imageUrl": "https://images.unsplash.com/photo-1518709268805-4e9042af2176",
+                  "placeholder": "https://via.placeholder.com/400x400/CCCCCC/FFFFFF?text=Tech",
+                  "scaleType": "CENTER_CROP",
+                  "background": {
+                    "color": "#E0E0E0",
+                    "cornerRadius": {
+                      "topLeft": 12,
+                      "topRight": 12,
+                      "bottomLeft": 12,
+                      "bottomRight": 12
+                    }
+                  },
+                  "shadow": {
+                    "radius": 8,
+                    "offsetX": 0,
+                    "offsetY": 4,
+                    "color": "#20000000"
+                  },
+                  "focusConfig": {
+                    "upId": "btn_settings",
+                    "downId": null,
+                    "leftId": "image_nature",
+                    "rightId": "image_food",
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#FFECB3"
+                      },
+                      "border": {
+                        "width": 4,
+                        "color": "#FF9800"
+                      },
+                      "scale": 1.05,
+                      "focusAnimation": "border",
+                      "animationDuration": 300
+                    }
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "科技图片被点击",
+                        "imageId": "tech"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "image_food",//组件ID
+                  "type": "ImageView",//组件类型
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 80, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 400,
+                  "height": 400,
+                  "imageUrl": "https://images.unsplash.com/photo-1565958011703-44f9829ba187",
+                  "placeholder": "https://via.placeholder.com/400x400/CCCCCC/FFFFFF?text=Food",
+                  "scaleType": "CENTER_CROP",
+                  "background": {
+                    "color": "#E0E0E0",
+                    "cornerRadius": {
+                      "topLeft": 12,
+                      "topRight": 12,
+                      "bottomLeft": 12,
+                      "bottomRight": 12
+                    }
+                  },
+                  "shadow": {			//阴影配置
+                    "radius": 8,
+                    "offsetX": 0,
+                    "offsetY": 4,
+                    "color": "#20000000"
+                  },
+                  "focusConfig": {
+                    "upId": "btn_info",
+                    "downId": null,
+                    "leftId": "image_tech",
+                    "rightId": "image_travel",
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#C8E6C9"
+                      },
+                      "border": {
+                        "width": 4,
+                        "color": "#4CAF50"
+                      },
+                      "scale": 1.05,
+                      "focusAnimation": "pulse",
+                      "animationDuration": 300
+                    }
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "美食图片被点击",
+                        "imageId": "food"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "id": "image_travel",//组件ID
+                  "type": "ImageView",//组件类型
+                  "x": 0,
+                  "y": 0,
+                  "leftMargin": 80, 
+                  "topMargin": 0,
+                  "rightMargin": 0,
+                  "bottomMargin": 0,
+                  "width": 400,
+                  "height": 400,
+                  "imageUrl": "https://images.unsplash.com/photo-1488646953014-85cb44e25828",
+                  "placeholder": "https://via.placeholder.com/400x400/CCCCCC/FFFFFF?text=Travel",
+                  "scaleType": "CENTER_CROP",
+                  "background": {
+                    "color": "#E0E0E0",
+                    "cornerRadius": {
+                      "topLeft": 12,
+                      "topRight": 12,
+                      "bottomLeft": 12,
+                      "bottomRight": 12
+                    }
+                  },
+                  "shadow": {
+                    "radius": 8,
+                    "offsetX": 0,
+                    "offsetY": 4,
+                    "color": "#20000000"
+                  },
+                  "focusConfig": {
+                    "upId": "btn_help",
+                    "downId": null,
+                    "leftId": "image_food",
+                    "rightId": null,
+                    "focusable": true,
+                    "focusableInTouchMode": false,
+                    "focusedStyle": {
+                      "background": {
+                        "color": "#E1BEE7"
+                      },
+                      "border": {
+                        "width": 4,
+                        "color": "#9C27B0"
+                      },
+                      "scale": 1.05
+                    }
+                  },
+                  "events": [
+                    {
+                      "type": "click",
+                      "action": "custom",
+                      "params": {
+                        "message": "旅行图片被点击",
+                        "imageId": "travel"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "footer",//组件ID
+          "type": "LinearLayout",//组件类型
+          "x": 0,
+          "y": 0,
+          "leftMargin": 0, 
+          "topMargin": 80,
+          "rightMargin": 0,
+          "bottomMargin": 0,
+          "width": 1920,
+          "height": 100,
+          "orientation": 0,
+          "gravity": 17,
+          "background": {
+            "color": "#263238"
+          },
+          "children": [
+            {
+              "id": "footer_text",//组件ID
+              "type": "TextView",//组件类型
+              "x": 0,
+              "y": 30,
+              "leftMargin": 0, 
+              "topMargin": 0,
+              "rightMargin": 0,
+              "bottomMargin": 0,
+              "width": 1920,
+              "height": 40,
+              "text": "Test 1111111",
+              "textSize": 24,
+              "textColor": "#B0BEC5",
+              "gravity": 17,
+              "focusable": false
+            }
+          ]
+        }
+      ]
+    }
+  }
\ No newline at end of file
diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index 9ea208a..72107d3 100644
--- a/demoHtml/flex/css/index.css
+++ b/demoHtml/flex/css/index.css
@@ -229,6 +229,10 @@ form {
     border-color: #007bff;
 }
 
+.form-item select {
+    width: 100%;
+}
+
 .form-actions {
     display: flex;
     justify-content: space-between;
diff --git a/demoHtml/flex/image/1.png b/demoHtml/flex/image/1.png
new file mode 100644
index 0000000..9f48814
Binary files /dev/null and b/demoHtml/flex/image/1.png differ
diff --git a/demoHtml/flex/image/2.jpg b/demoHtml/flex/image/2.jpg
new file mode 100644
index 0000000..af06f66
Binary files /dev/null and b/demoHtml/flex/image/2.jpg differ
diff --git a/demoHtml/flex/image/3.jpg b/demoHtml/flex/image/3.jpg
new file mode 100644
index 0000000..50f170a
Binary files /dev/null and b/demoHtml/flex/image/3.jpg differ
diff --git a/demoHtml/flex/image/4.jpg b/demoHtml/flex/image/4.jpg
new file mode 100644
index 0000000..157844c
Binary files /dev/null and b/demoHtml/flex/image/4.jpg differ
diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index e19ff22..eb46171 100644
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@@ -38,22 +38,10 @@
                     </div>
                     <div class="components-list">
                         <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
+                            <div class="grid-stack-item-content"><span>图片</span></div>
                         </div>
                         <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><i class="fas fa-search"></i><span>搜索</span></div>
-                        </div>
-                        <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><i class="fas fa-tv"></i><span>热门频道</span></div>
-                        </div>
-                        <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><i class="fas fa-video"></i><span>直播</span></div>
-                        </div>
-                        <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
-                        </div>
-                        <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
+                            <div class="grid-stack-item-content"><span>文字</span></div>
                         </div>
                     </div>
                     <div
@@ -85,12 +73,29 @@
                     <div class="wait-box">请选择组件</div>
                     <form class="hidden">
                         <div class="form-item">
-                            <label for="name">名称</label>
+                            <label for="childrenType">组件子类型</label>
+                            <input
+                                type="text"
+                                id="childrenType"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="name">组件名称</label>
                             <input
                                 type="text"
                                 id="name"
                             />
                         </div>
+                        <div class="form-item">
+                            <label for="image">背景图片</label>
+                            <select id="image">
+                                <option value="">请选择</option>
+                                <option value="./image/1.png">图片一</option>
+                                <option value="./image/2.jpg">图片二</option>
+                                <option value="./image/3.jpg">图片三</option>
+                                <option value="./image/4.jpg">图片四</option>
+                            </select>
+                        </div>
                         <div class="form-item">
                             <label for="background">背景颜色</label>
                             <input
@@ -113,23 +118,65 @@
                             />
                         </div>
                         <div class="form-item">
-                            <label for="icon">图标名称</label>
+                            <label for="text">文字内容</label>
+                            <input
+                                type="text"
+                                id="text"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="fontWeight">文字宽度</label>
                             <input
                                 type="text"
-                                id="icon"
+                                id="fontWeight"
                             />
                         </div>
                         <div class="form-item">
-                            <label for="detail">描述</label>
-                            <textarea id="detail"></textarea>
+                            <label for="eventsType">事件类型</label>
+                            <input
+                                type="text"
+                                id="eventsType"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="eventsAction">事件动作</label>
+                            <input
+                                type="text"
+                                id="eventsAction"
+                            />
                         </div>
                         <div class="form-item">
-                            <label for="link">跳转链接</label>
+                            <label for="defaultFocus">默认聚焦</label>
                             <input
                                 type="text"
-                                id="link"
+                                id="defaultFocus"
                             />
                         </div>
+                        <div class="form-item">
+                            <label for="leftId">向左侧移动组件ID</label>
+                            <select id="leftId">
+                                <option value="">请选择</option>
+                            </select>
+                        </div>
+                        <div class="form-item">
+                            <label for="rightId">向右侧移动组件ID</label>
+                            <select id="rightId">
+                                <option value="">请选择</option>
+                            </select>
+                        </div>
+                        <div class="form-item">
+                            <label for="upId">向上侧移动组件ID</label>
+                            <select id="upId">
+                                <option value="">请选择</option>
+                            </select>
+                        </div>
+                        <div class="form-item">
+                            <label for="downId">向下侧移动组件ID</label>
+                            <select id="downId">
+                                <option value="">请选择</option>
+                            </select>
+                        </div>
+
                         <!-- <div class="form-actions">
                             <button
                                 type="button"
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index 6dbfecb..40182fd 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -18,9 +18,13 @@
             initData = {
                 id: `grid_${generateUniqueId()}`,
                 children: [],
+                version: '1.0.0',
+                width: 1920,
+                height: 1080,
             };
         } else {
             initData = JSON.parse(initDataStorage);
+            conputedInitData('init');
         }
         console.log(initData, 'initData');
 
@@ -43,18 +47,38 @@
         });
         GridStack.setupDragIn('#components-panel .component-item', undefined, [
             {
-                w: 12,
-                h: 1,
-                type: 'banner',
-                name: '我是轮播图',
-                fontSize: 14,
-                color: '#333',
+                w: 2,
+                h: 4,
+                type: 'image',
+                name: '图片',
+                image: '',
+                eventsType: 'click',
+                eventsAction: '',
+                defaultFocus: false,
+                leftId: '',
+                rightId: '',
+                upId: '',
+                downId: '',
+            },
+            {
+                w: 2,
+                h: 2,
+                type: 'text',
+                childrenType: '',
+                name: '文本',
                 background: '#fff',
-                detail: '',
-                icon: 'fa-image',
-                link: '',
+                fontSize: '14px',
+                color: '#333',
+                text: '文本',
+                fontWeight: 'normal',
+                eventsType: 'click',
+                eventsAction: '',
+                defaultFocus: false,
+                leftId: '',
+                rightId: '',
+                upId: '',
+                downId: '',
             },
-            { w: 2, h: 1 },
         ]);
         console.log(grid, 'grid实例');
 
@@ -98,6 +122,41 @@
             }
             // 将当前选中组件的属性显示在右侧列表中
             setCurrentComponentProps(currentComponent);
+            // 设置上下左右移动组件ID
+            setMoveComponentId(currentComponent);
+        });
+    };
+
+    // 设置上下左右移动组件ID
+    var setMoveComponentId = function (component) {
+        const allComponents = grid.save();
+        if (allComponents.length <= 1) {
+            return;
+        }
+
+        setMoveComponentHtml('leftId', component, allComponents);
+        setMoveComponentHtml('rightId', component, allComponents);
+        setMoveComponentHtml('upId', component, allComponents);
+        setMoveComponentHtml('downId', component, allComponents);
+    };
+
+    var setMoveComponentHtml = function (idName, component, allComponents) {
+        let componentsHtml = [{ value: '', text: '请选择' }];
+        allComponents
+            .filter((item) => item.id !== component.id)
+            .map((item) => {
+                componentsHtml.push({ value: item.id, text: `${item.name}(${item.id})`, selected: item.id === component[idName] });
+            });
+        let el = $(`#${idName}`);
+        el.empty();
+        componentsHtml.forEach((item) => {
+            el.append(
+                $('<option>', {
+                    value: item.value,
+                    text: item.text,
+                    selected: item.selected || false,
+                })
+            );
         });
     };
 
@@ -106,7 +165,6 @@
             currentComponent = null;
             // 右侧显示请选择组件
             if (!$('#props-panel').find('wait-box').is(':visible')) {
-                console.log('111');
                 $('#props-panel').find('.wait-box').show();
                 $('#props-panel').find('form').hide();
             }
@@ -116,33 +174,74 @@
     //将当前选中组件的属性显示在右侧列表中
     var setCurrentComponentProps = function (component) {
         const form = $('#props-panel').find('form');
+        if (component.hasOwnProperty('childrenType')) {
+            form.find('#childrenType').val(component.childrenType);
+            form.find('#childrenType').parent().show();
+        } else {
+            form.find('#childrenType').parent().hide();
+        }
+
         form.find('#name').val(component.name);
-        form.find('#background').val(component.background);
-        form.find('#fontSize').val(component.fontSize);
-        form.find('#color').val(component.color);
-        form.find('#icon').val(component.icon);
-        form.find('#detail').val(component.detail);
-        form.find('#link').val(component.link);
+
+        if (component.hasOwnProperty('image')) {
+            form.find('#image').val(component.image);
+            form.find('#image').parent().show();
+        } else {
+            form.find('#image').parent().hide();
+        }
+
+        if (component.hasOwnProperty('background')) {
+            form.find('#background').val(component.background);
+            form.find('#background').parent().show();
+        } else {
+            form.find('#background').parent().hide();
+        }
+
+        if (component.type === 'text') {
+            form.find('#text').val(component.text);
+            form.find('#fontSize').val(component.fontSize);
+            form.find('#color').val(component.color);
+            form.find('#fontWeight').val(component.fontWeight);
+            form.find('#text').parent().show();
+            form.find('#fontSize').parent().show();
+            form.find('#color').parent().show();
+            form.find('#fontWeight').parent().show();
+        } else {
+            form.find('#text').parent().hide();
+            form.find('#fontSize').parent().hide();
+            form.find('#color').parent().hide();
+            form.find('#fontWeight').parent().hide();
+        }
+
+        form.find('#eventsType').val(component.eventsType);
+        form.find('#eventsAction').val(component.eventsAction);
+        form.find('#defaultFocus').val(component.defaultFocus);
+        form.find('#leftId').val(component.leftId);
+        form.find('#rightId').val(component.rightId);
+        form.find('#upId').val(component.upId);
+        form.find('#downId').val(component.downId);
     };
 
     // 定义组件设置配置策略
     const componentStrategies = {
-        name: function (el, value) {
-            el.find('span').text(value);
-        },
         background: function (el, value) {
             el.find('.grid-stack-item-content').css('background', value);
         },
+        image: function (el, value) {
+            el.find('.grid-stack-item-content').css('background', `url(${value}) no-repeat center center`).css('background-size', 'cover');
+        },
         fontSize: function (el, value) {
             el.find('span').css('font-size', value + 'px');
         },
         color: function (el, value) {
             el.find('span').css('color', value);
         },
-        icon: function (el, value) {
-            el.find('i').attr('class', `fas ${value}`);
+        text: function (el, value) {
+            el.find('span').text(value);
+        },
+        fontWeight: function (el, value) {
+            el.find('span').css('font-weight', value);
         },
-        // detail, link不需要反显页面所有不需要修改dom
     };
 
     // 设置当前传递组件的视图展示
@@ -162,14 +261,20 @@
 
     // 定义映射关系：元素ID -> 事件类型 -> 组件属性
     const elementMappings = {
-        name: { event: 'blur', property: 'name' },
+        childrenType: { event: 'blur', property: 'childrenType' },
         background: { event: 'blur', property: 'background' },
+        image: { event: 'change', property: 'image' },
         fontSize: { event: 'blur', property: 'fontSize' },
         color: { event: 'blur', property: 'color' },
-        icon: { event: 'blur', property: 'icon' },
-        detail: { event: 'blur', property: 'detail' },
-        link: { event: 'blur', property: 'link' },
-        // icon: { event: 'change', property: 'icon' }, // select使用change
+        text: { event: 'blur', property: 'text' },
+        fontWeight: { event: 'blur', property: 'fontWeight' },
+        eventsType: { event: 'blur', property: 'eventsType' },
+        eventsAction: { event: 'blur', property: 'eventsAction' },
+        defaultFocus: { event: 'blur', property: 'defaultFocus' },
+        leftId: { event: 'change', property: 'leftId' },
+        rightId: { event: 'change', property: 'rightId' },
+        upId: { event: 'change', property: 'upId' },
+        downId: { event: 'change', property: 'downId' },
     };
 
     // 统一绑定函数
@@ -189,12 +294,44 @@
         });
     };
 
+    // 保存的时候计算x,y,w,h
+    var conputedInitData = function (type) {
+        if (type === 'save') {
+            let initDataCopy = JSON.parse(JSON.stringify(initData));
+            initDataCopy.children.forEach((item) => {
+                item.xCopy = item.x;
+                item.x = item.x * (1920 / 12);
+                item.yCopy = item.y;
+                item.y = item.y * cellHeight;
+
+                item.wCopy = item.w;
+                item.w = item.w * (1920 / 12);
+                if (!item.hasOwnProperty('h')) {
+                    item.h = 1;
+                }
+                item.hCopy = item.h;
+                item.h = item.h * cellHeight;
+            });
+            console.log(initDataCopy);
+            return initDataCopy;
+        }
+        if (type === 'init') {
+            initData.children.forEach((item) => {
+                item.x = item.xCopy;
+                item.y = item.yCopy;
+                item.w = item.wCopy;
+                item.h = item.hCopy;
+            });
+        }
+    };
+
     $('.save-container').click(function () {
         // grid.addWidget({ w: 2, content: 'item 1' });
-        console.log(grid.save());
-        console.log(grid);
+        // console.log(grid.save());
+        // console.log(grid);
         initData.children = grid.save();
-        localStorage.setItem('initData', JSON.stringify(initData));
+        console.log(initData);
+        localStorage.setItem('initData', JSON.stringify(conputedInitData('save')));
     });
 
     /** 执行方法 */