var arr1 = [
{
name: "options",
value: [
{
displayName: "卡片标题样式",
name: "cardTitleStyle",
value: [
{
displayName: "标题",
name: "title",
type: "text",
value: "热门党建活动"
},
{
displayName: "字体",
name: "fontFamily",
type: "font",
value: "思源黑体"
},
{
displayName: "字号",
name: "fontSize",
type: "text",
value: "18px"
},
{
displayName: "字体颜色",
name: "color",
type: "color",
value: "#000"
},
{
displayName: "字重",
name: "fontWeight",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
],
type: "select",
value: "bold"
},
{
displayName: "风格",
name: "fontStyle",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
],
type: "select",
value: "normal"
},
{
displayName: "对齐方式",
name: "justifyContent",
options: [
{ name: "左", value: "flex-start" },
{ name: "居中", value: "center" }
],
type: "select",
value: "flex-start"
}
]
},
{
displayName: "列表标题",
name: "listTitleStyle",
value: [
{
displayName: "字体",
name: "fontFamily",
type: "font",
value: "思源黑体"
},
{
displayName: "字号",
name: "fontSize",
type: "text",
value: "18px"
},
{
displayName: "字体颜色",
name: "color",
type: "color",
value: "#000"
},
{
displayName: "字重",
name: "fontWeight",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
],
type: "select",
value: "normal"
},
{
displayName: "风格",
name: "fontStyle",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
],
type: "select",
value: "normal"
}
]
},
{
displayName: "列表内容样式",
name: "listContentStyle",
value: [
{
displayName: "字体",
name: "fontFamily",
type: "font",
value: "思源黑体"
},
{
displayName: "字号",
name: "fontSize",
type: "text",
value: "14px"
},
{
displayName: "字体颜色",
name: "color",
type: "color",
value: "#8a8f99"
},
{
displayName: "字重",
name: "fontWeight",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
],
type: "select",
value: "normal"
},
{
displayName: "风格",
name: "fontStyle",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
],
type: "select",
value: "normal"
}
]
},
{
displayName: "列表时间样式",
name: "listTimeStyle",
value: [
{
displayName: "字体",
name: "fontFamily",
type: "font",
value: "思源黑体"
},
{
displayName: "字号",
name: "fontSize",
type: "text",
value: "14px"
},
{
displayName: "字体颜色",
name: "color",
type: "color",
value: "#8a8f99"
},
{
displayName: "字重",
name: "fontWeight",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
],
type: "select",
value: "normal"
},
{
displayName: "风格",
name: "fontStyle",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
],
type: "select",
value: "normal"
}
]
},
{
displayName: "背景",
name: "background",
value: [
{
displayName: "颜色",
name: "color",
type: "color",
value: "rgba(255,255,255,1)"
}
]
},
{
displayName: "卡片菜单项",
name: "popoverMenu",
value: [
{
displayName: "卡片guid",
name: "cardguid",
type: "text",
value: "391C98C0-2593-4F57-8BB6-143B45E52DF7"
},
{
displayName: "遮罩层",
name: "overlay",
type: "boolean",
value: false
},
{
displayName: "菜单主题",
name: "theme",
options: [
{ name: "黑", value: "dark" },
{ name: "白", value: "light" }
],
type: "radio",
value: "light"
},
{
template: {
displayName: "菜单项",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
type: "text",
value: ""
},
{
displayName: "菜单图标",
name: "imgSrc",
type: "text",
value: ""
}
]
},
displayName: "菜单项",
name: "menus",
dynamic: true,
type: "array",
value: [
{
displayName: "菜单项一",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
type: "text",
value: "订阅"
},
{
displayName: "图标路径",
name: "imgSrc",
type: "text",
value:
"http://172.29.3.14:8080/smallscreen-demo/smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.4/static/icon_gz.png"
}
]
},
{
displayName: "菜单项二",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
type: "text",
value: "发起红灯"
},
{
displayName: "图标路径",
name: "imgSrc",
type: "text",
value:
"http://172.29.3.14:8080/smallscreen-demo/smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.4/static/icon_redlight.png"
}
]
},
{
displayName: "菜单项三",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
type: "text",
value: "需求反馈"
},
{
displayName: "图标路径",
name: "imgSrc",
type: "text",
value:
"http://172.29.3.14:8080/smallscreen-demo/smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.4/static/icon_feedback.png"
}
]
},
{
displayName: "菜单项四",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
type: "text",
value: "圈阅"
},
{
displayName: "图标路径",
name: "imgSrc",
type: "text",
value:
"http://172.29.3.14:8080/smallscreen-demo/smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.4/static/icon_quanyue.png"
}
]
}
]
}
]
}
]
},
{
displayName: "交互",
name: "interaction",
value: [
{
template: {
displayName: "参数",
name: "callback",
value: [
{ displayName: "字段值", name: "field", type: "text", value: "" },
{ displayName: "变量名", name: "param", type: "text", value: "" }
]
},
displayName: "回调参数",
name: "callback",
dynamic: true,
type: "array",
value: []
},
{
template: {
displayName: "事件",
name: "event",
value: [
{
displayName: "事件类型",
name: "type",
options: [{ name: "鼠标单击", value: "click" }],
type: "select",
value: "click"
},
{
displayName: "动作",
name: "action",
options: [{ name: "页面跳转", value: "openpage" }],
type: "select",
value: "openpage"
},
{
displayName: "页面选择",
name: "page",
options: [],
type: "pageselect",
value: ""
}
]
},
displayName: "交互事件",
name: "events",
dynamic: true,
type: "array",
value: [
{
displayName: "事件一",
value: [
{
displayName: "事件类型",
name: "type",
options: [{ name: "鼠标单击", value: "click" }],
type: "select",
value: "click"
},
{
displayName: "动作",
name: "action",
options: [{ name: "页面跳转", value: "openpage" }],
type: "select",
value: "openpage"
},
{
displayName: "页面选择",
name: "page",
options: [],
type: "pageselect",
value: ""
}
]
},
{
displayName: "事件二",
value: [
{
displayName: "事件类型",
name: "type",
options: [{ name: "鼠标单击", value: "click" }],
type: "select",
value: "click"
},
{
displayName: "动作",
name: "action",
options: [{ name: "页面跳转", value: "openpage" }],
type: "select",
value: "openpage"
},
{
displayName: "页面选择",
name: "page",
options: [],
type: "pageselect",
value: ""
}
]
},
{
displayName: "事件三",
value: [
{
displayName: "事件类型",
name: "type",
options: [{ name: "鼠标单击", value: "click" }],
type: "select",
value: "click"
},
{
displayName: "动作",
name: "action",
options: [{ name: "页面跳转", value: "openpage" }],
type: "select",
value: "openpage"
},
{
displayName: "页面选择",
name: "page",
options: [],
type: "pageselect",
value: ""
}
]
}
]
}
]
}
];
var arr2 = [
{
name: "options",
value: [
{
displayName: "卡片标题样式",
name: "cardTitleStyle",
value: [
{
displayName: "标题",
name: "title",
value: "热门党建活动",
type: "text"
},
{
displayName: "字体",
name: "fontFamily",
value: "思源黑体",
type: "font"
},
{
displayName: "字号",
name: "fontSize",
value: "18px",
type: "text"
},
{
displayName: "字体颜色",
name: "color",
value: "#000",
type: "color"
},
{
displayName: "字重",
name: "fontWeight",
value: "bold",
type: "select",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
]
},
{
displayName: "风格",
name: "fontStyle",
value: "normal",
type: "select",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
]
},
{
displayName: "对齐方式",
name: "justifyContent",
value: "flex-start",
type: "select",
options: [
{ name: "左", value: "flex-start" },
{ name: "居中", value: "center" }
]
}
]
},
{
displayName: "列表标题",
name: "listTitleStyle",
value: [
{
displayName: "字体",
name: "fontFamily",
value: "思源黑体",
type: "font"
},
{
displayName: "字号",
name: "fontSize",
value: "18px",
type: "text"
},
{
displayName: "字体颜色",
name: "color",
value: "#000",
type: "color"
},
{
displayName: "字重",
name: "fontWeight",
value: "normal",
type: "select",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
]
},
{
displayName: "风格",
name: "fontStyle",
value: "normal",
type: "select",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
]
}
]
},
{
displayName: "列表内容样式",
name: "listContentStyle",
value: [
{
displayName: "字体",
name: "fontFamily",
value: "思源黑体",
type: "font"
},
{
displayName: "字号",
name: "fontSize",
value: "14px",
type: "text"
},
{
displayName: "字体颜色",
name: "color",
value: "#8a8f99",
type: "color"
},
{
displayName: "字重",
name: "fontWeight",
value: "normal",
type: "select",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
]
},
{
displayName: "风格",
name: "fontStyle",
value: "normal",
type: "select",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
]
}
]
},
{
displayName: "列表时间样式",
name: "listTimeStyle",
value: [
{
displayName: "字体",
name: "fontFamily",
value: "思源黑体",
type: "font"
},
{
displayName: "字号",
name: "fontSize",
value: "14px",
type: "text"
},
{
displayName: "字体颜色",
name: "color",
value: "#8a8f99",
type: "color"
},
{
displayName: "字重",
name: "fontWeight",
value: "normal",
type: "select",
options: [
{ name: "normal", value: "normal" },
{ name: "bold", value: "bold" },
{ name: "bolder", value: "bolder" },
{ name: "lighter", value: "lighter" }
]
},
{
displayName: "风格",
name: "fontStyle",
value: "normal",
type: "select",
options: [
{ name: "正常", value: "normal" },
{ name: "斜体", value: "italic" }
]
}
]
},
{
displayName: "背景",
name: "background",
value: [
{
displayName: "颜色",
name: "color",
value: "rgba(255,255,255,1)",
type: "color"
}
]
},
{
displayName: "卡片菜单项",
name: "popoverMenu",
value: [
{
displayName: "卡片guid",
name: "cardguid",
type: "text",
value: "391C98C0-2593-4F57-8BB6-143B45E52DF7"
},
{
displayName: "遮罩层",
name: "overlay",
value: false,
type: "boolean"
},
{
displayName: "菜单主题",
name: "theme",
value: "light",
type: "radio",
options: [
{ name: "黑", value: "dark" },
{ name: "白", value: "light" }
]
},
{
displayName: "菜单项",
name: "menus",
type: "array",
dynamic: true,
value: [
{
displayName: "菜单项一",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
value: "订阅",
type: "text"
},
{
displayName: "图标路径",
name: "imgSrc",
value:
"http://172.29.3.14:8080/smallscreen-demo//smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.5/static/icon_gz.png",
type: "text"
}
]
},
{
displayName: "菜单项二",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
value: "发起红灯",
type: "text"
},
{
displayName: "图标路径",
name: "imgSrc",
value:
"http://172.29.3.14:8080/smallscreen-demo//smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.5/static/icon_redlight.png",
type: "text"
}
]
},
{
displayName: "菜单项三",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
value: "需求反馈",
type: "text"
},
{
displayName: "图标路径",
name: "imgSrc",
value:
"http://172.29.3.14:8080/smallscreen-demo//smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.5/static/icon_feedback.png",
type: "text"
}
]
},
{
displayName: "菜单项四",
name: "menu",
value: [
{
displayName: "菜单名",
name: "text",
value: "圈阅",
type: "text"
},
{
displayName: "图标路径",
name: "imgSrc",
value:
"http://172.29.3.14:8080/smallscreen-demo//smallscreen/assets/bundle/widget/HotPartyBuildActivity/0.3.5/static/icon_quanyue.png",
type: "text"
}
]
}
],
template: {
name: "menu",
displayName: "菜单项",
value: [
{
name: "text",
displayName: "菜单名",
type: "text",
value: ""
},
{
name: "imgSrc",
displayName: "菜单图标",
type: "text",
value: ""
}
]
}
}
]
}
]
},
{
name: "interaction",
displayName: "交互",
value: [
{
name: "callback",
displayName: "回调参数",
type: "array",
dynamic: true,
value: [],
template: {
name: "callback",
displayName: "参数",
value: [
{ name: "field", displayName: "字段值", value: "", type: "text" },
{ name: "param", displayName: "变量名", type: "text", value: "" }
]
}
},
{
name: "events",
displayName: "交互事件",
type: "array",
dynamic: true,
value: [
{
displayName: "事件一",
value: [
{
name: "type",
displayName: "事件类型",
type: "select",
value: "click",
options: [{ name: "鼠标单击", value: "click" }]
},
{
name: "action",
displayName: "动作",
type: "select",
value: "openpage",
options: [{ name: "页面跳转", value: "openpage" }]
},
{
name: "page",
displayName: "页面选择",
type: "pageselect",
value: "",
options: []
},
{ name: "params", displayName: "参数", type: "text", value: "" }
]
},
{
displayName: "事件二",
value: [
{
name: "type",
displayName: "事件类型",
type: "select",
value: "click",
options: [{ name: "鼠标单击", value: "click" }]
},
{
name: "action",
displayName: "动作",
type: "select",
value: "openpage",
options: [{ name: "页面跳转", value: "openpage" }]
},
{
name: "page",
displayName: "页面选择",
type: "pageselect",
value: "",
options: []
},
{ name: "params", displayName: "参数", type: "text", value: "" }
]
},
{
displayName: "事件三",
value: [
{
name: "type",
displayName: "事件类型",
type: "select",
value: "click",
options: [{ name: "鼠标单击", value: "click" }]
},
{
name: "action",
displayName: "动作",
type: "select",
value: "openpage",
options: [{ name: "页面跳转", value: "openpage" }]
},
{
name: "page",
displayName: "页面选择",
type: "pageselect",
value: "",
options: []
},
{ name: "params", displayName: "参数", type: "text", value: "" }
]
}
],
template: {
name: "event",
displayName: "事件",
value: [
{
name: "type",
displayName: "事件类型",
type: "select",
value: "click",
options: [{ name: "鼠标单击", value: "click" }]
},
{
name: "action",
displayName: "动作",
type: "select",
value: "openpage",
options: [{ name: "页面跳转", value: "openpage" }]
},
{
name: "page",
displayName: "页面选择",
type: "pageselect",
value: "",
options: []
},
{ name: "params", displayName: "参数", type: "text", value: "" }
]
}
}
]
}
];
document.querySelector('.arr1').innerText = JSON.stringify(arr1, null, 2)
document.querySelector('.arr2').innerText = JSON.stringify(arr2, null, 2)
<div class="container">
<div style="width: 33%;">
arr1
<pre class="arr1">arr1</pre>
</div>
<div style="width: 33%;">
arr2
<pre class="arr2">arr2</pre>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}