MainContainer组件布局与背景色配置详解

"{\n \"component\": \"MainContainer\",\n \"type\": \"container\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"height\": \"100vh\"\n },\n \"backgroundColor\": \"#121212\",\n \"children\": [\n {\n \"component\": \"Header\",\n \"layout\": {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"padding\": \"8px 16px\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"{battery_}\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"14px\"\n }\n },\n {\n \"component\": \"Icon\",\n \"name\": \"bluetooth\",\n \"color\": \"#0066FF\",\n \"size\": \"20px\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"{time_s}\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n },\n {\n \"component\": \"MainContent\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\",\n \"padding\": \"20px\"\n },\n \"children\": [\n {\n \"component\": \"Navigation\",\n \"layout\": {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"width\": \"100%\",\n \"marginBottom\": \"20px\"\n },\n \"children\": [\n {\n \"component\": \"Button\",\n \"content\": \"<\",\n \"style\": {\n \"backgroundColor\": \"#444444\",\n \"color\": \"#FF9900\",\n \"borderRadius\": \"50%\",\n \"width\": \"40px\",\n \"height\": \"40px\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"20px\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"001\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"24px\",\n \"fontWeight\": \"bold\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \">\",\n \"style\": {\n \"backgroundColor\": \"#444444\",\n \"color\": \"#FF9900\",\n \"borderRadius\": \"50%\",\n \"width\": \"40px\",\n \"height\": \"40px\",\n \"display\": \"flex\",\n \"justifyContent\": \"center\",\n \"alignItems\": \"center\",\n \"fontSize\": \"20px\"\n }\n }\n ]\n },\n {\n \"component\": \"ContentArea\",\n \"layout\": {\n \"display\": \"flex\",\n \"justifyContent\": \"space-between\",\n \"width\": \"100%\"\n },\n \"children\": [\n {\n \"component\": \"Image\",\n \"src\": \"mechanical_arm.png\",\n \"style\": {\n \"width\": \"200px\",\n \"height\": \"150px\"\n }\n },\n {\n \"component\": \"StatusDisplay\",\n \"layout\": {\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"空闲\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"18px\",\n \"borderBottom\": \"2px solid #FFD700\",\n \"paddingBottom\": \"4px\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"空闲\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"18px\",\n \"borderBottom\": \"2px solid #FFD700\",\n \"paddingBottom\": \"4px\"\n }\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"component\": \"Footer\",\n \"layout\": {\n \"display\": \"flex\",\n \"justifyContent\": \"space-around\",\n \"padding\": \"10px\",\n \"backgroundColor\": \"#222222\"\n },\n \"children\": [\n {\n \"component\": \"Button\",\n \"content\": \"取消\",\n \"style\": {\n \"color\": \"#FF0000\",\n \"fontSize\": \"14px\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"返回\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"14px\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"选架\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"14px\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"二功能\",\n \"style\": {\n \"color\": \"#FFD700\",\n \"fontSize\": \"14px\",\n \"fontWeight\": \"bold\"\n }\n },\n {\n \"component\": \"Button\",\n \"content\": \"切换动作\",\n \"style\": {\n \"color\": \"#FFFFFF\",\n \"fontSize\": \"14px\"\n }\n }\n ]\n }\n ]\n}"